iot-sol

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="generator" content="pandoc" /> <meta name="author" content="Copyright 2015 Intel Corporation All Rights Reserved." /> <title>IoT Services Orchestration Layer</title> <style type="text/css">code{white-space: pre;}</style> <style type="text/css"> div.sourceCode { overflow-x: auto; } table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode { margin: 0; padding: 0; vertical-align: baseline; border: none; } table.sourceCode { width: 100%; line-height: 100%; } td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; } td.sourceCode { padding-left: 5px; } code > span.kw { color: #007020; font-weight: bold; } /* Keyword */ code > span.dt { color: #902000; } /* DataType */ code > span.dv { color: #40a070; } /* DecVal */ code > span.bn { color: #40a070; } /* BaseN */ code > span.fl { color: #40a070; } /* Float */ code > span.ch { color: #4070a0; } /* Char */ code > span.st { color: #4070a0; } /* String */ code > span.co { color: #60a0b0; font-style: italic; } /* Comment */ code > span.ot { color: #007020; } /* Other */ code > span.al { color: #ff0000; font-weight: bold; } /* Alert */ code > span.fu { color: #06287e; } /* Function */ code > span.er { color: #ff0000; font-weight: bold; } /* Error */ code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ code > span.cn { color: #880000; } /* Constant */ code > span.sc { color: #4070a0; } /* SpecialChar */ code > span.vs { color: #4070a0; } /* VerbatimString */ code > span.ss { color: #bb6688; } /* SpecialString */ code > span.im { } /* Import */ code > span.va { color: #19177c; } /* Variable */ code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */ code > span.op { color: #666666; } /* Operator */ code > span.bu { } /* BuiltIn */ code > span.ex { } /* Extension */ code > span.pp { color: #bc7a00; } /* Preprocessor */ code > span.at { color: #7d9029; } /* Attribute */ code > span.do { color: #ba2121; font-style: italic; } /* Documentation */ code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */ code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */ </style> <link href="data:text/css;charset=utf-8,body%20%7B%0Amargin%3A%20auto%3B%0Apadding%2Dright%3A%201em%3B%0Apadding%2Dleft%3A%201em%3B%0Amax%2Dwidth%3A%2044em%3B%20border%2Dleft%3A%201px%20solid%20black%3B%0Aborder%2Dright%3A%201px%20solid%20black%3B%0Acolor%3A%20black%3B%0Afont%2Dfamily%3A%20Verdana%2C%20sans%2Dserif%3B%0Afont%2Dsize%3A%20100%25%3B%0Aline%2Dheight%3A%20140%25%3B%0Acolor%3A%20%23333%3B%20%7D%0Apre%20%7B%0Aborder%3A%201px%20dotted%20gray%3B%0Abackground%2Dcolor%3A%20%23ececec%3B%0Acolor%3A%20%231111111%3B%0Apadding%3A%200%2E5em%3B%0A%7D%0Acode%20%7B%0Afont%2Dfamily%3A%20monospace%3B%0A%7D%0Ah1%20a%2C%20h2%20a%2C%20h3%20a%2C%20h4%20a%2C%20h5%20a%20%7B%20text%2Ddecoration%3A%20none%3B%0Acolor%3A%20%237a5ada%3B%20%7D%0Ah1%2C%20h2%2C%20h3%2C%20h4%2C%20h5%20%7B%20font%2Dfamily%3A%20verdana%3B%0Afont%2Dweight%3A%20bold%3B%0Aborder%2Dbottom%3A%201px%20dotted%20black%3B%0Acolor%3A%20%237a5ada%3B%20%7D%0Ah1%20%7B%0Afont%2Dsize%3A%20130%25%3B%0A%7D%0Ah2%20%7B%0Afont%2Dsize%3A%20110%25%3B%0A%7D%0Ah3%20%7B%0Afont%2Dsize%3A%2095%25%3B%0A%7D%0Ah4%20%7B%0Afont%2Dsize%3A%2090%25%3B%0Afont%2Dstyle%3A%20italic%3B%0A%7D%0Ah5%20%7B%0Afont%2Dsize%3A%2090%25%3B%0Afont%2Dstyle%3A%20italic%3B%0A%7D%0Ah1%2Etitle%20%7B%0Afont%2Dsize%3A%20200%25%3B%0Afont%2Dweight%3A%20bold%3B%0Apadding%2Dtop%3A%200%2E2em%3B%0Apadding%2Dbottom%3A%200%2E2em%3B%0Atext%2Dalign%3A%20left%3B%0Aborder%3A%20none%3B%0A%7D%0Adt%20code%20%7B%0Afont%2Dweight%3A%20bold%3B%0A%7D%0Add%20p%20%7B%0Amargin%2Dtop%3A%200%3B%0A%7D%0A%23footer%20%7B%0Apadding%2Dtop%3A%201em%3B%0Afont%2Dsize%3A%2070%25%3B%0Acolor%3A%20gray%3B%0Atext%2Dalign%3A%20center%3B%0A%7D%0Apre%20%7B%0Abackground%2Dcolor%3A%20%23FDF6E3%0A%7D%0Aimg%20%7B%0Amax%2Dwidth%3A%2044em%3B%0A%7D%0A%2F%2F%20KeyWordTok%0A%2EsourceCode%20%2Ekw%20%7B%20color%3A%20%23268BD2%3B%20%7D%0A%2F%2F%20DataTypeTok%0A%2EsourceCode%20%2Edt%20%7B%20color%3A%20%23268BD2%3B%20%7D%0A%2F%2F%20DecValTok%20%28decimal%20value%29%2C%20BaseNTok%2C%20FloatTok%0A%2EsourceCode%20%2Edv%2C%20%2EsourceCode%20%2Ebn%2C%20%2EsourceCode%20%2Efl%20%7B%20color%3A%20%23D33682%3B%20%7D%0A%2F%2F%20CharTok%0A%2EsourceCode%20%2Ech%20%7B%20color%3A%20%23DC322F%3B%20%7D%0A%2F%2F%20StringTok%0A%2EsourceCode%20%2Est%20%7B%20color%3A%20%232AA198%3B%20%7D%0A%2F%2F%20CommentTok%0A%2EsourceCode%20%2Eco%20%7B%20color%3A%20%2393A1A1%3B%20%7D%0A%2F%2F%20OtherTok%0A%2EsourceCode%20%2Eot%20%7B%20color%3A%20%23A57800%3B%20%7D%0A%2F%2F%20AlertTok%0A%2EsourceCode%20%2Eal%20%7B%20color%3A%20%23CB4B16%3B%20font%2Dweight%3A%20bold%3B%20%7D%0A%2F%2F%20FunctionTok%0A%2EsourceCode%20%2Efu%20%7B%20color%3A%20%23268BD2%3B%20%7D%0A%2F%2F%20RegionMarkerTok%0A%2EsourceCode%20%2Ere%20%7B%20%7D%0A%2F%2F%20ErrorTok%0A%2EsourceCode%20%2Eer%20%7B%20color%3A%20%23D30102%3B%20font%2Dweight%3A%20bold%3B%20%7D%0A" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <h1 class="title">IoT Services Orchestration Layer</h1> <h2 class="author">Copyright 2015 Intel Corporation All Rights Reserved.</h2> </div> <div id="TOC"> <ul> <li><a href="#widget">Widget</a><ul> <li><a href="#introduction-of-widget">Introduction of Widget</a></li> <li><a href="#widget-class">Widget class</a><ul> <li><a href="#methods">Methods</a></li> </ul></li> <li><a href="#spec">spec</a><ul> <li><a href="#configurations">Configurations</a></li> </ul></li> <li><a href="#code-integration">Code integration</a></li> <li><a href="#wrapping-third-party-as-builtin-widget">Wrapping third party as builtin widget</a></li> <li><a href="#publish-to-npm">Publish to NPM</a></li> <li><a href="#directory-layout">Directory Layout</a><ul> <li><a href="#package.json">package.json</a></li> <li><a href="#index.js">index.js</a></li> </ul></li> </ul></li> </ul> </div> <h1 id="widget">Widget</h1> <h2 id="introduction-of-widget">Introduction of Widget</h2> The Widget is the basic element that consists the UI of end users, its code base is shared by both ui-dev and ui-user projects. Every UI divides up the screen as a grid with N rows and 12 columns, the width of each column is about 8.333% width of the browser, and the height of row is fixed to 60px (configurable). The number of rows (N) is dependent on the height of the browser. Each initial instance of widgets occupies 1x1 size on the grid, developers can resize it by drag and drop. <h2 id="widget-class">Widget class</h2> All widgets should be derivatived from the Widget class, this base class encapsulates the infrastructure such as UI layout, data communication and event dispatching. You can find the builtin widgets under ui-widget/widgets-jsx/, and put your code there, so that we can processes it by unified building scripts. For example, we create a sample widget as follows: <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">export default class TextWidget extends Widget { // All widget must overwrite this method render() { var text = this.get_data().map((t, i) => <div>{t.text}</div>); return super.render( <div>{text}</div> ); } }</code></pre></div> <h3 id="methods">Methods</h3> <h4 id="get_data">get_data()</h4> This method get all the data cached from inports, returns an array of plain objects whose keys are inports’ name. Note: The size of the array is a configurable item(<code>data_cache_size</code>) in spec. <h4 id="get_height">get_height()</h4> This method returns the <code>height</code> of the instance in px. <h4 id="get_width">get_width()</h4> This method returns the <code>width</code> of the instance in px. <h4 id="set_cssid-css">set_css(id, css)</h4> This method inserts a style element into current HTML document <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><style id="id"> css </style></code></pre></div> <h4 id="send_dataout">send_data(out)</h4> This method sends the <code>out</code> into the outports, <code>out</code> is the key-value mapping of the outports, e.g. {<code>o1</code>: val1, <code>o2</code>: val2;}, Note: the <code>o1</code>, <code>o2</code> is the name of outports <h4 id="switch_uiid">switch_ui(id)</h4> This method is used to switchs the UIs of the App. <h4 id="on_settings_changedprev-next">_on_settings_changed(prev, next)</h4> This is a callback function, implement it if you want to handle the event of <code>settings changed</code> which emited by property panel (inspector). <h2 id="spec">spec</h2> spec is a textual description for Widget, such as how many <code>inports</code>, <code>outports</code> and <code>configurations</code>, and details. Every widget should be described in <code>ui-widgets/specs.js</code>. For example, following is the builtin spec of Text widget: <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">{ id: "hope/ui/text", catalog: "basic", name: "Text", description: "Show Text", icon: "text-width", use_ract: true, data_cache_size: 5, // how many data items would be cached to show the widget // 0 for using default, -1 means unliminted config: [{ name: "align", type: "option", default: "left", options: ["left", "center", "right"] }, { name: "font_size", display: "Font Size", // displaying label in property panel type: "string" }], in: { ports: [{ name: "text", type: "string" }] }, out: { ports: [] } }</code></pre></div> <h3 id="configurations">Configurations</h3> For a widget, all property of configuration is divided into two parts, the config group always is visible, and the extra group is hidden by default. Supported data types of configuration item: <h4 id="boolean">boolean</h4> <code>Boolean</code> property, corresponding to a <code>switch</code> button in the property panel. <h4 id="number">number</h4> <code>Number</code> property, corresponding to an <code>editbox</code> in the property panel. <h4 id="int">int</h4> <code>Integer</code> property, corresponding to an <code>editbox</code> in the property panel. <h4 id="string">string</h4> <code>String</code> property, corresponding to an <code>editbox</code> in the property panel. <h4 id="option">option</h4> <code>Option</code> property, corresponding to a <code>combox</code> in the property panel. Options are provided by <code>options</code> property, following three cases are supported: <ul> <li><code>array</code> of keys, such as the <code>align</code> in spec of <code>hope/ui/text</code> widget.</li> <li><code>array</code> of plain object, e.g. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">{ name: "editor_type", type: "option", options: [{ name: "Single Line", value: "sle" }, { name: "Multiple Line", value: "mle" }] }</code></pre></div></li> <li><code>string</code>: only <code>__HOPE_APP_UI_LIST__</code> supported now, which will be replaced by a list of UIs in the App.</li> </ul> <h4 id="glyphicon">glyphicon</h4> A font icon, developers can easily pick one in the property panel, system now provides up to 576 icons. <h4 id="color">color</h4> ‘Color’ property, corresponding to an circle <code>button</code> in the property panel, click the button will open a color dialog. <h2 id="code-integration">Code integration</h2> For a new widget, besides adding its <code>spec</code> in <code>ui-widgets/specs.js</code>, we also need to export it from <code>ui-widgets/index.js</code>. Specifically, we should add one key-value pair in <code>widgets</code> object of <code>index.js</code>, and use the unique <code>id</code> of widget as key, and use the constructor of widget as value. For example, the <code>text</code> widget is exported as following: <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">exports.widgets = { "hope/ui/text": require("./generated/text"); ... }</code></pre></div> <h2 id="wrapping-third-party-as-builtin-widget">Wrapping third party as builtin widget</h2> For example, we want to import the <a href="http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6">D3 Liquid Fill Gauge</a>. At first, we download the source code <a href="http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6#liquidFillGauge.js">liquidFillGauge.js</a> and save it to <code>ui-widgets/third_party/</code> with a little changes like follows: <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">var d3 = require("d3"); exports.liquidFillGaugeDefaultSettings = function(){ return { ... } exports.loadLiquidFillGauge = function(elementId, value, config) { if(config == null) config = liquidFillGaugeDefaultSettings(); ...</code></pre></div> Secondly, we create a new React class to wrap this widget, and save the js file as <code>ui-widgets/widgets-jsx/lfg.js</code>: <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">import {liquidFillGaugeDefaultSettings, loadLiquidFillGauge} from "../third_party/liquidFillGauge.js"; export default class LFGWidget extends Widget { _on_settings_changed() { this.init_gauge(); } init_gauge() { var w = this.props.widget; var size = this.get_height() - 5; var svg = "<svg id='" + w.id + "' width='" + size + "' height='" + size + "'>"; var config = liquidFillGaugeDefaultSettings(); _.merge(config, w.config); $(this.refs.container).empty().append(svg); this.gauge_object = loadLiquidFillGauge(w.id, 0, config); } componentDidMount() { super.componentDidMount(); this.set_css("lfg-css", ".liquidFillGaugeText { font-family: Helvetica; font-weight: bold; }"); this.init_gauge(); } componentDidUpdate() { var data = this.get_data(); if (_.isArray(data) && data.length > 0) { var val = parseFloat(data[0].value); this.gauge_object.update(val); } } render() { return super.render(<div ref="container" />); } }</code></pre></div> Then, we append following spec into <code>ui-widgets/specs.js</code>: <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">{ id: "hope/ui/lfg-gauge", catalog: "basic", name: "liquid Fill Gauge", description: "liquid Fill Gauge", icon: "dashboard", use_ract: true, data_cache_size: 1, config: [{ name: "waveColor", // same name in liquidFillGaugeDefaultSettings type: "string", // TODO: add more configuration like this default: "#178BCA" }], in: { ports: [{ name: "value", type: "number" }] }, out: { ports: [] } }</code></pre></div> Finally, we need to add a key-value pair into <code>ui-widgets/index.js</code> to export this widget, and run <code>gulp build</code> to rebuild the <code>ui-widgets</code> project. <div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json">"hope/ui/lfg-gauge": require("./generated/lfg")</code></pre></div> <h2 id="publish-to-npm">Publish to NPM</h2> In most cases, we want to publish the widget on internet. now we are using <a href="http://www.npmjs.com">NPM</a> to host our widget plugins. Conventionally, We highly recommend that the name of npm package of widget should begin with “hope-widget-”, it’s a simple way for code integration. For example, if want to use <code>XYZ</code>, we just need execute following commands in <code>ui-widgets/</code> directory: <div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"> $ npm install hope-widget-XYZ --save $ gulp build</code></pre></div> <h2 id="directory-layout">Directory Layout</h2> For example, we create a new npm package <code>ui-widgets/hope-widget-lfg/</code>, and its tree graph is as follows: <pre><code>hope-widget-lfg |-- package.json |-- index.js |-- third_party | `-- liquidFillGauge.js `-- src `-- lfg.js</code></pre> <h3 id="package.json">package.json</h3> <div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json">{ "name": "hope-widget-lfg", "version": "1.0.0", "description": "liquid Fill Gauge", "main": "index.js", "scripts": { "build": "babel src --out-dir lib", "prepublish": "npm run build" }, "dependencies": {}, "devDependencies": {}, "keywords": ["guage"], "author": "Kanghua Yu", "license": "MIT" }</code></pre></div> <h3 id="index.js">index.js</h3> <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">exports.specs = [{ id: "hope/ui/lfg-gauge", catalog: "basic", name: "liquid Fill Gauge", description: "liquid Fill Gauge", icon: "dashboard", use_ract: true, data_cache_size: 1, config: [{ name: "waveColor", // same name in liquidFillGaugeDefaultSettings type: "string", // TODO: add more configuration like this default: "#178BCA" }], in: { ports: [{ name: "value", type: "number" }] }, out: { ports: [] } }]; if (process.browser) { exports.widgets = { "hope/ui/lfg-gauge": require("./lib/lfg"); ... } }</code></pre></div> </body> </html>