hybrid apps
Chakib Benziane
9 years ago
commit
5d525253c4
@ -0,0 +1,13 @@
|
||||
# http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
@ -0,0 +1,5 @@
|
||||
node_modules/
|
||||
bower_components/
|
||||
.sass-cache/
|
||||
.tmp/
|
||||
dist/
|
||||
@ -0,0 +1,35 @@
|
||||
{
|
||||
"globalstrict": true,
|
||||
"bitwise": true,
|
||||
"camelcase": true,
|
||||
"curly": true,
|
||||
"eqeqeq": true,
|
||||
"immed": true,
|
||||
"indent": 2,
|
||||
"latedef": true,
|
||||
"newcap": true,
|
||||
"noarg": true,
|
||||
"quotmark": "single",
|
||||
"regexp": true,
|
||||
"undef": true,
|
||||
"unused": true,
|
||||
"strict": true,
|
||||
"trailing": true,
|
||||
"smarttabs": true,
|
||||
"white": true,
|
||||
"validthis": true,
|
||||
"globals": {
|
||||
"angular": false,
|
||||
// Angular Mocks
|
||||
"inject": false,
|
||||
"module": false,
|
||||
// JASMINE
|
||||
"describe": false,
|
||||
"it": false,
|
||||
"before": false,
|
||||
"beforeEach": false,
|
||||
"after": false,
|
||||
"afterEach": false,
|
||||
"expect": false
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,59 @@
|
||||
{
|
||||
"generator-gulp-angular": {
|
||||
"props": {
|
||||
"angularVersion": "~1.3.4",
|
||||
"angularModules": [
|
||||
{
|
||||
"key": "animate",
|
||||
"module": "ngAnimate"
|
||||
}
|
||||
],
|
||||
"jQuery": {
|
||||
"key": "zepto"
|
||||
},
|
||||
"resource": {
|
||||
"key": "none",
|
||||
"module": null
|
||||
},
|
||||
"router": {
|
||||
"key": "ui-router",
|
||||
"module": "ui.router"
|
||||
},
|
||||
"ui": {
|
||||
"key": "angular-material",
|
||||
"module": "ngMaterial"
|
||||
},
|
||||
"cssPreprocessor": {
|
||||
"key": "node-sass",
|
||||
"extension": "scss"
|
||||
},
|
||||
"jsPreprocessor": {
|
||||
"key": "none",
|
||||
"extension": "js",
|
||||
"srcExtension": "js"
|
||||
},
|
||||
"htmlPreprocessor": {
|
||||
"key": "none",
|
||||
"extension": "html"
|
||||
},
|
||||
"bootstrapComponents": {
|
||||
"name": null,
|
||||
"version": null,
|
||||
"key": null,
|
||||
"module": null
|
||||
},
|
||||
"foundationComponents": {
|
||||
"name": null,
|
||||
"version": null,
|
||||
"key": null,
|
||||
"module": null
|
||||
},
|
||||
"paths": {
|
||||
"src": "src",
|
||||
"dist": "dist",
|
||||
"e2e": "e2e",
|
||||
"tmp": ".tmp"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "hybridApps",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"angular-animate": "~1.3.4",
|
||||
"zeptojs": "~1.1.6",
|
||||
"angular-ui-router": "~0.2.13",
|
||||
"angular-material": "master",
|
||||
"angular": "~1.3.4",
|
||||
"angular-hotkeys": "chieffancypants/angular-hotkeys#~1.4.5",
|
||||
"animate.css": "~3.2.6",
|
||||
"fontawesome": "~4.3.0",
|
||||
"transformation-matrix-js": "~2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"angular-mocks": "~1.3.4"
|
||||
},
|
||||
"resolutions": {
|
||||
"angular": "~1.3.4",
|
||||
"angular-material": "master"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
{
|
||||
"extends": "../.jshintrc",
|
||||
"globals": {
|
||||
"browser": false,
|
||||
"element": false,
|
||||
"by": false,
|
||||
"$": false,
|
||||
"$$": false
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
/**
|
||||
* This file uses the Page Object pattern to define the main page for tests
|
||||
* https://docs.google.com/presentation/d/1B6manhG0zEXkC-H-tPo2vwU06JhL8w9-XCF9oehXzAQ
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var MainPage = function() {
|
||||
this.jumbEl = element(by.css('.jumbotron'));
|
||||
this.h1El = this.jumbEl.element(by.css('h1'));
|
||||
this.imgEl = this.jumbEl.element(by.css('img'));
|
||||
this.thumbnailEls = element(by.css('body')).all(by.repeater('awesomeThing in awesomeThings'));
|
||||
};
|
||||
|
||||
module.exports = new MainPage();
|
||||
@ -0,0 +1,21 @@
|
||||
'use strict';
|
||||
|
||||
describe('The main view', function () {
|
||||
var page;
|
||||
|
||||
beforeEach(function () {
|
||||
browser.get('http://localhost:3000/index.html');
|
||||
page = require('./main.po');
|
||||
});
|
||||
|
||||
it('should include jumbotron with correct data', function() {
|
||||
expect(page.h1El.getText()).toBe('\'Allo, \'Allo!');
|
||||
expect(page.imgEl.getAttribute('src')).toMatch(/assets\/images\/yeoman.png$/);
|
||||
expect(page.imgEl.getAttribute('alt')).toBe('I\'m Yeoman');
|
||||
});
|
||||
|
||||
it('list more than 5 awesome things', function () {
|
||||
expect(page.thumbnailEls.count()).toBeGreaterThan(5);
|
||||
});
|
||||
|
||||
});
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"extends": "../.jshintrc",
|
||||
"node": true
|
||||
}
|
||||
@ -0,0 +1,87 @@
|
||||
'use strict';
|
||||
|
||||
var gulp = require('gulp');
|
||||
|
||||
var $ = require('gulp-load-plugins')({
|
||||
pattern: ['gulp-*', 'main-bower-files', 'uglify-save-license', 'del']
|
||||
});
|
||||
|
||||
module.exports = function(options) {
|
||||
gulp.task('partials', function () {
|
||||
return gulp.src([
|
||||
options.src + '/{app,components}/**/*.html',
|
||||
options.tmp + '/serve/{app,components}/**/*.html'
|
||||
])
|
||||
.pipe($.minifyHtml({
|
||||
empty: true,
|
||||
spare: true,
|
||||
quotes: true
|
||||
}))
|
||||
.pipe($.angularTemplatecache('templateCacheHtml.js', {
|
||||
module: 'hybridApps'
|
||||
}))
|
||||
.pipe(gulp.dest(options.tmp + '/partials/'));
|
||||
});
|
||||
|
||||
gulp.task('html', ['inject', 'partials'], function () {
|
||||
var partialsInjectFile = gulp.src(options.tmp + '/partials/templateCacheHtml.js', { read: false });
|
||||
var partialsInjectOptions = {
|
||||
starttag: '<!-- inject:partials -->',
|
||||
ignorePath: options.tmp + '/partials',
|
||||
addRootSlash: false
|
||||
};
|
||||
|
||||
var htmlFilter = $.filter('*.html');
|
||||
var jsFilter = $.filter('**/*.js');
|
||||
var cssFilter = $.filter('**/*.css');
|
||||
var assets;
|
||||
|
||||
return gulp.src(options.tmp + '/serve/*.html')
|
||||
.pipe($.inject(partialsInjectFile, partialsInjectOptions))
|
||||
.pipe(assets = $.useref.assets())
|
||||
.pipe($.rev())
|
||||
.pipe(jsFilter)
|
||||
.pipe($.ngAnnotate())
|
||||
.pipe($.uglify({ preserveComments: $.uglifySaveLicense })).on('error', options.errorHandler('Uglify'))
|
||||
.pipe(jsFilter.restore())
|
||||
.pipe(cssFilter)
|
||||
.pipe($.csso())
|
||||
.pipe(cssFilter.restore())
|
||||
.pipe(assets.restore())
|
||||
.pipe($.useref())
|
||||
.pipe($.revReplace())
|
||||
.pipe(htmlFilter)
|
||||
.pipe($.minifyHtml({
|
||||
empty: true,
|
||||
spare: true,
|
||||
quotes: true,
|
||||
conditionals: true
|
||||
}))
|
||||
.pipe(htmlFilter.restore())
|
||||
.pipe(gulp.dest(options.dist + '/'))
|
||||
.pipe($.size({ title: options.dist + '/', showFiles: true }));
|
||||
});
|
||||
|
||||
// Only applies for fonts from bower dependencies
|
||||
// Custom fonts are handled by the "other" task
|
||||
gulp.task('fonts', function () {
|
||||
return gulp.src($.mainBowerFiles())
|
||||
.pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
|
||||
.pipe($.flatten())
|
||||
.pipe(gulp.dest(options.dist + '/fonts/'));
|
||||
});
|
||||
|
||||
gulp.task('other', function () {
|
||||
return gulp.src([
|
||||
options.src + '/**/*',
|
||||
'!' + options.src + '/**/*.{html,css,js,scss}'
|
||||
])
|
||||
.pipe(gulp.dest(options.dist + '/'));
|
||||
});
|
||||
|
||||
gulp.task('clean', function (done) {
|
||||
$.del([options.dist + '/', options.tmp + '/'], done);
|
||||
});
|
||||
|
||||
gulp.task('build', ['html', 'fonts', 'other']);
|
||||
};
|
||||
@ -0,0 +1,35 @@
|
||||
'use strict';
|
||||
|
||||
var gulp = require('gulp');
|
||||
|
||||
var $ = require('gulp-load-plugins')();
|
||||
|
||||
var browserSync = require('browser-sync');
|
||||
|
||||
module.exports = function(options) {
|
||||
// Downloads the selenium webdriver
|
||||
gulp.task('webdriver-update', $.protractor.webdriver_update);
|
||||
|
||||
gulp.task('webdriver-standalone', $.protractor.webdriver_standalone);
|
||||
|
||||
function runProtractor (done) {
|
||||
|
||||
gulp.src(options.e2e + '/**/*.js')
|
||||
.pipe($.protractor.protractor({
|
||||
configFile: 'protractor.conf.js'
|
||||
}))
|
||||
.on('error', function (err) {
|
||||
// Make sure failed tests cause gulp to exit non-zero
|
||||
throw err;
|
||||
})
|
||||
.on('end', function () {
|
||||
// Close browser sync server
|
||||
browserSync.exit();
|
||||
done();
|
||||
});
|
||||
}
|
||||
|
||||
gulp.task('protractor', ['protractor:src']);
|
||||
gulp.task('protractor:src', ['serve:e2e', 'webdriver-update'], runProtractor);
|
||||
gulp.task('protractor:dist', ['serve:e2e-dist', 'webdriver-update'], runProtractor);
|
||||
};
|
||||
@ -0,0 +1,40 @@
|
||||
'use strict';
|
||||
|
||||
var gulp = require('gulp');
|
||||
|
||||
var $ = require('gulp-load-plugins')();
|
||||
|
||||
var wiredep = require('wiredep').stream;
|
||||
|
||||
module.exports = function(options) {
|
||||
gulp.task('inject', ['scripts', 'styles'], function () {
|
||||
var injectStyles = gulp.src([
|
||||
options.tmp + '/serve/{app,components}/**/*.css',
|
||||
'!' + options.tmp + '/serve/app/vendor.css'
|
||||
], { read: false });
|
||||
|
||||
|
||||
var injectScripts = gulp.src([
|
||||
options.src + '/{app,components}/**/*.js',
|
||||
'!' + options.src + '/{app,components}/**/*.spec.js',
|
||||
'!' + options.src + '/{app,components}/**/*.mock.js'
|
||||
])
|
||||
.pipe($.angularFilesort()).on('error', options.errorHandler('AngularFilesort'));
|
||||
|
||||
var injectOptions = {
|
||||
ignorePath: [options.src, options.tmp + '/serve'],
|
||||
addRootSlash: false
|
||||
};
|
||||
|
||||
var wiredepOptions = {
|
||||
directory: 'bower_components'
|
||||
};
|
||||
|
||||
return gulp.src(options.src + '/*.html')
|
||||
.pipe($.inject(injectStyles, injectOptions))
|
||||
.pipe($.inject(injectScripts, injectOptions))
|
||||
.pipe(wiredep(wiredepOptions))
|
||||
.pipe(gulp.dest(options.tmp + '/serve'));
|
||||
|
||||
});
|
||||
};
|
||||
@ -0,0 +1,67 @@
|
||||
/*jshint unused:false */
|
||||
|
||||
/***************
|
||||
|
||||
This file allow to configure a proxy system plugged into BrowserSync
|
||||
in order to redirect backend requests while still serving and watching
|
||||
files from the web project
|
||||
|
||||
IMPORTANT: The proxy is disabled by default.
|
||||
|
||||
If you want to enable it, watch at the configuration options and finally
|
||||
change the `module.exports` at the end of the file
|
||||
|
||||
***************/
|
||||
|
||||
'use strict';
|
||||
|
||||
var httpProxy = require('http-proxy');
|
||||
var chalk = require('chalk');
|
||||
|
||||
/*
|
||||
* Location of your backend server
|
||||
*/
|
||||
var proxyTarget = 'http://server/context/';
|
||||
|
||||
var proxy = httpProxy.createProxyServer({
|
||||
target: proxyTarget
|
||||
});
|
||||
|
||||
proxy.on('error', function(error, req, res) {
|
||||
res.writeHead(500, {
|
||||
'Content-Type': 'text/plain'
|
||||
});
|
||||
|
||||
console.error(chalk.red('[Proxy]'), error);
|
||||
});
|
||||
|
||||
/*
|
||||
* The proxy middleware is an Express middleware added to BrowserSync to
|
||||
* handle backend request and proxy them to your backend.
|
||||
*/
|
||||
function proxyMiddleware(req, res, next) {
|
||||
/*
|
||||
* This test is the switch of each request to determine if the request is
|
||||
* for a static file to be handled by BrowserSync or a backend request to proxy.
|
||||
*
|
||||
* The existing test is a standard check on the files extensions but it may fail
|
||||
* for your needs. If you can, you could also check on a context in the url which
|
||||
* may be more reliable but can't be generic.
|
||||
*/
|
||||
if (/\.(html|css|js|png|jpg|jpeg|gif|ico|xml|rss|txt|eot|svg|ttf|woff|woff2|cur)(\?((r|v|rel|rev)=[\-\.\w]*)?)?$/.test(req.url)) {
|
||||
next();
|
||||
} else {
|
||||
proxy.web(req, res);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* This is where you activate or not your proxy.
|
||||
*
|
||||
* The first line activate if and the second one ignored it
|
||||
*/
|
||||
|
||||
//module.exports = [proxyMiddleware];
|
||||
module.exports = function() {
|
||||
return [];
|
||||
};
|
||||
@ -0,0 +1,59 @@
|
||||
'use strict';
|
||||
|
||||
var gulp = require('gulp');
|
||||
var browserSync = require('browser-sync');
|
||||
var browserSyncSpa = require('browser-sync-spa');
|
||||
|
||||
var util = require('util');
|
||||
|
||||
var middleware = require('./proxy');
|
||||
|
||||
module.exports = function(options) {
|
||||
|
||||
function browserSyncInit(baseDir, browser) {
|
||||
browser = browser === undefined ? 'default' : browser;
|
||||
|
||||
var routes = null;
|
||||
if(baseDir === options.src || (util.isArray(baseDir) && baseDir.indexOf(options.src) !== -1)) {
|
||||
routes = {
|
||||
'/bower_components': 'bower_components',
|
||||
'/ugliest-website': 'src/ugliest-website'
|
||||
};
|
||||
}
|
||||
|
||||
var server = {
|
||||
baseDir: baseDir,
|
||||
routes: routes
|
||||
};
|
||||
|
||||
if(middleware.length > 0) {
|
||||
server.middleware = middleware;
|
||||
}
|
||||
|
||||
browserSync.instance = browserSync.init({
|
||||
startPath: '/',
|
||||
server: server,
|
||||
browser: browser
|
||||
});
|
||||
}
|
||||
|
||||
browserSync.use(browserSyncSpa({
|
||||
selector: '[ng-app]'// Only needed for angular apps
|
||||
}));
|
||||
|
||||
gulp.task('serve', ['watch'], function () {
|
||||
browserSyncInit([options.tmp + '/serve', options.src]);
|
||||
});
|
||||
|
||||
gulp.task('serve:dist', ['build'], function () {
|
||||
browserSyncInit(options.dist);
|
||||
});
|
||||
|
||||
gulp.task('serve:e2e', ['inject'], function () {
|
||||
browserSyncInit([options.tmp + '/serve', options.src], []);
|
||||
});
|
||||
|
||||
gulp.task('serve:e2e-dist', ['build'], function () {
|
||||
browserSyncInit(options.dist, []);
|
||||
});
|
||||
};
|
||||
@ -0,0 +1,61 @@
|
||||
'use strict';
|
||||
|
||||
var gulp = require('gulp');
|
||||
|
||||
var $ = require('gulp-load-plugins')();
|
||||
|
||||
var wiredep = require('wiredep');
|
||||
var karma = require('karma');
|
||||
var concat = require('concat-stream');
|
||||
var _ = require('lodash');
|
||||
|
||||
module.exports = function(options) {
|
||||
function listFiles(callback) {
|
||||
var bowerDeps = wiredep({
|
||||
directory: 'bower_components',
|
||||
dependencies: true,
|
||||
devDependencies: true
|
||||
});
|
||||
|
||||
var specFiles = [
|
||||
options.src + '/**/*.spec.js',
|
||||
options.src + '/**/*.mock.js'
|
||||
];
|
||||
|
||||
var htmlFiles = [
|
||||
options.src + '/**/*.html'
|
||||
];
|
||||
|
||||
var srcFiles = [
|
||||
options.src + '/{app,components}/**/*.js'
|
||||
].concat(specFiles.map(function(file) {
|
||||
return '!' + file;
|
||||
}));
|
||||
|
||||
|
||||
gulp.src(srcFiles)
|
||||
.pipe(concat(function(files) {
|
||||
callback(bowerDeps.js
|
||||
.concat(_.pluck(files, 'path'))
|
||||
.concat(htmlFiles)
|
||||
.concat(specFiles));
|
||||
}));
|
||||
}
|
||||
|
||||
function runTests (singleRun, done) {
|
||||
listFiles(function(files) {
|
||||
karma.server.start({
|
||||
configFile: __dirname + '/../karma.conf.js',
|
||||
files: files,
|
||||
singleRun: singleRun
|
||||
}, done);
|
||||
});
|
||||
}
|
||||
|
||||
gulp.task('test', ['scripts'], function(done) {
|
||||
runTests(true, done);
|
||||
});
|
||||
gulp.task('test:auto', ['watch'], function(done) {
|
||||
runTests(false, done);
|
||||
});
|
||||
};
|
||||
@ -0,0 +1,38 @@
|
||||
'use strict';
|
||||
|
||||
var gulp = require('gulp');
|
||||
var browserSync = require('browser-sync');
|
||||
|
||||
function isOnlyChange(event) {
|
||||
return event.type === 'changed';
|
||||
}
|
||||
|
||||
module.exports = function(options) {
|
||||
gulp.task('watch', ['inject'], function () {
|
||||
|
||||
gulp.watch([options.src + '/*.html', 'bower.json'], ['inject']);
|
||||
|
||||
gulp.watch([
|
||||
options.src + '/{app,components}/**/*.css',
|
||||
options.src + '/{app,components}/**/*.scss'
|
||||
], function(event) {
|
||||
if(isOnlyChange(event)) {
|
||||
gulp.start('styles');
|
||||
} else {
|
||||
gulp.start('inject');
|
||||
}
|
||||
});
|
||||
|
||||
gulp.watch(options.src + '/{app,components}/**/*.js', function(event) {
|
||||
if(isOnlyChange(event)) {
|
||||
gulp.start('scripts');
|
||||
} else {
|
||||
gulp.start('inject');
|
||||
}
|
||||
});
|
||||
|
||||
gulp.watch(options.src + '/{app,components}/**/*.html', function(event) {
|
||||
browserSync.reload(event.path);
|
||||
});
|
||||
});
|
||||
};
|
||||
@ -0,0 +1,29 @@
|
||||
'use strict';
|
||||
|
||||
var gulp = require('gulp');
|
||||
var gutil = require('gulp-util');
|
||||
var _ = require('lodash');
|
||||
var wrench = require('wrench');
|
||||
|
||||
var options = {
|
||||
src: 'src',
|
||||
dist: 'dist',
|
||||
tmp: '.tmp',
|
||||
e2e: 'e2e',
|
||||
errorHandler: function(title) {
|
||||
return function(err) {
|
||||
gutil.log(gutil.colors.red('[' + title + ']'), err.toString());
|
||||
this.emit('end');
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
wrench.readdirSyncRecursive('./gulp').filter(function(file) {
|
||||
return (/\.(js|coffee)$/i).test(file);
|
||||
}).map(function(file) {
|
||||
require('./gulp/' + file)(options);
|
||||
});
|
||||
|
||||
gulp.task('default', ['clean'], function () {
|
||||
gulp.start('build');
|
||||
});
|
||||
@ -0,0 +1,43 @@
|
||||
'use strict';
|
||||
|
||||
module.exports = function(config) {
|
||||
|
||||
var configuration = {
|
||||
autoWatch : false,
|
||||
|
||||
frameworks: ['jasmine'],
|
||||
|
||||
ngHtml2JsPreprocessor: {
|
||||
stripPrefix: 'src/',
|
||||
moduleName: 'gulpAngular'
|
||||
},
|
||||
|
||||
browsers : ['PhantomJS'],
|
||||
|
||||
plugins : [
|
||||
'karma-phantomjs-launcher',
|
||||
'karma-jasmine',
|
||||
'karma-ng-html2js-preprocessor'
|
||||
],
|
||||
|
||||
preprocessors: {
|
||||
'src/**/*.html': ['ng-html2js']
|
||||
}
|
||||
};
|
||||
|
||||
// This block is needed to execute Chrome on Travis
|
||||
// If you ever plan to use Chrome and Travis, you can keep it
|
||||
// If not, you can safely remove it
|
||||
// https://github.com/karma-runner/karma/issues/1144#issuecomment-53633076
|
||||
if(configuration.browsers[0] === 'Chrome' && process.env.TRAVIS) {
|
||||
configuration.customLaunchers = {
|
||||
'chrome-travis-ci': {
|
||||
base: 'Chrome',
|
||||
flags: ['--no-sandbox']
|
||||
}
|
||||
};
|
||||
configuration.browsers = ['chrome-travis-ci'];
|
||||
}
|
||||
|
||||
config.set(configuration);
|
||||
};
|
||||
@ -0,0 +1,58 @@
|
||||
{
|
||||
"name": "hybridApps",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"pcejs-macplus": "^0.1.5",
|
||||
"pcejs-util": "^0.1.0"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "gulp test"
|
||||
},
|
||||
"devDependencies": {
|
||||
"gulp": "~3.8.10",
|
||||
"gulp-autoprefixer": "~2.1.0",
|
||||
"gulp-angular-templatecache": "~1.5.0",
|
||||
"del": "~1.1.1",
|
||||
"lodash": "~3.2.0",
|
||||
"gulp-csso": "~1.0.0",
|
||||
"gulp-filter": "~2.0.2",
|
||||
"gulp-flatten": "~0.0.4",
|
||||
"gulp-jshint": "~1.9.0",
|
||||
"gulp-load-plugins": "~0.8.0",
|
||||
"gulp-size": "~1.2.0",
|
||||
"gulp-uglify": "~1.1.0",
|
||||
"gulp-useref": "~1.1.0",
|
||||
"gulp-util": "~3.0.2",
|
||||
"gulp-ng-annotate": "~0.5.2",
|
||||
"gulp-replace": "~0.5.0",
|
||||
"gulp-rename": "~1.2.0",
|
||||
"gulp-rev": "~3.0.1",
|
||||
"gulp-rev-replace": "~0.3.1",
|
||||
"gulp-minify-html": "~0.1.7",
|
||||
"gulp-inject": "~1.1.1",
|
||||
"gulp-protractor": "~0.0.12",
|
||||
"gulp-sourcemaps": "~1.3.0",
|
||||
"gulp-sass": "~1.3.0",
|
||||
"gulp-angular-filesort": "~1.0.4",
|
||||
"main-bower-files": "~2.5.0",
|
||||
"merge-stream": "~0.1.7",
|
||||
"jshint-stylish": "~1.0.0",
|
||||
"wiredep": "~2.2.0",
|
||||
"karma": "~0.12.31",
|
||||
"karma-jasmine": "~0.3.1",
|
||||
"karma-phantomjs-launcher": "~0.1.4",
|
||||
"karma-ng-html2js-preprocessor": "~0.1.2",
|
||||
"concat-stream": "~1.4.7",
|
||||
"require-dir": "~0.1.0",
|
||||
"browser-sync": "~2.1.4",
|
||||
"browser-sync-spa": "~1.0.1",
|
||||
"http-proxy": "~1.8.0",
|
||||
"chalk": "~0.5.1",
|
||||
"protractor": "~1.7.0",
|
||||
"uglify-save-license": "~0.4.1",
|
||||
"wrench": "~1.5.8"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,174 @@
|
||||
# mac-plus.cfg
|
||||
|
||||
path = "roms"
|
||||
path = "-."
|
||||
|
||||
memtest = 0
|
||||
|
||||
cpu {
|
||||
model = "68000"
|
||||
speed = 2
|
||||
}
|
||||
|
||||
ram {
|
||||
address = 0x000000
|
||||
size = 1024K
|
||||
}
|
||||
|
||||
rom {
|
||||
file = "mac-plus.rom"
|
||||
address = 0x400000
|
||||
size = 256K
|
||||
}
|
||||
|
||||
rom {
|
||||
file = "macplus-pcex.rom"
|
||||
address = 0xf80000
|
||||
size = 256K
|
||||
}
|
||||
|
||||
keyboard {
|
||||
model = 7
|
||||
intl = 0
|
||||
}
|
||||
|
||||
rtc {
|
||||
file = "mac-plus-pram.dat"
|
||||
realtime = 1
|
||||
}
|
||||
|
||||
sony {
|
||||
insert_delay = 5
|
||||
# insert_delay_1 = 0
|
||||
}
|
||||
|
||||
serial {
|
||||
port = 0
|
||||
|
||||
driver = "null"
|
||||
# driver = "posix:file=ser_a.out"
|
||||
# driver = "pty:symlink=ser_a"
|
||||
# driver = "stdio:file=ser_a.out"
|
||||
# driver = "tcp:port=5556"
|
||||
# driver = "tios:file=/dev/ttyUSB0:log=ser_a.log"
|
||||
}
|
||||
|
||||
serial {
|
||||
port = 1
|
||||
|
||||
driver = "null"
|
||||
# driver = "stdio:file=ser_b.out"
|
||||
}
|
||||
|
||||
sound {
|
||||
driver = "null"
|
||||
# lowpass = 8000
|
||||
|
||||
# # driver = "oss:dev=/dev/dsp:lowpass=0:wav=sound.wav:wavfilter=0"
|
||||
# driver = "sdl:lowpass=0"
|
||||
}
|
||||
|
||||
terminal {
|
||||
driver = "sdl"
|
||||
|
||||
# escape = "CtrlRight"
|
||||
|
||||
scale = 1
|
||||
border = 0
|
||||
|
||||
aspect_x = 3
|
||||
aspect_y = 2
|
||||
}
|
||||
|
||||
# terminal {
|
||||
# driver = "x11"
|
||||
|
||||
# # escape = "CtrlRight"
|
||||
|
||||
# scale = 2
|
||||
|
||||
# aspect_x = 3
|
||||
# aspect_y = 2
|
||||
|
||||
# mouse_mul_x = 1
|
||||
# mouse_div_x = 2
|
||||
# mouse_mul_y = 1
|
||||
# mouse_div_y = 2
|
||||
# }
|
||||
|
||||
scsi {
|
||||
# address = 0x580000
|
||||
# size = 0x1000
|
||||
|
||||
device {
|
||||
id = 6
|
||||
drive = 0x80
|
||||
|
||||
vendor = " SEAGATE"
|
||||
product = " ST225N"
|
||||
}
|
||||
|
||||
device {
|
||||
id = 0
|
||||
drive = 0x81
|
||||
|
||||
# CHS = 615/4/17
|
||||
vendor = " SEAGATE"
|
||||
product = " ST225N"
|
||||
}
|
||||
}
|
||||
|
||||
disk {
|
||||
drive = 1
|
||||
type = "auto"
|
||||
# file = "fd1.dsk"
|
||||
# file = "fd1.img"
|
||||
optional = 1
|
||||
}
|
||||
|
||||
disk {
|
||||
drive = 2
|
||||
type = "auto"
|
||||
# file = "fd1.image"
|
||||
# file = "fd1.pfdc"
|
||||
# file = "fd1.img"
|
||||
optional = 1
|
||||
}
|
||||
|
||||
# disk {
|
||||
# drive = 3
|
||||
# type = "auto"
|
||||
# # file = "fd2.image"
|
||||
# # file = "fd2.pfdc"
|
||||
# # file = "fd2.img"
|
||||
# file = "otd2.psi"
|
||||
# optional = 1
|
||||
# }
|
||||
|
||||
# disk {
|
||||
# drive = 3
|
||||
# type = "auto"
|
||||
# file = "fd3.image"
|
||||
# file = "fd3.pfdc"
|
||||
# file = "fd3.img"
|
||||
# optional = 1
|
||||
# }
|
||||
|
||||
disk {
|
||||
drive = 0x80
|
||||
type = "auto"
|
||||
# file = "hd1.img"
|
||||
file = "hd1.qed"
|
||||
# cow = "hd1.cow"
|
||||
optional = 0
|
||||
}
|
||||
|
||||
disk {
|
||||
drive = 0x81
|
||||
type = "auto"
|
||||
# file = "hd2.pimg"
|
||||
# file = "hd2.qed"
|
||||
# file = "hd2.img"
|
||||
# cow = "hd2.cow"
|
||||
optional = 0
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
'use strict';
|
||||
|
||||
var paths = require('./.yo-rc.json')['generator-gulp-angular'].props.paths;
|
||||
|
||||
// An example configuration file.
|
||||
exports.config = {
|
||||
// The address of a running selenium server.
|
||||
//seleniumAddress: 'http://localhost:4444/wd/hub',
|
||||
//seleniumServerJar: deprecated, this should be set on node_modules/protractor/config.json
|
||||
|
||||
// Capabilities to be passed to the webdriver instance.
|
||||
capabilities: {
|
||||
'browserName': 'chrome'
|
||||
},
|
||||
|
||||
// Spec patterns are relative to the current working directly when
|
||||
// protractor is called.
|
||||
specs: [paths.e2e + '/**/*.js'],
|
||||
|
||||
// Options to be passed to Jasmine-node.
|
||||
jasmineNodeOpts: {
|
||||
showColors: true,
|
||||
defaultTimeoutInterval: 30000
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Page Not Found :(</title>
|
||||
<style>
|
||||
::-moz-selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
html {
|
||||
padding: 30px 10px;
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
color: #737373;
|
||||
background: #f0f0f0;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
html,
|
||||
input {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 500px;
|
||||
_width: 500px;
|
||||
padding: 30px 20px 50px;
|
||||
border: 1px solid #b3b3b3;
|
||||
border-radius: 4px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff;
|
||||
background: #fcfcfc;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 10px;
|
||||
font-size: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 span {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 1.5em 0 0.5em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0 0 0 40px;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 380px;
|
||||
_width: 380px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* google search */
|
||||
|
||||
#goog-fixurl ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#goog-fixurl form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#goog-wm-qt,
|
||||
#goog-wm-sb {
|
||||
border: 1px solid #bbb;
|
||||
font-size: 16px;
|
||||
line-height: normal;
|
||||
vertical-align: top;
|
||||
color: #444;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#goog-wm-qt {
|
||||
width: 220px;
|
||||
height: 20px;
|
||||
padding: 5px;
|
||||
margin: 5px 10px 0 0;
|
||||
box-shadow: inset 0 1px 1px #ccc;
|
||||
}
|
||||
|
||||
#goog-wm-sb {
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
margin: 5px 0 0;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background-color: #f5f5f5;
|
||||
background-image: -webkit-linear-gradient(rgba(255,255,255,0), #f1f1f1);
|
||||
background-image: -moz-linear-gradient(rgba(255,255,255,0), #f1f1f1);
|
||||
background-image: -ms-linear-gradient(rgba(255,255,255,0), #f1f1f1);
|
||||
background-image: -o-linear-gradient(rgba(255,255,255,0), #f1f1f1);
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
*overflow: visible;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
#goog-wm-sb:hover,
|
||||
#goog-wm-sb:focus {
|
||||
border-color: #aaa;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
#goog-wm-qt:hover,
|
||||
#goog-wm-qt:focus {
|
||||
border-color: #105cb6;
|
||||
outline: 0;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
input::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Not found <span>:(</span></h1>
|
||||
<p>Sorry, but the page you were trying to view does not exist.</p>
|
||||
<p>It looks like this was the result of either:</p>
|
||||
<ul>
|
||||
<li>a mistyped address</li>
|
||||
<li>an out-of-date link</li>
|
||||
</ul>
|
||||
<script>
|
||||
var GOOG_FIXURL_LANG = (navigator.language || '').slice(0,2),GOOG_FIXURL_SITE = location.host;
|
||||
</script>
|
||||
<script src="//linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,47 @@
|
||||
'use strict';
|
||||
|
||||
angular.module('hybridApps', ['ngAnimate', 'ui.router', 'ngMaterial', 'cfp.hotkeys'])
|
||||
.config(function ($stateProvider, $urlRouterProvider) {
|
||||
$stateProvider
|
||||
.state('slides', {
|
||||
url: '/slides',
|
||||
templateUrl: 'app/main/main.html',
|
||||
controller: 'MainCtrl'
|
||||
})
|
||||
.state('slides.slide', {
|
||||
url: '/:slideId',
|
||||
templateUrl: function(params) {
|
||||
return 'app/main/slide_' + params.slideId + '.html';
|
||||
},
|
||||
controller: 'slideCtrl'
|
||||
});
|
||||
|
||||
$urlRouterProvider.otherwise('/slides/1');
|
||||
})
|
||||
.run(function(){
|
||||
|
||||
var macplus = require('pcejs-macplus')
|
||||
var utils = require('pcejs-util')
|
||||
|
||||
angular.element(document).ready(function(){
|
||||
// add a loading progress bar. not required, but good ux
|
||||
var loadingStatus = utils.loadingStatus(document.querySelector('.pcejs-loading-status'))
|
||||
|
||||
macplus({
|
||||
'arguments': ['-c','pce-config.cfg','-r'],
|
||||
autoloadFiles: [
|
||||
'macplus-pcex.rom',
|
||||
'mac-plus.rom',
|
||||
'hd1.qed',
|
||||
'pce-config.cfg',
|
||||
],
|
||||
print: console.log.bind(console),
|
||||
printErr: console.warn.bind(console),
|
||||
canvas: document.querySelector('.pcejs-canvas'),
|
||||
monitorRunDependencies: function (remainingDependencies) {
|
||||
loadingStatus.update(remainingDependencies)
|
||||
},
|
||||
})
|
||||
})
|
||||
})
|
||||
;
|
||||
@ -0,0 +1,629 @@
|
||||
|
||||
/*Colors*/
|
||||
|
||||
$purple: #9b7fe6;
|
||||
$yellow: #f3d27c;
|
||||
$green: #5fa050;
|
||||
|
||||
$primary: $purple;
|
||||
$secondary: $purple;
|
||||
$big-li: 2.0em;
|
||||
$hybrid-color: $secondary;
|
||||
|
||||
md-sidenav {
|
||||
max-width: 80%;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.md-sidenav-left {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
font-family: 'Droid Sans';
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
li {
|
||||
list-style: none;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $purple;
|
||||
font-size: .5em;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
.pcejs {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
font-family: sans-serif;
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
border: 0px none;
|
||||
padding: 0;
|
||||
}
|
||||
.pcejs-container { margin-top: 32px }
|
||||
/* macplus has mouse integration, so we can hide the host mouse */
|
||||
.pcejs-canvas {
|
||||
cursor: none;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
[layout=row] {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
md-content.slides {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/*UI VIEW*/
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.slide {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/*alan turing */
|
||||
.slide-2 {
|
||||
background-image: url('/assets/images/turing_machine.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
|
||||
/*GUI Macintosh*/
|
||||
.slide-3 {
|
||||
background-image: url('/assets/images/macintosh.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 100%;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.slide-4, .nav-left {
|
||||
.processing {
|
||||
color: $yellow;
|
||||
}
|
||||
.render {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border: 1px solid lightgray;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.object {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
border-radius: 100%;
|
||||
background-color: lightblue;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-5 {
|
||||
overflow-y: hidden;
|
||||
.information-model {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('/assets/images/information_model.png');
|
||||
background-size: 50% auto;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.information-software {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.manipulation {
|
||||
> div {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&:first-child {
|
||||
background-image: url('/assets/images/manipulation_model.png');
|
||||
background-size: 50% auto;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slide-7 {
|
||||
li {
|
||||
line-height: 2em;
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-10 {
|
||||
@extend .slide-5;
|
||||
.information, .manipulation, .communication {
|
||||
> div:first-child {
|
||||
background-size: 30% auto;
|
||||
}
|
||||
li {
|
||||
font-size: 1.5em;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.communication {
|
||||
@extend .manipulation;
|
||||
|
||||
|
||||
>div:first-child {
|
||||
|
||||
transition: all 100ms ease-in-out;
|
||||
background-image: url('/assets/images/communication_model.png');
|
||||
/*background-size: 50% auto;*/
|
||||
/*background-position: center center;*/
|
||||
/*background-repeat: no-repeat;*/
|
||||
/*left: 0px;*/
|
||||
&:hover {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.slide-11 {
|
||||
.bleeding {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-image: url('/assets/images/bleeding_eyes.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-12 {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.slide-13 {
|
||||
li {
|
||||
font-size: $big-li;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-14 {
|
||||
|
||||
@extend .slide-12;
|
||||
}
|
||||
|
||||
|
||||
.slide-19 {
|
||||
overflow-y: hidden;
|
||||
.native-wrapper {
|
||||
width: 30%;
|
||||
height: 400px;
|
||||
background-color: lightblue;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
|
||||
.browser-engine {
|
||||
width: 80%;
|
||||
height: 60%;
|
||||
background-color: lightgreen;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
transform: translate(-50%, 0);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slide-20 {
|
||||
@extend .slide-19;
|
||||
.hardware-bridge {
|
||||
width: 80%;
|
||||
height: 55%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.native-wrapper {
|
||||
width: 60%;
|
||||
|
||||
&.mobile {
|
||||
width: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
.browser-engine {
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
}
|
||||
|
||||
.hybrid-bg {
|
||||
background-color: $hybrid-color;
|
||||
}
|
||||
|
||||
.hybrid-cl {
|
||||
color: $hybrid-color;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-21 {
|
||||
background-image: url('/assets/images/steam-client.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 80%;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.slide-22 {
|
||||
background-image: url('/assets/images/slack.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 80%;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
|
||||
.slide-23 {
|
||||
> div:first-child {
|
||||
background-image: url('/assets/images/phonegap_vs_webview.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 75%;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
>div:not(:first-child) {
|
||||
background-image: url('/assets/images/nw_vs_hybrid.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 75%;
|
||||
background-position: center center;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.slide-30 {
|
||||
|
||||
|
||||
.render {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid lightgray;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.object {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
top: 75px;
|
||||
left: 0px;
|
||||
border-radius: 100%;
|
||||
background-color: lightblue;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.rendering-container {
|
||||
> div:nth-child(2) {
|
||||
/*border: 2px dashed;*/
|
||||
}
|
||||
}
|
||||
|
||||
.cpu, .gpu{
|
||||
position: relative;
|
||||
|
||||
.js, .rendering, .rendering-cpu, .rendering-gpu {
|
||||
opacity: .7;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.js {
|
||||
animation-name: js_color;
|
||||
animation-duration: 4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 6s;
|
||||
}
|
||||
|
||||
.rendering {
|
||||
animation-name: rendering_color;
|
||||
animation-duration: 4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 6s;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.rendering-screen {
|
||||
animation-name: rendering_screen;
|
||||
animation-duration: 4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.dom-update {
|
||||
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 100%;
|
||||
background-color: lightgray;
|
||||
animation-name: dom_update;
|
||||
animation-duration: 4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 6s;
|
||||
|
||||
}
|
||||
|
||||
.layout {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 100%;
|
||||
background-color: lightgray;
|
||||
animation-name: layout_render;
|
||||
animation-duration: 4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 6s;
|
||||
}
|
||||
|
||||
.paint {
|
||||
border: 2px solid transparent;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 100%;
|
||||
background-color: lightgray;
|
||||
animation-name: paint_color;
|
||||
animation-duration: 4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 6s;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes paint_color {
|
||||
0% {
|
||||
background-color: lightgray;
|
||||
}
|
||||
45% {
|
||||
background-color: lightgray;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
background-color: $green;
|
||||
border: 2px solid transparent;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
75% {
|
||||
border: 2px solid red;
|
||||
}
|
||||
100% {
|
||||
background-color: lightgray;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-31 {
|
||||
overflow-x: hidden;
|
||||
@extend .slide-30;
|
||||
.cpu, .gpu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.js {
|
||||
height: 100% !important;
|
||||
left: 3% !important;
|
||||
transform: translateX(0%) !important;
|
||||
}
|
||||
|
||||
.rendering-cpu {
|
||||
height: 100% !important;
|
||||
left: 3% !important;
|
||||
transform: translateX(0%) !important;
|
||||
animation-name: rendering_color_cpu;
|
||||
animation-duration: 4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 6s;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.rendering-gpu {
|
||||
height: 100% !important;
|
||||
left: 100% !important;
|
||||
transform: translateX(-100%) !important;
|
||||
animation-name: rendering_color_gpu;
|
||||
animation-duration: 4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 6s;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-32 {
|
||||
@extend .slide-31;
|
||||
}
|
||||
|
||||
.slide-37 {
|
||||
>div:nth-child(2) {
|
||||
background-image: url('/assets/images/gl_monolith.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-38 {
|
||||
>div:nth-child(2) {
|
||||
background-image: url('/assets/images/gl_next.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes dom_update {
|
||||
20% {
|
||||
background-color: lightgray;
|
||||
transform: scale(1);
|
||||
}
|
||||
22% {
|
||||
background-color: $purple;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
59% {
|
||||
background-color: lightgray;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes layout_render {
|
||||
0% {
|
||||
|
||||
background-color: lightgray;
|
||||
transform: scale(1);
|
||||
}
|
||||
30% {
|
||||
background-color: lightgray;
|
||||
transform: scale(1);
|
||||
}
|
||||
40% {
|
||||
background-color: $purple;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
50% {
|
||||
background-color: lightgray;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes js_color {
|
||||
0% {
|
||||
background-color: transparent;
|
||||
}
|
||||
12.5% {
|
||||
background-color: $yellow;
|
||||
}
|
||||
25% {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@-webkit-keyframes rendering_color {
|
||||
0% {
|
||||
background-color: transparent;
|
||||
/*border: 2px solid transparent;*/
|
||||
}
|
||||
20% {
|
||||
|
||||
/*border: 2px solid transparent;*/
|
||||
background-color: transparent;
|
||||
}
|
||||
22% {
|
||||
background-color: $green;
|
||||
/*border: 2px solid red;*/
|
||||
}
|
||||
70% {
|
||||
background-color: $green;
|
||||
}
|
||||
100% {
|
||||
background-color: transparent;
|
||||
/*border: 2px solid transparent;*/
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@-webkit-keyframes rendering_color_cpu {
|
||||
0% {
|
||||
background-color: transparent;
|
||||
/*border: 2px solid transparent;*/
|
||||
}
|
||||
20% {
|
||||
|
||||
/*border: 2px solid transparent;*/
|
||||
background-color: transparent;
|
||||
}
|
||||
32% {
|
||||
background-color: $purple;
|
||||
/*border: 2px solid red;*/
|
||||
}
|
||||
45% {
|
||||
background-color: $purple;
|
||||
}
|
||||
51% {
|
||||
background-color: transparent;
|
||||
}
|
||||
100% {
|
||||
background-color: transparent;
|
||||
/*border: 2px solid transparent;*/
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes rendering_color_gpu {
|
||||
0% {
|
||||
background-color: transparent;
|
||||
/*border: 2px solid transparent;*/
|
||||
}
|
||||
30% {
|
||||
|
||||
/*border: 2px solid transparent;*/
|
||||
background-color: transparent;
|
||||
}
|
||||
45% {
|
||||
background-color: $green;
|
||||
/*border: 2px solid red;*/
|
||||
}
|
||||
100% {
|
||||
background-color: transparent;
|
||||
/*border: 2px solid transparent;*/
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes rendering_screen {
|
||||
0% {
|
||||
border: 2px solid red;
|
||||
}
|
||||
100% {
|
||||
border: 2px solid lightgray;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// injector
|
||||
// endinjector
|
||||
@ -0,0 +1,32 @@
|
||||
<div layout="column" class="slide slide-36">
|
||||
<!--http://www.slideshare.net/HyungwookLee/android-chromium-rendering-pipeline-->
|
||||
|
||||
<div flex="10">
|
||||
<h3 style="margin-left: 10px; margin-top: 10px">Future</h3>
|
||||
</div>
|
||||
<div flex="5" layout="row" layout-align="center center">
|
||||
<h2>New Browser Engines</h2>
|
||||
</div>
|
||||
|
||||
<div flex="20">
|
||||
|
||||
</div>
|
||||
|
||||
<div style="text-align: center" flex layout="row" layout-align="center start">
|
||||
<div flex="33">
|
||||
<img style="width: 500px" src="/assets/images/servo.jpg">
|
||||
</div>
|
||||
|
||||
<div flex="33">
|
||||
<img style="width: 300px" src="/assets/images/blink.png">
|
||||
</div>
|
||||
|
||||
<div flex="33">
|
||||
<img style="width: 300px" src="/assets/images/spartan.png">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,101 @@
|
||||
'use strict';
|
||||
|
||||
angular.module('hybridApps')
|
||||
.controller('MainCtrl', function ($scope, hotkeys, $state, $mdSidenav, $timeout) {
|
||||
|
||||
var self = this;
|
||||
|
||||
function nextSlide() {
|
||||
$state.go('slides.slide', {
|
||||
slideId: Number($state.params.slideId) + 1
|
||||
})
|
||||
}
|
||||
|
||||
function previousSlide() {
|
||||
if (Number($state.params.slideId) > 1) {
|
||||
$state.go('slides.slide', {
|
||||
slideId: Number($state.params.slideId) - 1
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
hotkeys.add({
|
||||
combo: 'space',
|
||||
description: 'Next slide',
|
||||
callback: function() {
|
||||
nextSlide();
|
||||
}
|
||||
});
|
||||
|
||||
hotkeys.add({
|
||||
combo: 'right',
|
||||
description: 'Next slide',
|
||||
callback: function() {
|
||||
nextSlide();
|
||||
}
|
||||
});
|
||||
|
||||
hotkeys.add({
|
||||
combo: 'left',
|
||||
description: 'Previous slide',
|
||||
callback: function() {
|
||||
previousSlide();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
hotkeys.add({
|
||||
combo: 'ctrl+right',
|
||||
description: 'Open side nav',
|
||||
callback: function() {
|
||||
$mdSidenav('nav').toggle();
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
hotkeys.add({
|
||||
combo: 'ctrl+left',
|
||||
description: 'Open side nav',
|
||||
callback: function() {
|
||||
$mdSidenav('nav-left').toggle();
|
||||
$timeout(function(){
|
||||
$(document).trigger('resize');
|
||||
}, 300)
|
||||
|
||||
}
|
||||
})
|
||||
})
|
||||
.controller('navCtrl', function($scope, $mdSidenav) {
|
||||
$scope.close = function () {
|
||||
$mdSidenav('nav').close()
|
||||
.then(function () {
|
||||
//$log.debug("close RIGHT is done");
|
||||
});
|
||||
};
|
||||
})
|
||||
.controller('navCtrlLeft', function($scope, $mdSidenav) {
|
||||
|
||||
$scope.slide4 = {
|
||||
framerate: 5,
|
||||
processing: false,
|
||||
fibonacci: 2000
|
||||
};
|
||||
|
||||
$scope.toggleProcessing = function() {
|
||||
$scope.slide4.processing = !$scope.slide4.processing;
|
||||
}
|
||||
|
||||
$scope.$watch('slide4.framerate', function(newVal){
|
||||
if (newVal) {
|
||||
$scope.interval = parseInt(1000 / Number(newVal)) ;
|
||||
}
|
||||
})
|
||||
|
||||
$scope.close = function () {
|
||||
$mdSidenav('nav-left').close()
|
||||
.then(function () {
|
||||
//$log.debug("close LEFT is done");
|
||||
});
|
||||
};
|
||||
})
|
||||
;
|
||||
@ -0,0 +1,22 @@
|
||||
'use strict';
|
||||
|
||||
describe('controllers', function(){
|
||||
var scope;
|
||||
|
||||
beforeEach(module('hybridApps'));
|
||||
|
||||
beforeEach(inject(function($rootScope) {
|
||||
scope = $rootScope.$new();
|
||||
}));
|
||||
|
||||
it('should define more than 5 awesome things', inject(function($controller) {
|
||||
expect(scope.awesomeThings).toBeUndefined();
|
||||
|
||||
$controller('MainCtrl', {
|
||||
$scope: scope
|
||||
});
|
||||
|
||||
expect(angular.isArray(scope.awesomeThings)).toBeTruthy();
|
||||
expect(scope.awesomeThings.length > 5).toBeTruthy();
|
||||
}));
|
||||
});
|
||||
@ -0,0 +1,166 @@
|
||||
'use strict';
|
||||
|
||||
angular.module('hybridApps')
|
||||
.directive('render', ['$timeout', function($timeout){
|
||||
return {
|
||||
restrict: 'EA',
|
||||
scope: {
|
||||
framerate: '=framerate',
|
||||
processing: '=processing',
|
||||
fibonacci: '=',
|
||||
delay: '='
|
||||
},
|
||||
link: function($scope, $elm, $attr) {
|
||||
|
||||
var render = $elm;
|
||||
var object = $('.object');
|
||||
|
||||
$scope.r_w = render[0].clientWidth;
|
||||
$scope.r_h = render[0].clientHeight;
|
||||
|
||||
$scope.o_w = object[0].clientWidth;
|
||||
$scope.o_h = object[0].clientHeight;
|
||||
|
||||
|
||||
window.onresize = function(event) {
|
||||
$scope.$apply(function(){
|
||||
var render = $elm;
|
||||
var object = $('.object');
|
||||
$scope.r_w = render[0].clientWidth;
|
||||
$scope.r_h = render[0].clientHeight;
|
||||
|
||||
$scope.o_w = object[0].clientWidth;
|
||||
$scope.o_h = object[0].clientHeight;
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
$scope.fps = Number($scope.framerate);
|
||||
$scope.$watch('framerate', function(newVal){
|
||||
$scope.fps = Number(newVal);
|
||||
$scope.interval = 1000/$scope.fps;
|
||||
console.log('interval is ', $scope.interval);
|
||||
})
|
||||
$scope.fib = Number($scope.fibonacci);
|
||||
|
||||
$scope.$watch('fibonacci', function(newVal){
|
||||
if(newVal) {
|
||||
$scope.fib = Number(newVal);
|
||||
}
|
||||
})
|
||||
|
||||
$scope.bootstrap = false;
|
||||
|
||||
var now;
|
||||
var then = Date.now();
|
||||
$scope.interval = 1000/$scope.fps;
|
||||
var delta;
|
||||
var reverse = false;
|
||||
|
||||
var render_with_gpu = function(time) {
|
||||
requestAnimationFrame(render_with_gpu);
|
||||
now = Date.now();
|
||||
delta = now - then;
|
||||
|
||||
if (delta > $scope.interval) {
|
||||
then = now - (delta % $scope.interval);
|
||||
|
||||
// Drwaing here
|
||||
|
||||
var pos = $(object).position();
|
||||
var translate = Number(window.getComputedStyle(object[0]).transform.split(',')[4]);
|
||||
console.log(pos.left);
|
||||
|
||||
if (pos.left >= r_w - o_w - 5) {
|
||||
reverse = true;
|
||||
}
|
||||
if (pos.left <= 0) {
|
||||
reverse = false;
|
||||
}
|
||||
if (reverse) {
|
||||
// Move left to 10 px
|
||||
object[0].style.transform = 'translateX(' + ( translate - 10) + 'px)';
|
||||
//$(object).css({
|
||||
//left: pos.left - 10
|
||||
//});
|
||||
} else {
|
||||
object[0].style.transform = 'translateX(' + (pos.left + 10) + 'px)';
|
||||
//$(object).css({
|
||||
//left: pos.left + 10
|
||||
//});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
var render = function(time) {
|
||||
|
||||
requestAnimationFrame(render);
|
||||
now = Date.now();
|
||||
delta = now - then;
|
||||
function draw() {
|
||||
then = now - (delta % $scope.interval);
|
||||
|
||||
// Drwaing here
|
||||
if ($scope.processing) {
|
||||
for (var j=0; j<$scope.fib;j++) {
|
||||
var i;
|
||||
var fib = []; //Initialize array!
|
||||
|
||||
fib[0] = 0;
|
||||
fib[1] = 1;
|
||||
for(i=2; i<=j; i++)
|
||||
{
|
||||
// Next fibonacci number = previous + one before previous
|
||||
// Translated to JavaScript:
|
||||
fib[i] = fib[i-2] + fib[i-1];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var pos = $(object).position();
|
||||
|
||||
if (pos.left >= $scope.r_w - $scope.o_w - 5) {
|
||||
reverse = true;
|
||||
}
|
||||
if (pos.left <= 0) {
|
||||
reverse = false;
|
||||
}
|
||||
if (reverse) {
|
||||
$(object).css({
|
||||
left: pos.left - 10
|
||||
});
|
||||
} else {
|
||||
$(object).css({
|
||||
left: pos.left + 10
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
if (delta > $scope.interval) {
|
||||
draw();
|
||||
}
|
||||
|
||||
if (!$scope.bootstrap) {
|
||||
draw();
|
||||
$scope.bootstrap = true;
|
||||
}
|
||||
};
|
||||
if (Number($scope.delay)) {
|
||||
console.log('starting render in ', Number($scope.delay) )
|
||||
|
||||
$timeout(function(){
|
||||
render();
|
||||
}, Number($scope.delay));
|
||||
} else {
|
||||
render();
|
||||
}
|
||||
//render_with_gpu();
|
||||
|
||||
}
|
||||
}
|
||||
}]);
|
||||
@ -0,0 +1,94 @@
|
||||
<div layout="column" layout-fill style="height: 100%;">
|
||||
|
||||
<md-content class="slides">
|
||||
<div ui-view></div>
|
||||
</md-content>
|
||||
|
||||
|
||||
<md-sidenav style="width: 100%" class="md-sidenav-right md-whiteframe-z2" md-component-id="nav">
|
||||
<md-toolbar class="md-theme-light">
|
||||
<h1 class="md-toolbar-tools">Emscripten: Macintosh Plus</h1>
|
||||
</md-toolbar>
|
||||
|
||||
<md-content ng-controller="navCtrl" layout-padding>
|
||||
<div class="pcejs pcejs-container">
|
||||
<div class="pcejs pcejs-loading-status">Downloading...</div>
|
||||
<div class="pcejs">
|
||||
<canvas class="pcejs pcejs-canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<md-button ng-click="close()" class="md-primary">
|
||||
Close
|
||||
</md-button>
|
||||
</md-content>
|
||||
</md-sidenav>
|
||||
|
||||
<md-sidenav layout-fill layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="nav-left">
|
||||
<md-toolbar felx class="md-theme-light">
|
||||
<h1 class="md-toolbar-tools">Rendering Engine Prototype</h1>
|
||||
</md-toolbar>
|
||||
|
||||
<md-content style="height: 80%" flex class="nav-left" ng-controller="navCtrlLeft" layout-padding>
|
||||
<div layout="row" layout-fill layout-align="center center">
|
||||
|
||||
<div flex="50" layout="row" layout-padding layout-align="center center">
|
||||
<div flex="60" render fibonacci="slide4.fibonacci" framerate="slide4.framerate" processing="slide4.processing" class="render">
|
||||
<div class="object">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="height: 100%" flex="50" layout="column" layout-align="center center">
|
||||
<div flex="20" layout="column" layout-align="end center">
|
||||
<h3><span ng-class="{processing: slide4.processing}">Processing</span> + Rendering</h3>
|
||||
<div style="text-align: center" flex layout="row" layout-fill layout-align="center center">
|
||||
<div flex="50">
|
||||
<h4>{{interval}} ms</h4>
|
||||
</div>
|
||||
<div flex="50">
|
||||
<h4>{{slide4.framerate}} fps</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 100%" flex="20" layout="row" >
|
||||
<div flex="20" layout="row" layout-align="center center">
|
||||
Slower Render
|
||||
</div>
|
||||
<div flex="60" layout="row" layout-align="center center">
|
||||
<md-slider flex ng-model="slide4.framerate" min="1" max="60"></md-slider>
|
||||
</div>
|
||||
<div flex="20" layout="row" layout-align="center center">
|
||||
Faster Render
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="slide4.processing" style="width: 100%" flex="20" layout="row" >
|
||||
<div flex="20" layout="row" layout-align="center center">
|
||||
Fast Process
|
||||
</div>
|
||||
<div flex="60" layout="row" layout-align="center center">
|
||||
<md-slider flex ng-model="slide4.fibonacci" min="1000" max="5000"></md-slider>
|
||||
</div>
|
||||
<div flex="20" layout="row" layout-align="center center">
|
||||
Slow Process
|
||||
</div>
|
||||
</div>
|
||||
<div flex="20" style="width: 100%" layout="row" layout-align="center start">
|
||||
<md-button ng-click="toggleProcessing()" class="md-primary">
|
||||
Toggle Processing
|
||||
</md-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<md-button ng-click="close()" class="md-primary">
|
||||
Close
|
||||
</md-button>
|
||||
</md-content>
|
||||
</md-sidenav>
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1 @@
|
||||
<h1>Slide 1</h1>
|
||||
@ -0,0 +1,46 @@
|
||||
<div layout="column" class="slide slide-10">
|
||||
|
||||
<!--Information software-->
|
||||
<div class="information" style="position: relative" flex="33" layout="row" layout-align="center center">
|
||||
|
||||
<div class="information-model" flex="50" >
|
||||
</div>
|
||||
|
||||
<div class="information-software" flex="50" layout="column" layout-align="center center">
|
||||
<h1>Information Software</h1>
|
||||
<ul>
|
||||
<li>Reading Static Web Documents</li>
|
||||
<li>Reading Emails</li>
|
||||
<li>Reading newsgroups</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--Manipulation software-->
|
||||
<div class="manipulation" style="position: relative" flex="33" layout="row" layout-align="center center">
|
||||
<div flex="50" layout="row" layout-align="center center">
|
||||
</div>
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Maniulation Software</h1>
|
||||
<ul>
|
||||
<li>Writing Emails</li>
|
||||
<li>Creating Web Documents</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--Communication-->
|
||||
<div class="animated fadeIn communication" style="position: relative" flex="33" layout="row" layout-align="center center">
|
||||
<div flex="50" layout="row" layout-align="center center">
|
||||
</div>
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Communicaton Software</h1>
|
||||
<h2>Internet Browser (Netscape)</h2>
|
||||
<h2>Email Client</h2>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,6 @@
|
||||
<div layout="column" class="slide slide-11">
|
||||
|
||||
<div class="bleeding"></div>
|
||||
<iframe src="/ugliest-website/index.html" width="100%" height="100%" frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,37 @@
|
||||
<div layout-fill layout="column" class="slide slide-12">
|
||||
<div flex="10" layout="row" layout-align="center center">
|
||||
<h1>Web 2.0: Manipulation Software with Dynamic GUI</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<div flex="10">
|
||||
</div>
|
||||
|
||||
<div style="text-align: center" flex="10" layout="row" layout-align="center center">
|
||||
<ul>
|
||||
<li>Creating and Sharing Content</li>
|
||||
<li>Blogs</li>
|
||||
<li>Social Netowkrs</li>
|
||||
<li>Wikis</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div layout="row" style="position: relative; height: 100%">
|
||||
|
||||
|
||||
<!--Client-->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h2>Browser aka Internet GUI</h2>
|
||||
<h2>Manipulating Content</h2>
|
||||
<h2>Show UI</h2>
|
||||
</div>
|
||||
|
||||
<!--Server -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h2>Server</h2>
|
||||
<h2>Rendering UI</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,21 @@
|
||||
<div layout-fill layout="column" class="slide slide-13">
|
||||
<div flex="10" layout="row" layout-align="center center">
|
||||
<h2>Web 2.0: Cons</h2>
|
||||
</div>
|
||||
|
||||
|
||||
<div flex="30">
|
||||
</div>
|
||||
|
||||
<div style="text-align: center" flex="10" layout="row" layout-align="center center">
|
||||
<ul>
|
||||
<li>Signle Point of Failure</li>
|
||||
<li>Poor UX compared to native GUI: page reload ...</li>
|
||||
<li>Waste of bandwidth</li>
|
||||
<li>Unused user hardware power</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,34 @@
|
||||
<div layout-fill layout="column" class="slide slide-14">
|
||||
<div flex="20" layout="column" layout-align="center center">
|
||||
<h1>The rise of Web Applications</h1>
|
||||
<h2>All GUI client side</h2>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div flex="10">
|
||||
</div>
|
||||
|
||||
<div style="text-align: center" flex layout="row" layout-align="center center">
|
||||
|
||||
|
||||
<!--Client-->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Browser Engine</h1>
|
||||
<h2>Native like GUI</h2>
|
||||
</div>
|
||||
|
||||
<!--Server -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Server</h1>
|
||||
<h2>API</h2>
|
||||
<h2>Business Logic</h2>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,59 @@
|
||||
<div layout-fill layout="column" class="slide slide-15">
|
||||
|
||||
|
||||
<div style="text-align: center" flex="20">
|
||||
<h1>Web apps solved</h1>
|
||||
</div>
|
||||
<div class="animated fadeIn" style="text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h2>Multi Platform Binaries</h2>
|
||||
<h2>Platform Prison</h2>
|
||||
</div>
|
||||
|
||||
<!--Web App -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Single Standard Open Platform</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div style="visibility: hidden; text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Distribution</h1>
|
||||
</div>
|
||||
|
||||
<!--Web App -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Universal Resource Identifiers</h1>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div style="visibility: hidden; text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Fast Reactive GUIs</h1>
|
||||
</div>
|
||||
|
||||
<!--Web App -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Almost as good as native GUI</h1>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,58 @@
|
||||
<div layout-fill layout="column" class="slide slide-16">
|
||||
|
||||
|
||||
<div style="text-align: center" flex="20">
|
||||
<h1>Web apps solved</h1>
|
||||
</div>
|
||||
<div style="text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h2>Multi Platform Binaries</h2>
|
||||
<h2>Platform Prison</h2>
|
||||
</div>
|
||||
|
||||
<!--Web App -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Single Standard Open Platform</h1>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="animated fadeIn" style="text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Distribution</h1>
|
||||
</div>
|
||||
|
||||
<!--Web App -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Universal Resource Identifiers</h1>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div style="visibility: hidden; text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Fast Reactive GUIs</h1>
|
||||
</div>
|
||||
|
||||
<!--Web App -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Almost as good as native GUI</h1>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,58 @@
|
||||
<div layout-fill layout="column" class="slide slide-17">
|
||||
|
||||
|
||||
<div style="text-align: center" flex="20">
|
||||
<h1>Web apps solved</h1>
|
||||
</div>
|
||||
<div style="text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h2>Multi Platform Binaries</h2>
|
||||
<h2>Platform Prison</h2>
|
||||
</div>
|
||||
|
||||
<!--Web App -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Single Standard Open Platform</h1>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div style="text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Distribution</h1>
|
||||
</div>
|
||||
|
||||
<!--Web App -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Universal Resource Identifiers</h1>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="animated fadeIn" style="text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Fast Reactive GUIs</h1>
|
||||
</div>
|
||||
|
||||
<!--Web App -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Almost as good as native GUI</h1>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,47 @@
|
||||
<div layout-fill layout="column" class="slide slide-18">
|
||||
|
||||
<div style="text-align: center" flex="20">
|
||||
<h1>Web apps need to solve</h1>
|
||||
</div>
|
||||
|
||||
<div flex="10">
|
||||
</div>
|
||||
|
||||
<div style="text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div flex layout="column" layout-align="center center">
|
||||
<h1>Direct Hardware / OS access</h1>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div style="text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div layout="column" layout-align="center center">
|
||||
<h1>Rich Programming Languages</h1>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div style="text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div layout="column" layout-align="center center">
|
||||
<h1>Native like rendering performance</h1>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,30 @@
|
||||
<div layout-fill layout="column" class="slide slide-19">
|
||||
|
||||
<div style="text-align: center" flex="10">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="animated fadeIn" style="text-align: center" flex layout="column" layout-align="center center">
|
||||
|
||||
<!-- Native -->
|
||||
<h1>The Rise of Hybrid</h1>
|
||||
<h2>Direct hardware / os accss</h2>
|
||||
|
||||
</div>
|
||||
<div flex="30">
|
||||
</div>
|
||||
<div class="animated fadeIn" style="text-align: center" flex="66" layout="row" layout-align="center start">
|
||||
|
||||
<div class="native-wrapper">
|
||||
<h2>Native</h2>
|
||||
<div class="browser-engine" layout="column" layout-align="center center">
|
||||
<h2>Browser Engine</h2>
|
||||
<h2>GUI Rendering </h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,3 @@
|
||||
<div class="slide slide-2">
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,46 @@
|
||||
<div layout-fill layout="column" class="slide slide-20">
|
||||
|
||||
<div style="text-align: center" flex="10">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="animated fadeIn" style="text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
<!-- Native -->
|
||||
<h1 class="hybrid-cl">Bridging browser engine to native</h1>
|
||||
|
||||
</div>
|
||||
<div flex="10" layout="row" layout-align="center center">
|
||||
</div>
|
||||
<div class="animated fadeIn" style="text-align: center" flex="66" layout="row" layout-align="center start">
|
||||
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h3 >CEF, Node Webkit, Brackets Shell ... </h3>
|
||||
<div class="native-wrapper">
|
||||
<h3>Native Desktop</h3>
|
||||
<div class="hardware-bridge hybrid-bg">
|
||||
<div class="browser-engine" layout="column" layout-align="center center">
|
||||
<h3>Browser Engine</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h3 >Cordova, Appcelerator, Crosswalk</h3>
|
||||
<div class="native-wrapper mobile">
|
||||
<h3>Native Mobile</h3>
|
||||
<div class="hardware-bridge hybrid-bg">
|
||||
<div class="browser-engine" layout="column" layout-align="center center">
|
||||
<h3>Webview</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,4 @@
|
||||
<div layout-fill layout="column" class="slide slide-21">
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,4 @@
|
||||
<div layout-fill layout="column" class="slide slide-22">
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
<div layout-fill layout="column" class="slide slide-23">
|
||||
|
||||
<div flex="50" layout="row">
|
||||
</div>
|
||||
|
||||
<div flex="50" layout="row">
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,24 @@
|
||||
<div layout-fill layout="column" class="slide slide-24">
|
||||
|
||||
<div style="text-align: center" flex="20">
|
||||
<h1>Rich Programming Languages</h1>
|
||||
</div>
|
||||
|
||||
<div flex="20">
|
||||
</div>
|
||||
|
||||
<div flex="20" style="text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div class="animated fadeIn" flex layout="column" layout-align="center center">
|
||||
<h1>Cross Compiling</h1>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,33 @@
|
||||
<div layout-fill layout="column" class="slide slide-25">
|
||||
|
||||
<div style="text-align: center" flex="20">
|
||||
<h1>Rich Programming Languages</h1>
|
||||
</div>
|
||||
|
||||
<div flex="10">
|
||||
</div>
|
||||
|
||||
<div class="animated fadeIn" flex="20" style="text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div flex layout="column" layout-align="center center">
|
||||
<h1>Emscripten - ASM.js</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div style="visibility: hidden; text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div layout="column" layout-align="center center">
|
||||
<h1>Dart -> Object Oriented Programming</h1>
|
||||
<h1>Elm Lang -> Reactive Programming</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,33 @@
|
||||
<div layout-fill layout="column" class="slide slide-26">
|
||||
|
||||
<div style="text-align: center" flex="20">
|
||||
<h1>Rich Programming Languages</h1>
|
||||
</div>
|
||||
|
||||
<div flex="10">
|
||||
</div>
|
||||
|
||||
<div flex="20" style="text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div flex layout="column" layout-align="center center">
|
||||
<h1>Emscripten - ASM.js</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="animated fadeIn" style="text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div layout="column" layout-align="center center">
|
||||
<h1>Dart -> Object Oriented Programming</h1>
|
||||
<h1>Elm Lang -> Reactive Programming</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,23 @@
|
||||
<div layout-fill layout="column" class="slide slide-27">
|
||||
|
||||
<div style="text-align: center" flex="20">
|
||||
<h1>Rich Programming Languages</h1>
|
||||
</div>
|
||||
|
||||
<div flex="10">
|
||||
</div>
|
||||
|
||||
<div flex="20" style="text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div flex layout="column" layout-align="center center">
|
||||
<h1>Beyond Cross Compiling</h1>
|
||||
<h1>Dartium</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div layout-fill layout="column" class="slide slide-28 animated fadeIn">
|
||||
|
||||
<div style="text-align: center" flex="20">
|
||||
<h1>Catching with native performance</h1>
|
||||
</div>
|
||||
|
||||
<div flex="10">
|
||||
</div>
|
||||
|
||||
<div flex="20" style="text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div flex="30" layout="column" layout-align="center center">
|
||||
<h1>Javascript</h1>
|
||||
</div>
|
||||
|
||||
<div flex="70" layout="column" layout-align="center start">
|
||||
<h2>Most optimization work for last decade</h2>
|
||||
<h2>Mozilla Spider Monkey -> Firefox, ASM.js, Gnome desktop</h2>
|
||||
<h2>Google V8 -> Chrome, node.js</h2>
|
||||
<h2>SIMD.js : Parallel Data Processing</h2>
|
||||
<h3>available in CrossWalk</h3>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="animated fadeIn" style="visibility: hidden; text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div layout="column" layout-align="center center">
|
||||
<h1>Rendering Engine Performance (GUI Rendering)</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,33 @@
|
||||
<div layout-fill layout="column" class="slide slide-29 ">
|
||||
|
||||
<div style="text-align: center" flex="20">
|
||||
<h1>Catching with native performance</h1>
|
||||
</div>
|
||||
|
||||
<div flex="10">
|
||||
</div>
|
||||
|
||||
<div flex="20" style="text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
<!-- Native -->
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Javascript</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="animated fadeIn" style="text-align: center" flex layout="row" layout-align="center start">
|
||||
|
||||
|
||||
<!-- Native -->
|
||||
<div layout="column" layout-align="center center">
|
||||
<h1>Rendering Engine Performance (GUI Rendering)</h1>
|
||||
<h2>This is happening now</h2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
<div layout="row" class="slide slide-3">
|
||||
|
||||
<div flex="50" layout="column" layout-fill layout-align="start center">
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<h1>Application Software</h1>
|
||||
<h1>Graphical User Interface</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,106 @@
|
||||
<div layout="column" class="slide slide-30">
|
||||
<!--http://www.slideshare.net/HyungwookLee/android-chromium-rendering-pipeline-->
|
||||
|
||||
<div flex="10">
|
||||
<h4 style="margin-top: 10px; margin-left: 10px">The Software Path</h4>
|
||||
</div>
|
||||
|
||||
<!--Sections-->
|
||||
<div flex="10" layout="row" layout-align="center center">
|
||||
|
||||
<div style="text-align: center" flex="33">
|
||||
<h3>Browser UI</h3>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="rendering" style="text-align: center" flex="33">
|
||||
<h3>Rendering</h3>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="js" style="text-align: center" flex="33">
|
||||
<h3>Javascript VM</h3>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div flex="5">
|
||||
</div>
|
||||
|
||||
<!--Rendering-->
|
||||
<div class="rendering-container" flex="30" layout="row" >
|
||||
|
||||
<div flex="33">
|
||||
</div>
|
||||
|
||||
|
||||
<!--Rendering process-->
|
||||
<div flex="33" layout="column" layout-fill layout-align="center center">
|
||||
|
||||
<div flex layout="row" layout-margin layout-fill layout-align="center center">
|
||||
<div flex="30" layout="row" layout-align="center start">
|
||||
<div class="dom-update">
|
||||
</div>
|
||||
</div>
|
||||
<div flex>
|
||||
<p>dom update</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div flex layout="row" layout-margin layout-fill layout-align="center center">
|
||||
<div flex="30" layout="row" layout-align="center start">
|
||||
<div class="layout">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div flex>
|
||||
<p>layout</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div flex layout="row" layout-margin layout-fill layout-align="center center">
|
||||
<div flex="30" layout="row" layout-align="center start">
|
||||
<div class="paint">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div flex>
|
||||
<p>paint</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!--CPU-->
|
||||
<div flex="15" layout="row">
|
||||
<div style="text-align: center" flex="33">
|
||||
<img style="width: auto; height: 100px" src="/assets/images/cpu-chip.jpg">
|
||||
</div>
|
||||
|
||||
<div class="cpu" style="text-align: center" flex="66">
|
||||
<div class="js">
|
||||
</div>
|
||||
<div class="rendering">
|
||||
</div>
|
||||
<img style="width: auto; height: 100px" src="/assets/images/cpu-chip.jpg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Screen-->
|
||||
|
||||
<div flex layout="row" layout-align="center center">
|
||||
<div flex="33" layout="row" layout-align="center center">
|
||||
<div render delay="6000" framerate="0.25" class="render rendering-screen">
|
||||
<div class="object">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,115 @@
|
||||
<div layout="column" class="slide slide-31">
|
||||
<!--http://www.slideshare.net/HyungwookLee/android-chromium-rendering-pipeline-->
|
||||
|
||||
<div flex="10">
|
||||
<h4 style="margin-top: 10px; margin-left: 10px">The Hardware Path: GPU</h4>
|
||||
</div>
|
||||
|
||||
<!--Sections-->
|
||||
<div flex="10" layout="row" layout-align="center center">
|
||||
|
||||
<div style="text-align: center" flex="33">
|
||||
<h3>Browser UI</h3>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="rendering" style="text-align: center" flex="33">
|
||||
<h3>Rendering</h3>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="js" style="text-align: center" flex="33">
|
||||
<h3>Javascript VM</h3>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div flex="5">
|
||||
</div>
|
||||
|
||||
<!--Rendering-->
|
||||
<div class="rendering-container" flex="30" layout="row" >
|
||||
|
||||
<div flex="33">
|
||||
</div>
|
||||
|
||||
|
||||
<!--Rendering process-->
|
||||
<div flex="33" layout="column" layout-fill layout-align="center center">
|
||||
|
||||
<div flex layout="row" layout-margin layout-fill layout-align="center center">
|
||||
<div flex="30" layout="row" layout-align="center start">
|
||||
<div class="dom-update">
|
||||
</div>
|
||||
</div>
|
||||
<div flex>
|
||||
<p>dom update</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div flex layout="row" layout-margin layout-fill layout-align="center center">
|
||||
<div flex="30" layout="row" layout-align="center start">
|
||||
<div class="layout">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div flex>
|
||||
<p>layout</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div flex layout="row" layout-margin layout-fill layout-align="center center">
|
||||
<div flex="30" layout="row" layout-align="center start">
|
||||
<div class="paint">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div flex>
|
||||
<p>paint</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!--CPU-->
|
||||
<div flex="15" layout="row">
|
||||
<div style="text-align: center" flex="33">
|
||||
<img style="width: auto; height: 100px" src="/assets/images/cpu-chip.jpg">
|
||||
</div>
|
||||
|
||||
<div class="cpu-gpu" style="text-align: center" layout-margin flex="66" layout="row" layout-align="space-around center">
|
||||
|
||||
<div class="gpu" flex="50" layout="row" layout-align="end center">
|
||||
<div class="rendering-gpu">
|
||||
</div>
|
||||
<img style="width: 100px; height: 100px" src="/assets/images/gpu-chip.jpg">
|
||||
</div>
|
||||
|
||||
<div class="cpu" flex="50" layout="row" layout-align="start center">
|
||||
<div class="rendering-cpu">
|
||||
</div>
|
||||
<div class="js">
|
||||
</div>
|
||||
<img class="render-cpu render-js" style="width: auto; height: 100px" src="/assets/images/cpu-chip.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Screen-->
|
||||
|
||||
<div flex layout="row" layout-align="center center">
|
||||
<div flex="33" layout="row" layout-align="center center">
|
||||
<div render delay="6000" framerate="0.25" class="render rendering-screen">
|
||||
<div class="object">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,122 @@
|
||||
<div layout="column" class="slide slide-32">
|
||||
<!--http://www.slideshare.net/HyungwookLee/android-chromium-rendering-pipeline-->
|
||||
|
||||
<div flex="10">
|
||||
<h4 style="margin-left: 10px; margin-top: 10px">Less DOM updates</h4>
|
||||
</div>
|
||||
|
||||
<!--Sections-->
|
||||
<div flex="10" layout="row" layout-align="center center">
|
||||
|
||||
<div style="text-align: center" flex="33">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="" style="text-align: center" flex="33">
|
||||
<h3>Rendering</h3>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div style="text-align: center" flex="33">
|
||||
<img src="/assets/images/react.png" style="max-height: 100px"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div flex="5">
|
||||
</div>
|
||||
|
||||
<!--Rendering-->
|
||||
<div class="rendering-container" flex="35" layout="row" >
|
||||
|
||||
<div flex="33">
|
||||
</div>
|
||||
|
||||
|
||||
<!--Rendering process-->
|
||||
<div flex="33" layout="column" layout-fill layout-align="center center">
|
||||
|
||||
<div flex layout="row" layout-margin layout-fill layout-align="center center">
|
||||
<div flex="30" layout="row" layout-align="center start">
|
||||
<div class="dom-update">
|
||||
</div>
|
||||
</div>
|
||||
<div flex="60">
|
||||
<p>dom update</p>
|
||||
</div>
|
||||
<div flex>
|
||||
<i style="font-size: 2.5em" class="fa fa-long-arrow-left"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div flex layout="row" layout-margin layout-fill layout-align="center center">
|
||||
<div flex="30" layout="row" layout-align="center start">
|
||||
<div class="layout">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div flex>
|
||||
<p>layout</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div flex layout="row" layout-margin layout-fill layout-align="center center">
|
||||
<div flex="30" layout="row" layout-align="center start">
|
||||
<div class="paint">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div flex>
|
||||
<p>paint</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--React-->
|
||||
<div flex="33" layout="column" layout-fill layout-align="start center">
|
||||
<p>React</p>
|
||||
<p>Less DOM updates</p>
|
||||
<p>Less paintings</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!--CPU-->
|
||||
<div flex="15" layout="row">
|
||||
<!--<div style="text-align: center" flex="33">-->
|
||||
<!--<img style="width: auto; height: 100px" src="/assets/images/cpu-chip.jpg">-->
|
||||
<!--</div>-->
|
||||
|
||||
<div class="cpu-gpu" style="text-align: center" layout-margin flex="66" layout="row" layout-align="space-around center">
|
||||
|
||||
<!--<div class="gpu" flex="50" layout="row" layout-align="end center">-->
|
||||
<!--<div class="rendering-gpu">-->
|
||||
<!--</div>-->
|
||||
<!--<img style="width: 100px; height: 100px" src="/assets/images/gpu-chip.jpg">-->
|
||||
<!--</div>-->
|
||||
|
||||
<!--<div class="cpu" flex="50" layout="row" layout-align="start center">-->
|
||||
<!--<div class="rendering-cpu">-->
|
||||
<!--</div>-->
|
||||
<!--<div class="js">-->
|
||||
<!--</div>-->
|
||||
<!--<img style="width: auto; height: 100px" src="/assets/images/cpu-chip.jpg">-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Screen-->
|
||||
|
||||
<div flex layout="row" layout-align="center center">
|
||||
<div flex="33" layout="row" layout-align="center center">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,86 @@
|
||||
<div layout="column" class="slide slide-33">
|
||||
<!--http://www.slideshare.net/HyungwookLee/android-chromium-rendering-pipeline-->
|
||||
|
||||
<div flex="10">
|
||||
<h3 style="margin-left: 10px; margin-top: 10px">Rendering with WebGL</h3>
|
||||
</div>
|
||||
|
||||
<!--Sections-->
|
||||
<div flex="10" layout="row" layout-align="center center">
|
||||
|
||||
<div style="text-align: center" flex="33">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="" style="text-align: center" flex="33">
|
||||
<h3>Rendering</h3>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div style="text-align: center" flex="33">
|
||||
<!--<img src="/assets/images/react.png" style="max-height: 100px"/>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div flex="5">
|
||||
</div>
|
||||
|
||||
<!--Rendering-->
|
||||
<div class="rendering-container" flex="35" layout="row" >
|
||||
|
||||
<div flex="33" layout="column" layout-align="end center">
|
||||
<h3>We lose DOM API</h3>
|
||||
<h3>Heavy on memory</h3>
|
||||
<h3>Hard rendering debugging</h3>
|
||||
</div>
|
||||
|
||||
|
||||
<!--Rendering process-->
|
||||
<div flex="33" layout="column" layout-fill layout-align="center center">
|
||||
<img src="/assets/images/famous.jpg" style="max-height: 200px">
|
||||
<!--<div flex layout="row" layout-margin layout-fill layout-align="center center">-->
|
||||
<!--<p>dom update</p>-->
|
||||
<!--</div>-->
|
||||
|
||||
<!--<div flex layout="row" layout-margin layout-fill layout-align="center center">-->
|
||||
<!--<p>layout</p>-->
|
||||
<!--</div>-->
|
||||
|
||||
<!--<div flex layout="row" layout-margin layout-fill layout-align="center center">-->
|
||||
<!--<p>paint</p>-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--React-->
|
||||
<div flex="33" layout="column" layout-fill layout-align="start center">
|
||||
<!--<p>React</p>-->
|
||||
<!--<p>Less DOM updates</p>-->
|
||||
<!--<p>Less paintings</p>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div flex="10">
|
||||
</div>
|
||||
|
||||
<!--CPU-->
|
||||
<div flex="15" layout="row" layout-align="center center">
|
||||
<img style="width: auto; height: 100px" src="/assets/images/gpu-chip.jpg">
|
||||
|
||||
</div>
|
||||
|
||||
<!--Screen-->
|
||||
|
||||
<div flex layout="row" layout-align="center center">
|
||||
<div flex="33" layout="row" layout-align="center center">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,25 @@
|
||||
<div layout="column" class="slide slide-34">
|
||||
<!--http://www.slideshare.net/HyungwookLee/android-chromium-rendering-pipeline-->
|
||||
|
||||
<div flex="5">
|
||||
</div>
|
||||
<div flex="10" layout="row" layout-align="center center">
|
||||
<h2 style="margin-left: 10px; margin-top: 10px">Future: New Browser Engines</h2>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center" flex layout="row" layout-align="center center">
|
||||
<div flex="33">
|
||||
</div>
|
||||
|
||||
<div flex="33">
|
||||
<img style="width: 200px" src="/assets/images/blink.png">
|
||||
</div>
|
||||
|
||||
<div flex="33">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,27 @@
|
||||
<div layout="column" class="slide slide-35">
|
||||
<!--http://www.slideshare.net/HyungwookLee/android-chromium-rendering-pipeline-->
|
||||
|
||||
<div flex="5">
|
||||
</div>
|
||||
<div flex="10" layout="row" layout-align="center center">
|
||||
<h2 style="margin-left: 10px; margin-top: 10px">Future: New Browser Engines</h2>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="text-align: center" flex layout="row" layout-align="center center">
|
||||
<div flex="33">
|
||||
<img style="width: 300px" src="/assets/images/servo.jpg">
|
||||
</div>
|
||||
|
||||
<div flex="33">
|
||||
<img style="width: 200px" src="/assets/images/blink.png">
|
||||
</div>
|
||||
|
||||
<div flex="33">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,28 @@
|
||||
<div layout="column" class="slide slide-36">
|
||||
<!--http://www.slideshare.net/HyungwookLee/android-chromium-rendering-pipeline-->
|
||||
|
||||
<div flex="5">
|
||||
</div>
|
||||
<div flex="10" layout="row" layout-align="center center">
|
||||
<h2 style="margin-left: 10px; margin-top: 10px">Future: New Browser Engines</h2>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="text-align: center" flex layout="row" layout-align="center center">
|
||||
<div flex="33">
|
||||
<img style="width: 300px" src="/assets/images/servo.jpg">
|
||||
</div>
|
||||
|
||||
<div flex="33">
|
||||
<img style="width: 200px" src="/assets/images/blink.png">
|
||||
</div>
|
||||
|
||||
<div flex="33">
|
||||
<img style="width: 400px" src="/assets/images/spartan.png">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,20 @@
|
||||
<div layout="column" layout-align="center center" class="slide slide-38">
|
||||
<!--http://www.slideshare.net/HyungwookLee/android-chromium-rendering-pipeline-->
|
||||
|
||||
<h1>Thanx for listening</h1>
|
||||
<h1>Welcome to Hybrid Apps Meetup</h1>
|
||||
|
||||
</div>
|
||||
<!--<div layout="column" class="slide slide-37">-->
|
||||
<!--[>http://www.slideshare.net/HyungwookLee/android-chromium-rendering-pipeline<]-->
|
||||
|
||||
<!--<div flex="5">-->
|
||||
<!--<h3 style="margin-left: 10px; margin-top: 10px">Current Hardware Path: GL / GL ES</h3>-->
|
||||
<!--</div>-->
|
||||
|
||||
<!--<div flex layout="row" layout-align="center center">-->
|
||||
<!--[><object width="100" height="100" data="/assets/images/gl_monolith.svg" type="image/svg+xml"><]-->
|
||||
<!--[></object><]-->
|
||||
<!--</div>-->
|
||||
|
||||
<!--</div>-->
|
||||
@ -0,0 +1,6 @@
|
||||
<div layout="column" layout-align="center center" class="slide slide-38">
|
||||
<!--http://www.slideshare.net/HyungwookLee/android-chromium-rendering-pipeline-->
|
||||
|
||||
<h1>End</h1>
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,6 @@
|
||||
<div layout="column" layout-align="center center" class="slide slide-38">
|
||||
<!--http://www.slideshare.net/HyungwookLee/android-chromium-rendering-pipeline-->
|
||||
|
||||
<h1>End</h1>
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,59 @@
|
||||
<div layout="row" class="slide slide-4">
|
||||
|
||||
<div flex="50" layout="row" layout-padding layout-align="center center">
|
||||
<div flex="60" render fibonacci="slide4.fibonacci" framerate="slide4.framerate" processing="slide4.processing" class="render">
|
||||
<div class="object">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="height: 100%" flex="50" layout="column" layout-align="center center">
|
||||
<div flex="20" layout="column" layout-align="end center">
|
||||
<h3><span ng-class="{processing: slide4.processing}">Processing</span> + Rendering</h3>
|
||||
<div style="text-align: center" flex layout="row" layout-fill layout-align="center center">
|
||||
<div flex="50">
|
||||
<h4>{{interval}} ms</h4>
|
||||
</div>
|
||||
<div flex="50">
|
||||
<h4>{{slide4.framerate}} fps</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 100%" flex="20" layout="row" >
|
||||
<div flex="20" layout="row" layout-align="center center">
|
||||
Slower Render
|
||||
</div>
|
||||
<div flex="60" layout="row" layout-align="center center">
|
||||
<md-slider flex ng-model="slide4.framerate" min="1" max="60"></md-slider>
|
||||
</div>
|
||||
<div flex="20" layout="row" layout-align="center center">
|
||||
Faster Render
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="slide4.processing" style="width: 100%" flex="20" layout="row" >
|
||||
<div flex="20" layout="row" layout-align="center center">
|
||||
Fast Process
|
||||
</div>
|
||||
<div flex="60" layout="row" layout-align="center center">
|
||||
<md-slider flex ng-model="slide4.fibonacci" min="1000" max="5000"></md-slider>
|
||||
</div>
|
||||
<div flex="20" layout="row" layout-align="center center">
|
||||
Slow Process
|
||||
</div>
|
||||
</div>
|
||||
<div flex="20" style="width: 100%" layout="row" layout-align="center start">
|
||||
<md-button ng-click="toggleProcessing()" class="md-primary">
|
||||
Toggle Processing
|
||||
</md-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--<div flex layout="row" layout-padding layout-align="center center">-->
|
||||
|
||||
|
||||
<!--</div>-->
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,23 @@
|
||||
|
||||
<div layout="column" layout-padding class="slide slide-5">
|
||||
|
||||
<h4 style="padding-left: 20px"><a href="http://worrydream.com/MagicInk/">Bret Victor: Magic Ink</a></h4>
|
||||
<!--Information software-->
|
||||
<div class="animated fadeIn" style="position: relative" flex="50" layout="row" layout-align="center center">
|
||||
|
||||
<div class="information-model" flex="50" >
|
||||
</div>
|
||||
|
||||
<div class="information-software" flex="50" layout="column" layout-align="center center">
|
||||
<h1>Information Software</h1>
|
||||
<ul>
|
||||
<li>Reading eBook</li>
|
||||
<li>Searching encyclopedia</li>
|
||||
<li>Educative software</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,34 @@
|
||||
<div layout="column" class="slide slide-5">
|
||||
|
||||
<!--Information software-->
|
||||
<div style="position: relative" flex="50" layout="row" layout-align="center center">
|
||||
|
||||
<div class="information-model" flex="50" >
|
||||
</div>
|
||||
|
||||
<div class="information-software" flex="50" layout="column" layout-align="center center">
|
||||
<h1>Information Software</h1>
|
||||
<ul>
|
||||
<li>Reading eBook</li>
|
||||
<li>Searching encyclopedia</li>
|
||||
<li>Educative software</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--Manipulation software-->
|
||||
<div class="animated fadeIn manipulation" style="position: relative" flex="50" layout="row" layout-align="center center">
|
||||
<div flex="50" layout="row" layout-align="center center">
|
||||
</div>
|
||||
<div flex="50" layout="column" layout-align="center center">
|
||||
<h1>Maniulation Software</h1>
|
||||
<ul>
|
||||
<li>Editing Text</li>
|
||||
<li>Drawing Images</li>
|
||||
<li>Compositing Music</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,15 @@
|
||||
<div layout="column" layout-align="center center" layout-fill class="slide slide-7">
|
||||
<div flex="10">
|
||||
<h1>Native Software Evolved</h1>
|
||||
</div>
|
||||
<div flex="20">
|
||||
</div>
|
||||
<div flex>
|
||||
<ul class="animated fadeIn">
|
||||
<li>Better and faster GUIs</li>
|
||||
<li>Direct access to hardware -> Area of OS innovation</li>
|
||||
<li>Many programming languages and paradigms</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,17 @@
|
||||
<div layout="column" layout-align="center center" layout-fill class="slide slide-7">
|
||||
|
||||
<div flex="10">
|
||||
<h1>Native suffered from</h1>
|
||||
</div>
|
||||
<div flex="20">
|
||||
</div>
|
||||
|
||||
<div flex>
|
||||
<ul class="animated fadeIn">
|
||||
<li>Multiple Platforms -> Multiple Binaries</li>
|
||||
<li>Distribution -> No App Store , No Updates</li>
|
||||
<li>Platform Prisons -> Software depends on platform future</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,16 @@
|
||||
<div layout="column" layout-align="center center" layout-fill class="slide slide-7">
|
||||
<div flex="10">
|
||||
<h1>Mobile solved distribution</h1>
|
||||
</div>
|
||||
<div flex="20">
|
||||
</div>
|
||||
<div flex>
|
||||
<ul class="animated fadeIn">
|
||||
<li>Multiple Platforms -> Multiple Binaries</li>
|
||||
<li style="text-decoration: line-through">Distribution -> No App Store , No Updates</li>
|
||||
<li>Platform Prisons -> Software depends on platform future</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,23 @@
|
||||
'use strict';
|
||||
|
||||
angular.module('hybridApps')
|
||||
.controller('slideCtrl', function ($scope) {
|
||||
|
||||
|
||||
$scope.slide4 = {
|
||||
framerate: 5,
|
||||
processing: false,
|
||||
fibonacci: 2000
|
||||
};
|
||||
|
||||
$scope.toggleProcessing = function() {
|
||||
$scope.slide4.processing = !$scope.slide4.processing;
|
||||
}
|
||||
|
||||
$scope.$watch('slide4.framerate', function(newVal){
|
||||
if (newVal) {
|
||||
$scope.interval = parseInt(1000 / Number(newVal)) ;
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 428 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 410 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue