Rename to more meaningful name directories

Change-Id: Ib3990308c1f2358b3e330cd0068719098c4dab56 Signed-off-by: Romain Forlot <romain.forlot@iot.bzh>
author: Romain Forlot <romain.forlot@iot.bzh> 2017-05-04 13:59:00 +0200
committer: Romain Forlot <romain.forlot@iot.bzh> 2017-05-04 13:59:00 +0200
commit: 5a87b82700a736e7c443023399da3d2a31098895 (patch)
tree: 66c306b27d3c61b362536d334ec283b912f5dd67 /templates
parent: 437f25048ab184e532059f3d31fcf47011abe9fe (diff)
126 files changed, 10766 insertions, 0 deletions
diff --git a/templates/html5/.gitignore b/templates/html5/.gitignore
new file mode 100644
index 0000000..54d0fba
--- /dev/null
+++ b/templates/html5/.gitignore
@@ -0,0 +1,8 @@
+bower_components/
+node_modules/
+dist.*/
+*.DS_Store
+nbproject/private/
+.noderc*
+*.wgt
+build
diff --git a/templates/html5/AGLbuild b/templates/html5/AGLbuild
new file mode 100755
index 0000000..ccbc28b
--- /dev/null
+++ b/templates/html5/AGLbuild
@@ -0,0 +1,41 @@
+#!/usr/bin/make -f
+# Copyright (C) 2015, 2016 "IoT.bzh"
+# Author "Romain Forlot" <romain.forlot@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.
+
+BUILD_DIR   := build
+PACKAGING_DIR := packaging/wgt
+
+VPATH = etc:$(PACKAGING_DIR):$(PACKAGING_DIR)/etc:$(BUILD_DIR)
+
+.PHONY: all clean mrproper package
+
+all: build
+
+clean:
+	@([ -d ${BUILD_DIR} ] && make -C ${BUILD_DIR} clean) || echo Nothing to clean
+
+mrproper:
+	rm -rf ${BUILD_DIR}
+
+build:  ${BUILD_DIR}/Makefile
+	cmake --build ${BUILD_DIR} --target all
+
+package: config.xml.in icon.png.in build | $(PKG_FILELIST)
+	mkdir -p ${BUILD_DIR}/$@/{bin,etc,lib,htdocs,data}
+	cmake --build ${BUILD_DIR} --target widget
+
+${BUILD_DIR}/Makefile:
+	@[ -d ${BUILD_DIR} ] || mkdir -p ${BUILD_DIR}
+	@[ -f ${BUILD_DIR}/Makefile ] || (cd ${BUILD_DIR} && cmake ${CMAKE_OPTS} ..)
+\ No newline at end of file
diff --git a/templates/html5/CMakeLists.txt b/templates/html5/CMakeLists.txt
new file mode 100644
index 0000000..26b9226
--- /dev/null
+++ b/templates/html5/CMakeLists.txt
@@ -0,0 +1,26 @@
+###########################################################################
+# Copyright 2015, 2016, 2017 IoT.bzh
+#
+# author: Romain Forlot <romain.forlot@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.
+###########################################################################
+
+CMAKE_MINIMUM_REQUIRED(VERSION 3.3)
+
+include(${CMAKE_CURRENT_SOURCE_DIR}/etc/config.cmake)
+include(${CMAKE_CURRENT_SOURCE_DIR}/etc/macros.cmake)
+
+search_targets()
+
+build_widget()
diff --git a/templates/html5/LICENSE b/templates/html5/LICENSE
new file mode 100644
index 0000000..89f9ced
--- /dev/null
+++ b/templates/html5/LICENSE
@@ -0,0 +1,17 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
diff --git a/templates/html5/README.md b/templates/html5/README.md
new file mode 100644
index 0000000..cab879e
--- /dev/null
+++ b/templates/html5/README.md
@@ -0,0 +1,112 @@
+# Template HTML5 Application for Application Framework Binder
+
+## Setup
+
+Install HTML5 development toolchain on your host
+
+```
+$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
+$ sudo apt-get install nodejs
+$ sudo npm install --global gulp
+
+```
+
+Then install NodeJS dependencies 
+
+```
+$ cd html5     # or the project directory
+$ npm install
+```
+
+## Overload ./app/etc/AppDefaults.js with '.noderc.js'
+
+```
+    var config= {
+        APPNAME : 'xxxxxx-html5',   // AppName is use as main Angular Module name
+        FRONTEND: "Frontend",    // HTML5 frontend  [no leading ./]
+        BACKEND : "Backend",     // NodeJS Rest API [no leading ./]
+        URLBASE : '/opa/',       // HTML basedir when running in production [should end with a /]
+        APIBASE : '/api/',       // Api url base dir [should end with a /]
+    };
+    module.exports = config;
+```
+
+WARNING: in current development version Frontend/services/AppConfig.js is not updated automatically
+you should manually assert that backend config is in sync with frontend config.
+
+## Development build and deployment (development phase)
+
+```
+$ gulp help
+$ gulp build-app-dev
+$ BOARDIP=1.2.3.4    # change by your board IP address
+$ rsync -Pav dist.dev/ root@$BOARDIP:xxxxxx-html5-dev/
+```
+
+## Test Application
+
+Start AppFramework Binder:
+
+```
+$ ssh root@$BOARDIP
+# afb-daemon --port=1234 --verbose --token=123456789 --rootdir=~/xxxxxx-html5-dev
+```
+
+Point your browser onto: http://$BOARDIP:1234/opa?token=123456789
+
+Note: 
+	- do not forget '/opa' that should match with your config.URLBASE
+	- if you change --token=xxxx do not forget to update ./Frontend/pages/HomeModules.js
+	- Force HTML/OPA reload with F5 after each HTML5/OPA update or new pages may not be loaded. 
+	- When reloading HTML/OPA with F5 do not forget that your initial token wont be accepted anymore. You should either:
+		+ restart to clean existing session
+		+ cleanup AJB_session cookie
+		+ start an anonymous web page to get a fresh and clean environment.
+
+## Create application package and install on target
+
+Simply run:
+
+```
+$ gulp widget-prod
+```
+
+This should produce a .wgt file in the current directory. You can then install the widget file onto the target and run the application using application framework utilities:
+
+```
+$ scp *.wgt root@$BOARDIP:~/
+$ ssh root@$BOARDIP
+# afm-util install xxxxxx-html5.wgt
+# afm-util start xxxxxx-html5@0.1
+```
+
+## Directory structure
+    /AppClient
+    |
+    |---- package.json
+    |---- bower.json
+    |---- gulpfile.js
+    |
+    |---- /Frontend
+    |     |
+    |     |---- index.html
+    |     |---- app.js
+    |     |
+    |     |---- /styles
+    |     |     |
+    |     |     |---- _settings.scss
+    |     |     |---- app.scss
+    |     |
+    |     |---- /Widgets
+    |     |     |
+    |     |     |--- Widget-1
+    |     |     |...
+    |     |
+    |     |-----/Pages
+    |           |--- Home-Page
+    |           |... 
+    |
+    |
+    |---- (/dist.dev)
+    |---- (/dist.prod)
+
diff --git a/templates/html5/app/CMakeLists.txt b/templates/html5/app/CMakeLists.txt
new file mode 100644
index 0000000..ec66f01
--- /dev/null
+++ b/templates/html5/app/CMakeLists.txt
@@ -0,0 +1,38 @@
+###########################################################################
+# Copyright 2015, 2016, 2017 IoT.bzh
+#
+# author: Romain Forlot <romain.forlot@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.
+###########################################################################
+
+# Add target to project dependency list
+PROJECT_TARGET_ADD(html5-example)
+
+	# Define project Targets
+	add_custom_command(OUTPUT dist.prod
+	DEPENDS ${TARGET_NAME}
+	WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
+	COMMAND npm install
+	COMMAND gulp widget-config-prod
+	COMMAND cp -r dist.prod ${CMAKE_CURRENT_BINARY_DIR})
+
+	add_custom_target(${TARGET_NAME} ALL DEPENDS dist.prod)
+
+	# Binder exposes a unique public entry point
+	SET_TARGET_PROPERTIES(${TARGET_NAME} PROPERTIES
+		PREFIX ""
+		LABELS "HTDOCS"
+		OUTPUT_NAME dist.prod)
+
+populate_widget()
diff --git a/templates/html5/app/Frontend/app.js b/templates/html5/app/Frontend/app.js
new file mode 100644
index 0000000..976959b
--- /dev/null
+++ b/templates/html5/app/Frontend/app.js
@@ -0,0 +1,55 @@
+(function() {
+  'use strict';
+  
+  function  ParseQueryString () {
+      var qd = {};
+      location.search.substr(1).split("&").forEach(function(item) {
+          var k = item.split("=")[0];
+          var v = decodeURIComponent(item.split("=")[1]); 
+          if (k in qd) qd[k].push(v); else qd[k] = [v];
+      });
+      return qd;
+  }
+
+  angular.module('@@APPNAME@@', [ // Warning: Appname should fit with gulpfile.js & index.html
+    'ui.router',
+    'ngAnimate',
+
+    //foundation
+    'foundation',
+    'foundation.dynamicRouting',
+    'foundation.dynamicRouting.animations',
+    
+    // external components
+    'ui-notification',
+    
+    // Application Components
+    'AppConfig',
+    'JQueryEmu',
+    'SampleHomeModule',
+    'LinkButton',
+    'TokenRefresh',
+    'RangeSlider',
+    'ModalNotification'
+  ])
+    .value ('urlquery', ParseQueryString())
+    .config(config)
+    .run(run)
+  ;
+
+  config.$inject = ['$urlRouterProvider', '$locationProvider'];
+  
+  function config($urlProvider, $locationProvider, AppConfig) {
+    $urlProvider.otherwise('/sample-home');
+
+    // https://docs.angularjs.org/error/$location/nobase
+    $locationProvider.html5Mode(true).hashPrefix('!');
+    
+  }
+
+  function run() {
+    FastClick.attach(document.body);
+  }
+
+console.log ("opa=@@APPNAME@@ Loaded");
+})();
diff --git a/templates/html5/app/Frontend/etc/AppConfig.js b/templates/html5/app/Frontend/etc/AppConfig.js
new file mode 100644
index 0000000..382c0a3
--- /dev/null
+++ b/templates/html5/app/Frontend/etc/AppConfig.js
@@ -0,0 +1,65 @@
+(function () {
+    'use strict';
+
+    // _all modules only reference dependencies
+    angular.module('AppConfig', [])
+
+            // Factory is a singleton and share its context within all instances.
+            .factory('AppConfig', function (urlquery) {
+
+                var myConfig = {
+                    paths: { // Warning paths should end with /
+                        image : 'images/',
+                        avatar: 'images/avatars/'
+                    },
+                                        
+                    session: { // Those data are updated by session service
+                       initial : urlquery.token || '123456789',  // typical dev initial token
+                       timeout : 3600,         // timeout is updated client sessin context creation
+                       pingrate: 30,           // Ping rate to check if server is still alive
+                       uuid    : '',           // uuid map with cookie or long term session access key
+                       token   : ''            // will be returned from authentication    
+                    }
+                };
+
+                return myConfig;
+            })
+            
+            // Factory is a singleton and share its context within all instances.
+            .factory('AppCall', function ($http, AppConfig, $log) {
+                
+                var myCalls = {
+                    get : function(plugin, action, query, cbresponse, cberror) {                                                
+                        
+                        var onerror = function(response) {
+                            if (cberror) cberror(response.data, response.status, response.config);
+                            else cbresponse(response.data, response.status, response.config);
+                        };
+                        
+                        var onsuccess =function(response) {
+                            if (!response.data || !response.data.request) {
+                                onerror (response);
+                                return;
+                            }                            
+                        
+                            var request=response.data.request;
+                            
+                            // if token was updated keep it within application cache
+                            if (request.token) AppConfig.session.token = request.token;
+                            if (request.uuid)  AppConfig.session.uuid  = request.uuid;
+                            if (request.timeout) AppConfig.session.timeout = request.timeout;
+                        
+                            cbresponse(response.data, response.status, response.config);
+                        };
+                        
+                        
+                        if (!query.token) query.token = AppConfig.session.token; // add token to provided query
+                        if (!query.reqid) query.reqid = action; // use action as default requestID
+                        var handle= $http.get('/api/' + plugin + '/' + action , {params: query}).then(onsuccess, onerror);
+                        
+                    }
+                };
+                return myCalls;
+            });
+
+})();
+\ No newline at end of file
diff --git a/templates/html5/app/Frontend/etc/routes.js b/templates/html5/app/Frontend/etc/routes.js
new file mode 100644
index 0000000..0df3030
--- /dev/null
+++ b/templates/html5/app/Frontend/etc/routes.js
@@ -0,0 +1 @@
+var foundationRoutes = [{"name":"SampleHome","url":"/sample-home","controller":"SampleHomeController as ctrl","animationIn":"slideInRight","path":"pages/SampleHome/SampleHome.html"}]; 
diff --git a/templates/html5/app/Frontend/favicon.ico b/templates/html5/app/Frontend/favicon.ico
new file mode 100644
index 0000000..eeb7ab7
--- /dev/null
+++ b/templates/html5/app/Frontend/favicon.ico
diff --git a/templates/html5/app/Frontend/images/avatars/istoobig.jpg b/templates/html5/app/Frontend/images/avatars/istoobig.jpg
new file mode 100644
index 0000000..da0f255
--- /dev/null
+++ b/templates/html5/app/Frontend/images/avatars/istoobig.jpg
diff --git a/templates/html5/app/Frontend/images/avatars/istoobig.png b/templates/html5/app/Frontend/images/avatars/istoobig.png
new file mode 100644
index 0000000..5614073
--- /dev/null
+++ b/templates/html5/app/Frontend/images/avatars/istoobig.png
diff --git a/templates/html5/app/Frontend/images/avatars/tux-admin.png b/templates/html5/app/Frontend/images/avatars/tux-admin.png
new file mode 100644
index 0000000..ee40d2a
--- /dev/null
+++ b/templates/html5/app/Frontend/images/avatars/tux-admin.png
diff --git a/templates/html5/app/Frontend/images/avatars/tux-bzh.png b/templates/html5/app/Frontend/images/avatars/tux-bzh.png
new file mode 100644
index 0000000..16e001b
--- /dev/null
+++ b/templates/html5/app/Frontend/images/avatars/tux-bzh.png
diff --git a/templates/html5/app/Frontend/images/avatars/tux-visitor.png b/templates/html5/app/Frontend/images/avatars/tux-visitor.png
new file mode 100644
index 0000000..bd491b0
--- /dev/null
+++ b/templates/html5/app/Frontend/images/avatars/tux-visitor.png
diff --git a/templates/html5/app/Frontend/images/logo/logo_iot_bzh.svg b/templates/html5/app/Frontend/images/logo/logo_iot_bzh.svg
new file mode 100644
index 0000000..6e60c95
--- /dev/null
+++ b/templates/html5/app/Frontend/images/logo/logo_iot_bzh.svg
@@ -0,0 +1,139 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   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"
+   width="597.39423"
+   height="162.54224"
+   id="svg4035"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="New document 5">
+  <defs
+     id="defs4037">
+    <filter
+       color-interpolation-filters="sRGB"
+       id="filter4000"
+       inkscape:label="Drop Shadow">
+      <feFlood
+         id="feFlood4002"
+         flood-opacity="0.475"
+         flood-color="rgb(0,0,0)"
+         result="flood" />
+      <feComposite
+         id="feComposite4004"
+         in2="SourceGraphic"
+         in="flood"
+         operator="in"
+         result="composite1" />
+      <feGaussianBlur
+         id="feGaussianBlur4006"
+         stdDeviation="5"
+         result="blur" />
+      <feOffset
+         id="feOffset4008"
+         dx="8"
+         dy="8"
+         result="offset" />
+      <feComposite
+         id="feComposite4010"
+         in2="offset"
+         in="SourceGraphic"
+         operator="over"
+         result="composite2" />
+    </filter>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="339.36637"
+     inkscape:cy="3.4393101"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1108"
+     inkscape:window-height="862"
+     inkscape:window-x="321"
+     inkscape:window-y="159"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata4040">
+    <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>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-49.874326,-433.94821)">
+    <g
+       id="g3091"
+       transform="translate(62.857151,24.927697)"
+       inkscape:export-filename="/home/sdx/Pictures/Logo/logo_iot_bzh_100dpi.png"
+       inkscape:export-xdpi="100.22011"
+       inkscape:export-ydpi="100.22011"
+       style="display:inline;filter:url(#filter4000)">
+      <text
+         sodipodi:linespacing="125%"
+         id="text3557-5-3-7-0-7-3"
+         y="519.50671"
+         x="27.886671"
+         style="font-size:97.09867096px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;display:inline;font-family:Sans"
+         xml:space="preserve"><tspan
+           style="font-size:97.09867096px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:FreeEuro;-inkscape-font-specification:FreeEuro Bold"
+           y="519.50671"
+           x="27.886671"
+           id="tspan3559-5-4-1-5-0-6"
+           sodipodi:role="line">IOT</tspan></text>
+      <path
+         inkscape:connector-curvature="0"
+         d="m 296.73007,473.23356 c 28.21686,16.29102 28.75566,58.73779 0.99693,78.53831 -7.67688,5.47598 -8.77935,4.91028 -1.99529,-1.0238 17.47377,-15.28453 17.98492,-42.17775 1.08522,-57.09786 l -3.91266,-3.45435 0.72312,-3.71053 c 0.39771,-2.04076 0.5997,-5.73115 0.44885,-8.20083 -0.33876,-5.54623 0.15803,-6.49185 2.65383,-5.05094 z m -64.76568,11.40332 c 7.06047,-7.74198 18.64659,-14.16089 29.04027,-16.08874 l 6.87489,-1.27521 0.87404,2.89709 c 0.4807,1.59343 0.67439,5.2245 0.43037,8.06906 l -0.44364,5.17195 -6.13887,1.6918 c -10.91241,3.00731 -20.4022,10.85909 -25.4533,21.05979 l -2.41633,4.87984 -2.74281,-0.41238 c -5.14252,-0.77316 -12.72985,-3.97645 -12.79123,-5.40033 -0.092,-2.13451 8.34659,-15.74625 12.76661,-20.59287 z m 33.20546,36.39493 c -28.21687,16.29101 -65.24624,-4.46574 -68.51461,-38.40577 -0.9039,-9.38637 0.13723,-10.0583 1.88428,-1.21608 4.49989,22.77499 27.53453,36.66428 48.90556,29.48876 l 4.94788,-1.66128 2.85184,2.48149 c 1.56852,1.36481 4.66349,3.38493 6.87772,4.48914 4.97257,2.47973 5.54308,3.38282 3.04733,4.82374 z m 22.50729,-61.79039 c 3.17451,9.98553 2.94038,23.22889 -0.58688,33.19399 l -2.33309,6.59143 -2.94597,-0.69161 c -1.6203,-0.38041 -4.86173,-2.02821 -7.2032,-3.6618 l -4.25721,-2.97018 1.60429,-6.16234 c 2.85178,-10.95404 0.79685,-23.09833 -5.51167,-32.57307 l -3.01788,-4.53253 1.72854,-2.16916 c 3.24083,-4.06698 9.80863,-9.03614 11.07242,-8.37738 1.89457,0.98756 9.46336,15.1015 11.45065,21.35265 z m -48.80223,10.31437 c 0,-32.58201 36.49058,-54.27201 67.51771,-40.1325 8.58077,3.9104 8.6421,5.148 0.11108,2.23988 -21.97368,-7.49048 -45.51946,5.51348 -49.99082,27.6091 l -1.03521,5.11561 -3.57498,1.22902 c -1.96621,0.67596 -5.26316,2.34622 -7.32655,3.71171 -4.63379,3.06649 -5.70115,3.10904 -5.70115,0.22718 z m 42.25842,50.3871 c -10.23499,-2.24356 -21.58699,-9.06801 -28.45341,-17.10525 l -4.5418,-5.31622 2.07194,-2.20549 c 1.13957,-1.21302 4.18733,-3.19628 6.77282,-4.40726 l 4.70085,-2.20176 4.53458,4.47053 c 8.06061,7.94674 19.60535,12.23927 30.96496,11.51329 l 5.43422,-0.34731 1.01427,2.58154 c 1.90169,4.84014 2.92124,13.01261 1.71883,13.77769 -1.80254,1.14695 -17.80995,0.64475 -24.21726,-0.75976 z"
+         style="fill:#5a2ca0;display:inline"
+         id="path3415-4-2-2-5-0-3-7-4-4-1-5" />
+      <text
+         sodipodi:linespacing="125%"
+         id="text3557-5-3-7-46-7-3-7"
+         y="519.50671"
+         x="317.95816"
+         style="font-size:97.09867096px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;display:inline;font-family:Sans"
+         xml:space="preserve"><tspan
+           style="font-size:97.09867096px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:FreeEuro;-inkscape-font-specification:FreeEuro Bold"
+           y="519.50671"
+           x="317.95816"
+           id="tspan3559-5-4-1-90-0-2-9"
+           sodipodi:role="line">BZH</tspan></text>
+    </g>
+    <rect
+       style="fill:none;stroke:none;display:inline"
+       id="rect3098"
+       width="577.14288"
+       height="162.54224"
+       x="59.999989"
+       y="433.94821"
+       inkscape:export-filename="/home/sdx/Pictures/Logo/logo_iot_bzh_100dpi.png"
+       inkscape:export-xdpi="100.22011"
+       inkscape:export-ydpi="100.22011" />
+  </g>
+</svg>
diff --git a/templates/html5/app/Frontend/images/logo/logo_iot_bzhx350.png b/templates/html5/app/Frontend/images/logo/logo_iot_bzhx350.png
new file mode 100644
index 0000000..2c3b2ae
--- /dev/null
+++ b/templates/html5/app/Frontend/images/logo/logo_iot_bzhx350.png
diff --git a/templates/html5/app/Frontend/images/logo/tampon-iot-bzhx450.png b/templates/html5/app/Frontend/images/logo/tampon-iot-bzhx450.png
new file mode 100644
index 0000000..f365e19
--- /dev/null
+++ b/templates/html5/app/Frontend/images/logo/tampon-iot-bzhx450.png
diff --git a/templates/html5/app/Frontend/images/logo/triskel_iot_bzh.png b/templates/html5/app/Frontend/images/logo/triskel_iot_bzh.png
new file mode 100644
index 0000000..832dc1f
--- /dev/null
+++ b/templates/html5/app/Frontend/images/logo/triskel_iot_bzh.png
diff --git a/templates/html5/app/Frontend/images/logo/triskel_iot_bzh.svg b/templates/html5/app/Frontend/images/logo/triskel_iot_bzh.svg
new file mode 100644
index 0000000..096f424
--- /dev/null
+++ b/templates/html5/app/Frontend/images/logo/triskel_iot_bzh.svg
@@ -0,0 +1,110 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   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"
+   width="205.71426"
+   height="197.14285"
+   id="svg4199"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="triskel_iot_bzh.svg">
+  <defs
+     id="defs4201">
+    <filter
+       color-interpolation-filters="sRGB"
+       id="filter4111"
+       inkscape:label="Drop Shadow">
+      <feFlood
+         id="feFlood4113"
+         flood-opacity="0.475"
+         flood-color="rgb(0,0,0)"
+         result="flood" />
+      <feComposite
+         id="feComposite4115"
+         in2="SourceGraphic"
+         in="flood"
+         operator="in"
+         result="composite1" />
+      <feGaussianBlur
+         id="feGaussianBlur4117"
+         stdDeviation="5"
+         result="blur" />
+      <feOffset
+         id="feOffset4119"
+         dx="8"
+         dy="8"
+         result="offset" />
+      <feComposite
+         id="feComposite4121"
+         in2="offset"
+         in="SourceGraphic"
+         operator="over"
+         result="composite2" />
+    </filter>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35"
+     inkscape:cx="46.428557"
+     inkscape:cy="178.57144"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="500"
+     inkscape:window-height="435"
+     inkscape:window-x="1087"
+     inkscape:window-y="400"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata4204">
+    <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>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-328.57144,-513.79077)">
+    <path
+       id="path3415-4-2-2-5-0-3-7-4-4-1-9"
+       style="fill:#5a2ca0;display:inline;filter:url(#filter4111)"
+       d="m 470.88567,595.30412 c 28.21686,16.29102 28.75566,58.73778 0.99693,78.5383 -7.67688,5.47598 -8.77935,4.91028 -1.99529,-1.0238 17.47377,-15.28453 17.98492,-42.17774 1.08522,-57.09785 l -3.91266,-3.45435 0.72312,-3.71053 c 0.39771,-2.04076 0.5997,-5.73115 0.44885,-8.20083 -0.33876,-5.54623 0.15803,-6.49185 2.65383,-5.05094 z m -64.76568,11.40332 c 7.06047,-7.74198 18.64659,-14.16089 29.04027,-16.08874 l 6.87489,-1.27521 0.87404,2.89709 c 0.4807,1.59343 0.67439,5.2245 0.43037,8.06906 l -0.44364,5.17195 -6.13887,1.6918 c -10.91241,3.00731 -20.4022,10.85909 -25.4533,21.05979 l -2.41633,4.87984 -2.74281,-0.41238 c -5.14252,-0.77316 -12.72985,-3.97645 -12.79123,-5.40033 -0.092,-2.13451 8.34659,-15.74625 12.76661,-20.59287 z m 33.20546,36.39493 c -28.21687,16.291 -65.24624,-4.46574 -68.51461,-38.40577 -0.9039,-9.38637 0.13723,-10.0583 1.88428,-1.21608 4.49989,22.77499 27.53453,36.66428 48.90556,29.48876 l 4.94788,-1.66128 2.85184,2.48149 c 1.56852,1.36481 4.66349,3.38493 6.87772,4.48914 4.97257,2.47973 5.54308,3.38282 3.04733,4.82374 z m 22.50729,-61.7904 c 3.17451,9.98554 2.94038,23.2289 -0.58688,33.194 l -2.33309,6.59143 -2.94597,-0.69161 c -1.6203,-0.38041 -4.86173,-2.02821 -7.2032,-3.6618 l -4.25721,-2.97018 1.60429,-6.16234 c 2.85178,-10.95404 0.79685,-23.09834 -5.51167,-32.57308 l -3.01788,-4.53253 1.72854,-2.16916 c 3.24083,-4.06698 9.80863,-9.03614 11.07242,-8.37738 1.89457,0.98756 9.46336,15.1015 11.45065,21.35265 z m -48.80223,10.31438 c 0,-32.58202 36.49058,-54.27202 67.51771,-40.13251 8.58077,3.9104 8.6421,5.148 0.11108,2.23988 -21.97368,-7.49048 -45.51946,5.51348 -49.99082,27.6091 l -1.03521,5.11562 -3.57498,1.22902 c -1.96621,0.67596 -5.26316,2.34622 -7.32655,3.71171 -4.63379,3.06649 -5.70115,3.10904 -5.70115,0.22718 z m 42.25842,50.3871 c -10.23499,-2.24356 -21.58699,-9.06801 -28.45341,-17.10525 l -4.5418,-5.31622 2.07194,-2.20549 c 1.13957,-1.21302 4.18733,-3.19628 6.77282,-4.40726 l 4.70085,-2.20176 4.53458,4.47053 c 8.06061,7.94674 19.60535,12.23927 30.96496,11.51329 l 5.43422,-0.34731 1.01427,2.58154 c 1.90169,4.84014 2.92124,13.01261 1.71883,13.77769 -1.80254,1.14695 -17.80995,0.64475 -24.21726,-0.75976 z"
+       inkscape:connector-curvature="0"
+       inkscape:export-filename="/home/sdx/Pictures/Logo/triskel_iot_bzh_300dpi.png"
+       inkscape:export-xdpi="300"
+       inkscape:export-ydpi="300" />
+    <rect
+       style="fill:none;stroke:none;display:inline"
+       id="rect4179"
+       width="205.71426"
+       height="197.14285"
+       x="328.57144"
+       y="513.79077"
+       inkscape:export-filename="/home/sdx/Pictures/Logo/triskel_iot_bzh_300dpi.png"
+       inkscape:export-xdpi="300"
+       inkscape:export-ydpi="300" />
+  </g>
+</svg>
diff --git a/templates/html5/app/Frontend/images/logo/triskel_iot_bzhx250.png b/templates/html5/app/Frontend/images/logo/triskel_iot_bzhx250.png
new file mode 100644
index 0000000..f4e41ae
--- /dev/null
+++ b/templates/html5/app/Frontend/images/logo/triskel_iot_bzhx250.png
diff --git a/templates/html5/app/Frontend/index.html b/templates/html5/app/Frontend/index.html
new file mode 100644
index 0000000..0d55267
--- /dev/null
+++ b/templates/html5/app/Frontend/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html lang="en" ng-app="@@APPNAME@@" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html lang="en" ng-app="@@APPNAME@@" class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html lang="en" ng-app="@@APPNAME@@" class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html lang="en" ng-app="@@APPNAME@@" class="no-js"> <!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Simple Sample Application</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- bower:css -->
+    <!-- endinject -->
+     <!--vendor:css -->
+    <!-- endinject -->
+    <!-- appli:css -->
+    <!-- endinject -->
+    <!-- inject:css -->
+    <!-- endinject -->
+    <base href="@@URLBASE@@"> <!-- https://docs.angularjs.org/error/$location/nobase -->
+
+</head>
+<body>
+<!--[if lt IE 7]>
+<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+<![endif]-->
+<div ui-view></div>
+<!-- bower:js -->
+<!-- endinject -->
+<!-- inject:js -->
+<!-- endinject -->
+
+<!-- Generic Foundation Modal Template -->
+<script id="components/modal/modal.html" type="text/ng-template">
+   <div  class="modal-overlay" ng-click="hideOverlay()">
+    <aside class="modal" ng-click="$event.stopPropagation();" ng-transclude></aside>
+  </div>
+</script>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/templates/html5/app/Frontend/pages/SampleHome/SampleHome.html b/templates/html5/app/Frontend/pages/SampleHome/SampleHome.html
new file mode 100644
index 0000000..9c13ea9
--- /dev/null
+++ b/templates/html5/app/Frontend/pages/SampleHome/SampleHome.html
@@ -0,0 +1,34 @@
+<!-- Foundation Annotations generate tmp/route.js -->
+---
+name: SampleHome
+url:  /sample-home
+controller:   SampleHomeController as ctrl
+animationIn: slideInRight
+---
+
+<h3> 
+<img class="logo" src="images/logo/triskel_iot_bzhx250.png" alt="IoT.bzh Logo" style="height:150px;">
+  App Framework - HTML5 Client
+</h3>
+
+<token-refresh autolog="true" callback="ctrl.Initialised"></token-refresh>
+
+
+<div class="button-box box-content ">
+      
+    <submit-button class="session-button {{ctrl.class.connect}}" icon="fi-unlock" label="Connect" clicked="ctrl.ConnectClient" ></submit-button>
+    <submit-button class="session-button {{ctrl.class.check}}" icon="fi-checkbox" label="Check" clicked="ctrl.CheckSession" ></submit-button>
+    <submit-button class="session-button {{ctrl.class.refresh}}"  icon="fi-arrows-compress" label="Refresh"   clicked="ctrl.RefreshSession" ></submit-button>
+    <submit-button class="session-button {{ctrl.class.logout}}" icon="fi-lock" label="Logout" clicked="ctrl.LogoutClient" ></submit-button>
+    
+</div>
+<div class="message-box box-content vertical grid-frame">
+    <div class="response">
+        <span class="grid-content noscroll req {{ctrl.status}} ">req= {{ctrl.request}}</span>
+        <span class="grid-content noscroll res {{ctrl.status}} ">res= {{ctrl.response}}</span>
+        <span class="grid-content noscroll status {{ctrl.status}}">status= {{ctrl.errcode}}</span>
+    </div>
+</div>
+
+
+
diff --git a/templates/html5/app/Frontend/pages/SampleHome/SampleHome.js b/templates/html5/app/Frontend/pages/SampleHome/SampleHome.js
new file mode 100644
index 0000000..1e404b8
--- /dev/null
+++ b/templates/html5/app/Frontend/pages/SampleHome/SampleHome.js
@@ -0,0 +1,104 @@
+(function() {
+'use strict';
+
+// WARNING: make sure than app/frontend/services/AppConfig.js match your server
+
+// list all rependencies within the page + controler if needed
+angular.module('SampleHomeModule', ['SubmitButton', 'TokenRefresh','ModalNotification'])
+
+  .controller('SampleHomeController', function (AppCall, Notification) {
+        var scope = this; // I hate JavaScript
+        scope.uuid   ="none";
+        scope.token  ="none";
+        scope.session="none";
+        scope.status ="err-no";
+
+        console.log ("Home Controller");
+        
+        scope.OnResponse= function(jresp, errcode) {
+            
+            // Update UI response global display zone
+            scope.status   = jresp.request.status;
+            scope.errcode  = errcode;
+            scope.request  = jresp.request;
+            scope.response = jresp.response;
+            
+            var action=jresp.request.reqid.toUpperCase();
+                        
+            switch (action) {
+                case 'CONNECT':
+                    if (jresp.request.status !== "success") {
+                        Notification.error ({message: action + ": Logout before reconnecting", delay: 5000});
+                        scope.class [jresp.request.reqid]="fail";   
+                        return;
+                    }                    
+                    scope.class={}; // reset CSS buttons classes
+                    break;
+                    
+                case 'LOGOUT':
+                    if (jresp.request.status !== "success") {
+                        Notification.error ({message: action + ": Do connect first", delay: 5000});
+                        scope.class [jresp.request.reqid]="fail";   
+                        return;
+                    }
+                    scope.class={}; // reset CSS buttons classes
+                    break;
+                    
+                case 'REFRESH':
+                case 'CHECK':
+                    if (jresp.request.status !== "success") {
+                        Notification.error ({message: action + ": Need to be Connected to check/refresh session", delay: 5000});
+                        scope.class [jresp.request.reqid]="fail";   
+                        return;
+                    }
+                    
+                    break;
+                    
+                default:
+                    Notification.error ({message: "Invalid RequestID:" + jresp.request.reqid , delay: 5000});
+                    return;
+            } 
+
+            // update button classes within home.html
+            scope.class [jresp.request.reqid]="success";            
+            console.log ("OK: "+ JSON.stringify(jresp));
+        };
+        
+        scope.ProcessError= function(response, errcode, config) {
+            Notification.error ({message: "Invalid API:" + response.request.reqid , delay: 5000});
+            scope.status   = "err-fx";
+            scope.errcode  = errcode;
+            scope.request  = response.request;
+            scope.response = "";            
+            console.log ("FX: "+ JSON.stringify(response));
+        };
+
+        scope.ConnectClient = function() {
+            console.log ("ConnectClient");
+            AppCall.get ("auth", "connect", {/*query*/}, scope.OnResponse, scope.InvalidApiCall);
+        };        
+
+        scope.CheckSession = function() {
+            console.log ("CheckSession");
+            AppCall.get ("auth", "check", {/*query*/}, scope.OnResponse, scope.InvalidApiCall);
+           
+        };
+        
+        scope.RefreshSession = function() {
+            console.log ("RefreshSession");
+            AppCall.get ("auth", "refresh", {/*query*/}, scope.OnResponse, scope.InvalidApiCall);
+        };
+        
+        scope.LogoutClient = function() {
+            console.log ("LogoutClient");
+            AppCall.get ("auth", "logout", {/*query*/}, scope.OnResponse, scope.InvalidApiCall);
+        };
+        
+        scope.Initialised = function () {
+            scope.class = {connect: "success"};
+        };
+        
+   });
+
+console.log ("SampleControler Loaded");
+})(); 
diff --git a/templates/html5/app/Frontend/pages/SampleHome/SampleHome.scss b/templates/html5/app/Frontend/pages/SampleHome/SampleHome.scss
new file mode 100644
index 0000000..8bf04a1
--- /dev/null
+++ b/templates/html5/app/Frontend/pages/SampleHome/SampleHome.scss
@@ -0,0 +1,71 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+@import "app/ibz-mixins";
+
+$COLOR_SUCCESS: green;
+$COLOR_FAIL: red;
+
+token-refresh {
+    display: block;
+    float: right;
+    margin: .5rem 1rem 0 0;
+}
+
+.button-box {
+    height  : 4.5rem;
+    
+    .session-button {
+      float: left;
+      width: 5rem;
+    };
+    
+    .response > span{
+        display: block;
+        margin: .3rem .5rem .3rem .5rem;        
+    }  
+    
+    .fail { 
+        color:$COLOR_FAIL;
+        border: 1px solid darken($COLOR_FAIL,10%);
+    }
+    .success { 
+        color:$COLOR_SUCCESS; 
+        border: 1px solid darken($COLOR_SUCCESS,10%);
+    }
+
+};
+
+.message-box {
+    height  : auto;
+    width: 100%;
+    font-size: .75rem;
+  
+    .response {
+        .err-no { color:grey; }
+        .res.err-ok { color: blue; }
+        .req.err-ok { color:blueviolet; }
+        .status.err-ok { color:green; }
+        .status.err-fx { color:red; }       
+    } 
+    
+
+};
+
+
+
diff --git a/templates/html5/app/Frontend/services/JQueryEmu.js b/templates/html5/app/Frontend/services/JQueryEmu.js
new file mode 100644
index 0000000..6d6e338
--- /dev/null
+++ b/templates/html5/app/Frontend/services/JQueryEmu.js
@@ -0,0 +1,79 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * Usage:
+ * 
+ *   // mouse event probably point on icon and not on button div
+ *   ... ng-click="LockChannel($event)
+     var target= angular.element(event.currentTarget);
+     var button= JQemu.FindInParent (target, 'div');
+ * 
+ */
+
+
+(function () {
+    'use strict';
+
+
+          
+    // _all modules only reference dependencies
+    angular.module('JQueryEmu', [])
+
+            // Factory is a singleton and share its context within all instances.
+            .factory('JQemu', function () {
+
+                var FindInParent = function (element, selector) {
+                    var parent = element;
+                    var search = selector.toUpperCase();
+                    while (parent[0]) {
+                        if (search === parent[0].tagName) {
+                            return parent;
+                        }  // HTMLDivElement properties
+                        parent = parent.parent();
+                    }
+                };
+                
+                var  FindByTag= function (element, tag, selector) {
+                    var search = selector.toLowerCase();
+                    var type   = tag.toLowerCase()+ "Name";
+                    var children = element.children();
+                    while (children[0]) {
+                        if (search === children[0][type]) {
+                            return children;
+                        }  // HTMLDivElement properties
+                        children = children.next();
+                    }
+                };
+                
+                var  FindByClass= function (element, selector) {
+                    var search = selector.toLowerCase();
+                    var children = element.children();
+                    while (children[0]) {
+                        if (children.hasClass(search)) {
+                            return children;
+                        }  // HTMLDivElement properties
+                        children = children.next();
+                    }
+                };
+
+                var myMethods = {
+                    FindInParent: FindInParent,
+                    FindByTag: FindByTag,
+                    FindByClass: FindByClass
+                };
+
+                return myMethods;
+            });
+
+})();
+\ No newline at end of file
diff --git a/templates/html5/app/Frontend/styles/README.md b/templates/html5/app/Frontend/styles/README.md
new file mode 100644
index 0000000..dc50ced
--- /dev/null
+++ b/templates/html5/app/Frontend/styles/README.md
@@ -0,0 +1,28 @@
+WARNING note about global style dir
+-------------------------------------
+
+ - styles placed in Frontend/styles is global and will be posted in dist.prod/styles
+ - styles defined within widget or page directory will be place in dist.prof/opa/styles
+
+This model allows to share global styles by multiple applications.
+
+To change this behaviour just rename styles directory on something else [eg: appstyles]
+
+
+    |---- /Frontend
+    |     |
+    |     |---- /styles
+    |     |     |
+    |     |     |---- _settings.scss
+    |     |     |---- app.scss
+    |     |
+    |     |---- /Widgets
+    |     |     |
+    |     |     |--- widget.js
+    |     |     |--- widget.sccs
+    |     |
+    |     |-----/Pages
+    |           |--- page-partial.html
+    |           |--- page-cntrl.js
+    |           |--- page-style.scss 
+    |
diff --git a/templates/html5/app/Frontend/styles/app/_ibz-mixins.scss b/templates/html5/app/Frontend/styles/app/_ibz-mixins.scss
new file mode 100644
index 0000000..b2fb2ec
--- /dev/null
+++ b/templates/html5/app/Frontend/styles/app/_ibz-mixins.scss
@@ -0,0 +1,52 @@
+/*
+    Every SCSS files will be injected into main HTML page
+*/
+shadow-transition {
+    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
+    border-radius: 5px;
+}
+
+@mixin ibz-box-content {
+    border: 2px solid gainsboro !important;
+    border-radius: 5px;
+    
+    margin-left: auto;
+    margin-right: auto;
+    min-width: 98% !important; 
+    margin: .5rem .5rem .5rem .5rem;
+    background: rgba(200,205,200,.3);
+}
+
+@mixin ibz-button ($color, $size:2rem) {
+    display: inline-block;
+    border: 1px solid darken($color,10%);
+    box-shadow: 2px 2px 1px adjust-hue($color,20deg);
+    color: $color;
+    border-radius: 5px;
+    font-style: italic;
+    padding: 0rem .5rem 0rem .5rem;
+    margin:.5rem;
+    background: lighten(#9494b7, 20%);
+    i {
+        padding-right: 0.3rem;
+        font-size: $size;
+    }
+    span {font-size: 1rem}
+    
+    &:hover {
+      background: lighten($color, 45%);
+      border: 2px solid darken($color,20%);
+      
+    }
+}
+
+@mixin ibz-input-alert ($color, $background) {
+    position  :fixed;
+    margin: -2.2rem 0 0 15rem;
+    border-radius: 5px;
+    font-style: italic;
+    border-color: darken($background,10%);
+    color: $color;
+    background-color: $background !important;
+    padding: 0.2rem !important;
+}
diff --git a/templates/html5/app/Frontend/styles/app/ibz-global.scss b/templates/html5/app/Frontend/styles/app/ibz-global.scss
new file mode 100644
index 0000000..1f5017e
--- /dev/null
+++ b/templates/html5/app/Frontend/styles/app/ibz-global.scss
@@ -0,0 +1,43 @@
+/*
+Copyright (C) 2015 "IoT.bzh"
+Author "Fulup Ar Foll"
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+@import "app/ibz-mixins";
+
+submit-button {
+    float: right;
+    @include ibz-button(grey);
+}
+
+zf-modal {
+  background-color: rgba(180,180,180,.5);
+}
+
+.box-content {
+     @include ibz-box-content;
+
+    .box-title {
+        display: block;
+        font-size: 1.3rem;
+    }
+}
+
+// Change Notifications default size
+.ui-notification {
+    width: auto;
+    border-radius: 5px;
+}
+\ No newline at end of file
diff --git a/templates/html5/app/Frontend/styles/foundation/_foundation-icons.scss b/templates/html5/app/Frontend/styles/foundation/_foundation-icons.scss
new file mode 100644
index 0000000..d401f3c
--- /dev/null
+++ b/templates/html5/app/Frontend/styles/foundation/_foundation-icons.scss
@@ -0,0 +1,591 @@
+/* 
+ * Foundation Icons v 3.0
+ * Made by ZURB 2013 http://zurb.com/playground/foundation-icon-fonts-3
+ * MIT License
+ */
+
+@font-face {
+  font-family: "foundation-icons";
+  src: url("/bower_components/foundation-icons.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+
+.fi-address-book:before,
+.fi-alert:before,
+.fi-align-center:before,
+.fi-align-justify:before,
+.fi-align-left:before,
+.fi-align-right:before,
+.fi-anchor:before,
+.fi-annotate:before,
+.fi-archive:before,
+.fi-arrow-down:before,
+.fi-arrow-left:before,
+.fi-arrow-right:before,
+.fi-arrow-up:before,
+.fi-arrows-compress:before,
+.fi-arrows-expand:before,
+.fi-arrows-in:before,
+.fi-arrows-out:before,
+.fi-asl:before,
+.fi-asterisk:before,
+.fi-at-sign:before,
+.fi-background-color:before,
+.fi-battery-empty:before,
+.fi-battery-full:before,
+.fi-battery-half:before,
+.fi-bitcoin-circle:before,
+.fi-bitcoin:before,
+.fi-blind:before,
+.fi-bluetooth:before,
+.fi-bold:before,
+.fi-book-bookmark:before,
+.fi-book:before,
+.fi-bookmark:before,
+.fi-braille:before,
+.fi-burst-new:before,
+.fi-burst-sale:before,
+.fi-burst:before,
+.fi-calendar:before,
+.fi-camera:before,
+.fi-check:before,
+.fi-checkbox:before,
+.fi-clipboard-notes:before,
+.fi-clipboard-pencil:before,
+.fi-clipboard:before,
+.fi-clock:before,
+.fi-closed-caption:before,
+.fi-cloud:before,
+.fi-comment-minus:before,
+.fi-comment-quotes:before,
+.fi-comment-video:before,
+.fi-comment:before,
+.fi-comments:before,
+.fi-compass:before,
+.fi-contrast:before,
+.fi-credit-card:before,
+.fi-crop:before,
+.fi-crown:before,
+.fi-css3:before,
+.fi-database:before,
+.fi-die-five:before,
+.fi-die-four:before,
+.fi-die-one:before,
+.fi-die-six:before,
+.fi-die-three:before,
+.fi-die-two:before,
+.fi-dislike:before,
+.fi-dollar-bill:before,
+.fi-dollar:before,
+.fi-download:before,
+.fi-eject:before,
+.fi-elevator:before,
+.fi-euro:before,
+.fi-eye:before,
+.fi-fast-forward:before,
+.fi-female-symbol:before,
+.fi-female:before,
+.fi-filter:before,
+.fi-first-aid:before,
+.fi-flag:before,
+.fi-folder-add:before,
+.fi-folder-lock:before,
+.fi-folder:before,
+.fi-foot:before,
+.fi-foundation:before,
+.fi-graph-bar:before,
+.fi-graph-horizontal:before,
+.fi-graph-pie:before,
+.fi-graph-trend:before,
+.fi-guide-dog:before,
+.fi-hearing-aid:before,
+.fi-heart:before,
+.fi-home:before,
+.fi-html5:before,
+.fi-indent-less:before,
+.fi-indent-more:before,
+.fi-info:before,
+.fi-italic:before,
+.fi-key:before,
+.fi-laptop:before,
+.fi-layout:before,
+.fi-lightbulb:before,
+.fi-like:before,
+.fi-link:before,
+.fi-list-bullet:before,
+.fi-list-number:before,
+.fi-list-thumbnails:before,
+.fi-list:before,
+.fi-lock:before,
+.fi-loop:before,
+.fi-magnifying-glass:before,
+.fi-mail:before,
+.fi-male-female:before,
+.fi-male-symbol:before,
+.fi-male:before,
+.fi-map:before,
+.fi-marker:before,
+.fi-megaphone:before,
+.fi-microphone:before,
+.fi-minus-circle:before,
+.fi-minus:before,
+.fi-mobile-signal:before,
+.fi-mobile:before,
+.fi-monitor:before,
+.fi-mountains:before,
+.fi-music:before,
+.fi-next:before,
+.fi-no-dogs:before,
+.fi-no-smoking:before,
+.fi-page-add:before,
+.fi-page-copy:before,
+.fi-page-csv:before,
+.fi-page-delete:before,
+.fi-page-doc:before,
+.fi-page-edit:before,
+.fi-page-export-csv:before,
+.fi-page-export-doc:before,
+.fi-page-export-pdf:before,
+.fi-page-export:before,
+.fi-page-filled:before,
+.fi-page-multiple:before,
+.fi-page-pdf:before,
+.fi-page-remove:before,
+.fi-page-search:before,
+.fi-page:before,
+.fi-paint-bucket:before,
+.fi-paperclip:before,
+.fi-pause:before,
+.fi-paw:before,
+.fi-paypal:before,
+.fi-pencil:before,
+.fi-photo:before,
+.fi-play-circle:before,
+.fi-play-video:before,
+.fi-play:before,
+.fi-plus:before,
+.fi-pound:before,
+.fi-power:before,
+.fi-previous:before,
+.fi-price-tag:before,
+.fi-pricetag-multiple:before,
+.fi-print:before,
+.fi-prohibited:before,
+.fi-projection-screen:before,
+.fi-puzzle:before,
+.fi-quote:before,
+.fi-record:before,
+.fi-refresh:before,
+.fi-results-demographics:before,
+.fi-results:before,
+.fi-rewind-ten:before,
+.fi-rewind:before,
+.fi-rss:before,
+.fi-safety-cone:before,
+.fi-save:before,
+.fi-share:before,
+.fi-sheriff-badge:before,
+.fi-shield:before,
+.fi-shopping-bag:before,
+.fi-shopping-cart:before,
+.fi-shuffle:before,
+.fi-skull:before,
+.fi-social-500px:before,
+.fi-social-adobe:before,
+.fi-social-amazon:before,
+.fi-social-android:before,
+.fi-social-apple:before,
+.fi-social-behance:before,
+.fi-social-bing:before,
+.fi-social-blogger:before,
+.fi-social-delicious:before,
+.fi-social-designer-news:before,
+.fi-social-deviant-art:before,
+.fi-social-digg:before,
+.fi-social-dribbble:before,
+.fi-social-drive:before,
+.fi-social-dropbox:before,
+.fi-social-evernote:before,
+.fi-social-facebook:before,
+.fi-social-flickr:before,
+.fi-social-forrst:before,
+.fi-social-foursquare:before,
+.fi-social-game-center:before,
+.fi-social-github:before,
+.fi-social-google-plus:before,
+.fi-social-hacker-news:before,
+.fi-social-hi5:before,
+.fi-social-instagram:before,
+.fi-social-joomla:before,
+.fi-social-lastfm:before,
+.fi-social-linkedin:before,
+.fi-social-medium:before,
+.fi-social-myspace:before,
+.fi-social-orkut:before,
+.fi-social-path:before,
+.fi-social-picasa:before,
+.fi-social-pinterest:before,
+.fi-social-rdio:before,
+.fi-social-reddit:before,
+.fi-social-skillshare:before,
+.fi-social-skype:before,
+.fi-social-smashing-mag:before,
+.fi-social-snapchat:before,
+.fi-social-spotify:before,
+.fi-social-squidoo:before,
+.fi-social-stack-overflow:before,
+.fi-social-steam:before,
+.fi-social-stumbleupon:before,
+.fi-social-treehouse:before,
+.fi-social-tumblr:before,
+.fi-social-twitter:before,
+.fi-social-vimeo:before,
+.fi-social-windows:before,
+.fi-social-xbox:before,
+.fi-social-yahoo:before,
+.fi-social-yelp:before,
+.fi-social-youtube:before,
+.fi-social-zerply:before,
+.fi-social-zurb:before,
+.fi-sound:before,
+.fi-star:before,
+.fi-stop:before,
+.fi-strikethrough:before,
+.fi-subscript:before,
+.fi-superscript:before,
+.fi-tablet-landscape:before,
+.fi-tablet-portrait:before,
+.fi-target-two:before,
+.fi-target:before,
+.fi-telephone-accessible:before,
+.fi-telephone:before,
+.fi-text-color:before,
+.fi-thumbnails:before,
+.fi-ticket:before,
+.fi-torso-business:before,
+.fi-torso-female:before,
+.fi-torso:before,
+.fi-torsos-all-female:before,
+.fi-torsos-all:before,
+.fi-torsos-female-male:before,
+.fi-torsos-male-female:before,
+.fi-torsos:before,
+.fi-trash:before,
+.fi-trees:before,
+.fi-trophy:before,
+.fi-underline:before,
+.fi-universal-access:before,
+.fi-unlink:before,
+.fi-unlock:before,
+.fi-upload-cloud:before,
+.fi-upload:before,
+.fi-usb:before,
+.fi-video:before,
+.fi-volume-none:before,
+.fi-volume-strike:before,
+.fi-volume:before,
+.fi-web:before,
+.fi-wheelchair:before,
+.fi-widget:before,
+.fi-wrench:before,
+.fi-x-circle:before,
+.fi-x:before,
+.fi-yen:before,
+.fi-zoom-in:before,
+.fi-zoom-out:before {
+  font-family: "foundation-icons";
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  text-decoration: inherit;
+}
+
+.fi-address-book:before { content: "\f100"; }
+.fi-alert:before { content: "\f101"; }
+.fi-align-center:before { content: "\f102"; }
+.fi-align-justify:before { content: "\f103"; }
+.fi-align-left:before { content: "\f104"; }
+.fi-align-right:before { content: "\f105"; }
+.fi-anchor:before { content: "\f106"; }
+.fi-annotate:before { content: "\f107"; }
+.fi-archive:before { content: "\f108"; }
+.fi-arrow-down:before { content: "\f109"; }
+.fi-arrow-left:before { content: "\f10a"; }
+.fi-arrow-right:before { content: "\f10b"; }
+.fi-arrow-up:before { content: "\f10c"; }
+.fi-arrows-compress:before { content: "\f10d"; }
+.fi-arrows-expand:before { content: "\f10e"; }
+.fi-arrows-in:before { content: "\f10f"; }
+.fi-arrows-out:before { content: "\f110"; }
+.fi-asl:before { content: "\f111"; }
+.fi-asterisk:before { content: "\f112"; }
+.fi-at-sign:before { content: "\f113"; }
+.fi-background-color:before { content: "\f114"; }
+.fi-battery-empty:before { content: "\f115"; }
+.fi-battery-full:before { content: "\f116"; }
+.fi-battery-half:before { content: "\f117"; }
+.fi-bitcoin-circle:before { content: "\f118"; }
+.fi-bitcoin:before { content: "\f119"; }
+.fi-blind:before { content: "\f11a"; }
+.fi-bluetooth:before { content: "\f11b"; }
+.fi-bold:before { content: "\f11c"; }
+.fi-book-bookmark:before { content: "\f11d"; }
+.fi-book:before { content: "\f11e"; }
+.fi-bookmark:before { content: "\f11f"; }
+.fi-braille:before { content: "\f120"; }
+.fi-burst-new:before { content: "\f121"; }
+.fi-burst-sale:before { content: "\f122"; }
+.fi-burst:before { content: "\f123"; }
+.fi-calendar:before { content: "\f124"; }
+.fi-camera:before { content: "\f125"; }
+.fi-check:before { content: "\f126"; }
+.fi-checkbox:before { content: "\f127"; }
+.fi-clipboard-notes:before { content: "\f128"; }
+.fi-clipboard-pencil:before { content: "\f129"; }
+.fi-clipboard:before { content: "\f12a"; }
+.fi-clock:before { content: "\f12b"; }
+.fi-closed-caption:before { content: "\f12c"; }
+.fi-cloud:before { content: "\f12d"; }
+.fi-comment-minus:before { content: "\f12e"; }
+.fi-comment-quotes:before { content: "\f12f"; }
+.fi-comment-video:before { content: "\f130"; }
+.fi-comment:before { content: "\f131"; }
+.fi-comments:before { content: "\f132"; }
+.fi-compass:before { content: "\f133"; }
+.fi-contrast:before { content: "\f134"; }
+.fi-credit-card:before { content: "\f135"; }
+.fi-crop:before { content: "\f136"; }
+.fi-crown:before { content: "\f137"; }
+.fi-css3:before { content: "\f138"; }
+.fi-database:before { content: "\f139"; }
+.fi-die-five:before { content: "\f13a"; }
+.fi-die-four:before { content: "\f13b"; }
+.fi-die-one:before { content: "\f13c"; }
+.fi-die-six:before { content: "\f13d"; }
+.fi-die-three:before { content: "\f13e"; }
+.fi-die-two:before { content: "\f13f"; }
+.fi-dislike:before { content: "\f140"; }
+.fi-dollar-bill:before { content: "\f141"; }
+.fi-dollar:before { content: "\f142"; }
+.fi-download:before { content: "\f143"; }
+.fi-eject:before { content: "\f144"; }
+.fi-elevator:before { content: "\f145"; }
+.fi-euro:before { content: "\f146"; }
+.fi-eye:before { content: "\f147"; }
+.fi-fast-forward:before { content: "\f148"; }
+.fi-female-symbol:before { content: "\f149"; }
+.fi-female:before { content: "\f14a"; }
+.fi-filter:before { content: "\f14b"; }
+.fi-first-aid:before { content: "\f14c"; }
+.fi-flag:before { content: "\f14d"; }
+.fi-folder-add:before { content: "\f14e"; }
+.fi-folder-lock:before { content: "\f14f"; }
+.fi-folder:before { content: "\f150"; }
+.fi-foot:before { content: "\f151"; }
+.fi-foundation:before { content: "\f152"; }
+.fi-graph-bar:before { content: "\f153"; }
+.fi-graph-horizontal:before { content: "\f154"; }
+.fi-graph-pie:before { content: "\f155"; }
+.fi-graph-trend:before { content: "\f156"; }
+.fi-guide-dog:before { content: "\f157"; }
+.fi-hearing-aid:before { content: "\f158"; }
+.fi-heart:before { content: "\f159"; }
+.fi-home:before { content: "\f15a"; }
+.fi-html5:before { content: "\f15b"; }
+.fi-indent-less:before { content: "\f15c"; }
+.fi-indent-more:before { content: "\f15d"; }
+.fi-info:before { content: "\f15e"; }
+.fi-italic:before { content: "\f15f"; }
+.fi-key:before { content: "\f160"; }
+.fi-laptop:before { content: "\f161"; }
+.fi-layout:before { content: "\f162"; }
+.fi-lightbulb:before { content: "\f163"; }
+.fi-like:before { content: "\f164"; }
+.fi-link:before { content: "\f165"; }
+.fi-list-bullet:before { content: "\f166"; }
+.fi-list-number:before { content: "\f167"; }
+.fi-list-thumbnails:before { content: "\f168"; }
+.fi-list:before { content: "\f169"; }
+.fi-lock:before { content: "\f16a"; }
+.fi-loop:before { content: "\f16b"; }
+.fi-magnifying-glass:before { content: "\f16c"; }
+.fi-mail:before { content: "\f16d"; }
+.fi-male-female:before { content: "\f16e"; }
+.fi-male-symbol:before { content: "\f16f"; }
+.fi-male:before { content: "\f170"; }
+.fi-map:before { content: "\f171"; }
+.fi-marker:before { content: "\f172"; }
+.fi-megaphone:before { content: "\f173"; }
+.fi-microphone:before { content: "\f174"; }
+.fi-minus-circle:before { content: "\f175"; }
+.fi-minus:before { content: "\f176"; }
+.fi-mobile-signal:before { content: "\f177"; }
+.fi-mobile:before { content: "\f178"; }
+.fi-monitor:before { content: "\f179"; }
+.fi-mountains:before { content: "\f17a"; }
+.fi-music:before { content: "\f17b"; }
+.fi-next:before { content: "\f17c"; }
+.fi-no-dogs:before { content: "\f17d"; }
+.fi-no-smoking:before { content: "\f17e"; }
+.fi-page-add:before { content: "\f17f"; }
+.fi-page-copy:before { content: "\f180"; }
+.fi-page-csv:before { content: "\f181"; }
+.fi-page-delete:before { content: "\f182"; }
+.fi-page-doc:before { content: "\f183"; }
+.fi-page-edit:before { content: "\f184"; }
+.fi-page-export-csv:before { content: "\f185"; }
+.fi-page-export-doc:before { content: "\f186"; }
+.fi-page-export-pdf:before { content: "\f187"; }
+.fi-page-export:before { content: "\f188"; }
+.fi-page-filled:before { content: "\f189"; }
+.fi-page-multiple:before { content: "\f18a"; }
+.fi-page-pdf:before { content: "\f18b"; }
+.fi-page-remove:before { content: "\f18c"; }
+.fi-page-search:before { content: "\f18d"; }
+.fi-page:before { content: "\f18e"; }
+.fi-paint-bucket:before { content: "\f18f"; }
+.fi-paperclip:before { content: "\f190"; }
+.fi-pause:before { content: "\f191"; }
+.fi-paw:before { content: "\f192"; }
+.fi-paypal:before { content: "\f193"; }
+.fi-pencil:before { content: "\f194"; }
+.fi-photo:before { content: "\f195"; }
+.fi-play-circle:before { content: "\f196"; }
+.fi-play-video:before { content: "\f197"; }
+.fi-play:before { content: "\f198"; }
+.fi-plus:before { content: "\f199"; }
+.fi-pound:before { content: "\f19a"; }
+.fi-power:before { content: "\f19b"; }
+.fi-previous:before { content: "\f19c"; }
+.fi-price-tag:before { content: "\f19d"; }
+.fi-pricetag-multiple:before { content: "\f19e"; }
+.fi-print:before { content: "\f19f"; }
+.fi-prohibited:before { content: "\f1a0"; }
+.fi-projection-screen:before { content: "\f1a1"; }
+.fi-puzzle:before { content: "\f1a2"; }
+.fi-quote:before { content: "\f1a3"; }
+.fi-record:before { content: "\f1a4"; }
+.fi-refresh:before { content: "\f1a5"; }
+.fi-results-demographics:before { content: "\f1a6"; }
+.fi-results:before { content: "\f1a7"; }
+.fi-rewind-ten:before { content: "\f1a8"; }
+.fi-rewind:before { content: "\f1a9"; }
+.fi-rss:before { content: "\f1aa"; }
+.fi-safety-cone:before { content: "\f1ab"; }
+.fi-save:before { content: "\f1ac"; }
+.fi-share:before { content: "\f1ad"; }
+.fi-sheriff-badge:before { content: "\f1ae"; }
+.fi-shield:before { content: "\f1af"; }
+.fi-shopping-bag:before { content: "\f1b0"; }
+.fi-shopping-cart:before { content: "\f1b1"; }
+.fi-shuffle:before { content: "\f1b2"; }
+.fi-skull:before { content: "\f1b3"; }
+.fi-social-500px:before { content: "\f1b4"; }
+.fi-social-adobe:before { content: "\f1b5"; }
+.fi-social-amazon:before { content: "\f1b6"; }
+.fi-social-android:before { content: "\f1b7"; }
+.fi-social-apple:before { content: "\f1b8"; }
+.fi-social-behance:before { content: "\f1b9"; }
+.fi-social-bing:before { content: "\f1ba"; }
+.fi-social-blogger:before { content: "\f1bb"; }
+.fi-social-delicious:before { content: "\f1bc"; }
+.fi-social-designer-news:before { content: "\f1bd"; }
+.fi-social-deviant-art:before { content: "\f1be"; }
+.fi-social-digg:before { content: "\f1bf"; }
+.fi-social-dribbble:before { content: "\f1c0"; }
+.fi-social-drive:before { content: "\f1c1"; }
+.fi-social-dropbox:before { content: "\f1c2"; }
+.fi-social-evernote:before { content: "\f1c3"; }
+.fi-social-facebook:before { content: "\f1c4"; }
+.fi-social-flickr:before { content: "\f1c5"; }
+.fi-social-forrst:before { content: "\f1c6"; }
+.fi-social-foursquare:before { content: "\f1c7"; }
+.fi-social-game-center:before { content: "\f1c8"; }
+.fi-social-github:before { content: "\f1c9"; }
+.fi-social-google-plus:before { content: "\f1ca"; }
+.fi-social-hacker-news:before { content: "\f1cb"; }
+.fi-social-hi5:before { content: "\f1cc"; }
+.fi-social-instagram:before { content: "\f1cd"; }
+.fi-social-joomla:before { content: "\f1ce"; }
+.fi-social-lastfm:before { content: "\f1cf"; }
+.fi-social-linkedin:before { content: "\f1d0"; }
+.fi-social-medium:before { content: "\f1d1"; }
+.fi-social-myspace:before { content: "\f1d2"; }
+.fi-social-orkut:before { content: "\f1d3"; }
+.fi-social-path:before { content: "\f1d4"; }
+.fi-social-picasa:before { content: "\f1d5"; }
+.fi-social-pinterest:before { content: "\f1d6"; }
+.fi-social-rdio:before { content: "\f1d7"; }
+.fi-social-reddit:before { content: "\f1d8"; }
+.fi-social-skillshare:before { content: "\f1d9"; }
+.fi-social-skype:before { content: "\f1da"; }
+.fi-social-smashing-mag:before { content: "\f1db"; }
+.fi-social-snapchat:before { content: "\f1dc"; }
+.fi-social-spotify:before { content: "\f1dd"; }
+.fi-social-squidoo:before { content: "\f1de"; }
+.fi-social-stack-overflow:before { content: "\f1df"; }
+.fi-social-steam:before { content: "\f1e0"; }
+.fi-social-stumbleupon:before { content: "\f1e1"; }
+.fi-social-treehouse:before { content: "\f1e2"; }
+.fi-social-tumblr:before { content: "\f1e3"; }
+.fi-social-twitter:before { content: "\f1e4"; }
+.fi-social-vimeo:before { content: "\f1e5"; }
+.fi-social-windows:before { content: "\f1e6"; }
+.fi-social-xbox:before { content: "\f1e7"; }
+.fi-social-yahoo:before { content: "\f1e8"; }
+.fi-social-yelp:before { content: "\f1e9"; }
+.fi-social-youtube:before { content: "\f1ea"; }
+.fi-social-zerply:before { content: "\f1eb"; }
+.fi-social-zurb:before { content: "\f1ec"; }
+.fi-sound:before { content: "\f1ed"; }
+.fi-star:before { content: "\f1ee"; }
+.fi-stop:before { content: "\f1ef"; }
+.fi-strikethrough:before { content: "\f1f0"; }
+.fi-subscript:before { content: "\f1f1"; }
+.fi-superscript:before { content: "\f1f2"; }
+.fi-tablet-landscape:before { content: "\f1f3"; }
+.fi-tablet-portrait:before { content: "\f1f4"; }
+.fi-target-two:before { content: "\f1f5"; }
+.fi-target:before { content: "\f1f6"; }
+.fi-telephone-accessible:before { content: "\f1f7"; }
+.fi-telephone:before { content: "\f1f8"; }
+.fi-text-color:before { content: "\f1f9"; }
+.fi-thumbnails:before { content: "\f1fa"; }
+.fi-ticket:before { content: "\f1fb"; }
+.fi-torso-business:before { content: "\f1fc"; }
+.fi-torso-female:before { content: "\f1fd"; }
+.fi-torso:before { content: "\f1fe"; }
+.fi-torsos-all-female:before { content: "\f1ff"; }
+.fi-torsos-all:before { content: "\f200"; }
+.fi-torsos-female-male:before { content: "\f201"; }
+.fi-torsos-male-female:before { content: "\f202"; }
+.fi-torsos:before { content: "\f203"; }
+.fi-trash:before { content: "\f204"; }
+.fi-trees:before { content: "\f205"; }
+.fi-trophy:before { content: "\f206"; }
+.fi-underline:before { content: "\f207"; }
+.fi-universal-access:before { content: "\f208"; }
+.fi-unlink:before { content: "\f209"; }
+.fi-unlock:before { content: "\f20a"; }
+.fi-upload-cloud:before { content: "\f20b"; }
+.fi-upload:before { content: "\f20c"; }
+.fi-usb:before { content: "\f20d"; }
+.fi-video:before { content: "\f20e"; }
+.fi-volume-none:before { content: "\f20f"; }
+.fi-volume-strike:before { content: "\f210"; }
+.fi-volume:before { content: "\f211"; }
+.fi-web:before { content: "\f212"; }
+.fi-wheelchair:before { content: "\f213"; }
+.fi-widget:before { content: "\f214"; }
+.fi-wrench:before { content: "\f215"; }
+.fi-x-circle:before { content: "\f216"; }
+.fi-x:before { content: "\f217"; }
+.fi-yen:before { content: "\f218"; }
+.fi-zoom-in:before { content: "\f219"; }
+.fi-zoom-out:before { content: "\f21a"; }
diff --git a/templates/html5/app/Frontend/styles/foundation/_foundation-settings.scss b/templates/html5/app/Frontend/styles/foundation/_foundation-settings.scss
new file mode 100644
index 0000000..d4c6415
--- /dev/null
+++ b/templates/html5/app/Frontend/styles/foundation/_foundation-settings.scss
@@ -0,0 +1,605 @@
+//  FOUNDATION FOR APPS SETTINGS
+//  ----------------------------
+//
+//  Table of Contents:
+//
+//  1.  CSS Exports
+//  2.  Global Styles
+//  3.  Breakpoints
+//  4.  Typography
+//  5.  Grid
+//  6.  Button
+//  7.  Accordion
+//  8.  Action Sheet
+//  9.  Block List
+//  10. Button Group
+//  11. Card
+//  12. Extras
+//  13. Forms
+//  14. Iconic
+//  15. Label
+//  16. Menu Bar
+//  17. Modal
+//  18. Motion UI
+//  19. Notification
+//  20. Off-canvas
+//  21. Panel
+//  22. Popup
+//  23. Switch
+//  24. Tabs
+//  25. Title Bar
+
+@import "helpers/functions";
+
+// 1. CSS Exports
+// - - - - - - - - - - - - - - -
+
+// Change any value in this map from "true" to "false" to disable that component's CSS class output. You'll still be able to use the component's mixins, but none of our pre-written classes will be in your CSS.
+
+ $include-css: (
+   accordion: true,
+   action-sheet: true,
+   block-list: true,
+   button: true,
+   button-group: true,
+   card: true,
+   coloring: true,
+   extras: true,
+   forms: true,
+   grid: true,
+   iconic: true,
+   label: true,
+   badge: true,
+   list: true,
+   menu-bar: true,
+   modal: true,
+   motion: true,
+   notification: true,
+   off-canvas: true,
+   panel: true,
+   popup: true,
+   switch: true,
+   tabs: true,
+   title-bar: true,
+   typography: true,
+   utilities: true,
+ ); 
+
+// 2. Global Styles
+// - - - - - - - - - - - - - - -
+
+// This sets 1rem to be 16px
+// $rem-base: 16px;
+
+// The default font-size is set to 100% of the browser style sheet (usually 16px)
+// for compatibility with browser-based text zoom or user-set defaults.
+
+// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
+// If you want your base font-size to be different and not have it affect the grid breakpoints,
+// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
+// $base-font-size: 100%;
+
+// $base-line-height is 24px while $base-font-size is 16px
+// $base-line-height: 1.5;
+
+// Text selector helpers
+// $headers: "h1,h2,h3,h4,h5,h6";
+
+// We use these to define default font weights
+// $font-weight-normal: normal;
+// $font-weight-bold: bold;
+
+// We use these to control various global styles
+// $body-background: #fff;
+// $body-font-color: #222;
+// $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+// $body-font-weight: $font-weight-normal;
+// $body-font-style: normal;
+// $body-antialiased: true;
+
+// Application Colors
+// $primary-color: #00558b;
+// $secondary-color: #f1f1f1;
+// $alert-color: #F04124;
+// $info-color: #A0D3E8;
+// $success-color: #43AC6A;
+// $warning-color: #F08A24;
+// $dark-color: #232323;
+// $gray: #dfdfdf;
+// $gray-dark: darken($gray, 8);
+// $gray-light: lighten($gray, 8);
+
+// We use these to make sure border radius matches unless we want it different.
+// $global-radius: 4px;
+// $global-rounded: 1000px;
+
+// We use this for default spacing
+// $global-padding: 1rem;
+// $global-spacing: rem-calc(15); 
+
+// 3. Breakpoints
+// - - - - - - - - - - - - - - -
+
+// These are our named breakpoints. You can use them in our breakpoint function like this: @include breakpoint(medium) { // Medium and larger styles }
+// $breakpoints: (
+//   small: rem-calc(0),
+//   medium: rem-calc(640),
+//   large: rem-calc(1200),
+//   xlarge: rem-calc(1440),
+//   xxlarge: rem-calc(1920),
+// );
+
+// All of the names in this list will be output as classes in your CSS, like small-12, medium-6, and so on.
+// $breakpoint-classes: (small medium large); 
+
+// 4. Typography
+// - - - - - - - - - - - - - - -
+
+// We use these to control header font styles
+// $header-font-family: $body-font-family;
+// $header-font-weight: $font-weight-normal;
+// $header-font-style: $font-weight-normal;
+// $header-font-color: #222;
+// $header-line-height: 1.4;
+// $header-top-margin: .2rem;
+// $header-bottom-margin: .5rem;
+// $header-text-rendering: optimizeLegibility;
+
+// We use these to control header font sizes
+// $h1-font-size: rem-calc(44);
+// $h2-font-size: rem-calc(37);
+// $h3-font-size: rem-calc(27);
+// $h4-font-size: rem-calc(23);
+// $h5-font-size: rem-calc(18);
+// $h6-font-size: 1rem;
+
+// We use these to control header size reduction on small screens
+// $h1-font-reduction: rem-calc(10);
+// $h2-font-reduction: rem-calc(10);
+// $h3-font-reduction: rem-calc(5);
+// $h4-font-reduction: rem-calc(5);
+// $h5-font-reduction: 0;
+// $h6-font-reduction: 0;
+
+// These control how subheaders are styled.
+// $subheader-line-height: 1.4;
+// $subheader-font-color: scale-color($header-font-color, $lightness: 35%);
+// $subheader-font-weight: $font-weight-normal;
+// $subheader-top-margin: .2rem;
+// $subheader-bottom-margin: .5rem;
+
+// A general <small> styling
+// $small-font-size: 60%;
+// $small-font-color: scale-color($header-font-color, $lightness: 35%);
+
+// We use these to style paragraphs
+// $paragraph-font-family: inherit;
+// $paragraph-font-weight: $font-weight-normal;
+// $paragraph-font-size: 1rem;
+// $paragraph-line-height: 1.6;
+// $paragraph-margin-bottom: rem-calc(20);
+// $paragraph-aside-font-size: rem-calc(14);
+// $paragraph-aside-line-height: 1.35;
+// $paragraph-aside-font-style: italic;
+// $paragraph-text-rendering: optimizeLegibility;
+
+// We use these to style <code> tags
+// $code-color: grayscale($primary-color);
+// $code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
+// $code-font-weight: $font-weight-normal;
+// $code-background-color: scale-color($secondary-color, $lightness: 70%);
+// $code-border-size: 1px;
+// $code-border-style: solid;
+// $code-border-color: scale-color($code-background-color, $lightness: -10%);
+// $code-padding: rem-calc(2) rem-calc(5) rem-calc(1);
+
+// We use these to style anchors
+// $anchor-text-decoration: none;
+// $anchor-text-decoration-hover: none;
+// $anchor-font-color: $primary-color;
+// $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%);
+
+// We use these to style the <hr> element
+// $hr-border-width: 1px;
+// $hr-border-style: solid;
+// $hr-border-color: #ddd;
+// $hr-margin: rem-calc(20);
+
+// We use these to style lists
+// $list-font-family: $paragraph-font-family;
+// $list-font-size: $paragraph-font-size;
+// $list-line-height: $paragraph-line-height;
+// $list-margin-bottom: $paragraph-margin-bottom;
+// $list-style-position: outside;
+// $list-side-margin: 1.1rem;
+// $list-ordered-side-margin: 1.4rem;
+// $list-side-margin-no-bullet: 0;
+// $list-nested-margin: rem-calc(20);
+// $definition-list-header-weight: $font-weight-bold;
+// $definition-list-header-margin-bottom: .3rem;
+// $definition-list-margin-bottom: rem-calc(12);
+
+// We use these to style blockquotes
+// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%);
+// $blockquote-padding: rem-calc(9 20 0 19);
+// $blockquote-border: 1px solid #ddd;
+// $blockquote-cite-font-size: rem-calc(13);
+// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%);
+// $blockquote-cite-link-color: $blockquote-cite-font-color;
+
+// Acronym styles
+// $acronym-underline: 1px dotted #ddd; 
+
+// 5. Grid
+// - - - - - - - - - - - - - - -
+
+// $container-width: rem-calc(900);
+// $block-padding: $global-padding;
+// $total-columns: 12;
+// $block-grid-max-size: 6; 
+
+// 6. Button
+// - - - - - - - - - - - - - - -
+
+// $button-padding: 0.85em 1em;
+// $button-margin: 0 $global-padding $global-padding 0;
+// $button-style: solid;
+// $button-background: $primary-color;
+// $button-color: auto;
+// $button-radius: 0;
+// $button-sizes: (
+//   tiny: 0.7,
+//   small: 0.8,
+//   medium: 1,
+//   large: 1.3,
+// );
+// $button-font-size: 0.9rem;
+// $button-opacity-disabled: 0.5;
+// $button-tag-selector: false; 
+
+// 7. Accordion
+// - - - - - - - - - - - - - - -
+
+// $accordion-border: 1px solid $gray-dark;
+
+// $accordion-title-background: $gray-light;
+// $accordion-title-background-hover: smartscale($accordion-title-background, 5%);
+// $accordion-title-background-active: smartscale($accordion-title-background, 3%);
+// $accordion-title-color: isitlight($accordion-title-background);
+// $accordion-title-color-active: isitlight($accordion-title-background);
+
+// $accordion-title-padding: $global-padding;
+// $accordion-content-padding: $global-padding; 
+
+// 8. Action Sheet
+// - - - - - - - - - - - - - - -
+
+// $actionsheet-background: white;
+// $actionsheet-border-color: #ccc;
+// $actionsheet-animate: transform opacity;
+// $actionsheet-animation-speed: 0.25s;
+// $actionsheet-width: 300px;
+// $actionsheet-radius: 4px;
+// $actionsheet-shadow: 0 -3px 10px rgba(black, 0.25);
+// $actionsheet-padding: $global-padding;
+// $actionsheet-tail-size: 10px;
+
+// $actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25);
+
+// $actionsheet-link-color: #000;
+// $actionsheet-link-background-hover: smartscale($actionsheet-background); 
+
+// 9. Block List
+// - - - - - - - - - - - - - - -
+
+// $blocklist-background: #fff;
+// $blocklist-fullbleed: true;
+// $blocklist-fontsize: 1rem;
+
+// $blocklist-item-padding: 0.8rem 1rem;
+// $blocklist-item-color: isitlight($blocklist-background, #000, #fff);
+// $blocklist-item-background-hover: smartscale($blocklist-background, 4.5%);
+// $blocklist-item-color-disabled: #999;
+// $blocklist-item-border: 1px solid smartscale($blocklist-background, 18.5%);
+
+// $blocklist-item-label-color: scale-color($blocklist-item-color, $lightness: 60%);
+// $blocklist-item-icon-size: 0.8;
+
+// $blocklist-header-fontsize: 0.8em;
+// $blocklist-header-color: smartscale($blocklist-item-color, 40%);
+// $blocklist-header-uppercase: true;
+
+// $blocklist-check-icons: true; 
+
+// 10. Button Group
+// - - - - - - - - - - - - - - -
+
+// $btngroup-background: $primary-color;
+// $btngroup-color: #fff;
+// $btngroup-radius: $button-radius; 
+
+// 11. Card
+// - - - - - - - - - - - - - - -
+
+// $card-background: #fff;
+// $card-color: isitlight($card-background);
+// $card-border: 1px solid smartscale($card-background, 7%);
+// $card-radius: $global-radius;
+// $card-shadow: 0 1px 2px rgba(#000, 0.2);
+// $card-padding: $global-padding;
+// $card-margin: 0.5rem;
+
+// $card-divider-background: smartscale($card-background, 7%); 
+
+// 12. Extras
+// - - - - - - - - - - - - - - -
+
+// $closebutton-position: (top right);
+// $closebutton-size: 2em;
+// $closebutton-lineheight: 0.5;
+// $closebutton-color: #999;
+// $closebutton-color-hover: #333;
+
+// $thumbnail-padding: 0.5rem;
+// $thumbnail-shadow: 0 3px 15px rgba(black, 0.25); 
+
+// 13. Forms
+// - - - - - - - - - - - - - - -
+
+// Basic form variables
+// $form-fontsize: 1rem;
+// $form-padding: 0.5rem;
+
+// Text fields
+// $input-color: #000;
+// $input-color-hover: $input-color;
+// $input-color-focus: $input-color;
+// $input-background: #fff;
+// $input-background-hover: $input-background;
+// $input-background-focus: $input-background;
+// $input-border: 1px solid #ccc;
+// $input-border-hover: 1px solid #bbb;
+// $input-border-focus: 1px solid #999;
+
+// Select menus
+// $select-color: #000;
+// $select-background: #fafafa;
+// $select-background-hover: smartscale($select-background, 4%);
+// $select-arrow: true;
+// $select-arrow-color: $select-color;
+
+// Labels
+// $form-label-fontsize: 0.9rem;
+// $form-label-margin: 0.5rem;
+// $form-label-color: #333;
+
+// Inline labels
+// $inlinelabel-color: #333;
+// $inlinelabel-background: #eee;
+// $inlinelabel-border: $input-border;
+
+// Range slider
+// $slider-background: #ddd;
+// $slider-height: 1rem;
+// $slider-radius: 0px;
+// $slider-thumb-height: 1.5rem;
+// $slider-thumb-color: $primary-color;
+// $slider-thumb-radius: 0px;
+
+// Progress and meter
+// $meter-height: 1.5rem;
+// $meter-background: #ccc;
+// $meter-fill: $primary-color;
+// $meter-fill-high: $success-color;
+// $meter-fill-medium: #e7cf00;
+// $meter-fill-low: $alert-color;
+// $meter-radius: 0; 
+
+// 14. Iconic
+// - - - - - - - - - - - - - - -
+
+// $iconic-primary-fill: $primary-color;
+// $iconic-primary-stroke: $primary-color;
+// $iconic-accent-fill: $iconic-primary-fill;
+// $iconic-accent-stroke: $iconic-accent-fill; 
+
+// 15. Label
+// - - - - - - - - - - - - - - -
+
+// $label-fontsize: 0.8rem;
+// $label-padding: ($global-padding / 3) ($global-padding / 2);
+// $label-radius: 0;
+// $label-background: $primary-color;
+// $label-color: isitlight($primary-color);
+
+// $badge-fontsize: 0.8em;
+// $badge-diameter: 1.5rem;
+// $badge-background: $primary-color;
+// $badge-color: #fff;
+
+// DEPRECATED: these variables will be removed in v1.1.
+// $badge-padding: .1em .61em;
+// $badge-radius: $global-rounded;
+// $badge-font-color: #fff; 
+
+// 16. Menu Bar
+// - - - - - - - - - - - - - - -
+
+// $menubar-fontsize: 1rem;
+// $menubar-background: #fff;
+// $menubar-background-hover: smartscale($menubar-background, 7%);
+// $menubar-background-active: $menubar-background-hover;
+// $menubar-color: isitlight($menubar-background);
+// $menubar-color-hover: $menubar-color;
+// $menubar-color-active: $menubar-color-hover;
+
+// $menubar-item-padding: $global-padding;
+// $menubar-icon-size: 25px;
+// $menubar-icon-spacing: $menubar-item-padding; 
+
+// 17. Modal
+// - - - - - - - - - - - - - - -
+
+// $modal-background: #fff;
+// $modal-border: 0;
+// $modal-radius: 0px;
+// $modal-shadow: none;
+// $modal-zindex: 1000;
+// $modal-sizes: (
+//   tiny: 300px,
+//   small: 500px,
+//   medium: 600px,
+//   large: 800px,
+// );
+
+// $modal-overlay-class: 'modal-overlay';
+// $modal-overlay-background: rgba(#333, 0.7); 
+
+// 18. Motion UI
+// - - - - - - - - - - - - - - -
+
+// Classes to use when triggering in/out animations
+// $motion-class: (
+//   in: "ng-enter",
+//   out: "ng-leave",
+// );
+// $motion-class-active: (
+//   in: "ng-enter-active",
+//   out: "ng-leave-active",
+// );
+// $motion-class-stagger: (
+//   in: "ng-enter-stagger",
+//   out: "ng-leave-stagger",
+// );
+
+// Set if movement-based transitions should also fade the element in and out
+// $motion-slide-and-fade: false;
+// $motion-hinge-and-fade: true;
+// $motion-scale-and-fade: true;
+// $motion-spin-and-fade: true;
+
+// Default speed for transitions and animations
+// $motion-duration-default: 500ms;
+// Slow and fast modifiders
+// $motion-duration-slow: 750ms;
+// $motion-duration-fast: 250ms;
+// $motion-stagger-duration-default: 150ms;
+// $motion-stagger-duration-short: 50ms;
+// $motion-stagger-duration-long: 300ms;
+
+// Default timing function for transitions and animations
+// $motion-timing-default: ease;
+// Built-in and custom easing functions
+// Every item in this map becomes a CSS class
+// $motion-timings: (
+//   linear: linear,
+//   ease: ease,
+//   easeIn: ease-in,
+//   easeOut: ease-out,
+//   easeInOut: ease-in-out,
+//   bounceIn: cubic-bezier(0.485, 0.155, 0.240, 1.245),
+//   bounceOut: cubic-bezier(0.485, 0.155, 0.515, 0.845),
+//   bounceInOut: cubic-bezier(0.760, -0.245, 0.240, 1.245),
+// );
+
+// Default delay for all transitions and animations
+// $motion-delay-default: 0;
+// Short and long delay modifiers
+// $motion-delay-short: 300ms;
+// $motion-delay-long: 700ms; 
+
+// 19. Notification
+// - - - - - - - - - - - - - - -
+
+// $notification-default-position: right top;
+// $notification-width: rem-calc(400);
+// $notification-offset: $global-padding;
+
+// $notification-background: $primary-color;
+// $notification-color: white;
+// $notification-padding: $global-padding;
+// $notification-radius: 4px;
+
+// $notification-icon-size: 60px;
+// $notification-icon-margin: $global-padding;
+// $notification-icon-align: top;
+ 
+
+// 20. Off-canvas
+// - - - - - - - - - - - - - - -
+
+// $offcanvas-size-horizontal: 250px;
+// $offcanvas-size-vertical: 250px;
+
+// $offcanvas-background: #fff;
+// $offcanvas-color: isitlight($offcanvas-background);
+// $offcanvas-padding: 0;
+// $offcanvas-shadow: 3px 0 10px rgba(black, 0.25);
+// $offcanvas-animation-speed: 0.25s;
+
+// $offcanvas-frame-selector: '.grid-frame'; 
+
+// 21. Panel
+// - - - - - - - - - - - - - - -
+
+// $panel-size-horizontal: 300px;
+// $panel-size-vertical: 300px;
+// $panel-padding: 0;
+
+// $panel-background: #fff;
+// $panel-shadow: 3px 0 10px rgba(black, 0.25);
+// $panel-animation-speed: 0.25s; 
+
+// 22. Popup
+// - - - - - - - - - - - - - - -
+
+// $popup-width: rem-calc(300);
+// $popup-background: #fff;
+// $popup-border: 0;
+// $popup-radius: 0;
+// $popup-shadow: 0 0 10px rgba(#000, 0.25); 
+
+// 23. Switch
+// - - - - - - - - - - - - - - -
+
+// $switch-width: rem-calc(50);
+// $switch-height: rem-calc(32);
+// $switch-background: #ccc;
+// $switch-background-active: $primary-color;
+// $switch-border: 0;
+// $switch-radius: 9999px;
+// $switch-animation-speed: 0.15s;
+
+// $switch-paddle-color: white;
+// $switch-paddle-offset: 4px; 
+
+// 24. Tabs
+// - - - - - - - - - - - - - - -
+
+// $tabstrip-background: transparent;
+
+// $tab-title-background: $gray-light;
+// $tab-title-background-hover: smartscale($tab-title-background, 5%);
+// $tab-title-background-active: smartscale($tab-title-background, 3%);
+// $tab-title-color: isitlight($tab-title-background);
+// $tab-title-color-active: $tab-title-color;
+
+// $tab-title-padding: $global-padding;
+// $tab-content-padding: $global-padding; 
+
+// 25. Title Bar
+// - - - - - - - - - - - - - - -
+
+// $titlebar-center-width: 50%;
+// $titlebar-side-width: (100% - $titlebar-center-width) / 2;
+// $titlebar-background: #eee;
+// $titlebar-color: #000;
+// $titlebar-border: 1px solid #ccc;
+// $titlebar-padding: $global-padding;
+// $titlebar-item-classes: (
+//   center: 'center',
+//   left: 'left',
+//   right: 'right',
+//   title: 'title',
+// ); 
+
diff --git a/templates/html5/app/Frontend/styles/foundation/foundation-conf.scss b/templates/html5/app/Frontend/styles/foundation/foundation-conf.scss
new file mode 100644
index 0000000..bdcfe1f
--- /dev/null
+++ b/templates/html5/app/Frontend/styles/foundation/foundation-conf.scss
@@ -0,0 +1,19 @@
+@import "foundation-settings";
+@import "foundation-icons";
+@import "foundation";
+
+
+/*.sidebar {
+    // Panel on small screens
+    @extend %panel-base;
+    @include panel-position(left);
+    // Override styles to become a block on medium screens
+    @include breakpoint(medium) {
+    @include grid-panel-reset;
+    @include grid-block(4);
+    }
+    // Change size to 3 columns on large screens
+    @include breakpoint(large) {
+    @include grid-size(3);
+    }
+}*/
+\ No newline at end of file
diff --git a/templates/html5/app/Frontend/widgets/ActionButtons/ActionButtons.scss b/templates/html5/app/Frontend/widgets/ActionButtons/ActionButtons.scss
new file mode 100644
index 0000000..6cb8338
--- /dev/null
+++ b/templates/html5/app/Frontend/widgets/ActionButtons/ActionButtons.scss
@@ -0,0 +1,40 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+@import "app/ibz-mixins";
+
+// place here your submit buttons customization
+appli-button {
+    @include ibz-button(grey,1rem)
+    img {
+        height: 3rem;
+    }
+    
+    
+    .disable>i {
+      text-decoration:none; // really not needed for the Top Bar, just for general technique
+      cursor: auto;
+      color: grey !important;
+    }
+}
+
+.appli-menu-start {    
+    .start-start, .stop-stop {
+        i {color: grey;}
+    }
+}
diff --git a/templates/html5/app/Frontend/widgets/ActionButtons/AppliButton.js b/templates/html5/app/Frontend/widgets/ActionButtons/AppliButton.js
new file mode 100644
index 0000000..269ee81
--- /dev/null
+++ b/templates/html5/app/Frontend/widgets/ActionButtons/AppliButton.js
@@ -0,0 +1,205 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ * 
+ * Bugs: Input with Callback SHOULD BE get 'required' class
+ */
+
+(function () {
+    'use strict';
+
+    var tmplAppli = '<div  ng-click="clicked()">' +
+            '<img ng-src="{{icon}}">' +
+            '<span>{{label}}</span>' +
+            '</div>';
+    
+    var tmplModal = 
+            '<b class="close-button" ng-click="close()">×</b>' +
+            '<img ng-src="{{icon}}">' +
+            '<span class="modal-text">Application <b>{{label}}</b></span>' +
+            '<ul class="vertical icon-left primary menu-bar appli-menu-start">' +
+            '<li class=start-{{runstatus}}><a ng-click=action("start")><i class="fi-check"> Start</i></a></li>' +
+            '<li class=stop-{{runstatus}}><a ng-click=action("stop")><i class="fi-x"> Stop</i></a></li>' +
+            '<li><a ng-click=action("info")><i class="fi-info"> Info</i></a></li>' +
+            '<li class=start-{{runstatus}}><a ng-click=action("uninstall")><i class="fi-x"> Uninstall</i></a></li>' +
+            '</ul>' +
+            '';
+    
+    var tmplDetail = 
+            '<b class="close-button" ng-click="close()">×</b>' +
+            '<img ng-src="{{icon}}">' +
+            '<span class="modal-text">Application <b>{{label}}</b></span>' +
+            '<ul class="vertical icon-left appli-menu-info">' +
+            '<li><i class="fi-paperclip"> Name : {{detail.name}} </i></li>' +
+            '<li><i class="fi-info"> Description {{detail.description}}</i></li>' +
+            '<li><i class="fi-torso"> Author : {{detail.author}}</i></li>' +
+            '</ul>' +
+            '';
+
+    angular.module('AppliButton', [])
+            .directive('appliButton', function (AppConfig, AppCall, ModalFactory, Notification, $timeout, $window, $location, urlquery) {
+
+                function mymethods(scope, elem, attrs) {
+                    scope.runstatus = "stop";
+                    scope.runmode   = urlquery.runmode || "auto";
+                    scope.clicked = function () {
+
+                        var notifyError = function(action, response) {
+                            Notification.error ({message: "Fail /api/afm-main" + action + "=" + scope.label + " RunID="+ scope.appID, delay: 5000});
+                            elem.addClass ("fail");
+                            elem.removeClass ("success");
+                            scope.callback (scope.appID, action, response);
+                        };
+                        
+                        var notifySuccess = function (action, response) {
+                            elem.removeClass ("fail");
+                            scope.runID = response.data.response.runid;
+                            scope.callback (scope.appID, action, response);
+                        };
+                        
+                        var closeModApp = function() {
+                            scope.modApp.deactivate();
+                            $timeout (function() {scope.modApp.destroy();}, 1000);
+                        };
+                        
+                        var closeModInfo = function() {
+                            scope.modInfo.deactivate();
+                            $timeout (function() {scope.modInfo.destroy();}, 1000);
+                        };
+                        
+                        var actionModal = function(action) {
+                            console.log ("Modal Action=%s", action);
+                            switch (action) {
+                                
+                                case "start":
+                                    if (scope.runstatus !== "stop") return;
+                                    AppCall.get ("afm-main", "start", {id: scope.appID, mode: scope.runmode}, function(response) {
+                                        if (response.status !== 200 || response.data.jtype !== "afb-reply") {
+                                            notifyError ("start", response);
+                                            return;
+                                        }
+                                        scope.runstatus="start";
+                                        notifySuccess (action, response);
+					if(response.data.response.uri)
+                                            scope.winapp= $window.open(response.data.response.uri.replace("%h", $location.host()));                                            
+                                    });
+                                    break;
+                                    
+                                case "stop":
+                                    if (scope.runstatus !== "start") return;
+                                    
+                                    AppCall.get ("afm-main", "terminate", {runid: scope.runID}, function(response) {
+                                        if (response.status !== 200 || response.data.jtype !== "afb-reply") {
+                                            notifyError ("stop", response);
+                                            return;
+                                        }
+                                        scope.runstatus="stop";
+                                        
+                                        // if a remote window app was open let's close it
+                                        if (scope.winapp) {
+                                           console.log ("Closing Application Window label=%s id=%s", scope.label, scope.appID);
+                                           scope.winapp.close();
+                                           scope.winapp=false;
+                                        }
+                                        notifySuccess (action, response);
+                                    });
+                                    break;
+                                        
+                                case "info":
+                                    AppCall.get ("afm-main", "detail", {id: scope.appID}, function(response) {
+                                        if (response.status !== 200 || response.data.jtype !== "afb-reply") {
+                                            notifyError ("detail", response);
+                                            return;
+                                        }
+                                                                               
+                                        // reference http://foundation.zurb.com/apps/docs/#!/angular-modules
+                                        var config = {
+                                            animationIn: 'slideInFromTop',
+                                            contentScope: {
+                                                close   : closeModInfo,
+                                                icon    : scope.icon,
+                                                label   : scope.appID,
+                                                detail  : response.data.response
+                                            }, template : tmplDetail
+                                        }; 
+                                        // Popup Modal to render application data
+                                        scope.modInfo = new ModalFactory(config);
+                                        scope.modInfo.activate ();
+
+                                    });
+                                    break;
+
+                                case "uninstall":
+                                    if (scope.runstatus !== "stop") return;
+                                    AppCall.get ("afm-main", "uninstall", {id: scope.appID}, function(response) {
+                                        if (response.status !== 200 || response.data.jtype !== "afb-reply") {
+                                            notifyError ("uninstall", response);
+                                            return;
+                                        }
+                                        
+                                        notifySuccess (action, response);
+                                    });
+                                    break;
+
+                                default:
+                                    console.log ("ActionModal unknown action=[%s]", action);
+                                    break;
+                            }
+                            
+                            closeModApp();
+                        };
+            
+                        // reference http://foundation.zurb.com/apps/docs/#!/angular-modules
+                        var config = {
+                            animationIn: 'slideInFromTop',
+                            contentScope: {
+                                action   : actionModal,
+                                runstatus: scope.runstatus,
+                                close    : closeModApp,
+                                icon     : scope.icon,
+                                label    : scope.label
+                            }, template  : tmplModal
+                        }; 
+                        // Popup Modal to render application data
+                        scope.modApp = new ModalFactory(config);
+                        scope.modApp.activate ();
+                    };
+
+                    // extract application information from AppID+Store
+                    if (attrs.handle && scope.store [attrs.handle].name) {
+                        scope.icon  = AppConfig.paths.icons + attrs.handle; //scope.store [attrs.handle].name.toLowerCase() + '-ico.png';
+                        scope.label = scope.store [attrs.handle].name;
+                        scope.appID= attrs.handle;
+                    } else {
+                         scope.icon  = AppConfig.paths.icons + 'w3c-ico.png';
+                         scope.label = attrs.handle;
+                    }
+                                
+                    // add label as class
+                    elem.addClass (scope.label.toLowerCase());
+                    
+                    // note: clicked in imported and when template is clicked
+                    // it will call clicked method passed in param.
+                }
+                
+                return {
+                    restrict: 'E',
+                    template: tmplAppli,
+                    link: mymethods,
+                    scope: {callback: '=', store: '='}
+                };
+            });
+})();
diff --git a/templates/html5/app/Frontend/widgets/ActionButtons/SubmitButton.js b/templates/html5/app/Frontend/widgets/ActionButtons/SubmitButton.js
new file mode 100644
index 0000000..323cd46
--- /dev/null
+++ b/templates/html5/app/Frontend/widgets/ActionButtons/SubmitButton.js
@@ -0,0 +1,52 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ * 
+ * Bugs: Input with Callback SHOULD BE get 'required' class
+ */
+
+(function () {
+    'use strict';
+
+    var tmpl = '<div  ng-click="clicked()">' +
+            '<i class="{{icon}}"></i>' +
+            '<span>{{label}}</span>' +
+            '</div>';
+
+    angular.module('SubmitButton', [])
+            .directive('submitButton', function () {
+
+                function mymethods(scope, elem, attrs) {
+
+                    // ajust icon or use default
+                    scope.icon = attrs.icon || 'fi-foot';
+                    scope.label = attrs.label || 'Next';
+                                
+                    // add label as class
+                    elem.addClass (scope.label.toLowerCase());
+                    
+                    // note: clicked in imported and when template is clicked
+                    // it will call clicked method passed in param.
+                }
+                
+                return {
+                    restrict: 'E',
+                    template: tmpl,
+                    link: mymethods,
+                    scope: {clicked : '='}
+                };
+            });
+})();
diff --git a/templates/html5/app/Frontend/widgets/Navigation/LinkButton.js b/templates/html5/app/Frontend/widgets/Navigation/LinkButton.js
new file mode 100644
index 0000000..3e83425
--- /dev/null
+++ b/templates/html5/app/Frontend/widgets/Navigation/LinkButton.js
@@ -0,0 +1,57 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ * 
+ * Bugs: Input with Callback SHOULD BE get 'required' class
+ */
+
+(function () {
+    'use strict';
+
+    var tmpl = '<span title="Goto: {{href}}" ng-click="clicked()">' +
+            '<i class="{{icon}}"></i>' +
+            '<span>{{label}}</span>' +
+            '</span>';
+
+
+    angular.module('LinkButton', [])
+            .directive('linkButton', function ($location) {
+                
+                function mymethods(scope, elem, attrs) {
+
+                    scope.clicked = function () {
+                        
+                        if (!attrs.query) $location.path(attrs.href);
+                        else $location.path(attrs.href).search(attrs.query);
+                    };
+
+                    // ajust icon or use default
+                    scope.icon = attrs.icon   || 'fi-link';
+                    scope.label = attrs.label || 'Jump';
+                    scope.href  = attrs.href  || '/home';
+                    
+                    // add label as class
+                    elem.addClass (scope.label.toLowerCase());
+                }
+
+                return {
+                    restrict: 'E',
+                    template: tmpl,
+                    link: mymethods,
+                    scope: {}
+                };
+            });
+})();
diff --git a/templates/html5/app/Frontend/widgets/Navigation/Navigation.scss b/templates/html5/app/Frontend/widgets/Navigation/Navigation.scss
new file mode 100644
index 0000000..2babf24
--- /dev/null
+++ b/templates/html5/app/Frontend/widgets/Navigation/Navigation.scss
@@ -0,0 +1,26 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+@import "app/ibz-mixins";
+
+
+link-button {@include ibz-button(#3366ff,1rem)};
+
+//pale blue for secondaty link
+link-button.secondary {@include ibz-button(#99b3ff,1rem)};
+
diff --git a/templates/html5/app/Frontend/widgets/Notifications/ModalNotification.js b/templates/html5/app/Frontend/widgets/Notifications/ModalNotification.js
new file mode 100644
index 0000000..37ba047
--- /dev/null
+++ b/templates/html5/app/Frontend/widgets/Notifications/ModalNotification.js
@@ -0,0 +1,85 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ * 
+ * Bugs: Input with Callback SHOULD BE get 'required' class
+ * 
+ * ref: https://developer.mozilla.org/en-US/docs/Web/Events/mouseover
+ * 
+ * usage: 
+ * 
+ * tipModal: listen event from elem.parent() to display tip-modal
+ *      <div class="xxxx">
+ *          <tip-modal tip=xxxx></tip-modal>
+ *          <input-text ....></input-text>
+ *      </div>
+ *      
+ * Note: use CSS.visibility to avoid display flickering at initial display.
+ */
+
+(function () {
+    'use strict';
+
+    var tmpl = '<div class="tip-modal-popup">' +
+            '<i class="{{icon}}"></i>' +
+            '<span>{{tip}}</span>' +
+            '</span></div>' ;
+
+    angular.module('ModalNotification', [])
+            .directive('tipModal', function ($timeout) {
+
+                function mymethods(scope, elem, attrs) {
+                    scope.parent = elem.parent();
+                    scope.modal    = elem.find("div");
+                    
+    
+                    // delay tip display to avoid blinking when moving mouse fast
+                    function display () {
+                        function action() {
+                             if (scope.show) scope.modal.css({opacity: 1, visibility:'visible'});  
+                        }
+                        scope.show = true;
+                        scope.timeout = $timeout(action, scope.delay);
+                    }
+                    
+                    function close () {
+                      scope.show = false;                     
+                      scope.modal.css({opacity: 0, visibility:'hidden'});
+                    }
+                    
+
+                    // ajust icon or use default
+                    scope.icon  = attrs.icon || 'fi-lightbulb';
+                    
+                    // Update Parent element to get mouse event
+                    scope.parent.addClass ('as-modal-tip');
+                    scope.parent.bind('click', close);
+                    scope.parent.bind('focus', display);
+                    scope.parent.bind('mouseover', display);
+                    scope.parent.bind('mouseleave', close);
+                    scope.parent.bind('blur', close);
+                    
+                    scope.delay = attrs.delay || 1000; // wait 1s before displaying tip
+                }
+
+                return {
+                    restrict: 'E',
+                    template: tmpl,
+                    link: mymethods,
+                    scope: {tip: "="} // tip may not be defined when widget is display
+                };
+            });
+})();
diff --git a/templates/html5/app/Frontend/widgets/Notifications/Notifications.scss b/templates/html5/app/Frontend/widgets/Notifications/Notifications.scss
new file mode 100644
index 0000000..fb740b7
--- /dev/null
+++ b/templates/html5/app/Frontend/widgets/Notifications/Notifications.scss
@@ -0,0 +1,63 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ * 
+ * Reference: http://www.greywyvern.com/?post=337
+ */
+
+@import "app/ibz-mixins";
+
+
+link-button {@include ibz-button(#3366ff,1rem)};
+
+// Modal should be relative and tip-modal-popup absolute
+tip-modal {
+    position:relative;
+}
+
+.tip-modal-popup {
+    //visibility: hidden;
+    width: 20rem;
+    position:absolute;
+    top:1em;
+    padding: 0.2em 0.6em;
+    border:1px solid #996633;
+    background-color:#e5ffff;
+    color:#000;
+    opacity:0;
+    transition:visibility .5s linear 1s,opacity 1s linear;
+    border-radius: 5px;
+    i {
+        margin: 0 .3rem 0 0;
+        display: inline;
+    }
+}
+
+token-refresh {
+    @include ibz-button(grey,1rem)
+    i {margin-left: .5rem;}
+    margin-right: 1rem;
+}
+
+token-refresh.online {
+    color: #0066cc;
+    i {color: lime;}    
+}
+
+token-refresh.offline {
+    color: #ff00ff;
+    i {color: red;}    
+}
diff --git a/templates/html5/app/Frontend/widgets/Notifications/TokenRefreshSvc.js b/templates/html5/app/Frontend/widgets/Notifications/TokenRefreshSvc.js
new file mode 100644
index 0000000..2c7c3da
--- /dev/null
+++ b/templates/html5/app/Frontend/widgets/Notifications/TokenRefreshSvc.js
@@ -0,0 +1,149 @@
+/*
+ alsa-gateway -- provide a REST/HTTP interface to ALSA-Mixer
+
+ Copyright (C) 2015, Fulup Ar Foll
+
+ This program is free software; you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation; either version 2 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with scope program; if not, write to the Free Software
+ Foundation, Inc., 675 Mass Ave, Cambridge, MA 02139, USA.
+
+ References:
+
+ */
+
+(function () {
+    'use strict';
+
+    var template =
+          '<div class="afb-monitor" ng-click="getping()">' +
+         '<span class="afb-refresh-token"  >afb://{{hostname}}:{{httpdport}}</span>' +
+         '<i class="{{icon}}"></i>' +
+         '</div>';
+
+
+// scope module is load statically before any route is cativated
+angular.module('TokenRefresh', ['AppConfig', 'ModalNotification'])
+
+    .directive ('tokenRefresh', function($log, $window, $timeout, $location, Notification, AppConfig, AppCall) {
+
+    function mymethods(scope, elem, attrs) {
+        scope.logged=undefined; // neither thu neither false
+        
+        $window.onbeforeunload = function () {
+            AppCall.get (scope.plugin, "logout", {/*query*/}, function () {    
+            $log.log("OPA exit");            
+            });
+        };
+                 
+        scope.online = function () {
+            elem.addClass    ("online");
+            elem.removeClass ("offline");
+            scope.logged=true;
+        };
+
+        scope.offline = function(){
+            elem.addClass    ("offline");
+            elem.removeClass ("online");
+            scope.logged=false;
+        };
+        
+        scope.onerror = function() {
+            if (scope.logged !== false)  {
+                Notification.warning ({message: "AppFramework Binder Lost", delay: 5000});
+                scope.offline();
+            }
+            scope.status = 0;
+        };
+        
+        scope.onsuccess = function(jresp, errcode) {
+            
+            if (errcode !== 200 || jresp.request.status !== "success") {
+                Notification.warning ({message: "auto-connect :" + jresp.request.info, delay: 10000});
+                scope.offline(); 
+                return false;
+            }
+            
+            if (scope.logged !== true)  {
+                Notification.success ({message: "AppFramework Binder Connected", delay: 3000});
+                scope.online();
+                if (scope.callback) scope.callback(jresp);
+            }
+            
+            scope.status = 1;            
+            return true;
+        };
+
+        // Check Binder status
+        scope.getping = function() {
+            
+            AppCall.get (scope.plugin, "ping", {/*query*/},function(jresp, errcode) {
+                if (errcode !== 200 || jresp.request.status !== "success") {
+                    Notification.warning ({message: jresp.request.info, delay: 5000});
+                    scope.offline(); 
+                    return;
+                }
+                // restart a new timer for next ping
+                $timeout (scope.getping, AppConfig.session.pingrate*1000);
+            }, scope.onerror);
+        };
+        
+        // Check Binder status
+        scope.refresh = function() {
+            
+            AppCall.get (scope.plugin, "refresh", {/*query*/}, function(jresp, errcode) {
+
+                scope.onsuccess (jresp, errcode);
+                
+                // restart a new timer for next refresh
+                $timeout (scope.refresh, AppConfig.session.timeout *250);
+            }, scope.onerror);            
+        };
+        
+        // Initial connection
+        scope.loggin = function() {            
+            AppCall.get (scope.plugin, "connect", {token: AppConfig.session.initial}, function(jresp, errcode) {
+                
+                if (!scope.onsuccess (jresp, errcode)) return;
+                
+                // Intial token was accepted let's start ping & refresh
+                $timeout (scope.getping, AppConfig.session.pingrate*1000);
+                $timeout (scope.refresh, AppConfig.session.timeout *250);
+ 
+            }, scope.onerror);
+        };
+
+
+        // Parse Widget Parameters
+        scope.plugin    = attrs.plugin || "auth";
+        scope.icon      = attrs.icon   || "fi-lightbulb";
+        scope.hostname  = $location.host();
+        scope.httpdport = $location.port();
+        scope.autolog   = JSON.parse(attrs.autolog || false);
+        
+        // autostart log if requested
+        if (scope.autolog) scope.loggin();
+        
+    }
+
+    return {
+        template: template,
+        scope: {
+            callback : "="
+        },
+        restrict: 'E',
+        link: mymethods
+    };
+});
+
+})();
+console.log ("Token Refresh Loaded");
diff --git a/templates/html5/app/Frontend/widgets/RangeSliders/RangeSliderMod.js b/templates/html5/app/Frontend/widgets/RangeSliders/RangeSliderMod.js
new file mode 100644
index 0000000..77f0fce
--- /dev/null
+++ b/templates/html5/app/Frontend/widgets/RangeSliders/RangeSliderMod.js
@@ -0,0 +1,631 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ * 
+ * Bugs: Input with Callback SHOULD BE get 'required' class
+ * 
+ * ref: https://developer.mozilla.org/en-US/docs/Web/Events/mouseover
+ * 
+ * usage: 
+Usage  <range-slider>
+---------------------
+   <range-slider
+      id="my-slider-name"                     // only use as an argument to callback
+      class="my-custom-class"                 // default class is ibz-range-slider
+      placeholder="Track Date Selection"      // place holder for date readonly input zone
+
+      <!-- Foundation classes -->
+      class="radius"                          // check Zurb foundation doc for further info.
+      class="ibz-handle-display"              // increase handle width to hold slider current value
+
+      <!-- Angular Scope Variables -->
+      callback="myCallBack"                    // $scope.myCallBack(sliderhandle) is called when ever slider handle blur
+      formatter="SliderFormatCB"               // $scope.myFormatter(value, sliderid) when exist is call when ever slider handle moves. Should return external form of slider value.
+      ng-model="xxxxxx"                        // xxx Must be defined, script will store a new RangerObject within provided ng-model variable.
+      start-at="ScopeVar"                      // Dynamic limitation when slider is constrains by an external componant [ex: check in/out]
+      stop-at="ScopeVar"                       // Idem but for end.
+
+      <!-- Angular Directive Attributes -->
+      not-less="integer"                       // Fixed starting value for slider [default 0]
+      not-more="integer"                       // Fixed end value for sliders [default 100]
+      by-step="+-integer"                      // If by-step is >0 then slider use it as step-value, when negative use it for decimal precision
+      display-target="handle"                  // display slider external formated value in the handle [requirer calss="ibz-handle-display"]
+      dual-handles='true'                      // add a second handle to slider for min/max range
+      initial='value|[start/stop]'             // slider initial value [dual-handles] may have initial values
+   /></range-slider>
+ */
+
+(function () {
+    'use strict';
+
+var RangeSlider = angular.module('RangeSlider',[]);
+
+function RangeSliderHandle (scope) {
+    var internals = [];
+    var externals = [];
+
+    this.getId = function() {
+        return scope.sliderid;
+    };
+
+    this.getCbHandle = function() {
+        return scope.cbhandle;
+    };
+
+    this.getView= function (handle) {
+        if (!handle) handle = 0;
+
+        // if value did not change return current external representation
+        if (scope.value[handle] === internals[handle]) return externals[handle];
+
+        // build external representation and save it for further requests
+        internals[handle] = scope.value[handle];
+        if (scope.formatter) externals[handle] = scope.formatter(scope.value[handle], scope.ctrlhandle);
+        else  externals[handle] = scope.value[handle];
+
+        return externals[handle];
+    };
+
+    this.updateClass = function (classe, status) {
+       scope.updateClass (classe, status);
+    };
+
+    this.forceRefresh = function (timer) {
+       scope.forceRefresh(timer);
+    };
+
+    this.getValue= function (handle) {
+        if (!handle) handle = 0;
+        return scope.value[handle];
+    };
+
+    this.getRelative= function (handle) {
+        if (!handle) handle = 0;
+        return scope.relative[handle];
+    };
+
+    this.setValue= function (value, handle) {
+        if (!handle) handle = 0;
+        scope.setValue (value, handle);
+    };
+
+    this.setDisable= function (flag) {
+        scope.setDisable(flag);
+    };
+}
+
+RangeSlider.directive('rangeSlider', function ($log, $document, $timeout) {
+
+    var template= '<div class="ibz-range-slider range-slider" title="{{title}}"data-slider>'+
+                  '<span class="range-slider-handle handle-min" ng-mousedown="handleCB($event,0)" ng-focus="focusCB(true)" ng-blur="focusCB(false)" role="slider" tabindex="0"></span>'+
+                  '<span class="handle-max" ng-mousedown="handleCB($event,1)" ng-focus="focusCB(true)" ng-blur="focusCB(false)" role="slider" tabindex="0"></span>'+
+                  '<span class="range-slider-active-segment"></span>'+
+                  '<span class="ibz-range-slider-start" ></span> '+
+                  '<span class="ibz-range-slider-stop"></span> '+
+                  '<input id={{sliderid}} type="hidden">'+
+                  '</div>';
+
+
+    function link (scope, element, attrs, model) {
+        // full initialisation of slider from a single object
+        scope.initWidget = function (initvalues) {
+
+            if (initvalues.byStep)  scope.byStep  = parseInt(initvalues.byStep);
+            if (initvalues.notMore) scope.notMore = parseInt(initvalues.notMore);
+            if (initvalues.notLess) scope.notLess = parseInt(initvalues.notLess);
+            if (initvalues.id)      scope.sliderid= initvalues.id;
+
+            // hugely but in some case DOM is not finish when we try to set values !!!
+            if (initvalues.value !== undefined)   {
+                scope.value = initvalues.value;
+                scope.forceRefresh (50); // wait 50ms for DOM to be ready
+            }
+        };
+
+        // this function recompute slide positioning
+        scope.forceRefresh = function (timer) {
+           var value = scope.value;
+           scope.value = [undefined,undefined];
+           $timeout (function() {
+               scope.setValue(value[0],0);
+               if (scope.dual)  scope.setValue(value[1],1);
+           }, timer);
+        };
+
+        // handler to change class from slider handle
+        scope.updateClass = function (classe, status) {
+
+            if (status) element.addClass (classe);
+            else  element.removeClass (classe);
+        };
+
+        scope.setDisable = function (disabled) {
+
+            if (disabled) {
+                element.addClass ("disable");
+                scope.handles[0].css ('visibility','hidden');
+                if (scope.dual) {
+                    scope.handles[1].css ('visibility','hidden');
+                }
+            } else {
+                element.removeClass ("disable");
+                scope.handles[0].css ('visibility','visible');
+                if (scope.dual) scope.handles[1].css ('visibility','visible');
+            }
+
+        };
+
+        scope.normalize = function (value) {
+            var result;
+            var range = scope.notMore - scope.notLess;
+            var point = value * range;
+
+            // if step is positive let's round step by step
+            if (scope.byStep >  0) {
+                var mod = (point - (point % scope.byStep)) / scope.byStep;
+                var rem = point % scope.byStep;
+
+                var round = (rem >= scope.byStep * 0.5 ? scope.byStep : 0);
+                result= (mod * scope.byStep + round) + scope.notLess;
+                //console.log ("range=%d value=%d point=%d mod=%d rem=%d round=%d result=%d", range, value, point, mod, rem, round, result)
+                return result;
+            }
+
+            // if step is negative return round to asked decimal
+            if (scope.byStep <  0) {
+                var power  =  Math.pow (10,(scope.byStep * -1));
+                result = scope.notLess + parseInt (point * power) / power;
+                return (result);
+            }
+
+            // if step is null return full value
+            return point;
+       };
+
+        // return current value
+        scope.getValue = function (offset, handle) {
+            if (scope.vertical) {
+                scope.relative[handle] = (offset - scope.bounds.handles[handle].getBoundingClientRect().height) / (scope.bounds.bar.getBoundingClientRect().height - scope.bounds.handles[handle].getBoundingClientRect().height);
+            } else {
+                scope.relative[handle] = offset /  (scope.bounds.bar.getBoundingClientRect().width - scope.bounds.handles[handle].getBoundingClientRect().width);
+            }
+
+            var newvalue = scope.normalize (scope.relative[handle]);
+
+
+            // if internal value change update or model
+            if (newvalue !== scope.value[handle]) {
+                if (newvalue < scope.startValue) newvalue=scope.startValue;
+                if (newvalue > scope.stopValue)  newvalue=scope.stopValue;
+
+
+                if (scope.formatter) {
+                    scope.viewValue = scope.formatter (newvalue, scope.ctrlhandle);
+                } else {
+                    scope.viewValue = newvalue;
+                }
+                if (scope.displays[handle]) {
+                    scope.displays[handle].html (scope.viewValue);
+                }
+
+                // update external representation of the model
+                scope.value[handle] = newvalue;
+                if (model) model.$setViewValue (scope.viewValue);
+                scope.$apply();
+                if (newvalue > scope.startValue && newvalue < scope.stopValue) scope.translate(offset, handle);
+            }
+        };
+
+
+        scope.setStart = function (value) {
+            var offset;
+            
+            if (value > scope.value[0]) {
+                if (!scope.dual) scope.setValue (value,0);
+                else scope.setValue (value,1);
+            }
+
+            if (scope.vertical) {
+                offset = scope.bounds.bar.getBoundingClientRect().height * (value - scope.notLess) / (scope.notMore - scope.notLess);
+                scope.start.css('height',offset + 'px');
+            } else {
+                offset = scope.bounds.bar.getBoundingClientRect().width * (value - scope.notLess) / (scope.notMore - scope.notLess);
+                scope.start.css('width',offset + 'px');
+            }
+
+            scope.startValue= value;
+        };
+
+        scope.setStop = function (value) {
+            var offset;
+            
+            if (value < scope.value[0]) {
+                if (!scope.dual) scope.setValue (value,0);
+                else scope.setValue (value,1);
+            }
+
+            if (scope.vertical) {
+                offset = scope.bounds.bar.getBoundingClientRect().height * (value - scope.notLess) / (scope.notMore - scope.notLess);
+                scope.start.css('height',offset + 'px');
+            } else {
+                offset = scope.bounds.bar.getBoundingClientRect().width * (value - scope.notLess) / (scope.notMore - scope.notLess);
+                scope.stop.css({'right': 0, 'width': (scope.bounds.bar.getBoundingClientRect().width  - offset) + 'px'});
+            }
+
+            scope.stopValue= value;
+        };
+
+        scope.translate = function (offset, handle) {
+            var start;
+            
+            if (scope.vertical) {
+                // take handle size in account to compute middle
+                var voffset = scope.bounds.bar.getBoundingClientRect().height - offset;
+
+                scope.handles[handle].css({
+                    '-webkit-transform': 'translateY(' + voffset + 'px)',
+                    '-moz-transform': 'translateY(' + voffset + 'px)',
+                    '-ms-transform': 'translateY(' + voffset + 'px)',
+                    '-o-transform': 'translateY(' + voffset + 'px)',
+                    'transform': 'translateY(' + voffset + 'px)'
+               });
+               if (!scope.dual) scope.slider.css('height', offset + 'px');
+               else if (scope.relative[1] && scope.relative[0]) {
+                   var height = (scope.relative[1] - scope.relative[0]) *  scope.bounds.bar.getBoundingClientRect().height;
+                   start  = (scope.relative[0] *  scope.bounds.bar.getBoundingClientRect().height);
+                   scope.slider.css ({'bottom': start+'px','height': height + 'px'});
+               }
+            } else {
+
+                scope.handles[handle].css({
+                    '-webkit-transform': 'translateX(' + offset + 'px)',
+                    '-moz-transform': 'translateX(' + offset + 'px)',
+                    '-ms-transform': 'translateX(' + offset + 'px)',
+                    '-o-transform': 'translateX(' + offset + 'px)',
+                    'transform': 'translateX(' + offset + 'px)'
+                });
+                if (!scope.dual) scope.slider.css('width',offset + 'px');
+                else if (scope.relative[1] && scope.relative[0]) {
+                    var width = (scope.relative[1] - scope.relative[0]) *  scope.bounds.bar.getBoundingClientRect().width;
+                    start = (scope.relative[0] *  scope.bounds.bar.getBoundingClientRect().width);
+                    scope.slider.css ({'left': start+'px','width': width + 'px'});
+                }
+            }
+        };
+
+        // position handle on the bar depending a given value
+        scope.setValue = function (value , handle) {
+            var offset;
+
+            // if value did not change ignore
+            if (value === scope.value[handle]) return;
+            if (value === undefined)   value=0;
+            if (value > scope.notMore) value=scope.notMore;
+            if (value < scope.notLess) value=scope.notLess;
+
+            if (scope.vertical) {
+                scope.relative[handle] = (value - scope.notLess) / (scope.notMore - scope.notLess);
+                if (handle === 0) offset = (scope.relative[handle] * scope.bounds.bar.getBoundingClientRect().height) + scope.bounds.handles[handle].getBoundingClientRect().height/2;
+                if (handle === 1) offset = scope.relative[handle] * scope.bounds.bar.getBoundingClientRect().height;
+
+            } else {
+                scope.relative[handle] = (value - scope.notLess) / (scope.notMore - scope.notLess);
+                offset = scope.relative[handle] *  (scope.bounds.bar.getBoundingClientRect().width - scope.bounds.handles[handle].getBoundingClientRect().width);
+            }
+
+            scope.translate (offset,handle);
+            scope.value[handle] = value;
+
+            if (scope.formatter) {
+                // when call through setValue we do not pass cbHandle
+                scope.viewValue = scope.formatter (value, undefined);
+            } else {
+                scope.viewValue = value;
+            }
+
+            if (model) model.$setViewValue( scope.viewValue);
+
+            if (scope.displays[handle]) {
+                scope.displays[handle].html (scope.viewValue);
+            }
+        };
+
+
+        // Minimal keystroke handling to close picker with ESC [scope.actif is current handle index]
+        scope.keydown=  function(e){
+
+            switch(e.keyCode){
+                case 39: // Right
+                case 38: // up
+                     if (scope.byStep > 0) scope.$apply(scope.setValue ((scope.value[scope.actif]+scope.byStep), scope.actif));
+                     if (scope.byStep < 0) scope.$apply(scope.setValue ((scope.value[scope.actif]+(1 / Math.pow(10, scope.byStep*-1))),scope.actif));
+                     if (scope.callback)  scope.callback (scope.value[scope.actif], scope.ctrlhandle);
+                     break;
+                case 37: // left
+                case 40: // down
+                    if (scope.byStep > 0) scope.$apply(scope.setValue ((scope.value[scope.actif] - scope.byStep), scope.actif));
+                    if (scope.byStep < 0) scope.$apply(scope.setValue ((scope.value[scope.actif] - (1 / Math.pow(10, scope.byStep*-1))),scope.actif));
+                    if (scope.callback)  scope.callback (scope.value[scope.actif], scope.ctrlhandle);
+                    break;
+                case 27: // esc
+                    scope.handles[scope.actif][0].blur();
+            }
+        };
+
+        scope.moveHandle = function (handle, clientX, clientY) {
+            var offset;
+            if (scope.vertical) {
+                offset = scope.bounds.bar.getBoundingClientRect().bottom - clientY;
+                if (offset > scope.bounds.bar.getBoundingClientRect().height) offset = scope.bounds.bar.getBoundingClientRect().height;
+                if (offset < scope.bounds.handles[handle].getBoundingClientRect().height) offset = scope.bounds.handles[handle].getBoundingClientRect().height;
+            } else {
+                offset = clientX - scope.bounds.bar.getBoundingClientRect().left;
+
+                if (offset < 0) offset = 0;
+                if ((clientX + scope.bounds.handles[handle].getBoundingClientRect().width) > scope.bounds.bar.getBoundingClientRect().right) {
+                    offset = scope.bounds.bar.getBoundingClientRect().width - scope.bounds.handles[handle].getBoundingClientRect().width;
+                }
+            }
+
+            scope.getValue  (offset, handle);
+
+            // prevent dual handle to cross
+            if (scope.dual && scope.value [0] > scope.value[1]) {
+                if (handle === 0) scope.setValue (scope.value[0] , 1);
+                else scope.setValue(scope.value[1],0);
+            }
+        };
+
+
+        scope.focusCB = function (inside) {
+            if (inside) {
+                $document.on('keydown',scope.keydown);
+            } else {
+                $document.unbind('keydown',scope.keydown);
+            }
+        };
+
+        // bar was touch let move handle to this point
+        scope.touchBarCB = function (event) {
+            var handle=0;
+            var relative;
+            var touches = event.changedTouches;
+            var oldvalue = scope.value[handle];
+
+            event.preventDefault();
+
+            // if we have two handles select closest one from touch point
+            if (scope.dual) {
+                if (scope.vertical) relative = (touches[0].pageY - scope.bounds.bar.getBoundingClientRect().bottom) / scope.bounds.bar.getBoundingClientRect().height;
+                else relative= (touches[0].pageX - scope.bounds.bar.getBoundingClientRect().left) / scope.bounds.bar.getBoundingClientRect().width;
+
+                var distance0 = Math.abs(relative - scope.relative[0]);
+                var distance1 = Math.abs(relative - scope.relative[1]);
+                if (distance1 < distance0) handle=1;
+            }
+
+            // move handle to new place
+            scope.moveHandle (handle,touches[0].pageX, touches[0].pageY);
+            if (scope.callback && oldvalue !== scope.value[handle]) scope.callback (scope.value[handle], scope.ctrlhandle);
+        };
+
+        // handle was touch and drag
+        scope.touchHandleCB = function (touchevt, handle) {
+            var oldvalue = scope.value[handle];
+
+            touchevt.preventDefault();
+            $document.on('touchmove',touchmove);
+            $document.on('touchend' ,touchend);
+            element.unbind('touchstart', scope.touchBarCB);
+
+            function touchmove(event) {
+                event.preventDefault();
+                var touches = event.changedTouches;
+                for (var idx = 0; idx < touches.length; idx++) {
+                    scope.moveHandle (handle,touches[idx].pageX, touches[idx].pageY);
+                }
+            }
+
+            function touchend(event) {
+               $document.unbind('touchmove',touchmove);
+               $document.unbind('touchend' ,touchend);
+               element.on('touchstart', scope.touchBarCB);
+
+                // if value change notify application callback
+                if (scope.callback && oldvalue !== scope.value[handle]) scope.callback (scope.value[handle], scope.ctrlhandle);
+            }
+        };
+
+        scope.handleCB = function (clickevent, handle) {
+
+            if (attrs.automatic) return;
+            
+            var oldvalue = scope.value[handle];
+            // register mouse event to track handle
+            clickevent.preventDefault();
+
+            $document.on('mousemove',mousemove);
+            $document.on('mouseup', mouseup);
+            scope.handles[handle][0].focus();
+            scope.actif=handle;
+
+            // slider handle is moving
+            function mousemove(event) {
+                scope.moveHandle (handle, event.clientX, event.clientY);
+            }
+
+            // mouse is up dans leave slider send resize events
+            function mouseup() {
+                $document.unbind('mousemove', mousemove);
+                $document.unbind('mouseup', mouseup);
+
+                // if value change notify application callback
+                if (scope.callback && oldvalue !== scope.value[handle]) scope.callback (scope.value[handle], scope.ctrlhandle);
+            }
+        };
+
+        // simulate jquery find by classes capabilities [warning only return 1st elements]
+        scope.find = function (select, elem) {
+            var domelem;
+
+            if (elem) domelem = elem[0].querySelector(select);
+            else domelem = element[0].querySelector(select);
+
+            var angelem = angular.element(domelem);
+            return (angelem);
+        };
+
+
+
+        scope.initialSettings = function (initial) {
+            var decimal_places_match_result;
+            scope.value=[];  // store low/height value when two handles
+            scope.relative=[];
+
+            if (scope.precision === null) {
+                decimal_places_match_result = ('' + scope.byStep).match(/\.([\d]*)/);
+                scope.precision = decimal_places_match_result && decimal_places_match_result[1] ? decimal_places_match_result[1].length : 0;
+            }
+
+            // position handle to initial value(s)
+            element.on('touchstart', scope.touchBarCB);
+            scope.handles[0].on('touchstart', function(evt){scope.touchHandleCB(evt,0);});
+
+            // this slider has two handles low/hight
+            if (scope.dual) {
+                scope.handles[1].addClass('range-slider-handle');
+                scope.handles[1].on('touchstart', function(evt){scope.touchHandleCB(evt,1);});
+                if (!scope.initvalues) scope.setValue (initial[1],1);
+            }
+
+            // if we have an initstate object apply it
+            if (scope.initvalues) scope.initWidget (scope.initvalues);
+            else   scope.setValue (initial[0],0);
+        };
+
+        scope.init = function () {
+            scope.sliderid   = attrs.id || "slider-" + parseInt (Math.random() * 1000);
+            scope.startValue = -Infinity;
+            scope.stopValue  = Infinity;
+            scope.byStep   = parseInt(attrs.byStep) || 1;
+            scope.vertical = attrs.vertical   || false;
+            scope.dual     = attrs.dualHandles|| false;
+            scope.trigger_input_change= false;
+            scope.notMore  = parseInt(attrs.notMore)   || 100;
+            scope.notLess  = parseInt(attrs.notLess)   || 0;
+
+            if (scope.vertical) element.addClass("vertical-range");
+
+            scope.handles= [scope.find('.handle-min'), scope.find('.handle-max')];
+            scope.bar    = element;
+            scope.slider = scope.find('.range-slider-active-segment');
+            scope.start  = scope.find('.ibz-range-slider-start');
+            scope.stop   = scope.find('.ibz-range-slider-stop');
+            scope.disable= attrs.disable || false;
+
+            scope.ctrlhandle = new RangeSliderHandle (scope);
+
+            // prepare DOM object pointer to compute size dynamically
+            scope.bounds = {
+                bar    : element[0],
+                handles: [scope.handles[0][0], scope.handles[1][0]]
+            };
+
+            if (attrs.disable === 'true') scope.setDisable(true);
+
+            if (attrs.displayTarget) {
+                switch (attrs.displayTarget) {
+                    case true :
+                    case 'handle' :
+                        scope.displays = scope.handles;
+                        scope.handles[0].addClass('ibz-range-slider-display');
+                        if (scope.dual) scope.handles[1].addClass('ibz-range-slider-display');
+                        break;
+                    default:
+                        scope.displays =  [$document.getElementById (attrs.displayTarget)];
+                }
+            } else scope.displays=[];
+
+            // extract initial values from attrs and parse into int
+            if (!attrs.initial) {
+                scope.initial  = [scope.ngModel, scope.ngModel]; // initialize to model values
+            } else {
+                var initial  = attrs.initial.split(',');
+                scope.initial = [
+                    initial[0] !== undefined ? parseInt (initial[0]) : scope.notLess,
+                    initial[1] !== undefined ? parseInt (initial[1]) : scope.notMore
+                ];
+            }
+
+            // Monitor any changes on start/stop dates.
+            scope.$watch('startAt', function() {
+                if (scope.value < scope.startAt ) {
+                    //scope.setValue (scope.startAt);
+                }
+                if (scope.startAt) scope.setStart (scope.startAt);
+            });
+
+            scope.$watch('stopAt' , function() {
+                if (scope.value > scope.stopAt) {
+                    //scope.setValue (scope.stopAt);
+                }
+                if (scope.stopAt) scope.setStop (scope.stopAt);
+            });
+
+            // finish widget initialisation
+            scope.initialSettings (scope.initial);
+
+        };
+
+        scope.init();
+        
+         // slider is ready provide control handle to application controller
+        scope.$watch ('inithook', function () {         // init Values may arrive late
+            if (scope.inithook) scope.inithook (scope.ctrlhandle);
+        });
+
+        scope.$watch ('initvalues', function () { 	// init Values may arrive late
+            if (scope.initvalues) scope.initWidget(scope.initvalues);
+        });
+
+        // two-way binding if model value changes
+        scope.$watch ('ngModel', function (newValue) {
+          scope.setValue(newValue, 0);
+        });
+    }
+
+return {
+    restrict: "E",    // restrict to <range-slider> HTML element name
+    scope: {
+        startAt  :'=',  // First acceptable date
+        stopAt   :'=',  // Last acceptable date
+        callback :'=',  // Callback to actif when a date is selected
+        formatter:'=',  // Callback for drag event call each time internal value changes
+        inithook :'=',  // Hook point to control slider from API
+        cbhandle :'=',  // Argument added to every callback
+        initvalues:'=',   // Initial values as a single object
+        ngModel: '='    // the model value
+    },
+    require: '?ngModel',
+    template: template, // html template is build from JS
+    replace: true,      // replace current directive with template while inheriting of class
+    link: link          // pickadate object's methods
+};
+});
+
+console.log ("RangeSlider Loaded");
+
+})();
+\ No newline at end of file
diff --git a/templates/html5/app/Frontend/widgets/RangeSliders/Rangeslider.scss b/templates/html5/app/Frontend/widgets/RangeSliders/Rangeslider.scss
new file mode 100644
index 0000000..6717d0e
--- /dev/null
+++ b/templates/html5/app/Frontend/widgets/RangeSliders/Rangeslider.scss
@@ -0,0 +1,67 @@
+/*
+ * ibz-Datepicker for Foundation
+ *
+ * Author: Fulup Ar Foll
+ * Date  : March-2015
+ * Object: SASS stylesheet, customized to Foundation
+ * References: https://css-tricks.com/stripes-css/
+ *
+ */
+@import "app/ibz-mixins";
+
+.range-slider-handle {
+  display: inline-block;
+  position: absolute;
+  z-index: 1;
+  top: -0.2rem;
+  width: 2rem;
+  height: 1.375rem;
+  border: 1px solid none;
+  cursor: pointer;
+  background: #008cba;
+}
+
+.range-slider.radius, .range-slider-handle {
+  background: #008cba;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+}
+
+.range-slider-active-segment {
+  display: inline-block;
+  top: 0.07rem;
+  position: absolute;
+  height: 0.80rem;
+  background: #e5e5e5;
+}
+
+.ibz-range-slider {
+   background-color: rgba(154, 205, 50, 0.6) !important;
+   height: 1rem;
+   position: relative;
+   
+  .range-slider-active-segment {
+    background-color: rgba(82, 168, 200, 0.6);
+  }
+  
+  &-display {
+    background-color: rgba(82, 168, 200, 0.6) !important;
+    width : 4rem !important;
+    padding: .25rem;
+    text-align:center
+   }
+
+   &-start,&-stop {
+   display: inline-block;
+   position: absolute;
+   padding-top: 2px;
+   height: 95%;
+   background: repeating-linear-gradient(
+    45deg,
+    #606dbc,
+    #606dbc 10px,
+    #465298 10px,
+    #465298 20px
+  );}
+
+}
diff --git a/templates/html5/app/bower.json b/templates/html5/app/bower.json
new file mode 100644
index 0000000..c78c624
--- /dev/null
+++ b/templates/html5/app/bower.json
@@ -0,0 +1,22 @@
+{
+  "name": "healthy-gulp-angular",
+  "version": "0.0.0",
+  "authors": "",
+  "private": true,
+  "dependencies": {
+    "angular": "~1.3.4",
+    "angular-cookies": "~1.3.4",
+    "foundation-apps": "~1.1.0",
+    "angular-ui-notification": "~0.0.14",
+    "foundation-icon-fonts": "*",
+    "jszip": "Stuk/jszip#~2.5.0"
+  },
+  "overrides": {
+    "foundation": {
+      "main": [
+        "dist/js/foundation-apps-templates.js",
+        "dist/js/foundation-apps.js"
+      ]
+    }
+  }
+}
diff --git a/templates/html5/app/etc/AppDefaults.js b/templates/html5/app/etc/AppDefaults.js
new file mode 100644
index 0000000..2f27eee
--- /dev/null
+++ b/templates/html5/app/etc/AppDefaults.js
@@ -0,0 +1,32 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+var SESSION_TIMEOUT= 3600000; // default is 1h loggin session
+
+// Default config will be superseaded by ProjectRoot/.config-l4a.js $HOME/.config-l4a.js /etc/default/config-l4a.js
+config = {
+        
+    APPNAME : 'xxxxxx-html5',// AppName is use as main Angular Module name
+    FRONTEND: "Frontend",    // HTML5 frontend  [no leading ./]
+    BACKEND : "Backend",     // NodeJS Rest API [no leading ./]
+    URLBASE : '/opa/',       // HTML basedir when running in production [should end with a /]
+    APIBASE : '/api/'        // Api url base dir [should end with a /]
+};
+
+module.exports = config;
+
diff --git a/templates/html5/app/etc/_Config.js b/templates/html5/app/etc/_Config.js
new file mode 100644
index 0000000..ce93d43
--- /dev/null
+++ b/templates/html5/app/etc/_Config.js
@@ -0,0 +1,44 @@
+/* 
+ * Copyright 2014 Fulup Ar Foll
+ *
+ * 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.
+ */
+
+var fs = require('fs');
+
+function Config () {
+   'use strict';
+   var values=[];
+   var extention='-l4a.js';
+   var conf;
+
+   // Configs file path last one supersead first one.
+   var files= [__dirname + "/AppDefaults.js", "/etc/default/noderc"+ extention, process.env.NODERC, process.env.HOME + "/.noderc"+ extention , __dirname +"/../../.noderc.js" ];
+
+   // Parse any existing files within config list & merge them
+   for (var idx in files) { 
+      if (files[idx]) {
+        //console.log ("files=", files[idx]);  
+        if (fs.existsSync (files[idx])) conf=require (files[idx]);
+        for (var i in conf) values[i] = conf[i];
+      }     
+   }
+   
+ // set path to search for node_module within parent directory
+ process.env.NODE_PATH= process.env.NODE_PATH + '../node_modules';
+   
+ // console.log ("values=", values);
+ return values;
+}
+
+module.exports = Config();
diff --git a/templates/html5/app/etc/_Trace.js b/templates/html5/app/etc/_Trace.js
new file mode 100644
index 0000000..79ef4f5
--- /dev/null
+++ b/templates/html5/app/etc/_Trace.js
@@ -0,0 +1,55 @@
+/* 
+ * Copyright 2014 Fulup Ar Foll
+ *
+ * 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.
+ */
+
+var util       = require("util");
+var path       = require("path");
+var config= require('./_Config');
+
+function TracePoint () {
+        var saved = Error.prepareStackTrace;                           // save default prepareStack function
+        Error.prepareStackTrace = function(_, stack){ return stack; }; // overload err stack handling
+        Error.captureStackTrace(this, arguments.callee);               // request a stack
+        this.trace = this.stack;                                       // effectively build trace
+        Error.prepareStackTrace = saved;                               // restore original nodejs function  
+}
+
+// ------- Public Methods --------------
+var dbgLevel = function(target, level, format) {  //+ arguments
+    // try to get debugLevel from calling object or global config
+    if (target && target.dbgLevel)  dbgLevel = target.dbgLevel;
+    else dbgLevel = config.DBG_LVL || 1;
+    
+    if (dbgLevel >= level ) {
+
+        var args = [].slice.call(arguments, 2); // copy argument in a real array leaving out level
+        var message = util.format.apply(null, args);
+        
+        var trace = new TracePoint().trace;
+        var info = {
+            fullpath : trace[1].getFileName(),
+            linenum  : trace[1].getLineNumber(),
+            basename : path.basename (trace[1].getFileName())
+        };
+        
+        if (dbgLevel >= 5) {
+            console.log("%s:%d", info.fullpath, info.linenum);
+            console.log("\t[%d] %j", dbgLevel, message);
+        }
+        else console.log("--%d-- [%s:%d] -- %j", dbgLevel, info.basename, info.linenum, message);
+    }
+};
+
+module.exports = dbgLevel;
diff --git a/templates/html5/app/gulpfile.js b/templates/html5/app/gulpfile.js
new file mode 100644
index 0000000..da2826d
--- /dev/null
+++ b/templates/html5/app/gulpfile.js
@@ -0,0 +1,438 @@
+// BUG Symlink not working
+
+var gulp = require('gulp');
+var debug = require('gulp-debug');
+var plugins = require('gulp-load-plugins')();
+var del = require('del');
+var es = require('event-stream');
+var bowerFiles = require('main-bower-files');
+var print = require('gulp-print');
+var Q = require('q');
+var imagemin = require('gulp-imagemin'), pngquant = require('imagemin-pngquant');
+var taskListing = require('gulp-task-listing');
+var symlink = require('gulp-sym');
+var rename = require("gulp-rename");
+var exec = require('child_process').exec
+
+// addon for Foundation6
+var router   = require('front-router');
+
+// == PATH STRINGS ========
+var appdir  = "./";   // Warning to not forget trailling '/'
+config=require (appdir + "etc/_Config"); // upload user local preferences if any
+
+var frontend= appdir + config.FRONTEND;
+
+var paths = {
+    application : frontend,
+    scripts     : frontend+'/**/*.js',
+    appStyles   : [frontend+'/**/*.scss', '!'+frontend+'/styles/*/*-conf.scss'],
+    globalStyles: [frontend+'/styles/**/*.scss'],
+    images      : [frontend+'/**/*.png',frontend+'/**/*.jpg',frontend+'/**/*.jpeg',frontend+'/**/*.svg',frontend+'/**/*.ttf'],
+    index       : frontend+'/index.html',
+    partials    : [frontend + '/**/*.html', '!' + frontend +'/index.html'],
+    distDev     : './dist.dev',
+    distProd    : './dist.prod',
+    sass:  [frontend+'/styles', 'bower_components/foundation-apps/scss','bower_components/foundation-icon-fonts'],
+    fonts: ['bower_components/**/*.woff'],
+    favicon: frontend+'/favicon.ico',
+	wgtconfig: 'config.xml'
+};
+
+paths['distAppDev']  = paths.distDev + config.URLBASE;
+paths['distAppProd'] = paths.distProd + config.URLBASE;
+
+// Run node in debug mode in developpement mode ?
+var nodeopts = config.DEBUG !== undefined ? '--debug='+config.DEBUG : ''; 
+
+// == PIPE SEGMENTS ========
+var pipes = {};
+
+pipes.orderedVendorScripts = function() {
+    return plugins.order(['jquery.js', 'angular.js']);
+};
+
+pipes.orderedAppScripts = function() {
+    return plugins.angularFilesort();
+};
+
+pipes.minifiedFileName = function() {
+    return plugins.rename(function (path) {
+        path.extname = '.min' + path.extname;
+    });
+};
+
+pipes.validatedAppScripts = function() {
+    return gulp.src(paths.scripts)
+        .pipe(plugins.replace('@@APPNAME@@', config.APPNAME))
+        .pipe(plugins.jshint())
+        .pipe(plugins.jshint.reporter('jshint-stylish'));
+};
+
+pipes.builtAppScriptsDev = function() {
+    return pipes.validatedAppScripts()
+        .pipe(gulp.dest(paths.distAppDev));
+};
+
+pipes.builtAppScriptsProd = function() {
+    var scriptedPartials = pipes.scriptedPartials();
+    var validatedAppScripts = pipes.validatedAppScripts();
+    return es.merge(scriptedPartials, validatedAppScripts)
+        .pipe(plugins.ngAnnotate())
+        .pipe(pipes.orderedAppScripts())
+        .pipe(plugins.sourcemaps.init())
+        .pipe(plugins.concat(config.APPNAME+'.min.js'))
+        .pipe(plugins.uglify({compress: {drop_console: true}}))
+        .pipe(plugins.sourcemaps.write())
+        .pipe(gulp.dest(paths.distAppProd));
+};
+
+pipes.builtVendorScriptsDev = function() {
+    return gulp.src(bowerFiles())
+        .pipe(gulp.dest( paths.distDev +'/bower_components'));
+};
+
+pipes.builtVendorScriptsProd = function() {
+    return gulp.src(bowerFiles('**/*.js'))
+        .pipe(pipes.orderedVendorScripts())
+        .pipe(plugins.concat('vendor.min.js'))
+        .pipe(plugins.uglify())
+        .pipe(gulp.dest(paths.distProd+ '/bower_components'));
+};
+
+
+pipes.validatedPartials = function() {
+    return gulp.src(paths.partials)
+        .pipe(plugins.htmlhint({'doctype-first': false}))
+        .pipe(router({path: paths.application+'/etc/routes.js', root: paths.application}))
+        .pipe(plugins.htmlhint.reporter());
+};
+
+pipes.builtPartialsDev = function() {
+    return pipes.validatedPartials()
+        .pipe(gulp.dest(paths.distAppDev));
+};
+
+pipes.scriptedPartials = function() {
+    return pipes.validatedPartials()
+        .pipe(plugins.htmlhint.failReporter())
+        .pipe(plugins.htmlmin({collapseWhitespace: true, removeComments: true}))
+        .pipe(plugins.ngHtml2js({
+            moduleName: config.APPNAME,
+            template: "(function() {"
+               + "angular.module('<%= moduleName %>').run(['$templateCache', function($templateCache) {"
+               + "$templateCache.put('<%= template.url %>',\n    '<%= template.escapedContent %>');"
+               + "}]);\n"
+               + "})();\n"
+        }));    
+};
+
+pipes.builtAppStylesDev = function() {
+    return gulp.src(paths.appStyles)
+        .pipe(plugins.sass({includePaths: paths.sass}))
+        .pipe(gulp.dest(paths.distAppDev + '/styles'));
+};
+
+pipes.builtglobalStylesDev = function() {
+    return gulp.src(paths.globalStyles)
+        .pipe(plugins.sass({includePaths: paths.sass}))
+        .pipe(gulp.dest(paths.distDev  + '/global_styles'));
+};
+
+pipes.builtAppStylesProd = function() {
+    return gulp.src(paths.appStyles)
+        .pipe(plugins.sourcemaps.init())
+        .pipe(plugins.sass({includePaths: frontend + '/styles'}))
+        // .pipe(debug({title: '***** appStyle:'}))
+        .pipe(plugins.cleanCss())
+        .pipe(plugins.concat(config.APPNAME+'.css'))
+        .pipe(plugins.sourcemaps.write())
+        .pipe(pipes.minifiedFileName())
+        .pipe(gulp.dest(paths.distAppProd));
+};
+
+pipes.builtglobalStylesProd = function() {
+    return gulp.src(paths.globalStyles)
+        .pipe(plugins.sourcemaps.init())
+        .pipe(plugins.sass({includePaths: paths.sass}))
+        .pipe(plugins.cleanCss())
+        .pipe(plugins.sourcemaps.write())
+        .pipe(pipes.minifiedFileName())
+        .pipe(rename(function (path) {path.dirname="";return path;}))
+        .pipe(gulp.dest(paths.distProd + '/global_styles'));
+};
+
+pipes.processedFontsDev = function() {
+    return gulp.src(paths.fonts)
+        .pipe(rename(function (path) {path.dirname="";return path;}))
+        .pipe(gulp.dest(paths.distDev+'/bower_components'));
+};
+
+pipes.processedFontsProd = function() {
+    return gulp.src(paths.fonts)
+        .pipe(rename(function (path) {path.dirname="";return path;}))
+        .pipe(gulp.dest(paths.distProd+'/bower_components'));
+};
+
+
+pipes.processedImagesDev = function() {
+    return gulp.src(paths.images)
+        .pipe(gulp.dest(paths.distAppDev));
+};
+
+pipes.processedFaviconDev = function() {
+    return gulp.src(paths.favicon)
+        .pipe(gulp.dest(paths.distDev));
+};
+
+pipes.processedImagesProd = function() {
+    return gulp.src(paths.images)
+       .pipe(imagemin({
+            progressive: true,
+            svgoPlugins: [{removeViewBox: false}],
+            use: [pngquant()]
+        }))
+        .pipe(gulp.dest(paths.distAppProd));
+};
+
+pipes.processedFaviconProd = function() {
+    return gulp.src(paths.favicon)
+        .pipe(gulp.dest(paths.distProd));
+};
+
+// Create an Symlink when config.URLBASE exist
+pipes.createDevSymLink = function() {
+    return gulp.src(paths.distDev).pipe(symlink(paths.distDev+config.URLBASE, {force: true}));
+};
+
+pipes.createProdSymLink = function() {
+    return gulp.src(paths.distProd).pipe(symlink(paths.distDev+config.URLBASE,{force: true}));
+};
+
+pipes.validatedIndex = function() {
+    return gulp.src(paths.index)       
+        .pipe(plugins.replace('@@APPNAME@@', config.APPNAME))
+        .pipe(plugins.replace('@@URLBASE@@', config.URLBASE))
+        .pipe(plugins.htmlhint())
+        .pipe(plugins.htmlhint.reporter());
+};
+
+pipes.builtIndexDev = function() {
+
+    var orderedVendorScripts = pipes.builtVendorScriptsDev()
+        .pipe(pipes.orderedVendorScripts());
+
+    var orderedAppScripts = pipes.builtAppScriptsDev()
+        .pipe(pipes.orderedAppScripts());
+
+    var appStyles    = pipes.builtAppStylesDev();
+    var globalStyles = pipes.builtglobalStylesDev();
+
+    return pipes.validatedIndex()
+         // Vendor and Global should have absolute path to rootdir application one are relative to BaseURL
+        .pipe(plugins.inject(orderedVendorScripts, {relative: false, ignorePath: "/dist.dev", name: 'bower'}))
+        .pipe(plugins.inject(globalStyles, {relative: false, ignorePath: "/dist.dev", name:'vendor'}))
+        .pipe(gulp.dest(paths.distAppDev)) // write first to get relative path for inject
+        .pipe(plugins.inject(orderedAppScripts, {relative: true}))
+        .pipe(plugins.inject(appStyles, {relative: true, name: 'appli'}))
+        .pipe(gulp.dest(paths.distAppDev));
+};
+
+pipes.builtIndexProd = function() {
+
+    var vendorScripts= pipes.builtVendorScriptsProd();
+    var appScripts   = pipes.builtAppScriptsProd();
+    var appStyles    = pipes.builtAppStylesProd();
+    var globalStyles = pipes.builtglobalStylesProd();
+
+    return pipes.validatedIndex()
+         // Vendor and Global should have absolute path to rootdir application one are relative to BaseURL
+        .pipe(plugins.inject(vendorScripts, {relative: false, ignorePath: "/dist.prod", name: 'bower'}))
+        .pipe(plugins.inject(globalStyles, {relative: false, ignorePath: "/dist.prod", name:'vendor'}))
+        .pipe(gulp.dest(paths.distAppProd)) // write first to get relative path for inject
+        .pipe(plugins.inject(appScripts, {relative: true}))
+        .pipe(plugins.inject(appStyles, {relative: true, name:'appli'}))
+        .pipe(plugins.htmlmin({collapseWhitespace: true, removeComments: true}))
+        .pipe(gulp.dest(paths.distAppProd));
+};
+
+pipes.builtAppDev = function() {
+    return es.merge(pipes.builtIndexDev(), pipes.builtPartialsDev(), pipes.processedFaviconDev(), pipes.processedImagesDev(), pipes.processedFontsDev() );
+};
+
+pipes.builtAppProd = function() {
+    return es.merge(pipes.builtIndexProd(), pipes.processedFaviconProd(), pipes.processedImagesProd(), pipes.processedFontsProd());
+};
+
+pipes.widgetConfig = function(type) {
+	var dst=paths["dist"+type];
+	var content="."+config.URLBASE+"/index.html";
+	content=content.replace(/\/+/g,"/"); 
+	return gulp.src(paths.wgtconfig+".in")
+        .pipe(plugins.replace('@@APPNAME@@', config.APPNAME))
+        .pipe(plugins.replace('@@CONTENT@@', content))
+        .pipe(plugins.rename("config.xml"))
+		.pipe(gulp.dest(dst))
+};
+
+pipes.widgetPack = function(type,cb) {
+	var dst=paths["dist"+type];
+	var wgtfile=config.APPNAME+"_"+type+".wgt"
+
+	exec(
+		"wgtpkg-pack -f -o "+wgtfile+" "+dst,
+		function(err,stdout,stderr) {
+			console.log(stdout);
+			console.log(stderr);
+			cb(err);
+	});
+};
+
+// == TASKS ========
+
+// Add a task to render the output 
+gulp.task('help', taskListing.withFilters(/-/));
+   
+// clean, build of production environement
+gulp.task('build', ['clean-build-app-prod']);
+
+// removes all compiled dev files
+gulp.task('clean-dev', function() {
+    var deferred = Q.defer();
+    del(paths.distDev, function() {
+        deferred.resolve();
+    });
+    return deferred.promise;
+});
+
+// removes all compiled production files
+gulp.task('clean-prod', function() {
+    var deferred = Q.defer();
+    del(paths.distProd, function() {
+        deferred.resolve();
+    });
+    return deferred.promise;
+});
+
+// checks html source files for syntax errors
+gulp.task('validate-partials', pipes.validatedPartials);
+
+// checks index.html for syntax errors
+gulp.task('validate-index', pipes.validatedIndex);
+
+// moves html source files into the dev environment
+gulp.task('build-partials-dev', pipes.builtPartialsDev);
+
+// converts partials to javascript using html2js
+gulp.task('convert-partials-to-js', pipes.scriptedPartials);
+
+// runs jshint on the app scripts
+gulp.task('validate-app-scripts', pipes.validatedAppScripts);
+
+// moves app scripts into the dev environment
+gulp.task('build-app-scripts-dev', pipes.builtAppScriptsDev);
+
+// concatenates, uglifies, and moves app scripts and partials into the prod environment
+gulp.task('build-app-scripts-prod', pipes.builtAppScriptsProd);
+
+// compiles app sass and moves to the dev environment
+gulp.task('build-app-styles-dev', pipes.builtAppStylesDev);
+
+// compiles and minifies app sass to css and moves to the prod environment
+gulp.task('build-app-styles-prod', pipes.builtAppStylesProd);
+
+// moves vendor scripts into the dev environment
+gulp.task('build-vendor-scripts-dev', pipes.builtVendorScriptsDev);
+
+// concatenates, uglifies, and moves vendor scripts into the prod environment
+gulp.task('build-vendor-scripts-prod', pipes.builtVendorScriptsProd);
+
+// validates and injects sources into index.html and moves it to the dev environment
+gulp.task('build-index-dev', pipes.builtIndexDev);
+
+// validates and injects sources into index.html, minifies and moves it to the dev environment
+gulp.task('build-index-prod', pipes.builtIndexProd);
+
+// builds a complete dev environment
+gulp.task('build-app-dev', pipes.builtAppDev);
+
+// builds a complete prod environment
+gulp.task('build-app-prod', pipes.builtAppProd);
+
+// cleans and builds a complete dev environment
+gulp.task('clean-build-app-dev', ['clean-dev'], pipes.builtAppDev);
+
+// cleans and builds a complete prod environment
+gulp.task('clean-build-app-prod', ['clean-prod'], pipes.builtAppProd);
+
+// clean, build, and watch live changes to the dev environment
+gulp.task('watch-dev', ['clean-build-app-dev'], function() {
+
+    // watch app scripts
+    gulp.watch(paths.scripts, function() {
+        return pipes.builtAppScriptsDev()
+            .pipe(plugins.livereload());
+    });
+
+    // watch html partials
+    gulp.watch(paths.partials, function() {
+        return pipes.builtPartialsDev()
+            .pipe(plugins.livereload());
+    });
+    
+    // watch Images
+    gulp.watch(paths.images, function() {
+        return pipes.processedImagesDev()
+            .pipe(plugins.livereload());
+    });
+
+    // watch styles
+    gulp.watch(paths.appStyles, function() {
+        return pipes.builtAppStylesDev()
+            .pipe(plugins.livereload());
+    });
+
+});
+
+// clean, build, and watch live changes to the prod environment
+gulp.task('watch-prod', ['clean-build-app-prod'], function() {
+
+    // watch index
+    gulp.watch(paths.index, function() {
+        return pipes.builtIndexProd()
+            .pipe(plugins.livereload());
+    });
+
+    // watch app scripts
+    gulp.watch(paths.scripts, function() {
+        return pipes.builtAppScriptsProd()
+            .pipe(plugins.livereload());
+    });
+
+    // watch hhtml partials
+    gulp.watch(paths.partials, function() {
+        return pipes.builtAppScriptsProd()
+            .pipe(plugins.livereload());
+    });
+    
+    // watch Images
+    gulp.watch(paths.images, function() {
+        return pipes.processedImagesProd()
+            .pipe(plugins.livereload());
+    });
+
+    // watch styles
+    gulp.watch(paths.appStyles, function() {
+        return pipes.builtAppStylesProd()
+            .pipe(plugins.livereload());
+    });
+    
+});
+
+gulp.task('widget-config-dev',  ['build-app-dev'],  function() { return pipes.widgetConfig("Dev"); });
+gulp.task('widget-config-prod', ['build-app-prod'], function() { return pipes.widgetConfig("Prod"); });
+gulp.task('widget-dev',  ['widget-config-dev'],  function(cb) { return pipes.widgetPack("Dev",cb); });
+gulp.task('widget-prod', ['widget-config-prod'], function(cb) { return pipes.widgetPack("Prod",cb); });
+
+// default task builds for prod
+gulp.task('default', ['widget-prod']);
diff --git a/templates/html5/app/package.json b/templates/html5/app/package.json
new file mode 100644
index 0000000..3b51d33
--- /dev/null
+++ b/templates/html5/app/package.json
@@ -0,0 +1,61 @@
+{
+  "name": "html5-example",
+  "private": true,
+  "version": "0.0.1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/iotbzh/healthy-gulp-angular-foundation6"
+  },
+  "scripts": {
+    "postinstall": "bower install",
+    "build": "./node_modules/.bin/gulp clean-build-app-dev",
+    "start": "node node_modules/.bin/gulp watch-dev"
+  },
+  "devDependencies": {
+    "body-parser": "^1.5.2",
+    "bower": "^1.3.1",
+    "cookie-parser": "^1.4.0",
+    "del": "^1.1.1",
+    "event-stream": "^3.2.2",
+    "express": "^4.7.2",
+    "express-session": "^1.12.1",
+    "front-router": "^1.0.0",
+    "gulp": "^3.9.0",
+    "gulp-angular-filesort": "^1.0.4",
+    "gulp-debug": "^2.1.2",
+    "gulp-concat": "^2.4.3",
+    "gulp-htmlhint": "0.0.9",
+    "gulp-htmlmin": "^1.0.0",
+    "gulp-imagemin": "*",
+    "gulp-inject": "^1.1.1",
+    "gulp-jshint": "^1.9.2",
+    "gulp-livereload": "^3.7.0",
+    "gulp-load-plugins": "^0.8.0",
+    "gulp-clean-css": "^2.0.11",
+    "gulp-ng-annotate": "^1.1.0",
+    "gulp-ng-html2js": "^0.2.0",
+    "gulp-nodemon": "^2.0.0",
+    "gulp-order": "^1.1.1",
+    "gulp-print": "^1.1.0",
+    "gulp-rename": "^1.2.0",
+    "gulp-replace": "^0.5.4",
+    "gulp-sass": "^2.0.3",
+    "gulp-sourcemaps": "^1.3.0",
+    "gulp-task-listing": "^1.0.1",
+    "gulp-uglify": "^1.2.0",
+    "imagemin-pngquant": "*",
+    "jshint-stylish": "^1.0.0",
+    "karma": "^0.10",
+    "karma-junit-reporter": "^0.2.2",
+    "main-bower-files": "^2.5.0",
+    "method-override": "^2.1.2",
+    "protractor": "^1.1.1",
+    "q": "^1.1.2",
+    "shelljs": "^0.2.6",
+    "traceback": "^0.3.1",
+    "gulp-sym": "0.0.14"
+  },
+  "dependencies": {
+    "multer": "^1.1.0"
+  }
+}
diff --git a/templates/html5/etc/config.cmake b/templates/html5/etc/config.cmake
new file mode 100644
index 0000000..1a99bc6
--- /dev/null
+++ b/templates/html5/etc/config.cmake
@@ -0,0 +1,85 @@
+###########################################################################
+# Copyright 2015, 2016, 2017 IoT.bzh
+#
+# author: Fulup Ar Foll <fulup@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.
+###########################################################################
+
+# Project Info
+# ------------------
+set(NAME HTML5-example)
+set(VERSION "0.0")
+set(PROJECT_PRETTY_NAME "HTML5 Example")
+set(PROJECT_DESCRIPTION "HTML5 AGL application example")
+set(PROJECT_URL "https://gerrit.automotivelinux.org/gerrit/apps/app-templates")
+set(PROJECT_ICON "icon.png")
+
+# Compilation Mode (DEBUG, RELEASE)
+# ----------------------------------
+set(CMAKE_BUILD_TYPE "DEBUG")
+
+# Compiler selection if needed. Overload the detected compiler.
+# -----------------------------------------------
+#set(CMAKE_C_COMPILER "gcc")
+#set(CMAKE_CXX_COMPILER "g++")
+
+# PKG_CONFIG required packages
+# -----------------------------
+set (PKG_REQUIRED_LIST 
+	json-c
+	afb-daemon
+)
+
+# Static constante definition
+# -----------------------------
+add_compile_options()
+
+# LANG Specific compile flags set for all build types
+set(CMAKE_C_FLAGS "")
+set(CMAKE_CXX_FLAGS "")
+
+# Print a helper message when every thing is finished
+# ----------------------------------------------------
+#set(CLOSING_MESSAGE "")
+
+
+# (BUG!!!) as PKG_CONFIG_PATH does not work [should be an env variable]
+# ---------------------------------------------------------------------
+set(CMAKE_INSTALL_PREFIX ${HOME}/opt)
+set(CMAKE_PREFIX_PATH ${CMAKE_INSTALL_PREFIX}/lib64/pkgconfig ${CMAKE_INSTALL_PREFIX}/lib/pkgconfig)
+set(LD_LIBRARY_PATH ${CMAKE_INSTALL_PREFIX}/lib64 ${CMAKE_INSTALL_PREFIX}/lib)
+
+# Optional dependencies order
+# ---------------------------
+#set(EXTRA_DEPENDENCIES_ORDER)
+
+# Optional Extra global include path
+# -----------------------------------
+#set(EXTRA_INCLUDE_DIRS)
+
+# Optional extra libraries
+# -------------------------
+#set(EXTRA_LINK_LIBRARIES)
+
+# Optional force binding installation
+# ------------------------------------
+set(BINDINGS_INSTALL_PREFIX /opt )
+
+# Optional force widget prefix generation
+# ---------------------------------------
+# set(WIDGET_PREFIX DestinationPath)
+
+# Optional force binding Linking flag
+# ------------------------------------
+# set(BINDINGS_LINK_FLAG LinkOptions )
diff --git a/templates/html5/etc/export.map b/templates/html5/etc/export.map
new file mode 100644
index 0000000..ee2f413
--- /dev/null
+++ b/templates/html5/etc/export.map
@@ -0,0 +1 @@
+{ global: afbBindingV*; local: *; };
diff --git a/templates/html5/etc/macros.cmake b/templates/html5/etc/macros.cmake
new file mode 100644
index 0000000..6a389de
--- /dev/null
+++ b/templates/html5/etc/macros.cmake
@@ -0,0 +1,252 @@
+###########################################################################
+# Copyright 2015, 2016, 2017 IoT.bzh
+#
+# author: Fulup Ar Foll <fulup@iot.bzh>
+# contrib: Romain Forlot <romain.forlot@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.
+###########################################################################
+
+
+#--------------------------------------------------------------------------
+#  WARNING: 
+#     Do not change this cmake template
+#     Customise your preferences in "./etc/config.cmake"
+#--------------------------------------------------------------------------
+
+
+# Generic useful macro
+# -----------------------
+macro(PROJECT_TARGET_ADD TARGET_NAME)
+	set(PROJECT_TARGETS ${PROJECT_TARGETS} ${TARGET_NAME} CACHE INTERNAL PROJECT_TARGETS)
+	set(TARGET_NAME ${TARGET_NAME})
+endmacro(PROJECT_TARGET_ADD)
+
+macro(defstr name value)
+	add_definitions(-D${name}=${value})
+endmacro(defstr)
+
+# Dumb macro to add each directory under a path. Make sure we grab all header files!
+macro(fill_include_dir path)
+	file(GLOB_RECURSE dirlist LIST_DIRECTORIES true "${path}/*")
+	foreach(filename ${dirlist})
+		if(IS_DIRECTORY ${filename})
+			include_directories(${filename})
+		endif(IS_DIRECTORY ${filename})
+	endforeach()
+endmacro(fill_include_dir)
+
+# Helper function to retrieve source files from a library repo.
+function(find_source_files path)
+	file(GLOB_RECURSE cfiles "${path}/*.[c]")
+	file(GLOB_RECURSE cppfiles "${path}/*.cpp")
+	foreach(filename ${cfiles})
+		if(NOT ${filename} MATCHES ".*([Tt]est|[Ee]xample|[Ss]ample).*")
+			string(APPEND sources "${filename};")
+		endif(NOT ${filename} MATCHES ".*([Tt]est|[Ee]xample|[Ss]ample).*")
+	endforeach()
+	foreach(filename ${cppfiles})
+		if(NOT ${filename} MATCHES ".*([Tt]est|[Ee]xample|[Ss]ample).*")
+			string(APPEND sources "${filename};")
+		endif(NOT ${filename} MATCHES ".*([Tt]est|[Ee]xample|[Ss]ample).*")
+	endforeach()
+	set(sources_files ${sources} PARENT_SCOPE)
+endfunction(find_source_files)
+
+# WGT packaging
+macro(populate_widget)
+	# Declaration of a custom command that will populate widget tree with the target
+	set(POPULE_WIDGET_TARGET "populate_${TARGET_NAME}")
+
+	get_target_property(T ${TARGET_NAME} LABELS)
+	get_target_property(OUT ${TARGET_NAME} OUTPUT_NAME)
+
+	if(${T} STREQUAL "BINDING")
+		add_custom_command(OUTPUT ${WIDGET_LIBDIR}/${TARGET_NAME}.so
+			DEPENDS ${TARGET_NAME}
+			COMMAND mkdir -p ${WIDGET_LIBDIR}
+			COMMAND cp ${OUT}.so ${WIDGET_LIBDIR}
+		)
+		add_custom_target(${POPULE_WIDGET_TARGET} ALL DEPENDS ${WIDGET_LIBDIR}/${TARGET_NAME}.so)
+	elseif(${T} STREQUAL "EXECUTABLE")
+		add_custom_command(OUTPUT ${WIDGET_BINDIR}/${TARGET_NAME}
+			DEPENDS ${TARGET_NAME}
+			COMMAND mkdir -p ${WIDGET_BINDIR}
+			COMMAND cp ${OUT} ${WIDGET_BINDIR}
+		)
+		add_custom_target(${POPULE_WIDGET_TARGET} ALL DEPENDS ${WIDGET_BINDIR}/${TARGET_NAME})
+	elseif(${T} STREQUAL "HTDOCS")
+		add_custom_command(OUTPUT ${WIDGET_HTTPDIR}
+			DEPENDS ${TARGET_NAME}
+			COMMAND cp -r ${OUT} ${WIDGET_HTTPDIR}
+			)
+			add_custom_target(${POPULE_WIDGET_TARGET} ALL DEPENDS ${WIDGET_HTTPDIR})
+	elseif(${T} STREQUAL "DATA")
+		add_custom_command(OUTPUT ${WIDGET_DATADIR}
+			DEPENDS ${TARGET_NAME}
+			COMMAND cp -r ${OUT} ${WIDGET_DATADIR}
+			)
+			add_custom_target(${POPULE_WIDGET_TARGET} ALL DEPENDS ${WIDGET_HTTPDIR})
+	endif(${T} STREQUAL "BINDING")
+	PROJECT_TARGET_ADD(${POPULE_WIDGET_TARGET})
+endmacro(populate_widget)
+
+macro(build_widget)
+	if("${PROJECT_TARGETS}" MATCHES "populate_")
+		if(NOT EXISTS ${WIDGET_DIR}/config.xml.in OR NOT EXISTS ${WIDGET_DIR}/${PROJECT_ICON}.in)
+			configure_file(${PROJECT_WGT_DIR}/config.xml.in ${WIDGET_DIR}/config.xml)
+			file(COPY ${PROJECT_WGT_DIR}/${PROJECT_ICON}.in DESTINATION ${WIDGET_DIR}/${PROJECT_ICON})
+		endif(NOT EXISTS ${WIDGET_DIR}/config.xml.in OR NOT EXISTS ${WIDGET_DIR}/${PROJECT_ICON}.in)
+
+		file(GLOB PROJECT_CONF_FILES "${PROJECT_WGT_DIR}/etc/*")
+		if(${PROJECT_CONF_FILES})
+			file(COPY "${PROJECT_WGT_DIR}/etc/*" DESTINATION ${WIDGET_ETCDIR}/)
+		endif(${PROJECT_CONF_FILES})
+
+		add_custom_command(OUTPUT ${PROJECT_NAME}.wgt
+		DEPENDS ${PROJECT_TARGETS}
+		COMMAND wgtpkg-pack -f -o ${PROJECT_NAME}.wgt ${WIDGET_DIR}
+		)
+		add_custom_target(widget DEPENDS ${PROJECT_NAME}.wgt)
+		set(ADDITIONAL_MAKE_CLEAN_FILES, "${PROJECT_NAME}.wgt")
+	else()
+		MESSAGE(FATAL_ERROR "Widget tree empty, please populate it by calling  populate_widget() macro with target you want to include into it.")
+	endif("${PROJECT_TARGETS}" MATCHES "populate_")
+endmacro(build_widget)
+
+macro(search_targets)
+	file(GLOB filelist "*")
+	foreach(filename ${filelist})
+	if(EXISTS "${filename}/CMakeLists.txt")
+		add_subdirectory(${filename})
+	endif(EXISTS "${filename}/CMakeLists.txt")
+	endforeach()
+endmacro()
+
+set(CMAKE_BUILD_TYPE Debug CACHE STRING "the type of build")
+set(CMAKE_POSITION_INDEPENDENT_CODE ON)
+set(CMP0048 1)
+
+# Include project configuration
+# ------------------------------
+project(${NAME} VERSION ${VERSION})
+set(PROJECT_WGT_DIR "packaging/wgt" CACHE PATH "Subpath to the widget directory")
+set(PROJECT_LIBDIR "libs" CACHE PATH "Subpath to libraries")
+set(PROJECT_RESOURCES "data" CACHE PATH "Subpath to data")
+
+INCLUDE(FindPkgConfig)
+INCLUDE(CheckIncludeFiles)
+INCLUDE(CheckLibraryExists)
+INCLUDE(GNUInstallDirs)
+
+# Default compilation options
+############################################################################
+link_libraries(-Wl,--as-needed -Wl,--gc-sections)
+add_compile_options(-Wall -Wextra -Wconversion)
+add_compile_options(-Wno-unused-parameter) # frankly not using a parameter does it care?
+add_compile_options(-Wno-sign-compare -Wno-sign-conversion)
+add_compile_options(-Werror=maybe-uninitialized)
+add_compile_options(-Werror=implicit-function-declaration)
+add_compile_options(-ffunction-sections -fdata-sections)
+add_compile_options(-fPIC)
+add_compile_options(-g)
+
+set(CMAKE_C_FLAGS_PROFILING   "-g -O2 -pg -Wp,-U_FORTIFY_SOURCE" CACHE STRING "Flags for profiling")
+set(CMAKE_C_FLAGS_DEBUG       "-g -O2 -ggdb -Wp,-U_FORTIFY_SOURCE" CACHE STRING "Flags for debugging")
+set(CMAKE_C_FLAGS_RELEASE     "-O2" CACHE STRING "Flags for releasing")
+set(CMAKE_C_FLAGS_CCOV        "-g -O2 --coverage" CACHE STRING "Flags for coverage test")
+
+set(CMAKE_CXX_FLAGS_PROFILING    "-g -O0 -pg -Wp,-U_FORTIFY_SOURCE")
+set(CMAKE_CXX_FLAGS_DEBUG        "-g -O0 -ggdb -Wp,-U_FORTIFY_SOURCE")
+set(CMAKE_CXX_FLAGS_RELEASE      "-g -O2")
+set(CMAKE_CXX_FLAGS_CCOV "-g -O2 --coverage")
+
+set(CMAKE_INSTALL_PREFIX      "${CMAKE_SOURCE_DIR}/Install" CACHE PATH "The path where to install")
+
+# (BUG!!!) as PKG_CONFIG_PATH does not work [should be en env variable]
+set(PKG_CONFIG_USE_CMAKE_PREFIX_PATH ON CACHE BOOLEAN "Flag for using prefix path")
+
+# Loop on required package and add options
+foreach (PKG_CONFIG ${PKG_REQUIRED_LIST})
+	PKG_CHECK_MODULES(${PKG_CONFIG} REQUIRED ${PKG_CONFIG})
+
+	INCLUDE_DIRECTORIES(${${PKG_CONFIG}_INCLUDE_DIRS})
+	list (APPEND link_libraries ${${PKG_CONFIG}_LIBRARIES})
+	add_compile_options (${${PKG_CONFIG}_CFLAGS})
+endforeach(PKG_CONFIG)
+
+# Optional LibEfence Malloc debug library
+IF(CMAKE_BUILD_TYPE MATCHES DEBUG)
+CHECK_LIBRARY_EXISTS(efence malloc "" HAVE_LIBEFENCE)
+IF(HAVE_LIBEFENCE)
+	MESSAGE(STATUS "Linking with ElectricFence for debugging purposes...")
+	SET(libefence_LIBRARIES "-lefence")
+	list (APPEND link_libraries ${libefence_LIBRARIES})
+ENDIF(HAVE_LIBEFENCE)
+ENDIF(CMAKE_BUILD_TYPE MATCHES DEBUG)
+
+# set default include directories
+INCLUDE_DIRECTORIES(${EXTRA_INCLUDE_DIRS})
+
+# If no install dir try to guess some smart default
+if(BINDINGS_INSTALL_PREFIX)
+	set(BINDINGS_INSTALL_DIR ${BINDINGS_INSTALL_PREFIX}/${PROJECT_NAME})
+else()
+	set(BINDINGS_INSTALL_DIR ${CMAKE_CURRENT_BINARY_DIR}/${PROJECT_NAME})
+endif()
+
+# Define a default package directory
+if(WIDGET_PREFIX)
+	set(WIDGET_DIR ${WIDGET_PREFIX}/package)
+else()
+	set(WIDGET_DIR ${CMAKE_CURRENT_BINARY_DIR}/package)
+endif()
+
+# and their subsequent subdir
+set(WIDGET_BINDIR ${WIDGET_DIR}/bin)
+set(WIDGET_ETCDIR ${WIDGET_DIR}/etc)
+set(WIDGET_LIBDIR ${WIDGET_DIR}/lib)
+set(WIDGET_HTTPDIR ${WIDGET_DIR}/htdocs)
+set(WIDGET_DATADIR ${WIDGET_DIR}/data)
+
+# Default Linkflag
+if(NOT BINDINGS_LINK_FLAG)
+	set(BINDINGS_LINK_FLAG "-Wl,--version-script=${CMAKE_SOURCE_DIR}/etc/export.map")
+endif()
+
+# Add a dummy target to enable global dependency order
+# -----------------------------------------------------
+if(EXTRA_DEPENDENCIES_ORDER)
+	set(DEPENDENCIES_TARGET ${PROJECT_NAME}_extra_dependencies)
+	add_custom_target(${DEPENDENCIES_TARGET} ALL
+		DEPENDS ${EXTRA_DEPENDENCY_ORDER} 
+	)
+endif()
+
+# Cmake does not maintain targets list before 3.7
+# -------------------------------------------------
+if(${CMAKE_VERSION} VERSION_LESS 3.7)
+	set(GLOBAL_TARGET_LIST ${PROJECT_TARGETS})
+else()
+	get_property(GLOBAL_TARGET_LIST GLOBAL PROPERTY GlobalTargetList)
+endif()
+
+# Print developer helper message when everything is done
+# -------------------------------------------------------
+if(CLOSING_MESSAGE AND GLOBAL_TARGET_LIST)
+	add_custom_target(${PROJECT_NAME}_done ALL
+		DEPENDS ${DEPENDENCIES_TARGET} ${GLOBAL_TARGET_LIST}
+		COMMAND ${CMAKE_COMMAND} -E cmake_echo_color --cyan "++ ${CLOSING_MESSAGE}"
+	)
+endif()
+
diff --git a/templates/html5/packaging/wgt/config.xml.in b/templates/html5/packaging/wgt/config.xml.in
new file mode 100644
index 0000000..99c0168
--- /dev/null
+++ b/templates/html5/packaging/wgt/config.xml.in
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<widget xmlns="http://www.w3.org/ns/widgets" id="@PROJECT_NAME@" version="@PROJECT_VERSION@">
+  <name>@PROJECT_NAME@</name>
+  <icon src="icon.png"/>
+  <content src="htdocs/index.html" type="application/vnd.agl.html.hybrid"/>
+  <description>@PROJECT_DESCRIPTION@</description>
+  <author>Romain Forlot &lt;romain.forlot@iot.bzh&gt;</author>
+  <license>APL 2.0</license>
+</widget>
+
+
diff --git a/templates/html5/packaging/wgt/icon.png.in b/templates/html5/packaging/wgt/icon.png.in
new file mode 100644
index 0000000..a3573ef
--- /dev/null
+++ b/templates/html5/packaging/wgt/icon.png.in
diff --git a/templates/hybrid-html5/.gitignore b/templates/hybrid-html5/.gitignore
new file mode 100644
index 0000000..18fb1f8
--- /dev/null
+++ b/templates/hybrid-html5/.gitignore
@@ -0,0 +1,10 @@
+bower_components/
+node_modules/
+dist.*/
+*.DS_Store
+nbproject/private/
+.noderc*
+*.wgt
+config.xml
+*.so
+build
diff --git a/templates/hybrid-html5/AGLbuild b/templates/hybrid-html5/AGLbuild
new file mode 100755
index 0000000..ccbc28b
--- /dev/null
+++ b/templates/hybrid-html5/AGLbuild
@@ -0,0 +1,41 @@
+#!/usr/bin/make -f
+# Copyright (C) 2015, 2016 "IoT.bzh"
+# Author "Romain Forlot" <romain.forlot@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.
+
+BUILD_DIR   := build
+PACKAGING_DIR := packaging/wgt
+
+VPATH = etc:$(PACKAGING_DIR):$(PACKAGING_DIR)/etc:$(BUILD_DIR)
+
+.PHONY: all clean mrproper package
+
+all: build
+
+clean:
+	@([ -d ${BUILD_DIR} ] && make -C ${BUILD_DIR} clean) || echo Nothing to clean
+
+mrproper:
+	rm -rf ${BUILD_DIR}
+
+build:  ${BUILD_DIR}/Makefile
+	cmake --build ${BUILD_DIR} --target all
+
+package: config.xml.in icon.png.in build | $(PKG_FILELIST)
+	mkdir -p ${BUILD_DIR}/$@/{bin,etc,lib,htdocs,data}
+	cmake --build ${BUILD_DIR} --target widget
+
+${BUILD_DIR}/Makefile:
+	@[ -d ${BUILD_DIR} ] || mkdir -p ${BUILD_DIR}
+	@[ -f ${BUILD_DIR}/Makefile ] || (cd ${BUILD_DIR} && cmake ${CMAKE_OPTS} ..)
+\ No newline at end of file
diff --git a/templates/hybrid-html5/CMakeLists.txt b/templates/hybrid-html5/CMakeLists.txt
new file mode 100644
index 0000000..1e44569
--- /dev/null
+++ b/templates/hybrid-html5/CMakeLists.txt
@@ -0,0 +1,27 @@
+###########################################################################
+# Copyright 2015, 2016, 2017 IoT.bzh
+#
+# author: Romain Forlot <romain.forlot@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.
+###########################################################################
+
+CMAKE_MINIMUM_REQUIRED(VERSION 3.3)
+
+include(${CMAKE_CURRENT_SOURCE_DIR}/etc/config.cmake)
+include(${CMAKE_CURRENT_SOURCE_DIR}/etc/macros.cmake)
+
+# Add subdir targets
+search_targets()
+
+build_widget()
diff --git a/templates/hybrid-html5/README.md b/templates/hybrid-html5/README.md
new file mode 100644
index 0000000..f9119a6
--- /dev/null
+++ b/templates/hybrid-html5/README.md
@@ -0,0 +1,57 @@
+# Template Hybrid HTML5 Application for Application Framework Binder
+
+## Setup
+
+Install HTML5 development toolchain on your host
+
+```
+$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
+$ sudo apt-get install nodejs
+$ sudo npm install --global gulp
+
+```
+
+Then install NodeJS dependencies 
+
+```
+$ cd html5     # or the project directory
+$ npm install
+```
+
+## Overload ./app/etc/AppDefaults.js with '.noderc.js'
+
+```
+    var config= {
+        APPNAME : 'xxxxxx-hybrid-html5',   // AppName is use as main Angular Module name
+        FRONTEND: "Frontend",    // HTML5 frontend  [no leading ./]
+        BACKEND : "Backend",     // NodeJS Rest API [no leading ./]
+        URLBASE : '/opa/',       // HTML basedir when running in production [should end with a /]
+        APIBASE : '/api/',       // Api url base dir [should end with a /]
+    };
+    module.exports = config;
+```
+
+WARNING: in current development version Frontend/services/AppConfig.js is not updated automatically
+you should manually assert that backend config is in sync with frontend config.
+
+## Build widget
+
+```
+$ mkdir build && cd build
+$ cmake ..
+$ make
+```
+
+This should give a .wgt file ready to be deployed on the target.
+
+## Deploy application package
+
+Run:
+
+```
+$ scp *.wgt root@$BOARDIP:~/
+$ ssh root@$BOARDIP
+# afm-util install xxxxxx-hybrid-html5.wgt
+# afm-util start xxxxxx-hybrid-html5@0.1
+```
+
diff --git a/templates/hybrid-html5/app/CMakeLists.txt b/templates/hybrid-html5/app/CMakeLists.txt
new file mode 100644
index 0000000..a862b3c
--- /dev/null
+++ b/templates/hybrid-html5/app/CMakeLists.txt
@@ -0,0 +1,38 @@
+###########################################################################
+# Copyright 2015, 2016, 2017 IoT.bzh
+#
+# author: Romain Forlot <romain.forlot@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.
+###########################################################################
+
+# Add target to project dependency list
+PROJECT_TARGET_ADD(hybrid-html5-example)
+
+	# Define project Targets
+	add_custom_command(OUTPUT dist.prod
+	DEPENDS ${TARGET_NAME}
+	WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
+	COMMAND npm install
+	COMMAND gulp widget-config-prod
+	COMMAND cp -r dist.prod ${CMAKE_CURRENT_BINARY_DIR})
+
+	add_custom_target(${TARGET_NAME} ALL DEPENDS dist.prod)
+
+	# Binder exposes a unique public entry point
+	SET_TARGET_PROPERTIES(${TARGET_NAME} PROPERTIES
+		PREFIX ""
+		LABELS "HTDOCS"
+		OUTPUT_NAME dist.prod)
+
+populate_widget()
diff --git a/templates/hybrid-html5/app/Frontend/app.js b/templates/hybrid-html5/app/Frontend/app.js
new file mode 100644
index 0000000..976959b
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/app.js
@@ -0,0 +1,55 @@
+(function() {
+  'use strict';
+  
+  function  ParseQueryString () {
+      var qd = {};
+      location.search.substr(1).split("&").forEach(function(item) {
+          var k = item.split("=")[0];
+          var v = decodeURIComponent(item.split("=")[1]); 
+          if (k in qd) qd[k].push(v); else qd[k] = [v];
+      });
+      return qd;
+  }
+
+  angular.module('@@APPNAME@@', [ // Warning: Appname should fit with gulpfile.js & index.html
+    'ui.router',
+    'ngAnimate',
+
+    //foundation
+    'foundation',
+    'foundation.dynamicRouting',
+    'foundation.dynamicRouting.animations',
+    
+    // external components
+    'ui-notification',
+    
+    // Application Components
+    'AppConfig',
+    'JQueryEmu',
+    'SampleHomeModule',
+    'LinkButton',
+    'TokenRefresh',
+    'RangeSlider',
+    'ModalNotification'
+  ])
+    .value ('urlquery', ParseQueryString())
+    .config(config)
+    .run(run)
+  ;
+
+  config.$inject = ['$urlRouterProvider', '$locationProvider'];
+  
+  function config($urlProvider, $locationProvider, AppConfig) {
+    $urlProvider.otherwise('/sample-home');
+
+    // https://docs.angularjs.org/error/$location/nobase
+    $locationProvider.html5Mode(true).hashPrefix('!');
+    
+  }
+
+  function run() {
+    FastClick.attach(document.body);
+  }
+
+console.log ("opa=@@APPNAME@@ Loaded");
+})();
diff --git a/templates/hybrid-html5/app/Frontend/etc/AppConfig.js b/templates/hybrid-html5/app/Frontend/etc/AppConfig.js
new file mode 100644
index 0000000..382c0a3
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/etc/AppConfig.js
@@ -0,0 +1,65 @@
+(function () {
+    'use strict';
+
+    // _all modules only reference dependencies
+    angular.module('AppConfig', [])
+
+            // Factory is a singleton and share its context within all instances.
+            .factory('AppConfig', function (urlquery) {
+
+                var myConfig = {
+                    paths: { // Warning paths should end with /
+                        image : 'images/',
+                        avatar: 'images/avatars/'
+                    },
+                                        
+                    session: { // Those data are updated by session service
+                       initial : urlquery.token || '123456789',  // typical dev initial token
+                       timeout : 3600,         // timeout is updated client sessin context creation
+                       pingrate: 30,           // Ping rate to check if server is still alive
+                       uuid    : '',           // uuid map with cookie or long term session access key
+                       token   : ''            // will be returned from authentication    
+                    }
+                };
+
+                return myConfig;
+            })
+            
+            // Factory is a singleton and share its context within all instances.
+            .factory('AppCall', function ($http, AppConfig, $log) {
+                
+                var myCalls = {
+                    get : function(plugin, action, query, cbresponse, cberror) {                                                
+                        
+                        var onerror = function(response) {
+                            if (cberror) cberror(response.data, response.status, response.config);
+                            else cbresponse(response.data, response.status, response.config);
+                        };
+                        
+                        var onsuccess =function(response) {
+                            if (!response.data || !response.data.request) {
+                                onerror (response);
+                                return;
+                            }                            
+                        
+                            var request=response.data.request;
+                            
+                            // if token was updated keep it within application cache
+                            if (request.token) AppConfig.session.token = request.token;
+                            if (request.uuid)  AppConfig.session.uuid  = request.uuid;
+                            if (request.timeout) AppConfig.session.timeout = request.timeout;
+                        
+                            cbresponse(response.data, response.status, response.config);
+                        };
+                        
+                        
+                        if (!query.token) query.token = AppConfig.session.token; // add token to provided query
+                        if (!query.reqid) query.reqid = action; // use action as default requestID
+                        var handle= $http.get('/api/' + plugin + '/' + action , {params: query}).then(onsuccess, onerror);
+                        
+                    }
+                };
+                return myCalls;
+            });
+
+})();
+\ No newline at end of file
diff --git a/templates/hybrid-html5/app/Frontend/etc/routes.js b/templates/hybrid-html5/app/Frontend/etc/routes.js
new file mode 100644
index 0000000..0df3030
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/etc/routes.js
@@ -0,0 +1 @@
+var foundationRoutes = [{"name":"SampleHome","url":"/sample-home","controller":"SampleHomeController as ctrl","animationIn":"slideInRight","path":"pages/SampleHome/SampleHome.html"}]; 
diff --git a/templates/hybrid-html5/app/Frontend/favicon.ico b/templates/hybrid-html5/app/Frontend/favicon.ico
new file mode 100644
index 0000000..eeb7ab7
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/favicon.ico
diff --git a/templates/hybrid-html5/app/Frontend/images/avatars/istoobig.jpg b/templates/hybrid-html5/app/Frontend/images/avatars/istoobig.jpg
new file mode 100644
index 0000000..da0f255
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/images/avatars/istoobig.jpg
diff --git a/templates/hybrid-html5/app/Frontend/images/avatars/istoobig.png b/templates/hybrid-html5/app/Frontend/images/avatars/istoobig.png
new file mode 100644
index 0000000..5614073
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/images/avatars/istoobig.png
diff --git a/templates/hybrid-html5/app/Frontend/images/avatars/tux-admin.png b/templates/hybrid-html5/app/Frontend/images/avatars/tux-admin.png
new file mode 100644
index 0000000..ee40d2a
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/images/avatars/tux-admin.png
diff --git a/templates/hybrid-html5/app/Frontend/images/avatars/tux-bzh.png b/templates/hybrid-html5/app/Frontend/images/avatars/tux-bzh.png
new file mode 100644
index 0000000..16e001b
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/images/avatars/tux-bzh.png
diff --git a/templates/hybrid-html5/app/Frontend/images/avatars/tux-visitor.png b/templates/hybrid-html5/app/Frontend/images/avatars/tux-visitor.png
new file mode 100644
index 0000000..bd491b0
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/images/avatars/tux-visitor.png
diff --git a/templates/hybrid-html5/app/Frontend/images/logo/logo_iot_bzh.svg b/templates/hybrid-html5/app/Frontend/images/logo/logo_iot_bzh.svg
new file mode 100644
index 0000000..6e60c95
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/images/logo/logo_iot_bzh.svg
@@ -0,0 +1,139 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   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"
+   width="597.39423"
+   height="162.54224"
+   id="svg4035"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="New document 5">
+  <defs
+     id="defs4037">
+    <filter
+       color-interpolation-filters="sRGB"
+       id="filter4000"
+       inkscape:label="Drop Shadow">
+      <feFlood
+         id="feFlood4002"
+         flood-opacity="0.475"
+         flood-color="rgb(0,0,0)"
+         result="flood" />
+      <feComposite
+         id="feComposite4004"
+         in2="SourceGraphic"
+         in="flood"
+         operator="in"
+         result="composite1" />
+      <feGaussianBlur
+         id="feGaussianBlur4006"
+         stdDeviation="5"
+         result="blur" />
+      <feOffset
+         id="feOffset4008"
+         dx="8"
+         dy="8"
+         result="offset" />
+      <feComposite
+         id="feComposite4010"
+         in2="offset"
+         in="SourceGraphic"
+         operator="over"
+         result="composite2" />
+    </filter>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="339.36637"
+     inkscape:cy="3.4393101"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1108"
+     inkscape:window-height="862"
+     inkscape:window-x="321"
+     inkscape:window-y="159"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata4040">
+    <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>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-49.874326,-433.94821)">
+    <g
+       id="g3091"
+       transform="translate(62.857151,24.927697)"
+       inkscape:export-filename="/home/sdx/Pictures/Logo/logo_iot_bzh_100dpi.png"
+       inkscape:export-xdpi="100.22011"
+       inkscape:export-ydpi="100.22011"
+       style="display:inline;filter:url(#filter4000)">
+      <text
+         sodipodi:linespacing="125%"
+         id="text3557-5-3-7-0-7-3"
+         y="519.50671"
+         x="27.886671"
+         style="font-size:97.09867096px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;display:inline;font-family:Sans"
+         xml:space="preserve"><tspan
+           style="font-size:97.09867096px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:FreeEuro;-inkscape-font-specification:FreeEuro Bold"
+           y="519.50671"
+           x="27.886671"
+           id="tspan3559-5-4-1-5-0-6"
+           sodipodi:role="line">IOT</tspan></text>
+      <path
+         inkscape:connector-curvature="0"
+         d="m 296.73007,473.23356 c 28.21686,16.29102 28.75566,58.73779 0.99693,78.53831 -7.67688,5.47598 -8.77935,4.91028 -1.99529,-1.0238 17.47377,-15.28453 17.98492,-42.17775 1.08522,-57.09786 l -3.91266,-3.45435 0.72312,-3.71053 c 0.39771,-2.04076 0.5997,-5.73115 0.44885,-8.20083 -0.33876,-5.54623 0.15803,-6.49185 2.65383,-5.05094 z m -64.76568,11.40332 c 7.06047,-7.74198 18.64659,-14.16089 29.04027,-16.08874 l 6.87489,-1.27521 0.87404,2.89709 c 0.4807,1.59343 0.67439,5.2245 0.43037,8.06906 l -0.44364,5.17195 -6.13887,1.6918 c -10.91241,3.00731 -20.4022,10.85909 -25.4533,21.05979 l -2.41633,4.87984 -2.74281,-0.41238 c -5.14252,-0.77316 -12.72985,-3.97645 -12.79123,-5.40033 -0.092,-2.13451 8.34659,-15.74625 12.76661,-20.59287 z m 33.20546,36.39493 c -28.21687,16.29101 -65.24624,-4.46574 -68.51461,-38.40577 -0.9039,-9.38637 0.13723,-10.0583 1.88428,-1.21608 4.49989,22.77499 27.53453,36.66428 48.90556,29.48876 l 4.94788,-1.66128 2.85184,2.48149 c 1.56852,1.36481 4.66349,3.38493 6.87772,4.48914 4.97257,2.47973 5.54308,3.38282 3.04733,4.82374 z m 22.50729,-61.79039 c 3.17451,9.98553 2.94038,23.22889 -0.58688,33.19399 l -2.33309,6.59143 -2.94597,-0.69161 c -1.6203,-0.38041 -4.86173,-2.02821 -7.2032,-3.6618 l -4.25721,-2.97018 1.60429,-6.16234 c 2.85178,-10.95404 0.79685,-23.09833 -5.51167,-32.57307 l -3.01788,-4.53253 1.72854,-2.16916 c 3.24083,-4.06698 9.80863,-9.03614 11.07242,-8.37738 1.89457,0.98756 9.46336,15.1015 11.45065,21.35265 z m -48.80223,10.31437 c 0,-32.58201 36.49058,-54.27201 67.51771,-40.1325 8.58077,3.9104 8.6421,5.148 0.11108,2.23988 -21.97368,-7.49048 -45.51946,5.51348 -49.99082,27.6091 l -1.03521,5.11561 -3.57498,1.22902 c -1.96621,0.67596 -5.26316,2.34622 -7.32655,3.71171 -4.63379,3.06649 -5.70115,3.10904 -5.70115,0.22718 z m 42.25842,50.3871 c -10.23499,-2.24356 -21.58699,-9.06801 -28.45341,-17.10525 l -4.5418,-5.31622 2.07194,-2.20549 c 1.13957,-1.21302 4.18733,-3.19628 6.77282,-4.40726 l 4.70085,-2.20176 4.53458,4.47053 c 8.06061,7.94674 19.60535,12.23927 30.96496,11.51329 l 5.43422,-0.34731 1.01427,2.58154 c 1.90169,4.84014 2.92124,13.01261 1.71883,13.77769 -1.80254,1.14695 -17.80995,0.64475 -24.21726,-0.75976 z"
+         style="fill:#5a2ca0;display:inline"
+         id="path3415-4-2-2-5-0-3-7-4-4-1-5" />
+      <text
+         sodipodi:linespacing="125%"
+         id="text3557-5-3-7-46-7-3-7"
+         y="519.50671"
+         x="317.95816"
+         style="font-size:97.09867096px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;display:inline;font-family:Sans"
+         xml:space="preserve"><tspan
+           style="font-size:97.09867096px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:FreeEuro;-inkscape-font-specification:FreeEuro Bold"
+           y="519.50671"
+           x="317.95816"
+           id="tspan3559-5-4-1-90-0-2-9"
+           sodipodi:role="line">BZH</tspan></text>
+    </g>
+    <rect
+       style="fill:none;stroke:none;display:inline"
+       id="rect3098"
+       width="577.14288"
+       height="162.54224"
+       x="59.999989"
+       y="433.94821"
+       inkscape:export-filename="/home/sdx/Pictures/Logo/logo_iot_bzh_100dpi.png"
+       inkscape:export-xdpi="100.22011"
+       inkscape:export-ydpi="100.22011" />
+  </g>
+</svg>
diff --git a/templates/hybrid-html5/app/Frontend/images/logo/logo_iot_bzhx350.png b/templates/hybrid-html5/app/Frontend/images/logo/logo_iot_bzhx350.png
new file mode 100644
index 0000000..2c3b2ae
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/images/logo/logo_iot_bzhx350.png
diff --git a/templates/hybrid-html5/app/Frontend/images/logo/tampon-iot-bzhx450.png b/templates/hybrid-html5/app/Frontend/images/logo/tampon-iot-bzhx450.png
new file mode 100644
index 0000000..f365e19
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/images/logo/tampon-iot-bzhx450.png
diff --git a/templates/hybrid-html5/app/Frontend/images/logo/triskel_iot_bzh.png b/templates/hybrid-html5/app/Frontend/images/logo/triskel_iot_bzh.png
new file mode 100644
index 0000000..832dc1f
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/images/logo/triskel_iot_bzh.png
diff --git a/templates/hybrid-html5/app/Frontend/images/logo/triskel_iot_bzh.svg b/templates/hybrid-html5/app/Frontend/images/logo/triskel_iot_bzh.svg
new file mode 100644
index 0000000..096f424
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/images/logo/triskel_iot_bzh.svg
@@ -0,0 +1,110 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   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"
+   width="205.71426"
+   height="197.14285"
+   id="svg4199"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="triskel_iot_bzh.svg">
+  <defs
+     id="defs4201">
+    <filter
+       color-interpolation-filters="sRGB"
+       id="filter4111"
+       inkscape:label="Drop Shadow">
+      <feFlood
+         id="feFlood4113"
+         flood-opacity="0.475"
+         flood-color="rgb(0,0,0)"
+         result="flood" />
+      <feComposite
+         id="feComposite4115"
+         in2="SourceGraphic"
+         in="flood"
+         operator="in"
+         result="composite1" />
+      <feGaussianBlur
+         id="feGaussianBlur4117"
+         stdDeviation="5"
+         result="blur" />
+      <feOffset
+         id="feOffset4119"
+         dx="8"
+         dy="8"
+         result="offset" />
+      <feComposite
+         id="feComposite4121"
+         in2="offset"
+         in="SourceGraphic"
+         operator="over"
+         result="composite2" />
+    </filter>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35"
+     inkscape:cx="46.428557"
+     inkscape:cy="178.57144"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="500"
+     inkscape:window-height="435"
+     inkscape:window-x="1087"
+     inkscape:window-y="400"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata4204">
+    <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>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-328.57144,-513.79077)">
+    <path
+       id="path3415-4-2-2-5-0-3-7-4-4-1-9"
+       style="fill:#5a2ca0;display:inline;filter:url(#filter4111)"
+       d="m 470.88567,595.30412 c 28.21686,16.29102 28.75566,58.73778 0.99693,78.5383 -7.67688,5.47598 -8.77935,4.91028 -1.99529,-1.0238 17.47377,-15.28453 17.98492,-42.17774 1.08522,-57.09785 l -3.91266,-3.45435 0.72312,-3.71053 c 0.39771,-2.04076 0.5997,-5.73115 0.44885,-8.20083 -0.33876,-5.54623 0.15803,-6.49185 2.65383,-5.05094 z m -64.76568,11.40332 c 7.06047,-7.74198 18.64659,-14.16089 29.04027,-16.08874 l 6.87489,-1.27521 0.87404,2.89709 c 0.4807,1.59343 0.67439,5.2245 0.43037,8.06906 l -0.44364,5.17195 -6.13887,1.6918 c -10.91241,3.00731 -20.4022,10.85909 -25.4533,21.05979 l -2.41633,4.87984 -2.74281,-0.41238 c -5.14252,-0.77316 -12.72985,-3.97645 -12.79123,-5.40033 -0.092,-2.13451 8.34659,-15.74625 12.76661,-20.59287 z m 33.20546,36.39493 c -28.21687,16.291 -65.24624,-4.46574 -68.51461,-38.40577 -0.9039,-9.38637 0.13723,-10.0583 1.88428,-1.21608 4.49989,22.77499 27.53453,36.66428 48.90556,29.48876 l 4.94788,-1.66128 2.85184,2.48149 c 1.56852,1.36481 4.66349,3.38493 6.87772,4.48914 4.97257,2.47973 5.54308,3.38282 3.04733,4.82374 z m 22.50729,-61.7904 c 3.17451,9.98554 2.94038,23.2289 -0.58688,33.194 l -2.33309,6.59143 -2.94597,-0.69161 c -1.6203,-0.38041 -4.86173,-2.02821 -7.2032,-3.6618 l -4.25721,-2.97018 1.60429,-6.16234 c 2.85178,-10.95404 0.79685,-23.09834 -5.51167,-32.57308 l -3.01788,-4.53253 1.72854,-2.16916 c 3.24083,-4.06698 9.80863,-9.03614 11.07242,-8.37738 1.89457,0.98756 9.46336,15.1015 11.45065,21.35265 z m -48.80223,10.31438 c 0,-32.58202 36.49058,-54.27202 67.51771,-40.13251 8.58077,3.9104 8.6421,5.148 0.11108,2.23988 -21.97368,-7.49048 -45.51946,5.51348 -49.99082,27.6091 l -1.03521,5.11562 -3.57498,1.22902 c -1.96621,0.67596 -5.26316,2.34622 -7.32655,3.71171 -4.63379,3.06649 -5.70115,3.10904 -5.70115,0.22718 z m 42.25842,50.3871 c -10.23499,-2.24356 -21.58699,-9.06801 -28.45341,-17.10525 l -4.5418,-5.31622 2.07194,-2.20549 c 1.13957,-1.21302 4.18733,-3.19628 6.77282,-4.40726 l 4.70085,-2.20176 4.53458,4.47053 c 8.06061,7.94674 19.60535,12.23927 30.96496,11.51329 l 5.43422,-0.34731 1.01427,2.58154 c 1.90169,4.84014 2.92124,13.01261 1.71883,13.77769 -1.80254,1.14695 -17.80995,0.64475 -24.21726,-0.75976 z"
+       inkscape:connector-curvature="0"
+       inkscape:export-filename="/home/sdx/Pictures/Logo/triskel_iot_bzh_300dpi.png"
+       inkscape:export-xdpi="300"
+       inkscape:export-ydpi="300" />
+    <rect
+       style="fill:none;stroke:none;display:inline"
+       id="rect4179"
+       width="205.71426"
+       height="197.14285"
+       x="328.57144"
+       y="513.79077"
+       inkscape:export-filename="/home/sdx/Pictures/Logo/triskel_iot_bzh_300dpi.png"
+       inkscape:export-xdpi="300"
+       inkscape:export-ydpi="300" />
+  </g>
+</svg>
diff --git a/templates/hybrid-html5/app/Frontend/images/logo/triskel_iot_bzhx250.png b/templates/hybrid-html5/app/Frontend/images/logo/triskel_iot_bzhx250.png
new file mode 100644
index 0000000..f4e41ae
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/images/logo/triskel_iot_bzhx250.png
diff --git a/templates/hybrid-html5/app/Frontend/index.html b/templates/hybrid-html5/app/Frontend/index.html
new file mode 100644
index 0000000..0d55267
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html lang="en" ng-app="@@APPNAME@@" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html lang="en" ng-app="@@APPNAME@@" class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html lang="en" ng-app="@@APPNAME@@" class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html lang="en" ng-app="@@APPNAME@@" class="no-js"> <!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Simple Sample Application</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- bower:css -->
+    <!-- endinject -->
+     <!--vendor:css -->
+    <!-- endinject -->
+    <!-- appli:css -->
+    <!-- endinject -->
+    <!-- inject:css -->
+    <!-- endinject -->
+    <base href="@@URLBASE@@"> <!-- https://docs.angularjs.org/error/$location/nobase -->
+
+</head>
+<body>
+<!--[if lt IE 7]>
+<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+<![endif]-->
+<div ui-view></div>
+<!-- bower:js -->
+<!-- endinject -->
+<!-- inject:js -->
+<!-- endinject -->
+
+<!-- Generic Foundation Modal Template -->
+<script id="components/modal/modal.html" type="text/ng-template">
+   <div  class="modal-overlay" ng-click="hideOverlay()">
+    <aside class="modal" ng-click="$event.stopPropagation();" ng-transclude></aside>
+  </div>
+</script>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/templates/hybrid-html5/app/Frontend/pages/SampleHome/SampleHome.html b/templates/hybrid-html5/app/Frontend/pages/SampleHome/SampleHome.html
new file mode 100644
index 0000000..8ecdd64
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/pages/SampleHome/SampleHome.html
@@ -0,0 +1,30 @@
+<!-- Foundation Annotations generate tmp/route.js -->
+---
+name: SampleHome
+url:  /sample-home
+controller:   SampleHomeController as ctrl
+animationIn: slideInRight
+---
+
+<h3> 
+<img class="logo" src="images/logo/triskel_iot_bzhx250.png" alt="IoT.bzh Logo" style="height:150px;">
+  App Framework - Hybrid HTML5 Client
+</h3>
+
+<token-refresh autolog="true" callback="ctrl.Initialised"></token-refresh>
+
+
+<div class="button-box box-content ">
+      
+    <submit-button class="session-button {{ctrl.class.refresh}}"  icon="fi-arrows-compress" label="Refresh"   clicked="ctrl.RefreshSession" ></submit-button>
+    
+</div>
+<div class="message-box box-content vertical grid-frame">
+    <div class="response">
+        <span class="grid-content noscroll req {{ctrl.status}} ">req/res= {{ctrl.request}}</span>
+        <span class="grid-content noscroll status {{ctrl.status}}">status= {{ctrl.errcode}}</span>
+    </div>
+</div>
+
+
+
diff --git a/templates/hybrid-html5/app/Frontend/pages/SampleHome/SampleHome.js b/templates/hybrid-html5/app/Frontend/pages/SampleHome/SampleHome.js
new file mode 100644
index 0000000..b037773
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/pages/SampleHome/SampleHome.js
@@ -0,0 +1,63 @@
+(function() {
+'use strict';
+
+// WARNING: make sure than app/frontend/services/AppConfig.js match your server
+
+// list all rependencies within the page + controler if needed
+angular.module('SampleHomeModule', ['SubmitButton', 'TokenRefresh','ModalNotification'])
+
+  .controller('SampleHomeController', function (AppCall, Notification) {
+        var scope = this; // I hate JavaScript
+        scope.uuid   ="none";
+        scope.token  ="none";
+        scope.session="none";
+        scope.status ="err-no";
+
+        console.log ("Home Controller");
+        
+        scope.OnResponse= function(jresp, errcode) {
+            
+            // Update UI response global display zone
+            scope.status   = jresp.request.status;
+            scope.errcode  = errcode;
+            scope.request  = jresp.request;
+            scope.response = jresp.response;
+            
+            var action=jresp.request.reqid.toUpperCase();
+                        
+            switch (action) {
+                case 'PING':
+                    break;
+                    
+                default:
+                    Notification.error ({message: "Invalid RequestID:" + jresp.request.reqid , delay: 5000});
+                    return;
+            } 
+
+            // update button classes within home.html
+            scope.class [jresp.request.reqid]="success";            
+            console.log ("OK: "+ JSON.stringify(jresp));
+        };
+        
+        scope.ProcessError= function(response, errcode, config) {
+            Notification.error ({message: "Invalid API:" + response.request.reqid , delay: 5000});
+            scope.status   = "err-fx";
+            scope.errcode  = errcode;
+            scope.request  = response.request;
+            scope.response = "";            
+            console.log ("FX: "+ JSON.stringify(response));
+        };
+
+        scope.RefreshSession = function() {
+            console.log ("RefreshSession");
+            AppCall.get ("xxxxxx", "ping", {/*query*/}, scope.OnResponse, scope.InvalidApiCall);
+        };
+        
+        scope.Initialised = function () {
+            scope.class = {connect: "success"};
+        };
+        
+   });
+
+console.log ("SampleControler Loaded");
+})(); 
diff --git a/templates/hybrid-html5/app/Frontend/pages/SampleHome/SampleHome.scss b/templates/hybrid-html5/app/Frontend/pages/SampleHome/SampleHome.scss
new file mode 100644
index 0000000..8bf04a1
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/pages/SampleHome/SampleHome.scss
@@ -0,0 +1,71 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+@import "app/ibz-mixins";
+
+$COLOR_SUCCESS: green;
+$COLOR_FAIL: red;
+
+token-refresh {
+    display: block;
+    float: right;
+    margin: .5rem 1rem 0 0;
+}
+
+.button-box {
+    height  : 4.5rem;
+    
+    .session-button {
+      float: left;
+      width: 5rem;
+    };
+    
+    .response > span{
+        display: block;
+        margin: .3rem .5rem .3rem .5rem;        
+    }  
+    
+    .fail { 
+        color:$COLOR_FAIL;
+        border: 1px solid darken($COLOR_FAIL,10%);
+    }
+    .success { 
+        color:$COLOR_SUCCESS; 
+        border: 1px solid darken($COLOR_SUCCESS,10%);
+    }
+
+};
+
+.message-box {
+    height  : auto;
+    width: 100%;
+    font-size: .75rem;
+  
+    .response {
+        .err-no { color:grey; }
+        .res.err-ok { color: blue; }
+        .req.err-ok { color:blueviolet; }
+        .status.err-ok { color:green; }
+        .status.err-fx { color:red; }       
+    } 
+    
+
+};
+
+
+
diff --git a/templates/hybrid-html5/app/Frontend/services/JQueryEmu.js b/templates/hybrid-html5/app/Frontend/services/JQueryEmu.js
new file mode 100644
index 0000000..6d6e338
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/services/JQueryEmu.js
@@ -0,0 +1,79 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * Usage:
+ * 
+ *   // mouse event probably point on icon and not on button div
+ *   ... ng-click="LockChannel($event)
+     var target= angular.element(event.currentTarget);
+     var button= JQemu.FindInParent (target, 'div');
+ * 
+ */
+
+
+(function () {
+    'use strict';
+
+
+          
+    // _all modules only reference dependencies
+    angular.module('JQueryEmu', [])
+
+            // Factory is a singleton and share its context within all instances.
+            .factory('JQemu', function () {
+
+                var FindInParent = function (element, selector) {
+                    var parent = element;
+                    var search = selector.toUpperCase();
+                    while (parent[0]) {
+                        if (search === parent[0].tagName) {
+                            return parent;
+                        }  // HTMLDivElement properties
+                        parent = parent.parent();
+                    }
+                };
+                
+                var  FindByTag= function (element, tag, selector) {
+                    var search = selector.toLowerCase();
+                    var type   = tag.toLowerCase()+ "Name";
+                    var children = element.children();
+                    while (children[0]) {
+                        if (search === children[0][type]) {
+                            return children;
+                        }  // HTMLDivElement properties
+                        children = children.next();
+                    }
+                };
+                
+                var  FindByClass= function (element, selector) {
+                    var search = selector.toLowerCase();
+                    var children = element.children();
+                    while (children[0]) {
+                        if (children.hasClass(search)) {
+                            return children;
+                        }  // HTMLDivElement properties
+                        children = children.next();
+                    }
+                };
+
+                var myMethods = {
+                    FindInParent: FindInParent,
+                    FindByTag: FindByTag,
+                    FindByClass: FindByClass
+                };
+
+                return myMethods;
+            });
+
+})();
+\ No newline at end of file
diff --git a/templates/hybrid-html5/app/Frontend/styles/README.md b/templates/hybrid-html5/app/Frontend/styles/README.md
new file mode 100644
index 0000000..dc50ced
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/styles/README.md
@@ -0,0 +1,28 @@
+WARNING note about global style dir
+-------------------------------------
+
+ - styles placed in Frontend/styles is global and will be posted in dist.prod/styles
+ - styles defined within widget or page directory will be place in dist.prof/opa/styles
+
+This model allows to share global styles by multiple applications.
+
+To change this behaviour just rename styles directory on something else [eg: appstyles]
+
+
+    |---- /Frontend
+    |     |
+    |     |---- /styles
+    |     |     |
+    |     |     |---- _settings.scss
+    |     |     |---- app.scss
+    |     |
+    |     |---- /Widgets
+    |     |     |
+    |     |     |--- widget.js
+    |     |     |--- widget.sccs
+    |     |
+    |     |-----/Pages
+    |           |--- page-partial.html
+    |           |--- page-cntrl.js
+    |           |--- page-style.scss 
+    |
diff --git a/templates/hybrid-html5/app/Frontend/styles/app/_ibz-mixins.scss b/templates/hybrid-html5/app/Frontend/styles/app/_ibz-mixins.scss
new file mode 100644
index 0000000..b2fb2ec
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/styles/app/_ibz-mixins.scss
@@ -0,0 +1,52 @@
+/*
+    Every SCSS files will be injected into main HTML page
+*/
+shadow-transition {
+    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
+    border-radius: 5px;
+}
+
+@mixin ibz-box-content {
+    border: 2px solid gainsboro !important;
+    border-radius: 5px;
+    
+    margin-left: auto;
+    margin-right: auto;
+    min-width: 98% !important; 
+    margin: .5rem .5rem .5rem .5rem;
+    background: rgba(200,205,200,.3);
+}
+
+@mixin ibz-button ($color, $size:2rem) {
+    display: inline-block;
+    border: 1px solid darken($color,10%);
+    box-shadow: 2px 2px 1px adjust-hue($color,20deg);
+    color: $color;
+    border-radius: 5px;
+    font-style: italic;
+    padding: 0rem .5rem 0rem .5rem;
+    margin:.5rem;
+    background: lighten(#9494b7, 20%);
+    i {
+        padding-right: 0.3rem;
+        font-size: $size;
+    }
+    span {font-size: 1rem}
+    
+    &:hover {
+      background: lighten($color, 45%);
+      border: 2px solid darken($color,20%);
+      
+    }
+}
+
+@mixin ibz-input-alert ($color, $background) {
+    position  :fixed;
+    margin: -2.2rem 0 0 15rem;
+    border-radius: 5px;
+    font-style: italic;
+    border-color: darken($background,10%);
+    color: $color;
+    background-color: $background !important;
+    padding: 0.2rem !important;
+}
diff --git a/templates/hybrid-html5/app/Frontend/styles/app/ibz-global.scss b/templates/hybrid-html5/app/Frontend/styles/app/ibz-global.scss
new file mode 100644
index 0000000..1f5017e
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/styles/app/ibz-global.scss
@@ -0,0 +1,43 @@
+/*
+Copyright (C) 2015 "IoT.bzh"
+Author "Fulup Ar Foll"
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+@import "app/ibz-mixins";
+
+submit-button {
+    float: right;
+    @include ibz-button(grey);
+}
+
+zf-modal {
+  background-color: rgba(180,180,180,.5);
+}
+
+.box-content {
+     @include ibz-box-content;
+
+    .box-title {
+        display: block;
+        font-size: 1.3rem;
+    }
+}
+
+// Change Notifications default size
+.ui-notification {
+    width: auto;
+    border-radius: 5px;
+}
+\ No newline at end of file
diff --git a/templates/hybrid-html5/app/Frontend/styles/foundation/_foundation-icons.scss b/templates/hybrid-html5/app/Frontend/styles/foundation/_foundation-icons.scss
new file mode 100644
index 0000000..d401f3c
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/styles/foundation/_foundation-icons.scss
@@ -0,0 +1,591 @@
+/* 
+ * Foundation Icons v 3.0
+ * Made by ZURB 2013 http://zurb.com/playground/foundation-icon-fonts-3
+ * MIT License
+ */
+
+@font-face {
+  font-family: "foundation-icons";
+  src: url("/bower_components/foundation-icons.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+
+.fi-address-book:before,
+.fi-alert:before,
+.fi-align-center:before,
+.fi-align-justify:before,
+.fi-align-left:before,
+.fi-align-right:before,
+.fi-anchor:before,
+.fi-annotate:before,
+.fi-archive:before,
+.fi-arrow-down:before,
+.fi-arrow-left:before,
+.fi-arrow-right:before,
+.fi-arrow-up:before,
+.fi-arrows-compress:before,
+.fi-arrows-expand:before,
+.fi-arrows-in:before,
+.fi-arrows-out:before,
+.fi-asl:before,
+.fi-asterisk:before,
+.fi-at-sign:before,
+.fi-background-color:before,
+.fi-battery-empty:before,
+.fi-battery-full:before,
+.fi-battery-half:before,
+.fi-bitcoin-circle:before,
+.fi-bitcoin:before,
+.fi-blind:before,
+.fi-bluetooth:before,
+.fi-bold:before,
+.fi-book-bookmark:before,
+.fi-book:before,
+.fi-bookmark:before,
+.fi-braille:before,
+.fi-burst-new:before,
+.fi-burst-sale:before,
+.fi-burst:before,
+.fi-calendar:before,
+.fi-camera:before,
+.fi-check:before,
+.fi-checkbox:before,
+.fi-clipboard-notes:before,
+.fi-clipboard-pencil:before,
+.fi-clipboard:before,
+.fi-clock:before,
+.fi-closed-caption:before,
+.fi-cloud:before,
+.fi-comment-minus:before,
+.fi-comment-quotes:before,
+.fi-comment-video:before,
+.fi-comment:before,
+.fi-comments:before,
+.fi-compass:before,
+.fi-contrast:before,
+.fi-credit-card:before,
+.fi-crop:before,
+.fi-crown:before,
+.fi-css3:before,
+.fi-database:before,
+.fi-die-five:before,
+.fi-die-four:before,
+.fi-die-one:before,
+.fi-die-six:before,
+.fi-die-three:before,
+.fi-die-two:before,
+.fi-dislike:before,
+.fi-dollar-bill:before,
+.fi-dollar:before,
+.fi-download:before,
+.fi-eject:before,
+.fi-elevator:before,
+.fi-euro:before,
+.fi-eye:before,
+.fi-fast-forward:before,
+.fi-female-symbol:before,
+.fi-female:before,
+.fi-filter:before,
+.fi-first-aid:before,
+.fi-flag:before,
+.fi-folder-add:before,
+.fi-folder-lock:before,
+.fi-folder:before,
+.fi-foot:before,
+.fi-foundation:before,
+.fi-graph-bar:before,
+.fi-graph-horizontal:before,
+.fi-graph-pie:before,
+.fi-graph-trend:before,
+.fi-guide-dog:before,
+.fi-hearing-aid:before,
+.fi-heart:before,
+.fi-home:before,
+.fi-html5:before,
+.fi-indent-less:before,
+.fi-indent-more:before,
+.fi-info:before,
+.fi-italic:before,
+.fi-key:before,
+.fi-laptop:before,
+.fi-layout:before,
+.fi-lightbulb:before,
+.fi-like:before,
+.fi-link:before,
+.fi-list-bullet:before,
+.fi-list-number:before,
+.fi-list-thumbnails:before,
+.fi-list:before,
+.fi-lock:before,
+.fi-loop:before,
+.fi-magnifying-glass:before,
+.fi-mail:before,
+.fi-male-female:before,
+.fi-male-symbol:before,
+.fi-male:before,
+.fi-map:before,
+.fi-marker:before,
+.fi-megaphone:before,
+.fi-microphone:before,
+.fi-minus-circle:before,
+.fi-minus:before,
+.fi-mobile-signal:before,
+.fi-mobile:before,
+.fi-monitor:before,
+.fi-mountains:before,
+.fi-music:before,
+.fi-next:before,
+.fi-no-dogs:before,
+.fi-no-smoking:before,
+.fi-page-add:before,
+.fi-page-copy:before,
+.fi-page-csv:before,
+.fi-page-delete:before,
+.fi-page-doc:before,
+.fi-page-edit:before,
+.fi-page-export-csv:before,
+.fi-page-export-doc:before,
+.fi-page-export-pdf:before,
+.fi-page-export:before,
+.fi-page-filled:before,
+.fi-page-multiple:before,
+.fi-page-pdf:before,
+.fi-page-remove:before,
+.fi-page-search:before,
+.fi-page:before,
+.fi-paint-bucket:before,
+.fi-paperclip:before,
+.fi-pause:before,
+.fi-paw:before,
+.fi-paypal:before,
+.fi-pencil:before,
+.fi-photo:before,
+.fi-play-circle:before,
+.fi-play-video:before,
+.fi-play:before,
+.fi-plus:before,
+.fi-pound:before,
+.fi-power:before,
+.fi-previous:before,
+.fi-price-tag:before,
+.fi-pricetag-multiple:before,
+.fi-print:before,
+.fi-prohibited:before,
+.fi-projection-screen:before,
+.fi-puzzle:before,
+.fi-quote:before,
+.fi-record:before,
+.fi-refresh:before,
+.fi-results-demographics:before,
+.fi-results:before,
+.fi-rewind-ten:before,
+.fi-rewind:before,
+.fi-rss:before,
+.fi-safety-cone:before,
+.fi-save:before,
+.fi-share:before,
+.fi-sheriff-badge:before,
+.fi-shield:before,
+.fi-shopping-bag:before,
+.fi-shopping-cart:before,
+.fi-shuffle:before,
+.fi-skull:before,
+.fi-social-500px:before,
+.fi-social-adobe:before,
+.fi-social-amazon:before,
+.fi-social-android:before,
+.fi-social-apple:before,
+.fi-social-behance:before,
+.fi-social-bing:before,
+.fi-social-blogger:before,
+.fi-social-delicious:before,
+.fi-social-designer-news:before,
+.fi-social-deviant-art:before,
+.fi-social-digg:before,
+.fi-social-dribbble:before,
+.fi-social-drive:before,
+.fi-social-dropbox:before,
+.fi-social-evernote:before,
+.fi-social-facebook:before,
+.fi-social-flickr:before,
+.fi-social-forrst:before,
+.fi-social-foursquare:before,
+.fi-social-game-center:before,
+.fi-social-github:before,
+.fi-social-google-plus:before,
+.fi-social-hacker-news:before,
+.fi-social-hi5:before,
+.fi-social-instagram:before,
+.fi-social-joomla:before,
+.fi-social-lastfm:before,
+.fi-social-linkedin:before,
+.fi-social-medium:before,
+.fi-social-myspace:before,
+.fi-social-orkut:before,
+.fi-social-path:before,
+.fi-social-picasa:before,
+.fi-social-pinterest:before,
+.fi-social-rdio:before,
+.fi-social-reddit:before,
+.fi-social-skillshare:before,
+.fi-social-skype:before,
+.fi-social-smashing-mag:before,
+.fi-social-snapchat:before,
+.fi-social-spotify:before,
+.fi-social-squidoo:before,
+.fi-social-stack-overflow:before,
+.fi-social-steam:before,
+.fi-social-stumbleupon:before,
+.fi-social-treehouse:before,
+.fi-social-tumblr:before,
+.fi-social-twitter:before,
+.fi-social-vimeo:before,
+.fi-social-windows:before,
+.fi-social-xbox:before,
+.fi-social-yahoo:before,
+.fi-social-yelp:before,
+.fi-social-youtube:before,
+.fi-social-zerply:before,
+.fi-social-zurb:before,
+.fi-sound:before,
+.fi-star:before,
+.fi-stop:before,
+.fi-strikethrough:before,
+.fi-subscript:before,
+.fi-superscript:before,
+.fi-tablet-landscape:before,
+.fi-tablet-portrait:before,
+.fi-target-two:before,
+.fi-target:before,
+.fi-telephone-accessible:before,
+.fi-telephone:before,
+.fi-text-color:before,
+.fi-thumbnails:before,
+.fi-ticket:before,
+.fi-torso-business:before,
+.fi-torso-female:before,
+.fi-torso:before,
+.fi-torsos-all-female:before,
+.fi-torsos-all:before,
+.fi-torsos-female-male:before,
+.fi-torsos-male-female:before,
+.fi-torsos:before,
+.fi-trash:before,
+.fi-trees:before,
+.fi-trophy:before,
+.fi-underline:before,
+.fi-universal-access:before,
+.fi-unlink:before,
+.fi-unlock:before,
+.fi-upload-cloud:before,
+.fi-upload:before,
+.fi-usb:before,
+.fi-video:before,
+.fi-volume-none:before,
+.fi-volume-strike:before,
+.fi-volume:before,
+.fi-web:before,
+.fi-wheelchair:before,
+.fi-widget:before,
+.fi-wrench:before,
+.fi-x-circle:before,
+.fi-x:before,
+.fi-yen:before,
+.fi-zoom-in:before,
+.fi-zoom-out:before {
+  font-family: "foundation-icons";
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  text-decoration: inherit;
+}
+
+.fi-address-book:before { content: "\f100"; }
+.fi-alert:before { content: "\f101"; }
+.fi-align-center:before { content: "\f102"; }
+.fi-align-justify:before { content: "\f103"; }
+.fi-align-left:before { content: "\f104"; }
+.fi-align-right:before { content: "\f105"; }
+.fi-anchor:before { content: "\f106"; }
+.fi-annotate:before { content: "\f107"; }
+.fi-archive:before { content: "\f108"; }
+.fi-arrow-down:before { content: "\f109"; }
+.fi-arrow-left:before { content: "\f10a"; }
+.fi-arrow-right:before { content: "\f10b"; }
+.fi-arrow-up:before { content: "\f10c"; }
+.fi-arrows-compress:before { content: "\f10d"; }
+.fi-arrows-expand:before { content: "\f10e"; }
+.fi-arrows-in:before { content: "\f10f"; }
+.fi-arrows-out:before { content: "\f110"; }
+.fi-asl:before { content: "\f111"; }
+.fi-asterisk:before { content: "\f112"; }
+.fi-at-sign:before { content: "\f113"; }
+.fi-background-color:before { content: "\f114"; }
+.fi-battery-empty:before { content: "\f115"; }
+.fi-battery-full:before { content: "\f116"; }
+.fi-battery-half:before { content: "\f117"; }
+.fi-bitcoin-circle:before { content: "\f118"; }
+.fi-bitcoin:before { content: "\f119"; }
+.fi-blind:before { content: "\f11a"; }
+.fi-bluetooth:before { content: "\f11b"; }
+.fi-bold:before { content: "\f11c"; }
+.fi-book-bookmark:before { content: "\f11d"; }
+.fi-book:before { content: "\f11e"; }
+.fi-bookmark:before { content: "\f11f"; }
+.fi-braille:before { content: "\f120"; }
+.fi-burst-new:before { content: "\f121"; }
+.fi-burst-sale:before { content: "\f122"; }
+.fi-burst:before { content: "\f123"; }
+.fi-calendar:before { content: "\f124"; }
+.fi-camera:before { content: "\f125"; }
+.fi-check:before { content: "\f126"; }
+.fi-checkbox:before { content: "\f127"; }
+.fi-clipboard-notes:before { content: "\f128"; }
+.fi-clipboard-pencil:before { content: "\f129"; }
+.fi-clipboard:before { content: "\f12a"; }
+.fi-clock:before { content: "\f12b"; }
+.fi-closed-caption:before { content: "\f12c"; }
+.fi-cloud:before { content: "\f12d"; }
+.fi-comment-minus:before { content: "\f12e"; }
+.fi-comment-quotes:before { content: "\f12f"; }
+.fi-comment-video:before { content: "\f130"; }
+.fi-comment:before { content: "\f131"; }
+.fi-comments:before { content: "\f132"; }
+.fi-compass:before { content: "\f133"; }
+.fi-contrast:before { content: "\f134"; }
+.fi-credit-card:before { content: "\f135"; }
+.fi-crop:before { content: "\f136"; }
+.fi-crown:before { content: "\f137"; }
+.fi-css3:before { content: "\f138"; }
+.fi-database:before { content: "\f139"; }
+.fi-die-five:before { content: "\f13a"; }
+.fi-die-four:before { content: "\f13b"; }
+.fi-die-one:before { content: "\f13c"; }
+.fi-die-six:before { content: "\f13d"; }
+.fi-die-three:before { content: "\f13e"; }
+.fi-die-two:before { content: "\f13f"; }
+.fi-dislike:before { content: "\f140"; }
+.fi-dollar-bill:before { content: "\f141"; }
+.fi-dollar:before { content: "\f142"; }
+.fi-download:before { content: "\f143"; }
+.fi-eject:before { content: "\f144"; }
+.fi-elevator:before { content: "\f145"; }
+.fi-euro:before { content: "\f146"; }
+.fi-eye:before { content: "\f147"; }
+.fi-fast-forward:before { content: "\f148"; }
+.fi-female-symbol:before { content: "\f149"; }
+.fi-female:before { content: "\f14a"; }
+.fi-filter:before { content: "\f14b"; }
+.fi-first-aid:before { content: "\f14c"; }
+.fi-flag:before { content: "\f14d"; }
+.fi-folder-add:before { content: "\f14e"; }
+.fi-folder-lock:before { content: "\f14f"; }
+.fi-folder:before { content: "\f150"; }
+.fi-foot:before { content: "\f151"; }
+.fi-foundation:before { content: "\f152"; }
+.fi-graph-bar:before { content: "\f153"; }
+.fi-graph-horizontal:before { content: "\f154"; }
+.fi-graph-pie:before { content: "\f155"; }
+.fi-graph-trend:before { content: "\f156"; }
+.fi-guide-dog:before { content: "\f157"; }
+.fi-hearing-aid:before { content: "\f158"; }
+.fi-heart:before { content: "\f159"; }
+.fi-home:before { content: "\f15a"; }
+.fi-html5:before { content: "\f15b"; }
+.fi-indent-less:before { content: "\f15c"; }
+.fi-indent-more:before { content: "\f15d"; }
+.fi-info:before { content: "\f15e"; }
+.fi-italic:before { content: "\f15f"; }
+.fi-key:before { content: "\f160"; }
+.fi-laptop:before { content: "\f161"; }
+.fi-layout:before { content: "\f162"; }
+.fi-lightbulb:before { content: "\f163"; }
+.fi-like:before { content: "\f164"; }
+.fi-link:before { content: "\f165"; }
+.fi-list-bullet:before { content: "\f166"; }
+.fi-list-number:before { content: "\f167"; }
+.fi-list-thumbnails:before { content: "\f168"; }
+.fi-list:before { content: "\f169"; }
+.fi-lock:before { content: "\f16a"; }
+.fi-loop:before { content: "\f16b"; }
+.fi-magnifying-glass:before { content: "\f16c"; }
+.fi-mail:before { content: "\f16d"; }
+.fi-male-female:before { content: "\f16e"; }
+.fi-male-symbol:before { content: "\f16f"; }
+.fi-male:before { content: "\f170"; }
+.fi-map:before { content: "\f171"; }
+.fi-marker:before { content: "\f172"; }
+.fi-megaphone:before { content: "\f173"; }
+.fi-microphone:before { content: "\f174"; }
+.fi-minus-circle:before { content: "\f175"; }
+.fi-minus:before { content: "\f176"; }
+.fi-mobile-signal:before { content: "\f177"; }
+.fi-mobile:before { content: "\f178"; }
+.fi-monitor:before { content: "\f179"; }
+.fi-mountains:before { content: "\f17a"; }
+.fi-music:before { content: "\f17b"; }
+.fi-next:before { content: "\f17c"; }
+.fi-no-dogs:before { content: "\f17d"; }
+.fi-no-smoking:before { content: "\f17e"; }
+.fi-page-add:before { content: "\f17f"; }
+.fi-page-copy:before { content: "\f180"; }
+.fi-page-csv:before { content: "\f181"; }
+.fi-page-delete:before { content: "\f182"; }
+.fi-page-doc:before { content: "\f183"; }
+.fi-page-edit:before { content: "\f184"; }
+.fi-page-export-csv:before { content: "\f185"; }
+.fi-page-export-doc:before { content: "\f186"; }
+.fi-page-export-pdf:before { content: "\f187"; }
+.fi-page-export:before { content: "\f188"; }
+.fi-page-filled:before { content: "\f189"; }
+.fi-page-multiple:before { content: "\f18a"; }
+.fi-page-pdf:before { content: "\f18b"; }
+.fi-page-remove:before { content: "\f18c"; }
+.fi-page-search:before { content: "\f18d"; }
+.fi-page:before { content: "\f18e"; }
+.fi-paint-bucket:before { content: "\f18f"; }
+.fi-paperclip:before { content: "\f190"; }
+.fi-pause:before { content: "\f191"; }
+.fi-paw:before { content: "\f192"; }
+.fi-paypal:before { content: "\f193"; }
+.fi-pencil:before { content: "\f194"; }
+.fi-photo:before { content: "\f195"; }
+.fi-play-circle:before { content: "\f196"; }
+.fi-play-video:before { content: "\f197"; }
+.fi-play:before { content: "\f198"; }
+.fi-plus:before { content: "\f199"; }
+.fi-pound:before { content: "\f19a"; }
+.fi-power:before { content: "\f19b"; }
+.fi-previous:before { content: "\f19c"; }
+.fi-price-tag:before { content: "\f19d"; }
+.fi-pricetag-multiple:before { content: "\f19e"; }
+.fi-print:before { content: "\f19f"; }
+.fi-prohibited:before { content: "\f1a0"; }
+.fi-projection-screen:before { content: "\f1a1"; }
+.fi-puzzle:before { content: "\f1a2"; }
+.fi-quote:before { content: "\f1a3"; }
+.fi-record:before { content: "\f1a4"; }
+.fi-refresh:before { content: "\f1a5"; }
+.fi-results-demographics:before { content: "\f1a6"; }
+.fi-results:before { content: "\f1a7"; }
+.fi-rewind-ten:before { content: "\f1a8"; }
+.fi-rewind:before { content: "\f1a9"; }
+.fi-rss:before { content: "\f1aa"; }
+.fi-safety-cone:before { content: "\f1ab"; }
+.fi-save:before { content: "\f1ac"; }
+.fi-share:before { content: "\f1ad"; }
+.fi-sheriff-badge:before { content: "\f1ae"; }
+.fi-shield:before { content: "\f1af"; }
+.fi-shopping-bag:before { content: "\f1b0"; }
+.fi-shopping-cart:before { content: "\f1b1"; }
+.fi-shuffle:before { content: "\f1b2"; }
+.fi-skull:before { content: "\f1b3"; }
+.fi-social-500px:before { content: "\f1b4"; }
+.fi-social-adobe:before { content: "\f1b5"; }
+.fi-social-amazon:before { content: "\f1b6"; }
+.fi-social-android:before { content: "\f1b7"; }
+.fi-social-apple:before { content: "\f1b8"; }
+.fi-social-behance:before { content: "\f1b9"; }
+.fi-social-bing:before { content: "\f1ba"; }
+.fi-social-blogger:before { content: "\f1bb"; }
+.fi-social-delicious:before { content: "\f1bc"; }
+.fi-social-designer-news:before { content: "\f1bd"; }
+.fi-social-deviant-art:before { content: "\f1be"; }
+.fi-social-digg:before { content: "\f1bf"; }
+.fi-social-dribbble:before { content: "\f1c0"; }
+.fi-social-drive:before { content: "\f1c1"; }
+.fi-social-dropbox:before { content: "\f1c2"; }
+.fi-social-evernote:before { content: "\f1c3"; }
+.fi-social-facebook:before { content: "\f1c4"; }
+.fi-social-flickr:before { content: "\f1c5"; }
+.fi-social-forrst:before { content: "\f1c6"; }
+.fi-social-foursquare:before { content: "\f1c7"; }
+.fi-social-game-center:before { content: "\f1c8"; }
+.fi-social-github:before { content: "\f1c9"; }
+.fi-social-google-plus:before { content: "\f1ca"; }
+.fi-social-hacker-news:before { content: "\f1cb"; }
+.fi-social-hi5:before { content: "\f1cc"; }
+.fi-social-instagram:before { content: "\f1cd"; }
+.fi-social-joomla:before { content: "\f1ce"; }
+.fi-social-lastfm:before { content: "\f1cf"; }
+.fi-social-linkedin:before { content: "\f1d0"; }
+.fi-social-medium:before { content: "\f1d1"; }
+.fi-social-myspace:before { content: "\f1d2"; }
+.fi-social-orkut:before { content: "\f1d3"; }
+.fi-social-path:before { content: "\f1d4"; }
+.fi-social-picasa:before { content: "\f1d5"; }
+.fi-social-pinterest:before { content: "\f1d6"; }
+.fi-social-rdio:before { content: "\f1d7"; }
+.fi-social-reddit:before { content: "\f1d8"; }
+.fi-social-skillshare:before { content: "\f1d9"; }
+.fi-social-skype:before { content: "\f1da"; }
+.fi-social-smashing-mag:before { content: "\f1db"; }
+.fi-social-snapchat:before { content: "\f1dc"; }
+.fi-social-spotify:before { content: "\f1dd"; }
+.fi-social-squidoo:before { content: "\f1de"; }
+.fi-social-stack-overflow:before { content: "\f1df"; }
+.fi-social-steam:before { content: "\f1e0"; }
+.fi-social-stumbleupon:before { content: "\f1e1"; }
+.fi-social-treehouse:before { content: "\f1e2"; }
+.fi-social-tumblr:before { content: "\f1e3"; }
+.fi-social-twitter:before { content: "\f1e4"; }
+.fi-social-vimeo:before { content: "\f1e5"; }
+.fi-social-windows:before { content: "\f1e6"; }
+.fi-social-xbox:before { content: "\f1e7"; }
+.fi-social-yahoo:before { content: "\f1e8"; }
+.fi-social-yelp:before { content: "\f1e9"; }
+.fi-social-youtube:before { content: "\f1ea"; }
+.fi-social-zerply:before { content: "\f1eb"; }
+.fi-social-zurb:before { content: "\f1ec"; }
+.fi-sound:before { content: "\f1ed"; }
+.fi-star:before { content: "\f1ee"; }
+.fi-stop:before { content: "\f1ef"; }
+.fi-strikethrough:before { content: "\f1f0"; }
+.fi-subscript:before { content: "\f1f1"; }
+.fi-superscript:before { content: "\f1f2"; }
+.fi-tablet-landscape:before { content: "\f1f3"; }
+.fi-tablet-portrait:before { content: "\f1f4"; }
+.fi-target-two:before { content: "\f1f5"; }
+.fi-target:before { content: "\f1f6"; }
+.fi-telephone-accessible:before { content: "\f1f7"; }
+.fi-telephone:before { content: "\f1f8"; }
+.fi-text-color:before { content: "\f1f9"; }
+.fi-thumbnails:before { content: "\f1fa"; }
+.fi-ticket:before { content: "\f1fb"; }
+.fi-torso-business:before { content: "\f1fc"; }
+.fi-torso-female:before { content: "\f1fd"; }
+.fi-torso:before { content: "\f1fe"; }
+.fi-torsos-all-female:before { content: "\f1ff"; }
+.fi-torsos-all:before { content: "\f200"; }
+.fi-torsos-female-male:before { content: "\f201"; }
+.fi-torsos-male-female:before { content: "\f202"; }
+.fi-torsos:before { content: "\f203"; }
+.fi-trash:before { content: "\f204"; }
+.fi-trees:before { content: "\f205"; }
+.fi-trophy:before { content: "\f206"; }
+.fi-underline:before { content: "\f207"; }
+.fi-universal-access:before { content: "\f208"; }
+.fi-unlink:before { content: "\f209"; }
+.fi-unlock:before { content: "\f20a"; }
+.fi-upload-cloud:before { content: "\f20b"; }
+.fi-upload:before { content: "\f20c"; }
+.fi-usb:before { content: "\f20d"; }
+.fi-video:before { content: "\f20e"; }
+.fi-volume-none:before { content: "\f20f"; }
+.fi-volume-strike:before { content: "\f210"; }
+.fi-volume:before { content: "\f211"; }
+.fi-web:before { content: "\f212"; }
+.fi-wheelchair:before { content: "\f213"; }
+.fi-widget:before { content: "\f214"; }
+.fi-wrench:before { content: "\f215"; }
+.fi-x-circle:before { content: "\f216"; }
+.fi-x:before { content: "\f217"; }
+.fi-yen:before { content: "\f218"; }
+.fi-zoom-in:before { content: "\f219"; }
+.fi-zoom-out:before { content: "\f21a"; }
diff --git a/templates/hybrid-html5/app/Frontend/styles/foundation/_foundation-settings.scss b/templates/hybrid-html5/app/Frontend/styles/foundation/_foundation-settings.scss
new file mode 100644
index 0000000..d4c6415
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/styles/foundation/_foundation-settings.scss
@@ -0,0 +1,605 @@
+//  FOUNDATION FOR APPS SETTINGS
+//  ----------------------------
+//
+//  Table of Contents:
+//
+//  1.  CSS Exports
+//  2.  Global Styles
+//  3.  Breakpoints
+//  4.  Typography
+//  5.  Grid
+//  6.  Button
+//  7.  Accordion
+//  8.  Action Sheet
+//  9.  Block List
+//  10. Button Group
+//  11. Card
+//  12. Extras
+//  13. Forms
+//  14. Iconic
+//  15. Label
+//  16. Menu Bar
+//  17. Modal
+//  18. Motion UI
+//  19. Notification
+//  20. Off-canvas
+//  21. Panel
+//  22. Popup
+//  23. Switch
+//  24. Tabs
+//  25. Title Bar
+
+@import "helpers/functions";
+
+// 1. CSS Exports
+// - - - - - - - - - - - - - - -
+
+// Change any value in this map from "true" to "false" to disable that component's CSS class output. You'll still be able to use the component's mixins, but none of our pre-written classes will be in your CSS.
+
+ $include-css: (
+   accordion: true,
+   action-sheet: true,
+   block-list: true,
+   button: true,
+   button-group: true,
+   card: true,
+   coloring: true,
+   extras: true,
+   forms: true,
+   grid: true,
+   iconic: true,
+   label: true,
+   badge: true,
+   list: true,
+   menu-bar: true,
+   modal: true,
+   motion: true,
+   notification: true,
+   off-canvas: true,
+   panel: true,
+   popup: true,
+   switch: true,
+   tabs: true,
+   title-bar: true,
+   typography: true,
+   utilities: true,
+ ); 
+
+// 2. Global Styles
+// - - - - - - - - - - - - - - -
+
+// This sets 1rem to be 16px
+// $rem-base: 16px;
+
+// The default font-size is set to 100% of the browser style sheet (usually 16px)
+// for compatibility with browser-based text zoom or user-set defaults.
+
+// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
+// If you want your base font-size to be different and not have it affect the grid breakpoints,
+// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
+// $base-font-size: 100%;
+
+// $base-line-height is 24px while $base-font-size is 16px
+// $base-line-height: 1.5;
+
+// Text selector helpers
+// $headers: "h1,h2,h3,h4,h5,h6";
+
+// We use these to define default font weights
+// $font-weight-normal: normal;
+// $font-weight-bold: bold;
+
+// We use these to control various global styles
+// $body-background: #fff;
+// $body-font-color: #222;
+// $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+// $body-font-weight: $font-weight-normal;
+// $body-font-style: normal;
+// $body-antialiased: true;
+
+// Application Colors
+// $primary-color: #00558b;
+// $secondary-color: #f1f1f1;
+// $alert-color: #F04124;
+// $info-color: #A0D3E8;
+// $success-color: #43AC6A;
+// $warning-color: #F08A24;
+// $dark-color: #232323;
+// $gray: #dfdfdf;
+// $gray-dark: darken($gray, 8);
+// $gray-light: lighten($gray, 8);
+
+// We use these to make sure border radius matches unless we want it different.
+// $global-radius: 4px;
+// $global-rounded: 1000px;
+
+// We use this for default spacing
+// $global-padding: 1rem;
+// $global-spacing: rem-calc(15); 
+
+// 3. Breakpoints
+// - - - - - - - - - - - - - - -
+
+// These are our named breakpoints. You can use them in our breakpoint function like this: @include breakpoint(medium) { // Medium and larger styles }
+// $breakpoints: (
+//   small: rem-calc(0),
+//   medium: rem-calc(640),
+//   large: rem-calc(1200),
+//   xlarge: rem-calc(1440),
+//   xxlarge: rem-calc(1920),
+// );
+
+// All of the names in this list will be output as classes in your CSS, like small-12, medium-6, and so on.
+// $breakpoint-classes: (small medium large); 
+
+// 4. Typography
+// - - - - - - - - - - - - - - -
+
+// We use these to control header font styles
+// $header-font-family: $body-font-family;
+// $header-font-weight: $font-weight-normal;
+// $header-font-style: $font-weight-normal;
+// $header-font-color: #222;
+// $header-line-height: 1.4;
+// $header-top-margin: .2rem;
+// $header-bottom-margin: .5rem;
+// $header-text-rendering: optimizeLegibility;
+
+// We use these to control header font sizes
+// $h1-font-size: rem-calc(44);
+// $h2-font-size: rem-calc(37);
+// $h3-font-size: rem-calc(27);
+// $h4-font-size: rem-calc(23);
+// $h5-font-size: rem-calc(18);
+// $h6-font-size: 1rem;
+
+// We use these to control header size reduction on small screens
+// $h1-font-reduction: rem-calc(10);
+// $h2-font-reduction: rem-calc(10);
+// $h3-font-reduction: rem-calc(5);
+// $h4-font-reduction: rem-calc(5);
+// $h5-font-reduction: 0;
+// $h6-font-reduction: 0;
+
+// These control how subheaders are styled.
+// $subheader-line-height: 1.4;
+// $subheader-font-color: scale-color($header-font-color, $lightness: 35%);
+// $subheader-font-weight: $font-weight-normal;
+// $subheader-top-margin: .2rem;
+// $subheader-bottom-margin: .5rem;
+
+// A general <small> styling
+// $small-font-size: 60%;
+// $small-font-color: scale-color($header-font-color, $lightness: 35%);
+
+// We use these to style paragraphs
+// $paragraph-font-family: inherit;
+// $paragraph-font-weight: $font-weight-normal;
+// $paragraph-font-size: 1rem;
+// $paragraph-line-height: 1.6;
+// $paragraph-margin-bottom: rem-calc(20);
+// $paragraph-aside-font-size: rem-calc(14);
+// $paragraph-aside-line-height: 1.35;
+// $paragraph-aside-font-style: italic;
+// $paragraph-text-rendering: optimizeLegibility;
+
+// We use these to style <code> tags
+// $code-color: grayscale($primary-color);
+// $code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
+// $code-font-weight: $font-weight-normal;
+// $code-background-color: scale-color($secondary-color, $lightness: 70%);
+// $code-border-size: 1px;
+// $code-border-style: solid;
+// $code-border-color: scale-color($code-background-color, $lightness: -10%);
+// $code-padding: rem-calc(2) rem-calc(5) rem-calc(1);
+
+// We use these to style anchors
+// $anchor-text-decoration: none;
+// $anchor-text-decoration-hover: none;
+// $anchor-font-color: $primary-color;
+// $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%);
+
+// We use these to style the <hr> element
+// $hr-border-width: 1px;
+// $hr-border-style: solid;
+// $hr-border-color: #ddd;
+// $hr-margin: rem-calc(20);
+
+// We use these to style lists
+// $list-font-family: $paragraph-font-family;
+// $list-font-size: $paragraph-font-size;
+// $list-line-height: $paragraph-line-height;
+// $list-margin-bottom: $paragraph-margin-bottom;
+// $list-style-position: outside;
+// $list-side-margin: 1.1rem;
+// $list-ordered-side-margin: 1.4rem;
+// $list-side-margin-no-bullet: 0;
+// $list-nested-margin: rem-calc(20);
+// $definition-list-header-weight: $font-weight-bold;
+// $definition-list-header-margin-bottom: .3rem;
+// $definition-list-margin-bottom: rem-calc(12);
+
+// We use these to style blockquotes
+// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%);
+// $blockquote-padding: rem-calc(9 20 0 19);
+// $blockquote-border: 1px solid #ddd;
+// $blockquote-cite-font-size: rem-calc(13);
+// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%);
+// $blockquote-cite-link-color: $blockquote-cite-font-color;
+
+// Acronym styles
+// $acronym-underline: 1px dotted #ddd; 
+
+// 5. Grid
+// - - - - - - - - - - - - - - -
+
+// $container-width: rem-calc(900);
+// $block-padding: $global-padding;
+// $total-columns: 12;
+// $block-grid-max-size: 6; 
+
+// 6. Button
+// - - - - - - - - - - - - - - -
+
+// $button-padding: 0.85em 1em;
+// $button-margin: 0 $global-padding $global-padding 0;
+// $button-style: solid;
+// $button-background: $primary-color;
+// $button-color: auto;
+// $button-radius: 0;
+// $button-sizes: (
+//   tiny: 0.7,
+//   small: 0.8,
+//   medium: 1,
+//   large: 1.3,
+// );
+// $button-font-size: 0.9rem;
+// $button-opacity-disabled: 0.5;
+// $button-tag-selector: false; 
+
+// 7. Accordion
+// - - - - - - - - - - - - - - -
+
+// $accordion-border: 1px solid $gray-dark;
+
+// $accordion-title-background: $gray-light;
+// $accordion-title-background-hover: smartscale($accordion-title-background, 5%);
+// $accordion-title-background-active: smartscale($accordion-title-background, 3%);
+// $accordion-title-color: isitlight($accordion-title-background);
+// $accordion-title-color-active: isitlight($accordion-title-background);
+
+// $accordion-title-padding: $global-padding;
+// $accordion-content-padding: $global-padding; 
+
+// 8. Action Sheet
+// - - - - - - - - - - - - - - -
+
+// $actionsheet-background: white;
+// $actionsheet-border-color: #ccc;
+// $actionsheet-animate: transform opacity;
+// $actionsheet-animation-speed: 0.25s;
+// $actionsheet-width: 300px;
+// $actionsheet-radius: 4px;
+// $actionsheet-shadow: 0 -3px 10px rgba(black, 0.25);
+// $actionsheet-padding: $global-padding;
+// $actionsheet-tail-size: 10px;
+
+// $actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25);
+
+// $actionsheet-link-color: #000;
+// $actionsheet-link-background-hover: smartscale($actionsheet-background); 
+
+// 9. Block List
+// - - - - - - - - - - - - - - -
+
+// $blocklist-background: #fff;
+// $blocklist-fullbleed: true;
+// $blocklist-fontsize: 1rem;
+
+// $blocklist-item-padding: 0.8rem 1rem;
+// $blocklist-item-color: isitlight($blocklist-background, #000, #fff);
+// $blocklist-item-background-hover: smartscale($blocklist-background, 4.5%);
+// $blocklist-item-color-disabled: #999;
+// $blocklist-item-border: 1px solid smartscale($blocklist-background, 18.5%);
+
+// $blocklist-item-label-color: scale-color($blocklist-item-color, $lightness: 60%);
+// $blocklist-item-icon-size: 0.8;
+
+// $blocklist-header-fontsize: 0.8em;
+// $blocklist-header-color: smartscale($blocklist-item-color, 40%);
+// $blocklist-header-uppercase: true;
+
+// $blocklist-check-icons: true; 
+
+// 10. Button Group
+// - - - - - - - - - - - - - - -
+
+// $btngroup-background: $primary-color;
+// $btngroup-color: #fff;
+// $btngroup-radius: $button-radius; 
+
+// 11. Card
+// - - - - - - - - - - - - - - -
+
+// $card-background: #fff;
+// $card-color: isitlight($card-background);
+// $card-border: 1px solid smartscale($card-background, 7%);
+// $card-radius: $global-radius;
+// $card-shadow: 0 1px 2px rgba(#000, 0.2);
+// $card-padding: $global-padding;
+// $card-margin: 0.5rem;
+
+// $card-divider-background: smartscale($card-background, 7%); 
+
+// 12. Extras
+// - - - - - - - - - - - - - - -
+
+// $closebutton-position: (top right);
+// $closebutton-size: 2em;
+// $closebutton-lineheight: 0.5;
+// $closebutton-color: #999;
+// $closebutton-color-hover: #333;
+
+// $thumbnail-padding: 0.5rem;
+// $thumbnail-shadow: 0 3px 15px rgba(black, 0.25); 
+
+// 13. Forms
+// - - - - - - - - - - - - - - -
+
+// Basic form variables
+// $form-fontsize: 1rem;
+// $form-padding: 0.5rem;
+
+// Text fields
+// $input-color: #000;
+// $input-color-hover: $input-color;
+// $input-color-focus: $input-color;
+// $input-background: #fff;
+// $input-background-hover: $input-background;
+// $input-background-focus: $input-background;
+// $input-border: 1px solid #ccc;
+// $input-border-hover: 1px solid #bbb;
+// $input-border-focus: 1px solid #999;
+
+// Select menus
+// $select-color: #000;
+// $select-background: #fafafa;
+// $select-background-hover: smartscale($select-background, 4%);
+// $select-arrow: true;
+// $select-arrow-color: $select-color;
+
+// Labels
+// $form-label-fontsize: 0.9rem;
+// $form-label-margin: 0.5rem;
+// $form-label-color: #333;
+
+// Inline labels
+// $inlinelabel-color: #333;
+// $inlinelabel-background: #eee;
+// $inlinelabel-border: $input-border;
+
+// Range slider
+// $slider-background: #ddd;
+// $slider-height: 1rem;
+// $slider-radius: 0px;
+// $slider-thumb-height: 1.5rem;
+// $slider-thumb-color: $primary-color;
+// $slider-thumb-radius: 0px;
+
+// Progress and meter
+// $meter-height: 1.5rem;
+// $meter-background: #ccc;
+// $meter-fill: $primary-color;
+// $meter-fill-high: $success-color;
+// $meter-fill-medium: #e7cf00;
+// $meter-fill-low: $alert-color;
+// $meter-radius: 0; 
+
+// 14. Iconic
+// - - - - - - - - - - - - - - -
+
+// $iconic-primary-fill: $primary-color;
+// $iconic-primary-stroke: $primary-color;
+// $iconic-accent-fill: $iconic-primary-fill;
+// $iconic-accent-stroke: $iconic-accent-fill; 
+
+// 15. Label
+// - - - - - - - - - - - - - - -
+
+// $label-fontsize: 0.8rem;
+// $label-padding: ($global-padding / 3) ($global-padding / 2);
+// $label-radius: 0;
+// $label-background: $primary-color;
+// $label-color: isitlight($primary-color);
+
+// $badge-fontsize: 0.8em;
+// $badge-diameter: 1.5rem;
+// $badge-background: $primary-color;
+// $badge-color: #fff;
+
+// DEPRECATED: these variables will be removed in v1.1.
+// $badge-padding: .1em .61em;
+// $badge-radius: $global-rounded;
+// $badge-font-color: #fff; 
+
+// 16. Menu Bar
+// - - - - - - - - - - - - - - -
+
+// $menubar-fontsize: 1rem;
+// $menubar-background: #fff;
+// $menubar-background-hover: smartscale($menubar-background, 7%);
+// $menubar-background-active: $menubar-background-hover;
+// $menubar-color: isitlight($menubar-background);
+// $menubar-color-hover: $menubar-color;
+// $menubar-color-active: $menubar-color-hover;
+
+// $menubar-item-padding: $global-padding;
+// $menubar-icon-size: 25px;
+// $menubar-icon-spacing: $menubar-item-padding; 
+
+// 17. Modal
+// - - - - - - - - - - - - - - -
+
+// $modal-background: #fff;
+// $modal-border: 0;
+// $modal-radius: 0px;
+// $modal-shadow: none;
+// $modal-zindex: 1000;
+// $modal-sizes: (
+//   tiny: 300px,
+//   small: 500px,
+//   medium: 600px,
+//   large: 800px,
+// );
+
+// $modal-overlay-class: 'modal-overlay';
+// $modal-overlay-background: rgba(#333, 0.7); 
+
+// 18. Motion UI
+// - - - - - - - - - - - - - - -
+
+// Classes to use when triggering in/out animations
+// $motion-class: (
+//   in: "ng-enter",
+//   out: "ng-leave",
+// );
+// $motion-class-active: (
+//   in: "ng-enter-active",
+//   out: "ng-leave-active",
+// );
+// $motion-class-stagger: (
+//   in: "ng-enter-stagger",
+//   out: "ng-leave-stagger",
+// );
+
+// Set if movement-based transitions should also fade the element in and out
+// $motion-slide-and-fade: false;
+// $motion-hinge-and-fade: true;
+// $motion-scale-and-fade: true;
+// $motion-spin-and-fade: true;
+
+// Default speed for transitions and animations
+// $motion-duration-default: 500ms;
+// Slow and fast modifiders
+// $motion-duration-slow: 750ms;
+// $motion-duration-fast: 250ms;
+// $motion-stagger-duration-default: 150ms;
+// $motion-stagger-duration-short: 50ms;
+// $motion-stagger-duration-long: 300ms;
+
+// Default timing function for transitions and animations
+// $motion-timing-default: ease;
+// Built-in and custom easing functions
+// Every item in this map becomes a CSS class
+// $motion-timings: (
+//   linear: linear,
+//   ease: ease,
+//   easeIn: ease-in,
+//   easeOut: ease-out,
+//   easeInOut: ease-in-out,
+//   bounceIn: cubic-bezier(0.485, 0.155, 0.240, 1.245),
+//   bounceOut: cubic-bezier(0.485, 0.155, 0.515, 0.845),
+//   bounceInOut: cubic-bezier(0.760, -0.245, 0.240, 1.245),
+// );
+
+// Default delay for all transitions and animations
+// $motion-delay-default: 0;
+// Short and long delay modifiers
+// $motion-delay-short: 300ms;
+// $motion-delay-long: 700ms; 
+
+// 19. Notification
+// - - - - - - - - - - - - - - -
+
+// $notification-default-position: right top;
+// $notification-width: rem-calc(400);
+// $notification-offset: $global-padding;
+
+// $notification-background: $primary-color;
+// $notification-color: white;
+// $notification-padding: $global-padding;
+// $notification-radius: 4px;
+
+// $notification-icon-size: 60px;
+// $notification-icon-margin: $global-padding;
+// $notification-icon-align: top;
+ 
+
+// 20. Off-canvas
+// - - - - - - - - - - - - - - -
+
+// $offcanvas-size-horizontal: 250px;
+// $offcanvas-size-vertical: 250px;
+
+// $offcanvas-background: #fff;
+// $offcanvas-color: isitlight($offcanvas-background);
+// $offcanvas-padding: 0;
+// $offcanvas-shadow: 3px 0 10px rgba(black, 0.25);
+// $offcanvas-animation-speed: 0.25s;
+
+// $offcanvas-frame-selector: '.grid-frame'; 
+
+// 21. Panel
+// - - - - - - - - - - - - - - -
+
+// $panel-size-horizontal: 300px;
+// $panel-size-vertical: 300px;
+// $panel-padding: 0;
+
+// $panel-background: #fff;
+// $panel-shadow: 3px 0 10px rgba(black, 0.25);
+// $panel-animation-speed: 0.25s; 
+
+// 22. Popup
+// - - - - - - - - - - - - - - -
+
+// $popup-width: rem-calc(300);
+// $popup-background: #fff;
+// $popup-border: 0;
+// $popup-radius: 0;
+// $popup-shadow: 0 0 10px rgba(#000, 0.25); 
+
+// 23. Switch
+// - - - - - - - - - - - - - - -
+
+// $switch-width: rem-calc(50);
+// $switch-height: rem-calc(32);
+// $switch-background: #ccc;
+// $switch-background-active: $primary-color;
+// $switch-border: 0;
+// $switch-radius: 9999px;
+// $switch-animation-speed: 0.15s;
+
+// $switch-paddle-color: white;
+// $switch-paddle-offset: 4px; 
+
+// 24. Tabs
+// - - - - - - - - - - - - - - -
+
+// $tabstrip-background: transparent;
+
+// $tab-title-background: $gray-light;
+// $tab-title-background-hover: smartscale($tab-title-background, 5%);
+// $tab-title-background-active: smartscale($tab-title-background, 3%);
+// $tab-title-color: isitlight($tab-title-background);
+// $tab-title-color-active: $tab-title-color;
+
+// $tab-title-padding: $global-padding;
+// $tab-content-padding: $global-padding; 
+
+// 25. Title Bar
+// - - - - - - - - - - - - - - -
+
+// $titlebar-center-width: 50%;
+// $titlebar-side-width: (100% - $titlebar-center-width) / 2;
+// $titlebar-background: #eee;
+// $titlebar-color: #000;
+// $titlebar-border: 1px solid #ccc;
+// $titlebar-padding: $global-padding;
+// $titlebar-item-classes: (
+//   center: 'center',
+//   left: 'left',
+//   right: 'right',
+//   title: 'title',
+// ); 
+
diff --git a/templates/hybrid-html5/app/Frontend/styles/foundation/foundation-conf.scss b/templates/hybrid-html5/app/Frontend/styles/foundation/foundation-conf.scss
new file mode 100644
index 0000000..bdcfe1f
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/styles/foundation/foundation-conf.scss
@@ -0,0 +1,19 @@
+@import "foundation-settings";
+@import "foundation-icons";
+@import "foundation";
+
+
+/*.sidebar {
+    // Panel on small screens
+    @extend %panel-base;
+    @include panel-position(left);
+    // Override styles to become a block on medium screens
+    @include breakpoint(medium) {
+    @include grid-panel-reset;
+    @include grid-block(4);
+    }
+    // Change size to 3 columns on large screens
+    @include breakpoint(large) {
+    @include grid-size(3);
+    }
+}*/
+\ No newline at end of file
diff --git a/templates/hybrid-html5/app/Frontend/widgets/ActionButtons/ActionButtons.scss b/templates/hybrid-html5/app/Frontend/widgets/ActionButtons/ActionButtons.scss
new file mode 100644
index 0000000..6cb8338
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/widgets/ActionButtons/ActionButtons.scss
@@ -0,0 +1,40 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+@import "app/ibz-mixins";
+
+// place here your submit buttons customization
+appli-button {
+    @include ibz-button(grey,1rem)
+    img {
+        height: 3rem;
+    }
+    
+    
+    .disable>i {
+      text-decoration:none; // really not needed for the Top Bar, just for general technique
+      cursor: auto;
+      color: grey !important;
+    }
+}
+
+.appli-menu-start {    
+    .start-start, .stop-stop {
+        i {color: grey;}
+    }
+}
diff --git a/templates/hybrid-html5/app/Frontend/widgets/ActionButtons/AppliButton.js b/templates/hybrid-html5/app/Frontend/widgets/ActionButtons/AppliButton.js
new file mode 100644
index 0000000..269ee81
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/widgets/ActionButtons/AppliButton.js
@@ -0,0 +1,205 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ * 
+ * Bugs: Input with Callback SHOULD BE get 'required' class
+ */
+
+(function () {
+    'use strict';
+
+    var tmplAppli = '<div  ng-click="clicked()">' +
+            '<img ng-src="{{icon}}">' +
+            '<span>{{label}}</span>' +
+            '</div>';
+    
+    var tmplModal = 
+            '<b class="close-button" ng-click="close()">×</b>' +
+            '<img ng-src="{{icon}}">' +
+            '<span class="modal-text">Application <b>{{label}}</b></span>' +
+            '<ul class="vertical icon-left primary menu-bar appli-menu-start">' +
+            '<li class=start-{{runstatus}}><a ng-click=action("start")><i class="fi-check"> Start</i></a></li>' +
+            '<li class=stop-{{runstatus}}><a ng-click=action("stop")><i class="fi-x"> Stop</i></a></li>' +
+            '<li><a ng-click=action("info")><i class="fi-info"> Info</i></a></li>' +
+            '<li class=start-{{runstatus}}><a ng-click=action("uninstall")><i class="fi-x"> Uninstall</i></a></li>' +
+            '</ul>' +
+            '';
+    
+    var tmplDetail = 
+            '<b class="close-button" ng-click="close()">×</b>' +
+            '<img ng-src="{{icon}}">' +
+            '<span class="modal-text">Application <b>{{label}}</b></span>' +
+            '<ul class="vertical icon-left appli-menu-info">' +
+            '<li><i class="fi-paperclip"> Name : {{detail.name}} </i></li>' +
+            '<li><i class="fi-info"> Description {{detail.description}}</i></li>' +
+            '<li><i class="fi-torso"> Author : {{detail.author}}</i></li>' +
+            '</ul>' +
+            '';
+
+    angular.module('AppliButton', [])
+            .directive('appliButton', function (AppConfig, AppCall, ModalFactory, Notification, $timeout, $window, $location, urlquery) {
+
+                function mymethods(scope, elem, attrs) {
+                    scope.runstatus = "stop";
+                    scope.runmode   = urlquery.runmode || "auto";
+                    scope.clicked = function () {
+
+                        var notifyError = function(action, response) {
+                            Notification.error ({message: "Fail /api/afm-main" + action + "=" + scope.label + " RunID="+ scope.appID, delay: 5000});
+                            elem.addClass ("fail");
+                            elem.removeClass ("success");
+                            scope.callback (scope.appID, action, response);
+                        };
+                        
+                        var notifySuccess = function (action, response) {
+                            elem.removeClass ("fail");
+                            scope.runID = response.data.response.runid;
+                            scope.callback (scope.appID, action, response);
+                        };
+                        
+                        var closeModApp = function() {
+                            scope.modApp.deactivate();
+                            $timeout (function() {scope.modApp.destroy();}, 1000);
+                        };
+                        
+                        var closeModInfo = function() {
+                            scope.modInfo.deactivate();
+                            $timeout (function() {scope.modInfo.destroy();}, 1000);
+                        };
+                        
+                        var actionModal = function(action) {
+                            console.log ("Modal Action=%s", action);
+                            switch (action) {
+                                
+                                case "start":
+                                    if (scope.runstatus !== "stop") return;
+                                    AppCall.get ("afm-main", "start", {id: scope.appID, mode: scope.runmode}, function(response) {
+                                        if (response.status !== 200 || response.data.jtype !== "afb-reply") {
+                                            notifyError ("start", response);
+                                            return;
+                                        }
+                                        scope.runstatus="start";
+                                        notifySuccess (action, response);
+					if(response.data.response.uri)
+                                            scope.winapp= $window.open(response.data.response.uri.replace("%h", $location.host()));                                            
+                                    });
+                                    break;
+                                    
+                                case "stop":
+                                    if (scope.runstatus !== "start") return;
+                                    
+                                    AppCall.get ("afm-main", "terminate", {runid: scope.runID}, function(response) {
+                                        if (response.status !== 200 || response.data.jtype !== "afb-reply") {
+                                            notifyError ("stop", response);
+                                            return;
+                                        }
+                                        scope.runstatus="stop";
+                                        
+                                        // if a remote window app was open let's close it
+                                        if (scope.winapp) {
+                                           console.log ("Closing Application Window label=%s id=%s", scope.label, scope.appID);
+                                           scope.winapp.close();
+                                           scope.winapp=false;
+                                        }
+                                        notifySuccess (action, response);
+                                    });
+                                    break;
+                                        
+                                case "info":
+                                    AppCall.get ("afm-main", "detail", {id: scope.appID}, function(response) {
+                                        if (response.status !== 200 || response.data.jtype !== "afb-reply") {
+                                            notifyError ("detail", response);
+                                            return;
+                                        }
+                                                                               
+                                        // reference http://foundation.zurb.com/apps/docs/#!/angular-modules
+                                        var config = {
+                                            animationIn: 'slideInFromTop',
+                                            contentScope: {
+                                                close   : closeModInfo,
+                                                icon    : scope.icon,
+                                                label   : scope.appID,
+                                                detail  : response.data.response
+                                            }, template : tmplDetail
+                                        }; 
+                                        // Popup Modal to render application data
+                                        scope.modInfo = new ModalFactory(config);
+                                        scope.modInfo.activate ();
+
+                                    });
+                                    break;
+
+                                case "uninstall":
+                                    if (scope.runstatus !== "stop") return;
+                                    AppCall.get ("afm-main", "uninstall", {id: scope.appID}, function(response) {
+                                        if (response.status !== 200 || response.data.jtype !== "afb-reply") {
+                                            notifyError ("uninstall", response);
+                                            return;
+                                        }
+                                        
+                                        notifySuccess (action, response);
+                                    });
+                                    break;
+
+                                default:
+                                    console.log ("ActionModal unknown action=[%s]", action);
+                                    break;
+                            }
+                            
+                            closeModApp();
+                        };
+            
+                        // reference http://foundation.zurb.com/apps/docs/#!/angular-modules
+                        var config = {
+                            animationIn: 'slideInFromTop',
+                            contentScope: {
+                                action   : actionModal,
+                                runstatus: scope.runstatus,
+                                close    : closeModApp,
+                                icon     : scope.icon,
+                                label    : scope.label
+                            }, template  : tmplModal
+                        }; 
+                        // Popup Modal to render application data
+                        scope.modApp = new ModalFactory(config);
+                        scope.modApp.activate ();
+                    };
+
+                    // extract application information from AppID+Store
+                    if (attrs.handle && scope.store [attrs.handle].name) {
+                        scope.icon  = AppConfig.paths.icons + attrs.handle; //scope.store [attrs.handle].name.toLowerCase() + '-ico.png';
+                        scope.label = scope.store [attrs.handle].name;
+                        scope.appID= attrs.handle;
+                    } else {
+                         scope.icon  = AppConfig.paths.icons + 'w3c-ico.png';
+                         scope.label = attrs.handle;
+                    }
+                                
+                    // add label as class
+                    elem.addClass (scope.label.toLowerCase());
+                    
+                    // note: clicked in imported and when template is clicked
+                    // it will call clicked method passed in param.
+                }
+                
+                return {
+                    restrict: 'E',
+                    template: tmplAppli,
+                    link: mymethods,
+                    scope: {callback: '=', store: '='}
+                };
+            });
+})();
diff --git a/templates/hybrid-html5/app/Frontend/widgets/ActionButtons/SubmitButton.js b/templates/hybrid-html5/app/Frontend/widgets/ActionButtons/SubmitButton.js
new file mode 100644
index 0000000..323cd46
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/widgets/ActionButtons/SubmitButton.js
@@ -0,0 +1,52 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ * 
+ * Bugs: Input with Callback SHOULD BE get 'required' class
+ */
+
+(function () {
+    'use strict';
+
+    var tmpl = '<div  ng-click="clicked()">' +
+            '<i class="{{icon}}"></i>' +
+            '<span>{{label}}</span>' +
+            '</div>';
+
+    angular.module('SubmitButton', [])
+            .directive('submitButton', function () {
+
+                function mymethods(scope, elem, attrs) {
+
+                    // ajust icon or use default
+                    scope.icon = attrs.icon || 'fi-foot';
+                    scope.label = attrs.label || 'Next';
+                                
+                    // add label as class
+                    elem.addClass (scope.label.toLowerCase());
+                    
+                    // note: clicked in imported and when template is clicked
+                    // it will call clicked method passed in param.
+                }
+                
+                return {
+                    restrict: 'E',
+                    template: tmpl,
+                    link: mymethods,
+                    scope: {clicked : '='}
+                };
+            });
+})();
diff --git a/templates/hybrid-html5/app/Frontend/widgets/Navigation/LinkButton.js b/templates/hybrid-html5/app/Frontend/widgets/Navigation/LinkButton.js
new file mode 100644
index 0000000..3e83425
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/widgets/Navigation/LinkButton.js
@@ -0,0 +1,57 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ * 
+ * Bugs: Input with Callback SHOULD BE get 'required' class
+ */
+
+(function () {
+    'use strict';
+
+    var tmpl = '<span title="Goto: {{href}}" ng-click="clicked()">' +
+            '<i class="{{icon}}"></i>' +
+            '<span>{{label}}</span>' +
+            '</span>';
+
+
+    angular.module('LinkButton', [])
+            .directive('linkButton', function ($location) {
+                
+                function mymethods(scope, elem, attrs) {
+
+                    scope.clicked = function () {
+                        
+                        if (!attrs.query) $location.path(attrs.href);
+                        else $location.path(attrs.href).search(attrs.query);
+                    };
+
+                    // ajust icon or use default
+                    scope.icon = attrs.icon   || 'fi-link';
+                    scope.label = attrs.label || 'Jump';
+                    scope.href  = attrs.href  || '/home';
+                    
+                    // add label as class
+                    elem.addClass (scope.label.toLowerCase());
+                }
+
+                return {
+                    restrict: 'E',
+                    template: tmpl,
+                    link: mymethods,
+                    scope: {}
+                };
+            });
+})();
diff --git a/templates/hybrid-html5/app/Frontend/widgets/Navigation/Navigation.scss b/templates/hybrid-html5/app/Frontend/widgets/Navigation/Navigation.scss
new file mode 100644
index 0000000..2babf24
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/widgets/Navigation/Navigation.scss
@@ -0,0 +1,26 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+@import "app/ibz-mixins";
+
+
+link-button {@include ibz-button(#3366ff,1rem)};
+
+//pale blue for secondaty link
+link-button.secondary {@include ibz-button(#99b3ff,1rem)};
+
diff --git a/templates/hybrid-html5/app/Frontend/widgets/Notifications/ModalNotification.js b/templates/hybrid-html5/app/Frontend/widgets/Notifications/ModalNotification.js
new file mode 100644
index 0000000..37ba047
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/widgets/Notifications/ModalNotification.js
@@ -0,0 +1,85 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ * 
+ * Bugs: Input with Callback SHOULD BE get 'required' class
+ * 
+ * ref: https://developer.mozilla.org/en-US/docs/Web/Events/mouseover
+ * 
+ * usage: 
+ * 
+ * tipModal: listen event from elem.parent() to display tip-modal
+ *      <div class="xxxx">
+ *          <tip-modal tip=xxxx></tip-modal>
+ *          <input-text ....></input-text>
+ *      </div>
+ *      
+ * Note: use CSS.visibility to avoid display flickering at initial display.
+ */
+
+(function () {
+    'use strict';
+
+    var tmpl = '<div class="tip-modal-popup">' +
+            '<i class="{{icon}}"></i>' +
+            '<span>{{tip}}</span>' +
+            '</span></div>' ;
+
+    angular.module('ModalNotification', [])
+            .directive('tipModal', function ($timeout) {
+
+                function mymethods(scope, elem, attrs) {
+                    scope.parent = elem.parent();
+                    scope.modal    = elem.find("div");
+                    
+    
+                    // delay tip display to avoid blinking when moving mouse fast
+                    function display () {
+                        function action() {
+                             if (scope.show) scope.modal.css({opacity: 1, visibility:'visible'});  
+                        }
+                        scope.show = true;
+                        scope.timeout = $timeout(action, scope.delay);
+                    }
+                    
+                    function close () {
+                      scope.show = false;                     
+                      scope.modal.css({opacity: 0, visibility:'hidden'});
+                    }
+                    
+
+                    // ajust icon or use default
+                    scope.icon  = attrs.icon || 'fi-lightbulb';
+                    
+                    // Update Parent element to get mouse event
+                    scope.parent.addClass ('as-modal-tip');
+                    scope.parent.bind('click', close);
+                    scope.parent.bind('focus', display);
+                    scope.parent.bind('mouseover', display);
+                    scope.parent.bind('mouseleave', close);
+                    scope.parent.bind('blur', close);
+                    
+                    scope.delay = attrs.delay || 1000; // wait 1s before displaying tip
+                }
+
+                return {
+                    restrict: 'E',
+                    template: tmpl,
+                    link: mymethods,
+                    scope: {tip: "="} // tip may not be defined when widget is display
+                };
+            });
+})();
diff --git a/templates/hybrid-html5/app/Frontend/widgets/Notifications/Notifications.scss b/templates/hybrid-html5/app/Frontend/widgets/Notifications/Notifications.scss
new file mode 100644
index 0000000..fb740b7
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/widgets/Notifications/Notifications.scss
@@ -0,0 +1,63 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ * 
+ * Reference: http://www.greywyvern.com/?post=337
+ */
+
+@import "app/ibz-mixins";
+
+
+link-button {@include ibz-button(#3366ff,1rem)};
+
+// Modal should be relative and tip-modal-popup absolute
+tip-modal {
+    position:relative;
+}
+
+.tip-modal-popup {
+    //visibility: hidden;
+    width: 20rem;
+    position:absolute;
+    top:1em;
+    padding: 0.2em 0.6em;
+    border:1px solid #996633;
+    background-color:#e5ffff;
+    color:#000;
+    opacity:0;
+    transition:visibility .5s linear 1s,opacity 1s linear;
+    border-radius: 5px;
+    i {
+        margin: 0 .3rem 0 0;
+        display: inline;
+    }
+}
+
+token-refresh {
+    @include ibz-button(grey,1rem)
+    i {margin-left: .5rem;}
+    margin-right: 1rem;
+}
+
+token-refresh.online {
+    color: #0066cc;
+    i {color: lime;}    
+}
+
+token-refresh.offline {
+    color: #ff00ff;
+    i {color: red;}    
+}
diff --git a/templates/hybrid-html5/app/Frontend/widgets/Notifications/TokenRefreshSvc.js b/templates/hybrid-html5/app/Frontend/widgets/Notifications/TokenRefreshSvc.js
new file mode 100644
index 0000000..2c7c3da
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/widgets/Notifications/TokenRefreshSvc.js
@@ -0,0 +1,149 @@
+/*
+ alsa-gateway -- provide a REST/HTTP interface to ALSA-Mixer
+
+ Copyright (C) 2015, Fulup Ar Foll
+
+ This program is free software; you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation; either version 2 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with scope program; if not, write to the Free Software
+ Foundation, Inc., 675 Mass Ave, Cambridge, MA 02139, USA.
+
+ References:
+
+ */
+
+(function () {
+    'use strict';
+
+    var template =
+          '<div class="afb-monitor" ng-click="getping()">' +
+         '<span class="afb-refresh-token"  >afb://{{hostname}}:{{httpdport}}</span>' +
+         '<i class="{{icon}}"></i>' +
+         '</div>';
+
+
+// scope module is load statically before any route is cativated
+angular.module('TokenRefresh', ['AppConfig', 'ModalNotification'])
+
+    .directive ('tokenRefresh', function($log, $window, $timeout, $location, Notification, AppConfig, AppCall) {
+
+    function mymethods(scope, elem, attrs) {
+        scope.logged=undefined; // neither thu neither false
+        
+        $window.onbeforeunload = function () {
+            AppCall.get (scope.plugin, "logout", {/*query*/}, function () {    
+            $log.log("OPA exit");            
+            });
+        };
+                 
+        scope.online = function () {
+            elem.addClass    ("online");
+            elem.removeClass ("offline");
+            scope.logged=true;
+        };
+
+        scope.offline = function(){
+            elem.addClass    ("offline");
+            elem.removeClass ("online");
+            scope.logged=false;
+        };
+        
+        scope.onerror = function() {
+            if (scope.logged !== false)  {
+                Notification.warning ({message: "AppFramework Binder Lost", delay: 5000});
+                scope.offline();
+            }
+            scope.status = 0;
+        };
+        
+        scope.onsuccess = function(jresp, errcode) {
+            
+            if (errcode !== 200 || jresp.request.status !== "success") {
+                Notification.warning ({message: "auto-connect :" + jresp.request.info, delay: 10000});
+                scope.offline(); 
+                return false;
+            }
+            
+            if (scope.logged !== true)  {
+                Notification.success ({message: "AppFramework Binder Connected", delay: 3000});
+                scope.online();
+                if (scope.callback) scope.callback(jresp);
+            }
+            
+            scope.status = 1;            
+            return true;
+        };
+
+        // Check Binder status
+        scope.getping = function() {
+            
+            AppCall.get (scope.plugin, "ping", {/*query*/},function(jresp, errcode) {
+                if (errcode !== 200 || jresp.request.status !== "success") {
+                    Notification.warning ({message: jresp.request.info, delay: 5000});
+                    scope.offline(); 
+                    return;
+                }
+                // restart a new timer for next ping
+                $timeout (scope.getping, AppConfig.session.pingrate*1000);
+            }, scope.onerror);
+        };
+        
+        // Check Binder status
+        scope.refresh = function() {
+            
+            AppCall.get (scope.plugin, "refresh", {/*query*/}, function(jresp, errcode) {
+
+                scope.onsuccess (jresp, errcode);
+                
+                // restart a new timer for next refresh
+                $timeout (scope.refresh, AppConfig.session.timeout *250);
+            }, scope.onerror);            
+        };
+        
+        // Initial connection
+        scope.loggin = function() {            
+            AppCall.get (scope.plugin, "connect", {token: AppConfig.session.initial}, function(jresp, errcode) {
+                
+                if (!scope.onsuccess (jresp, errcode)) return;
+                
+                // Intial token was accepted let's start ping & refresh
+                $timeout (scope.getping, AppConfig.session.pingrate*1000);
+                $timeout (scope.refresh, AppConfig.session.timeout *250);
+ 
+            }, scope.onerror);
+        };
+
+
+        // Parse Widget Parameters
+        scope.plugin    = attrs.plugin || "auth";
+        scope.icon      = attrs.icon   || "fi-lightbulb";
+        scope.hostname  = $location.host();
+        scope.httpdport = $location.port();
+        scope.autolog   = JSON.parse(attrs.autolog || false);
+        
+        // autostart log if requested
+        if (scope.autolog) scope.loggin();
+        
+    }
+
+    return {
+        template: template,
+        scope: {
+            callback : "="
+        },
+        restrict: 'E',
+        link: mymethods
+    };
+});
+
+})();
+console.log ("Token Refresh Loaded");
diff --git a/templates/hybrid-html5/app/Frontend/widgets/RangeSliders/RangeSliderMod.js b/templates/hybrid-html5/app/Frontend/widgets/RangeSliders/RangeSliderMod.js
new file mode 100644
index 0000000..77f0fce
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/widgets/RangeSliders/RangeSliderMod.js
@@ -0,0 +1,631 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ * 
+ * Bugs: Input with Callback SHOULD BE get 'required' class
+ * 
+ * ref: https://developer.mozilla.org/en-US/docs/Web/Events/mouseover
+ * 
+ * usage: 
+Usage  <range-slider>
+---------------------
+   <range-slider
+      id="my-slider-name"                     // only use as an argument to callback
+      class="my-custom-class"                 // default class is ibz-range-slider
+      placeholder="Track Date Selection"      // place holder for date readonly input zone
+
+      <!-- Foundation classes -->
+      class="radius"                          // check Zurb foundation doc for further info.
+      class="ibz-handle-display"              // increase handle width to hold slider current value
+
+      <!-- Angular Scope Variables -->
+      callback="myCallBack"                    // $scope.myCallBack(sliderhandle) is called when ever slider handle blur
+      formatter="SliderFormatCB"               // $scope.myFormatter(value, sliderid) when exist is call when ever slider handle moves. Should return external form of slider value.
+      ng-model="xxxxxx"                        // xxx Must be defined, script will store a new RangerObject within provided ng-model variable.
+      start-at="ScopeVar"                      // Dynamic limitation when slider is constrains by an external componant [ex: check in/out]
+      stop-at="ScopeVar"                       // Idem but for end.
+
+      <!-- Angular Directive Attributes -->
+      not-less="integer"                       // Fixed starting value for slider [default 0]
+      not-more="integer"                       // Fixed end value for sliders [default 100]
+      by-step="+-integer"                      // If by-step is >0 then slider use it as step-value, when negative use it for decimal precision
+      display-target="handle"                  // display slider external formated value in the handle [requirer calss="ibz-handle-display"]
+      dual-handles='true'                      // add a second handle to slider for min/max range
+      initial='value|[start/stop]'             // slider initial value [dual-handles] may have initial values
+   /></range-slider>
+ */
+
+(function () {
+    'use strict';
+
+var RangeSlider = angular.module('RangeSlider',[]);
+
+function RangeSliderHandle (scope) {
+    var internals = [];
+    var externals = [];
+
+    this.getId = function() {
+        return scope.sliderid;
+    };
+
+    this.getCbHandle = function() {
+        return scope.cbhandle;
+    };
+
+    this.getView= function (handle) {
+        if (!handle) handle = 0;
+
+        // if value did not change return current external representation
+        if (scope.value[handle] === internals[handle]) return externals[handle];
+
+        // build external representation and save it for further requests
+        internals[handle] = scope.value[handle];
+        if (scope.formatter) externals[handle] = scope.formatter(scope.value[handle], scope.ctrlhandle);
+        else  externals[handle] = scope.value[handle];
+
+        return externals[handle];
+    };
+
+    this.updateClass = function (classe, status) {
+       scope.updateClass (classe, status);
+    };
+
+    this.forceRefresh = function (timer) {
+       scope.forceRefresh(timer);
+    };
+
+    this.getValue= function (handle) {
+        if (!handle) handle = 0;
+        return scope.value[handle];
+    };
+
+    this.getRelative= function (handle) {
+        if (!handle) handle = 0;
+        return scope.relative[handle];
+    };
+
+    this.setValue= function (value, handle) {
+        if (!handle) handle = 0;
+        scope.setValue (value, handle);
+    };
+
+    this.setDisable= function (flag) {
+        scope.setDisable(flag);
+    };
+}
+
+RangeSlider.directive('rangeSlider', function ($log, $document, $timeout) {
+
+    var template= '<div class="ibz-range-slider range-slider" title="{{title}}"data-slider>'+
+                  '<span class="range-slider-handle handle-min" ng-mousedown="handleCB($event,0)" ng-focus="focusCB(true)" ng-blur="focusCB(false)" role="slider" tabindex="0"></span>'+
+                  '<span class="handle-max" ng-mousedown="handleCB($event,1)" ng-focus="focusCB(true)" ng-blur="focusCB(false)" role="slider" tabindex="0"></span>'+
+                  '<span class="range-slider-active-segment"></span>'+
+                  '<span class="ibz-range-slider-start" ></span> '+
+                  '<span class="ibz-range-slider-stop"></span> '+
+                  '<input id={{sliderid}} type="hidden">'+
+                  '</div>';
+
+
+    function link (scope, element, attrs, model) {
+        // full initialisation of slider from a single object
+        scope.initWidget = function (initvalues) {
+
+            if (initvalues.byStep)  scope.byStep  = parseInt(initvalues.byStep);
+            if (initvalues.notMore) scope.notMore = parseInt(initvalues.notMore);
+            if (initvalues.notLess) scope.notLess = parseInt(initvalues.notLess);
+            if (initvalues.id)      scope.sliderid= initvalues.id;
+
+            // hugely but in some case DOM is not finish when we try to set values !!!
+            if (initvalues.value !== undefined)   {
+                scope.value = initvalues.value;
+                scope.forceRefresh (50); // wait 50ms for DOM to be ready
+            }
+        };
+
+        // this function recompute slide positioning
+        scope.forceRefresh = function (timer) {
+           var value = scope.value;
+           scope.value = [undefined,undefined];
+           $timeout (function() {
+               scope.setValue(value[0],0);
+               if (scope.dual)  scope.setValue(value[1],1);
+           }, timer);
+        };
+
+        // handler to change class from slider handle
+        scope.updateClass = function (classe, status) {
+
+            if (status) element.addClass (classe);
+            else  element.removeClass (classe);
+        };
+
+        scope.setDisable = function (disabled) {
+
+            if (disabled) {
+                element.addClass ("disable");
+                scope.handles[0].css ('visibility','hidden');
+                if (scope.dual) {
+                    scope.handles[1].css ('visibility','hidden');
+                }
+            } else {
+                element.removeClass ("disable");
+                scope.handles[0].css ('visibility','visible');
+                if (scope.dual) scope.handles[1].css ('visibility','visible');
+            }
+
+        };
+
+        scope.normalize = function (value) {
+            var result;
+            var range = scope.notMore - scope.notLess;
+            var point = value * range;
+
+            // if step is positive let's round step by step
+            if (scope.byStep >  0) {
+                var mod = (point - (point % scope.byStep)) / scope.byStep;
+                var rem = point % scope.byStep;
+
+                var round = (rem >= scope.byStep * 0.5 ? scope.byStep : 0);
+                result= (mod * scope.byStep + round) + scope.notLess;
+                //console.log ("range=%d value=%d point=%d mod=%d rem=%d round=%d result=%d", range, value, point, mod, rem, round, result)
+                return result;
+            }
+
+            // if step is negative return round to asked decimal
+            if (scope.byStep <  0) {
+                var power  =  Math.pow (10,(scope.byStep * -1));
+                result = scope.notLess + parseInt (point * power) / power;
+                return (result);
+            }
+
+            // if step is null return full value
+            return point;
+       };
+
+        // return current value
+        scope.getValue = function (offset, handle) {
+            if (scope.vertical) {
+                scope.relative[handle] = (offset - scope.bounds.handles[handle].getBoundingClientRect().height) / (scope.bounds.bar.getBoundingClientRect().height - scope.bounds.handles[handle].getBoundingClientRect().height);
+            } else {
+                scope.relative[handle] = offset /  (scope.bounds.bar.getBoundingClientRect().width - scope.bounds.handles[handle].getBoundingClientRect().width);
+            }
+
+            var newvalue = scope.normalize (scope.relative[handle]);
+
+
+            // if internal value change update or model
+            if (newvalue !== scope.value[handle]) {
+                if (newvalue < scope.startValue) newvalue=scope.startValue;
+                if (newvalue > scope.stopValue)  newvalue=scope.stopValue;
+
+
+                if (scope.formatter) {
+                    scope.viewValue = scope.formatter (newvalue, scope.ctrlhandle);
+                } else {
+                    scope.viewValue = newvalue;
+                }
+                if (scope.displays[handle]) {
+                    scope.displays[handle].html (scope.viewValue);
+                }
+
+                // update external representation of the model
+                scope.value[handle] = newvalue;
+                if (model) model.$setViewValue (scope.viewValue);
+                scope.$apply();
+                if (newvalue > scope.startValue && newvalue < scope.stopValue) scope.translate(offset, handle);
+            }
+        };
+
+
+        scope.setStart = function (value) {
+            var offset;
+            
+            if (value > scope.value[0]) {
+                if (!scope.dual) scope.setValue (value,0);
+                else scope.setValue (value,1);
+            }
+
+            if (scope.vertical) {
+                offset = scope.bounds.bar.getBoundingClientRect().height * (value - scope.notLess) / (scope.notMore - scope.notLess);
+                scope.start.css('height',offset + 'px');
+            } else {
+                offset = scope.bounds.bar.getBoundingClientRect().width * (value - scope.notLess) / (scope.notMore - scope.notLess);
+                scope.start.css('width',offset + 'px');
+            }
+
+            scope.startValue= value;
+        };
+
+        scope.setStop = function (value) {
+            var offset;
+            
+            if (value < scope.value[0]) {
+                if (!scope.dual) scope.setValue (value,0);
+                else scope.setValue (value,1);
+            }
+
+            if (scope.vertical) {
+                offset = scope.bounds.bar.getBoundingClientRect().height * (value - scope.notLess) / (scope.notMore - scope.notLess);
+                scope.start.css('height',offset + 'px');
+            } else {
+                offset = scope.bounds.bar.getBoundingClientRect().width * (value - scope.notLess) / (scope.notMore - scope.notLess);
+                scope.stop.css({'right': 0, 'width': (scope.bounds.bar.getBoundingClientRect().width  - offset) + 'px'});
+            }
+
+            scope.stopValue= value;
+        };
+
+        scope.translate = function (offset, handle) {
+            var start;
+            
+            if (scope.vertical) {
+                // take handle size in account to compute middle
+                var voffset = scope.bounds.bar.getBoundingClientRect().height - offset;
+
+                scope.handles[handle].css({
+                    '-webkit-transform': 'translateY(' + voffset + 'px)',
+                    '-moz-transform': 'translateY(' + voffset + 'px)',
+                    '-ms-transform': 'translateY(' + voffset + 'px)',
+                    '-o-transform': 'translateY(' + voffset + 'px)',
+                    'transform': 'translateY(' + voffset + 'px)'
+               });
+               if (!scope.dual) scope.slider.css('height', offset + 'px');
+               else if (scope.relative[1] && scope.relative[0]) {
+                   var height = (scope.relative[1] - scope.relative[0]) *  scope.bounds.bar.getBoundingClientRect().height;
+                   start  = (scope.relative[0] *  scope.bounds.bar.getBoundingClientRect().height);
+                   scope.slider.css ({'bottom': start+'px','height': height + 'px'});
+               }
+            } else {
+
+                scope.handles[handle].css({
+                    '-webkit-transform': 'translateX(' + offset + 'px)',
+                    '-moz-transform': 'translateX(' + offset + 'px)',
+                    '-ms-transform': 'translateX(' + offset + 'px)',
+                    '-o-transform': 'translateX(' + offset + 'px)',
+                    'transform': 'translateX(' + offset + 'px)'
+                });
+                if (!scope.dual) scope.slider.css('width',offset + 'px');
+                else if (scope.relative[1] && scope.relative[0]) {
+                    var width = (scope.relative[1] - scope.relative[0]) *  scope.bounds.bar.getBoundingClientRect().width;
+                    start = (scope.relative[0] *  scope.bounds.bar.getBoundingClientRect().width);
+                    scope.slider.css ({'left': start+'px','width': width + 'px'});
+                }
+            }
+        };
+
+        // position handle on the bar depending a given value
+        scope.setValue = function (value , handle) {
+            var offset;
+
+            // if value did not change ignore
+            if (value === scope.value[handle]) return;
+            if (value === undefined)   value=0;
+            if (value > scope.notMore) value=scope.notMore;
+            if (value < scope.notLess) value=scope.notLess;
+
+            if (scope.vertical) {
+                scope.relative[handle] = (value - scope.notLess) / (scope.notMore - scope.notLess);
+                if (handle === 0) offset = (scope.relative[handle] * scope.bounds.bar.getBoundingClientRect().height) + scope.bounds.handles[handle].getBoundingClientRect().height/2;
+                if (handle === 1) offset = scope.relative[handle] * scope.bounds.bar.getBoundingClientRect().height;
+
+            } else {
+                scope.relative[handle] = (value - scope.notLess) / (scope.notMore - scope.notLess);
+                offset = scope.relative[handle] *  (scope.bounds.bar.getBoundingClientRect().width - scope.bounds.handles[handle].getBoundingClientRect().width);
+            }
+
+            scope.translate (offset,handle);
+            scope.value[handle] = value;
+
+            if (scope.formatter) {
+                // when call through setValue we do not pass cbHandle
+                scope.viewValue = scope.formatter (value, undefined);
+            } else {
+                scope.viewValue = value;
+            }
+
+            if (model) model.$setViewValue( scope.viewValue);
+
+            if (scope.displays[handle]) {
+                scope.displays[handle].html (scope.viewValue);
+            }
+        };
+
+
+        // Minimal keystroke handling to close picker with ESC [scope.actif is current handle index]
+        scope.keydown=  function(e){
+
+            switch(e.keyCode){
+                case 39: // Right
+                case 38: // up
+                     if (scope.byStep > 0) scope.$apply(scope.setValue ((scope.value[scope.actif]+scope.byStep), scope.actif));
+                     if (scope.byStep < 0) scope.$apply(scope.setValue ((scope.value[scope.actif]+(1 / Math.pow(10, scope.byStep*-1))),scope.actif));
+                     if (scope.callback)  scope.callback (scope.value[scope.actif], scope.ctrlhandle);
+                     break;
+                case 37: // left
+                case 40: // down
+                    if (scope.byStep > 0) scope.$apply(scope.setValue ((scope.value[scope.actif] - scope.byStep), scope.actif));
+                    if (scope.byStep < 0) scope.$apply(scope.setValue ((scope.value[scope.actif] - (1 / Math.pow(10, scope.byStep*-1))),scope.actif));
+                    if (scope.callback)  scope.callback (scope.value[scope.actif], scope.ctrlhandle);
+                    break;
+                case 27: // esc
+                    scope.handles[scope.actif][0].blur();
+            }
+        };
+
+        scope.moveHandle = function (handle, clientX, clientY) {
+            var offset;
+            if (scope.vertical) {
+                offset = scope.bounds.bar.getBoundingClientRect().bottom - clientY;
+                if (offset > scope.bounds.bar.getBoundingClientRect().height) offset = scope.bounds.bar.getBoundingClientRect().height;
+                if (offset < scope.bounds.handles[handle].getBoundingClientRect().height) offset = scope.bounds.handles[handle].getBoundingClientRect().height;
+            } else {
+                offset = clientX - scope.bounds.bar.getBoundingClientRect().left;
+
+                if (offset < 0) offset = 0;
+                if ((clientX + scope.bounds.handles[handle].getBoundingClientRect().width) > scope.bounds.bar.getBoundingClientRect().right) {
+                    offset = scope.bounds.bar.getBoundingClientRect().width - scope.bounds.handles[handle].getBoundingClientRect().width;
+                }
+            }
+
+            scope.getValue  (offset, handle);
+
+            // prevent dual handle to cross
+            if (scope.dual && scope.value [0] > scope.value[1]) {
+                if (handle === 0) scope.setValue (scope.value[0] , 1);
+                else scope.setValue(scope.value[1],0);
+            }
+        };
+
+
+        scope.focusCB = function (inside) {
+            if (inside) {
+                $document.on('keydown',scope.keydown);
+            } else {
+                $document.unbind('keydown',scope.keydown);
+            }
+        };
+
+        // bar was touch let move handle to this point
+        scope.touchBarCB = function (event) {
+            var handle=0;
+            var relative;
+            var touches = event.changedTouches;
+            var oldvalue = scope.value[handle];
+
+            event.preventDefault();
+
+            // if we have two handles select closest one from touch point
+            if (scope.dual) {
+                if (scope.vertical) relative = (touches[0].pageY - scope.bounds.bar.getBoundingClientRect().bottom) / scope.bounds.bar.getBoundingClientRect().height;
+                else relative= (touches[0].pageX - scope.bounds.bar.getBoundingClientRect().left) / scope.bounds.bar.getBoundingClientRect().width;
+
+                var distance0 = Math.abs(relative - scope.relative[0]);
+                var distance1 = Math.abs(relative - scope.relative[1]);
+                if (distance1 < distance0) handle=1;
+            }
+
+            // move handle to new place
+            scope.moveHandle (handle,touches[0].pageX, touches[0].pageY);
+            if (scope.callback && oldvalue !== scope.value[handle]) scope.callback (scope.value[handle], scope.ctrlhandle);
+        };
+
+        // handle was touch and drag
+        scope.touchHandleCB = function (touchevt, handle) {
+            var oldvalue = scope.value[handle];
+
+            touchevt.preventDefault();
+            $document.on('touchmove',touchmove);
+            $document.on('touchend' ,touchend);
+            element.unbind('touchstart', scope.touchBarCB);
+
+            function touchmove(event) {
+                event.preventDefault();
+                var touches = event.changedTouches;
+                for (var idx = 0; idx < touches.length; idx++) {
+                    scope.moveHandle (handle,touches[idx].pageX, touches[idx].pageY);
+                }
+            }
+
+            function touchend(event) {
+               $document.unbind('touchmove',touchmove);
+               $document.unbind('touchend' ,touchend);
+               element.on('touchstart', scope.touchBarCB);
+
+                // if value change notify application callback
+                if (scope.callback && oldvalue !== scope.value[handle]) scope.callback (scope.value[handle], scope.ctrlhandle);
+            }
+        };
+
+        scope.handleCB = function (clickevent, handle) {
+
+            if (attrs.automatic) return;
+            
+            var oldvalue = scope.value[handle];
+            // register mouse event to track handle
+            clickevent.preventDefault();
+
+            $document.on('mousemove',mousemove);
+            $document.on('mouseup', mouseup);
+            scope.handles[handle][0].focus();
+            scope.actif=handle;
+
+            // slider handle is moving
+            function mousemove(event) {
+                scope.moveHandle (handle, event.clientX, event.clientY);
+            }
+
+            // mouse is up dans leave slider send resize events
+            function mouseup() {
+                $document.unbind('mousemove', mousemove);
+                $document.unbind('mouseup', mouseup);
+
+                // if value change notify application callback
+                if (scope.callback && oldvalue !== scope.value[handle]) scope.callback (scope.value[handle], scope.ctrlhandle);
+            }
+        };
+
+        // simulate jquery find by classes capabilities [warning only return 1st elements]
+        scope.find = function (select, elem) {
+            var domelem;
+
+            if (elem) domelem = elem[0].querySelector(select);
+            else domelem = element[0].querySelector(select);
+
+            var angelem = angular.element(domelem);
+            return (angelem);
+        };
+
+
+
+        scope.initialSettings = function (initial) {
+            var decimal_places_match_result;
+            scope.value=[];  // store low/height value when two handles
+            scope.relative=[];
+
+            if (scope.precision === null) {
+                decimal_places_match_result = ('' + scope.byStep).match(/\.([\d]*)/);
+                scope.precision = decimal_places_match_result && decimal_places_match_result[1] ? decimal_places_match_result[1].length : 0;
+            }
+
+            // position handle to initial value(s)
+            element.on('touchstart', scope.touchBarCB);
+            scope.handles[0].on('touchstart', function(evt){scope.touchHandleCB(evt,0);});
+
+            // this slider has two handles low/hight
+            if (scope.dual) {
+                scope.handles[1].addClass('range-slider-handle');
+                scope.handles[1].on('touchstart', function(evt){scope.touchHandleCB(evt,1);});
+                if (!scope.initvalues) scope.setValue (initial[1],1);
+            }
+
+            // if we have an initstate object apply it
+            if (scope.initvalues) scope.initWidget (scope.initvalues);
+            else   scope.setValue (initial[0],0);
+        };
+
+        scope.init = function () {
+            scope.sliderid   = attrs.id || "slider-" + parseInt (Math.random() * 1000);
+            scope.startValue = -Infinity;
+            scope.stopValue  = Infinity;
+            scope.byStep   = parseInt(attrs.byStep) || 1;
+            scope.vertical = attrs.vertical   || false;
+            scope.dual     = attrs.dualHandles|| false;
+            scope.trigger_input_change= false;
+            scope.notMore  = parseInt(attrs.notMore)   || 100;
+            scope.notLess  = parseInt(attrs.notLess)   || 0;
+
+            if (scope.vertical) element.addClass("vertical-range");
+
+            scope.handles= [scope.find('.handle-min'), scope.find('.handle-max')];
+            scope.bar    = element;
+            scope.slider = scope.find('.range-slider-active-segment');
+            scope.start  = scope.find('.ibz-range-slider-start');
+            scope.stop   = scope.find('.ibz-range-slider-stop');
+            scope.disable= attrs.disable || false;
+
+            scope.ctrlhandle = new RangeSliderHandle (scope);
+
+            // prepare DOM object pointer to compute size dynamically
+            scope.bounds = {
+                bar    : element[0],
+                handles: [scope.handles[0][0], scope.handles[1][0]]
+            };
+
+            if (attrs.disable === 'true') scope.setDisable(true);
+
+            if (attrs.displayTarget) {
+                switch (attrs.displayTarget) {
+                    case true :
+                    case 'handle' :
+                        scope.displays = scope.handles;
+                        scope.handles[0].addClass('ibz-range-slider-display');
+                        if (scope.dual) scope.handles[1].addClass('ibz-range-slider-display');
+                        break;
+                    default:
+                        scope.displays =  [$document.getElementById (attrs.displayTarget)];
+                }
+            } else scope.displays=[];
+
+            // extract initial values from attrs and parse into int
+            if (!attrs.initial) {
+                scope.initial  = [scope.ngModel, scope.ngModel]; // initialize to model values
+            } else {
+                var initial  = attrs.initial.split(',');
+                scope.initial = [
+                    initial[0] !== undefined ? parseInt (initial[0]) : scope.notLess,
+                    initial[1] !== undefined ? parseInt (initial[1]) : scope.notMore
+                ];
+            }
+
+            // Monitor any changes on start/stop dates.
+            scope.$watch('startAt', function() {
+                if (scope.value < scope.startAt ) {
+                    //scope.setValue (scope.startAt);
+                }
+                if (scope.startAt) scope.setStart (scope.startAt);
+            });
+
+            scope.$watch('stopAt' , function() {
+                if (scope.value > scope.stopAt) {
+                    //scope.setValue (scope.stopAt);
+                }
+                if (scope.stopAt) scope.setStop (scope.stopAt);
+            });
+
+            // finish widget initialisation
+            scope.initialSettings (scope.initial);
+
+        };
+
+        scope.init();
+        
+         // slider is ready provide control handle to application controller
+        scope.$watch ('inithook', function () {         // init Values may arrive late
+            if (scope.inithook) scope.inithook (scope.ctrlhandle);
+        });
+
+        scope.$watch ('initvalues', function () { 	// init Values may arrive late
+            if (scope.initvalues) scope.initWidget(scope.initvalues);
+        });
+
+        // two-way binding if model value changes
+        scope.$watch ('ngModel', function (newValue) {
+          scope.setValue(newValue, 0);
+        });
+    }
+
+return {
+    restrict: "E",    // restrict to <range-slider> HTML element name
+    scope: {
+        startAt  :'=',  // First acceptable date
+        stopAt   :'=',  // Last acceptable date
+        callback :'=',  // Callback to actif when a date is selected
+        formatter:'=',  // Callback for drag event call each time internal value changes
+        inithook :'=',  // Hook point to control slider from API
+        cbhandle :'=',  // Argument added to every callback
+        initvalues:'=',   // Initial values as a single object
+        ngModel: '='    // the model value
+    },
+    require: '?ngModel',
+    template: template, // html template is build from JS
+    replace: true,      // replace current directive with template while inheriting of class
+    link: link          // pickadate object's methods
+};
+});
+
+console.log ("RangeSlider Loaded");
+
+})();
+\ No newline at end of file
diff --git a/templates/hybrid-html5/app/Frontend/widgets/RangeSliders/Rangeslider.scss b/templates/hybrid-html5/app/Frontend/widgets/RangeSliders/Rangeslider.scss
new file mode 100644
index 0000000..6717d0e
--- /dev/null
+++ b/templates/hybrid-html5/app/Frontend/widgets/RangeSliders/Rangeslider.scss
@@ -0,0 +1,67 @@
+/*
+ * ibz-Datepicker for Foundation
+ *
+ * Author: Fulup Ar Foll
+ * Date  : March-2015
+ * Object: SASS stylesheet, customized to Foundation
+ * References: https://css-tricks.com/stripes-css/
+ *
+ */
+@import "app/ibz-mixins";
+
+.range-slider-handle {
+  display: inline-block;
+  position: absolute;
+  z-index: 1;
+  top: -0.2rem;
+  width: 2rem;
+  height: 1.375rem;
+  border: 1px solid none;
+  cursor: pointer;
+  background: #008cba;
+}
+
+.range-slider.radius, .range-slider-handle {
+  background: #008cba;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+}
+
+.range-slider-active-segment {
+  display: inline-block;
+  top: 0.07rem;
+  position: absolute;
+  height: 0.80rem;
+  background: #e5e5e5;
+}
+
+.ibz-range-slider {
+   background-color: rgba(154, 205, 50, 0.6) !important;
+   height: 1rem;
+   position: relative;
+   
+  .range-slider-active-segment {
+    background-color: rgba(82, 168, 200, 0.6);
+  }
+  
+  &-display {
+    background-color: rgba(82, 168, 200, 0.6) !important;
+    width : 4rem !important;
+    padding: .25rem;
+    text-align:center
+   }
+
+   &-start,&-stop {
+   display: inline-block;
+   position: absolute;
+   padding-top: 2px;
+   height: 95%;
+   background: repeating-linear-gradient(
+    45deg,
+    #606dbc,
+    #606dbc 10px,
+    #465298 10px,
+    #465298 20px
+  );}
+
+}
diff --git a/templates/hybrid-html5/app/bower.json b/templates/hybrid-html5/app/bower.json
new file mode 100644
index 0000000..c78c624
--- /dev/null
+++ b/templates/hybrid-html5/app/bower.json
@@ -0,0 +1,22 @@
+{
+  "name": "healthy-gulp-angular",
+  "version": "0.0.0",
+  "authors": "",
+  "private": true,
+  "dependencies": {
+    "angular": "~1.3.4",
+    "angular-cookies": "~1.3.4",
+    "foundation-apps": "~1.1.0",
+    "angular-ui-notification": "~0.0.14",
+    "foundation-icon-fonts": "*",
+    "jszip": "Stuk/jszip#~2.5.0"
+  },
+  "overrides": {
+    "foundation": {
+      "main": [
+        "dist/js/foundation-apps-templates.js",
+        "dist/js/foundation-apps.js"
+      ]
+    }
+  }
+}
diff --git a/templates/hybrid-html5/app/etc/AppDefaults.js b/templates/hybrid-html5/app/etc/AppDefaults.js
new file mode 100644
index 0000000..1ccb037
--- /dev/null
+++ b/templates/hybrid-html5/app/etc/AppDefaults.js
@@ -0,0 +1,32 @@
+/* 
+ * Copyright (C) 2015 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+var SESSION_TIMEOUT= 3600000; // default is 1h loggin session
+
+// Default config will be superseaded by ProjectRoot/.config-l4a.js $HOME/.config-l4a.js /etc/default/config-l4a.js
+config = {
+        
+    APPNAME : 'xxxxxx-hybrid-html5',// AppName is use as main Angular Module name
+    FRONTEND: "Frontend",    // HTML5 frontend  [no leading ./]
+    BACKEND : "Backend",     // NodeJS Rest API [no leading ./]
+    URLBASE : '/opa/',       // HTML basedir when running in production [should end with a /]
+    APIBASE : '/api/'        // Api url base dir [should end with a /]
+};
+
+module.exports = config;
+
diff --git a/templates/hybrid-html5/app/etc/_Config.js b/templates/hybrid-html5/app/etc/_Config.js
new file mode 100644
index 0000000..ce93d43
--- /dev/null
+++ b/templates/hybrid-html5/app/etc/_Config.js
@@ -0,0 +1,44 @@
+/* 
+ * Copyright 2014 Fulup Ar Foll
+ *
+ * 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.
+ */
+
+var fs = require('fs');
+
+function Config () {
+   'use strict';
+   var values=[];
+   var extention='-l4a.js';
+   var conf;
+
+   // Configs file path last one supersead first one.
+   var files= [__dirname + "/AppDefaults.js", "/etc/default/noderc"+ extention, process.env.NODERC, process.env.HOME + "/.noderc"+ extention , __dirname +"/../../.noderc.js" ];
+
+   // Parse any existing files within config list & merge them
+   for (var idx in files) { 
+      if (files[idx]) {
+        //console.log ("files=", files[idx]);  
+        if (fs.existsSync (files[idx])) conf=require (files[idx]);
+        for (var i in conf) values[i] = conf[i];
+      }     
+   }
+   
+ // set path to search for node_module within parent directory
+ process.env.NODE_PATH= process.env.NODE_PATH + '../node_modules';
+   
+ // console.log ("values=", values);
+ return values;
+}
+
+module.exports = Config();
diff --git a/templates/hybrid-html5/app/etc/_Trace.js b/templates/hybrid-html5/app/etc/_Trace.js
new file mode 100644
index 0000000..79ef4f5
--- /dev/null
+++ b/templates/hybrid-html5/app/etc/_Trace.js
@@ -0,0 +1,55 @@
+/* 
+ * Copyright 2014 Fulup Ar Foll
+ *
+ * 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.
+ */
+
+var util       = require("util");
+var path       = require("path");
+var config= require('./_Config');
+
+function TracePoint () {
+        var saved = Error.prepareStackTrace;                           // save default prepareStack function
+        Error.prepareStackTrace = function(_, stack){ return stack; }; // overload err stack handling
+        Error.captureStackTrace(this, arguments.callee);               // request a stack
+        this.trace = this.stack;                                       // effectively build trace
+        Error.prepareStackTrace = saved;                               // restore original nodejs function  
+}
+
+// ------- Public Methods --------------
+var dbgLevel = function(target, level, format) {  //+ arguments
+    // try to get debugLevel from calling object or global config
+    if (target && target.dbgLevel)  dbgLevel = target.dbgLevel;
+    else dbgLevel = config.DBG_LVL || 1;
+    
+    if (dbgLevel >= level ) {
+
+        var args = [].slice.call(arguments, 2); // copy argument in a real array leaving out level
+        var message = util.format.apply(null, args);
+        
+        var trace = new TracePoint().trace;
+        var info = {
+            fullpath : trace[1].getFileName(),
+            linenum  : trace[1].getLineNumber(),
+            basename : path.basename (trace[1].getFileName())
+        };
+        
+        if (dbgLevel >= 5) {
+            console.log("%s:%d", info.fullpath, info.linenum);
+            console.log("\t[%d] %j", dbgLevel, message);
+        }
+        else console.log("--%d-- [%s:%d] -- %j", dbgLevel, info.basename, info.linenum, message);
+    }
+};
+
+module.exports = dbgLevel;
diff --git a/templates/hybrid-html5/app/gulpfile.js b/templates/hybrid-html5/app/gulpfile.js
new file mode 100644
index 0000000..da2826d
--- /dev/null
+++ b/templates/hybrid-html5/app/gulpfile.js
@@ -0,0 +1,438 @@
+// BUG Symlink not working
+
+var gulp = require('gulp');
+var debug = require('gulp-debug');
+var plugins = require('gulp-load-plugins')();
+var del = require('del');
+var es = require('event-stream');
+var bowerFiles = require('main-bower-files');
+var print = require('gulp-print');
+var Q = require('q');
+var imagemin = require('gulp-imagemin'), pngquant = require('imagemin-pngquant');
+var taskListing = require('gulp-task-listing');
+var symlink = require('gulp-sym');
+var rename = require("gulp-rename");
+var exec = require('child_process').exec
+
+// addon for Foundation6
+var router   = require('front-router');
+
+// == PATH STRINGS ========
+var appdir  = "./";   // Warning to not forget trailling '/'
+config=require (appdir + "etc/_Config"); // upload user local preferences if any
+
+var frontend= appdir + config.FRONTEND;
+
+var paths = {
+    application : frontend,
+    scripts     : frontend+'/**/*.js',
+    appStyles   : [frontend+'/**/*.scss', '!'+frontend+'/styles/*/*-conf.scss'],
+    globalStyles: [frontend+'/styles/**/*.scss'],
+    images      : [frontend+'/**/*.png',frontend+'/**/*.jpg',frontend+'/**/*.jpeg',frontend+'/**/*.svg',frontend+'/**/*.ttf'],
+    index       : frontend+'/index.html',
+    partials    : [frontend + '/**/*.html', '!' + frontend +'/index.html'],
+    distDev     : './dist.dev',
+    distProd    : './dist.prod',
+    sass:  [frontend+'/styles', 'bower_components/foundation-apps/scss','bower_components/foundation-icon-fonts'],
+    fonts: ['bower_components/**/*.woff'],
+    favicon: frontend+'/favicon.ico',
+	wgtconfig: 'config.xml'
+};
+
+paths['distAppDev']  = paths.distDev + config.URLBASE;
+paths['distAppProd'] = paths.distProd + config.URLBASE;
+
+// Run node in debug mode in developpement mode ?
+var nodeopts = config.DEBUG !== undefined ? '--debug='+config.DEBUG : ''; 
+
+// == PIPE SEGMENTS ========
+var pipes = {};
+
+pipes.orderedVendorScripts = function() {
+    return plugins.order(['jquery.js', 'angular.js']);
+};
+
+pipes.orderedAppScripts = function() {
+    return plugins.angularFilesort();
+};
+
+pipes.minifiedFileName = function() {
+    return plugins.rename(function (path) {
+        path.extname = '.min' + path.extname;
+    });
+};
+
+pipes.validatedAppScripts = function() {
+    return gulp.src(paths.scripts)
+        .pipe(plugins.replace('@@APPNAME@@', config.APPNAME))
+        .pipe(plugins.jshint())
+        .pipe(plugins.jshint.reporter('jshint-stylish'));
+};
+
+pipes.builtAppScriptsDev = function() {
+    return pipes.validatedAppScripts()
+        .pipe(gulp.dest(paths.distAppDev));
+};
+
+pipes.builtAppScriptsProd = function() {
+    var scriptedPartials = pipes.scriptedPartials();
+    var validatedAppScripts = pipes.validatedAppScripts();
+    return es.merge(scriptedPartials, validatedAppScripts)
+        .pipe(plugins.ngAnnotate())
+        .pipe(pipes.orderedAppScripts())
+        .pipe(plugins.sourcemaps.init())
+        .pipe(plugins.concat(config.APPNAME+'.min.js'))
+        .pipe(plugins.uglify({compress: {drop_console: true}}))
+        .pipe(plugins.sourcemaps.write())
+        .pipe(gulp.dest(paths.distAppProd));
+};
+
+pipes.builtVendorScriptsDev = function() {
+    return gulp.src(bowerFiles())
+        .pipe(gulp.dest( paths.distDev +'/bower_components'));
+};
+
+pipes.builtVendorScriptsProd = function() {
+    return gulp.src(bowerFiles('**/*.js'))
+        .pipe(pipes.orderedVendorScripts())
+        .pipe(plugins.concat('vendor.min.js'))
+        .pipe(plugins.uglify())
+        .pipe(gulp.dest(paths.distProd+ '/bower_components'));
+};
+
+
+pipes.validatedPartials = function() {
+    return gulp.src(paths.partials)
+        .pipe(plugins.htmlhint({'doctype-first': false}))
+        .pipe(router({path: paths.application+'/etc/routes.js', root: paths.application}))
+        .pipe(plugins.htmlhint.reporter());
+};
+
+pipes.builtPartialsDev = function() {
+    return pipes.validatedPartials()
+        .pipe(gulp.dest(paths.distAppDev));
+};
+
+pipes.scriptedPartials = function() {
+    return pipes.validatedPartials()
+        .pipe(plugins.htmlhint.failReporter())
+        .pipe(plugins.htmlmin({collapseWhitespace: true, removeComments: true}))
+        .pipe(plugins.ngHtml2js({
+            moduleName: config.APPNAME,
+            template: "(function() {"
+               + "angular.module('<%= moduleName %>').run(['$templateCache', function($templateCache) {"
+               + "$templateCache.put('<%= template.url %>',\n    '<%= template.escapedContent %>');"
+               + "}]);\n"
+               + "})();\n"
+        }));    
+};
+
+pipes.builtAppStylesDev = function() {
+    return gulp.src(paths.appStyles)
+        .pipe(plugins.sass({includePaths: paths.sass}))
+        .pipe(gulp.dest(paths.distAppDev + '/styles'));
+};
+
+pipes.builtglobalStylesDev = function() {
+    return gulp.src(paths.globalStyles)
+        .pipe(plugins.sass({includePaths: paths.sass}))
+        .pipe(gulp.dest(paths.distDev  + '/global_styles'));
+};
+
+pipes.builtAppStylesProd = function() {
+    return gulp.src(paths.appStyles)
+        .pipe(plugins.sourcemaps.init())
+        .pipe(plugins.sass({includePaths: frontend + '/styles'}))
+        // .pipe(debug({title: '***** appStyle:'}))
+        .pipe(plugins.cleanCss())
+        .pipe(plugins.concat(config.APPNAME+'.css'))
+        .pipe(plugins.sourcemaps.write())
+        .pipe(pipes.minifiedFileName())
+        .pipe(gulp.dest(paths.distAppProd));
+};
+
+pipes.builtglobalStylesProd = function() {
+    return gulp.src(paths.globalStyles)
+        .pipe(plugins.sourcemaps.init())
+        .pipe(plugins.sass({includePaths: paths.sass}))
+        .pipe(plugins.cleanCss())
+        .pipe(plugins.sourcemaps.write())
+        .pipe(pipes.minifiedFileName())
+        .pipe(rename(function (path) {path.dirname="";return path;}))
+        .pipe(gulp.dest(paths.distProd + '/global_styles'));
+};
+
+pipes.processedFontsDev = function() {
+    return gulp.src(paths.fonts)
+        .pipe(rename(function (path) {path.dirname="";return path;}))
+        .pipe(gulp.dest(paths.distDev+'/bower_components'));
+};
+
+pipes.processedFontsProd = function() {
+    return gulp.src(paths.fonts)
+        .pipe(rename(function (path) {path.dirname="";return path;}))
+        .pipe(gulp.dest(paths.distProd+'/bower_components'));
+};
+
+
+pipes.processedImagesDev = function() {
+    return gulp.src(paths.images)
+        .pipe(gulp.dest(paths.distAppDev));
+};
+
+pipes.processedFaviconDev = function() {
+    return gulp.src(paths.favicon)
+        .pipe(gulp.dest(paths.distDev));
+};
+
+pipes.processedImagesProd = function() {
+    return gulp.src(paths.images)
+       .pipe(imagemin({
+            progressive: true,
+            svgoPlugins: [{removeViewBox: false}],
+            use: [pngquant()]
+        }))
+        .pipe(gulp.dest(paths.distAppProd));
+};
+
+pipes.processedFaviconProd = function() {
+    return gulp.src(paths.favicon)
+        .pipe(gulp.dest(paths.distProd));
+};
+
+// Create an Symlink when config.URLBASE exist
+pipes.createDevSymLink = function() {
+    return gulp.src(paths.distDev).pipe(symlink(paths.distDev+config.URLBASE, {force: true}));
+};
+
+pipes.createProdSymLink = function() {
+    return gulp.src(paths.distProd).pipe(symlink(paths.distDev+config.URLBASE,{force: true}));
+};
+
+pipes.validatedIndex = function() {
+    return gulp.src(paths.index)       
+        .pipe(plugins.replace('@@APPNAME@@', config.APPNAME))
+        .pipe(plugins.replace('@@URLBASE@@', config.URLBASE))
+        .pipe(plugins.htmlhint())
+        .pipe(plugins.htmlhint.reporter());
+};
+
+pipes.builtIndexDev = function() {
+
+    var orderedVendorScripts = pipes.builtVendorScriptsDev()
+        .pipe(pipes.orderedVendorScripts());
+
+    var orderedAppScripts = pipes.builtAppScriptsDev()
+        .pipe(pipes.orderedAppScripts());
+
+    var appStyles    = pipes.builtAppStylesDev();
+    var globalStyles = pipes.builtglobalStylesDev();
+
+    return pipes.validatedIndex()
+         // Vendor and Global should have absolute path to rootdir application one are relative to BaseURL
+        .pipe(plugins.inject(orderedVendorScripts, {relative: false, ignorePath: "/dist.dev", name: 'bower'}))
+        .pipe(plugins.inject(globalStyles, {relative: false, ignorePath: "/dist.dev", name:'vendor'}))
+        .pipe(gulp.dest(paths.distAppDev)) // write first to get relative path for inject
+        .pipe(plugins.inject(orderedAppScripts, {relative: true}))
+        .pipe(plugins.inject(appStyles, {relative: true, name: 'appli'}))
+        .pipe(gulp.dest(paths.distAppDev));
+};
+
+pipes.builtIndexProd = function() {
+
+    var vendorScripts= pipes.builtVendorScriptsProd();
+    var appScripts   = pipes.builtAppScriptsProd();
+    var appStyles    = pipes.builtAppStylesProd();
+    var globalStyles = pipes.builtglobalStylesProd();
+
+    return pipes.validatedIndex()
+         // Vendor and Global should have absolute path to rootdir application one are relative to BaseURL
+        .pipe(plugins.inject(vendorScripts, {relative: false, ignorePath: "/dist.prod", name: 'bower'}))
+        .pipe(plugins.inject(globalStyles, {relative: false, ignorePath: "/dist.prod", name:'vendor'}))
+        .pipe(gulp.dest(paths.distAppProd)) // write first to get relative path for inject
+        .pipe(plugins.inject(appScripts, {relative: true}))
+        .pipe(plugins.inject(appStyles, {relative: true, name:'appli'}))
+        .pipe(plugins.htmlmin({collapseWhitespace: true, removeComments: true}))
+        .pipe(gulp.dest(paths.distAppProd));
+};
+
+pipes.builtAppDev = function() {
+    return es.merge(pipes.builtIndexDev(), pipes.builtPartialsDev(), pipes.processedFaviconDev(), pipes.processedImagesDev(), pipes.processedFontsDev() );
+};
+
+pipes.builtAppProd = function() {
+    return es.merge(pipes.builtIndexProd(), pipes.processedFaviconProd(), pipes.processedImagesProd(), pipes.processedFontsProd());
+};
+
+pipes.widgetConfig = function(type) {
+	var dst=paths["dist"+type];
+	var content="."+config.URLBASE+"/index.html";
+	content=content.replace(/\/+/g,"/"); 
+	return gulp.src(paths.wgtconfig+".in")
+        .pipe(plugins.replace('@@APPNAME@@', config.APPNAME))
+        .pipe(plugins.replace('@@CONTENT@@', content))
+        .pipe(plugins.rename("config.xml"))
+		.pipe(gulp.dest(dst))
+};
+
+pipes.widgetPack = function(type,cb) {
+	var dst=paths["dist"+type];
+	var wgtfile=config.APPNAME+"_"+type+".wgt"
+
+	exec(
+		"wgtpkg-pack -f -o "+wgtfile+" "+dst,
+		function(err,stdout,stderr) {
+			console.log(stdout);
+			console.log(stderr);
+			cb(err);
+	});
+};
+
+// == TASKS ========
+
+// Add a task to render the output 
+gulp.task('help', taskListing.withFilters(/-/));
+   
+// clean, build of production environement
+gulp.task('build', ['clean-build-app-prod']);
+
+// removes all compiled dev files
+gulp.task('clean-dev', function() {
+    var deferred = Q.defer();
+    del(paths.distDev, function() {
+        deferred.resolve();
+    });
+    return deferred.promise;
+});
+
+// removes all compiled production files
+gulp.task('clean-prod', function() {
+    var deferred = Q.defer();
+    del(paths.distProd, function() {
+        deferred.resolve();
+    });
+    return deferred.promise;
+});
+
+// checks html source files for syntax errors
+gulp.task('validate-partials', pipes.validatedPartials);
+
+// checks index.html for syntax errors
+gulp.task('validate-index', pipes.validatedIndex);
+
+// moves html source files into the dev environment
+gulp.task('build-partials-dev', pipes.builtPartialsDev);
+
+// converts partials to javascript using html2js
+gulp.task('convert-partials-to-js', pipes.scriptedPartials);
+
+// runs jshint on the app scripts
+gulp.task('validate-app-scripts', pipes.validatedAppScripts);
+
+// moves app scripts into the dev environment
+gulp.task('build-app-scripts-dev', pipes.builtAppScriptsDev);
+
+// concatenates, uglifies, and moves app scripts and partials into the prod environment
+gulp.task('build-app-scripts-prod', pipes.builtAppScriptsProd);
+
+// compiles app sass and moves to the dev environment
+gulp.task('build-app-styles-dev', pipes.builtAppStylesDev);
+
+// compiles and minifies app sass to css and moves to the prod environment
+gulp.task('build-app-styles-prod', pipes.builtAppStylesProd);
+
+// moves vendor scripts into the dev environment
+gulp.task('build-vendor-scripts-dev', pipes.builtVendorScriptsDev);
+
+// concatenates, uglifies, and moves vendor scripts into the prod environment
+gulp.task('build-vendor-scripts-prod', pipes.builtVendorScriptsProd);
+
+// validates and injects sources into index.html and moves it to the dev environment
+gulp.task('build-index-dev', pipes.builtIndexDev);
+
+// validates and injects sources into index.html, minifies and moves it to the dev environment
+gulp.task('build-index-prod', pipes.builtIndexProd);
+
+// builds a complete dev environment
+gulp.task('build-app-dev', pipes.builtAppDev);
+
+// builds a complete prod environment
+gulp.task('build-app-prod', pipes.builtAppProd);
+
+// cleans and builds a complete dev environment
+gulp.task('clean-build-app-dev', ['clean-dev'], pipes.builtAppDev);
+
+// cleans and builds a complete prod environment
+gulp.task('clean-build-app-prod', ['clean-prod'], pipes.builtAppProd);
+
+// clean, build, and watch live changes to the dev environment
+gulp.task('watch-dev', ['clean-build-app-dev'], function() {
+
+    // watch app scripts
+    gulp.watch(paths.scripts, function() {
+        return pipes.builtAppScriptsDev()
+            .pipe(plugins.livereload());
+    });
+
+    // watch html partials
+    gulp.watch(paths.partials, function() {
+        return pipes.builtPartialsDev()
+            .pipe(plugins.livereload());
+    });
+    
+    // watch Images
+    gulp.watch(paths.images, function() {
+        return pipes.processedImagesDev()
+            .pipe(plugins.livereload());
+    });
+
+    // watch styles
+    gulp.watch(paths.appStyles, function() {
+        return pipes.builtAppStylesDev()
+            .pipe(plugins.livereload());
+    });
+
+});
+
+// clean, build, and watch live changes to the prod environment
+gulp.task('watch-prod', ['clean-build-app-prod'], function() {
+
+    // watch index
+    gulp.watch(paths.index, function() {
+        return pipes.builtIndexProd()
+            .pipe(plugins.livereload());
+    });
+
+    // watch app scripts
+    gulp.watch(paths.scripts, function() {
+        return pipes.builtAppScriptsProd()
+            .pipe(plugins.livereload());
+    });
+
+    // watch hhtml partials
+    gulp.watch(paths.partials, function() {
+        return pipes.builtAppScriptsProd()
+            .pipe(plugins.livereload());
+    });
+    
+    // watch Images
+    gulp.watch(paths.images, function() {
+        return pipes.processedImagesProd()
+            .pipe(plugins.livereload());
+    });
+
+    // watch styles
+    gulp.watch(paths.appStyles, function() {
+        return pipes.builtAppStylesProd()
+            .pipe(plugins.livereload());
+    });
+    
+});
+
+gulp.task('widget-config-dev',  ['build-app-dev'],  function() { return pipes.widgetConfig("Dev"); });
+gulp.task('widget-config-prod', ['build-app-prod'], function() { return pipes.widgetConfig("Prod"); });
+gulp.task('widget-dev',  ['widget-config-dev'],  function(cb) { return pipes.widgetPack("Dev",cb); });
+gulp.task('widget-prod', ['widget-config-prod'], function(cb) { return pipes.widgetPack("Prod",cb); });
+
+// default task builds for prod
+gulp.task('default', ['widget-prod']);
diff --git a/templates/hybrid-html5/app/package.json b/templates/hybrid-html5/app/package.json
new file mode 100644
index 0000000..132e7ec
--- /dev/null
+++ b/templates/hybrid-html5/app/package.json
@@ -0,0 +1,61 @@
+{
+  "name": "xxxxxx-hybrid-html5",
+  "private": true,
+  "version": "0.0.1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/iotbzh/healthy-gulp-angular-foundation6"
+  },
+  "scripts": {
+    "postinstall": "bower install",
+    "build": "./node_modules/.bin/gulp clean-build-app-dev",
+    "start": "node node_modules/.bin/gulp watch-dev"
+  },
+  "devDependencies": {
+    "body-parser": "^1.5.2",
+    "bower": "^1.3.1",
+    "cookie-parser": "^1.4.0",
+    "del": "^1.1.1",
+    "event-stream": "^3.2.2",
+    "express": "^4.7.2",
+    "express-session": "^1.12.1",
+    "front-router": "^1.0.0",
+    "gulp": "^3.9.0",
+    "gulp-angular-filesort": "^1.0.4",
+    "gulp-debug": "^2.1.2",
+    "gulp-concat": "^2.4.3",
+    "gulp-htmlhint": "0.0.9",
+    "gulp-htmlmin": "^1.0.0",
+    "gulp-imagemin": "*",
+    "gulp-inject": "^1.1.1",
+    "gulp-jshint": "^1.9.2",
+    "gulp-livereload": "^3.7.0",
+    "gulp-load-plugins": "^0.8.0",
+    "gulp-clean-css": "^2.0.11",
+    "gulp-ng-annotate": "^1.1.0",
+    "gulp-ng-html2js": "^0.2.0",
+    "gulp-nodemon": "^2.0.0",
+    "gulp-order": "^1.1.1",
+    "gulp-print": "^1.1.0",
+    "gulp-rename": "^1.2.0",
+    "gulp-replace": "^0.5.4",
+    "gulp-sass": "^2.0.3",
+    "gulp-sourcemaps": "^1.3.0",
+    "gulp-task-listing": "^1.0.1",
+    "gulp-uglify": "^1.2.0",
+    "imagemin-pngquant": "*",
+    "jshint-stylish": "^1.0.0",
+    "karma": "^0.10",
+    "karma-junit-reporter": "^0.2.2",
+    "main-bower-files": "^2.5.0",
+    "method-override": "^2.1.2",
+    "protractor": "^1.1.1",
+    "q": "^1.1.2",
+    "shelljs": "^0.2.6",
+    "traceback": "^0.3.1",
+    "gulp-sym": "0.0.14"
+  },
+  "dependencies": {
+    "multer": "^1.1.0"
+  }
+}
diff --git a/templates/hybrid-html5/binding/CMakeLists.txt b/templates/hybrid-html5/binding/CMakeLists.txt
new file mode 100644
index 0000000..10f4de8
--- /dev/null
+++ b/templates/hybrid-html5/binding/CMakeLists.txt
@@ -0,0 +1,42 @@
+###########################################################################
+# Copyright 2015, 2016, 2017 IoT.bzh
+#
+# author: Fulup Ar Foll <fulup@iot.bzh>
+# contrib: Romain Forlot <romain.forlot@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.
+###########################################################################
+
+# Add target to project dependency list
+PROJECT_TARGET_ADD(xxxxxx-hybrid-binding)
+
+	# Define project Targets
+	add_library(${TARGET_NAME} MODULE ${TARGET_NAME}.c)
+
+	# Binder exposes a unique public entry point
+	SET_TARGET_PROPERTIES(${TARGET_NAME} PROPERTIES
+		PREFIX ""
+		LABELS "BINDING"
+		LINK_FLAGS ${BINDINGS_LINK_FLAG}
+		OUTPUT_NAME ${TARGET_NAME}
+	)
+
+	# Library dependencies (include updates automatically)
+	TARGET_LINK_LIBRARIES(${TARGET_NAME}
+		${link_libraries})
+
+	# installation directory
+	INSTALL(TARGETS ${TARGET_NAME}
+		LIBRARY DESTINATION ${BINDINGS_INSTALL_DIR})
+
+	populate_widget()
diff --git a/templates/hybrid-html5/binding/xxxxxx-hybrid-binding.c b/templates/hybrid-html5/binding/xxxxxx-hybrid-binding.c
new file mode 100644
index 0000000..de6a78e
--- /dev/null
+++ b/templates/hybrid-html5/binding/xxxxxx-hybrid-binding.c
@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2015, 2016 "IoT.bzh"
+ * Author "Manuel Bachmann"
+ *
+ * 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.
+ */
+#define _GNU_SOURCE
+#include <json-c/json.h>
+
+#include <afb/afb-binding.h>
+
+const struct afb_binding_interface *interface;
+
+static void ping (struct afb_req request)
+{
+	static int pingcount = 0;
+
+	json_object *query = afb_req_json(request);
+	afb_req_success_f(request, NULL, "Ping Binder Daemon count=%d query=%s", ++pingcount, json_object_to_json_string(query));
+}
+
+// NOTE: this sample does not use session to keep test a basic as possible
+//       in real application most APIs should be protected with AFB_SESSION_CHECK
+static const struct afb_verb_desc_v1 verbs[]= {
+  {"ping"     , AFB_SESSION_NONE, ping    , "Ping the binder"},
+  {NULL}
+};
+
+static const struct afb_binding plugin_desc = {
+	.type = AFB_BINDING_VERSION_1,
+	.v1 = {
+		.info = "xxxxxx hybrid service",
+		.prefix = "xxxxxx",
+		.verbs = verbs
+	}
+};
+
+const struct afb_binding *afbBindingV1Register (const struct afb_binding_interface *itf)
+{
+	interface = itf;
+
+	return &plugin_desc;
+}
diff --git a/templates/hybrid-html5/etc/config.cmake b/templates/hybrid-html5/etc/config.cmake
new file mode 100644
index 0000000..ee4015b
--- /dev/null
+++ b/templates/hybrid-html5/etc/config.cmake
@@ -0,0 +1,85 @@
+###########################################################################
+# Copyright 2015, 2016, 2017 IoT.bzh
+#
+# author: Fulup Ar Foll <fulup@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.
+###########################################################################
+
+# Project Info
+# ------------------
+set(NAME Hybrid-HTML5-example)
+set(VERSION "0.0")
+set(PROJECT_PRETTY_NAME "Hybrid HTML5 Example")
+set(PROJECT_DESCRIPTION "Hybrid HTML5 AGL application example")
+set(PROJECT_URL "https://gerrit.automotivelinux.org/gerrit/apps/app-templates")
+set(PROJECT_ICON "icon.png")
+
+# Compilation Mode (DEBUG, RELEASE)
+# ----------------------------------
+set(CMAKE_BUILD_TYPE "DEBUG")
+
+# Compiler selection if needed. Overload the detected compiler.
+# -----------------------------------------------
+#set(CMAKE_C_COMPILER "gcc")
+#set(CMAKE_CXX_COMPILER "g++")
+
+# PKG_CONFIG required packages
+# -----------------------------
+set (PKG_REQUIRED_LIST 
+	json-c
+	afb-daemon
+)
+
+# Static constante definition
+# -----------------------------
+add_compile_options()
+
+# LANG Specific compile flags set for all build types
+set(CMAKE_C_FLAGS "")
+set(CMAKE_CXX_FLAGS "")
+
+# Print a helper message when every thing is finished
+# ----------------------------------------------------
+#set(CLOSING_MESSAGE "")
+
+
+# (BUG!!!) as PKG_CONFIG_PATH does not work [should be an env variable]
+# ---------------------------------------------------------------------
+set(CMAKE_INSTALL_PREFIX ${HOME}/opt)
+set(CMAKE_PREFIX_PATH ${CMAKE_INSTALL_PREFIX}/lib64/pkgconfig ${CMAKE_INSTALL_PREFIX}/lib/pkgconfig)
+set(LD_LIBRARY_PATH ${CMAKE_INSTALL_PREFIX}/lib64 ${CMAKE_INSTALL_PREFIX}/lib)
+
+# Optional dependencies order
+# ---------------------------
+#set(EXTRA_DEPENDENCIES_ORDER)
+
+# Optional Extra global include path
+# -----------------------------------
+#set(EXTRA_INCLUDE_DIRS)
+
+# Optional extra libraries
+# -------------------------
+#set(EXTRA_LINK_LIBRARIES)
+
+# Optional force binding installation
+# ------------------------------------
+set(BINDINGS_INSTALL_PREFIX /opt )
+
+# Optional force widget prefix generation
+# ---------------------------------------
+# set(WIDGET_PREFIX DestinationPath)
+
+# Optional force binding Linking flag
+# ------------------------------------
+# set(BINDINGS_LINK_FLAG LinkOptions )
diff --git a/templates/hybrid-html5/etc/export.map b/templates/hybrid-html5/etc/export.map
new file mode 100644
index 0000000..ee2f413
--- /dev/null
+++ b/templates/hybrid-html5/etc/export.map
@@ -0,0 +1 @@
+{ global: afbBindingV*; local: *; };
diff --git a/templates/hybrid-html5/etc/macros.cmake b/templates/hybrid-html5/etc/macros.cmake
new file mode 100644
index 0000000..6a389de
--- /dev/null
+++ b/templates/hybrid-html5/etc/macros.cmake
@@ -0,0 +1,252 @@
+###########################################################################
+# Copyright 2015, 2016, 2017 IoT.bzh
+#
+# author: Fulup Ar Foll <fulup@iot.bzh>
+# contrib: Romain Forlot <romain.forlot@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.
+###########################################################################
+
+
+#--------------------------------------------------------------------------
+#  WARNING: 
+#     Do not change this cmake template
+#     Customise your preferences in "./etc/config.cmake"
+#--------------------------------------------------------------------------
+
+
+# Generic useful macro
+# -----------------------
+macro(PROJECT_TARGET_ADD TARGET_NAME)
+	set(PROJECT_TARGETS ${PROJECT_TARGETS} ${TARGET_NAME} CACHE INTERNAL PROJECT_TARGETS)
+	set(TARGET_NAME ${TARGET_NAME})
+endmacro(PROJECT_TARGET_ADD)
+
+macro(defstr name value)
+	add_definitions(-D${name}=${value})
+endmacro(defstr)
+
+# Dumb macro to add each directory under a path. Make sure we grab all header files!
+macro(fill_include_dir path)
+	file(GLOB_RECURSE dirlist LIST_DIRECTORIES true "${path}/*")
+	foreach(filename ${dirlist})
+		if(IS_DIRECTORY ${filename})
+			include_directories(${filename})
+		endif(IS_DIRECTORY ${filename})
+	endforeach()
+endmacro(fill_include_dir)
+
+# Helper function to retrieve source files from a library repo.
+function(find_source_files path)
+	file(GLOB_RECURSE cfiles "${path}/*.[c]")
+	file(GLOB_RECURSE cppfiles "${path}/*.cpp")
+	foreach(filename ${cfiles})
+		if(NOT ${filename} MATCHES ".*([Tt]est|[Ee]xample|[Ss]ample).*")
+			string(APPEND sources "${filename};")
+		endif(NOT ${filename} MATCHES ".*([Tt]est|[Ee]xample|[Ss]ample).*")
+	endforeach()
+	foreach(filename ${cppfiles})
+		if(NOT ${filename} MATCHES ".*([Tt]est|[Ee]xample|[Ss]ample).*")
+			string(APPEND sources "${filename};")
+		endif(NOT ${filename} MATCHES ".*([Tt]est|[Ee]xample|[Ss]ample).*")
+	endforeach()
+	set(sources_files ${sources} PARENT_SCOPE)
+endfunction(find_source_files)
+
+# WGT packaging
+macro(populate_widget)
+	# Declaration of a custom command that will populate widget tree with the target
+	set(POPULE_WIDGET_TARGET "populate_${TARGET_NAME}")
+
+	get_target_property(T ${TARGET_NAME} LABELS)
+	get_target_property(OUT ${TARGET_NAME} OUTPUT_NAME)
+
+	if(${T} STREQUAL "BINDING")
+		add_custom_command(OUTPUT ${WIDGET_LIBDIR}/${TARGET_NAME}.so
+			DEPENDS ${TARGET_NAME}
+			COMMAND mkdir -p ${WIDGET_LIBDIR}
+			COMMAND cp ${OUT}.so ${WIDGET_LIBDIR}
+		)
+		add_custom_target(${POPULE_WIDGET_TARGET} ALL DEPENDS ${WIDGET_LIBDIR}/${TARGET_NAME}.so)
+	elseif(${T} STREQUAL "EXECUTABLE")
+		add_custom_command(OUTPUT ${WIDGET_BINDIR}/${TARGET_NAME}
+			DEPENDS ${TARGET_NAME}
+			COMMAND mkdir -p ${WIDGET_BINDIR}
+			COMMAND cp ${OUT} ${WIDGET_BINDIR}
+		)
+		add_custom_target(${POPULE_WIDGET_TARGET} ALL DEPENDS ${WIDGET_BINDIR}/${TARGET_NAME})
+	elseif(${T} STREQUAL "HTDOCS")
+		add_custom_command(OUTPUT ${WIDGET_HTTPDIR}
+			DEPENDS ${TARGET_NAME}
+			COMMAND cp -r ${OUT} ${WIDGET_HTTPDIR}
+			)
+			add_custom_target(${POPULE_WIDGET_TARGET} ALL DEPENDS ${WIDGET_HTTPDIR})
+	elseif(${T} STREQUAL "DATA")
+		add_custom_command(OUTPUT ${WIDGET_DATADIR}
+			DEPENDS ${TARGET_NAME}
+			COMMAND cp -r ${OUT} ${WIDGET_DATADIR}
+			)
+			add_custom_target(${POPULE_WIDGET_TARGET} ALL DEPENDS ${WIDGET_HTTPDIR})
+	endif(${T} STREQUAL "BINDING")
+	PROJECT_TARGET_ADD(${POPULE_WIDGET_TARGET})
+endmacro(populate_widget)
+
+macro(build_widget)
+	if("${PROJECT_TARGETS}" MATCHES "populate_")
+		if(NOT EXISTS ${WIDGET_DIR}/config.xml.in OR NOT EXISTS ${WIDGET_DIR}/${PROJECT_ICON}.in)
+			configure_file(${PROJECT_WGT_DIR}/config.xml.in ${WIDGET_DIR}/config.xml)
+			file(COPY ${PROJECT_WGT_DIR}/${PROJECT_ICON}.in DESTINATION ${WIDGET_DIR}/${PROJECT_ICON})
+		endif(NOT EXISTS ${WIDGET_DIR}/config.xml.in OR NOT EXISTS ${WIDGET_DIR}/${PROJECT_ICON}.in)
+
+		file(GLOB PROJECT_CONF_FILES "${PROJECT_WGT_DIR}/etc/*")
+		if(${PROJECT_CONF_FILES})
+			file(COPY "${PROJECT_WGT_DIR}/etc/*" DESTINATION ${WIDGET_ETCDIR}/)
+		endif(${PROJECT_CONF_FILES})
+
+		add_custom_command(OUTPUT ${PROJECT_NAME}.wgt
+		DEPENDS ${PROJECT_TARGETS}
+		COMMAND wgtpkg-pack -f -o ${PROJECT_NAME}.wgt ${WIDGET_DIR}
+		)
+		add_custom_target(widget DEPENDS ${PROJECT_NAME}.wgt)
+		set(ADDITIONAL_MAKE_CLEAN_FILES, "${PROJECT_NAME}.wgt")
+	else()
+		MESSAGE(FATAL_ERROR "Widget tree empty, please populate it by calling  populate_widget() macro with target you want to include into it.")
+	endif("${PROJECT_TARGETS}" MATCHES "populate_")
+endmacro(build_widget)
+
+macro(search_targets)
+	file(GLOB filelist "*")
+	foreach(filename ${filelist})
+	if(EXISTS "${filename}/CMakeLists.txt")
+		add_subdirectory(${filename})
+	endif(EXISTS "${filename}/CMakeLists.txt")
+	endforeach()
+endmacro()
+
+set(CMAKE_BUILD_TYPE Debug CACHE STRING "the type of build")
+set(CMAKE_POSITION_INDEPENDENT_CODE ON)
+set(CMP0048 1)
+
+# Include project configuration
+# ------------------------------
+project(${NAME} VERSION ${VERSION})
+set(PROJECT_WGT_DIR "packaging/wgt" CACHE PATH "Subpath to the widget directory")
+set(PROJECT_LIBDIR "libs" CACHE PATH "Subpath to libraries")
+set(PROJECT_RESOURCES "data" CACHE PATH "Subpath to data")
+
+INCLUDE(FindPkgConfig)
+INCLUDE(CheckIncludeFiles)
+INCLUDE(CheckLibraryExists)
+INCLUDE(GNUInstallDirs)
+
+# Default compilation options
+############################################################################
+link_libraries(-Wl,--as-needed -Wl,--gc-sections)
+add_compile_options(-Wall -Wextra -Wconversion)
+add_compile_options(-Wno-unused-parameter) # frankly not using a parameter does it care?
+add_compile_options(-Wno-sign-compare -Wno-sign-conversion)
+add_compile_options(-Werror=maybe-uninitialized)
+add_compile_options(-Werror=implicit-function-declaration)
+add_compile_options(-ffunction-sections -fdata-sections)
+add_compile_options(-fPIC)
+add_compile_options(-g)
+
+set(CMAKE_C_FLAGS_PROFILING   "-g -O2 -pg -Wp,-U_FORTIFY_SOURCE" CACHE STRING "Flags for profiling")
+set(CMAKE_C_FLAGS_DEBUG       "-g -O2 -ggdb -Wp,-U_FORTIFY_SOURCE" CACHE STRING "Flags for debugging")
+set(CMAKE_C_FLAGS_RELEASE     "-O2" CACHE STRING "Flags for releasing")
+set(CMAKE_C_FLAGS_CCOV        "-g -O2 --coverage" CACHE STRING "Flags for coverage test")
+
+set(CMAKE_CXX_FLAGS_PROFILING    "-g -O0 -pg -Wp,-U_FORTIFY_SOURCE")
+set(CMAKE_CXX_FLAGS_DEBUG        "-g -O0 -ggdb -Wp,-U_FORTIFY_SOURCE")
+set(CMAKE_CXX_FLAGS_RELEASE      "-g -O2")
+set(CMAKE_CXX_FLAGS_CCOV "-g -O2 --coverage")
+
+set(CMAKE_INSTALL_PREFIX      "${CMAKE_SOURCE_DIR}/Install" CACHE PATH "The path where to install")
+
+# (BUG!!!) as PKG_CONFIG_PATH does not work [should be en env variable]
+set(PKG_CONFIG_USE_CMAKE_PREFIX_PATH ON CACHE BOOLEAN "Flag for using prefix path")
+
+# Loop on required package and add options
+foreach (PKG_CONFIG ${PKG_REQUIRED_LIST})
+	PKG_CHECK_MODULES(${PKG_CONFIG} REQUIRED ${PKG_CONFIG})
+
+	INCLUDE_DIRECTORIES(${${PKG_CONFIG}_INCLUDE_DIRS})
+	list (APPEND link_libraries ${${PKG_CONFIG}_LIBRARIES})
+	add_compile_options (${${PKG_CONFIG}_CFLAGS})
+endforeach(PKG_CONFIG)
+
+# Optional LibEfence Malloc debug library
+IF(CMAKE_BUILD_TYPE MATCHES DEBUG)
+CHECK_LIBRARY_EXISTS(efence malloc "" HAVE_LIBEFENCE)
+IF(HAVE_LIBEFENCE)
+	MESSAGE(STATUS "Linking with ElectricFence for debugging purposes...")
+	SET(libefence_LIBRARIES "-lefence")
+	list (APPEND link_libraries ${libefence_LIBRARIES})
+ENDIF(HAVE_LIBEFENCE)
+ENDIF(CMAKE_BUILD_TYPE MATCHES DEBUG)
+
+# set default include directories
+INCLUDE_DIRECTORIES(${EXTRA_INCLUDE_DIRS})
+
+# If no install dir try to guess some smart default
+if(BINDINGS_INSTALL_PREFIX)
+	set(BINDINGS_INSTALL_DIR ${BINDINGS_INSTALL_PREFIX}/${PROJECT_NAME})
+else()
+	set(BINDINGS_INSTALL_DIR ${CMAKE_CURRENT_BINARY_DIR}/${PROJECT_NAME})
+endif()
+
+# Define a default package directory
+if(WIDGET_PREFIX)
+	set(WIDGET_DIR ${WIDGET_PREFIX}/package)
+else()
+	set(WIDGET_DIR ${CMAKE_CURRENT_BINARY_DIR}/package)
+endif()
+
+# and their subsequent subdir
+set(WIDGET_BINDIR ${WIDGET_DIR}/bin)
+set(WIDGET_ETCDIR ${WIDGET_DIR}/etc)
+set(WIDGET_LIBDIR ${WIDGET_DIR}/lib)
+set(WIDGET_HTTPDIR ${WIDGET_DIR}/htdocs)
+set(WIDGET_DATADIR ${WIDGET_DIR}/data)
+
+# Default Linkflag
+if(NOT BINDINGS_LINK_FLAG)
+	set(BINDINGS_LINK_FLAG "-Wl,--version-script=${CMAKE_SOURCE_DIR}/etc/export.map")
+endif()
+
+# Add a dummy target to enable global dependency order
+# -----------------------------------------------------
+if(EXTRA_DEPENDENCIES_ORDER)
+	set(DEPENDENCIES_TARGET ${PROJECT_NAME}_extra_dependencies)
+	add_custom_target(${DEPENDENCIES_TARGET} ALL
+		DEPENDS ${EXTRA_DEPENDENCY_ORDER} 
+	)
+endif()
+
+# Cmake does not maintain targets list before 3.7
+# -------------------------------------------------
+if(${CMAKE_VERSION} VERSION_LESS 3.7)
+	set(GLOBAL_TARGET_LIST ${PROJECT_TARGETS})
+else()
+	get_property(GLOBAL_TARGET_LIST GLOBAL PROPERTY GlobalTargetList)
+endif()
+
+# Print developer helper message when everything is done
+# -------------------------------------------------------
+if(CLOSING_MESSAGE AND GLOBAL_TARGET_LIST)
+	add_custom_target(${PROJECT_NAME}_done ALL
+		DEPENDS ${DEPENDENCIES_TARGET} ${GLOBAL_TARGET_LIST}
+		COMMAND ${CMAKE_COMMAND} -E cmake_echo_color --cyan "++ ${CLOSING_MESSAGE}"
+	)
+endif()
+
diff --git a/templates/hybrid-html5/packaging/wgt/config.xml.in b/templates/hybrid-html5/packaging/wgt/config.xml.in
new file mode 100644
index 0000000..99c0168
--- /dev/null
+++ b/templates/hybrid-html5/packaging/wgt/config.xml.in
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<widget xmlns="http://www.w3.org/ns/widgets" id="@PROJECT_NAME@" version="@PROJECT_VERSION@">
+  <name>@PROJECT_NAME@</name>
+  <icon src="icon.png"/>
+  <content src="htdocs/index.html" type="application/vnd.agl.html.hybrid"/>
+  <description>@PROJECT_DESCRIPTION@</description>
+  <author>Romain Forlot &lt;romain.forlot@iot.bzh&gt;</author>
+  <license>APL 2.0</license>
+</widget>
+
+
diff --git a/templates/hybrid-html5/packaging/wgt/icon.png.in b/templates/hybrid-html5/packaging/wgt/icon.png.in
new file mode 100644
index 0000000..bf39b23
--- /dev/null
+++ b/templates/hybrid-html5/packaging/wgt/icon.png.in
diff --git a/templates/native/.gitignore b/templates/native/.gitignore
new file mode 100644
index 0000000..9a13971
--- /dev/null
+++ b/templates/native/.gitignore
@@ -0,0 +1,3 @@
+build
+config.xml
+*.wgt
diff --git a/templates/native/AGLbuild b/templates/native/AGLbuild
new file mode 100755
index 0000000..ccbc28b
--- /dev/null
+++ b/templates/native/AGLbuild
@@ -0,0 +1,41 @@
+#!/usr/bin/make -f
+# Copyright (C) 2015, 2016 "IoT.bzh"
+# Author "Romain Forlot" <romain.forlot@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.
+
+BUILD_DIR   := build
+PACKAGING_DIR := packaging/wgt
+
+VPATH = etc:$(PACKAGING_DIR):$(PACKAGING_DIR)/etc:$(BUILD_DIR)
+
+.PHONY: all clean mrproper package
+
+all: build
+
+clean:
+	@([ -d ${BUILD_DIR} ] && make -C ${BUILD_DIR} clean) || echo Nothing to clean
+
+mrproper:
+	rm -rf ${BUILD_DIR}
+
+build:  ${BUILD_DIR}/Makefile
+	cmake --build ${BUILD_DIR} --target all
+
+package: config.xml.in icon.png.in build | $(PKG_FILELIST)
+	mkdir -p ${BUILD_DIR}/$@/{bin,etc,lib,htdocs,data}
+	cmake --build ${BUILD_DIR} --target widget
+
+${BUILD_DIR}/Makefile:
+	@[ -d ${BUILD_DIR} ] || mkdir -p ${BUILD_DIR}
+	@[ -f ${BUILD_DIR}/Makefile ] || (cd ${BUILD_DIR} && cmake ${CMAKE_OPTS} ..)
+\ No newline at end of file
diff --git a/templates/native/CMakeLists.txt b/templates/native/CMakeLists.txt
new file mode 100644
index 0000000..0361f72
--- /dev/null
+++ b/templates/native/CMakeLists.txt
@@ -0,0 +1,55 @@
+###########################################################################
+# Copyright 2015, 2016, 2017 IoT.bzh
+#
+# author: Romain Forlot <romain.forlot@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.
+###########################################################################
+
+CMAKE_MINIMUM_REQUIRED(VERSION 3.3)
+
+include(${CMAKE_CURRENT_SOURCE_DIR}/etc/config.cmake)
+include(${CMAKE_CURRENT_SOURCE_DIR}/etc/macros.cmake)
+
+# Add target to project dependency list
+PROJECT_TARGET_ADD(native-example)
+
+	# Define project Targets
+	add_executable(${TARGET_NAME} app/xxxxxx-native-client.c
+	)
+
+	link_libraries(
+		${CMAKE_THREAD_LIBS_INIT}
+		${libafbwsc_LIBRARIES}
+		${json-c_LIBRARIES}
+		${libsystemd_LIBRARIES}
+	)
+
+	# Binder exposes a unique public entry point
+	SET_TARGET_PROPERTIES(${TARGET_NAME} PROPERTIES
+		PREFIX ""
+		LABELS "EXECUTABLE"
+		OUTPUT_NAME ${TARGET_NAME})
+
+	TARGET_INCLUDE_DIRECTORIES(${TARGET_NAME}
+		PUBLIC	${libafbwsc_INCLUDE_DIRS}
+			${json-c_INCLUDE_DIRS}
+			${libsystemd_INCLUDE_DIRS})
+
+	TARGET_LINK_LIBRARIES(${TARGET_NAME}
+		afbwsc
+		${link_libraries})
+
+populate_widget()
+
+build_widget()
diff --git a/templates/native/app/xxxxxx-native-client.c b/templates/native/app/xxxxxx-native-client.c
new file mode 100644
index 0000000..312fd1a
--- /dev/null
+++ b/templates/native/app/xxxxxx-native-client.c
@@ -0,0 +1,242 @@
+/*
+ * Copyright (C) 2015, 2016 "IoT.bzh"
+ * Author "Fulup Ar Foll" <fulup@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.
+ */
+
+#define _GNU_SOURCE
+
+#include <stdlib.h>
+#include <stdio.h>
+#include <stdint.h>
+#include <string.h>
+#include <unistd.h>
+#include <fcntl.h>
+#include <sys/stat.h>
+#include <sys/types.h>
+#include <errno.h>
+
+#include <systemd/sd-event.h>
+
+#include <afb/afb-wsj1.h>
+#include <afb/afb-ws-client.h>
+
+/* declaration of functions */
+static void on_hangup(void *closure, struct afb_wsj1 *wsj1);
+static void on_call(void *closure, const char *api, const char *verb, struct afb_wsj1_msg *msg);
+static void on_event(void *closure, const char *event, struct afb_wsj1_msg *msg);
+static int io_event_callback(sd_event_source *src, int fd, uint32_t revents, void *closure);
+static void emit(const char *api, const char *verb, const char *object);
+
+/* the callback interface for wsj1 */
+static struct afb_wsj1_itf itf = {
+	.on_hangup = on_hangup,
+	.on_call = on_call,
+	.on_event = on_event
+};
+
+/* global variables */
+static struct afb_wsj1 *wsj1;
+static int exonrep;
+static int callcount;
+static sd_event_source *evsrc;
+
+/* print usage of the program */
+static void usage(int status, char *arg0)
+{
+	char *name = strrchr(arg0, '/');
+	name = name ? name + 1 : arg0;
+	fprintf(status ? stderr : stdout, "usage: %s uri [api verb [data]]\n", name);
+	exit(status);
+}
+
+/* entry function */
+int main(int ac, char **av, char **env)
+{
+	int rc;
+	sd_event *loop;
+
+	/* check the argument count */
+	if (ac != 2 && ac != 4 && ac != 5)
+		usage(1, av[0]);
+
+	/* emit error and exit if requested */
+	if (!strcmp(av[1], "-h") || !strcmp(av[1], "--help"))
+		usage(0, av[0]);
+
+	/* get the default event loop */
+	rc = sd_event_default(&loop);
+	if (rc < 0) {
+		fprintf(stderr, "connection to default event loop failed: %s\n", strerror(-rc));
+		return 1;
+	}
+
+	/* connect the websocket wsj1 to the uri given by the first argument */
+	wsj1 = afb_ws_client_connect_wsj1(loop,av[1], &itf, NULL);
+	if (wsj1 == NULL) {
+		fprintf(stderr, "connection to %s failed: %m\n", av[1]);
+		return 1;
+	}
+
+	/* test the behaviour */
+	if (ac == 2) {
+		/* get requests from stdin */
+		fcntl(0, F_SETFL, O_NONBLOCK);
+		sd_event_add_io(loop, &evsrc, 0, EPOLLIN, io_event_callback, NULL);
+	} else {
+		/* the request is defined by the arguments */
+		exonrep = 1;
+		emit(av[2], av[3], av[4]);
+	}
+
+	/* loop until end */
+	for(;;)
+		sd_event_run(loop, 30000000);
+	return 0;
+}
+
+/* called when wsj1 hangsup */
+static void on_hangup(void *closure, struct afb_wsj1 *wsj1)
+{
+	printf("ON-HANGUP\n");
+	exit(0);
+}
+
+/* called when wsj1 receives a method invocation */
+static void on_call(void *closure, const char *api, const char *verb, struct afb_wsj1_msg *msg)
+{
+	int rc;
+	printf("ON-CALL %s/%s(%s)\n", api, verb, afb_wsj1_msg_object_s(msg));
+	rc = afb_wsj1_reply_error_s(msg, "\"unimplemented\"", NULL);
+	if (rc < 0)
+		fprintf(stderr, "replying failed: %m\n");
+}
+
+/* called when wsj1 receives an event */
+static void on_event(void *closure, const char *event, struct afb_wsj1_msg *msg)
+{
+	printf("ON-EVENT %s(%s)\n", event, afb_wsj1_msg_object_s(msg));
+}
+
+/* called when wsj1 receives a reply */
+static void on_reply(void *closure, struct afb_wsj1_msg *msg)
+{
+	printf("ON-REPLY %s: %s\n", (char*)closure, afb_wsj1_msg_object_s(msg));
+	free(closure);
+	callcount--;
+	if (exonrep && !callcount)
+		//afb_wsj1_hangup(afb_wsj1_msg_wsj1(msg));
+		exit(0);
+}
+
+/* makes a call */
+static void call(const char *api, const char *verb, const char *object)
+{
+	static int num = 0;
+	char *key;
+	int rc;
+
+	/* allocates an id for the request */
+	rc = asprintf(&key, "%d:%s/%s", ++num, api, verb);
+
+	/* send the request */
+	callcount++;
+	rc = afb_wsj1_call_s(wsj1, api, verb, object, on_reply, key);
+	if (rc < 0) {
+		fprintf(stderr, "calling %s/%s(%s) failed: %m\n", api, verb, object);
+		callcount--;
+	}
+}
+
+/* sends an event */
+static void event(const char *event, const char *object)
+{
+	int rc;
+
+	rc = afb_wsj1_send_event_s(wsj1, event, object);
+	if (rc < 0)
+		fprintf(stderr, "sending !%s(%s) failed: %m\n", event, object);
+}
+
+/* emits either a call (when api!='!') or an event */
+static void emit(const char *api, const char *verb, const char *object)
+{
+	if (object == NULL || object[0] == 0)
+		object = "null";
+	if (api[0] == '!' && api[1] == 0)
+		event(verb, object);
+	else
+		call(api, verb, object);
+}
+
+/* called when something happens on stdin */
+static int io_event_callback(sd_event_source *src, int fd, uint32_t revents, void *closure)
+{
+	static size_t count = 0;
+	static char line[16384];
+	static char sep[] = " \t";
+	static char sepnl[] = " \t\n";
+
+	ssize_t rc;
+	size_t pos;
+
+	/* read the buffer */
+	do { rc = read(0, line + count, sizeof line - count); } while (rc < 0 && errno == EINTR);
+	if (rc < 0) {
+		fprintf(stderr, "read error: %m\n");
+		exit(1);
+	}
+	if (rc == 0) {
+		if (!callcount)
+			exit(0);
+		exonrep = 1;
+		sd_event_source_unref(evsrc);
+	}
+	count += (size_t)rc;
+
+	/* normalise the buffer content */
+	/* TODO: handle backspace \x7f ? */
+
+	/* process the lines */
+	pos = 0;
+	for(;;) {
+		size_t i, api[2], verb[2], rest[2];
+		i = pos;
+		while(i < count && strchr(sep, line[i])) i++;
+		api[0] = i; while(i < count && !strchr(sepnl, line[i])) i++; api[1] = i;
+		while(i < count && strchr(sep, line[i])) i++;
+		verb[0] = i; while(i < count && !strchr(sepnl, line[i])) i++; verb[1] = i;
+		while(i < count && strchr(sep, line[i])) i++;
+		rest[0] = i; while(i < count && line[i] != '\n') i++; rest[1] = i;
+		if (i == count) break;
+		line[i++] = 0;
+		if (api[0] == api[1] || verb[0] == verb[1])
+			fprintf(stderr, "bad line: %s\n", line+pos);
+		else {
+			line[api[1]] = line[verb[1]] = 0;
+			emit(line + api[0], line + verb[0], line + rest[0]);
+		}
+		pos = i;
+	}
+	count -= pos;
+	if (count == sizeof line) {
+		fprintf(stderr, "overflow\n");
+		exit(1);
+	}
+	if (count)
+		memmove(line, line + pos, count);
+	return 1;
+}
+
diff --git a/templates/native/etc/config.cmake b/templates/native/etc/config.cmake
new file mode 100644
index 0000000..5e8a488
--- /dev/null
+++ b/templates/native/etc/config.cmake
@@ -0,0 +1,91 @@
+###########################################################################
+# Copyright 2015, 2016, 2017 IoT.bzh
+#
+# author: Fulup Ar Foll <fulup@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.
+###########################################################################
+
+# Project Info
+# ------------------
+set(NAME Hybrid-QML-example)
+set(VERSION "0.0")
+set(PROJECT_PRETTY_NAME "Hybrid QML Example")
+set(PROJECT_DESCRIPTION "Hybrid QML AGL application example")
+set(PROJECT_URL "https://gerrit.automotivelinux.org/gerrit/apps/app-templates")
+set(PROJECT_ICON "icon.png")
+
+# Compilation Mode (DEBUG, RELEASE)
+# ----------------------------------
+set(CMAKE_BUILD_TYPE "DEBUG")
+
+# Compiler selection if needed. Overload the detected compiler.
+# -----------------------------------------------
+#set(CMAKE_C_COMPILER "gcc")
+#set(CMAKE_CXX_COMPILER "g++")
+
+# PKG_CONFIG required packages
+# -----------------------------
+set (PKG_REQUIRED_LIST 
+	json-c
+	libsystemd
+	libafbwsc
+	afb-daemon
+)
+
+# Static constante definition
+# -----------------------------
+add_compile_options(
+	${libafbwsc_CFLAGS}
+	${json-c_CFLAGS}
+	${libsystemd_CFLAGS}
+)
+
+# LANG Specific compile flags set for all build types
+set(CMAKE_C_FLAGS "")
+set(CMAKE_CXX_FLAGS "")
+
+# Print a helper message when every thing is finished
+# ----------------------------------------------------
+#set(CLOSING_MESSAGE "")
+
+
+# (BUG!!!) as PKG_CONFIG_PATH does not work [should be an env variable]
+# ---------------------------------------------------------------------
+set(CMAKE_INSTALL_PREFIX ${HOME}/opt)
+set(CMAKE_PREFIX_PATH ${CMAKE_INSTALL_PREFIX}/lib64/pkgconfig ${CMAKE_INSTALL_PREFIX}/lib/pkgconfig)
+set(LD_LIBRARY_PATH ${CMAKE_INSTALL_PREFIX}/lib64 ${CMAKE_INSTALL_PREFIX}/lib)
+
+# Optional dependencies order
+# ---------------------------
+#set(EXTRA_DEPENDENCIES_ORDER)
+
+# Optional Extra global include path
+# -----------------------------------
+#set(EXTRA_INCLUDE_DIRS)
+
+# Optional extra libraries
+# -------------------------
+#set(EXTRA_LINK_LIBRARIES)
+
+# Optional force binding installation
+# ------------------------------------
+set(BINDINGS_INSTALL_PREFIX /opt )
+
+# Optional force widget prefix generation
+# ---------------------------------------
+# set(WIDGET_PREFIX DestinationPath)
+
+# Optional force binding Linking flag
+# ------------------------------------
+# set(BINDINGS_LINK_FLAG LinkOptions )
diff --git a/templates/native/etc/export.map b/templates/native/etc/export.map
new file mode 100644
index 0000000..ee2f413
--- /dev/null
+++ b/templates/native/etc/export.map
@@ -0,0 +1 @@
+{ global: afbBindingV*; local: *; };
diff --git a/templates/native/etc/macros.cmake b/templates/native/etc/macros.cmake
new file mode 100644
index 0000000..6a389de
--- /dev/null
+++ b/templates/native/etc/macros.cmake
@@ -0,0 +1,252 @@
+###########################################################################
+# Copyright 2015, 2016, 2017 IoT.bzh
+#
+# author: Fulup Ar Foll <fulup@iot.bzh>
+# contrib: Romain Forlot <romain.forlot@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.
+###########################################################################
+
+
+#--------------------------------------------------------------------------
+#  WARNING: 
+#     Do not change this cmake template
+#     Customise your preferences in "./etc/config.cmake"
+#--------------------------------------------------------------------------
+
+
+# Generic useful macro
+# -----------------------
+macro(PROJECT_TARGET_ADD TARGET_NAME)
+	set(PROJECT_TARGETS ${PROJECT_TARGETS} ${TARGET_NAME} CACHE INTERNAL PROJECT_TARGETS)
+	set(TARGET_NAME ${TARGET_NAME})
+endmacro(PROJECT_TARGET_ADD)
+
+macro(defstr name value)
+	add_definitions(-D${name}=${value})
+endmacro(defstr)
+
+# Dumb macro to add each directory under a path. Make sure we grab all header files!
+macro(fill_include_dir path)
+	file(GLOB_RECURSE dirlist LIST_DIRECTORIES true "${path}/*")
+	foreach(filename ${dirlist})
+		if(IS_DIRECTORY ${filename})
+			include_directories(${filename})
+		endif(IS_DIRECTORY ${filename})
+	endforeach()
+endmacro(fill_include_dir)
+
+# Helper function to retrieve source files from a library repo.
+function(find_source_files path)
+	file(GLOB_RECURSE cfiles "${path}/*.[c]")
+	file(GLOB_RECURSE cppfiles "${path}/*.cpp")
+	foreach(filename ${cfiles})
+		if(NOT ${filename} MATCHES ".*([Tt]est|[Ee]xample|[Ss]ample).*")
+			string(APPEND sources "${filename};")
+		endif(NOT ${filename} MATCHES ".*([Tt]est|[Ee]xample|[Ss]ample).*")
+	endforeach()
+	foreach(filename ${cppfiles})
+		if(NOT ${filename} MATCHES ".*([Tt]est|[Ee]xample|[Ss]ample).*")
+			string(APPEND sources "${filename};")
+		endif(NOT ${filename} MATCHES ".*([Tt]est|[Ee]xample|[Ss]ample).*")
+	endforeach()
+	set(sources_files ${sources} PARENT_SCOPE)
+endfunction(find_source_files)
+
+# WGT packaging
+macro(populate_widget)
+	# Declaration of a custom command that will populate widget tree with the target
+	set(POPULE_WIDGET_TARGET "populate_${TARGET_NAME}")
+
+	get_target_property(T ${TARGET_NAME} LABELS)
+	get_target_property(OUT ${TARGET_NAME} OUTPUT_NAME)
+
+	if(${T} STREQUAL "BINDING")
+		add_custom_command(OUTPUT ${WIDGET_LIBDIR}/${TARGET_NAME}.so
+			DEPENDS ${TARGET_NAME}
+			COMMAND mkdir -p ${WIDGET_LIBDIR}
+			COMMAND cp ${OUT}.so ${WIDGET_LIBDIR}
+		)
+		add_custom_target(${POPULE_WIDGET_TARGET} ALL DEPENDS ${WIDGET_LIBDIR}/${TARGET_NAME}.so)
+	elseif(${T} STREQUAL "EXECUTABLE")
+		add_custom_command(OUTPUT ${WIDGET_BINDIR}/${TARGET_NAME}
+			DEPENDS ${TARGET_NAME}
+			COMMAND mkdir -p ${WIDGET_BINDIR}
+			COMMAND cp ${OUT} ${WIDGET_BINDIR}
+		)
+		add_custom_target(${POPULE_WIDGET_TARGET} ALL DEPENDS ${WIDGET_BINDIR}/${TARGET_NAME})
+	elseif(${T} STREQUAL "HTDOCS")
+		add_custom_command(OUTPUT ${WIDGET_HTTPDIR}
+			DEPENDS ${TARGET_NAME}
+			COMMAND cp -r ${OUT} ${WIDGET_HTTPDIR}
+			)
+			add_custom_target(${POPULE_WIDGET_TARGET} ALL DEPENDS ${WIDGET_HTTPDIR})
+	elseif(${T} STREQUAL "DATA")
+		add_custom_command(OUTPUT ${WIDGET_DATADIR}
+			DEPENDS ${TARGET_NAME}
+			COMMAND cp -r ${OUT} ${WIDGET_DATADIR}
+			)
+			add_custom_target(${POPULE_WIDGET_TARGET} ALL DEPENDS ${WIDGET_HTTPDIR})
+	endif(${T} STREQUAL "BINDING")
+	PROJECT_TARGET_ADD(${POPULE_WIDGET_TARGET})
+endmacro(populate_widget)
+
+macro(build_widget)
+	if("${PROJECT_TARGETS}" MATCHES "populate_")
+		if(NOT EXISTS ${WIDGET_DIR}/config.xml.in OR NOT EXISTS ${WIDGET_DIR}/${PROJECT_ICON}.in)
+			configure_file(${PROJECT_WGT_DIR}/config.xml.in ${WIDGET_DIR}/config.xml)
+			file(COPY ${PROJECT_WGT_DIR}/${PROJECT_ICON}.in DESTINATION ${WIDGET_DIR}/${PROJECT_ICON})
+		endif(NOT EXISTS ${WIDGET_DIR}/config.xml.in OR NOT EXISTS ${WIDGET_DIR}/${PROJECT_ICON}.in)
+
+		file(GLOB PROJECT_CONF_FILES "${PROJECT_WGT_DIR}/etc/*")
+		if(${PROJECT_CONF_FILES})
+			file(COPY "${PROJECT_WGT_DIR}/etc/*" DESTINATION ${WIDGET_ETCDIR}/)
+		endif(${PROJECT_CONF_FILES})
+
+		add_custom_command(OUTPUT ${PROJECT_NAME}.wgt
+		DEPENDS ${PROJECT_TARGETS}
+		COMMAND wgtpkg-pack -f -o ${PROJECT_NAME}.wgt ${WIDGET_DIR}
+		)
+		add_custom_target(widget DEPENDS ${PROJECT_NAME}.wgt)
+		set(ADDITIONAL_MAKE_CLEAN_FILES, "${PROJECT_NAME}.wgt")
+	else()
+		MESSAGE(FATAL_ERROR "Widget tree empty, please populate it by calling  populate_widget() macro with target you want to include into it.")
+	endif("${PROJECT_TARGETS}" MATCHES "populate_")
+endmacro(build_widget)
+
+macro(search_targets)
+	file(GLOB filelist "*")
+	foreach(filename ${filelist})
+	if(EXISTS "${filename}/CMakeLists.txt")
+		add_subdirectory(${filename})
+	endif(EXISTS "${filename}/CMakeLists.txt")
+	endforeach()
+endmacro()
+
+set(CMAKE_BUILD_TYPE Debug CACHE STRING "the type of build")
+set(CMAKE_POSITION_INDEPENDENT_CODE ON)
+set(CMP0048 1)
+
+# Include project configuration
+# ------------------------------
+project(${NAME} VERSION ${VERSION})
+set(PROJECT_WGT_DIR "packaging/wgt" CACHE PATH "Subpath to the widget directory")
+set(PROJECT_LIBDIR "libs" CACHE PATH "Subpath to libraries")
+set(PROJECT_RESOURCES "data" CACHE PATH "Subpath to data")
+
+INCLUDE(FindPkgConfig)
+INCLUDE(CheckIncludeFiles)
+INCLUDE(CheckLibraryExists)
+INCLUDE(GNUInstallDirs)
+
+# Default compilation options
+############################################################################
+link_libraries(-Wl,--as-needed -Wl,--gc-sections)
+add_compile_options(-Wall -Wextra -Wconversion)
+add_compile_options(-Wno-unused-parameter) # frankly not using a parameter does it care?
+add_compile_options(-Wno-sign-compare -Wno-sign-conversion)
+add_compile_options(-Werror=maybe-uninitialized)
+add_compile_options(-Werror=implicit-function-declaration)
+add_compile_options(-ffunction-sections -fdata-sections)
+add_compile_options(-fPIC)
+add_compile_options(-g)
+
+set(CMAKE_C_FLAGS_PROFILING   "-g -O2 -pg -Wp,-U_FORTIFY_SOURCE" CACHE STRING "Flags for profiling")
+set(CMAKE_C_FLAGS_DEBUG       "-g -O2 -ggdb -Wp,-U_FORTIFY_SOURCE" CACHE STRING "Flags for debugging")
+set(CMAKE_C_FLAGS_RELEASE     "-O2" CACHE STRING "Flags for releasing")
+set(CMAKE_C_FLAGS_CCOV        "-g -O2 --coverage" CACHE STRING "Flags for coverage test")
+
+set(CMAKE_CXX_FLAGS_PROFILING    "-g -O0 -pg -Wp,-U_FORTIFY_SOURCE")
+set(CMAKE_CXX_FLAGS_DEBUG        "-g -O0 -ggdb -Wp,-U_FORTIFY_SOURCE")
+set(CMAKE_CXX_FLAGS_RELEASE      "-g -O2")
+set(CMAKE_CXX_FLAGS_CCOV "-g -O2 --coverage")
+
+set(CMAKE_INSTALL_PREFIX      "${CMAKE_SOURCE_DIR}/Install" CACHE PATH "The path where to install")
+
+# (BUG!!!) as PKG_CONFIG_PATH does not work [should be en env variable]
+set(PKG_CONFIG_USE_CMAKE_PREFIX_PATH ON CACHE BOOLEAN "Flag for using prefix path")
+
+# Loop on required package and add options
+foreach (PKG_CONFIG ${PKG_REQUIRED_LIST})
+	PKG_CHECK_MODULES(${PKG_CONFIG} REQUIRED ${PKG_CONFIG})
+
+	INCLUDE_DIRECTORIES(${${PKG_CONFIG}_INCLUDE_DIRS})
+	list (APPEND link_libraries ${${PKG_CONFIG}_LIBRARIES})
+	add_compile_options (${${PKG_CONFIG}_CFLAGS})
+endforeach(PKG_CONFIG)
+
+# Optional LibEfence Malloc debug library
+IF(CMAKE_BUILD_TYPE MATCHES DEBUG)
+CHECK_LIBRARY_EXISTS(efence malloc "" HAVE_LIBEFENCE)
+IF(HAVE_LIBEFENCE)
+	MESSAGE(STATUS "Linking with ElectricFence for debugging purposes...")
+	SET(libefence_LIBRARIES "-lefence")
+	list (APPEND link_libraries ${libefence_LIBRARIES})
+ENDIF(HAVE_LIBEFENCE)
+ENDIF(CMAKE_BUILD_TYPE MATCHES DEBUG)
+
+# set default include directories
+INCLUDE_DIRECTORIES(${EXTRA_INCLUDE_DIRS})
+
+# If no install dir try to guess some smart default
+if(BINDINGS_INSTALL_PREFIX)
+	set(BINDINGS_INSTALL_DIR ${BINDINGS_INSTALL_PREFIX}/${PROJECT_NAME})
+else()
+	set(BINDINGS_INSTALL_DIR ${CMAKE_CURRENT_BINARY_DIR}/${PROJECT_NAME})
+endif()
+
+# Define a default package directory
+if(WIDGET_PREFIX)
+	set(WIDGET_DIR ${WIDGET_PREFIX}/package)
+else()
+	set(WIDGET_DIR ${CMAKE_CURRENT_BINARY_DIR}/package)
+endif()
+
+# and their subsequent subdir
+set(WIDGET_BINDIR ${WIDGET_DIR}/bin)
+set(WIDGET_ETCDIR ${WIDGET_DIR}/etc)
+set(WIDGET_LIBDIR ${WIDGET_DIR}/lib)
+set(WIDGET_HTTPDIR ${WIDGET_DIR}/htdocs)
+set(WIDGET_DATADIR ${WIDGET_DIR}/data)
+
+# Default Linkflag
+if(NOT BINDINGS_LINK_FLAG)
+	set(BINDINGS_LINK_FLAG "-Wl,--version-script=${CMAKE_SOURCE_DIR}/etc/export.map")
+endif()
+
+# Add a dummy target to enable global dependency order
+# -----------------------------------------------------
+if(EXTRA_DEPENDENCIES_ORDER)
+	set(DEPENDENCIES_TARGET ${PROJECT_NAME}_extra_dependencies)
+	add_custom_target(${DEPENDENCIES_TARGET} ALL
+		DEPENDS ${EXTRA_DEPENDENCY_ORDER} 
+	)
+endif()
+
+# Cmake does not maintain targets list before 3.7
+# -------------------------------------------------
+if(${CMAKE_VERSION} VERSION_LESS 3.7)
+	set(GLOBAL_TARGET_LIST ${PROJECT_TARGETS})
+else()
+	get_property(GLOBAL_TARGET_LIST GLOBAL PROPERTY GlobalTargetList)
+endif()
+
+# Print developer helper message when everything is done
+# -------------------------------------------------------
+if(CLOSING_MESSAGE AND GLOBAL_TARGET_LIST)
+	add_custom_target(${PROJECT_NAME}_done ALL
+		DEPENDS ${DEPENDENCIES_TARGET} ${GLOBAL_TARGET_LIST}
+		COMMAND ${CMAKE_COMMAND} -E cmake_echo_color --cyan "++ ${CLOSING_MESSAGE}"
+	)
+endif()
+
diff --git a/templates/native/packaging/wgt/config.xml.in b/templates/native/packaging/wgt/config.xml.in
new file mode 100644
index 0000000..99c0168
--- /dev/null
+++ b/templates/native/packaging/wgt/config.xml.in
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<widget xmlns="http://www.w3.org/ns/widgets" id="@PROJECT_NAME@" version="@PROJECT_VERSION@">
+  <name>@PROJECT_NAME@</name>
+  <icon src="icon.png"/>
+  <content src="htdocs/index.html" type="application/vnd.agl.html.hybrid"/>
+  <description>@PROJECT_DESCRIPTION@</description>
+  <author>Romain Forlot &lt;romain.forlot@iot.bzh&gt;</author>
+  <license>APL 2.0</license>
+</widget>
+
+
diff --git a/templates/native/packaging/wgt/icon.png.in b/templates/native/packaging/wgt/icon.png.in
new file mode 100644
index 0000000..fcb5d35
--- /dev/null
+++ b/templates/native/packaging/wgt/icon.png.in
diff --git a/templates/service/.gitignore b/templates/service/.gitignore
new file mode 100644
index 0000000..eef9ed9
--- /dev/null
+++ b/templates/service/.gitignore
@@ -0,0 +1,4 @@
+build
+config.xml
+*.so
+*.wgt
diff --git a/templates/service/AGLbuild b/templates/service/AGLbuild
new file mode 100755
index 0000000..ccbc28b
--- /dev/null
+++ b/templates/service/AGLbuild
@@ -0,0 +1,41 @@
+#!/usr/bin/make -f
+# Copyright (C) 2015, 2016 "IoT.bzh"
+# Author "Romain Forlot" <romain.forlot@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.
+
+BUILD_DIR   := build
+PACKAGING_DIR := packaging/wgt
+
+VPATH = etc:$(PACKAGING_DIR):$(PACKAGING_DIR)/etc:$(BUILD_DIR)
+
+.PHONY: all clean mrproper package
+
+all: build
+
+clean:
+	@([ -d ${BUILD_DIR} ] && make -C ${BUILD_DIR} clean) || echo Nothing to clean
+
+mrproper:
+	rm -rf ${BUILD_DIR}
+
+build:  ${BUILD_DIR}/Makefile
+	cmake --build ${BUILD_DIR} --target all
+
+package: config.xml.in icon.png.in build | $(PKG_FILELIST)
+	mkdir -p ${BUILD_DIR}/$@/{bin,etc,lib,htdocs,data}
+	cmake --build ${BUILD_DIR} --target widget
+
+${BUILD_DIR}/Makefile:
+	@[ -d ${BUILD_DIR} ] || mkdir -p ${BUILD_DIR}
+	@[ -f ${BUILD_DIR}/Makefile ] || (cd ${BUILD_DIR} && cmake ${CMAKE_OPTS} ..)
+\ No newline at end of file
diff --git a/templates/service/CMakeLists.txt b/templates/service/CMakeLists.txt
new file mode 100644
index 0000000..ea06ed0
--- /dev/null
+++ b/templates/service/CMakeLists.txt
@@ -0,0 +1,40 @@
+###########################################################################
+# Copyright 2015, 2016, 2017 IoT.bzh
+#
+# author: Romain Forlot <romain.forlot@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.
+###########################################################################
+
+CMAKE_MINIMUM_REQUIRED(VERSION 3.3)
+
+include(${CMAKE_CURRENT_SOURCE_DIR}/etc/config.cmake)
+include(${CMAKE_CURRENT_SOURCE_DIR}/etc/macros.cmake)
+
+# Add target to project dependency list
+PROJECT_TARGET_ADD(service-example)
+
+	# Define project Targets
+	add_library(${TARGET_NAME} MODULE
+		binding/xxxxxx-service-binding.c
+	)
+
+	# Binder exposes a unique public entry point
+	SET_TARGET_PROPERTIES(${TARGET_NAME} PROPERTIES
+		PREFIX ""
+		LABELS "BINDING"
+		OUTPUT_NAME ${TARGET_NAME})
+
+populate_widget()
+
+build_widget()
diff --git a/templates/service/README.md b/templates/service/README.md
new file mode 100644
index 0000000..17c9869
--- /dev/null
+++ b/templates/service/README.md
@@ -0,0 +1,66 @@
+# Application Framework - Service Template
+
+## Instructions
+
+Duplicate directory and adjust names. In particular, replace 'xxxxxx' by a proper service name.
+
+* adjust CMakeLists.txt (project name and version)
+* ajdust config.xml (description, author, license...)
+* rename xxxxxx-service-binding.c to something meaningful
+* store icon file in icons directory and update the variable PROJECT_ICON in CMakeLists.txt
+
+## Build
+
+Run:
+
+```
+mkdir build
+cd build
+cmake ..
+make
+```
+
+## Deployment
+
+Copy the .wgt file on the target through ssh and install it (adjust BOARDIP to your real IP address):
+
+```
+$ BOARDIP=1.2.3.4
+$ scp xxxxxx-service.wgt root@$BOARDIP:/tmp
+$ ssh root@$BOARDIP
+# afm-util install /tmp/xxxxxx-service.wgt
+# afm-util list
+```
+
+## Run service manually
+
+On the target board:
+
+```
+# afm-util start xxxxxx-server@0.1
+# ps -ef| grep afb-daemon | grep xxx
+```
+
+## Test using curl
+
+```
+# PORT=12345 # adjust the port depending in on afb-daemon instance: use ps -ef to check
+# curl -v http://localhost:$PORT/api/xxxxxx/ping
+*   Trying 127.0.0.1...
+* Connected to localhost (127.0.0.1) port 5555 (#0)
+> GET /api/xxxxxx/ping HTTP/1.1
+> Host: localhost:5555
+> User-Agent: curl/7.44.0
+> Accept: */*
+> 
+< HTTP/1.1 200 OK
+< Connection: Keep-Alive
+< Content-Length: 184
+< Set-Cookie: x-afb-uuid-5555=30ab9573-cbc8-43f7-b385-0186feebc69a; Path=/api; Max-Age=3600; HttpOnly
+< Date: Sun, 10 Jul 2016 00:09:14 GMT
+< 
+* Connection #0 to host localhost left intact
+{"response":"Some String","jtype":"afb-reply","request":{"status":"success","info":"Ping Binder Daemon tag=pingSample count=1 query={ }","uuid":"30ab9573-cbc8-43f7-b385-0186feebc69a"}}root@porter:~# 
+```
+
+
diff --git a/templates/service/binding/xxxxxx-service-binding.c b/templates/service/binding/xxxxxx-service-binding.c
new file mode 100644
index 0000000..5e823d2
--- /dev/null
+++ b/templates/service/binding/xxxxxx-service-binding.c
@@ -0,0 +1,279 @@
+/*
+ * Copyright (C) 2015, 2016 "IoT.bzh"
+ * Author "Fulup Ar Foll"
+ *
+ * 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.
+ */
+#define _GNU_SOURCE
+#include <stdio.h>
+#include <string.h>
+#include <json-c/json.h>
+
+#include <afb/afb-binding.h>
+
+const struct afb_binding_interface *interface;
+
+struct event
+{
+	struct event *next;
+	struct afb_event event;
+	char tag[1];
+};
+
+static struct event *events = 0;
+
+/* searchs the event of tag */
+static struct event *event_get(const char *tag)
+{
+	struct event *e = events;
+	while(e && strcmp(e->tag, tag))
+		e = e->next;
+	return e;
+}
+
+/* deletes the event of tag */
+static int event_del(const char *tag)
+{
+	struct event *e, **p;
+
+	/* check exists */
+	e = event_get(tag);
+	if (!e) return -1;
+
+	/* unlink */
+	p = &events;
+	while(*p != e) p = &(*p)->next;
+	*p = e->next;
+
+	/* destroys */
+	afb_event_drop(e->event);
+	free(e);
+	return 0;
+}
+
+/* creates the event of tag */
+static int event_add(const char *tag, const char *name)
+{
+	struct event *e;
+
+	/* check valid tag */
+	e = event_get(tag);
+	if (e) return -1;
+
+	/* creation */
+	e = malloc(strlen(tag) + sizeof *e);
+	if (!e) return -1;
+	strcpy(e->tag, tag);
+
+	/* make the event */
+	e->event = afb_daemon_make_event(interface->daemon, name);
+	if (!e->event.closure) { free(e); return -1; }
+
+	/* link */
+	e->next = events;
+	events = e;
+	return 0;
+}
+
+static int event_subscribe(struct afb_req request, const char *tag)
+{
+	struct event *e;
+	e = event_get(tag);
+	return e ? afb_req_subscribe(request, e->event) : -1;
+}
+
+static int event_unsubscribe(struct afb_req request, const char *tag)
+{
+	struct event *e;
+	e = event_get(tag);
+	return e ? afb_req_unsubscribe(request, e->event) : -1;
+}
+
+static int event_push(struct json_object *args, const char *tag)
+{
+	struct event *e;
+	e = event_get(tag);
+	return e ? afb_event_push(e->event, json_object_get(args)) : -1;
+}
+
+// Sample Generic Ping Debug API
+static void ping(struct afb_req request, json_object *jresp, const char *tag)
+{
+	static int pingcount = 0;
+	json_object *query = afb_req_json(request);
+	afb_req_success_f(request, jresp, "Ping Binder Daemon tag=%s count=%d query=%s", tag, ++pingcount, json_object_to_json_string(query));
+}
+
+static void pingSample (struct afb_req request)
+{
+	ping(request, json_object_new_string ("Some String"), "pingSample");
+}
+
+static void pingFail (struct afb_req request)
+{
+	afb_req_fail(request, "failed", "Ping Binder Daemon fails");
+}
+
+static void pingNull (struct afb_req request)
+{
+	ping(request, NULL, "pingNull");
+}
+
+static void pingBug (struct afb_req request)
+{
+	ping((struct afb_req){NULL,NULL,NULL}, NULL, "pingBug");
+}
+
+static void pingEvent(struct afb_req request)
+{
+	json_object *query = afb_req_json(request);
+	afb_daemon_broadcast_event(interface->daemon, "event", json_object_get(query));
+	ping(request, json_object_get(query), "event");
+}
+
+
+// For samples https://linuxprograms.wordpress.com/2010/05/20/json-c-libjson-tutorial/
+static void pingJson (struct afb_req request) {
+    json_object *jresp, *embed;
+
+    jresp = json_object_new_object();
+    json_object_object_add(jresp, "myString", json_object_new_string ("Some String"));
+    json_object_object_add(jresp, "myInt", json_object_new_int (1234));
+
+    embed  = json_object_new_object();
+    json_object_object_add(embed, "subObjString", json_object_new_string ("Some String"));
+    json_object_object_add(embed, "subObjInt", json_object_new_int (5678));
+
+    json_object_object_add(jresp,"eobj", embed);
+
+    ping(request, jresp, "pingJson");
+}
+
+static void subcallcb (void *prequest, int iserror, json_object *object)
+{
+	struct afb_req request = afb_req_unstore(prequest);
+	if (iserror)
+		afb_req_fail(request, "failed", json_object_to_json_string(object));
+	else
+		afb_req_success(request, object, NULL);
+	afb_req_unref(request);
+}
+
+static void subcall (struct afb_req request)
+{
+	const char *api = afb_req_value(request, "api");
+	const char *verb = afb_req_value(request, "verb");
+	const char *args = afb_req_value(request, "args");
+	json_object *object = api && verb && args ? json_tokener_parse(args) : NULL;
+
+	if (object == NULL)
+		afb_req_fail(request, "failed", "bad arguments");
+	else
+		afb_req_subcall(request, api, verb, object, subcallcb, afb_req_store(request));
+}
+
+static void eventadd (struct afb_req request)
+{
+	const char *tag = afb_req_value(request, "tag");
+	const char *name = afb_req_value(request, "name");
+
+	if (tag == NULL || name == NULL)
+		afb_req_fail(request, "failed", "bad arguments");
+	else if (0 != event_add(tag, name))
+		afb_req_fail(request, "failed", "creation error");
+	else
+		afb_req_success(request, NULL, NULL);
+}
+
+static void eventdel (struct afb_req request)
+{
+	const char *tag = afb_req_value(request, "tag");
+
+	if (tag == NULL)
+		afb_req_fail(request, "failed", "bad arguments");
+	else if (0 != event_del(tag))
+		afb_req_fail(request, "failed", "deletion error");
+	else
+		afb_req_success(request, NULL, NULL);
+}
+
+static void eventsub (struct afb_req request)
+{
+	const char *tag = afb_req_value(request, "tag");
+
+	if (tag == NULL)
+		afb_req_fail(request, "failed", "bad arguments");
+	else if (0 != event_subscribe(request, tag))
+		afb_req_fail(request, "failed", "subscription error");
+	else
+		afb_req_success(request, NULL, NULL);
+}
+
+static void eventunsub (struct afb_req request)
+{
+	const char *tag = afb_req_value(request, "tag");
+
+	if (tag == NULL)
+		afb_req_fail(request, "failed", "bad arguments");
+	else if (0 != event_unsubscribe(request, tag))
+		afb_req_fail(request, "failed", "unsubscription error");
+	else
+		afb_req_success(request, NULL, NULL);
+}
+
+static void eventpush (struct afb_req request)
+{
+	const char *tag = afb_req_value(request, "tag");
+	const char *data = afb_req_value(request, "data");
+	json_object *object = data ? json_tokener_parse(data) : NULL;
+
+	if (tag == NULL)
+		afb_req_fail(request, "failed", "bad arguments");
+	else if (0 > event_push(object, tag))
+		afb_req_fail(request, "failed", "push error");
+	else
+		afb_req_success(request, NULL, NULL);
+}
+
+// NOTE: this sample does not use session to keep test a basic as possible
+//       in real application most APIs should be protected with AFB_SESSION_CHECK
+static const struct afb_verb_desc_v1 verbs[]= {
+  {"ping"     , AFB_SESSION_NONE, pingSample  , "Ping the binder"},
+  {"pingfail" , AFB_SESSION_NONE, pingFail    , "Ping that fails"},
+  {"pingnull" , AFB_SESSION_NONE, pingNull    , "Ping which returns NULL"},
+  {"pingbug"  , AFB_SESSION_NONE, pingBug     , "Do a Memory Violation"},
+  {"pingJson" , AFB_SESSION_NONE, pingJson    , "Return a JSON object"},
+  {"pingevent", AFB_SESSION_NONE, pingEvent   , "Send an event"},
+  {"subcall",   AFB_SESSION_NONE, subcall     , "Call api/verb(args)"},
+  {"eventadd",  AFB_SESSION_NONE, eventadd    , "adds the event of 'name' for the 'tag'"},
+  {"eventdel",  AFB_SESSION_NONE, eventdel    , "deletes the event of 'tag'"},
+  {"eventsub",  AFB_SESSION_NONE, eventsub    , "subscribes to the event of 'tag'"},
+  {"eventunsub",AFB_SESSION_NONE, eventunsub  , "unsubscribes to the event of 'tag'"},
+  {"eventpush", AFB_SESSION_NONE, eventpush   , "pushes the event of 'tag' with the 'data'"},
+  {NULL}
+};
+
+static const struct afb_binding plugin_desc = {
+	.type = AFB_BINDING_VERSION_1,
+	.v1 = {
+		.info = "xxxxxx service",
+		.prefix = "xxxxxx",
+		.verbs = verbs
+	}
+};
+
+const struct afb_binding *afbBindingV1Register (const struct afb_binding_interface *itf)
+{
+	interface = itf;
+	return &plugin_desc;
+}
diff --git a/templates/service/etc/config.cmake b/templates/service/etc/config.cmake
new file mode 100644
index 0000000..860651f
--- /dev/null
+++ b/templates/service/etc/config.cmake
@@ -0,0 +1,85 @@
+###########################################################################
+# Copyright 2015, 2016, 2017 IoT.bzh
+#
+# author: Fulup Ar Foll <fulup@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.
+###########################################################################
+
+# Project Info
+# ------------------
+set(NAME service-example)
+set(VERSION "0.0")
+set(PROJECT_PRETTY_NAME "Service binding Example")
+set(PROJECT_DESCRIPTION "service binding AGL application example")
+set(PROJECT_URL "https://gerrit.automotivelinux.org/gerrit/apps/app-templates")
+set(PROJECT_ICON "icon.png")
+
+# Compilation Mode (DEBUG, RELEASE)
+# ----------------------------------
+set(CMAKE_BUILD_TYPE "DEBUG")
+
+# Compiler selection if needed. Overload the detected compiler.
+# -----------------------------------------------
+#set(CMAKE_C_COMPILER "gcc")
+#set(CMAKE_CXX_COMPILER "g++")
+
+# PKG_CONFIG required packages
+# -----------------------------
+set (PKG_REQUIRED_LIST 
+	json-c
+	afb-daemon
+)
+
+# Static constante definition
+# -----------------------------
+add_compile_options()
+
+# LANG Specific compile flags set for all build types
+set(CMAKE_C_FLAGS "")
+set(CMAKE_CXX_FLAGS "")
+
+# Print a helper message when every thing is finished
+# ----------------------------------------------------
+#set(CLOSING_MESSAGE "")
+
+
+# (BUG!!!) as PKG_CONFIG_PATH does not work [should be an env variable]
+# ---------------------------------------------------------------------
+set(CMAKE_INSTALL_PREFIX ${HOME}/opt)
+set(CMAKE_PREFIX_PATH ${CMAKE_INSTALL_PREFIX}/lib64/pkgconfig ${CMAKE_INSTALL_PREFIX}/lib/pkgconfig)
+set(LD_LIBRARY_PATH ${CMAKE_INSTALL_PREFIX}/lib64 ${CMAKE_INSTALL_PREFIX}/lib)
+
+# Optional dependencies order
+# ---------------------------
+#set(EXTRA_DEPENDENCIES_ORDER)
+
+# Optional Extra global include path
+# -----------------------------------
+#set(EXTRA_INCLUDE_DIRS)
+
+# Optional extra libraries
+# -------------------------
+#set(EXTRA_LINK_LIBRARIES)
+
+# Optional force binding installation
+# ------------------------------------
+set(BINDINGS_INSTALL_PREFIX /opt )
+
+# Optional force widget prefix generation
+# ---------------------------------------
+# set(WIDGET_PREFIX DestinationPath)
+
+# Optional force binding Linking flag
+# ------------------------------------
+# set(BINDINGS_LINK_FLAG LinkOptions )
diff --git a/templates/service/etc/export.map b/templates/service/etc/export.map
new file mode 100644
index 0000000..ee2f413
--- /dev/null
+++ b/templates/service/etc/export.map
@@ -0,0 +1 @@
+{ global: afbBindingV*; local: *; };
diff --git a/templates/service/etc/macros.cmake b/templates/service/etc/macros.cmake
new file mode 100644
index 0000000..6a389de
--- /dev/null
+++ b/templates/service/etc/macros.cmake
@@ -0,0 +1,252 @@
+###########################################################################
+# Copyright 2015, 2016, 2017 IoT.bzh
+#
+# author: Fulup Ar Foll <fulup@iot.bzh>
+# contrib: Romain Forlot <romain.forlot@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.
+###########################################################################
+
+
+#--------------------------------------------------------------------------
+#  WARNING: 
+#     Do not change this cmake template
+#     Customise your preferences in "./etc/config.cmake"
+#--------------------------------------------------------------------------
+
+
+# Generic useful macro
+# -----------------------
+macro(PROJECT_TARGET_ADD TARGET_NAME)
+	set(PROJECT_TARGETS ${PROJECT_TARGETS} ${TARGET_NAME} CACHE INTERNAL PROJECT_TARGETS)
+	set(TARGET_NAME ${TARGET_NAME})
+endmacro(PROJECT_TARGET_ADD)
+
+macro(defstr name value)
+	add_definitions(-D${name}=${value})
+endmacro(defstr)
+
+# Dumb macro to add each directory under a path. Make sure we grab all header files!
+macro(fill_include_dir path)
+	file(GLOB_RECURSE dirlist LIST_DIRECTORIES true "${path}/*")
+	foreach(filename ${dirlist})
+		if(IS_DIRECTORY ${filename})
+			include_directories(${filename})
+		endif(IS_DIRECTORY ${filename})
+	endforeach()
+endmacro(fill_include_dir)
+
+# Helper function to retrieve source files from a library repo.
+function(find_source_files path)
+	file(GLOB_RECURSE cfiles "${path}/*.[c]")
+	file(GLOB_RECURSE cppfiles "${path}/*.cpp")
+	foreach(filename ${cfiles})
+		if(NOT ${filename} MATCHES ".*([Tt]est|[Ee]xample|[Ss]ample).*")
+			string(APPEND sources "${filename};")
+		endif(NOT ${filename} MATCHES ".*([Tt]est|[Ee]xample|[Ss]ample).*")
+	endforeach()
+	foreach(filename ${cppfiles})
+		if(NOT ${filename} MATCHES ".*([Tt]est|[Ee]xample|[Ss]ample).*")
+			string(APPEND sources "${filename};")
+		endif(NOT ${filename} MATCHES ".*([Tt]est|[Ee]xample|[Ss]ample).*")
+	endforeach()
+	set(sources_files ${sources} PARENT_SCOPE)
+endfunction(find_source_files)
+
+# WGT packaging
+macro(populate_widget)
+	# Declaration of a custom command that will populate widget tree with the target
+	set(POPULE_WIDGET_TARGET "populate_${TARGET_NAME}")
+
+	get_target_property(T ${TARGET_NAME} LABELS)
+	get_target_property(OUT ${TARGET_NAME} OUTPUT_NAME)
+
+	if(${T} STREQUAL "BINDING")
+		add_custom_command(OUTPUT ${WIDGET_LIBDIR}/${TARGET_NAME}.so
+			DEPENDS ${TARGET_NAME}
+			COMMAND mkdir -p ${WIDGET_LIBDIR}
+			COMMAND cp ${OUT}.so ${WIDGET_LIBDIR}
+		)
+		add_custom_target(${POPULE_WIDGET_TARGET} ALL DEPENDS ${WIDGET_LIBDIR}/${TARGET_NAME}.so)
+	elseif(${T} STREQUAL "EXECUTABLE")
+		add_custom_command(OUTPUT ${WIDGET_BINDIR}/${TARGET_NAME}
+			DEPENDS ${TARGET_NAME}
+			COMMAND mkdir -p ${WIDGET_BINDIR}
+			COMMAND cp ${OUT} ${WIDGET_BINDIR}
+		)
+		add_custom_target(${POPULE_WIDGET_TARGET} ALL DEPENDS ${WIDGET_BINDIR}/${TARGET_NAME})
+	elseif(${T} STREQUAL "HTDOCS")
+		add_custom_command(OUTPUT ${WIDGET_HTTPDIR}
+			DEPENDS ${TARGET_NAME}
+			COMMAND cp -r ${OUT} ${WIDGET_HTTPDIR}
+			)
+			add_custom_target(${POPULE_WIDGET_TARGET} ALL DEPENDS ${WIDGET_HTTPDIR})
+	elseif(${T} STREQUAL "DATA")
+		add_custom_command(OUTPUT ${WIDGET_DATADIR}
+			DEPENDS ${TARGET_NAME}
+			COMMAND cp -r ${OUT} ${WIDGET_DATADIR}
+			)
+			add_custom_target(${POPULE_WIDGET_TARGET} ALL DEPENDS ${WIDGET_HTTPDIR})
+	endif(${T} STREQUAL "BINDING")
+	PROJECT_TARGET_ADD(${POPULE_WIDGET_TARGET})
+endmacro(populate_widget)
+
+macro(build_widget)
+	if("${PROJECT_TARGETS}" MATCHES "populate_")
+		if(NOT EXISTS ${WIDGET_DIR}/config.xml.in OR NOT EXISTS ${WIDGET_DIR}/${PROJECT_ICON}.in)
+			configure_file(${PROJECT_WGT_DIR}/config.xml.in ${WIDGET_DIR}/config.xml)
+			file(COPY ${PROJECT_WGT_DIR}/${PROJECT_ICON}.in DESTINATION ${WIDGET_DIR}/${PROJECT_ICON})
+		endif(NOT EXISTS ${WIDGET_DIR}/config.xml.in OR NOT EXISTS ${WIDGET_DIR}/${PROJECT_ICON}.in)
+
+		file(GLOB PROJECT_CONF_FILES "${PROJECT_WGT_DIR}/etc/*")
+		if(${PROJECT_CONF_FILES})
+			file(COPY "${PROJECT_WGT_DIR}/etc/*" DESTINATION ${WIDGET_ETCDIR}/)
+		endif(${PROJECT_CONF_FILES})
+
+		add_custom_command(OUTPUT ${PROJECT_NAME}.wgt
+		DEPENDS ${PROJECT_TARGETS}
+		COMMAND wgtpkg-pack -f -o ${PROJECT_NAME}.wgt ${WIDGET_DIR}
+		)
+		add_custom_target(widget DEPENDS ${PROJECT_NAME}.wgt)
+		set(ADDITIONAL_MAKE_CLEAN_FILES, "${PROJECT_NAME}.wgt")
+	else()
+		MESSAGE(FATAL_ERROR "Widget tree empty, please populate it by calling  populate_widget() macro with target you want to include into it.")
+	endif("${PROJECT_TARGETS}" MATCHES "populate_")
+endmacro(build_widget)
+
+macro(search_targets)
+	file(GLOB filelist "*")
+	foreach(filename ${filelist})
+	if(EXISTS "${filename}/CMakeLists.txt")
+		add_subdirectory(${filename})
+	endif(EXISTS "${filename}/CMakeLists.txt")
+	endforeach()
+endmacro()
+
+set(CMAKE_BUILD_TYPE Debug CACHE STRING "the type of build")
+set(CMAKE_POSITION_INDEPENDENT_CODE ON)
+set(CMP0048 1)
+
+# Include project configuration
+# ------------------------------
+project(${NAME} VERSION ${VERSION})
+set(PROJECT_WGT_DIR "packaging/wgt" CACHE PATH "Subpath to the widget directory")
+set(PROJECT_LIBDIR "libs" CACHE PATH "Subpath to libraries")
+set(PROJECT_RESOURCES "data" CACHE PATH "Subpath to data")
+
+INCLUDE(FindPkgConfig)
+INCLUDE(CheckIncludeFiles)
+INCLUDE(CheckLibraryExists)
+INCLUDE(GNUInstallDirs)
+
+# Default compilation options
+############################################################################
+link_libraries(-Wl,--as-needed -Wl,--gc-sections)
+add_compile_options(-Wall -Wextra -Wconversion)
+add_compile_options(-Wno-unused-parameter) # frankly not using a parameter does it care?
+add_compile_options(-Wno-sign-compare -Wno-sign-conversion)
+add_compile_options(-Werror=maybe-uninitialized)
+add_compile_options(-Werror=implicit-function-declaration)
+add_compile_options(-ffunction-sections -fdata-sections)
+add_compile_options(-fPIC)
+add_compile_options(-g)
+
+set(CMAKE_C_FLAGS_PROFILING   "-g -O2 -pg -Wp,-U_FORTIFY_SOURCE" CACHE STRING "Flags for profiling")
+set(CMAKE_C_FLAGS_DEBUG       "-g -O2 -ggdb -Wp,-U_FORTIFY_SOURCE" CACHE STRING "Flags for debugging")
+set(CMAKE_C_FLAGS_RELEASE     "-O2" CACHE STRING "Flags for releasing")
+set(CMAKE_C_FLAGS_CCOV        "-g -O2 --coverage" CACHE STRING "Flags for coverage test")
+
+set(CMAKE_CXX_FLAGS_PROFILING    "-g -O0 -pg -Wp,-U_FORTIFY_SOURCE")
+set(CMAKE_CXX_FLAGS_DEBUG        "-g -O0 -ggdb -Wp,-U_FORTIFY_SOURCE")
+set(CMAKE_CXX_FLAGS_RELEASE      "-g -O2")
+set(CMAKE_CXX_FLAGS_CCOV "-g -O2 --coverage")
+
+set(CMAKE_INSTALL_PREFIX      "${CMAKE_SOURCE_DIR}/Install" CACHE PATH "The path where to install")
+
+# (BUG!!!) as PKG_CONFIG_PATH does not work [should be en env variable]
+set(PKG_CONFIG_USE_CMAKE_PREFIX_PATH ON CACHE BOOLEAN "Flag for using prefix path")
+
+# Loop on required package and add options
+foreach (PKG_CONFIG ${PKG_REQUIRED_LIST})
+	PKG_CHECK_MODULES(${PKG_CONFIG} REQUIRED ${PKG_CONFIG})
+
+	INCLUDE_DIRECTORIES(${${PKG_CONFIG}_INCLUDE_DIRS})
+	list (APPEND link_libraries ${${PKG_CONFIG}_LIBRARIES})
+	add_compile_options (${${PKG_CONFIG}_CFLAGS})
+endforeach(PKG_CONFIG)
+
+# Optional LibEfence Malloc debug library
+IF(CMAKE_BUILD_TYPE MATCHES DEBUG)
+CHECK_LIBRARY_EXISTS(efence malloc "" HAVE_LIBEFENCE)
+IF(HAVE_LIBEFENCE)
+	MESSAGE(STATUS "Linking with ElectricFence for debugging purposes...")
+	SET(libefence_LIBRARIES "-lefence")
+	list (APPEND link_libraries ${libefence_LIBRARIES})
+ENDIF(HAVE_LIBEFENCE)
+ENDIF(CMAKE_BUILD_TYPE MATCHES DEBUG)
+
+# set default include directories
+INCLUDE_DIRECTORIES(${EXTRA_INCLUDE_DIRS})
+
+# If no install dir try to guess some smart default
+if(BINDINGS_INSTALL_PREFIX)
+	set(BINDINGS_INSTALL_DIR ${BINDINGS_INSTALL_PREFIX}/${PROJECT_NAME})
+else()
+	set(BINDINGS_INSTALL_DIR ${CMAKE_CURRENT_BINARY_DIR}/${PROJECT_NAME})
+endif()
+
+# Define a default package directory
+if(WIDGET_PREFIX)
+	set(WIDGET_DIR ${WIDGET_PREFIX}/package)
+else()
+	set(WIDGET_DIR ${CMAKE_CURRENT_BINARY_DIR}/package)
+endif()
+
+# and their subsequent subdir
+set(WIDGET_BINDIR ${WIDGET_DIR}/bin)
+set(WIDGET_ETCDIR ${WIDGET_DIR}/etc)
+set(WIDGET_LIBDIR ${WIDGET_DIR}/lib)
+set(WIDGET_HTTPDIR ${WIDGET_DIR}/htdocs)
+set(WIDGET_DATADIR ${WIDGET_DIR}/data)
+
+# Default Linkflag
+if(NOT BINDINGS_LINK_FLAG)
+	set(BINDINGS_LINK_FLAG "-Wl,--version-script=${CMAKE_SOURCE_DIR}/etc/export.map")
+endif()
+
+# Add a dummy target to enable global dependency order
+# -----------------------------------------------------
+if(EXTRA_DEPENDENCIES_ORDER)
+	set(DEPENDENCIES_TARGET ${PROJECT_NAME}_extra_dependencies)
+	add_custom_target(${DEPENDENCIES_TARGET} ALL
+		DEPENDS ${EXTRA_DEPENDENCY_ORDER} 
+	)
+endif()
+
+# Cmake does not maintain targets list before 3.7
+# -------------------------------------------------
+if(${CMAKE_VERSION} VERSION_LESS 3.7)
+	set(GLOBAL_TARGET_LIST ${PROJECT_TARGETS})
+else()
+	get_property(GLOBAL_TARGET_LIST GLOBAL PROPERTY GlobalTargetList)
+endif()
+
+# Print developer helper message when everything is done
+# -------------------------------------------------------
+if(CLOSING_MESSAGE AND GLOBAL_TARGET_LIST)
+	add_custom_target(${PROJECT_NAME}_done ALL
+		DEPENDS ${DEPENDENCIES_TARGET} ${GLOBAL_TARGET_LIST}
+		COMMAND ${CMAKE_COMMAND} -E cmake_echo_color --cyan "++ ${CLOSING_MESSAGE}"
+	)
+endif()
+
diff --git a/templates/service/packaging/wgt/config.xml.in b/templates/service/packaging/wgt/config.xml.in
new file mode 100644
index 0000000..99c0168
--- /dev/null
+++ b/templates/service/packaging/wgt/config.xml.in
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<widget xmlns="http://www.w3.org/ns/widgets" id="@PROJECT_NAME@" version="@PROJECT_VERSION@">
+  <name>@PROJECT_NAME@</name>
+  <icon src="icon.png"/>
+  <content src="htdocs/index.html" type="application/vnd.agl.html.hybrid"/>
+  <description>@PROJECT_DESCRIPTION@</description>
+  <author>Romain Forlot &lt;romain.forlot@iot.bzh&gt;</author>
+  <license>APL 2.0</license>
+</widget>
+
+
diff --git a/templates/service/packaging/wgt/icon.png.in b/templates/service/packaging/wgt/icon.png.in
new file mode 100644
index 0000000..3aeb6f0
--- /dev/null
+++ b/templates/service/packaging/wgt/icon.png.in
author	Romain Forlot <romain.forlot@iot.bzh>	2017-05-04 13:59:00 +0200
committer	Romain Forlot <romain.forlot@iot.bzh>	2017-05-04 13:59:00 +0200
commit	5a87b82700a736e7c443023399da3d2a31098895 (patch)
tree	66c306b27d3c61b362536d334ec283b912f5dd67 /templates
parent	437f25048ab184e532059f3d31fcf47011abe9fe (diff)