FUNCT Update launcher

author: Humberto Alfonso Díaz <humberto.alfonso@asvito.es> 2019-12-18 21:45:12 +0100
committer: Lorenzo Tilve <ltilve@igalia.com> 2020-02-04 20:36:30 +0100
commit: 51e268c34ecfeb541c187f5a361c5c5baa76fbca (patch)
tree: 252ec4695f0069c4d6073ffcfc722e786091311a /src
parent: e54bb3ce8ee606fba0cb2ccf67d27cd41d614745 (diff)
11 files changed, 274 insertions, 119 deletions
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
author	Humberto Alfonso Díaz <humberto.alfonso@asvito.es>	2019-12-18 21:45:12 +0100
committer	Lorenzo Tilve <ltilve@igalia.com>	2020-02-04 20:36:30 +0100
commit	51e268c34ecfeb541c187f5a361c5c5baa76fbca (patch)
tree	252ec4695f0069c4d6073ffcfc722e786091311a /src
parent	e54bb3ce8ee606fba0cb2ccf67d27cd41d614745 (diff)