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
991 lines (915 loc) • 52.2 kB
HTML
<!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>
<a href="#n132" name="n132">132</a>
<a href="#n133" name="n133">133</a>
<a href="#n134" name="n134">134</a>
<a href="#n135" name="n135">135</a>
<a href="#n136" name="n136">136</a>
<a href="#n137" name="n137">137</a>
<a href="#n138" name="n138">138</a>
<a href="#n139" name="n139">139</a>
<strong><a href="#n140" name="n140">140</a></strong>
<a href="#n141" name="n141">141</a>
<a href="#n142" name="n142">142</a>
<a href="#n143" name="n143">143</a>
<a href="#n144" name="n144">144</a>
<a href="#n145" name="n145">145</a>
<a href="#n146" name="n146">146</a>
<a href="#n147" name="n147">147</a>
<a href="#n148" name="n148">148</a>
<a href="#n149" name="n149">149</a>
<strong><a href="#n150" name="n150">150</a></strong>
<a href="#n151" name="n151">151</a>
<a href="#n152" name="n152">152</a>
<a href="#n153" name="n153">153</a>
<a href="#n154" name="n154">154</a>
<a href="#n155" name="n155">155</a>
<a href="#n156" name="n156">156</a>
<a href="#n157" name="n157">157</a>
<a href="#n158" name="n158">158</a>
<a href="#n159" name="n159">159</a>
<strong><a href="#n160" name="n160">160</a></strong>
<a href="#n161" name="n161">161</a>
<a href="#n162" name="n162">162</a>
<a href="#n163" name="n163">163</a>
<a href="#n164" name="n164">164</a>
<a href="#n165" name="n165">165</a>
<a href="#n166" name="n166">166</a>
<a href="#n167" name="n167">167</a>
<a href="#n168" name="n168">168</a>
<a href="#n169" name="n169">169</a>
<strong><a href="#n170" name="n170">170</a></strong>
<a href="#n171" name="n171">171</a>
<a href="#n172" name="n172">172</a>
<a href="#n173" name="n173">173</a>
<a href="#n174" name="n174">174</a>
<a href="#n175" name="n175">175</a>
<a href="#n176" name="n176">176</a>
<a href="#n177" name="n177">177</a>
<a href="#n178" name="n178">178</a>
<a href="#n179" name="n179">179</a>
<strong><a href="#n180" name="n180">180</a></strong>
<a href="#n181" name="n181">181</a>
<a href="#n182" name="n182">182</a>
<a href="#n183" name="n183">183</a>
<a href="#n184" name="n184">184</a>
<a href="#n185" name="n185">185</a>
<a href="#n186" name="n186">186</a>
<a href="#n187" name="n187">187</a>
<a href="#n188" name="n188">188</a>
<a href="#n189" name="n189">189</a>
<strong><a href="#n190" name="n190">190</a></strong>
<a href="#n191" name="n191">191</a>
<a href="#n192" name="n192">192</a>
<a href="#n193" name="n193">193</a>
<a href="#n194" name="n194">194</a>
<a href="#n195" name="n195">195</a>
<a href="#n196" name="n196">196</a>
<a href="#n197" name="n197">197</a>
<a href="#n198" name="n198">198</a>
<a href="#n199" name="n199">199</a>
<strong><a href="#n200" name="n200">200</a></strong>
<a href="#n201" name="n201">201</a>
<a href="#n202" name="n202">202</a>
<a href="#n203" name="n203">203</a>
<a href="#n204" name="n204">204</a>
<a href="#n205" name="n205">205</a>
<a href="#n206" name="n206">206</a>
<a href="#n207" name="n207">207</a>
<a href="#n208" name="n208">208</a>
<a href="#n209" name="n209">209</a>
<strong><a href="#n210" name="n210">210</a></strong>
<a href="#n211" name="n211">211</a>
<a href="#n212" name="n212">212</a>
<a href="#n213" name="n213">213</a>
<a href="#n214" name="n214">214</a>
<a href="#n215" name="n215">215</a>
<a href="#n216" name="n216">216</a>
<a href="#n217" name="n217">217</a>
<a href="#n218" name="n218">218</a>
<a href="#n219" name="n219">219</a>
<strong><a href="#n220" name="n220">220</a></strong>
<a href="#n221" name="n221">221</a>
<a href="#n222" name="n222">222</a>
<a href="#n223" name="n223">223</a>
<a href="#n224" name="n224">224</a>
<a href="#n225" name="n225">225</a>
<a href="#n226" name="n226">226</a>
<a href="#n227" name="n227">227</a>
<a href="#n228" name="n228">228</a>
<a href="#n229" name="n229">229</a>
<strong><a href="#n230" name="n230">230</a></strong>
<a href="#n231" name="n231">231</a>
<a href="#n232" name="n232">232</a>
<a href="#n233" name="n233">233</a>
<a href="#n234" name="n234">234</a>
<a href="#n235" name="n235">235</a>
<a href="#n236" name="n236">236</a>
<a href="#n237" name="n237">237</a>
<a href="#n238" name="n238">238</a>
<a href="#n239" name="n239">239</a>
<strong><a href="#n240" name="n240">240</a></strong>
<a href="#n241" name="n241">241</a>
<a href="#n242" name="n242">242</a>
<a href="#n243" name="n243">243</a>
<a href="#n244" name="n244">244</a>
<a href="#n245" name="n245">245</a>
<a href="#n246" name="n246">246</a>
<a href="#n247" name="n247">247</a>
<a href="#n248" name="n248">248</a>
<a href="#n249" name="n249">249</a>
<strong><a href="#n250" name="n250">250</a></strong>
<a href="#n251" name="n251">251</a>
<a href="#n252" name="n252">252</a>
<a href="#n253" name="n253">253</a>
<a href="#n254" name="n254">254</a>
<a href="#n255" name="n255">255</a>
<a href="#n256" name="n256">256</a>
<a href="#n257" name="n257">257</a>
<a href="#n258" name="n258">258</a>
<a href="#n259" name="n259">259</a>
<strong><a href="#n260" name="n260">260</a></strong>
<a href="#n261" name="n261">261</a>
<a href="#n262" name="n262">262</a>
<a href="#n263" name="n263">263</a>
<a href="#n264" name="n264">264</a>
<a href="#n265" name="n265">265</a>
<a href="#n266" name="n266">266</a>
<a href="#n267" name="n267">267</a>
<a href="#n268" name="n268">268</a>
<a href="#n269" name="n269">269</a>
<strong><a href="#n270" name="n270">270</a></strong>
<a href="#n271" name="n271">271</a>
<a href="#n272" name="n272">272</a>
<a href="#n273" name="n273">273</a>
<a href="#n274" name="n274">274</a>
<a href="#n275" name="n275">275</a>
<a href="#n276" name="n276">276</a>
<a href="#n277" name="n277">277</a>
<a href="#n278" name="n278">278</a>
<a href="#n279" name="n279">279</a>
<strong><a href="#n280" name="n280">280</a></strong>
<a href="#n281" name="n281">281</a>
<a href="#n282" name="n282">282</a>
<a href="#n283" name="n283">283</a>
<a href="#n284" name="n284">284</a>
<a href="#n285" name="n285">285</a>
<a href="#n286" name="n286">286</a>
<a href="#n287" name="n287">287</a>
<a href="#n288" name="n288">288</a>
<a href="#n289" name="n289">289</a>
<strong><a href="#n290" name="n290">290</a></strong>
<a href="#n291" name="n291">291</a>
<a href="#n292" name="n292">292</a>
<a href="#n293" name="n293">293</a>
<a href="#n294" name="n294">294</a>
<a href="#n295" name="n295">295</a>
<a href="#n296" name="n296">296</a>
<a href="#n297" name="n297">297</a>
<a href="#n298" name="n298">298</a>
<a href="#n299" name="n299">299</a>
<strong><a href="#n300" name="n300">300</a></strong>
<a href="#n301" name="n301">301</a>
<a href="#n302" name="n302">302</a>
<a href="#n303" name="n303">303</a>
<a href="#n304" name="n304">304</a>
<a href="#n305" name="n305">305</a>
<a href="#n306" name="n306">306</a>
<a href="#n307" name="n307">307</a>
<a href="#n308" name="n308">308</a>
<a href="#n309" name="n309">309</a>
<strong><a href="#n310" name="n310">310</a></strong>
<a href="#n311" name="n311">311</a>
<a href="#n312" name="n312">312</a>
<a href="#n313" name="n313">313</a>
<a href="#n314" name="n314">314</a>
<a href="#n315" name="n315">315</a>
<a href="#n316" name="n316">316</a>
<a href="#n317" name="n317">317</a>
<a href="#n318" name="n318">318</a>
<a href="#n319" name="n319">319</a>
<strong><a href="#n320" name="n320">320</a></strong>
<a href="#n321" name="n321">321</a>
<a href="#n322" name="n322">322</a>
<a href="#n323" name="n323">323</a>
<a href="#n324" name="n324">324</a>
<a href="#n325" name="n325">325</a>
<a href="#n326" name="n326">326</a>
<a href="#n327" name="n327">327</a>
<a href="#n328" name="n328">328</a>
<a href="#n329" name="n329">329</a>
<strong><a href="#n330" name="n330">330</a></strong>
<a href="#n331" name="n331">331</a>
<a href="#n332" name="n332">332</a>
<a href="#n333" name="n333">333</a>
<a href="#n334" name="n334">334</a>
<a href="#n335" name="n335">335</a>
<a href="#n336" name="n336">336</a>
<a href="#n337" name="n337">337</a>
<a href="#n338" name="n338">338</a>
<a href="#n339" name="n339">339</a>
<strong><a href="#n340" name="n340">340</a></strong>
<a href="#n341" name="n341">341</a>
<a href="#n342" name="n342">342</a>
<a href="#n343" name="n343">343</a>
<a href="#n344" name="n344">344</a>
<a href="#n345" name="n345">345</a>
<a href="#n346" name="n346">346</a>
<a href="#n347" name="n347">347</a>
<a href="#n348" name="n348">348</a>
<a href="#n349" name="n349">349</a>
<strong><a href="#n350" name="n350">350</a></strong>
<a href="#n351" name="n351">351</a>
<a href="#n352" name="n352">352</a>
<a href="#n353" name="n353">353</a>
<a href="#n354" name="n354">354</a>
<a href="#n355" name="n355">355</a>
<a href="#n356" name="n356">356</a>
<a href="#n357" name="n357">357</a>
<a href="#n358" name="n358">358</a>
<a href="#n359" name="n359">359</a>
<strong><a href="#n360" name="n360">360</a></strong>
<a href="#n361" name="n361">361</a>
<a href="#n362" name="n362">362</a>
<a href="#n363" name="n363">363</a>
<a href="#n364" name="n364">364</a>
<a href="#n365" name="n365">365</a>
<a href="#n366" name="n366">366</a>
<a href="#n367" name="n367">367</a>
<a href="#n368" name="n368">368</a>
<a href="#n369" name="n369">369</a>
<strong><a href="#n370" name="n370">370</a></strong>
<a href="#n371" name="n371">371</a>
<a href="#n372" name="n372">372</a>
<a href="#n373" name="n373">373</a>
<a href="#n374" name="n374">374</a>
<a href="#n375" name="n375">375</a>
<a href="#n376" name="n376">376</a>
<a href="#n377" name="n377">377</a>
<a href="#n378" name="n378">378</a>
<a href="#n379" name="n379">379</a>
<strong><a href="#n380" name="n380">380</a></strong>
<a href="#n381" name="n381">381</a>
<a href="#n382" name="n382">382</a>
<a href="#n383" name="n383">383</a>
<a href="#n384" name="n384">384</a>
<a href="#n385" name="n385">385</a>
<a href="#n386" name="n386">386</a>
<a href="#n387" name="n387">387</a>
<a href="#n388" name="n388">388</a>
<a href="#n389" name="n389">389</a>
<strong><a href="#n390" name="n390">390</a></strong>
<a href="#n391" name="n391">391</a>
<a href="#n392" name="n392">392</a>
<a href="#n393" name="n393">393</a>
<a href="#n394" name="n394">394</a>
<a href="#n395" name="n395">395</a>
<a href="#n396" name="n396">396</a>
<a href="#n397" name="n397">397</a>
<a href="#n398" name="n398">398</a>
<a href="#n399" name="n399">399</a>
<strong><a href="#n400" name="n400">400</a></strong>
<a href="#n401" name="n401">401</a>
<a href="#n402" name="n402">402</a>
<a href="#n403" name="n403">403</a>
<a href="#n404" name="n404">404</a>
<a href="#n405" name="n405">405</a>
<a href="#n406" name="n406">406</a>
<a href="#n407" name="n407">407</a>
<a href="#n408" name="n408">408</a>
<a href="#n409" name="n409">409</a>
<strong><a href="#n410" name="n410">410</a></strong>
<a href="#n411" name="n411">411</a>
<a href="#n412" name="n412">412</a>
<a href="#n413" name="n413">413</a>
<a href="#n414" name="n414">414</a>
<a href="#n415" name="n415">415</a>
<a href="#n416" name="n416">416</a>
<a href="#n417" name="n417">417</a>
<a href="#n418" name="n418">418</a>
<a href="#n419" name="n419">419</a>
<strong><a href="#n420" name="n420">420</a></strong>
<a href="#n421" name="n421">421</a>
<a href="#n422" name="n422">422</a>
<a href="#n423" name="n423">423</a>
<a href="#n424" name="n424">424</a>
<a href="#n425" name="n425">425</a>
<a href="#n426" name="n426">426</a>
<a href="#n427" name="n427">427</a>
<a href="#n428" name="n428">428</a>
<a href="#n429" name="n429">429</a>
<strong><a href="#n430" name="n430">430</a></strong>
<a href="#n431" name="n431">431</a>
<a href="#n432" name="n432">432</a>
<a href="#n433" name="n433">433</a>
<a href="#n434" name="n434">434</a>
<a href="#n435" name="n435">435</a>
<a href="#n436" name="n436">436</a>
<a href="#n437" name="n437">437</a>
<a href="#n438" name="n438">438</a>
</pre></td>
<td class="code"><pre><span class="comment">/* DreemGL is a collaboration between Teeming Society & Samsung Electronics, sponsored by Samsung and others.
Copyright 2015-2016 Teeming Society. Licensed under the Apache License, Version 2.0 (the "License"); You may not use this file except in compliance with the License.
You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and limitations under the License.*/</span>
<span class="comment">/**
* @class DaliApi
* Top-level, static, class to manage the dali stage.
*/</span>
define.<span class="reserved">class</span>(<span class="keyword">function</span>(exports){
<span class="keyword">var</span> DaliApi = exports
<span class="comment">/**
* @property dali
* static dali object to access dali api.
*/</span>
Object.defineProperty(DaliApi, <span class="string"><span class="delimiter">'</span><span class="content">dali</span><span class="delimiter">'</span></span>, {
<span class="comment">// Internally, the dalimodule is stored in global</span>
<span class="function">get</span>: <span class="keyword">function</span>() {
<span class="keyword">if</span> (!global.dalimodule) {
console.log(<span class="string"><span class="delimiter">'</span><span class="content">DaliApi: Dali has not been initialized</span><span class="delimiter">'</span></span>);
}
<span class="keyword">return</span> global.dalimodule;
}
,<span class="function">set</span>: <span class="keyword">function</span>(v) {
<span class="keyword">if</span> (global.dalimodule) {
console.log(<span class="string"><span class="delimiter">'</span><span class="content">DaliApi: Dali has already been initialized</span><span class="delimiter">'</span></span>);
}
global.dalimodule = v;
}
});
<span class="comment">// Set emitcode to true to emit dali code to the console. These lines</span>
<span class="comment">// are preceeded with DALICODE to make it easier to extract into a file.</span>
<span class="comment">// The -dumpprog command-line option codes this value</span>
DaliApi.emitcode = global.emitcode;
<span class="comment">// Create all actors on a layer to ignore depth test.</span>
<span class="comment">// (From Nick: When using this mode any ordering would be with respect to</span>
<span class="comment">// depthIndex property of Renderers.)</span>
<span class="comment">// Changed to global.rootlayer</span>
<span class="comment">// DaliApi.rootlayer = undefined;</span>
<span class="comment">// The current layer to use when adding actors. Set by setLayer(). If</span>
<span class="comment">// currentlayer is never set, the root layer (DaliApi.rootlayer) is used.</span>
<span class="comment">// Actors are added in order so the normal order of execution is:</span>
<span class="comment">// - Create a DaliLayer object,</span>
<span class="comment">// - Call DaliApi.setLayer to make this layer the current layer</span>
<span class="comment">// - Add actors using DaliApi.addActor. This will use the current layer</span>
<span class="comment">// if none was specified.</span>
<span class="comment">// - Repeat the above process. You can reset the current layer by</span>
<span class="comment">// passing null to DaliApi.setLayer</span>
<span class="comment">// Changed to global.currentlayer</span>
<span class="comment">// DaliApi.currentlayer = undefined;</span>
<span class="comment">/**
* @method setLayer
* Static method to specify the layer to use when actors are added to the
* stage. Simple applications will never call this method because the
* default layer is sufficient.
* @param {object} layer DaliLayer object to use. If missing, the built-in
* root layer is used.
*/</span>
DaliApi.<span class="function">setLayer</span> = <span class="keyword">function</span>(layer) {
<span class="keyword">if</span> (!layer)
layer = global.rootlayer;
global.currentlayer = layer;
}
<span class="comment">/**
* @method addActor
* Static method to add an actor to the stage.
* In our usage, it will add the actor to the current layer. The second
* parameter is optional and specifies the DaliLayer object to use.
* @param {object} actor DaliActor object
* @param {object} layer DaliLayer object to use. If missing, the current
* layer is used.
*/</span>
DaliApi.<span class="function">addActor</span> = <span class="keyword">function</span>(actor, layer) {
<span class="keyword">if</span> (!layer)
layer = global.currentlayer;
layer.add(actor);
}
<span class="comment">/**
* @method initialize
* Static method to initialize and create the dali stage. This method is
* called when dali starts running.
* @param {Object} settings Initial settings:
* width Width of stage
* height Height of stage
* name Name of stage
* dalilib Path to dali lib (optional). If the path is
* missing, a fixed path is used.
* dumpprog Path of file to dump dali program to, or use
* stdout is no file is specified
*/</span>
DaliApi.<span class="function">initialize</span> = <span class="keyword">function</span>(settings) {
DaliLayer = require(<span class="string"><span class="delimiter">'</span><span class="content">./dali_layer</span><span class="delimiter">'</span></span>)
DaliApi.width = settings.width
DaliApi.height = settings.height
DaliApi.screenname = settings.name
DaliApi.dalilib = settings.dalilib || DaliApi.dalilib;
DaliApi.dumpprog = settings.dumpprog;
<span class="keyword">if</span> (DaliApi.dumpprog)
global.emitcode = DaliApi.dumpprog;
DaliApi.emitcode = global.emitcode;
<span class="keyword">var</span> window= {
<span class="key">x</span>:<span class="integer">0</span>,
<span class="key">y</span>:<span class="integer">0</span>,
<span class="key">width</span>:DaliApi.width,
<span class="key">height</span>: DaliApi.height,
<span class="key">transparent</span>: <span class="predefined-constant">false</span>,
<span class="key">name</span>: DaliApi.screenname
};
<span class="keyword">var</span> viewMode={
<span class="key"><span class="delimiter">'</span><span class="content">stereoscopic-mode</span><span class="delimiter">'</span></span>:<span class="string"><span class="delimiter">'</span><span class="content">mono</span><span class="delimiter">'</span></span>,
<span class="key"><span class="delimiter">'</span><span class="content">stereo-base</span><span class="delimiter">'</span></span>: <span class="integer">65</span>
};
<span class="keyword">var</span> options= {
<span class="key"><span class="delimiter">'</span><span class="content">window</span><span class="delimiter">'</span></span>: window,
<span class="key"><span class="delimiter">'</span><span class="content">view-mode</span><span class="delimiter">'</span></span>: viewMode,
}
<span class="keyword">if</span> (DaliApi.emitcode) {
console.log(<span class="string"><span class="delimiter">'</span><span class="content">DALICODE: var window= {x:0, y:0, width:</span><span class="delimiter">'</span></span> + DaliApi.width + <span class="string"><span class="delimiter">'</span><span class="content">, height:</span><span class="delimiter">'</span></span> + DaliApi.height + <span class="string"><span class="delimiter">'</span><span class="content">, transparent: false, name: </span><span class="char">\'</span><span class="delimiter">'</span></span> + DaliApi.screenname + <span class="string"><span class="delimiter">'</span><span class="char">\'</span><span class="content">};</span><span class="delimiter">'</span></span>);
console.log(<span class="string"><span class="delimiter">'</span><span class="content">DALICODE: var viewMode={</span><span class="char">\'</span><span class="content">stereoscopic-mode</span><span class="char">\'</span><span class="content">:</span><span class="char">\'</span><span class="content">mono</span><span class="char">\'</span><span class="content">, </span><span class="char">\'</span><span class="content">stereo-base</span><span class="char">\'</span><span class="content">: 65};</span><span class="delimiter">'</span></span>);
console.log(<span class="string"><span class="delimiter">'</span><span class="content">DALICODE: var options= {</span><span class="char">\'</span><span class="content">window</span><span class="char">\'</span><span class="content">: window, </span><span class="char">\'</span><span class="content">view-mode</span><span class="char">\'</span><span class="content">: viewMode}</span><span class="delimiter">'</span></span>);
console.log(<span class="string"><span class="delimiter">'</span><span class="content">DALICODE: var dali = require(</span><span class="char">\'</span><span class="delimiter">'</span></span> + DaliApi.dalilib + <span class="string"><span class="delimiter">'</span><span class="char">\'</span><span class="content">)(options);</span><span class="delimiter">'</span></span>);
}
<span class="keyword">try</span> {
<span class="comment">// Load the library and make available as DaliApi.dali</span>
<span class="comment">// console.log('LOADING', dalilib);</span>
<span class="keyword">var</span> dalimodule = define.require(DaliApi.dalilib)(options);
DaliApi.dali = dalimodule;
<span class="comment">// Create a top-level 2D layer to the stage.</span>
<span class="keyword">var</span> dali = DaliApi.dali;
global.rootlayer = global.currentlayer = <span class="keyword">new</span> DaliLayer(<span class="predefined-constant">null</span>, DaliApi.width, DaliApi.height);
dali.stage.add(global.rootlayer.dalilayer);
<span class="keyword">if</span> (DaliApi.emitcode) {
console.log(<span class="string"><span class="delimiter">'</span><span class="content">DALICODE: dali.stage.add(</span><span class="delimiter">'</span></span> + global.rootlayer.name() + <span class="string"><span class="delimiter">'</span><span class="content">);</span><span class="delimiter">'</span></span>);
}
}
<span class="keyword">catch</span> (e) {
console.error(<span class="string"><span class="delimiter">'</span><span class="content">Failed to load dalilib</span><span class="delimiter">'</span></span>, DaliApi.dalilib);
console.log(e.stack);
}
}
<span class="comment">/**
* @method createDaliObjects
* Static method to create dali objects on the specified object. Most
* objects, such as actor and geometry are attached to a view using
* createDaliActor(). Currently, only the shader object is attached to
* object.
* @param {object} obj Object to attach dali objects to. This should
* already contain an element dalishader. In webgl
* the object is an object created by gl.createProgram.
* In dali, a custom object is created in shaderdali.js
* to hold the compiled state of the shader. This object
* also holds an instance of DaliShader.
* @param {object} shader Instance with runtime values (ex. hardrect)
*/</span>
DaliApi.<span class="function">createDaliObjects</span> = <span class="keyword">function</span>(obj, shader) {
<span class="keyword">if</span> (!obj.dalishader) {
console.log(<span class="string"><span class="delimiter">'</span><span class="content">WARNING. createDaliObjects cannot find DaliShader</span><span class="delimiter">'</span></span>, Object.keys(obj));
}
obj.dreem_obj = shader;
}
<span class="comment">/**
* @method createDaliActor
* Static method to create dali.Actor object on the specified object,
* using dali geometries located in another object. A Material and Renderer
* are also created on the object.
* @param {object} obj Object to attach dali actor to. This is a view
* object.
* @param {object} shader Shader object containing compiled shader
* information (from createDaliObjects).
*/</span>
DaliApi.<span class="function">createDaliActor</span> = <span class="keyword">function</span>(obj, shader) {
DaliGeometry = require(<span class="string"><span class="delimiter">'</span><span class="content">./dali_geometry</span><span class="delimiter">'</span></span>)
DaliMaterial = require(<span class="string"><span class="delimiter">'</span><span class="content">./dali_material</span><span class="delimiter">'</span></span>)
DaliRenderer = require(<span class="string"><span class="delimiter">'</span><span class="content">./dali_renderer</span><span class="delimiter">'</span></span>)
DaliActor = require(<span class="string"><span class="delimiter">'</span><span class="content">./dali_actor</span><span class="delimiter">'</span></span>)
<span class="comment">// TODO: Re-use the geometry, unless we have a texture</span>
obj.daligeometry = <span class="keyword">new</span> DaliGeometry(obj.drawtype);
obj.daligeometry.addGeometry(shader.dreem_obj);
<span class="comment">//console.log('Calling DaliMaterial with shader = ', shader.object_type);</span>
obj.dalimaterial = <span class="keyword">new</span> DaliMaterial(shader.dalishader)
obj.dalirenderer = <span class="keyword">new</span> DaliRenderer(obj.daligeometry, obj.dalimaterial);
obj.daliactor = <span class="keyword">new</span> DaliActor(obj);
obj.daliactor.addRenderer(obj.dalirenderer);
}
<span class="comment">/**
* @method setBackgroundColor
* Static method to set the background color of the stage
* @param {object} color 4 element array of [r,g,b,a]
*/</span>
DaliApi.<span class="function">setBackgroundColor</span> = <span class="keyword">function</span>(color) {
<span class="comment">//TODO This is frequently set, although it often does not change. Cache?</span>
DaliApi.dali.stage.setBackgroundColor(color);
<span class="keyword">if</span> (DaliApi.emitcode) {
console.log(<span class="string"><span class="delimiter">'</span><span class="content">DALICODE: dali.stage.setBackgroundColor(</span><span class="delimiter">'</span></span> + JSON.stringify(color) + <span class="string"><span class="delimiter">'</span><span class="content">);</span><span class="delimiter">'</span></span>);
}
}
<span class="comment">/**
* @method daliBuffer
* Static. Build a Dali property buffer, given a value, and type.
* value can be an array or a single value, but the value is a float.
* A cache is maintained to reuse proper buffers. The cache key is a
* hash value of the dali.PropertyBuffer (see DaliApi.getHash).
* @param {Object} vals Value to use. Either a single value or an
* array can be specified.
* @param {Object} Format hash, suitable for dali.PropertyBuffer.
* The hash looks like {name : type}. See dali docs for dali.PropertyBuffer.
* @param {Number} nrecs The number of records, in the buffer.
* @param {Boolean} cache Set to true to re-use dali.PropertyBuffers.
* @return {Object} [dali.PropertyBuffer, id]. This is the same value stored
* in the cache DaliApi.BufferCache.
*/</span>
DaliApi.BufferId = <span class="integer">0</span>
DaliApi.BufferCache = {}; <span class="comment">// key: hash value: [Dali.PropertyBuffer, id]</span>
DaliApi.<span class="function">daliBuffer</span> = <span class="keyword">function</span>(vals, format, nrecs, cache) {
<span class="comment">//console.log('daliBuffer format', format, 'nrecs', nrecs, 'vals', vals.length);</span>
<span class="keyword">var</span> dali = DaliApi.dali;
<span class="comment">// Accept either an array or a single value</span>
<span class="keyword">var</span> data = vals.length ? vals : [vals];
<span class="comment">// console.trace('daliBuffer with', nrecs, 'items', 'length = ', data.length);</span>
<span class="comment">// Reuse an existing propertybuffer</span>
<span class="keyword">if</span> (cache) {
<span class="keyword">var</span> hash = DaliApi.getHash(vals);
<span class="keyword">if</span> (DaliApi.BufferCache[hash]) {
<span class="keyword">return</span> DaliApi.BufferCache[hash];
}
}
<span class="comment">// Create the dali.PropertyBuffer</span>
<span class="keyword">var</span> buffer = <span class="keyword">new</span> dali.PropertyBuffer(format, nrecs);
DaliApi.BufferId += <span class="integer">1</span>;
<span class="keyword">if</span> (DaliApi.emitcode) {
console.log(<span class="string"><span class="delimiter">'</span><span class="content">DALICODE: var buffer</span><span class="delimiter">'</span></span> + DaliApi.BufferId + <span class="string"><span class="delimiter">'</span><span class="content"> = new dali.PropertyBuffer(</span><span class="delimiter">'</span></span> + JSON.stringify(format) + <span class="string"><span class="delimiter">'</span><span class="content">, </span><span class="delimiter">'</span></span> + nrecs + <span class="string"><span class="delimiter">'</span><span class="content">)</span><span class="delimiter">'</span></span>);
}
<span class="comment">// Write data to the buffer</span>
<span class="comment">//console.log('numberItems', nrecs, data.length);</span>
DaliApi.writeDaliBuffer(buffer, DaliApi.BufferId, data);
<span class="keyword">var</span> ret = [buffer, DaliApi.BufferId];
<span class="keyword">if</span> (cache) {
DaliApi.BufferCache[hash] = ret;
}
<span class="keyword">return</span> ret;
}
<span class="comment">/**
* @method writeDaliBuffer
* Static. Write data to an existing dali.PropertyBuffer
* @param {Object} buffer dali.PropertyBuffer to write to.
* @param {Number} bufferid buffer index
* @param {Object} data An array of values to use.
* array can be specified.
*/</span>
DaliApi.<span class="function">writeDaliBuffer</span> = <span class="keyword">function</span>(buffer, bufferid, data) {
<span class="keyword">var</span> dali = DaliApi.dali;
<span class="keyword">var</span> dataArray = <span class="keyword">new</span> Float32Array(data.length);
dataArray.set(data);
buffer.setData(dataArray);
dataArray = <span class="predefined-constant">null</span>;
<span class="keyword">if</span> (DaliApi.emitcode) {
console.log(<span class="string"><span class="delimiter">'</span><span class="content">DALICODE: var data</span><span class="delimiter">'</span></span> + bufferid + <span class="string"><span class="delimiter">'</span><span class="content"> = </span><span class="delimiter">'</span></span> + JSON.stringify(data));
console.log(<span class="string"><span class="delimiter">'</span><span class="content">DALICODE: var dataArray</span><span class="delimiter">'</span></span> + bufferid + <span class="string"><span class="delimiter">'</span><span class="content"> = new Float32Array(data</span><span class="delimiter">'</span></span> + bufferid + <span class="string"><span class="delimiter">'</span><span class="content">.length);</span><span class="delimiter">'</span></span>);
console.log(<span class="string"><span class="delimiter">'</span><span class="content">DALICODE: dataArray</span><span class="delimiter">'</span></span> + bufferid + <span class="string"><span class="delimiter">'</span><span class="content">.set(data</span><span class="delimiter">'</span></span> + bufferid + <span class="string"><span class="delimiter">'</span><span class="content">);</span><span class="delimiter">'</span></span>);
console.log(<span class="string"><span class="delimiter">'</span><span class="content">DALICODE: buffer</span><span class="delimiter">'</span></span> + bufferid + <span class="string"><span class="delimiter">'</span><span class="content">.setData(dataArray</span><span class="delimiter">'</span></span> + bufferid + <span class="string"><span class="delimiter">'</span><span class="content">)</span><span class="delimiter">'</span></span>);
}
<span class="keyword">return</span> buffer;
}
<span class="comment">/**
* @method getArrayValue
* Given the name of a uniform object, retrieve the array of values from
* the dreemgl compiled structure. In webgl this extraction happens inline.
* NaN and null values are converted to 0 (dali will error on these)
* @param {Object} obj Compiled object
* @return {Object} single value or array, or undefined if name not found.
*/</span>
DaliApi.<span class="function">getArrayValue</span> = <span class="keyword">function</span>(obj) {
<span class="comment">// Detect, and return array data, if found. Array data is</span>
<span class="comment">// found in struct.slots.</span>
<span class="keyword">if</span> (obj && obj.struct && obj.struct.slots) {
<span class="keyword">if</span> (obj.struct.slots == <span class="integer">0</span>) {
<span class="keyword">return</span> <span class="string"><span class="delimiter">'</span><span class="delimiter">'</span></span>;
}
<span class="keyword">var</span> array = [];
<span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="integer">0</span>; i<obj.struct.slots; i++) {
<span class="keyword">var</span> val = obj[i];
<span class="keyword">if</span> (isNaN(val) || val === <span class="predefined-constant">null</span>)
val = <span class="integer">0</span>;
array.push(val);
}
<span class="keyword">return</span> array;
}
<span class="comment">// Dali doesn't like NaN values</span>
<span class="keyword">var</span> val = obj;
<span class="keyword">if</span> (isNaN(val) || val === <span class="predefined-constant">null</span>)
val = <span class="integer">0</span>;
<span class="keyword">return</span> val;
}
<span class="comment">/**
* @method getDaliPropertySize
* Static. Return the number of elements required for a dali property,
* given the dali constant.
* From Nick (via slack).
* @param {Number} format property constant
* @return {Number} Number of elements
*/</span>
DaliApi.<span class="function">getDaliPropertySize</span> = <span class="keyword">function</span>(format) {
<span class="keyword">var</span> dali = DaliApi.dali;
<span class="keyword">switch</span>( format ) {
<span class="keyword">case</span> dali.PROPERTY_VECTOR2:
<span class="keyword">return</span> <span class="integer">2</span>;
<span class="keyword">case</span> dali.PROPERTY_VECTOR3:
<span class="keyword">return</span> <span class="integer">3</span>;
<span class="keyword">case</span> dali.PROPERTY_VECTOR4:
<span class="keyword">return</span> <span class="integer">4</span>;
<span class="keyword">case</span> dali.PROPERTY_MATRIX3:
<span class="keyword">return</span> <span class="integer">9</span>;
<span class="keyword">case</span> dali.PROPERTY_MATRIX4:
<span class="keyword">return</span> <span class="integer">16</span>;
<span class="keyword">default</span>:
<span class="keyword">return</span> <span class="integer">1</span>;
}
}
<span class="comment">/**
* @method getDaliPropertyType
* Static. Return the dali property name for a type, given its size
* @param {Number} bytes Number of bytes used by the data
* @return {Number} dali property type
*/</span>
DaliApi.<span class="function">getDaliPropertyType</span> = <span class="keyword">function</span>(bytes) {
<span class="keyword">var</span> dali = DaliApi.dali;
<span class="keyword">var</span> type = dali.PROPERTY_FLOAT; <span class="comment">// default</span>
<span class="keyword">switch</span> (bytes) {
<span class="keyword">case</span> <span class="integer">4</span>:
type = dali.PROPERTY_FLOAT;
<span class="keyword">break</span>;
<span class="keyword">case</spa