aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-12-18 21:45:12 +0100
committerLorenzo Tilve <ltilve@igalia.com>2020-02-04 20:36:30 +0100
commit51e268c34ecfeb541c187f5a361c5c5baa76fbca (patch)
tree252ec4695f0069c4d6073ffcfc722e786091311a
parente54bb3ce8ee606fba0cb2ccf67d27cd41d614745 (diff)
FUNCT Update launcher
Diffstat
-rw-r--r--package.json2
-rw-r--r--src/config.json14
-rw-r--r--src/index.html15
-rw-r--r--src/index.js6
-rw-r--r--src/js/app.js81
-rw-r--r--src/js/templates.js19
-rw-r--r--src/styles/720.scss5
-rw-r--r--src/styles/app.scss22
-rw-r--r--src/styles/main.scss53
-rw-r--r--src/styles/portrait.scss3
-rw-r--r--src/templates/apps.json158
-rw-r--r--src/templates/apps.template.html17
-rw-r--r--webpack.config.js17
13 files changed, 293 insertions, 119 deletions
diff --git a/package.json b/package.json
index daa7cd5..2913742 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
"automotivegradelinux"
],
"devDependencies": {
+ "@fortawesome/fontawesome-free": "^5.11.2",
"clean-webpack-plugin": "^1.0.1",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^2.1.0",
@@ -36,6 +37,7 @@
},
"dependencies": {
"agl-js-api": "https://github.com/AGL-web-applications/agl-js-api.git#master",
+ "bootstrap": "4.4.1",
"mustache": "^3.0.1"
}
}
diff --git a/src/config.json b/src/config.json
index 1373f1e..e5f7d0e 100644
--- a/src/config.json
+++ b/src/config.json
@@ -1,5 +1,15 @@
{
"black_list": [
- "webapps-html5-launcher@1.0", "homescreen@0.1"
- ]
+ "webapps-html5-launcher@1.0", "homescreen@0.1", "webapps-html5-homescreen@1.0"
+ ],
+ "icons": {
+ "webapps-aquarium": "fas fa-fish",
+ "webapps-falling-blocks": "fas fa-cubes",
+ "webapps-mixer": "fas fa-volume-up",
+ "taskmanager": "fas fa-tasks",
+ "browser": "fab fa-chrome",
+ "webapps-hvac": "fas fa-thermometer-half",
+ "webapps-youtube": "fab fa-youtube",
+ "webapps-settings": "fas fa-cogs"
+ }
}
diff --git a/src/index.html b/src/index.html
index 574b2ab..7bd906b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -21,19 +21,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
- <div id="AppContainer" class="parent">
- <script id="item-template" type="x-tmpl-mustache">
- <a href="#" class="item" id="app-{{id}}" app-id="{{ id }}" onclick="window.launch(this);" style="display:none">
- <img id="icon-inactive-{{id}}" class="icon inactive" src="/images/icons/blank_inactive.svg">
- <img id="icon-enabled-{{id}}" class="icon enabled" src="/images/icons/blank_active.svg">
- <div class="name">
- {{ name }}
- </div>
- </a>
- </script>
- </div>
- <div class="log" id="log">
-
- </div>
+
</body>
</html> \ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 775b3af..a73afa3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -15,11 +15,11 @@
*/
/* JS */
-import { init, launch } from './js/app.js';
+import * as app from './js/app.js';
/* CSS */
import './styles/app.scss';
-window.launch = launch;
+window.app = app;
-document.addEventListener('DOMContentLoaded', init); \ No newline at end of file
+document.addEventListener('DOMContentLoaded', app.init); \ No newline at end of file
diff --git a/src/js/app.js b/src/js/app.js
index 603bc88..43d5c62 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -15,63 +15,45 @@
*/
import Mustache from 'mustache';
+import { load as load_template } from './templates';
import { afmMain, api, homescreen } from 'agl-js-api';
var configjson = require('../config.json');
var template;
+var page = {
+ apps: []
+};
-function log(smgs) {
- document.getElementById('log').innerHTML += '<div>'+smgs+'</div>';
+function render() {
+ document.body.innerHTML = Mustache.render(template, page);
}
-function show_app(app) {
- document.getElementById("app-"+app.id).style["display"]="block";
-}
-
-function display_icon(app) {
- return new Promise(function(resolve, reject) {
- var iconInactiveURL = '/images/icons/'+app.name.toLowerCase()+'_inactive.svg';
- var iconActiveURL = '/images/icons/'+app.name.toLowerCase()+'_active.svg';
- var image = new Image();
-
- image.onload = function() {
- document.getElementById("icon-inactive-"+app.id).src = iconInactiveURL;
- document.getElementById("icon-enabled-"+app.id).src = iconActiveURL;
- resolve();
- }
-
- image.onerror = function(){
- resolve();
- }
-
- image.src = iconInactiveURL;
-
- });
-}
+function load_application_list() {
+ load_template('apps.json').then(function(apps) {
+ apps = JSON.parse(apps);
+ page.apps = [];
+ for( var i=0; i<apps.length; i++) {
+ if( configjson.black_list.indexOf(apps[i].id) === -1 ) {
+ (function(app) {
+ if( configjson.icons[app.id.split('@')[0]] ) {
+ app.icon = configjson.icons[app.id.split('@')[0]];
+ } else {
+ app.icon = undefined;
+ app.letter = app.name[0];
+ }
-function render_applications(apps) {
- var appContainer = document.getElementById('AppContainer');
- for( var i=0; i<apps.length; i++) {
- if( configjson.black_list.indexOf(apps[i].id) === -1 ) {
- appContainer.innerHTML += Mustache.render(template, apps[i]);
- (function(app) {
- display_icon(app).then(function() {
- show_app(app);
- });
- })(apps[i]);
+ page.apps.push(app);
+ })(apps[i]);
+ }
}
- }
-}
-
-function load_application_list() {
- afmMain.runnables().then(function(result) {
- render_applications(result);
+
+ render();
});
}
-export function launch(app) {
- var appId = app.getAttribute('app-id');
+export function launch(appId) {
+ console.log(appId);
homescreen.showWindow(appId.split('@')[0]).then(function(result) {
log("success: " + result);
});
@@ -79,7 +61,12 @@ export function launch(app) {
export function init() {
api.init();
- template = document.getElementById('item-template').innerHTML;
- Mustache.parse(template);
- load_application_list();
+ load_template('apps.template.html').then(function(result) {
+ template = result;
+ Mustache.parse(template);
+ load_application_list();
+ }, function(error) {
+ console.error('ERRROR loading main template', error);
+ });
+
} \ No newline at end of file
diff --git a/src/js/templates.js b/src/js/templates.js
new file mode 100644
index 0000000..2513722
--- /dev/null
+++ b/src/js/templates.js
@@ -0,0 +1,19 @@
+export function load(template) {
+ return new Promise(function(resolve, reject){
+ var xhr = new XMLHttpRequest();
+
+ xhr.open('GET', '/templates/'+template);
+
+ xhr.send();
+
+ xhr.onload = function() {
+ if (xhr.status != 200) {
+ console.error('Error loading template', xhr.status, xhr.statusText);
+ reject(xhr.status);
+ } else {
+ console.log(xhr.responseType);
+ resolve(xhr.responseText);
+ }
+ };
+ });
+} \ No newline at end of file
diff --git a/src/styles/720.scss b/src/styles/720.scss
index e69de29..2e9bd3c 100644
--- a/src/styles/720.scss
+++ b/src/styles/720.scss
@@ -0,0 +1,5 @@
+@media (orientation: portrait) {
+ html {
+ height: 992px;
+ }
+} \ No newline at end of file
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 1cdeb22..02bfead 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -1,35 +1,31 @@
-$colors: (
- primary: #00ADDC,
- font: #999999
-);
+$body-bg: transparent;
+$body-color: #FFFFFF;
+$list-group-bg: transparent;
+$font-size-base: 1.5rem;
+$input-bg: transparent;
+$input-color: #FFFFFF;
+@import "~bootstrap/scss/bootstrap";
@media (max-device-width: 720px) and (orientation: portrait) {
- $header_size: 145px;
-
@import "main.scss";
@import "portrait.scss";
@import "720.scss";
}
@media (max-device-width: 1280px) and (orientation: landscape) {
- $header_size: 145px;
-
@import "main.scss";
@import "landscape.scss";
@import "720.scss";
}
@media (min-device-width: 1080px) and (orientation: portrait) {
- $header_size: 218px;
-
@import "main.scss";
@import "portrait.scss";
@import "1080.scss";
}
-@media (min-device-width: 1920px) and (orientation: landscape) {
- $header_size: 218px;
-
+@media (min-device-width: 1490px) and (orientation: landscape) {
@import "main.scss";
@import "landscape.scss";
@import "1080.scss";
}
+@import "~@fortawesome/fontawesome-free/css/all.min.css";
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 6861663..4cededc 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -24,56 +24,29 @@ html {
}
body {
- font-size: 1.2rem;
- font-family: Arial;
- color: map-get($colors, font);
- margin: 0 5%;
-
- .parent {
+ .list-group.scrollable {
+ height: 720px;
+ overflow: scroll;
+ }
+ .grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
- align-items: flex-start;
+ align-items: center;
height: 100%;
.item {
- &:active {
- .icon {
- &.inactive {
- display: none;
- }
-
- &.enabled{
- display: block;
- }
- }
- }
-
- color: map-get($colors, font);
- text-decoration: none;
+ display: flex;
+ justify-content: center;
- -webkit-animation-name: animation;
- -webkit-animation-duration: 2s;
+ button {
+ width: 300px;
+ height: 300px;
- .icon {
-
- &.inactive {
- display: block;
- }
-
- &.enabled{
- display: none;
+ .icon {
+ font-size: 7rem;
}
-
- width: 70%;
- margin: 5% 15%;
- }
-
- .name {
- width: 100%;
- text-align: center;
- text-transform: uppercase;
}
}
}
diff --git a/src/styles/portrait.scss b/src/styles/portrait.scss
index a4eb732..18ba52c 100644
--- a/src/styles/portrait.scss
+++ b/src/styles/portrait.scss
@@ -2,6 +2,9 @@
html {
background-image: url('../images/vertical_background.png');
+ background-position: top center;
+ background-repeat: no-repeat;
+ background-color: transparent;
}
body {
diff --git a/src/templates/apps.json b/src/templates/apps.json
new file mode 100644
index 0000000..b96bead
--- /dev/null
+++ b/src/templates/apps.json
@@ -0,0 +1,158 @@
+[
+ {
+ "description": "Aquarium demo using WebGL",
+ "name": "WebGL Aquarium",
+ "shortname": "",
+ "id": "webapps-aquarium@0.0",
+ "version": "0.0.10",
+ "author": "Google Inc.",
+ "author-email": "",
+ "width": "",
+ "height": "",
+ "icon": "/var/local/lib/afm/applications/webapps-aquarium/0.0/icon_128.png",
+ "http-port": 31038
+ },
+ {
+ "description": "HTML5 Homescreen demo",
+ "name": "Homescreen",
+ "shortname": "",
+ "id": "webapps-html5-homescreen@1.0",
+ "version": "1.0.0",
+ "author": "Igalia, S.L.",
+ "author-email": "",
+ "width": "",
+ "height": "",
+ "icon": "/var/local/lib/afm/applications/webapps-html5-homescreen/1.0/icon.svg",
+ "http-port": 31022
+ },
+ {
+ "description": "Falling blocks demo",
+ "name": "Falling blocks",
+ "shortname": "",
+ "id": "webapps-falling-blocks@1.0",
+ "version": "1.0.0",
+ "author": "Igalia, S.L.",
+ "author-email": "",
+ "width": "",
+ "height": "",
+ "icon": "/var/local/lib/afm/applications/webapps-falling-blocks/1.0/icon.png",
+ "http-port": 31040
+ },
+ {
+ "description": "HTML5 MIXER demo",
+ "name": "MIXER",
+ "shortname": "",
+ "id": "webapps-mixer@0.0",
+ "version": "0.0.0",
+ "author": "Igalia, S.L.",
+ "author-email": "",
+ "width": "",
+ "height": "",
+ "icon": "/var/local/lib/afm/applications/webapps-mixer/0.0/icon.svg",
+ "http-port": 31034
+ },
+ {
+ "description": "Jamendo",
+ "name": "Jamendo",
+ "shortname": "",
+ "id": "webapps-jamendo@1.0",
+ "version": "1.0.0",
+ "author": "",
+ "author-email": "",
+ "width": "",
+ "height": "",
+ "icon": "/var/local/lib/afm/applications/webapps-jamendo/1.0/icon.svg",
+ "http-port": 31041
+ },
+ {
+ "description": "Launcher application for AGL based on html5 technologies",
+ "name": "HTML5 Launcher",
+ "shortname": "",
+ "id": "webapps-html5-launcher@1.0",
+ "version": "1.0",
+ "author": "Igalia, S.L.",
+ "author-email": "",
+ "width": "",
+ "height": "",
+ "icon": "/var/local/lib/afm/applications/webapps-html5-launcher/1.0/icon.svg",
+ "http-port": 31033
+ },
+ {
+ "description": "AGL Task Manager",
+ "name": "taskmanager",
+ "shortname": "",
+ "id": "taskmanager@0.1",
+ "version": "0.1",
+ "author": "Wool, Vitaly <vitaly.wool@konsulko.com>",
+ "author-email": "",
+ "width": "",
+ "height": "",
+ "icon": "/var/local/lib/afm/applications/taskmanager/0.1/icon.png",
+ "http-port": 31037
+ },
+ {
+ "description": "AGL widget service for Chromium browser",
+ "name": "browser",
+ "shortname": "",
+ "id": "browser@-7dabb46-dirty",
+ "version": "-7dabb46-dirty",
+ "author": "Jose Dapena Paz <jose.dapena@lge.com>",
+ "author-email": "",
+ "width": "",
+ "height": "",
+ "icon": "/var/local/lib/afm/applications/browser/-7dabb46-dirty/icon.png",
+ "http-port": 31029
+ },
+ {
+ "description": "Blob demo using WebGL",
+ "name": "WebGL Blob",
+ "shortname": "",
+ "id": "webapps-blob@0.0",
+ "version": "0.0.10",
+ "author": "Google Inc.",
+ "author-email": "",
+ "width": "",
+ "height": "",
+ "icon": "/var/local/lib/afm/applications/webapps-blob/0.0/icon_128.png",
+ "http-port": 31039
+ },
+ {
+ "description": "HTML5 HVAC demo",
+ "name": "HVAC",
+ "shortname": "",
+ "id": "webapps-hvac@0.0",
+ "version": "0.0.0",
+ "author": "Igalia, S.L.",
+ "author-email": "",
+ "width": "",
+ "height": "",
+ "icon": "/var/local/lib/afm/applications/webapps-hvac/0.0/icon.svg",
+ "http-port": 31030
+ },
+ {
+ "description": "YouTube",
+ "name": "YouTube",
+ "shortname": "",
+ "id": "webapps-youtube@1.0",
+ "version": "1.0.0",
+ "author": "LGE-SVL",
+ "author-email": "",
+ "width": "",
+ "height": "",
+ "icon": "/var/local/lib/afm/applications/webapps-youtube/1.0/icon.png",
+ "http-port": 31042
+ },
+ {
+ "description": "HTML5 SETTINGS demo",
+ "name": "SETTINGS",
+ "shortname": "",
+ "id": "webapps-settings@0.0",
+ "version": "0.0.0",
+ "author": "Igalia, S.L.",
+ "author-email": "",
+ "width": "",
+ "height": "",
+ "icon": "/var/local/lib/afm/applications/webapps-settings/0.0/icon.svg",
+ "http-port": 31035
+ }
+] \ No newline at end of file
diff --git a/src/templates/apps.template.html b/src/templates/apps.template.html
new file mode 100644
index 0000000..3b0f74e
--- /dev/null
+++ b/src/templates/apps.template.html
@@ -0,0 +1,17 @@
+<div class="grid">
+ {{ #apps }}
+ <div class="item my-3">
+ <button type="button" class="btn btn-outline-primary" onclick="app.launch('{{id}}')">
+ <h1 class="icon text-center">
+ {{ #icon }}
+ <i class="{{ . }}"></i>
+ {{ /icon }}
+ {{ #letter }}
+ {{ . }}
+ {{ /letter }}
+ </h1>
+ {{ name }}
+ </button>
+ </div>
+ {{ /apps }}
+</div> \ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 02ea4d1..9e80342 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -42,6 +42,11 @@ module.exports = {
from: 'src/images/icons/*',
to: 'images/icons/',
flatten: true
+ },
+ {
+ from: 'src/templates/*',
+ to: 'templates/',
+ flatten: true
}
]),
new HtmlWebpackPlugin({
@@ -78,6 +83,18 @@ module.exports = {
]
},
{
+ test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+ use: [
+ {
+ loader: 'file-loader',
+ options: {
+ name: '[name].[ext]',
+ outputPath: 'fonts/'
+ }
+ }
+ ]
+ },
+ {
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',