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
1,049 lines (960 loc) • 50.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>
<a href="#n439" name="n439">439</a>
<strong><a href="#n440" name="n440">440</a></strong>
<a href="#n441" name="n441">441</a>
<a href="#n442" name="n442">442</a>
<a href="#n443" name="n443">443</a>
<a href="#n444" name="n444">444</a>
<a href="#n445" name="n445">445</a>
<a href="#n446" name="n446">446</a>
<a href="#n447" name="n447">447</a>
<a href="#n448" name="n448">448</a>
<a href="#n449" name="n449">449</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 HeadlessApi
* Top-level, static, class to manage the headless stage.
*/</span>
define.<span class="reserved">class</span>(<span class="keyword">function</span>(exports){
<span class="keyword">var</span> HeadlessApi = exports
<span class="comment">/**
* @property stage
* The list of displayed objects. Layer objects are added to the stage,
* and actor objects are added to layers.
*/</span>
HeadlessApi.stage = [];
<span class="comment">// Size of display</span>
HeadlessApi.size = {<span class="key">x</span>:<span class="integer">0</span>, <span class="key">y</span>:<span class="integer">0</span>};
<span class="comment">// Duration of the test. 0 = run once and stop</span>
HeadlessApi.duration = <span class="integer">0</span>;
<span class="comment">// Resolution of display</span>
HeadlessApi.dpi = {<span class="key">x</span>:<span class="integer">72</span>, <span class="key">y</span>:<span class="integer">72</span>};
<span class="comment">// Background color of the stage</span>
HeadlessApi.bgcolor = <span class="predefined-constant">null</span>;
<span class="comment">// Verbose mode controls additional output</span>
HeadlessApi.verbose = <span class="predefined-constant">false</span>;
<span class="comment">// Geometry types (same values as webgl)</span>
exports.Geometry = {<span class="key">POINTS</span>:<span class="hex">0x0</span>,<span class="key">LINES</span>:<span class="hex">0x1</span>,<span class="key">LINE_LOOP</span>:<span class="hex">0x2</span>,<span class="key">LINE_STRIP</span>:<span class="hex">0x3</span>,<span class="key">TRIANGLES</span>:<span class="hex">0x4</span>,<span class="key">TRIANGLE_STRIP</span>:<span class="hex">0x5</span>,<span class="key">TRIANGLE_FAN</span>:<span class="hex">0x6</span>};
<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>
HeadlessApi.rootlayer = <span class="predefined-constant">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 (HeadlessApi.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 HeadlessLayer object,</span>
<span class="comment">// - Call HeadlessApi.setLayer to make this layer the current layer</span>
<span class="comment">// - Add actors using HeadlessApi.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 HeadlessApi.setLayer</span>
HeadlessApi.currentlayer = <span class="predefined-constant">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 HeadlessLayer object to use. If missing, the built-in
* root layer is used.
*/</span>
HeadlessApi.<span class="function">setLayer</span> = <span class="keyword">function</span>(layer) {
<span class="keyword">if</span> (!layer)
layer = HeadlessApi.rootlayer;
HeadlessApi.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 HeadlessLayer object to use.
* @param {object} actor HeadlessActor object
* @param {object} layer HeadlessLayer object to use. If missing, the current
* layer is used.
*/</span>
HeadlessApi.<span class="function">addActor</span> = <span class="keyword">function</span>(actor, layer) {
<span class="keyword">if</span> (!layer)
layer = HeadlessApi.currentlayer;
layer.add(actor);
}
<span class="comment">/**
* @method initialize
* Static method to initialize and create the headless stage. This method is
* called when headless starts running.
* @param {Hash} Settings
* width Width of stage
* height Height of stage
* name Name of stage
* duration Duration of test (msec). Default=0 (one iteration)
* verbose true to generate additional output
*/</span>
HeadlessApi.<span class="function">initialize</span> = <span class="keyword">function</span>(settings) {
HeadlessLayer = require(<span class="string"><span class="delimiter">'</span><span class="content">./headless_layer</span><span class="delimiter">'</span></span>)
HeadlessApi.size = {<span class="key">x</span>:settings.width, <span class="key">y</span>:settings.height};
HeadlessApi.duration = settings.duration;
HeadlessApi.name = settings.name;
HeadlessApi.verbose = settings.verbose;
HeadlessApi.dumpstate = settings.dumpstate;
<span class="keyword">try</span> {
<span class="comment">// Create a top-level layer to the stage. </span>
HeadlessApi.rootlayer = HeadlessApi.currentlayer = <span class="keyword">new</span> HeadlessLayer(<span class="predefined-constant">null</span>, settings.width, settings.height);
HeadlessApi.stage.push(HeadlessApi.rootlayer);
}
<span class="keyword">catch</span> (e) {
console.error(<span class="string"><span class="delimiter">'</span><span class="content">Failed to load headless</span><span class="delimiter">'</span></span>);
console.log(e.stack);
}
}
<span class="comment">/**
* @method terminate
* Static method which is called when the composition is finished running.
* (see the duration argument on the command line)
*/</span>
HeadlessApi.<span class="function">terminate</span> = <span class="keyword">function</span>() {
<span class="keyword">if</span> (HeadlessApi.verbose)
console.log(<span class="string"><span class="delimiter">'</span><span class="content">Terminate</span><span class="delimiter">'</span></span>);
<span class="comment">// Dump the object state, if enabled, to a file</span>
<span class="keyword">if</span> (HeadlessApi.dumpstate && HeadlessApi.dumpstate.length > <span class="integer">0</span>) {
<span class="keyword">var</span> state = HeadlessApi.currentstate(<span class="predefined-constant">true</span>);
<span class="keyword">var</span> state_json = JSON.stringify(state, <span class="predefined-constant">null</span>, <span class="integer">2</span>);
<span class="comment">// Write to the specified file, or stdout</span>
<span class="keyword">var</span> file = HeadlessApi.dumpstate.toString();
<span class="keyword">if</span> (file === <span class="string"><span class="delimiter">'</span><span class="content">stdout</span><span class="delimiter">'</span></span>) {
process.stdout.write(state_json);
}
<span class="keyword">else</span> {
<span class="keyword">var</span> fs = require(<span class="string"><span class="delimiter">'</span><span class="content">fs</span><span class="delimiter">'</span></span>);
fs.writeFileSync(file, state_json);
}
}
process.exit(<span class="integer">0</span>);
}
<span class="comment">/**
* @method currentstate
* Static method to return the json state of the composition.
* Objects are displayed in the order they are referenced.
*/</span>
HeadlessApi.<span class="function">currentstate</span> = <span class="keyword">function</span>(verbose) {
HeadlessApi.shownobjects = {};
<span class="keyword">var</span> states = HeadlessApi.rootlayer.currentstate(verbose);
<span class="keyword">return</span> states;
}
<span class="comment">/**
* @method shownObject
* Static method to indicate a named object that has been displayed
* @param {objname} String Object name
*/</span>
HeadlessApi.shownobjects = {};
HeadlessApi.<span class="function">shownObject</span> = <span class="keyword">function</span>(objname) {
HeadlessApi.shownobjects[objname] = <span class="integer">1</span>;
}
<span class="comment">/**
* @method isShown
* Static method to test if the named object has been shown.
* @param {objname} String Object name
*/</span>
HeadlessApi.<span class="function">isShown</span> = <span class="keyword">function</span>(objname) {
<span class="keyword">return</span> (objname <span class="keyword">in</span> HeadlessApi.shownobjects);
}
HeadlessApi.<span class="function">inspect</span> = <span class="keyword">function</span>() {
<span class="comment">// TODO Dump the object state if enabled</span>
<span class="keyword">var</span> output = HeadlessApi.rootlayer.inspect();
console.log(<span class="string"><span class="delimiter">'</span><span class="content">rootlayer</span><span class="delimiter">'</span></span>, output);
}
<span class="comment">/**
* @method inspect
* Static method to return the json state of the composition.
*/</span>
HeadlessApi.<span class="function">inspect</span> = <span class="keyword">function</span>() {
<span class="comment">// TODO Dump the object state if enabled</span>
<span class="keyword">var</span> output = HeadlessApi.rootlayer.inspect();
console.log(<span class="string"><span class="delimiter">'</span><span class="content">rootlayer</span><span class="delimiter">'</span></span>, output);
}
<span class="comment">/**
* @method createHeadlessObjects
* Static method to create headless objects on the specified object. Most
* objects, such as actor and geometry are attached to a view using
* createHeadlessActor(). Currently, only the shader object is attached to
* object.
* @param {object} obj Object to attach headless objects to. This should
* already contain an element headlessshader. In webgl
* the object is an object created by gl.createProgram.
* In headless, a custom object is created in shaderheadless.js
* to hold the compiled state of the shader. This object
* also holds an instance of HeadlessShader.
* @param {object} shader Instance with runtime values (ex. hardrect)
*/</span>
HeadlessApi.<span class="function">createHeadlessObjects</span> = <span class="keyword">function</span>(obj, shader) {
<span class="keyword">if</span> (!obj.headlessshader) {
console.log(<span class="string"><span class="delimiter">'</span><span class="content">WARNING. createHeadlessObjects cannot find HeadlessShader</span><span class="delimiter">'</span></span>, Object.keys(obj));
}
obj.dreem_obj = shader;
}
<span class="comment">/**
* @method createHeadlessActor
* Static method to create headless.Actor object on the specified object,
* using headless geometries located in another object. A Material and Renderer
* are also created on the object.
* @param {object} obj Object to attach headless actor to. This is a view
* object.
* @param {object} shader Shader object containing compiled shader
* information (from createHeadlessObjects).
*/</span>
HeadlessApi.<span class="function">createHeadlessActor</span> = <span class="keyword">function</span>(obj, shader) {
HeadlessGeometry = require(<span class="string"><span class="delimiter">'</span><span class="content">./headless_geometry</span><span class="delimiter">'</span></span>)
HeadlessMaterial = require(<span class="string"><span class="delimiter">'</span><span class="content">./headless_material</span><span class="delimiter">'</span></span>)
HeadlessRenderer = require(<span class="string"><span class="delimiter">'</span><span class="content">./headless_renderer</span><span class="delimiter">'</span></span>)
HeadlessActor = require(<span class="string"><span class="delimiter">'</span><span class="content">./headless_actor</span><span class="delimiter">'</span></span>)
<span class="comment">// TODO: Re-use the geometry, unless we have a texture</span>
obj.headlessgeometry = <span class="keyword">new</span> HeadlessGeometry(obj.drawtype);
obj.headlessgeometry.addGeometry(shader.dreem_obj);
<span class="comment">//console.log('Calling HeadlessMaterial with shader = ', shader.object_type);</span>
obj.headlessmaterial = <span class="keyword">new</span> HeadlessMaterial(shader.headlessshader)
obj.headlessrenderer = <span class="keyword">new</span> HeadlessRenderer(obj.headlessgeometry, obj.headlessmaterial);
obj.headlessactor = <span class="keyword">new</span> HeadlessActor(obj);
obj.headlessactor.addRenderer(obj.headlessrenderer);
}
<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>
HeadlessApi.<span class="function">setBackgroundColor</span> = <span class="keyword">function</span>(color) {
HeadlessApi.bgcolor = color;
}
<span class="comment">/**
* @method headlessBuffer
* Static. Build a Headless 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 headless.PropertyBuffer (see HeadlessApi.getHash).
* @param {Object} vals Value to use. Either a single value or an
* array can be specified.
* @param {Object} Format hash, suitable for headless.PropertyBuffer.
* The hash looks like {name : type}. See headless docs for headless.PropertyBuffer.
* @param {Number} nrecs The number of records, in the buffer.
* @return {Object} [headless.PropertyBuffer, id]. This is the same value stored
* in the cache HeadlessApi.BufferCache.
*/</span>
HeadlessApi.BufferId = <span class="integer">0</span>
HeadlessApi.BufferCache = {}; <span class="comment">// key: hash value: [Headless.PropertyBuffer, id]</span>
HeadlessApi.<span class="function">headlessBuffer</span> = <span class="keyword">function</span>(vals, format, nrecs) {
<span class="comment">//console.log('headlessBuffer format', format, 'nrecs', nrecs, 'vals', vals.length);</span>
<span class="keyword">var</span> headless = HeadlessApi.headless;
<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('headlessBuffer with', nrecs, 'items', 'length = ', data.length);</span>
<span class="comment">// Reuse an existing propertybuffer</span>
<span class="keyword">var</span> hash = HeadlessApi.getHash(vals);
<span class="keyword">if</span> (HeadlessApi.BufferCache[hash]) {
<span class="keyword">return</span> HeadlessApi.BufferCache[hash];
}
<span class="comment">// Create the headless.PropertyBuffer</span>
<span class="keyword">var</span> buffer = {<span class="key">format</span>: format, <span class="key">nrecs</span>: nrecs};
HeadlessApi.BufferId += <span class="integer">1</span>;
<span class="comment">// Write data to the buffer</span>
<span class="comment">//console.log('numberItems', nrecs, data.length);</span>
HeadlessApi.writeHeadlessBuffer(buffer, HeadlessApi.BufferId, data);
<span class="keyword">var</span> ret = [buffer, HeadlessApi.BufferId];
HeadlessApi.BufferCache[hash] = ret;
<span class="keyword">return</span> ret;
}
<span class="comment">/**
* @method writeHeadlessBuffer
* Static. Write data to an existing headless.PropertyBuffer
* @param {Object} buffer headless.PropertyBuffer to write to.
* @param {Number} bufferid buffer index
* @param {Object} data An array of values to use.
* array can be specified.
*/</span>
HeadlessApi.<span class="function">writeHeadlessBuffer</span> = <span class="keyword">function</span>(buffer, bufferid, data) {
<span class="keyword">var</span> headless = HeadlessApi.headless;
<span class="keyword">var</span> dataArray = <span class="keyword">new</span> Float32Array(data.length);
dataArray.set(data);
buffer.data = dataArray;
<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 (headless will error on these)
* @param {Object} obj Compiled object
* @return {Object} single value or array, or undefined if name not found.
*/</span>
HeadlessApi.<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">// Headless 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 getHeadlessPropertySize
* Static. Return the number of elements required for a headless property,
* given the headless constant.
* @param {String} format property constant
* @return {Number} Number of elements
*/</span>
HeadlessApi.<span class="function">getHeadlessPropertySize</span> = <span class="keyword">function</span>(format) {
<span class="keyword">var</span> headless = HeadlessApi.headless;
<span class="keyword">switch</span>( format ) {
<span class="keyword">case</span> <span class="string"><span class="delimiter">'</span><span class="content">VEC2</span><span class="delimiter">'</span></span>:
<span class="keyword">return</span> <span class="integer">2</span>;
<span class="keyword">case</span> <span class="string"><span class="delimiter">'</span><span class="content">VEC3</span><span class="delimiter">'</span></span>:
<span class="keyword">return</span> <span class="integer">3</span>;
<span class="keyword">case</span> <span class="string"><span class="delimiter">'</span><span class="content">VEC4</span><span class="delimiter">'</span></span>:
<span class="keyword">return</span> <span class="integer">4</span>;
<span class="keyword">case</span> <span class="string"><span class="delimiter">'</span><span class="content">MAT3</span><span class="delimiter">'</span></span>:
<span class="keyword">return</span> <span class="integer">9</span>;
<span class="keyword">case</span> <span class="string"><span class="delimiter">'</span><span class="content">MAT4</span><span class="delimiter">'</span></span>:
<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 getHeadlessPropertyType
* Static. Return the headless property name for a type, given its size
* @param {Number} bytes Number of bytes used by the data
* @return {Number} headless property type
*/</span>
HeadlessApi.<span class="function">getHeadlessPropertyType</span> = <span class="keyword">function</span>(bytes) {
<span class="keyword">var</span> headless = HeadlessApi.headless;
<span class="keyword">var</span> type = <span class="string"><span class="delimiter">'</span><span class="content">FLOAT</span><span class="delimiter">'</span></span>;
<span class="keyword">switch</span> (bytes) {
<span class="keyword">case</span> <span class="integer">4</span>:
type = <span class="string"><span class="delimiter">'</span><span class="content">FLOAT</span><span class="delimiter">'</span></span>;
<span class="keyword">break</span>;
<span class="keyword">case</span> <span class="integer">8</span>:
type = <span class="string"><span class="delimiter">'</span><span class="content">VEC2</span><span class="delimiter">'</span></span>;
<span class="keyword">break</span>;
<span class="keyword">case</span> <span class="integer">12</span>:
type = <span class="string"><span class="delimiter">'</span><span class="content">VEC3</span><span class="delimiter">'</span></span>;
<span class="keyword">break</span>;
<span class="keyword">case</span> <span class="integer">16</span>:
type = <span class="string"><span class="delimiter">'</span><span class="content">VEC4</span><span class="delimiter">'</span></span>;
<span class="keyword">break</span>;
<span class="keyword">case</span> <span class="integer">64</span>:
type = <span class="string"><span class="delimiter">'</span><span class="content">MAT4</span><span class="delimiter">'</span></span>;
<span class="keyword">break</span>;
<span class="keyword">default</span>:
console.trace(<span class="string"><span class="delimiter">'</span><span class="content">UNKNOWN PROPERTY SIZE</span><span class="delimiter">'</span></span>, bytes);
<span class="keyword">break</span>;
};
<span class="keyword">return</span> type;
}
<span class="comment">/**
* @method getHash
* Static. Compute the hash of the specified data. The data is first
* converted to json, and an xor-like hash is used. These values are used
* as keys in caches.
* @param {Object} data Object to compute the hash
* @return {Number} Hash value
*/</span>
HeadlessApi.<span class="function">getHash</span> = <span class="keyword">function</span>(data) {
<span class="keyword">var</span> str = JSON.stringify(data);
<span class="comment">// Algorithm from: https://github.com/darkskyapp/string-hash/blob/master/index.js</span>
<span class="keyword">var</span> hash = <span class="integer">5381</span>, i = str.length;
<span class="keyword">while</span>(i)
hash = (hash * <span class="integer">33</s