fly/fgdata
1
0
Fork 0
Code Activity

Phi: improve the horizon example

Browse source
This commit is contained in:
Torsten Dreyer 2016-05-27 22:20:13 +02:00
parent a635b6d80f
commit 1d4dfbe67b
2 changed files with 58 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
Phi/examples/horizon.html
View file

@ -16,11 +16,49 @@ html, body, #wrapper {
padding: 0;
margin: 0;
border: 0;
overflow: hidden;
}
body {
background-color: #337cf8;
}
#ground {
padding: 0;
margin: 0;
background-color: brown;
position: absolute;
top: 50%;
bottom: -200%;
left: -10%;
right: -10%;
background: brown;
}
#airspeed {
position: absolute;
left: 25%;
width: 4em;
top: 10%;
bottom: 10%;
}
#altitude {
position: absolute;
right: 25%;
width: 4em;
top: 10%;
bottom: 10%;
}
#marker {
position: absolute;
left: 30%;
right: 30%;
top: 50%;
height: 4px;
transform: translateY(-2px);
}
</style>
</head>
@ -32,9 +70,21 @@ body {
<!-- add a brown box for the ground
check http://knockoutjs.com/documentation/style-binding.html for the data-bind syntax
-->
<div id="ground"
style="background-color: brown; width: 100%; height: 50%; position: absolute; bottom: 0;"
data-bind="style: { transform: groundTransform }"></div>
<div id="ground" data-bind="style: { transform: groundTransform }">
<div width="100%" style="padding: 0; margin: 0; border: 1px solid white;"></div>
</div>
<div id="marker">
<div style="width: 30%; float: left; height: 100%; border: 4px solid yellow; border-style: outset; border-radius: 2px; background-color: yellow; box-sizing: border-box;"></div>
<div style="width: 30%; float: right; height: 100%; border: 4px solid yellow; border-style: outset; border-radius: 2px; background-color: yellow; box-sizing: border-box;"></div>
</div>
<div id="airspeed">
<!-- put the airspeed indicator here -->
</div>
<div id="altitude">
<!-- put the altitude indicator here -->
</div>
</div>
</body>

10
Phi/examples/horizon.js
View file

@ -42,15 +42,15 @@ require([
// we want something "rotate(45deg) translate(30%)"
// see http://knockoutjs.com/documentation/computed-pure.html
self.groundTransform = ko.pureComputed(function() {
return "rotate(" + (-self.roll()) + "deg) " + self.groundTranslateTransform();
return "translateY(-50%) rotate(" + (-self.roll()) + "deg) translateY(50%)" + self.groundTranslateTransform();
});
// this little helper just scales and clamps the y-translation
self.groundTranslateTransform = ko.pureComputed(function() {
var t = 100 * (self.pitch() / 45);
if( t > 100 ) t = 100;
if( t < -100 ) t = -100;
return "translateY(" + ( t ) + "%)";
var t = 20 * (self.pitch() / 30);
if( t > 20 ) t = 20;
if( t < -20 ) t = -20;
return "translateY(" + (t) + "%)";
});
}