mirror
/
stratux
kopia lustrzana https://github.com/cyoung/stratux
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Replace paper airplane with attitude indicator in UI

pull/578/head
Eric Westphal 2017-01-05 23:00:35 -05:00
rodzic 84e81bbd3b
commit 744c7bfe1c
5 zmienionych plików z 415 dodań i 310 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

3
web/Makefile
Wyświetl plik

@ -15,6 +15,7 @@ all:
cp img/logo*.png /var/www/img
cp img/screen*.png /var/www/img
cp img/world.png /var/www/img
cp img/ai.svg /var/www/img
mkdir -p /var/www/maui
mkdir -p /var/www/maui/js
cp maui/js/angular-ui-router.min.js /var/www/maui/js
@ -36,4 +37,4 @@ all:
cp stratux.appcache /var/www
# Mark the manifest with the git hash.
echo "# build time: " ${buildtime} >>/var/www/stratux.appcache
echo "# Stratux build: " ${stratuxBuild} >>/var/www/stratux.appcache
echo "# Stratux build: " ${stratuxBuild} >>/var/www/stratux.appcache

346
web/img/ai.svg 100644
Wyświetl plik

@ -0,0 +1,346 @@
<svg version="1.1"
baseProfile="full"
width="100%" height="100%" viewBox="-200 -200 400 400"
xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="earth-clip">
<rect x="-1200" y="0" width="2400" height="1200" />
</clipPath>
<clipPath id="pitch-clip">
<circle cx="0" cy="0" r="160" />
</clipPath>
<clipPath id="roll-clip">
<polygon points="0 0, -200 -200, 200 -200" />
</clipPath>
<clipPath id="heading-clip">
<rect x="-940" y="175" width="1880" height="3" stroke-width="0" />
<rect x="-940" y="192" width="1880" height="3" stroke-width="0" />
</clipPath>
<clipPath id="screen-clip">
<rect x="-200" y="-200" width="400" height="400" />
</clipPath>
<style type="text/css"><![CDATA[
.earth {
fill: chocolate;
}
.sky {
fill: deepskyblue;
}
.pointer {
stroke: goldenrod;
fill: yellow;
}
.pointerBG {
fill: goldenrod;
}
.marks {
fill: white;
stroke: white;
stroke-width: 2;
}
.markText {
font-size: 20;
font-family: sans-serif;
text-anchor: middle;
alignment-baseline: middle;
stroke-width: 0;
}
]]></style>
</defs>
<g clip-path="url(#screen-clip)">
<!-- document.getElementsByClass("roll")[0].setAttribute("transform", "rotate(-roll)") -->
<!-- document.getElementsByClass("pitch")[0].setAttribute("transform", "translate(0, pitch*10)") -->
<g class="roll">
<g class="pitch">
<circle cx="0" cy="0" r="1200" class="sky" />
<line x1="-1200" x2="1200" y1="0" y2="0" class="marks"/>
<circle cx="0" cy="0" r="1200" class="earth" clip-path="url(#earth-clip)" />
</g>
<g clip-path="url(#pitch-clip)">
<g class="marks pitch">
<line x1="-20" x2="20" y1="-1050" y2="-1050" />
<line x1="-10" x2="10" y1="-1025" y2="-1025" />
<line x1="-40" x2="40" y1="-1000" y2="-1000" />
<line x1="-10" x2="10" y1="-975" y2="-975" />
<line x1="-20" x2="20" y1="-950" y2="-950" />
<line x1="-10" x2="10" y1="-925" y2="-925" />
<line x1="-40" x2="40" y1="-900" y2="-900" />
<line x1="-10" x2="10" y1="-875" y2="-875" />
<line x1="-20" x2="20" y1="-850" y2="-850" />
<line x1="-10" x2="10" y1="-825" y2="-825" />
<line x1="-40" x2="40" y1="-800" y2="-800" />
<line x1="-10" x2="10" y1="-775" y2="-775" />
<line x1="-20" x2="20" y1="-750" y2="-750" />
<line x1="-10" x2="10" y1="-725" y2="-725" />
<line x1="-40" x2="40" y1="-700" y2="-700" />
<line x1="-10" x2="10" y1="-675" y2="-675" />
<line x1="-20" x2="20" y1="-650" y2="-650" />
<line x1="-10" x2="10" y1="-625" y2="-625" />
<line x1="-40" x2="40" y1="-600" y2="-600" />
<line x1="-10" x2="10" y1="-575" y2="-575" />
<line x1="-20" x2="20" y1="-550" y2="-550" />
<line x1="-10" x2="10" y1="-525" y2="-525" />
<line x1="-40" x2="40" y1="-500" y2="-500" />
<line x1="-10" x2="10" y1="-475" y2="-475" />
<line x1="-20" x2="20" y1="-450" y2="-450" />
<line x1="-10" x2="10" y1="-425" y2="-425" />
<line x1="-40" x2="40" y1="-400" y2="-400" />
<line x1="-10" x2="10" y1="-375" y2="-375" />
<line x1="-20" x2="20" y1="-350" y2="-350" />
<line x1="-10" x2="10" y1="-325" y2="-325" />
<line x1="-40" x2="40" y1="-300" y2="-300" />
<line x1="-10" x2="10" y1="-275" y2="-275" />
<line x1="-20" x2="20" y1="-250" y2="-250" />
<line x1="-10" x2="10" y1="-225" y2="-225" />
<line x1="-40" x2="40" y1="-200" y2="-200" />
<line x1="-10" x2="10" y1="-175" y2="-175" />
<line x1="-20" x2="20" y1="-150" y2="-150" />
<line x1="-10" x2="10" y1="-125" y2="-125" />
<line x1="-40" x2="40" y1="-100" y2="-100" />
<line x1="-10" x2="10" y1="-75" y2="-75" />
<line x1="-20" x2="20" y1="-50" y2="-50" />
<line x1="-10" x2="10" y1="-25" y2="-25" />
<line x1="-10" x2="10" y1="+25" y2="+25" />
<line x1="-20" x2="20" y1="+50" y2="+50" />
<line x1="-10" x2="10" y1="+75" y2="+75" />
<line x1="-40" x2="40" y1="+100" y2="+100" />
<line x1="-10" x2="10" y1="+125" y2="+125" />
<line x1="-20" x2="20" y1="+150" y2="+150" />
<line x1="-10" x2="10" y1="+175" y2="+175" />
<line x1="-40" x2="40" y1="+200" y2="+200" />
<line x1="-10" x2="10" y1="+225" y2="+225" />
<line x1="-20" x2="20" y1="+250" y2="+250" />
<line x1="-10" x2="10" y1="+275" y2="+275" />
<line x1="-40" x2="40" y1="+300" y2="+300" />
<line x1="-10" x2="10" y1="+325" y2="+325" />
<line x1="-20" x2="20" y1="+350" y2="+350" />
<line x1="-10" x2="10" y1="+375" y2="+375" />
<line x1="-40" x2="40" y1="+400" y2="+400" />
<line x1="-10" x2="10" y1="+425" y2="+425" />
<line x1="-20" x2="20" y1="+450" y2="+450" />
<line x1="-10" x2="10" y1="+475" y2="+475" />
<line x1="-40" x2="40" y1="+500" y2="+500" />
<line x1="-10" x2="10" y1="+525" y2="+525" />
<line x1="-20" x2="20" y1="+550" y2="+550" />
<line x1="-10" x2="10" y1="+575" y2="+575" />
<line x1="-40" x2="40" y1="+600" y2="+600" />
<line x1="-10" x2="10" y1="+625" y2="+625" />
<line x1="-20" x2="20" y1="+650" y2="+650" />
<line x1="-10" x2="10" y1="+675" y2="+675" />
<line x1="-40" x2="40" y1="+700" y2="+700" />
<line x1="-10" x2="10" y1="+725" y2="+725" />
<line x1="-20" x2="20" y1="+750" y2="+750" />
<line x1="-10" x2="10" y1="+775" y2="+775" />
<line x1="-40" x2="40" y1="+800" y2="+800" />
<line x1="-10" x2="10" y1="+825" y2="+825" />
<line x1="-20" x2="20" y1="+850" y2="+850" />
<line x1="-10" x2="10" y1="+875" y2="+875" />
<line x1="-40" x2="40" y1="+900" y2="+900" />
<line x1="-10" x2="10" y1="+925" y2="+925" />
<line x1="-20" x2="20" y1="+950" y2="+950" />
<line x1="-10" x2="10" y1="+975" y2="+975" />
<line x1="-40" x2="40" y1="+1000" y2="+1000" />
<line x1="-10" x2="10" y1="+1025" y2="+1025" />
<line x1="-20" x2="20" y1="+1050" y2="+1050" />
<text x="-55" y="-1000" class="markText">80</text>
<text x="+55" y="-1000" class="markText">80</text>
<text x="-55" y="-900" class="markText">90</text>
<text x="+55" y="-900" class="markText">90</text>
<text x="-55" y="-800" class="markText">80</text>
<text x="+55" y="-800" class="markText">80</text>
<text x="-55" y="-700" class="markText">70</text>
<text x="+55" y="-700" class="markText">70</text>
<text x="-55" y="-600" class="markText">60</text>
<text x="+55" y="-600" class="markText">60</text>
<text x="-55" y="-500" class="markText">50</text>
<text x="+55" y="-500" class="markText">50</text>
<text x="-55" y="-400" class="markText">40</text>
<text x="+55" y="-400" class="markText">40</text>
<text x="-55" y="-300" class="markText">30</text>
<text x="+55" y="-300" class="markText">30</text>
<text x="-55" y="-200" class="markText">20</text>
<text x="+55" y="-200" class="markText">20</text>
<text x="-55" y="-100" class="markText">10</text>
<text x="+55" y="-100" class="markText">10</text>
<text x="-55" y="+100" class="markText">10</text>
<text x="+55" y="+100" class="markText">10</text>
<text x="-55" y="+200" class="markText">20</text>
<text x="+55" y="+200" class="markText">20</text>
<text x="-55" y="+300" class="markText">30</text>
<text x="+55" y="+300" class="markText">30</text>
<text x="-55" y="+400" class="markText">40</text>
<text x="+55" y="+400" class="markText">40</text>
<text x="-55" y="+500" class="markText">50</text>
<text x="+55" y="+500" class="markText">50</text>
<text x="-55" y="+600" class="markText">60</text>
<text x="+55" y="+600" class="markText">60</text>
<text x="-55" y="+700" class="markText">70</text>
<text x="+55" y="+700" class="markText">70</text>
<text x="-55" y="+800" class="markText">80</text>
<text x="+55" y="+800" class="markText">80</text>
<text x="-55" y="+900" class="markText">90</text>
<text x="+55" y="+900" class="markText">90</text>
<text x="-55" y="+1000" class="markText">80</text>
<text x="+55" y="+1000" class="markText">80</text>
</g>
</g>
</g>
<g clip-path="url(#roll-clip)">
<g class="marks roll">
<line x1="0" x2="0" y1="-175" y2="-195" transform="rotate(-180)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(-170)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(-160)" />
<line x1="0" x2="0" y1="-175" y2="-195" transform="rotate(-150)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(-140)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(-130)" />
<line x1="0" x2="0" y1="-175" y2="-195" transform="rotate(-120)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(-110)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(-100)" />
<line x1="0" x2="0" y1="-175" y2="-195" transform="rotate(-90)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(-80)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(-70)" />
<line x1="0" x2="0" y1="-175" y2="-195" transform="rotate(-60)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(-50)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(-40)" />
<line x1="0" x2="0" y1="-175" y2="-195" transform="rotate(-30)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(-20)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(-10)" />
<polygon points="-10 -189, 0 -175, 10 -189" stroke-width="0" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(+10)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(+20)" />
<line x1="0" x2="0" y1="-175" y2="-195" transform="rotate(+30)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(+40)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(+50)" />
<line x1="0" x2="0" y1="-175" y2="-195" transform="rotate(+60)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(+70)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(+80)" />
<line x1="0" x2="0" y1="-175" y2="-195" transform="rotate(+90)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(+100)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(+110)" />
<line x1="0" x2="0" y1="-175" y2="-195" transform="rotate(+120)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(+130)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(+140)" />
<line x1="0" x2="0" y1="-175" y2="-195" transform="rotate(+150)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(+160)" />
<line x1="0" x2="0" y1="-175" y2="-189" transform="rotate(+170)" />
</g>
</g>
<!-- document.getElementsByClass("slipSkid")[0].setAttribute("transform", "translate(slipSkid, 0)") -->
<g class="marks">
<polygon points="-10 -160, 0 -174, 10 -160" stroke-width="0" />
<polygon points="-10 +160, 0 +174, 10 +160" stroke-width="0" />
<rect x="-10" y="-158" width="20" height="6" stroke-width="0" class="slipSkid" />
</g>
<!-- document.getElementsByClass("heading")[0].setAttribute("transform", "translate(-heading*2, 0)") -->
<g class="marks heading">
<g clip-path="url(#heading-clip)">
<line x1="-180" x2="-180" y1="175" y2="195" stroke-width="2"/>
<line x1="-120" x2="-120" y1="175" y2="195" stroke-width="2"/>
<line x1="-60" x2="-60" y1="175" y2="195" stroke-width="2"/>
<line x1="0" x2="0" y1="175" y2="195" stroke-width="2"/>
<line x1="+60" x2="+60" y1="175" y2="195" stroke-width="2"/>
<line x1="+120" x2="+120" y1="175" y2="195" stroke-width="2"/>
<line x1="+180" x2="+180" y1="175" y2="195" stroke-width="2"/>
<line x1="+240" x2="+240" y1="175" y2="195" stroke-width="2"/>
<line x1="+300" x2="+300" y1="175" y2="195" stroke-width="2"/>
<line x1="+360" x2="+360" y1="175" y2="195" stroke-width="2"/>
<line x1="+420" x2="+420" y1="175" y2="195" stroke-width="2"/>
<line x1="+480" x2="+480" y1="175" y2="195" stroke-width="2"/>
<line x1="+540" x2="+540" y1="175" y2="195" stroke-width="2"/>
<line x1="+600" x2="+600" y1="175" y2="195" stroke-width="2"/>
<line x1="+660" x2="+660" y1="175" y2="195" stroke-width="2"/>
<line x1="+720" x2="+720" y1="175" y2="195" stroke-width="2"/>
<line x1="+780" x2="+780" y1="175" y2="195" stroke-width="2"/>
<line x1="+840" x2="+840" y1="175" y2="195" stroke-width="2"/>
<line x1="+900" x2="+900" y1="175" y2="195" stroke-width="2"/>
</g>
<line x1="-200" x2="-200" y1="175" y2="195" stroke-width="1"/>
<line x1="-160" x2="-160" y1="175" y2="195" stroke-width="1"/>
<line x1="-140" x2="-140" y1="175" y2="195" stroke-width="1"/>
<line x1="-100" x2="-100" y1="175" y2="195" stroke-width="1"/>
<line x1="-80" x2="-80" y1="175" y2="195" stroke-width="1"/>
<line x1="-40" x2="-40" y1="175" y2="195" stroke-width="1"/>
<line x1="-20" x2="-20" y1="175" y2="195" stroke-width="1"/>
<line x1="20" x2="20" y1="175" y2="195" stroke-width="1"/>
<line x1="40" x2="40" y1="175" y2="195" stroke-width="1"/>
<line x1="80" x2="80" y1="175" y2="195" stroke-width="1"/>
<line x1="100" x2="100" y1="175" y2="195" stroke-width="1"/>
<line x1="140" x2="140" y1="175" y2="195" stroke-width="1"/>
<line x1="160" x2="160" y1="175" y2="195" stroke-width="1"/>
<line x1="200" x2="200" y1="175" y2="195" stroke-width="1"/>
<line x1="220" x2="220" y1="175" y2="195" stroke-width="1"/>
<line x1="260" x2="260" y1="175" y2="195" stroke-width="1"/>
<line x1="280" x2="280" y1="175" y2="195" stroke-width="1"/>
<line x1="320" x2="320" y1="175" y2="195" stroke-width="1"/>
<line x1="340" x2="340" y1="175" y2="195" stroke-width="1"/>
<line x1="380" x2="380" y1="175" y2="195" stroke-width="1"/>
<line x1="400" x2="400" y1="175" y2="195" stroke-width="1"/>
<line x1="440" x2="440" y1="175" y2="195" stroke-width="1"/>
<line x1="460" x2="460" y1="175" y2="195" stroke-width="1"/>
<line x1="500" x2="500" y1="175" y2="195" stroke-width="1"/>
<line x1="520" x2="520" y1="175" y2="195" stroke-width="1"/>
<line x1="560" x2="560" y1="175" y2="195" stroke-width="1"/>
<line x1="+580" x2="+580" y1="175" y2="195" stroke-width="1"/>
<line x1="+620" x2="+620" y1="175" y2="195" stroke-width="1"/>
<line x1="+640" x2="+640" y1="175" y2="195" stroke-width="1"/>
<line x1="+680" x2="+680" y1="175" y2="195" stroke-width="1"/>
<line x1="+700" x2="+700" y1="175" y2="195" stroke-width="1"/>
<line x1="+740" x2="+740" y1="175" y2="195" stroke-width="1"/>
<line x1="+760" x2="+760" y1="175" y2="195" stroke-width="1"/>
<line x1="+800" x2="+800" y1="175" y2="195" stroke-width="1"/>
<line x1="+820" x2="+820" y1="175" y2="195" stroke-width="1"/>
<line x1="+860" x2="+860" y1="175" y2="195" stroke-width="1"/>
<line x1="+880" x2="+880" y1="175" y2="195" stroke-width="1"/>
<line x1="+920" x2="+920" y1="175" y2="195" stroke-width="1"/>
<text x="-180" y="+186" class="markText">270</text>
<text x="-120" y="+186" class="markText">300</text>
<text x="-60" y="+186" class="markText">330</text>
<text x="0" y="+186" class="markText">0</text>
<text x="60" y="+186" class="markText">30</text>
<text x="120" y="+186" class="markText">60</text>
<text x="180" y="+186" class="markText">90</text>
<text x="240" y="+186" class="markText">120</text>
<text x="300" y="+186" class="markText">150</text>
<text x="360" y="+186" class="markText">180</text>
<text x="420" y="+186" class="markText">210</text>
<text x="480" y="+186" class="markText">240</text>
<text x="540" y="+186" class="markText">270</text>
<text x="600" y="+186" class="markText">300</text>
<text x="660" y="+186" class="markText">330</text>
<text x="720" y="+186" class="markText">0</text>
<text x="780" y="+186" class="markText">30</text>
<text x="840" y="+186" class="markText">60</text>
<text x="900" y="+186" class="markText">90</text>
</g>
<g class="pointer">
<polygon points="-150 -3, -78 -3, -75 0, -78 3, -150 3" />
<polygon points="+150 -3, +78 -3, +75 0, +78 3, +150 3" />
<polygon points="-75 25, 0 0, 75 25, 25 25, 25 20, -25 20, -25 25" class="pointerBG" />
<polygon points="-75 25, 0 0, 75 25, 0 10" />
<line x1="0" x2="0" y1="0" y2="10" />
</g>
</g>
</svg>
Side by Side

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 20 KiB

8
web/plates/gps.html
Wyświetl plik

@ -32,9 +32,11 @@
<div class="panel-body">
<div class="row">
<span class="col-xs-12">
<canvas id="ahrs_display">
your web browser doesn't support the &lt;canvas>&gt; element.
</canvas>
<div id="ahrs_display">
<object id="attitude_indicator" data="../img/ai.svg" type="image/svg+xml">
Your browser doesn't support svg.
</object>
</div>
</span>
</div>
<div class="separator"></div>

350
web/plates/js/ahrs.js
Wyświetl plik

@ -1,131 +1,36 @@
function ahrsRenderer(location_id) {
this.gcontext = {}; // globals
this.gl = null;
this.width = -1;
this.height = -1;
this.locationID = location_id;
this.canvas = document.getElementById(location_id);
this.canvas_container = document.getElementById(location_id).parentElement;
var ai = document.getElementById("attitude_indicator"),
_this = this;
this.ps = []
this.rs = []
this.hs = []
this.ss = []
ai.onload = function() {
_this.ps = ai.contentDocument.getElementsByClassName("pitch");
_this.rs = ai.contentDocument.getElementsByClassName("roll");
_this.hs = ai.contentDocument.getElementsByClassName("heading");
_this.ss = ai.contentDocument.getElementsByClassName("slipSkid");
console.log(_this.ps.length);
console.log(_this.rs.length);
console.log(_this.hs.length);
console.log(_this.ss.length);
};
}
ahrsRenderer.prototype = {
constructor: ahrsRenderer,
_init_canvas: function () {
var gl = initWebGL(this.locationID);
if (!gl)
return;
this.gl = gl;
vertex_shader = ' \
uniform mat4 u_modelViewProjMatrix; \
uniform mat4 u_normalMatrix; \
uniform vec3 lightDir; \
attribute vec3 vNormal; \
attribute vec4 vColor; \
attribute vec4 vPosition; \
varying float v_Dot; \
varying vec4 v_Color; \
void main() { \
gl_Position = u_modelViewProjMatrix * vPosition; \
v_Color = vColor; \
vec4 transNormal = u_normalMatrix * vec4(vNormal, 1); \
v_Dot = max(dot(transNormal.xyz, lightDir), 0.0); \
}';
color_shader = '\
precision mediump float; \
varying float v_Dot; \
varying vec4 v_Color; \
void main() { \
gl_FragColor = vec4(v_Color.xyz * v_Dot, v_Color.a); \
}';
var vertexShader = loadShaderVertexScript(gl, vertex_shader);
var colorShader = loadShaderFragmentScript(gl, color_shader);
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, colorShader);
// Bind attributes
gl.bindAttribLocation(program, 0, "vNormal");
gl.bindAttribLocation(program, 1, "vColor");
gl.bindAttribLocation(program, 2, "vPosition");
gl.linkProgram(program);
var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!linked && !gl.isContextLost()) {
// something went wrong with the link
var error = gl.getProgramInfoLog(program);
log("Error in program linking:" + error);
gl.deleteProgram(program);
gl.deleteProgram(fragmentShader);
gl.deleteProgram(vertexShader);
} else {
gl.useProgram(program);
gl.clearColor(0, 0, 0, 0) // rgba for background color
gl.clearDepth(10000); //??
if (false /* funcky blending */ ) {
gl.disable(gl.DEPTH_TEST);
gl.enable(gl.BLEND);
gl.depthFunc(gl.LESS);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
} else {
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
}
this.gcontext.program = program;
}
},
init: function () {
this._init_canvas(); // init the canvas
g = this.gcontext;
gl = this.gl;
if (gl === null)
return;
// Set up a uniform variable for the shaders
gl.uniform3f(gl.getUniformLocation(g.program, "lightDir"), 0, 1, 1); // above and back
// Create a box. On return 'gl' contains a 'box' property with
// the BufferObjects containing the arrays for vertices,
// normals, texture coords, and indices.
// g.box = makeBox(gl);
g.box = this.makePaperAirplane(gl);
// Create some matrices to use later and save their locations in the shaders
g.mvMatrix = new J3DIMatrix4();
g.u_normalMatrixLoc = gl.getUniformLocation(g.program, "u_normalMatrix");
g.normalMatrix = new J3DIMatrix4();
g.u_modelViewProjMatrixLoc =
gl.getUniformLocation(g.program, "u_modelViewProjMatrix");
g.mvpMatrix = new J3DIMatrix4();
gl.enableVertexAttribArray(0); // lighting
gl.enableVertexAttribArray(1); // color
gl.enableVertexAttribArray(2); // vertices
gl.bindBuffer(gl.ARRAY_BUFFER, g.box.vertexObject);
gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, g.box.normalObject);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, g.box.colorObject);
gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0); // was gl.UNSIGNED_BYTE
// Bind the index array
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, g.box.indexObject);
this.pitch = 0;
this.roll = 0;
@ -135,11 +40,6 @@ void main() { \
},
resize: function () {
gl = this.gl;
g = this.gcontext;
if (gl === null)
return;
var canvasWidth = this.canvas_container.offsetWidth - 12; // was (2*(this.canvas_container.offsetLeft)) // account for padding adjustments
if (canvasWidth !== this.width) {
@ -148,37 +48,28 @@ void main() { \
this.canvas.width = this.width;
this.canvas.height = this.height;
// Set the viewport and projection matrix for the scene
gl.viewport(0, 0, this.width, this.height);
g.perspectiveMatrix = new J3DIMatrix4();
g.perspectiveMatrix.perspective(30, this.width / this.height, 1, 10000);
g.perspectiveMatrix.lookat( 0, 0, 4, // eye location
0, 0, 0, // focal point
0, 1, 0); // up vector
}
},
orientation: function (x, y, z) {
if (x > 360) x -= 360;
if (y > 360) y -= 360;
if (z > 360) z -= 360;
this.pitch = x; // need to reorient to level
this.roll = y;
this.heading = z;
orientation: function (pitch, roll, heading) {
// Assume we receive valid pitch, roll, heading
this.pitch = pitch;
this.roll = roll;
this.heading = heading;
},
animate: function (t, x, y, z) {
var FPS = 24; // we assume we can maintain a certain frame rate
var x_inc = ((x - this.pitch) / (FPS * t));
var y_inc = ((y - this.roll) / (FPS * t));
if ((z < this.heading) && (this.heading - z) > 180) {
// let the animation wrap aroung gracefully clockwise
z += 360;
} else if ((z > this.heading) && (z - this.heading) > 180) {
// let the animation wrap aroung gracefully counter clockwise
animate: function (t, pitch, roll, heading) {
var FPS = 100; // we assume we can maintain a certain frame rate
var x_inc = ((pitch - this.pitch) / (FPS * t));
var y_inc = ((roll - this.roll) / (FPS * t));
if ((heading < this.heading) && (this.heading - heading) > 180) {
// let the animation wrap around gracefully clockwise
heading += 360;
} else if ((heading > this.heading) && (heading - this.heading) > 180) {
// let the animation wrap around gracefully counter clockwise
this.heading += 360;
}
var z_inc = ((z - this.heading) / (FPS * t));
var z_inc = ((heading - this.heading) / (FPS * t));
var _this = this;
//console.log(z_inc);
var frames = 0;
@ -188,166 +79,31 @@ void main() { \
_this.heading += z_inc;
if (frames < (FPS * t)) {
_this.draw();
frames++
window.requestAnimationFrame(f, _this.canvas); // recurse
frames++;
window.requestAnimationFrame(f); // recurse
} else {
_this.orientation(x, y, z);
_this.orientation(pitch, roll, heading);
}
};
f();
},
draw: function () {
this.resize();
gl = this.gl;
g = this.gcontext;
if (gl === null)
return;
draw: function() {
for (i=0; i<this.ps.length; i++) {
console.log("pitch " + i);
this.ps[i].setAttribute("transform", "translate(0,"+this.pitch*10+")")
}
// Clear the canvas
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
for (i=0; i<this.rs.length; i++) {
this.rs[i].setAttribute("transform", "rotate("+(-this.roll)+")")
}
// Make a model/view matrix.
g.mvMatrix.makeIdentity();
for (i=0; i<this.hs.length; i++) {
this.hs[i].setAttribute("transform", "translate("+(-this.heading*2)+",0)")
}
g.mvMatrix.rotate(15, 1, 0, 0); // adjust viewing angle slightly by pitching the airplane up
g.mvMatrix.rotate(this.pitch, 1, 0, 0);
g.mvMatrix.rotate(-this.roll, 0, 0, 1);
g.mvMatrix.rotate(-this.heading, 0, 1, 0);
// Construct the normal matrix from the model-view matrix and pass it in
g.normalMatrix.load(g.mvMatrix);
g.normalMatrix.invert();
g.normalMatrix.transpose();
g.normalMatrix.setUniform(gl, g.u_normalMatrixLoc, false);
// Construct the model-view * projection matrix and pass it in
g.mvpMatrix.load(g.perspectiveMatrix);
g.mvpMatrix.multiply(g.mvMatrix);
g.mvpMatrix.setUniform(gl, g.u_modelViewProjMatrixLoc, false);
// Draw the object
gl.drawElements(gl.TRIANGLES, g.box.numIndices, gl.UNSIGNED_BYTE, 0);
},
makePaperAirplane: function (ctx) {
// Return an object with the following properties:
// normalObject WebGLBuffer object for normals (for lighting)
// vertexObject WebGLBuffer object for vertices (actual 3d object)
// indexObject WebGLBuffer object for indices (index of triangles within object)
// numIndices The number of indices in the indexObject (number of triangles)
// constants to make it easy to adjust the proportions and axis of the object
var LENGTH = 1; var WIDTH = 1; var DEPTH = 0.33; var SPREAD = 0.1;
var CENTERX = 0; var CENTERY = 0; var CENTERZ = 0.5;
// vertex coords array
var vertices = new Float32Array([
CENTERX, CENTERY, -LENGTH-CENTERZ,
-WIDTH, CENTERY, LENGTH-CENTERZ,
-SPREAD, CENTERY, LENGTH-CENTERZ, // left wing
CENTERX, CENTERY, -LENGTH-CENTERZ,
CENTERX, -DEPTH, LENGTH-CENTERZ,
-SPREAD, CENTERY, LENGTH-CENTERZ, // left center section
CENTERX, CENTERY, -LENGTH-CENTERZ,
CENTERX, -DEPTH, LENGTH-CENTERZ,
SPREAD, CENTERY, LENGTH-CENTERZ, // right center section
CENTERX, CENTERY, -LENGTH-CENTERZ,
WIDTH, CENTERY, LENGTH-CENTERZ,
SPREAD, CENTERY, LENGTH-CENTERZ // right wing
]);
// normal array for light reflection and shading
var normals = new Float32Array([
0, 1, 0,
0, 1, 0,
0, 1, 0, // left wing actual perpendicular is up
1, 1, 0,
1, 1, 0,
1, 1, 0, // left center section estmated perpendicular is right
-1, 1, 0,
-1, 1, 0,
-1, 1, 0, // right center section estmated perpendicular is left
0, 1, 0,
0, 1, 0,
0, 1, 0 // right wing actual perpendicular is up
]);
// index array
var indices = new Uint8Array([
0, 1, 2, // left wing
3, 4, 5, // left center section
6, 7, 8, // right center section
9, 10, 11 // right wing
]);
// Set up the array of colors for the cube's faces
// the tip of the paper aiplane is lighter and then a gradiant back to red for teh left and a green for the right
var colors_rg = new Uint8Array([
1, 0, 0, 1,
1, 0, 0, 1,
1, 0, 0, 1, // left wing
1, 0, 0, 1,
1, 0, 0, 1,
1, 0, 0, 1, // left center section
0, 1, 0, 1,
0, 1, 0, 1,
0, 1, 0, 1, // right center section
0, 1, 0, 1,
0, 1, 0, 1,
0, 1, 0, 1 // right wing
]);
var colors_bt = new Float32Array([
.21, .31, .49, 1,
.21, .31, .49, 1,
.21, .31, .49, 1,
.21, .31, .49, 1,
.21, .31, .49, 1,
.21, .31, .49, 1,
.39, .38, .22, 1,
.39, .38, .22, 1,
.39, .38, .22, 1,
.39, .38, .22, 1,
.39, .38, .22, 1,
.39, .38, .22, 1
]);
var retval = {};
retval.vertexObject = ctx.createBuffer();
ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.vertexObject);
ctx.bufferData(ctx.ARRAY_BUFFER, vertices, ctx.STATIC_DRAW);
retval.normalObject = ctx.createBuffer();
ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.normalObject);
ctx.bufferData(ctx.ARRAY_BUFFER, normals, ctx.STATIC_DRAW);
ctx.bindBuffer(ctx.ARRAY_BUFFER, null);
retval.indexObject = ctx.createBuffer();
ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, retval.indexObject);
ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, indices, ctx.STATIC_DRAW);
ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, null);
// Set up the vertex buffer for the colors
retval.colorObject = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, retval.colorObject);
gl.bufferData(gl.ARRAY_BUFFER, colors_bt, gl.STATIC_DRAW);
retval.numIndices = indices.length;
return retval;
for (i=0; i<this.ss.length; i++) {
this.ss[i].setAttribute("transform", "translate("+(-this.slipSkid*2)+",0)")
}
}
}
};

18
web/plates/js/gps.js
Wyświetl plik

@ -50,7 +50,7 @@ function GPSCtrl($rootScope, $scope, $state, $http, $interval) {
$scope.map_mark_x = Math.round((div_width - (font_size * 0.85)) / 2);
$scope.map_mark_y = Math.round((div_height - font_size) / 2);
};
}
function loadStatus(data) { // mySituation
@ -104,19 +104,19 @@ function GPSCtrl($rootScope, $scope, $state, $http, $interval) {
setGeoReferenceMap(status.Lat, status.Lng);
// $scope.$apply();
};
}
function getStatus() {
// Simple GET request example (note: responce is asynchronous)
$http.get(URL_GPS_GET).
then(function (response) {
loadStatus(response.data);
ahrs.animate(1, $scope.ahrs_pitch, $scope.ahrs_roll, $scope.ahrs_heading);
ahrs.animate(0.1, $scope.ahrs_pitch, $scope.ahrs_roll, $scope.ahrs_heading);
// $scope.$apply();
}, function (response) {
$scope.raw_data = "error getting gps / ahrs status";
});
};
}
function getSatellites() {
// Simple GET request example (note: response is asynchronous)
@ -126,7 +126,7 @@ function GPSCtrl($rootScope, $scope, $state, $http, $interval) {
}, function (response) {
$scope.raw_data = "error getting satellite data";
});
};
}
function setSatellite(obj, new_satellite) {
new_satellite.SatelliteNMEA = obj.SatelliteNMEA;
@ -157,10 +157,10 @@ function GPSCtrl($rootScope, $scope, $state, $http, $interval) {
}
var updateStatus = $interval(function () {
// refresh GPS/AHRS status once each half second (aka polling)
// refresh GPS/AHRS status once each 200 milliseconds (aka polling)
getStatus();
getSatellites();
}, (1 * 500), 0, false);
}, (2 * 100), 0, false);
$state.get('gps').onEnter = function () {
// everything gets handled correctly by the controller
@ -175,6 +175,6 @@ function GPSCtrl($rootScope, $scope, $state, $http, $interval) {
// GPS/AHRS Controller tasks go here
var ahrs = new ahrsRenderer("ahrs_display");
ahrs.init();
ahrs.orientation(0, 0, 0);
ahrs.orientation(0, 0, 90);
};
}