Skip to content

Commit 8742ffc

Browse files
jtguggedaljtguggedal
committed
Initial commit for control interface, fixed receiveing of original PID in tuning page
1 parent 18187d5 commit 8742ffc

15 files changed

+737
-15
lines changed

‎img/Thumbs.db

30.5 KB
Binary file not shown.

‎quadcopter/control.html

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
2+
<!doctype html>
3+
<html lang="en">
4+
<head>
5+
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta name="description" content="Physical Web RC Car">
9+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
10+
<script src="js/ble.js"></script>
11+
<link rel="stylesheet" type="text/css" href="css/slotmachine.css"></link>
12+
<link rel="stylesheet" type="text/css" href="css/control.css?"></link>
13+
<link rel="stylesheet" type="text/css" href="css/controllers.css"></link>
14+
15+
<title>Quadcopter</title>
16+
17+
</head>
18+
19+
<body>
20+
<div id="orientation-message">
21+
<div>Please rotate the device 90&#176;
22+
<div id="rotate-img">
23+
<img src="img/rotate.png">
24+
</div>
25+
</div>
26+
</div>
27+
<div id="connectionStatus">Connection status</div>
28+
29+
<div id="fullscreen" onclick="">Click for fullscreen</div>
30+
31+
<div id="main">
32+
33+
<h1 id="welcome">Quadcopter</h1>
34+
<div id="main-message">
35+
<div onclick="game_init();" id='connect' class="button-main-menu">
36+
Connect
37+
</div>
38+
</div>
39+
40+
41+
</div>
42+
<div id="footer">
43+
<img src="img/nordic.png" id="nordiclogo" class="footer-logo"></img>
44+
</div>
45+
46+
<script>
47+
48+
//*** Initialize game **/
49+
50+
function game_init() {
51+
toggleFullscreen();
52+
ble.connect();
53+
$('#fullscreen').show();
54+
$('#footer').hide();
55+
$('#connectionStatus').fadeIn();
56+
var time = new Date();
57+
var e = time.getTime();
58+
setTimeout(function() {
59+
$('#main').load('controllers.html?t=' + e);
60+
}, 1000);
61+
}
62+
63+
64+
</script>
65+
66+
67+
68+
<script>
69+
// Enable fullscreen
70+
function toggleFullscreen(elem) {
71+
elem = elem || document.documentElement;
72+
if (!document.fullscreenElement && !document.mozFullScreenElement &&
73+
!document.webkitFullscreenElement && !document.msFullscreenElement) {
74+
if (elem.requestFullscreen) {
75+
elem.requestFullscreen();
76+
} else if (elem.msRequestFullscreen) {
77+
elem.msRequestFullscreen();
78+
} else if (elem.mozRequestFullScreen) {
79+
elem.mozRequestFullScreen();
80+
} else if (elem.webkitRequestFullscreen) {
81+
elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
82+
}
83+
$('#fullscreen').show();
84+
$('#fullscreen').html("Exit fullscreen");
85+
} else {
86+
if (document.exitFullscreen) {
87+
document.exitFullscreen();
88+
} else if (document.msExitFullscreen) {
89+
document.msExitFullscreen();
90+
} else if (document.mozCancelFullScreen) {
91+
document.mozCancelFullScreen();
92+
} else if (document.webkitExitFullscreen) {
93+
document.webkitExitFullscreen();
94+
}
95+
$('#fullscreen').html("Fullscreen");
96+
}
97+
}
98+
99+
document.getElementById('fullscreen').addEventListener('click', function() {
100+
toggleFullscreen();
101+
});
102+
103+
(function() {
104+
var time = new Date();
105+
var e = time.getTime();
106+
$('head').append('<link rel="stylesheet" href="css/settings.css?' + e + '" type="text/css" />');
107+
})();
108+
109+
110+
</script>
111+
112+
113+
114+
115+
116+
</body>
117+
</html>

‎quadcopter/css/control.css

+169
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
/* Link til fargekoder i hex: http://www.w3schools.com/colors/colors_picker.asp */
2+
@import url(https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,500,700|Lato:400,500,700,300,100|Alegreya+Sans);
3+
4+
html {
5+
margin: 0;
6+
padding: 0;
7+
background: -moz-radial-gradient(center, ellipse cover, rgba(29, 76, 122, 1) 0%, rgba(0,0,0,0.97) 100%);
8+
background: -webkit-radial-gradient(center, ellipse cover, rgba(29, 76, 122, 1) 0%,rgba(0,0,0,0.97) 100%);
9+
background: radial-gradient(ellipse at center, rgba(29, 76, 122, 1) 0%, rgba(8, 21, 34, 1) 100%);
10+
11+
}
12+
body {
13+
position: absolute;
14+
font-family: "Lato";
15+
margin: 0;
16+
padding: 0px;
17+
width: 100%;
18+
height: 100%;
19+
text-align: center;
20+
min-height: 420px;
21+
overflow: hidden;
22+
background: #F9F9F9;
23+
background-size: cover;
24+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c4e91', endColorstr='#f7000000',GradientType=1 );
25+
overflow: hidden;
26+
-webkit-user-select: none;
27+
-moz-user-select: none;
28+
-ms-user-select: none;
29+
user-select: none;
30+
}
31+
32+
#footer {
33+
height: 40px;
34+
width: 100%;
35+
background-color: #052033;
36+
position: fixed;
37+
bottom: 0;
38+
margin: 0;
39+
clear: both;
40+
vertical-align: middle;
41+
z-index: 10;
42+
box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.4);
43+
}
44+
45+
.footer-logo {
46+
height: 18px;
47+
margin: 12px 30px 0 30px;
48+
}
49+
50+
#main {
51+
width: 100%;
52+
height: 100%;
53+
margin-top: 10px;
54+
margin-left: auto;
55+
margin-right: auto;
56+
}
57+
58+
#main-message {
59+
margin-top: 60px;
60+
}
61+
62+
h1 {
63+
color: #444;
64+
font-size: 50px;
65+
text-align: center;
66+
margin: 25px auto 30px auto;
67+
text-shadow: 1px 1px 15px rgba(0, 0, 0, 0);
68+
font-family: "Alegreya Sans";
69+
width: 100%;;
70+
border-radius: 3px;
71+
padding: 30px 0 0px 0;
72+
/*background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
73+
background-color: rgba(214, 10, 10, 0);
74+
box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.0);*/
75+
}
76+
77+
h2 {
78+
color: #FFF;
79+
font-size: 35px;
80+
text-align: center;
81+
margin: 0 auto;
82+
text-shadow: 0px 0px 13px rgba(0, 0, 0, 0.3);
83+
font-family: "Alegreya Sans";
84+
width: 100%;;
85+
border-radius: 3px;
86+
padding: 5px 0 5px 0;
87+
/*background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
88+
background-color: rgba(214, 10, 10, 0);
89+
box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.0);*/
90+
box-sizing: border-box;
91+
}
92+
93+
h3 {
94+
color: white;
95+
text-align: center;
96+
margin-left: auto;
97+
margin-right: auto;
98+
}
99+
100+
input[type=range] {
101+
display: inline-block;
102+
width: 50px;
103+
height: 100px;
104+
writing-mode: bt-lr; /* IE */
105+
-webkit-appearance: slider-vertical; /* WebKit */
106+
}
107+
108+
#connectionStatus {
109+
display: none;
110+
padding: 2px 5px;
111+
background-color: rgb(195, 7, 12);
112+
color: white;
113+
visibility: ;
114+
text-align: center;
115+
border: 1px solid #CCC;
116+
border-radius: 2px;
117+
position: fixed;
118+
margin-left: auto;
119+
margin-right: auto;
120+
top: 10px;
121+
right: 10px;
122+
font-size: 12px;
123+
}
124+
125+
/* Button to activate fullscreen */
126+
127+
#fullscreen {
128+
display: none;
129+
cursor: pointer;
130+
position: fixed;
131+
top: 0px;
132+
left: 0px;
133+
padding: 4px;
134+
background-color: #222;
135+
color: white;
136+
z-index: 10;
137+
}
138+
139+
/**** Message if portrait orientation *****/
140+
141+
#orientation-message {
142+
display: none;
143+
}
144+
145+
@media screen and (orientation:portrait)
146+
{
147+
#orientation-message {
148+
display: block;
149+
position: fixed;
150+
width: 100%;
151+
height: 100%;
152+
font-size: 25px;
153+
background: -moz-radial-gradient(center, ellipse cover, rgba(29, 76, 122, 1) 0%, rgba(0,0,0,0.97) 100%);
154+
background: -webkit-radial-gradient(center, ellipse cover, rgba(29, 76, 122, 1) 0%,rgba(0,0,0,0.97) 100%);
155+
background: radial-gradient(ellipse at center, rgba(29, 76, 122, 1) 0%, rgba(8, 21, 34, 1) 100%);
156+
color: white;
157+
margin: 0;
158+
padding: 0;
159+
vertical-align: middle;
160+
text-align: center;
161+
font-weight: 700;
162+
padding-top: 200px;
163+
z-index: 1000;
164+
}
165+
#rotate-img img{
166+
width: 100px;
167+
margin-top: 100px;
168+
}
169+
}

0 commit comments

Comments
 (0)