Skip to content

Commit 816cdad

Browse files
odwdincodwdinc
committed
Added Attitude Indicator
Added /attitude-indicator Addaped from to https://github.com/saasmath/attitude-indicator
1 parent 0310304 commit 816cdad

File tree

7 files changed

+494
-0
lines changed

7 files changed

+494
-0
lines changed

Diff for: ‎glass_server.py

+5
Original file line numberDiff line numberDiff line change
@@ -274,6 +274,11 @@ def glass():
274274
return render_template("glass.html")
275275

276276

277+
@app.route('/attitude-indicator')
278+
def AttInd():
279+
return render_template("attitude-indicator/index.html")
280+
281+
277282
def get_dataset(data_type):
278283
if data_type == "navigation": request_to_action = request_location
279284
if data_type == "airspeed": request_to_action = request_airspeed

Diff for: ‎static/css/attind_style.css

+332
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,332 @@
1+
.casing {
2+
background: #111 url("../img/metal.jpg") repeat;
3+
border: 1px solid #aaa;
4+
border-radius: 10px;
5+
box-shadow: 0 0 10px #000;
6+
padding: 20px;
7+
height: 334px;
8+
width: 334px;
9+
}
10+
11+
.inner-case {
12+
background: #222;
13+
border: 2px solid #333;
14+
border-radius: 165px;
15+
box-shadow: 0 0 10px #000;
16+
height: 300px;
17+
overflow: hidden;
18+
padding: 15px;
19+
}
20+
21+
.case-control {
22+
box-shadow: 0px 2px 0px #333;
23+
border-bottom: 1px solid #555;
24+
height: 230px;
25+
overflow: hidden;
26+
}
27+
28+
/* panel */
29+
.panel {
30+
box-shadow: 0 0 10px #111;
31+
border-radius: 30px 30px 300px 300px;
32+
background: #333;
33+
color: #aaa;
34+
font-family: Arial;
35+
margin: 13px 0 0 55px;
36+
width: 190px;
37+
height: 40px;
38+
}
39+
.panel ul {
40+
padding: 0;
41+
}
42+
.panel li {
43+
list-style-type: none;
44+
float: left;
45+
}
46+
47+
/* labels */
48+
.labels li {
49+
margin: 3px 8px;
50+
}
51+
.labels li:nth-child(3) {
52+
margin-left: 25px;
53+
}
54+
55+
/* lights */
56+
.light {
57+
background: #555;
58+
border-radius: 10px;
59+
height: 10px;
60+
margin: 0 23px;
61+
width: 10px;
62+
}
63+
.light:nth-child(3) {
64+
margin-left: 42px;
65+
}
66+
.light.on {
67+
box-shadow: 0 0 8px #3f3;
68+
background: #6f6;
69+
}
70+
.light.off {
71+
box-shadow: 0 0 8px #f33;
72+
background: #f66;
73+
}
74+
75+
.weight {
76+
position: absolute;
77+
height: 300px;
78+
width: 300px;
79+
z-index: 3;
80+
}
81+
82+
.aircraft div {
83+
background: #e98219;
84+
border-radius: 5px;
85+
box-shadow: 0 0 6px #000;
86+
position: absolute;
87+
top: 150px;
88+
height: 5px;
89+
}
90+
91+
/* up-chevron */
92+
.up-chevron {
93+
position: relative;
94+
top: 50px;
95+
left: 140px;
96+
}
97+
.up-chevron div {
98+
background: #e98219;
99+
border-radius: 5px;
100+
box-shadow: 0 0 6px #000;
101+
position: absolute;
102+
width: 5px;
103+
}
104+
.up-chevron div:nth-child(1),
105+
.up-chevron div:nth-child(2) {
106+
height: 35px;
107+
}
108+
.up-chevron div:nth-child(3) {
109+
height: 25px;
110+
}
111+
.up-chevron div:nth-child(1) {
112+
box-shadow: 2px 0px 2px #555;
113+
transform: rotate(-20deg);
114+
top: 0;
115+
left: 11px;
116+
}
117+
.up-chevron div:nth-child(2) {
118+
box-shadow: -2px 0px 2px #555;
119+
transform: rotate(20deg);
120+
top: 0;
121+
left: 0;
122+
}
123+
.up-chevron div:nth-child(3) {
124+
box-shadow: 2px 0px 2px #555;
125+
transform: rotate(90deg);
126+
top: 19px;
127+
left: 5px;
128+
}
129+
130+
.left {
131+
left: 80px;
132+
width: 50px;
133+
}
134+
135+
.centre {
136+
left: 150px;
137+
width: 5px;
138+
}
139+
140+
.right {
141+
left: 175px;
142+
width: 50px;
143+
}
144+
145+
.sky {
146+
background: #558ebb;
147+
}
148+
149+
.terrain {
150+
background: #503723;
151+
}
152+
153+
.mechanism {
154+
transform: rotate(0deg); /* dynamic */
155+
}
156+
157+
/* back */
158+
.back.sky {
159+
border-radius: 150px 150px 0 0;
160+
height: 150px;
161+
width: 300px;
162+
}
163+
.back.terrain {
164+
border-radius: 0 0 150px 150px;
165+
height: 150px;
166+
width: 300px;
167+
}
168+
169+
.roll {
170+
border-top: 50px solid #558ebb;
171+
border-right: 50px solid #558ebb;
172+
border-bottom: 50px solid #503723;
173+
border-left: 50px solid #503723;
174+
border-radius: 200px;
175+
box-shadow: inset 0 0 20px #000;
176+
transform: rotate(-45deg);
177+
position: absolute;
178+
top: 0;
179+
left: 0;
180+
height: 200px;
181+
width: 200px;
182+
z-index: 2;
183+
}
184+
185+
/* roll-lines */
186+
.roll-lines {
187+
transform: rotate(45deg);
188+
position: absolute;
189+
}
190+
.roll-lines div {
191+
background: #fff;
192+
position: absolute;
193+
height: 4px;
194+
width: 40px;
195+
}
196+
197+
#ninety-left,
198+
#ninety-right {
199+
width: 50px;
200+
top: -1px;
201+
}
202+
#ninety-left {
203+
left: -9px;
204+
}
205+
#ninety-right {
206+
left: 242px;
207+
}
208+
209+
#zero {
210+
background: none;
211+
border-left: 15px solid transparent;
212+
border-right: 15px solid transparent;
213+
border-top: 40px solid #fff;
214+
top: -140px;
215+
left: 126px;
216+
height: 0;
217+
width: 0;
218+
}
219+
220+
#fortyfive-left,
221+
#fortyfive-right {
222+
background: none;
223+
border-left: 5px solid transparent;
224+
border-right: 5px solid transparent;
225+
border-top: 15px solid #fff;
226+
top: -81px;
227+
left: 57px;
228+
height: 0;
229+
width: 0;
230+
}
231+
#fortyfive-left {
232+
transform: rotate(-45deg);
233+
}
234+
#fortyfive-right {
235+
transform: rotate(45deg);
236+
left: 215px;
237+
}
238+
#thirty-left,
239+
#thirty-right {
240+
top: -60px;
241+
}
242+
#thirty-left {
243+
transform: rotate(30deg);
244+
left: 16px;
245+
}
246+
#thirty-right {
247+
transform: rotate(-30deg);
248+
left: 227px;
249+
}
250+
#sixty-left,
251+
#sixty-right {
252+
top: -105px;
253+
}
254+
#sixty-left {
255+
transform: rotate(60deg);
256+
left: 60px;
257+
}
258+
#sixty-right {
259+
transform: rotate(-60deg);
260+
left: 183px;
261+
}
262+
263+
.ball {
264+
position: absolute;
265+
border-radius: 75px;
266+
box-shadow: 0 0 10px #000;
267+
left: 50px;
268+
top: 75px; /* dynamic */
269+
z-index: 1;
270+
}
271+
272+
/* pitch-lines */
273+
.pitch-lines {
274+
position: absolute;
275+
padding: 8px 70px;
276+
}
277+
.pitch-lines div {
278+
background: #fff;
279+
margin-top: 12px;
280+
height: 2px;
281+
width: 25px;
282+
}
283+
.pitch-lines .small {
284+
margin-left: 18px;
285+
}
286+
287+
#ten,
288+
#minus-ten {
289+
margin-left: 10px;
290+
width: 40px;
291+
}
292+
#twenty,
293+
#minus-twenty {
294+
width: 60px;
295+
}
296+
#minus-five {
297+
margin-top: 24px;
298+
}
299+
300+
/* ball */
301+
.ball .sky {
302+
width: 200px;
303+
height: 75px;
304+
background-image: linear-gradient(top, #558ebb, #9ccbe5);
305+
border-radius: 100px 100px 0 0;
306+
border-bottom: 2px solid #fff;
307+
}
308+
.ball .terrain {
309+
width: 200px;
310+
height: 75px;
311+
background-image: linear-gradient(top, #553a29, #3d2618);
312+
border-radius: 0 0 100px 100px;
313+
}
314+
315+
.cage-toggle {
316+
background: #222;
317+
border: 2px solid #333;
318+
border-radius: 40px;
319+
box-shadow: 0 0 10px #000;
320+
color: #aaa;
321+
font-family: Arial;
322+
font-size: 10px;
323+
height: 40px;
324+
line-height: 13px;
325+
left: 315px;
326+
padding: 5px;
327+
position: absolute;
328+
top: 315px;
329+
text-align: center;
330+
transform: rotate(-34deg);
331+
width: 40px;
332+
}

Diff for: ‎static/img/metal.jpg

14.4 KB
Loading

0 commit comments

Comments
 (0)