@webos-tools/cli 3.1.3 → 3.2.1

package/files/templates/signage-sdk-templates/Special_Menu_Board/css/styles.css

@@ -0,0 +1,281 @@
+@font-face {
+    font-family: museo-sans-300;
+    src: url('../fonts/Museo Sans 300.otf');
+}
+@font-face {
+    font-family: museo-sans-300-italic;
+    src: url('../fonts/Museo Sans 300 Italic.otf');
+}
+@font-face {
+    font-family: museo-sans-500;
+    src: url('../fonts/Museo Sans 500.otf');
+}
+@font-face {
+    font-family: museo-sans-700;
+    src: url('../fonts/Museo Sans 700.otf');
+}
+* {
+    margin: 0px;
+    padding: 0px;
+    position: absolute;
+}
+html, body {
+    height: 1080px;
+    width: 1920px;
+}
+/* First Screen*/
+.screenBackrgound {
+    background: url('../res/images/tpl_03_img_bg.png') 100% no-repeat;
+    height: 1080px;
+    width: 1920px;
+    z-index: 2;
+}
+/* Fade Animataion on Screen */
+.fadeEffect{
+    -webkit-animation-timing-function: linear;
+    -webkit-animation-name : fading;
+	-webkit-animation-duration: 0.8s;
+	-webkit-animation-delay: 4s;
+}
+@-webkit-keyframes fading {
+    0%   {opacity: 1}
+    50%  {opacity: 0.5}
+    100% {opacity: 0}
+}
+.brandTag {
+    left: 70px;
+    top: 70px;
+    color: #baa28a;
+    font: 46px museo-sans-500;
+}
+.brand {
+    left: 70px;
+    top: 134px;
+    height: 110px;
+    width: 870px;
+}
+.borderTitle {
+    background-color: #087245;
+    left: 885px;
+    top: 581px;
+    height: 90px;
+    width: 20px;
+}
+.titleBackground {
+    background-color: #272018;
+    left: 905px;
+    top: 581px;
+    height: 90px;
+    width: 1015px;
+}
+.title {
+    left: 931px;
+    top: 605px;
+    text-align: left;
+    color: #ffffff;
+    font: 40px museo-sans-500;
+}
+.line {
+    color: #2b1e13;
+    left: 931px;
+    font: 36px museo-sans-500;
+}
+.line1 {
+    top: 695px;
+}
+.line2 {
+    top: 741px;
+}
+.line3 {
+    top: 787px;
+}
+/* Screen Two */
+.screenSecond{
+    z-index: 1;
+    height:1080px;
+    width:1920px;
+}
+.mainView {
+    width: 1286px;
+    height: 1080px;
+    background-color: #0b0909;
+}
+.logo {
+    left: 60px;
+    top: 49px;
+    width: 259px;
+    height: 48px;
+}
+.bannerTitle {
+    color: #ffffff;
+    float: left;
+    position: relative;
+    left: 60px;
+    top: 152px;
+    font: 70px museo-sans-700;
+}
+.bannerCalorie {
+    color: #f9b81a;
+    float: left;
+    margin-left: 30px;
+    position: relative;
+    left: 60px;
+    top: 174px;
+    font: 40px museo-sans-700;
+}
+.bannerDescription{
+    left: 60px;
+    color: #969696;
+    font: 28px museo-sans-300;
+    width: 1166px;
+}
+.bannerDescription1{
+    top: 273px;
+}.bannerDescription2{
+    top: 313px;
+}
+.banner {
+    left: 60px;
+    top: 364px;
+    height: 656px;
+    width: 1166px;
+}
+/* Second Screen Right Slider*/
+.listSlider {
+    width: 634px;
+    height: 1080px;
+    background-color: #201816;
+    left: 1286px;
+}
+.list {
+    position: relative;
+    margin-top: 152px;
+}
+.listItem {
+    height: 185px;
+    margin-left: 60px;
+    position: relative;
+}
+.listItemImage {
+    height: 128px;
+    width: 228px;
+}
+.listItemDescription {
+    float: left;
+    margin-left: 260px;
+    width: 100%;
+}
+.listItemTitle {
+    font: 36px museo-sans-500;
+    color: #ffffff;
+    margin-top: 66px;
+}
+.listItemCalorie {
+    font: 26px museo-sans-500;
+    color: #f9b81a;
+    top: 109px;
+}
+/* Animation Durations */
+
+.animated {
+    -webkit-animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+}
+.animated15s {
+    -webkit-animation-duration: 1.5s;
+    -webkit-animation-fill-mode: both;
+}
+.animated2s {
+    -webkit-animation-duration: 2s;
+    -webkit-animation-fill-mode: both;
+}
+.animated25s {
+    -webkit-animation-duration: 2.5s;
+    -webkit-animation-fill-mode: both;
+}
+.animated3s {
+    -webkit-animation-delay: 0.5s;
+    -webkit-animation-duration: 1.3s;
+    -webkit-animation-fill-mode: both;
+}
+.animated4s {
+    -webkit-animation-duration: 4s;
+    -webkit-animation-fill-mode: both;
+}
+/* For Second Screen */
+.animated475s{
+    -webkit-animation-delay: 4.75s;
+    -webkit-animation-duration: 0.8s;
+    -webkit-animation-fill-mode: both;
+}
+.animated5s{
+    -webkit-animation-delay: 5s;
+    -webkit-animation-duration: 0.8s;
+    -webkit-animation-fill-mode: both;
+}
+.animated525s{
+    -webkit-animation-delay: 5.25s;
+    -webkit-animation-duration: 0.8s;
+    -webkit-animation-fill-mode: both;
+}
+.animated55s{
+    -webkit-animation-delay: 5.5s;
+    -webkit-animation-duration: 0.8s;
+    -webkit-animation-fill-mode: both;
+}
+.animated575s{
+    -webkit-animation-delay: 5.75s;
+    -webkit-animation-duration: 0.8s;
+    -webkit-animation-fill-mode: both;
+}
+.animated6s{
+    -webkit-animation-delay: 6s;
+    -webkit-animation-duration: 0.8s;
+    -webkit-animation-fill-mode: both;
+}
+/* 1 - bounceInRight*/
+
+@-webkit-keyframes fadeIn {
+    0%, 50% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+.fadeIn {
+    -webkit-animation-name: fadeIn;
+}
+/* 2 - bounceInRight*/
+
+@-webkit-keyframes bounceInRight {
+    0%, 60%, 75%, 90%, 100% {
+        -webkit-transition-timing-function: ease-out;
+    }
+    0% {
+        -webkit-transform: translate3d(1050px, 0, 0);
+    }
+    100% {
+        -webkit-transform: none;
+    }
+}
+.bounceInRight {
+    -webkit-animation-name: bounceInRight;
+}
+/* 3 - bounceInUp*/
+
+@-webkit-keyframes bounceInUp {
+    0%, 60%, 75%, 90%, 100% {
+        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    }
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 1080px, 0);/* */
+    }
+    100% {
+        -webkit-transform: translate3d(0, 0, 0);
+    }
+}
+.bounceInUp {
+    -webkit-animation-name: bounceInUp;
+}

package/files/templates/signage-sdk-templates/Special_Menu_Board/data/data.json

@@ -0,0 +1,33 @@
+{
+    "tagline": "TITLE",
+    "brand": "res/images/tpl_03_logo_01.png",
+    "exiciteline": "SUB-TITLE",
+    "featureline": "CONTENT",
+
+    "logo": "res/images/tpl_03_logo_02.png",
+    "FeaturedProduct": "Product1",
+    "FeaturedProductDesc1": "Product1 Description1",
+    "FeaturedProductDesc2": "Product1 Description2",
+    "FeaturedProductImage": "res/images/tpl_03_img_coffe_01_l.png",
+    "FeaturedProductCalorie": "Calorie1",
+
+    "ListProduct1Image": "res/images/tpl_03_img_coffe_01.png",
+    "ListProduct1": "Product2",
+    "ListProduct1Calorie": "Calorie2",
+
+    "ListProduct2Image": "res/images/tpl_03_img_coffe_02.png",
+    "ListProduct2": "Product3",
+    "ListProduct2Calorie": "Calorie3",
+
+    "ListProduct3Image": "res/images/tpl_03_img_coffe_03.png",
+    "ListProduct3": "Product4",
+    "ListProduct3Calorie": "Calorie4",
+
+    "ListProduct4Image": "res/images/tpl_03_img_coffe_04.png",
+    "ListProduct4": "Product5",
+    "ListProduct4Calorie": "Calorie5",
+
+    "ListProduct5": "Product6",
+    "ListProduct5Image": "res/images/tpl_03_img_coffe_05.png",
+    "ListProduct5Calorie": "Calorie6"
+}

package/files/templates/signage-sdk-templates/Special_Menu_Board/index.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Special Menu Board</title>
+    <link href="css/styles.css" rel="stylesheet" type="text/css" />
+    <!-- DataBinder -->
+    <script src="js/helpers/util.js"></script>
+</head>
+
+<body>
+    <!-- Screen One-->
+    <div class="screenBackrgound" id="screenBackrgound">
+        <div class="brandTag animated15s fadeIn" data-bind-appThree="tagLine"></div>
+        <div class="brand animated2s fadeIn">
+            <img data-bind-appThree="brand"></img>
+        </div>
+
+        <div class="borderTitle animated3s bounceInRight"></div>
+        <div class="titleBackground animated3s bounceInRight"></div>
+        <div class="title animated3s bounceInRight" data-bind-appThree="exiciteLine"></div>
+        <div class="line line1 animated4s fadeIn" data-bind-appThree="featureLine"></div>
+
+    </div>
+
+    <!-- Screen Two-->
+    <div class="screenSecond" id="screenSecond">
+        <div class="mainView">
+            <div class="logo animated475s fadeIn">
+                 <img data-bind-appThree="logo"></img>
+            </div>
+            <!-- Banner Content -->
+                <div class="bannerTitle animated525s fadeIn" data-bind-appThree="FeaturedProduct"></div>
+                <div class="bannerCalorie animated525s fadeIn" data-bind-appThree="FeaturedProductCalorie"></div>
+
+            <div class="bannerDescription animated575s fadeIn">
+                <span data-bind-appThree="FeaturedProductDesc1" class="bannerDescription1"></span>
+                <span data-bind-appThree="FeaturedProductDesc2" class="bannerDescription2"></span> 
+            </div>
+            <!-- Banner -->
+            <div class="banner animated6s fadeIn">
+                <img data-bind-appThree="FeaturedProductImage">
+            </div>
+
+        </div>
+        <!-- List -->
+        <div class="listSlider">
+            <div class="list">
+                <!-- 1 -->
+                <div class="listItem animated475s bounceInUp">
+                    <div class="listItemImage">
+                        <img data-bind-appThree="ListProduct1Image">
+                    </div>
+                    <div class="listItemDescription">
+                        <div class="listItemTitle" data-bind-appThree="ListProduct1"></div>
+                        <div class="listItemCalorie" data-bind-appThree="ListProduct1Calorie"></div>
+                    </div>
+                </div>
+                <!-- 2 -->
+                <div class="listItem animated5s bounceInUp">
+                    <div class="listItemImage">
+                        <img height="128" width="228" data-bind-appThree="ListProduct2Image">
+                    </div>
+                    <div class="listItemDescription">
+                        <div class="listItemTitle" data-bind-appThree="ListProduct2"></div>
+                        <div class="listItemCalorie" data-bind-appThree="ListProduct2Calorie"></div>
+                    </div>
+                </div>
+                <!-- 3 -->
+                <div class="listItem animated525s bounceInUp">
+                    <div class="listItemImage">
+                        <img height="128" width="228" data-bind-appThree="ListProduct3Image">
+                    </div>
+                    <div class="listItemImage img3"></div>
+                    <div class="listItemDescription">
+                        <div class="listItemTitle" data-bind-appThree="ListProduct3"></div>
+                        <div class="listItemCalorie" data-bind-appThree="ListProduct3Calorie"></div>
+                    </div>
+                </div>
+                <!-- 4 -->
+                <div class="listItem animated55s bounceInUp">
+                    <div class="listItemImage">
+                        <img height="128" width="228" data-bind-appThree="ListProduct4Image">
+                    </div>
+                    <div class="listItemImage img4"></div>
+                    <div class="listItemDescription">
+                        <div class="listItemTitle" data-bind-appThree="ListProduct4"></div>
+                        <div class="listItemCalorie" data-bind-appThree="ListProduct4Calorie"></div>
+                    </div>
+                </div>
+                <!-- 5 -->
+                <div class="listItem animated575s bounceInUp">
+                    <div class="listItemImage">
+                        <img height="128" width="228" data-bind-appThree="ListProduct5Image">
+                    </div>
+                    <div class="listItemImage img5"></div>
+                    <div class="listItemDescription">
+                        <div class="listItemTitle" data-bind-appThree="ListProduct5"></div>
+                        <div class="listItemCalorie" data-bind-appThree="ListProduct5Calorie"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+
+    </script>
+</body>
+<script src="js/controller.js"></script>
+</html>

package/files/templates/signage-sdk-templates/Special_Menu_Board/js/controller.js

@@ -0,0 +1,171 @@
+/*global BindClass: false */
+/*jslint browser:true, indent: 4 */
+
+/**
+ * @file Manages the configuration of the HTML application. 
+ * Loading the JSON data in application to binding the data into the page.
+ * @author LG CSP-1
+ */
+var dataSet,
+/**
+ * Timer to reload the Application in seconds
+ *  @default
+ */
+    appReload = 8,
+    frontDiv = document.getElementById('screenBackrgound');
+
+/**
+ * Binds data to HTML Page.
+ * @method bindData
+ * @param {Object} jsonData - Object contains data to put into HTML
+ * @example
+ * For Example : 
+ * 'jsonData.tagLine' will hold the text/content needs to be set into the html page.
+ * For div Tag attribute 'data-bind-appThree', we set value as 'tagLine'(See Below).
+ *               
+ *     //  div data-bind-appThree = "tagLine"
+ *       
+ * To set the value from Object to html tag, we need to put the code : 
+ *     //  info.set('tagLine', jsonData.tagLine)
+ *
+ * here, first argument is the name of html tag's attribute value and,
+ *             second is the value from javascript Object.
+*/
+function bindData(jsonData) {
+    'use strict';
+    /* Data Binding */
+    var info = new BindClass('appThree');
+    /* First Screen  */
+    info.set('tagLine', jsonData.tagline);
+    info.set('featureLine', jsonData.featureline);
+    info.set('exiciteLine', jsonData.exiciteline);
+    info.set('curlImage', jsonData.curlImage);
+    info.set('logo', jsonData.logo);
+    info.set('brand', jsonData.brand);
+    /* Second Screen */
+    /* Featured Product */
+    info.set('FeaturedProduct', jsonData.FeaturedProduct);
+    info.set('FeaturedProductCalorie', jsonData.FeaturedProductCalorie);
+    info.set('FeaturedProductType1', jsonData.FeaturedProductType1);
+    info.set('FeaturedProductType1Price', jsonData.FeaturedProductType1Price);
+    info.set('FeaturedProductType2', jsonData.FeaturedProductType2);
+    info.set('FeaturedProductType2Price', jsonData.FeaturedProductType2Price);
+    info.set('FeaturedProductType3', jsonData.FeaturedProductType3);
+    info.set('FeaturedProductType3Price', jsonData.FeaturedProductType3Price);
+    info.set('FeaturedProductType4', jsonData.FeaturedProductType4);
+    info.set('FeaturedProductType4Price', jsonData.FeaturedProductType4Price);
+    info.set('FeaturedProductDesc1', jsonData.FeaturedProductDesc1);
+    info.set('FeaturedProductDesc2', jsonData.FeaturedProductDesc2);
+    info.set('FeaturedProductImage', jsonData.FeaturedProductImage);
+    /* Featured List */
+    /* Item 1 */
+    info.set('ListProduct1', jsonData.ListProduct1);
+    info.set('ListProduct1Calorie', jsonData.ListProduct1Calorie);
+    info.set('ListProduct1Type1', jsonData.ListProduct1Type1);
+    info.set('ListProduct1Type1Price', jsonData.ListProduct1Type1Price);
+    info.set('ListProduct1Type2', jsonData.FeaturedProductType2);
+    info.set('ListProduct1Type2Price', jsonData.ListProduct1Type2Price);
+    info.set('ListProduct1Type3', jsonData.ListProduct1Type3);
+    info.set('ListProduct1Type3Price', jsonData.ListProduct1Type3Price);
+    info.set('ListProduct1Type4', jsonData.ListProduct1Type4);
+    info.set('ListProduct1Type4Price', jsonData.ListProduct1Type4Price);
+    info.set('ListProduct1Image', jsonData.ListProduct1Image);
+    /* Item 2 */
+    info.set('ListProduct2', jsonData.ListProduct2);
+    info.set('ListProduct2Calorie', jsonData.ListProduct2Calorie);
+    info.set('ListProduct2Type1', jsonData.ListProduct2Type1);
+    info.set('ListProduct2Type1Price', jsonData.ListProduct2Type1Price);
+    info.set('ListProduct2Type2', jsonData.ListProduct2Type2);
+    info.set('ListProduct2Type2Price', jsonData.ListProduct2Type2Price);
+    info.set('ListProduct2Type3', jsonData.ListProduct2Type3);
+    info.set('ListProduct2Type3Price', jsonData.ListProduct2Type3Price);
+    info.set('ListProduct2Type4', jsonData.ListProduct2Type4);
+    info.set('ListProduct2Type4Price', jsonData.ListProduct2Type4Price);
+    info.set('ListProduct2Image', jsonData.ListProduct2Image);
+    /* Item 3 */
+    info.set('ListProduct3', jsonData.ListProduct3);
+    info.set('ListProduct3Calorie', jsonData.ListProduct3Calorie);
+    info.set('ListProduct3Type1', jsonData.ListProduct3Type1);
+    info.set('ListProduct3Type1Price', jsonData.ListProduct3Type1Price);
+    info.set('ListProduct3Type2', jsonData.ListProduct3Type2);
+    info.set('ListProduct3Type2Price', jsonData.ListProduct3Type2Price);
+    info.set('ListProduct3Type3', jsonData.ListProduct3Type3);
+    info.set('ListProduct3Type3Price', jsonData.ListProduct3Type3Price);
+    info.set('ListProduct3Type4', jsonData.ListProduct3Type4);
+    info.set('ListProduct3Type4Price', jsonData.ListProduct3Type4Price);
+    info.set('ListProduct3Image', jsonData.ListProduct3Image);
+    /* Item 4 */
+    info.set('ListProduct4', jsonData.ListProduct4);
+    info.set('ListProduct4Calorie', jsonData.ListProduct4Calorie);
+    info.set('ListProduct4Type1', jsonData.ListProduct4Type1);
+    info.set('ListProduct4Type1Price', jsonData.ListProduct4Type1Price);
+    info.set('ListProduct4Type2', jsonData.ListProduct4Type2);
+    info.set('ListProduct4Type2Price', jsonData.ListProduct4Type2Price);
+    info.set('ListProduct4Type3', jsonData.ListProduct4Type3);
+    info.set('ListProduct4Type3Price', jsonData.ListProduct4Type3Price);
+    info.set('ListProduct4Type4', jsonData.ListProduct4Type4);
+    info.set('ListProduct4Type4Price', jsonData.ListProduct4Type4Price);
+    info.set('ListProduct4Image', jsonData.ListProduct4Image);
+    /* Item 5 */
+    info.set('ListProduct5', jsonData.ListProduct5);
+    info.set('ListProduct5Calorie', jsonData.ListProduct5Calorie);
+    info.set('ListProduct5Type1', jsonData.ListProduct5Type1);
+    info.set('ListProduct5Type1Price', jsonData.ListProduct5Type1Price);
+    info.set('ListProduct5Type2', jsonData.ListProduct5Type2);
+    info.set('ListProduct5Type2Price', jsonData.ListProduct5Type2Price);
+    info.set('ListProduct5Type3', jsonData.ListProduct5Type3);
+    info.set('ListProduct5Type3Price', jsonData.ListProduct5Type3Price);
+    info.set('ListProduct5Type4', jsonData.ListProduct5Type4);
+    info.set('ListProduct5Type4Price', jsonData.ListProduct5Type4Price);
+    info.set('ListProduct5Image', jsonData.ListProduct5Image);
+}
+
+/**
+ * Represents Ajax Reauest to load JSON Data.
+ * @method loadDoc
+ * @param {string} method - method of the request.
+ * @param {string} url - url of the request.
+ */
+function loadXMLDoc(method, url) {
+    'use strict';
+    var req = new XMLHttpRequest();
+    req.open(method, url, false);
+    req.onload = function () {
+        dataSet = JSON.parse(req.responseText);
+        bindData(dataSet);
+    };
+    req.onerror = function () {
+        throw 'Cannot load file ' + url;
+    };
+    req.send();
+}
+/** @function */
+loadXMLDoc('GET', 'data/data.json');
+
+/* Reload Signage App*/
+setTimeout(function () {
+    location.reload();
+//}, appReload * 1000);
+}, appReload * 3000);
+
+/* Fade Effect Class been added to Front Div */
+frontDiv.classList.add('fadeEffect');
+
+/* Hiding the Front Div after the fade effect is completed */
+setTimeout(function () {
+    frontDiv.style.opacity = '0';
+    frontDiv.style.zIndex = '0';
+}, 4600);
+/**
+ * Animation End Event Listner for CSS Transition
+ * 
+ * @event webkitAnimationEnd
+ */
+frontDiv.addEventListener('webkitAnimationEnd', function (e) {
+    if (e.animationName === 'fadeIn') {
+        e.target.classList.remove('fadeIn');
+    }
+    if (e.animationName === 'bounceInRight') {
+        e.target.classList.remove('bounceInRight');
+    }
+});