@webos-tools/cli 3.1.2 → 3.2.0

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

@@ -0,0 +1,239 @@
+/* Reset CSS*/
+* {
+    margin: 0px;
+    padding: 0px;
+}
+html, body {
+    width: 1920px;
+    height: 1080px;
+}
+/* Fonts */
+
+@font-face {
+    font-family: museo-sans-700;
+    src: url('../fonts/Museo Sans 700.otf');
+}
+@font-face {
+    font-family: museo-sans-500;
+    src: url('../fonts/Museo Sans 500.otf');
+}
+@font-face {
+    font-family: museo-sans-300;
+    src: url('../fonts/Museo Sans 300.otf');
+}
+/* Styling */
+
+/* Header */
+.header {
+    height: 80px;
+    width: 1920px;
+    background-color: #393939;
+    top: 0px;
+    left: 0px;
+}
+.headerImage {
+    height: 53px;
+    width: 583px;
+    margin-left: 40px;
+    margin-top: 14px;
+}
+
+/* Page */
+.content {
+    height: 1000px;
+    width: 1920px;
+    background-color: #fff;
+}
+
+/* Main Showcase */
+.showcase {
+    left: 40px;
+    top: 120px;
+    height: 526px;
+    width: 1384px;
+    position: absolute;
+    background-color: #680619;
+}
+.showcaseImg, .showcaseText {
+    float: left;
+}
+
+/* Showcase Text */
+.showcaseText {
+    margin-left: 34px;
+    margin-top: 60px;
+}
+.heading {
+    color: #fff;
+    position: absolute;
+}
+.heading1 {
+    font: 52px museo-sans-500;
+    top: 60px;
+}
+.heading2 {
+    font: 30px museo-sans-500;
+    top: 120px;
+}
+.heading3 {
+    font: 23px museo-sans-500;
+    top: 280px;
+}
+.showcaseContent {
+    color: #c98390;
+    font: 23px museo-sans-300;
+    top: 325px;
+    position: absolute;
+}
+.bannerImg {
+    left: 40px;
+    top: 662px;
+    height: 378px;
+    width: 684px;
+    position: absolute;
+}
+.bannerImgText, .bannerImgOverlayText, .bannerImgOverlayContent {
+    position: absolute;
+}
+.bannerImgText {
+    top: 264px;
+    height: 114px;
+    width: 684px;
+    opacity: 0.7;
+    background-color: #000000;
+}
+.bannerImgOverlayText {
+    top: 25px;
+    font: 38px museo-sans-500;
+    color: #fff;
+    left: 35px;
+}
+.bannerImgOverlayContent {
+    top: 77px;
+    font: 23px museo-sans-300;
+    color: #fff;
+    left: 35px;
+}
+/* Text Section Of News */
+.textSection {
+    position: absolute;
+    left: 740px;
+    top: 662px;
+    background-color: #e6e6e6;
+    height: 378px;
+    width: 684px;
+}
+.textSection .heading {
+    margin-left: 35px;
+    text-align: left;
+}
+.textSection .heading1 {
+    top: 28px;
+    font: 38px museo-sans-500;
+    color: #000;
+}
+.textSection .heading2 {
+    top: 70px;
+    font: 38px museo-sans-500;
+    color: #2e2e2e;
+}
+.textSection .heading3 {
+    top: 167px;
+    font: 23px museo-sans-500;
+    color: #2e2e2e;
+}
+.textSection .heading4 {
+    top: 212px;
+    font: 23px museo-sans-300;
+    color: #2e2e2e;
+    position: absolute;
+}
+
+/* Side Block */
+.side {
+    left: 1424px;
+    top: 120px;
+    height: 960px;
+    width: 496px;
+    position: absolute;
+}
+
+/* Commomn Block */
+.asideBlock {
+    height: 115px;
+    width: 416px;
+    position: relative;
+    margin-left: 40px;
+}
+
+/* Pattern 1 - 2 Line */
+.asideBlockPattern1C1 {
+    top: 31px;
+    font: 22px museo-sans-300;
+    color: #680619;
+    position: absolute;
+    float: left;
+}
+.asideBlockPattern1C2 {
+    top: 70px;
+    font: 20px museo-sans-300;
+    color: #7d7d7d;
+    position: absolute;
+    float: left;
+}
+
+/* Pattern 2 - 3 Line */
+.asideBlockPattern2C1 {
+    top: 21px;
+    font: 22px museo-sans-300;
+    color: #680619;
+    position: absolute;
+    float: left;
+}
+.asideBlockPattern2C2 {
+    top: 47px;
+    float: left;
+    font: 22px museo-sans-300;
+    color: #680619;
+    position: absolute;
+}
+.asideBlockPattern2C3 {
+    top: 80px;
+    float: left;
+    font: 20px museo-sans-300;
+    color: #7d7d7d;
+    position: absolute;
+}
+
+/* Side Blocks Seperator Line */
+.seperator {
+    width: 416px;
+    height: 1px;
+    background-color: #cccccc;
+    position: absolute;
+    left: 1464px;
+}
+.line1 {
+    top: 234px;
+}
+.line2 {
+    top: 349px;
+}
+.line3 {
+    top: 464px;
+}
+.line4 {
+    top: 579px;
+}
+.line5 {
+    top: 694px;
+}
+.line6 {
+    top: 809px;
+}
+.line7 {
+    top: 924px;
+}
+.line8 {
+    top: 1039px;
+}

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

@@ -0,0 +1,49 @@
+{
+    "headerImage": "res/images/tpl_06_logo_harvard.png",
+ 
+    "showcaseImg": "res/images/tpl_06_img_main_01.png",
+    "heading1": "MAIN-HEADER1",
+    "heading2": "SUB-HEADER1",
+    "heading3": "DATE1",
+    "showcaseContent": "CONTENT1",
+
+    "bannerImg": "res/images/tpl_06_img_news.png",
+    "bannerImgOverlayText": "OVERLAY SUB-TITLE",
+    "bannerImgOverlayContent": "OVERLAY CONTENT",
+    "textSectionH1": "MAIN-HEADER2-1",
+    "textSectionH2": "MAIN-HEADER2-2",
+    "textSectionH3": "DATE2",
+    "textSectionH4": "CONTENT2",
+
+    "asideBlock1Content1": "SUB-HEADER1-1",
+    "asideBlock1Content2": "SUB-HEADER1-2",
+    "asideBlock1Content3": "DATE1",
+
+    "asideBlock2Content1": "SUB-HEADER2-1",
+    "asideBlock2Content2": "SUB-HEADER2-2",
+    "asideBlock2Content3": "DATE2",
+
+    "asideBlock3Content1": "SUB-HEADER3-1",
+    "asideBlock3Content2": "SUB-HEADER3-2",
+    "asideBlock3Content3": "DATE3",
+
+    "asideBlock4Content1": "SUB-HEADER4-1",
+	"asideBlock4Content2": "SUB-HEADER4-2",
+    "asideBlock4Content3": "DATE4",
+
+    "asideBlock5Content1": "SUB-HEADER5-1",
+    "asideBlock5Content2": "SUB-HEADER5-2",
+    "asideBlock5Content3": "DATE5",
+
+    "asideBlock6Content1": "SUB-HEADER6-1",
+    "asideBlock6Content2": "SUB-HEADER6-2",
+    "asideBlock6Content3": "DATE6",
+
+    "asideBlock7Content1": "SUB-HEADER7-1",
+    "asideBlock7Content2": "SUB-HEADER7-2",
+    "asideBlock7Content3": "DATE7",
+
+    "asideBlock8Content1": "SUB-HEADER8-1",
+    "asideBlock8Content2": "SUB-HEADER8-2",
+    "asideBlock8Content3": "DATE8"
+}

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

@@ -0,0 +1,101 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <title>Dashborad App III</title>
+    <link href="css/styles.css" rel="stylesheet" type="text/css" />
+    <!-- DataBinder -->
+    <script src="js/helpers/util.js"></script>
+</head>
+
+<body>
+    <div class="header">
+        <img class="headerImage" data-bind-templateSix="headerImage" height="53px" width="45px;" />
+    </div>
+    <div class="content">
+        <!-- Main Showcase -->
+        <div class="showcase">
+            <div class="showcaseImg">
+                <img data-bind-templateSix="showcaseImg" height="526px" width="854px" />
+            </div>
+            <div class="showcaseText">
+                <div class="heading1 heading" data-bind-templateSix="heading1"></div>
+                <div class="heading2 heading" data-bind-templateSix="heading2"></div>
+                <div class="heading3 heading" data-bind-templateSix="heading3"></div>
+                <div class="showcaseContent" data-bind-templateSix="showcaseContent"></div>
+            </div>
+        </div>
+        <!-- Banner With Text Overlay -->
+        <div class="bannerImg">
+            <img data-bind-templateSix="bannerImg" />
+            <div class="bannerImgText">
+                <span class="bannerImgOverlayText" data-bind-templateSix="bannerImgOverlayText"></span>
+                <span class="bannerImgOverlayContent" data-bind-templateSix="bannerImgOverlayContent"></span>
+            </div>
+        </div>
+        <!-- Section -->
+        <div class="textSection">
+            <div class="heading1 heading" data-bind-templateSix="textSectionH1"></div>
+            <div class="heading2 heading" data-bind-templateSix="textSectionH2"></div>
+            <div class="heading3 heading" data-bind-templateSix="textSectionH3"></div>
+            <div class="heading4 heading" data-bind-templateSix="textSectionH4"></div>
+        </div>
+        <!-- Side Block -->
+        <div class="side">
+            <div class="asideBlock">
+                <div class="asideBlockPattern2C1" data-bind-templateSix="asideBlock1Content1"></div>
+                <div class="asideBlockPattern2C2" data-bind-templateSix="asideBlock1Content2"></div>
+				<div class="asideBlockPattern2C3" data-bind-templateSix="asideBlock1Content3"></div>
+            </div>
+            <div class="asideBlock">
+                <div class="asideBlockPattern2C1" data-bind-templateSix="asideBlock2Content1"></div>
+                <div class="asideBlockPattern2C2" data-bind-templateSix="asideBlock2Content2"></div>
+                <div class="asideBlockPattern2C3" data-bind-templateSix="asideBlock2Content3"></div>
+            </div>
+            <div class="asideBlock">
+                <div class="asideBlockPattern2C1" data-bind-templateSix="asideBlock3Content1"></div>
+                <div class="asideBlockPattern2C2" data-bind-templateSix="asideBlock3Content2"></div>
+                <div class="asideBlockPattern2C3" data-bind-templateSix="asideBlock3Content3"></div>
+            </div>
+            <div class="asideBlock">
+                <div class="asideBlockPattern2C1" data-bind-templateSix="asideBlock4Content1"></div>
+                <div class="asideBlockPattern2C2" data-bind-templateSix="asideBlock4Content2"></div>
+				<div class="asideBlockPattern2C3" data-bind-templateSix="asideBlock4Content3"></div>
+            </div>
+            <div class="asideBlock">
+                <div class="asideBlockPattern2C1" data-bind-templateSix="asideBlock5Content1"></div>
+                <div class="asideBlockPattern2C2" data-bind-templateSix="asideBlock5Content2"></div>
+                <div class="asideBlockPattern2C3" data-bind-templateSix="asideBlock5Content3"></div>
+            </div>
+            <div class="asideBlock">
+                <div class="asideBlockPattern2C1" data-bind-templateSix="asideBlock6Content1"></div>
+                <div class="asideBlockPattern2C2" data-bind-templateSix="asideBlock6Content2"></div>
+                <div class="asideBlockPattern2C3" data-bind-templateSix="asideBlock6Content3"></div>
+            </div>
+            <div class="asideBlock">
+                <div class="asideBlockPattern2C1" data-bind-templateSix="asideBlock7Content1"></div>
+                <div class="asideBlockPattern2C2" data-bind-templateSix="asideBlock7Content2"></div>
+                <div class="asideBlockPattern2C3" data-bind-templateSix="asideBlock7Content3"></div>
+            </div>
+            <div class="asideBlock">
+                <div class="asideBlockPattern2C1" data-bind-templateSix="asideBlock8Content1"></div>
+                <div class="asideBlockPattern2C2" data-bind-templateSix="asideBlock8Content2"></div>
+                <div class="asideBlockPattern2C3" data-bind-templateSix="asideBlock8Content3"></div>
+            </div>
+        </div>
+        <!-- Side Block Seperator -->
+        <div class="line1 seperator"></div>
+        <div class="line2 seperator"></div>
+        <div class="line3 seperator"></div>
+        <div class="line4 seperator"></div>
+        <div class="line5 seperator"></div>
+        <div class="line6 seperator"></div>
+        <div class="line7 seperator"></div>
+        <div class="line8 seperator"></div>
+    </div>
+</body>
+<script src="js/controller.js"></script>
+
+</html>

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

@@ -0,0 +1,111 @@
+/*global BindClass */
+/*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
+ */
+
+/**
+ * Description of module, defines module for whole file
+ * @lends module: closureFunction
+ * @module closureFunction
+ */
+(function () {
+    'use strict';
+    /** @type {object} */
+    var info,
+    /** @type {string} */
+        dataSet;
+    /**
+     * Binds data to HTML Page.
+     * @method bindData
+     * @param {Object} jsonData - Object contains data to put into HTML
+     * @example
+     * For Example : 
+     * 'jsonData.headerImage' will hold the path of an image to be set into the html page.
+     * For Img Tag attribute 'data-bind-templateSix', we set value as 'headerImage'(See Below).
+     *               
+     *     //  img data-bind-templateSix = "headerImage"
+     *       
+     * To set the value from Object to html tag, we need to put the code : 
+     *     //  info.set('headerImage', jsonData.headerImage)
+     *
+     * here, first argument is the name of html tag's attribute value and,
+     *             second is the value from javascript Object.
+     */
+    function bindData(jsonData) {
+        info = new BindClass('templateSix');
+        /* Header Div */
+        info.set('headerImage', jsonData.headerImage);
+        /* Showcase Div */
+        info.set('showcaseImg', jsonData.showcaseImg);
+        info.set('heading1', jsonData.heading1);
+        info.set('heading2', jsonData.heading2);
+        info.set('heading3', jsonData.heading3);
+        info.set('showcaseContent', jsonData.showcaseContent);
+        /* Image Text Overlay */
+        info.set('bannerImg', jsonData.bannerImg);
+        info.set('bannerImgOverlayText', jsonData.bannerImgOverlayText);
+        info.set('bannerImgOverlayContent', jsonData.bannerImgOverlayContent);
+        /* Section Div */
+        info.set('textSectionH1', jsonData.textSectionH1);
+        info.set('textSectionH2', jsonData.textSectionH2);
+        info.set('textSectionH3', jsonData.textSectionH3);
+        info.set('textSectionH4', jsonData.textSectionH4);
+        /* Side Div - 8 Blocks */
+        // Block 1
+        info.set('asideBlock1Content1', jsonData.asideBlock1Content1);
+        info.set('asideBlock1Content2', jsonData.asideBlock1Content2);
+		info.set('asideBlock1Content3', jsonData.asideBlock1Content3);
+        // Block 2
+        info.set('asideBlock2Content1', jsonData.asideBlock2Content1);
+        info.set('asideBlock2Content2', jsonData.asideBlock2Content2);
+        info.set('asideBlock2Content3', jsonData.asideBlock2Content3);
+        // Block 3
+        info.set('asideBlock3Content1', jsonData.asideBlock3Content1);
+        info.set('asideBlock3Content2', jsonData.asideBlock3Content2);
+        info.set('asideBlock3Content3', jsonData.asideBlock3Content3);
+        // Block 4
+        info.set('asideBlock4Content1', jsonData.asideBlock4Content1);
+        info.set('asideBlock4Content2', jsonData.asideBlock4Content2);
+		info.set('asideBlock4Content3', jsonData.asideBlock4Content3);
+        // Block 5
+        info.set('asideBlock5Content1', jsonData.asideBlock5Content1);
+        info.set('asideBlock5Content2', jsonData.asideBlock5Content2);
+        info.set('asideBlock5Content3', jsonData.asideBlock5Content3);
+        // Block 6
+        info.set('asideBlock6Content1', jsonData.asideBlock6Content1);
+        info.set('asideBlock6Content2', jsonData.asideBlock6Content2);
+        info.set('asideBlock6Content3', jsonData.asideBlock6Content3);
+        // Block 7
+        info.set('asideBlock7Content1', jsonData.asideBlock7Content1);
+        info.set('asideBlock7Content2', jsonData.asideBlock7Content2);
+        info.set('asideBlock7Content3', jsonData.asideBlock7Content3);
+        // Block 8
+        info.set('asideBlock8Content1', jsonData.asideBlock8Content1);
+        info.set('asideBlock8Content2', jsonData.asideBlock8Content2);
+        info.set('asideBlock8Content3', jsonData.asideBlock8Content3);
+    }
+    /**
+     * Represents Ajax Reauest.
+     * @method loadDoc
+     * @param {string} method - method of the request.
+     * @param {string} url - url of the request.
+     */
+    function loadDoc(method, url) {
+        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 */
+    loadDoc('GET', 'data/data.json');
+}());

package/files/templates/signage-sdk-templates/Information_Board/js/helpers/util.js

@@ -0,0 +1,130 @@
+/*jslint browser:true, unparam: true, indent: 4 */
+/*global console: false */
+
+/**
+ * @file File is related with Data-Binding functionality inside the apps.
+ * It has Publish Subscribe pattern for listening the changes from View to Controller or vice versa.
+ * @author LG CSP-1
+ */
+try {
+    /**
+     * Creates DataBinder Class, where publish
+     * @class DataBinder
+     * @return {Object} publishSub Object
+     */
+    var DataBinder = function (object_id) {
+            'use strict';
+            //For loop var's declarations
+            var i, len, k, psLen,
+                /** 
+                 * pubSubObj Create a simple PubSub object
+                 * @type {Object}
+                 */
+                pubSubObj = { // Create a simple PubSub object
+                    callbacks: {},
+                    on: function (msg, callback) {
+                        this.callbacks[msg] = this.callbacks[msg] || [];
+                        this.callbacks[msg].push(callback);
+                    },
+                    publish: function (msg) {
+                        this.callbacks[msg] = this.callbacks[msg] || [];
+                        len = this.callbacks[msg].length;
+                        for (i = 0; i < len; i += 1) {
+                            this.callbacks[msg][i].apply(this, arguments);
+                        }
+                    }
+                },
+                data_attr = 'data-bind-' + object_id,
+                message = object_id + ':change',
+                /** 
+                 * changeHandler Any Change inside the Binding element will invoke this event.
+                 * @function changeHandler
+                 */
+                changeHandler = function (evt) {
+                    var target = evt.target || evt.srcElement,
+                        prop_name = target.getAttribute(data_attr);
+                    if (prop_name && prop_name !== '') {
+                        pubSubObj.publish(message, prop_name, target.value);
+                    }
+                };
+            /**
+             * Triggers view to model binding.
+             *
+             * @event DataBinder#change
+             */
+            document.addEventListener('change', changeHandler, false);
+            /**
+             * Publish data changes to view.
+             *
+             * @event DataBinder#pubSubObj
+             */
+            pubSubObj.on(message, function (evt, prop_name, new_val) {
+                var elements = document.querySelectorAll('[' + data_attr + '=' + prop_name + ']'),
+                    tag_name = '';
+                if (elements !== 'undefined' && elements.length !== 0) {
+                    psLen = elements.length;
+                    for (k = 0; k < psLen; k += 1) {
+                        tag_name = elements[k].tagName.toLowerCase();
+                        switch (tag_name) {
+                        case 'input':
+                        case 'textarea':
+                        case 'select':
+                            elements[k].value = new_val;
+                            break;
+                        case 'video':
+                        case 'img':
+                            elements[k].src = new_val;
+                            break;
+                        default:
+                            elements[k].innerHTML = new_val;
+                            break;
+                        }
+                    }
+                }
+            });
+            return pubSubObj;
+        },
+        /**
+         * Creates BindClass Class.
+         * @class BindClass
+         * @return {Object} publishSub Object
+         */
+        BindClass = function (dataAttr) {
+            'use strict';
+            /** 
+             * creates the DataBinder instance and set/get to binding object.
+             * @function bindSet
+             * @return {Object}
+             */
+            var bindSet = (function () {
+                var binder = new DataBinder(dataAttr),
+                    bindObj = {
+                        attributes: {},
+                        // The attribute setter publish changes using the DataBinder PubSub
+                        set: function (attr_name, val) {
+                            this.attributes[attr_name] = val;
+                            //pass this as parameter,So that initiator will be in bindObj context
+                            binder.publish(dataAttr + ':change', attr_name, val, this);
+                        },
+                        get: function (attr_name) {
+                            return this.attributes[attr_name];
+                        },
+                        binderObject: binder
+                    };
+                /**
+                 * Subscribe to the PubSub.
+                 *
+                 * @event BindClass#dataAttributeChange
+                 */
+                binder.on(dataAttr + ':change', function (evt, attr_name, new_val, initiator) {
+                    if (initiator !== bindObj) {
+                        bindObj.set(attr_name, new_val);
+                    }
+                });
+                return bindObj;
+            }());
+            return bindSet;
+        };
+} catch (e) {
+    console.log('error in js/helper/util.js' + e.message);
+}

package/files/templates/signage-sdk-templates/Information_Board/readme.txt

@@ -0,0 +1,22 @@
+App Directory Structure
+
+	[index.html]
+	The file on which the basic skeleton of an HTML page is built on. File paths to CSS, JS, images and videos are defined on this file.
+
+	[css folder]
+	Contains the style.css file, on which modifications are made to style the presentation of the HTML code.
+
+	[js folder]
+	- Helper folder: Contains utility JS file for data binding support.
+	- controller.js: Controls the actions of html elements.
+
+	[data folder]
+	Contains json files, which acts like a model to html page .(content of HTML elements).
+
+	[res folder]
+	Contains multimedia resource files
+	- images folder contains image files, if needed.
+	- videos folder contains video files, if needed.
+
+	[fonts folder]
+	Contains fonts, if needed.