diff options
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | src/config.xml | 2 | ||||
| -rw-r--r-- | src/images/noicon.svg | 244 | ||||
| -rw-r--r-- | src/index.html | 47 | ||||
| -rw-r--r-- | src/index.js | 2 | ||||
| -rw-r--r-- | src/js/AFB.js | 215 | ||||
| -rw-r--r-- | src/js/app.js | 59 | ||||
| -rw-r--r-- | src/styles/main.scss | 20 | ||||
| -rw-r--r-- | webpack.config.js | 7 |
9 files changed, 560 insertions, 39 deletions
diff --git a/package.json b/package.json index e23d95a..056455a 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "zip-webpack-plugin": "^3.0.0" }, "dependencies": { - "@iconfu/svg-inject": "^1.2.3" + "@iconfu/svg-inject": "^1.2.3", + "mustache": "^3.0.1" } } diff --git a/src/config.xml b/src/config.xml index 1f409f6..b3a885d 100644 --- a/src/config.xml +++ b/src/config.xml @@ -1,7 +1,7 @@ <?xml version="1.0" encoding="UTF-8"?> <widget xmlns="http://www.w3.org/ns/widgets" id="webapps-html5-homescreen" version="5.0.0"> <name>HTML5 Homescreen</name> - <icon src="icon.png"/> + <icon src="icon.svg"/> <content src="index.html" type="text/html"/> <description>HTML5 Homescreen demo</description> <author>Igalia, S.L.</author> diff --git a/src/images/noicon.svg b/src/images/noicon.svg new file mode 100644 index 0000000..6e1f9d3 --- /dev/null +++ b/src/images/noicon.svg @@ -0,0 +1,244 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> + +<svg + xmlns:i="&#38;ns_ai;" + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + version="1.1" + x="0px" + y="0px" + viewBox="0 0 320 320" + style="enable-background:new 0 0 320 320;" + xml:space="preserve" + id="svg2" + inkscape:version="0.91 r13725" + sodipodi:docname="noicon.svg"><metadata + id="metadata1292"><rdf:RDF><cc:Work + rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs + id="defs1290" /><sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="1680" + inkscape:window-height="1005" + id="namedview1288" + showgrid="false" + inkscape:zoom="2.95" + inkscape:cx="177.45946" + inkscape:cy="147.70379" + inkscape:window-x="1971" + inkscape:window-y="0" + inkscape:window-maximized="0" + inkscape:current-layer="Multimedia_Inactive_copy" /><style + type="text/css" + id="style4"> + .st0{display:none;} + .st1{display:inline;} + .st2{opacity:0.4;fill:url(#SVGID_1_);} + .st3{fill:url(#SVGID_2_);} + .st4{fill:#FFFFFF;} + .st5{font-family:'Roboto-Regular';} + .st6{font-size:25px;} + .st7{letter-spacing:6;} + .st8{fill:url(#SVGID_3_);} + .st9{fill:url(#SVGID_4_);} + .st10{fill:url(#SVGID_5_);} + .st11{fill:url(#SVGID_6_);} + .st12{fill:url(#SVGID_7_);} + .st13{fill:url(#SVGID_8_);} + .st14{fill:url(#SVGID_9_);} + .st15{fill:url(#SVGID_10_);} + .st16{fill:url(#SVGID_11_);} + .st17{fill:url(#SVGID_12_);} + .st18{fill:url(#SVGID_13_);} + .st19{fill:url(#SVGID_14_);} + .st20{fill:url(#SVGID_15_);} + .st21{fill:url(#SVGID_16_);} + .st22{fill:url(#SVGID_17_);} + .st23{fill:url(#SVGID_18_);} + .st24{opacity:0.29;} + .st25{fill:url(#SVGID_19_);} + .st26{fill:url(#SVGID_20_);} + .st27{fill:url(#SVGID_21_);} + .st28{fill:url(#SVGID_22_);} + .st29{fill:url(#SVGID_23_);} + .st30{fill:url(#SVGID_24_);} + .st31{fill:url(#SVGID_25_);} + .st32{fill:url(#SVGID_26_);} + .st33{fill:url(#SVGID_27_);} + .st34{fill:url(#SVGID_28_);} + .st35{fill:url(#SVGID_29_);} + .st36{fill:url(#SVGID_30_);} + .st37{fill:url(#SVGID_31_);} + .st38{fill:url(#SVGID_32_);} + .st39{fill:url(#SVGID_33_);} + .st40{fill:url(#SVGID_34_);} + .st41{fill:url(#SVGID_35_);} + .st42{fill:url(#SVGID_36_);} + .st43{opacity:0.4;fill:url(#SVGID_37_);} + .st44{fill:url(#SVGID_38_);} + .st45{fill:url(#SVGID_39_);} + .st46{fill:url(#SVGID_40_);} + .st47{fill:url(#SVGID_41_);} + .st48{fill:url(#SVGID_42_);} + .st49{fill:url(#SVGID_43_);} + .st50{fill:url(#SVGID_44_);} + .st51{display:inline;opacity:0.29;} + .st52{display:inline;fill:url(#SVGID_45_);} + .st53{display:inline;fill:url(#SVGID_46_);} + .st54{display:inline;fill:#FFFFFF;} + .st55{display:inline;fill:url(#SVGID_47_);} + .st56{display:inline;fill:url(#SVGID_48_);} + .st57{display:inline;fill:url(#SVGID_49_);} + .st58{display:inline;fill:url(#SVGID_50_);} + .st59{display:inline;fill:url(#SVGID_51_);} + .st60{display:inline;fill:url(#SVGID_52_);} + .st61{opacity:0.4;fill:url(#SVGID_53_);} + .st62{fill:url(#SVGID_54_);} + .st63{fill:url(#SVGID_55_);} + .st64{fill:url(#SVGID_56_);} + .st65{fill:url(#SVGID_57_);} + .st66{fill:url(#SVGID_58_);} + .st67{opacity:0.4;fill:url(#SVGID_59_);} + .st68{fill:url(#SVGID_60_);} + .st69{fill:url(#SVGID_61_);} + .st70{fill:url(#SVGID_62_);} + .st71{fill:url(#SVGID_63_);} + .st72{fill:url(#SVGID_64_);} + .st73{fill:url(#SVGID_65_);} + .st74{fill:url(#SVGID_66_);} + .st75{fill:url(#SVGID_67_);} + .st76{fill:url(#SVGID_68_);} + .st77{fill:url(#SVGID_69_);} + .st78{fill:url(#SVGID_70_);} + .st79{fill:url(#SVGID_71_);} + .st80{fill:url(#SVGID_72_);} + .st81{fill:url(#SVGID_73_);} + .st82{fill:url(#SVGID_74_);} + .st83{fill:url(#SVGID_75_);} + .st84{fill:url(#SVGID_76_);} + .st85{fill:url(#SVGID_77_);} + .st86{fill:url(#SVGID_78_);} + .st87{fill:url(#SVGID_79_);} + .st88{fill:url(#SVGID_80_);} + .st89{fill:url(#SVGID_81_);} + .st90{fill:url(#SVGID_82_);} + .st91{fill:url(#SVGID_83_);} + .st92{fill:url(#SVGID_84_);} + .st93{fill:url(#SVGID_85_);} + .st94{fill:url(#SVGID_86_);} + .st95{opacity:0.4;fill:url(#SVGID_87_);} + .st96{fill:url(#SVGID_88_);} + .st97{fill:url(#SVGID_89_);} + .st98{fill:url(#SVGID_90_);} + .st99{fill:url(#SVGID_91_);} + .st100{fill:url(#SVGID_92_);} + .st101{fill:url(#SVGID_93_);} + .st102{fill:url(#SVGID_94_);} + .st103{opacity:0.4;fill:url(#SVGID_95_);} + .st104{fill:url(#SVGID_96_);} + .st105{fill:url(#SVGID_97_);} + .st106{fill:url(#SVGID_98_);} + .st107{fill:url(#SVGID_99_);} + .st108{fill:url(#SVGID_100_);} + .st109{fill:url(#SVGID_101_);} + .st110{display:inline;fill:url(#SVGID_102_);} + .st111{display:inline;fill:url(#SVGID_103_);} + .st112{fill:url(#SVGID_104_);} + .st113{fill:url(#SVGID_105_);} + .st114{fill:url(#SVGID_106_);} + .st115{fill:url(#SVGID_107_);} + .st116{fill:url(#SVGID_108_);} + .st117{opacity:0.4;fill:url(#SVGID_109_);} + .st118{fill:url(#SVGID_110_);} + .st119{fill:url(#SVGID_111_);} + .st120{fill:url(#SVGID_112_);} + .st121{fill:url(#SVGID_113_);} + .st122{fill:url(#SVGID_114_);} + .st123{opacity:0.4;fill:url(#SVGID_115_);} + .st124{fill:url(#SVGID_116_);} + .st125{fill:url(#SVGID_117_);} + .st126{fill:url(#SVGID_118_);} + .st127{display:inline;fill:url(#SVGID_119_);} + .st128{display:inline;fill:url(#SVGID_120_);} + .st129{fill:url(#SVGID_121_);} + .st130{fill:url(#SVGID_122_);} +</style><switch + id="switch6"><g + i:extraneous="self" + id="g8"><g + id="Multimedia_Inactive_copy"><circle + class="st24" + cx="159.7" + cy="133.4" + r="101.9" + id="circle884" /><linearGradient + id="SVGID_91_" + gradientUnits="userSpaceOnUse" + x1="115.9317" + y1="254.1836" + x2="256.3852" + y2="-133.5267"><stop + offset="0" + style="stop-color:#8BC53F" + id="stop887" /><stop + offset="2.015080e-02" + style="stop-color:#7CCB56;stop-opacity:0.9678" + id="stop889" /><stop + offset="6.089833e-02" + style="stop-color:#62D67D;stop-opacity:0.9028" + id="stop891" /><stop + offset="0.1057" + style="stop-color:#4BDFA0;stop-opacity:0.8312" + id="stop893" /><stop + offset="0.1543" + style="stop-color:#38E7BE;stop-opacity:0.7537" + id="stop895" /><stop + offset="0.2077" + style="stop-color:#28EED6;stop-opacity:0.6684" + id="stop897" /><stop + offset="0.2681" + style="stop-color:#1CF3E8;stop-opacity:0.572" + id="stop899" /><stop + offset="0.3394" + style="stop-color:#13F6F5;stop-opacity:0.4581" + id="stop901" /><stop + offset="0.4323" + style="stop-color:#0EF8FD;stop-opacity:0.3098" + id="stop903" /><stop + offset="0.6264" + style="stop-color:#0DF9FF;stop-opacity:0" + id="stop905" /></linearGradient><circle + class="st99" + cx="159.7" + cy="133.4" + r="101.9" + id="circle907" /><linearGradient + id="SVGID_92_" + gradientUnits="userSpaceOnUse" + x1="4.0481" + y1="287.9492" + x2="320.4859" + y2="-15.4029" + gradientTransform="matrix(1 5.464556e-03 -5.464556e-03 1 -2.0192 -3.0212)"><stop + offset="0" + style="stop-color:#59FF7F" + id="stop910" /><stop + offset="1" + style="stop-color:#6BFBFF" + id="stop912" /></linearGradient><path + class="st100" + d="M160,238.8c-0.2,0-0.4,0-0.6,0c-58-0.3-104.9-47.7-104.6-105.7C55.2,75.3,102.3,28.5,160,28.5 c0.2,0,0.4,0,0.6,0c58,0.3,104.9,47.7,104.6,105.7l0,0C264.8,192,217.7,238.8,160,238.8z M160,32.2 c-55.7,0-101.2,45.2-101.5,100.9c-0.3,55.9,45,101.7,100.9,102c0.2,0,0.4,0,0.6,0c55.7,0,101.2-45.2,101.5-100.9 c0.3-55.9-45-101.7-100.9-102C160.4,32.2,160.2,32.2,160,32.2z" + id="path914" /></g></g></switch></svg>
\ No newline at end of file diff --git a/src/index.html b/src/index.html index 971ba8d..f280ebe 100644 --- a/src/index.html +++ b/src/index.html @@ -6,43 +6,18 @@ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> - <div class="parent"> - <div class="item"> - <img src="mockups/dashboard.svg" onload="SVGInject(this);"> - <div class="name"> - DASHBOARD + <div id="AppContainer" class="parent"> + <script id="item-template" type="x-tmpl-mustache"> + <div class="item"> + <img class="icon" src="{{ icon }}" onload="SVGInject(this);"> + <div class="name"> + {{ name }} + </div> </div> - </div> - <div class="item"> - <img src="mockups/hvac.svg" onload="SVGInject(this);"> - <div class="name"> - HVAC - </div> - </div> - <div class="item"> - <img src="mockups/multimedia.svg" onload="SVGInject(this);"> - <div class="name"> - MULTIMEDIA - </div> - </div> - <div class="item"> - <img src="mockups/phone.svg" onload="SVGInject(this);"> - <div class="name"> - PHONE - </div> - </div> - <div class="item"> - <img src="mockups/radio.svg" onload="SVGInject(this);"> - <div class="name"> - RADIO - </div> - </div> - <div class="item"> - <img src="mockups/settings.svg" onload="SVGInject(this);"> - <div class="name"> - SETTINGS - </div> - </div> + </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 406ef65..1d569d6 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,6 @@ import '@iconfu/svg-inject'; +import './js/AFB.js'; +import './js/app.js'; console.log('Arrancada la aplicación compilando CSS y SaSS'); diff --git a/src/js/AFB.js b/src/js/AFB.js new file mode 100644 index 0000000..d6e6bfa --- /dev/null +++ b/src/js/AFB.js @@ -0,0 +1,215 @@ +/* + * Copyright (C) 2017, 2018 "IoT.bzh" + * Author: José Bollo <jose.bollo@iot.bzh> + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +AFB = function(base, initialtoken){ + +if (typeof base != "object") + base = { base: base, token: initialtoken }; + +var initial = { + base: base.base || "api", + token: base.token || initialtoken || "HELLO", + host: base.host || window.location.host, + url: base.url || undefined +}; + +var urlws = initial.url || "ws://"+initial.host+"/"+initial.base; + +/*********************************************/ +/**** ****/ +/**** AFB_context ****/ +/**** ****/ +/*********************************************/ +var AFB_context; +{ + var UUID = undefined; + var TOKEN = initial.token; + + var context = function(token, uuid) { + this.token = token; + this.uuid = uuid; + } + + context.prototype = { + get token() {return TOKEN;}, + set token(tok) {if(tok) TOKEN=tok;}, + get uuid() {return UUID;}, + set uuid(id) {if(id) UUID=id;} + }; + + AFB_context = new context(); +} +/*********************************************/ +/**** ****/ +/**** AFB_websocket ****/ +/**** ****/ +/*********************************************/ +var AFB_websocket; +{ + var CALL = 2; + var RETOK = 3; + var RETERR = 4; + var EVENT = 5; + + var PROTO1 = "x-afb-ws-json1"; + + AFB_websocket = function(on_open, on_abort) { + var u = urlws, p = '?'; + if (AFB_context.token) { + u = u + '?x-afb-token=' + AFB_context.token; + p = '&'; + } + if (AFB_context.uuid) + u = u + p + 'x-afb-uuid=' + AFB_context.uuid; + this.ws = new WebSocket(u, [ PROTO1 ]); + this.url = u; + this.pendings = {}; + this.awaitens = {}; + this.counter = 0; + this.ws.onopen = onopen.bind(this); + this.ws.onerror = onerror.bind(this); + this.ws.onclose = onclose.bind(this); + this.ws.onmessage = onmessage.bind(this); + this.onopen = on_open; + this.onabort = on_abort; + } + + function onerror(event) { + var f = this.onabort; + if (f) { + delete this.onopen; + delete this.onabort; + f && f(this); + } + this.onerror && this.onerror(this); + } + + function onopen(event) { + var f = this.onopen; + delete this.onopen; + delete this.onabort; + f && f(this); + } + + function onclose(event) { + var err = { + jtype: 'afb-reply', + request: { + status: 'disconnected', + info: 'server hung up' + } + }; + for (var id in this.pendings) { + try { this.pendings[id][1](err); } catch (x) {/*NOTHING*/} + } + this.pendings = {}; + this.onclose && this.onclose(); + } + + function fire(awaitens, name, data) { + var a = awaitens[name]; + if (a) + a.forEach(function(handler){handler(data);}); + var i = name.indexOf("/"); + if (i >= 0) { + a = awaitens[name.substring(0,i)]; + if (a) + a.forEach(function(handler){handler(data);}); + } + a = awaitens["*"]; + if (a) + a.forEach(function(handler){handler(data);}); + } + + function reply(pendings, id, ans, offset) { + if (id in pendings) { + var p = pendings[id]; + delete pendings[id]; + try { p[offset](ans); } catch (x) {/*TODO?*/} + } + } + + function onmessage(event) { + var obj = JSON.parse(event.data); + var code = obj[0]; + var id = obj[1]; + var ans = obj[2]; + AFB_context.token = obj[3]; + switch (code) { + case RETOK: + reply(this.pendings, id, ans, 0); + break; + case RETERR: + reply(this.pendings, id, ans, 1); + break; + case EVENT: + default: + fire(this.awaitens, id, ans); + break; + } + } + + function close() { + this.ws.close(); + this.ws.onopen = + this.ws.onerror = + this.ws.onclose = + this.ws.onmessage = + this.onopen = + this.onabort = function(){}; + } + + function call(method, request, callid) { + return new Promise((function(resolve, reject){ + var id, arr; + if (callid) { + id = String(callid); + if (id in this.pendings) + throw new Error("pending callid("+id+") exists"); + } else { + do { + id = String(this.counter = 4095 & (this.counter + 1)); + } while (id in this.pendings); + } + this.pendings[id] = [ resolve, reject ]; + arr = [CALL, id, method, request ]; + if (AFB_context.token) arr.push(AFB_context.token); + this.ws.send(JSON.stringify(arr)); + }).bind(this)); + } + + function onevent(name, handler) { + var id = name; + var list = this.awaitens[id] || (this.awaitens[id] = []); + list.push(handler); + } + + AFB_websocket.prototype = { + close: close, + call: call, + onevent: onevent + }; +} +/*********************************************/ +/**** ****/ +/**** ****/ +/**** ****/ +/*********************************************/ +return { + context: AFB_context, + ws: AFB_websocket +}; +}; diff --git a/src/js/app.js b/src/js/app.js new file mode 100644 index 0000000..fccf04e --- /dev/null +++ b/src/js/app.js @@ -0,0 +1,59 @@ +import Mustache from 'mustache'; + +var host = document.location.hostname; +var port = document.location.port; +var args = new URLSearchParams(document.location.search.substring(1)); +var token = args.get("x-afb-token") || args.get("token") || "HELLO"; +var afb; +var template; + +function log(smgs) { + document.getElementById('log').innerHTML += '<div>'+smgs+'</div>'; +} + +function getIcon(app) { + if( app.icon.match(/^.*\.svg$/) ) { + return '/icons/'+app.id; + } else { + return '/images/noicon.svg'; + } +} + +function display_applications(apps) { + var appContainer = document.getElementById('AppContainer'); + for( var i=0; i<apps.length; i++) { + apps[i].icon = getIcon(apps[i]); + appContainer.innerHTML += Mustache.render(template, apps[i]); + } +} + +function load_application_list() { + var ws = new afb.ws(function() { + var api_verb = "afm-main/runnables"; + ws.call(api_verb, {}).then( + function(obj) { + display_applications(obj.response); + }, + function(obj) { + //TODO Manage errors + log("failure"); + } + ); + }, + function() { + //TODO manage errors + log("ws aborted"); + }); +} + +function init() { + template = document.getElementById('item-template').innerHTML; + Mustache.parse(template); + afb = new AFB({ + host: "raspberrypi3.local:31022", + token: token + }); + load_application_list(); +} + +document.addEventListener('DOMContentLoaded', init);
\ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 5aca22b..1c6220e 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,6 +1,11 @@ +::-webkit-scrollbar { + display: none; +} + html { height: 100%; background-size: cover; + -webkit-overflow-scrolling: touch; } body { @@ -18,6 +23,11 @@ body { height: 100%; .item { + .icon { + width: 100%; + height: 100%; + } + .name { width: 100%; text-align: center; @@ -26,4 +36,14 @@ body { } } } + + .log { + display: none; + position: absolute; + bottom: 0; + left: 0; + width: 1080px; + background: white; + font-size: 1.5rem; + } }
\ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index b875b6c..2b74bb2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -32,12 +32,17 @@ module.exports = { from: 'src/mockups/*', to: 'mockups/', flatten: true + }, + { + from: 'src/images/*', + to: 'images/', + flatten: true } ]), new HtmlWebpackPlugin({ template: 'src/index.html', filename: 'index.html', - inject: 'head' + inject: 'body' }), new MiniCSSExtractPlugin({ filename: 'app.css', |
