Skip to content

Commit adced66

Browse files
jtguggedaljtguggedal
committed
Separert html, css og js i egne filer
1 parent 9182ec3 commit adced66

File tree

4 files changed

+265
-220
lines changed

4 files changed

+265
-220
lines changed

‎css/controllers.css

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
2+
/*** Stylesheet for game controllers ***/
3+
4+
5+
#joystick-container, #button-container {
6+
display: inline-block;
7+
}
8+
9+
10+
#joystick-container {
11+
width: 200px;
12+
height: 200px;
13+
background-color: #EEE;
14+
border-radius: 100%;
15+
background-color: #0b4251;
16+
17+
}
18+
19+
#button-container {
20+
float: right;
21+
padding-right: 0px;
22+
background-color: ;
23+
height: 320px;
24+
width: 150px;
25+
}
26+
27+
#control-button {
28+
width: 75px;
29+
height: 75px;
30+
margin: 100px auto;
31+
background-color: white;
32+
box-shadow: 0px 0px 30px 0px rgba(0,0,0, 0.2);
33+
border: 4px solid #0b4251;
34+
border-radius: 100%;
35+
36+
}

‎include/controllers.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
2+
3+
<!-- Controllers: joystick and button -->
4+
5+
<div id="control-container">
6+
7+
<div id="joystick-container">
8+
</div>
9+
10+
<div id="button-container">
11+
<div id="control-button">
12+
</div>
13+
</div>
14+
</div>
15+
16+
17+

‎joy.html

+1-220
Original file line numberDiff line numberDiff line change
@@ -200,226 +200,7 @@ <h2 onclick="printDiscardedPackets();">Tapte pakker</h2>
200200

201201

202202

203-
204-
205-
206-
<script>
207-
208-
209-
210-
var charVal = new Uint8Array(20);
211-
212-
var outputRight;
213-
var outputLeft;
214-
var tapEnd = 1;
215-
216-
var writePermission = 1;
217-
var discardedPackets = [];
218-
219-
var priorityPacket = 0;
220-
221-
222-
223-
224-
$('#LEDp').on("click change tapend", function() {
225-
setBit(1,'b',240);
226-
if(tapEnd == 1) {
227-
writeToCharacteristic(1, 240, charVal);
228-
}
229-
230-
})
231-
232-
$('#LEDa').on("click change tapend", function() {
233-
setBit(1,'b',0);
234-
if(tapEnd == 1) {
235-
writeToCharacteristic(1, 0, charVal);
236-
}
237-
238-
})
239-
240-
241-
242-
243-
244-
function printDiscardedPackets() {
245-
console.log(discardedPackets);
246-
}
247-
248-
//*** Joystick
249-
var joystickContainer = document.getElementById('joystick-container');
250-
var joystick = new VirtualJoystick({
251-
container: joystickContainer,
252-
mouseSupport: true,
253-
stationaryBase: true,
254-
baseX: 100,
255-
baseY: 100,
256-
limitStickTravel: true,
257-
stickRadius: 100
258-
});
259-
260-
261-
262-
263-
////////////////////////////////////
264-
265-
// Funksjon for at joysticken skal gå tilbake til nullpunktet når den slippes
266-
267-
268-
$('#joystick-container').on('change touchmove mousemove', function() {
269-
var x = joystick.deltaX();
270-
var y = -1*joystick.deltaY();
271-
var hypotenus = Math.sqrt((Math.pow(x, 2)) + (Math.pow(y, 2)));
272-
var speed = Math.round((255/100)*hypotenus);
273-
var angle = (180/Math.PI)*Math.acos(x/hypotenus);
274-
var directionRight, directionLeft;
275-
276-
if(y < 0) {
277-
angle = 360 - angle;
278-
directionRight = directionLeft = 0;
279-
} else {
280-
directionRight = directionLeft = 1;
281-
}
282-
283-
angle = Math.round(angle);
284-
285-
if(speed > 255)
286-
speed = 255;
287-
288-
if(tapEnd == 1) {
289-
outputRight = outputLeft = 0;
290-
tapEnd = 0;
291-
} else {
292-
if(angle >= 10 && angle <= 85) {
293-
outputRight = (angle/85)*speed;
294-
outputLeft = speed;
295-
} else if(angle > 85 && angle < 95) {
296-
outputLeft = outputRight = speed;
297-
} else if(angle >= 95 && angle <= 160) {
298-
outputRight = speed;
299-
outputLeft = ((180-angle)/80)*speed;;
300-
} else if(angle > 160 && angle < 200) {
301-
outputRight = speed;
302-
directionRight = 1;
303-
outputLeft = speed;
304-
directionLeft = 0;
305-
} else if(angle >= 200 && angle <= 260) {
306-
outputRight = speed;
307-
outputLeft = ((angle-180)/80)*speed;
308-
} else if(angle > 260 && angle < 280) {
309-
outputRight = outputLeft = speed;
310-
} else if(angle >= 280 && angle <= 340) {
311-
outputRight = ((360-angle)/80)*speed;
312-
outputLeft = speed;
313-
} else if(angle > 340 || angle < 20) {
314-
outputRight = speed;
315-
directionRight = 0;
316-
outputLeft = speed;
317-
directionLeft = 1;
318-
}
319-
320-
}
321-
322-
$('#pos-x').html('x: ' + x + 'px');
323-
$('#pos-y').html('y: ' + y + 'px');
324-
$('#speed').html('Hastighet: ' + speed);
325-
$('#angle').html('Vinkel: ' + angle);
326-
$('#output-left').html('Pådrag V: ' + Math.round(outputLeft));
327-
$('#output-right').html('Pådrag H: ' + Math.round(outputRight));
328-
329-
$("#sliderLeft").val(outputLeft);
330-
$("#sliderRight").val(outputRight);
331-
332-
333-
// Sjekker i hvilket intervall slider-verdien er, og sender korresponderende verdi
334-
// via BLE til firmware.
335-
// Setter 1. bit lik 1 for å tenne 1. LED osv.
336-
337-
charVal[10] = outputRight; // Motor 1
338-
charVal[14] = directionRight;
339-
340-
charVal[11] = outputLeft; // Motor 2
341-
charVal[15] = directionLeft;
342-
343-
charVal[12] = outputLeft; // Motor 3
344-
charVal[16] = directionLeft;
345-
346-
charVal[13] = outputRight; // Motor 4
347-
charVal[17] = directionRight;
348-
349-
console.log('params set');
350-
351-
352-
353-
if( readWriteCharacteristic && (writePermission == 1) && (priorityPacket != 1)) {
354-
writePermission = 0;
355-
356-
return readWriteCharacteristic.writeValue(charVal)
357-
.then( writeReturn => {
358-
writePermission = 1;
359-
console.log('Sendt: ' + charVal);
360-
});
361-
} else {
362-
discardedPackets.push(charVal);
363-
}
364-
365-
366-
367-
368-
});
369-
370-
371-
372-
373-
$('#joystick-container').on("tapend", function() {
374-
375-
$('#pos-x').html('x: 0px reset');
376-
$('#pos-y').html('y: 0px reset ');
377-
378-
$('#speed').html('Hastighet: 0');
379-
$('#angle').html('Vinkel: 0');
380-
381-
$('#output-left').html('Pådrag V: 0');
382-
$('#output-right').html('Pådrag H: 0');
383-
384-
$("#sliderLeft").val(0);
385-
$("#sliderRight").val(0);
386-
387-
tapEnd = 1;
388-
389-
charVal[10] = 0;
390-
charVal[11] = 0;
391-
charVal[12] = 0;
392-
charVal[13] = 0;
393-
394-
setTimeout(function(){
395-
if(writePermission)
396-
readWriteCharacteristic.writeValue(charVal);
397-
else {
398-
setTimeout(function(){
399-
readWriteCharacteristic.writeValue(charVal);
400-
}, 300);
401-
}
402-
403-
}, 100);
404-
405-
406-
});
407-
408-
$('#control-button').on('touchstart', function(event) {
409-
$(this).css({'box-shadow': '0px 0px 10px 3px rgba(0,0,0, 0.2)', 'height': '70px', 'width': '70px'});
410-
setBit(1,'b',240);
411-
priorityWrite(charVal);
412-
event.preventDefault();
413-
414-
});
415-
$('#control-button').on('touchend', function() {
416-
$(this).css({'box-shadow': '0px 0px 30px 10px rgba(0,0,0, 0.15)', 'height': '75px', 'width': '75px'});
417-
setBit(1,'b',0);
418-
priorityWrite(charVal);
419-
});
420-
421-
</script>
422-
203+
<script src="js/demo.js"></script>
423204

424205
</body>
425206
</html>

0 commit comments

Comments
 (0)