UNPKG

dreemgl

Version:

DreemGL is an open-source multi-screen prototyping framework for mediated environments, with a visual editor and shader styling for webGL and DALi runtimes written in JavaScript. As a toolkit for gpu-accelerated multiscreen development, DreemGL includes

423 lines (409 loc) 42.8 kB
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CodeRay output</title> <style type="text/css"> .CodeRay .line-numbers a { text-decoration: inherit; color: inherit; } body { background-color: white; padding: 0; margin: 0; } .CodeRay { background-color: hsl(0,0%,95%); border: 1px solid silver; color: black; } .CodeRay pre { margin: 0px; } span.CodeRay { white-space: pre; border: 0px; padding: 2px; } table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px; } table.CodeRay td { padding: 2px 4px; vertical-align: top; } .CodeRay .line-numbers { background-color: hsl(180,65%,90%); color: gray; text-align: right; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .CodeRay .line-numbers a { background-color: hsl(180,65%,90%) !important; color: gray !important; text-decoration: none !important; } .CodeRay .line-numbers pre { word-break: normal; } .CodeRay .line-numbers a:target { color: blue !important; } .CodeRay .line-numbers .highlighted { color: red !important; } .CodeRay .line-numbers .highlighted a { color: red !important; } .CodeRay span.line-numbers { padding: 0px 4px; } .CodeRay .line { display: block; float: left; width: 100%; } .CodeRay .code { width: 100%; } .CodeRay .debug { color: white !important; background: blue !important; } .CodeRay .annotation { color:#007 } .CodeRay .attribute-name { color:#b48 } .CodeRay .attribute-value { color:#700 } .CodeRay .binary { color:#549 } .CodeRay .binary .char { color:#325 } .CodeRay .binary .delimiter { color:#325 } .CodeRay .char { color:#D20 } .CodeRay .char .content { color:#D20 } .CodeRay .char .delimiter { color:#710 } .CodeRay .class { color:#B06; font-weight:bold } .CodeRay .class-variable { color:#369 } .CodeRay .color { color:#0A0 } .CodeRay .comment { color:#777 } .CodeRay .comment .char { color:#444 } .CodeRay .comment .delimiter { color:#444 } .CodeRay .constant { color:#036; font-weight:bold } .CodeRay .decorator { color:#B0B } .CodeRay .definition { color:#099; font-weight:bold } .CodeRay .delimiter { color:black } .CodeRay .directive { color:#088; font-weight:bold } .CodeRay .docstring { color:#D42; } .CodeRay .doctype { color:#34b } .CodeRay .done { text-decoration: line-through; color: gray } .CodeRay .entity { color:#800; font-weight:bold } .CodeRay .error { color:#F00; background-color:#FAA } .CodeRay .escape { color:#666 } .CodeRay .exception { color:#C00; font-weight:bold } .CodeRay .float { color:#60E } .CodeRay .function { color:#06B; font-weight:bold } .CodeRay .function .delimiter { color:#024; font-weight:bold } .CodeRay .global-variable { color:#d70 } .CodeRay .hex { color:#02b } .CodeRay .id { color:#33D; font-weight:bold } .CodeRay .include { color:#B44; font-weight:bold } .CodeRay .inline { background-color: hsla(0,0%,0%,0.07); color: black } .CodeRay .inline-delimiter { font-weight: bold; color: #666 } .CodeRay .instance-variable { color:#33B } .CodeRay .integer { color:#00D } .CodeRay .imaginary { color:#f00 } .CodeRay .important { color:#D00 } .CodeRay .key { color: #606 } .CodeRay .key .char { color: #60f } .CodeRay .key .delimiter { color: #404 } .CodeRay .keyword { color:#080; font-weight:bold } .CodeRay .label { color:#970; font-weight:bold } .CodeRay .local-variable { color:#950 } .CodeRay .map .content { color:#808 } .CodeRay .map .delimiter { color:#40A} .CodeRay .map { background-color:hsla(200,100%,50%,0.06); } .CodeRay .namespace { color:#707; font-weight:bold } .CodeRay .octal { color:#40E } .CodeRay .operator { } .CodeRay .predefined { color:#369; font-weight:bold } .CodeRay .predefined-constant { color:#069 } .CodeRay .predefined-type { color:#0a8; font-weight:bold } .CodeRay .preprocessor { color:#579 } .CodeRay .pseudo-class { color:#00C; font-weight:bold } .CodeRay .regexp { background-color:hsla(300,100%,50%,0.06); } .CodeRay .regexp .content { color:#808 } .CodeRay .regexp .delimiter { color:#404 } .CodeRay .regexp .modifier { color:#C2C } .CodeRay .reserved { color:#080; font-weight:bold } .CodeRay .shell { background-color:hsla(120,100%,50%,0.06); } .CodeRay .shell .content { color:#2B2 } .CodeRay .shell .delimiter { color:#161 } .CodeRay .string { background-color:hsla(0,100%,50%,0.05); } .CodeRay .string .char { color: #b0b } .CodeRay .string .content { color: #D20 } .CodeRay .string .delimiter { color: #710 } .CodeRay .string .modifier { color: #E40 } .CodeRay .symbol { color:#A60 } .CodeRay .symbol .content { color:#A60 } .CodeRay .symbol .delimiter { color:#740 } .CodeRay .tag { color:#070; font-weight:bold } .CodeRay .type { color:#339; font-weight:bold } .CodeRay .value { color: #088 } .CodeRay .variable { color:#037 } .CodeRay .insert { background: hsla(120,100%,50%,0.12) } .CodeRay .delete { background: hsla(0,100%,50%,0.12) } .CodeRay .change { color: #bbf; background: #007 } .CodeRay .head { color: #f8f; background: #505 } .CodeRay .head .filename { color: white; } .CodeRay .delete .eyecatcher { background-color: hsla(0,100%,50%,0.2); border: 1px solid hsla(0,100%,45%,0.5); margin: -1px; border-bottom: none; border-top-left-radius: 5px; border-top-right-radius: 5px; } .CodeRay .insert .eyecatcher { background-color: hsla(120,100%,50%,0.2); border: 1px solid hsla(120,100%,25%,0.5); margin: -1px; border-top: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .CodeRay .insert .insert { color: #0c0; background:transparent; font-weight:bold } .CodeRay .delete .delete { color: #c00; background:transparent; font-weight:bold } .CodeRay .change .change { color: #88f } .CodeRay .head .head { color: #f4f } .CodeRay { border: none; } </style> </head> <body> <table class="CodeRay"><tr> <td class="line-numbers"><pre><a href="#n1" name="n1">1</a> <a href="#n2" name="n2">2</a> <a href="#n3" name="n3">3</a> <a href="#n4" name="n4">4</a> <a href="#n5" name="n5">5</a> <a href="#n6" name="n6">6</a> <a href="#n7" name="n7">7</a> <a href="#n8" name="n8">8</a> <a href="#n9" name="n9">9</a> <strong><a href="#n10" name="n10">10</a></strong> <a href="#n11" name="n11">11</a> <a href="#n12" name="n12">12</a> <a href="#n13" name="n13">13</a> <a href="#n14" name="n14">14</a> <a href="#n15" name="n15">15</a> <a href="#n16" name="n16">16</a> <a href="#n17" name="n17">17</a> <a href="#n18" name="n18">18</a> <a href="#n19" name="n19">19</a> <strong><a href="#n20" name="n20">20</a></strong> <a href="#n21" name="n21">21</a> <a href="#n22" name="n22">22</a> <a href="#n23" name="n23">23</a> <a href="#n24" name="n24">24</a> <a href="#n25" name="n25">25</a> <a href="#n26" name="n26">26</a> <a href="#n27" name="n27">27</a> <a href="#n28" name="n28">28</a> <a href="#n29" name="n29">29</a> <strong><a href="#n30" name="n30">30</a></strong> <a href="#n31" name="n31">31</a> <a href="#n32" name="n32">32</a> <a href="#n33" name="n33">33</a> <a href="#n34" name="n34">34</a> <a href="#n35" name="n35">35</a> <a href="#n36" name="n36">36</a> <a href="#n37" name="n37">37</a> <a href="#n38" name="n38">38</a> <a href="#n39" name="n39">39</a> <strong><a href="#n40" name="n40">40</a></strong> <a href="#n41" name="n41">41</a> <a href="#n42" name="n42">42</a> <a href="#n43" name="n43">43</a> <a href="#n44" name="n44">44</a> <a href="#n45" name="n45">45</a> <a href="#n46" name="n46">46</a> <a href="#n47" name="n47">47</a> <a href="#n48" name="n48">48</a> <a href="#n49" name="n49">49</a> <strong><a href="#n50" name="n50">50</a></strong> <a href="#n51" name="n51">51</a> <a href="#n52" name="n52">52</a> <a href="#n53" name="n53">53</a> <a href="#n54" name="n54">54</a> <a href="#n55" name="n55">55</a> <a href="#n56" name="n56">56</a> <a href="#n57" name="n57">57</a> <a href="#n58" name="n58">58</a> <a href="#n59" name="n59">59</a> <strong><a href="#n60" name="n60">60</a></strong> <a href="#n61" name="n61">61</a> <a href="#n62" name="n62">62</a> <a href="#n63" name="n63">63</a> <a href="#n64" name="n64">64</a> <a href="#n65" name="n65">65</a> <a href="#n66" name="n66">66</a> <a href="#n67" name="n67">67</a> <a href="#n68" name="n68">68</a> <a href="#n69" name="n69">69</a> <strong><a href="#n70" name="n70">70</a></strong> <a href="#n71" name="n71">71</a> <a href="#n72" name="n72">72</a> <a href="#n73" name="n73">73</a> <a href="#n74" name="n74">74</a> <a href="#n75" name="n75">75</a> <a href="#n76" name="n76">76</a> <a href="#n77" name="n77">77</a> <a href="#n78" name="n78">78</a> <a href="#n79" name="n79">79</a> <strong><a href="#n80" name="n80">80</a></strong> <a href="#n81" name="n81">81</a> <a href="#n82" name="n82">82</a> <a href="#n83" name="n83">83</a> <a href="#n84" name="n84">84</a> <a href="#n85" name="n85">85</a> <a href="#n86" name="n86">86</a> <a href="#n87" name="n87">87</a> <a href="#n88" name="n88">88</a> <a href="#n89" name="n89">89</a> <strong><a href="#n90" name="n90">90</a></strong> <a href="#n91" name="n91">91</a> <a href="#n92" name="n92">92</a> <a href="#n93" name="n93">93</a> <a href="#n94" name="n94">94</a> <a href="#n95" name="n95">95</a> <a href="#n96" name="n96">96</a> <a href="#n97" name="n97">97</a> <a href="#n98" name="n98">98</a> <a href="#n99" name="n99">99</a> <strong><a href="#n100" name="n100">100</a></strong> <a href="#n101" name="n101">101</a> <a href="#n102" name="n102">102</a> <a href="#n103" name="n103">103</a> <a href="#n104" name="n104">104</a> <a href="#n105" name="n105">105</a> <a href="#n106" name="n106">106</a> <a href="#n107" name="n107">107</a> <a href="#n108" name="n108">108</a> <a href="#n109" name="n109">109</a> <strong><a href="#n110" name="n110">110</a></strong> <a href="#n111" name="n111">111</a> <a href="#n112" name="n112">112</a> <a href="#n113" name="n113">113</a> <a href="#n114" name="n114">114</a> <a href="#n115" name="n115">115</a> <a href="#n116" name="n116">116</a> <a href="#n117" name="n117">117</a> <a href="#n118" name="n118">118</a> <a href="#n119" name="n119">119</a> <strong><a href="#n120" name="n120">120</a></strong> <a href="#n121" name="n121">121</a> <a href="#n122" name="n122">122</a> <a href="#n123" name="n123">123</a> <a href="#n124" name="n124">124</a> <a href="#n125" name="n125">125</a> <a href="#n126" name="n126">126</a> <a href="#n127" name="n127">127</a> <a href="#n128" name="n128">128</a> <a href="#n129" name="n129">129</a> <strong><a href="#n130" name="n130">130</a></strong> <a href="#n131" name="n131">131</a> </pre></td> <td class="code"><pre><span class="comment">/* DreemGL is a collaboration between Teeming Society &amp; Samsung Electronics, sponsored by Samsung and others. Copyright 2015-2016 Teeming Society. Licensed under the Apache License, Version 2.0 (the &quot;License&quot;); 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 &quot;AS IS&quot; 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.*/</span> define.<span class="reserved">class</span>(<span class="string"><span class="delimiter">'</span><span class="content">$server/composition</span><span class="delimiter">'</span></span>, <span class="keyword">function</span>(<span class="predefined">$ui$</span>, screen, cadgrid, view, icon, label, <span class="predefined">$sensors$</span>, gyroscope, accelerometer, light, proximity){ <span class="local-variable">this</span>.<span class="function">render</span> = <span class="keyword">function</span>() { <span class="keyword">return</span> [ screen({<span class="key">name</span>:<span class="string"><span class="delimiter">'</span><span class="content">default</span><span class="delimiter">'</span></span>, <span class="key">clearcolor</span>:vec4(<span class="string"><span class="delimiter">'</span><span class="content">black</span><span class="delimiter">'</span></span>)}, proximity({ <span class="key">name</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">prox</span><span class="delimiter">&quot;</span></span>, <span class="function">onmin</span>:<span class="keyword">function</span>(ev,v,o) { o.find(<span class="string"><span class="delimiter">&quot;</span><span class="content">min</span><span class="delimiter">&quot;</span></span>).text = v; }, <span class="function">onmax</span>:<span class="keyword">function</span>(ev,v,o) { o.find(<span class="string"><span class="delimiter">&quot;</span><span class="content">max</span><span class="delimiter">&quot;</span></span>).text = v; }, <span class="function">ondistance</span>:<span class="keyword">function</span>(ev,v,o) { o.find(<span class="string"><span class="delimiter">&quot;</span><span class="content">distance</span><span class="delimiter">&quot;</span></span>).text = v; }, <span class="function">onsupported</span>:<span class="keyword">function</span>(ev,v,o) { o.find(<span class="string"><span class="delimiter">&quot;</span><span class="content">proxsearching</span><span class="delimiter">&quot;</span></span>).visible = <span class="predefined-constant">false</span>; o.find(<span class="string"><span class="delimiter">&quot;</span><span class="content">proxout</span><span class="delimiter">&quot;</span></span>).visible = <span class="predefined-constant">true</span>; } }), light({ <span class="key">name</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">lights</span><span class="delimiter">&quot;</span></span>, <span class="function">onluminosity</span>:<span class="keyword">function</span>(ev,v,o) { o.find(<span class="string"><span class="delimiter">&quot;</span><span class="content">lux</span><span class="delimiter">&quot;</span></span>).text = v; }, <span class="function">onsupported</span>:<span class="keyword">function</span>(ev,v,o) { o.find(<span class="string"><span class="delimiter">&quot;</span><span class="content">lightsearching</span><span class="delimiter">&quot;</span></span>).visible = <span class="predefined-constant">false</span>; o.find(<span class="string"><span class="delimiter">&quot;</span><span class="content">lightout</span><span class="delimiter">&quot;</span></span>).visible = <span class="predefined-constant">true</span>; } }), gyroscope({ <span class="key">name</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">gyro</span><span class="delimiter">&quot;</span></span>, <span class="function">onorientation</span>:<span class="keyword">function</span>(ev,v,o) { o.find(<span class="string"><span class="delimiter">&quot;</span><span class="content">alpha</span><span class="delimiter">&quot;</span></span>).text = v[<span class="integer">0</span>]; o.find(<span class="string"><span class="delimiter">&quot;</span><span class="content">beta</span><span class="delimiter">&quot;</span></span>).text = v[<span class="integer">1</span>]; o.find(<span class="string"><span class="delimiter">&quot;</span><span class="content">gamma</span><span class="delimiter">&quot;</span></span>).text = v[<span class="integer">2</span>]; }, <span class="function">oncompass</span>:<span class="keyword">function</span>(ev,v,o) { o.find(<span class="string"><span class="delimiter">&quot;</span><span class="content">compass</span><span class="delimiter">&quot;</span></span>).text = v; }, <span class="function">onaccuracy</span>:<span class="keyword">function</span>(ev,v,o) { o.find(<span class="string"><span class="delimiter">&quot;</span><span class="content">accuracy</span><span class="delimiter">&quot;</span></span>).text = v; }, <span class="function">onsupported</span>:<span class="keyword">function</span>(ev,v,o) { o.find(<span class="string"><span class="delimiter">&quot;</span><span class="content">gyrosearching</span><span class="delimiter">&quot;</span></span>).visible = <span class="predefined-constant">false</span>; o.find(<span class="string"><span class="delimiter">&quot;</span><span class="content">gyrout</span><span class="delimiter">&quot;</span></span>).visible = <span class="predefined-constant">true</span>; } }), accelerometer({ <span class="key">name</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">accel</span><span class="delimiter">&quot;</span></span>, <span class="function">onacceleration</span>:<span class="keyword">function</span>(ev,v,o) { o.find(<span class="string"><span class="delimiter">&quot;</span><span class="content">x</span><span class="delimiter">&quot;</span></span>).text = v[<span class="integer">0</span>]; o.find(<span class="string"><span class="delimiter">&quot;</span><span class="content">y</span><span class="delimiter">&quot;</span></span>).text = v[<span class="integer">1</span>]; o.find(<span class="string"><span class="delimiter">&quot;</span><span class="content">z</span><span class="delimiter">&quot;</span></span>).text = v[<span class="integer">2</span>]; }, <span class="function">onsupported</span>:<span class="keyword">function</span>(ev,v,o) { o.find(<span class="string"><span class="delimiter">&quot;</span><span class="content">accelsearching</span><span class="delimiter">&quot;</span></span>).visible = <span class="predefined-constant">false</span>; o.find(<span class="string"><span class="delimiter">&quot;</span><span class="content">accelout</span><span class="delimiter">&quot;</span></span>).visible = <span class="predefined-constant">true</span>; } }), cadgrid({ <span class="key">flex</span>:<span class="integer">1</span>, <span class="key">flexdirection</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">column</span><span class="delimiter">&quot;</span></span>, <span class="key">justifycontent</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">flex-start</span><span class="delimiter">&quot;</span></span>, <span class="key">alignitems</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">flex-start</span><span class="delimiter">&quot;</span></span> }, label({<span class="key">marginbottom</span>:<span class="integer">10</span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">Open this example on a device with motion,</span><span class="char">\n</span><span class="content">orientation or ambient light sensors to see</span><span class="char">\n</span><span class="content">readings below:</span><span class="delimiter">&quot;</span></span>, <span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">#333</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">14</span>}), label({<span class="key">name</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">gyrosearching</span><span class="delimiter">&quot;</span></span>, <span class="key">visible</span>:<span class="predefined-constant">true</span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">Searching for gyroscope ...</span><span class="delimiter">&quot;</span></span>, <span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">#888</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">10</span>, <span class="key">margintop</span>:<span class="integer">10</span>}), view({ <span class="key">name</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">gyrout</span><span class="delimiter">&quot;</span></span>, <span class="key">visible</span>:<span class="predefined-constant">false</span>, <span class="key">flexdirection</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">column</span><span class="delimiter">&quot;</span></span>, <span class="key">justifycontent</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">space-around</span><span class="delimiter">&quot;</span></span>, <span class="key">alignitems</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">center</span><span class="delimiter">&quot;</span></span>, <span class="key">margintop</span>:<span class="integer">10</span> }, label({<span class="key">marginbottom</span>:<span class="integer">10</span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">Move your device to see</span><span class="char">\n</span><span class="content">gyroscope values change:</span><span class="delimiter">&quot;</span></span>, <span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">#666</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">12</span>, <span class="key">margintop</span>:<span class="integer">10</span>}), view({<span class="key">padding</span>:<span class="integer">5</span>}, label({<span class="key">marginright</span>:<span class="integer">10</span>, <span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">red</span><span class="delimiter">&quot;</span></span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">compass</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">12</span>}), label({<span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">blue</span><span class="delimiter">&quot;</span></span>, <span class="key">name</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">compass</span><span class="delimiter">&quot;</span></span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">0</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">12</span>}) ), view({<span class="key">padding</span>:<span class="integer">5</span>}, label({<span class="key">marginright</span>:<span class="integer">10</span>, <span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">red</span><span class="delimiter">&quot;</span></span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">accuracy</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">12</span>}), label({<span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">blue</span><span class="delimiter">&quot;</span></span>, <span class="key">name</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">accuracy</span><span class="delimiter">&quot;</span></span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">0</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">12</span>}) ), view({<span class="key">padding</span>:<span class="integer">5</span>}, label({<span class="key">marginright</span>:<span class="integer">10</span>, <span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">red</span><span class="delimiter">&quot;</span></span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">alpha</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">12</span>}), label({<span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">blue</span><span class="delimiter">&quot;</span></span>, <span class="key">name</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">alpha</span><span class="delimiter">&quot;</span></span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">0</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">12</span>}) ), view({<span class="key">padding</span>:<span class="integer">5</span>}, label({<span class="key">marginright</span>:<span class="integer">10</span>, <span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">red</span><span class="delimiter">&quot;</span></span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">beta</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">12</span>}), label({<span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">blue</span><span class="delimiter">&quot;</span></span>, <span class="key">name</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">beta</span><span class="delimiter">&quot;</span></span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">0</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">12</span>}) ), view({<span class="key">padding</span>:<span class="integer">5</span>}, label({<span class="key">marginright</span>:<span class="integer">10</span>, <span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">red</span><span class="delimiter">&quot;</span></span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">gamma</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">12</span>}), label({<span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">blue</span><span class="delimiter">&quot;</span></span>, <span class="key">name</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">gamma</span><span class="delimiter">&quot;</span></span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">0</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">12</span>}) ) ), label({<span class="key">name</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">accelsearching</span><span class="delimiter">&quot;</span></span>, <span class="key">visible</span>:<span class="predefined-constant">true</span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">Searching for accelerometer ...</span><span class="delimiter">&quot;</span></span>, <span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">#888</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">10</span>, <span class="key">margintop</span>:<span class="integer">10</span>}), view({ <span class="key">name</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">accelout</span><span class="delimiter">&quot;</span></span>, <span class="key">visible</span>:<span class="predefined-constant">false</span>, <span class="key">flexdirection</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">column</span><span class="delimiter">&quot;</span></span>, <span class="key">justifycontent</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">space-around</span><span class="delimiter">&quot;</span></span>, <span class="key">alignitems</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">center</span><span class="delimiter">&quot;</span></span>, <span class="key">margintop</span>:<span class="integer">10</span> }, label({<span class="key">marginbottom</span>:<span class="integer">10</span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">Move your device to see</span><span class="char">\n</span><span class="content">accelerometer values change:</span><span class="delimiter">&quot;</span></span>, <span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">#666</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">12</span>, <span class="key">margintop</span>:<span class="integer">10</span>}), view({<span class="key">padding</span>:<span class="integer">2</span>}, label({<span class="key">marginright</span>:<span class="integer">10</span>, <span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">red</span><span class="delimiter">&quot;</span></span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">x</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">12</span>}), label({<span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">blue</span><span class="delimiter">&quot;</span></span>, <span class="key">name</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">x</span><span class="delimiter">&quot;</span></span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">0</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">12</span>}) ), view({<span class="key">padding</span>:<span class="integer">2</span>}, label({<span class="key">marginright</span>:<span class="integer">10</span>, <span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">red</span><span class="delimiter">&quot;</span></span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">y</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">12</span>}), label({<span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">blue</span><span class="delimiter">&quot;</span></span>, <span class="key">name</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">y</span><span class="delimiter">&quot;</span></span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">0</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">12</span>}) ), view({<span class="key">padding</span>:<span class="integer">2</span>}, label({<span class="key">marginright</span>:<span class="integer">10</span>, <span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">red</span><span class="delimiter">&quot;</span></span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">z</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">12</span>}), label({<span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">blue</span><span class="delimiter">&quot;</span></span>, <span class="key">name</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">z</span><span class="delimiter">&quot;</span></span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">0</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">12</span>}) ) ), label({<span class="key">name</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">lightsearching</span><span class="delimiter">&quot;</span></span>, <span class="key">visible</span>:<span class="predefined-constant">true</span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">Searching for ambient light sensor ...</span><span class="delimiter">&quot;</span></span>, <span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">#888</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">10</span>, <span class="key">margintop</span>:<span class="integer">10</span>}), view({ <span class="key">name</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">lightout</span><span class="delimiter">&quot;</span></span>, <span class="key">visible</span>:<span class="predefined-constant">false</span>, <span class="key">flexdirection</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">column</span><span class="delimiter">&quot;</span></span>, <span class="key">justifycontent</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">space-around</span><span class="delimiter">&quot;</span></span>, <span class="key">alignitems</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">center</span><span class="delimiter">&quot;</span></span> }, label({<span class="key">marginbottom</span>:<span class="integer">10</span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">Move your device into</span><span class="char">\n</span><span class="content">different light conditions to see</span><span class="char">\n</span><span class="content">luminosity values change:</span><span class="delimiter">&quot;</span></span>, <span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">#666</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">12</span>, <span class="key">margintop</span>:<span class="integer">10</span>}), view({<span class="key">padding</span>:<span class="integer">5</span>}, label({<span class="key">marginright</span>:<span class="integer">10</span>, <span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">red</span><span class="delimiter">&quot;</span></span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">luminosity</span><span class="delimiter">&quot;</span></span>}), label({<span class="key">fgcolor</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">blue</span><span class="delimiter">&quot;</span></span>, <span class="key">name</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">lux</span><span class="delimiter">&quot;</span></span>, <span class="key">text</span>:<span class="string"><span class="delimiter">&quot;</span><span class="content">0</span><span class="delimiter">&quot;</span></span>, <span class="key">fontsize</span>:<span class="integer">12</span>}) ) ) <span class="comment">//,</span> <span class="comment">//label({name:&quot;proxsearching&quot;, visible:true, text:&quot;Searching objects in proximity ...&quot;, fgcolor:&quot;#888&quot;, fontsize:20}),</span> <span class="comment">//view({ name:&quot;proxout&quot;,</span> <span class="comment">// visible:false,</span> <span class="comment">// flexdirection:&quot;column&quot;,</span> <span class="comment">// justifycontent:&quot;space-around&quot;,</span> <span class="comment">// alignitems:&quot;center&quot;,</span> <span class="comment">// margintop:10</span> <span class="comment">// },</span> <span class="comment">// label({marginbottom:10, text:&quot;Move your device object to change proximity:&quot;, fgcolor:&quot;#666&quot;, fontsize:12}),</span> <span class="comment">// view({padding:2}, label({marginright:10, fgcolor:&quot;red&quot;, text:&quot;min&quot;, fontsize:12}), label({fgcolor:&quot;blue&quot;, name:&quot;min&quot;, text:&quot;0&quot;, fontsize:12}) ),</span> <span class="comment">// view({padding:2}, label({marginright:10, fgcolor:&quot;red&quot;, text:&quot;max&quot;, fontsize:12}), label({fgcolor:&quot;blue&quot;, name:&quot;max&quot;, text:&quot;0&quot;, fontsize:12}) ),</span> <span class="comment">// view({padding:2}, label({marginright:10, fgcolor:&quot;red&quot;, text:&quot;distance&quot;, fontsize:12}), label({fgcolor:&quot;blue&quot;, name:&quot;distance&quot;, text:&quot;0&quot;, fontsize:12}) )</span> <span class="comment">//)</span> ) ) ] } }); </pre></td> </tr></table> </body> </html>