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
485 lines (446 loc) • 23.8 kB
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%) ;
color: gray ;
text-decoration: none ;
}
.CodeRay .line-numbers pre {
word-break: normal;
}
.CodeRay .line-numbers a:target { color: blue ; }
.CodeRay .line-numbers .highlighted { color: red ; }
.CodeRay .line-numbers .highlighted a { color: red ; }
.CodeRay span.line-numbers { padding: 0px 4px; }
.CodeRay .line { display: block; float: left; width: 100%; }
.CodeRay .code { width: 100%; }
.CodeRay .debug { color: white ; background: blue ; }
.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>
</pre></td>
<td class="code"><pre><span class="comment">// ported to dreemgl from: https://github.com/tangrams/tangram/blob/master/src/geo.js</span>
<span class="comment">// original license text:</span>
<span class="comment">// The MIT License (MIT)</span>
<span class="comment">// Copyright (c) 2013 Brett Camper</span>
<span class="comment">// Permission is hereby granted, free of charge, to any person obtaining a copy of</span>
<span class="comment">// this software and associated documentation files (the "Software"), to deal in</span>
<span class="comment">// the Software without restriction, including without limitation the rights to</span>
<span class="comment">// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of</span>
<span class="comment">// the Software, and to permit persons to whom the Software is furnished to do so,</span>
<span class="comment">// subject to the following conditions:</span>
<span class="comment">// The above copyright notice and this permission notice shall be included in all</span>
<span class="comment">// copies or substantial portions of the Software.</span>
<span class="comment">// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR</span>
<span class="comment">// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS</span>
<span class="comment">// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR</span>
<span class="comment">// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER</span>
<span class="comment">// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN</span>
<span class="comment">// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</span>
define.<span class="reserved">class</span>(<span class="keyword">function</span>(require, <span class="predefined">$server$</span>, service){
<span class="local-variable">this</span>.<span class="function">init</span> = <span class="keyword">function</span>(){
console.log(<span class="string"><span class="delimiter">"</span><span class="content">geo init</span><span class="delimiter">"</span></span>);
}
<span class="local-variable">this</span>.default_max_zoom = <span class="integer">18</span>;
<span class="local-variable">this</span>.tile_size = <span class="integer">256</span>;
<span class="local-variable">this</span>.half_circumference_meters = <span class="float">20037508.342789244</span>;
<span class="local-variable">this</span>.circumference_meters = <span class="local-variable">this</span>.half_circumference_meters * <span class="integer">2</span>;
<span class="local-variable">this</span>.min_zoom_meters_per_pixel = <span class="local-variable">this</span>.circumference_meters / <span class="local-variable">this</span>.tile_size; <span class="comment">// min zoom draws world as 2 tiles wide</span>
<span class="local-variable">this</span>.meters_per_pixel = [];
<span class="local-variable">this</span>.<span class="function">metersPerPixel</span> = <span class="keyword">function</span> (z) {
<span class="local-variable">this</span>.meters_per_pixel[z] = <span class="local-variable">this</span>.meters_per_pixel[z] || <span class="local-variable">this</span>.min_zoom_meters_per_pixel / Math.pow(<span class="integer">2</span>, z);
<span class="keyword">return</span> <span class="local-variable">this</span>.meters_per_pixel[z];
};
<span class="local-variable">this</span>.meters_per_tile = [];
<span class="local-variable">this</span>.<span class="function">metersPerTile</span> = <span class="keyword">function</span> (z) {
<span class="local-variable">this</span>.meters_per_tile[z] = <span class="local-variable">this</span>.meters_per_tile[z] || <span class="local-variable">this</span>.circumference_meters / Math.pow(<span class="integer">2</span>, z);
<span class="keyword">return</span> <span class="local-variable">this</span>.meters_per_tile[z];
};
<span class="comment">// Conversion functions based on an defined tile scale</span>
<span class="local-variable">this</span>.tile_scale = <span class="integer">4096</span>; <span class="comment">// coordinates are locally scaled to the range [0, tile_scale]</span>
<span class="local-variable">this</span>.units_per_pixel = <span class="local-variable">this</span>.tile_scale / <span class="local-variable">this</span>.tile_size;
<span class="local-variable">this</span>.units_per_meter = [];
<span class="local-variable">this</span>.<span class="function">unitsPerMeter</span> = <span class="keyword">function</span> (z) {
units_per_meter[z] = units_per_meter[z] || <span class="local-variable">this</span>.tile_scale / (<span class="local-variable">this</span>.tile_size * <span class="local-variable">this</span>.metersPerPixel(z));
<span class="keyword">return</span> units_per_meter[z];
};
<span class="comment">// Convert tile location to mercator meters - multiply by pixels per tile, then by meters per pixel, adjust for map origin</span>
<span class="local-variable">this</span>.<span class="function">metersForTile</span> = <span class="keyword">function</span> (tile) {
<span class="keyword">return</span> {
<span class="key">x</span>: tile.x * <span class="local-variable">this</span>.circumference_meters / Math.pow(<span class="integer">2</span>, tile.z) - <span class="local-variable">this</span>.half_circumference_meters,
<span class="key">y</span>: -(tile.y * <span class="local-variable">this</span>.circumference_meters / Math.pow(<span class="integer">2</span>, tile.z) - <span class="local-variable">this</span>.half_circumference_meters)
};
};
<span class="comment">/**
Given a point in mercator meters and a zoom level, return the tile X/Y/Z that the point lies in
*/</span>
<span class="local-variable">this</span>.<span class="function">tileForMeters</span> = <span class="keyword">function</span> (x, y, zoom) {
<span class="keyword">return</span> {
<span class="key">x</span>: Math.floor((x + <span class="local-variable">this</span>.half_circumference_meters) / (<span class="local-variable">this</span>.circumference_meters / Math.pow(<span class="integer">2</span>, zoom))),
<span class="key">y</span>: Math.floor((-y + <span class="local-variable">this</span>.half_circumference_meters) / (<span class="local-variable">this</span>.circumference_meters / Math.pow(<span class="integer">2</span>, zoom))),
<span class="key">z</span>: zoom
};
};
<span class="local-variable">this</span>.<span class="function">tileForMetersFrac</span> = <span class="keyword">function</span> (x, y, zoom) {
<span class="keyword">return</span> {
<span class="key">x</span>: ((x + <span class="local-variable">this</span>.half_circumference_meters) / (<span class="local-variable">this</span>.circumference_meters / Math.pow(<span class="integer">2</span>, zoom))),
<span class="key">y</span>: ((-y + <span class="local-variable">this</span>.half_circumference_meters) / (<span class="local-variable">this</span>.circumference_meters / Math.pow(<span class="integer">2</span>, zoom))),
<span class="key">z</span>: zoom
};
};
<span class="comment">// Wrap a tile to positive #s for zoom</span>
<span class="comment">// Optionally specify the axes to wrap</span>
<span class="local-variable">this</span>.<span class="function">wrapTile</span> = <span class="keyword">function</span>( x, y, z, maskx, masky) {
<span class="keyword">var</span> m = (<span class="integer">1</span> << z) - <span class="integer">1</span>;
<span class="keyword">if</span> (maskx) {
x = x & m;
}
<span class="keyword">if</span> (masky) {
y = y & m;
}
<span class="keyword">return</span> [ x, y, z ];
};
<span class="comment">/**
Convert mercator meters to lat-lng
*/</span>
<span class="local-variable">this</span>.<span class="function">metersToLatLng</span> = <span class="keyword">function</span> (x, y) {
x /= <span class="local-variable">this</span>.half_circumference_meters;
y /= <span class="local-variable">this</span>.half_circumference_meters;
y = (<span class="integer">2</span> * Math.atan(Math.exp(y * Math.PI)) - (Math.PI / <span class="integer">2</span>)) / Math.PI;
x *= <span class="integer">180</span>;
y *= <span class="integer">180</span>;
<span class="keyword">return</span> [x, y];
};
<span class="comment">/**
Convert lat-lng to mercator meters
*/</span>
<span class="local-variable">this</span>.<span class="function">latLngToMeters</span> = <span class="keyword">function</span>(x, y) {
y = <span class="local-variable">this</span>.wrapLng(y + <span class="integer">360</span>)
<span class="comment">// Latitude</span>
<span class="comment">// var t = Math.tan(((y*Math.PI/360) + Math.PI/2)/2);</span>
y = Math.log(Math.tan(y*Math.PI/<span class="integer">360</span> + Math.PI/<span class="integer">4</span>)) / Math.PI;
y *= <span class="local-variable">this</span>.half_circumference_meters;
<span class="comment">// y = Math.log(t) / Math.PI;</span>
<span class="comment">// y *= this.half_circumference_meters;</span>
<span class="comment">// Longitude</span>
x *= <span class="local-variable">this</span>.half_circumference_meters / <span class="integer">180</span>;
<span class="keyword">return</span> [x, y];
}
<span class="local-variable">this</span>.<span class="function">wrapLng</span> = <span class="keyword">function</span>(x) {
<span class="keyword">if</span> (x > <span class="integer">180</span> || x < -<span class="integer">180</span>) {
x = ((x + <span class="integer">180</span>) % <span class="integer">360</span> + <span class="integer">360</span>) % <span class="integer">360</span> - <span class="integer">180</span>;
}
<span class="keyword">return</span> x;
}
<span class="comment">/*// Run an in-place transform function on each cooordinate in a GeoJSON geometry
this.transformGeometry = function (geometry, transform) {
if (geometry == null) {
return; // skip if missing geometry (valid GeoJSON)
}
if (geometry.type === 'Point') {
transform(geometry.coordinates);
}
else if (geometry.type === 'LineString' || geometry.type === 'MultiPoint') {
geometry.coordinates.forEach(transform);
}
else if (geometry.type === 'Polygon' || geometry.type === 'MultiLineString') {
geometry.coordinates.forEach(coordinates => coordinates.forEach(transform));
}
else if (geometry.type === 'MultiPolygon') {
geometry.coordinates.forEach(polygon => {
polygon.forEach(coordinates => coordinates.forEach(transform));
});
}
// TODO: support GeometryCollection
};*/</span>
})
</pre></td>
</tr></table>
</body>
</html>