hybrid apps
@ -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>
|
@ -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)) ;
|
||||
}
|
||||
})
|
||||
|
||||
});
|
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 9.7 KiB |
After Width: | Height: | Size: 23 KiB |
After Width: | Height: | Size: 56 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 138 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 80 KiB |
After Width: | Height: | Size: 428 KiB |
After Width: | Height: | Size: 410 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 69 KiB |
After Width: | Height: | Size: 25 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 9.9 KiB |
After Width: | Height: | Size: 51 KiB |
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 4.9 KiB |
After Width: | Height: | Size: 37 KiB |
After Width: | Height: | Size: 39 KiB |
After Width: | Height: | Size: 9.9 KiB |