Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
205 lines (188 sloc) 6.41 KB
<!DOCTYPE html>
<html>
<head>
<title>Interactive Hardware Test</title>
<script src="../lib/js/jquery-1.10.2.min.js"></script>
<script src="../app/js/utils.js"></script>
<script src="../app/js/hardware/hardware.js"></script>
<script src="../app/js/hardware/led.js"></script>
<script src="../app/js/hardware/poti.js"></script>
<script src="../app/js/hardware/pushbutton.js"></script>
<script src="../app/js/hardware/ledmatrix.js"></script>
<script>
// Hardware
$('body').ready(function() {
var buttons = [
new yasp.Hardware({
cb: function(button) {
$('#button_red_state').text(button.state);
},
container: $('#button_red'),
type: yasp.HardwareType.PUSHBUTTON,
params: {
color: 'rgb(255, 0, 0)',
pushcolor: 'rgb(200, 0, 0)'
}
}),
new yasp.Hardware({
cb: function(button) {
$('#button_green_state').text(button.state);
},
container: $('#button_green'),
type: yasp.HardwareType.PUSHBUTTON,
params: {
color: 'rgb(0, 255, 0)',
pushcolor: 'rgb(0, 200, 0)'
}
}),
new yasp.Hardware({
cb: function(button) {
$('#button_blue_state').text(button.state);
},
container: $('#button_blue'),
type: yasp.HardwareType.PUSHBUTTON,
params: {
color: 'rgb(0, 0, 255)',
pushcolor: 'rgb(0, 0, 200)'
}
})
];
var leds = [
new yasp.Hardware({
cb: function(led) {
$('#led_red_state').text(led.state+" "+led.dim);
},
container: $('#led_red'),
type: yasp.HardwareType.LED,
params: {
onColor: 'rgb(255, 0, 0)',
offColor: 'rgb(150,0,0)'
}
}),
new yasp.Hardware({
cb: function(led) {
$('#led_green_state').text(led.state+" "+ledVal);
},
container: $('#led_green'),
type: yasp.HardwareType.LED,
params: {
onColor: 'rgb(0, 255, 0)',
offColor: 'rgb(0,150,0)'
}
}),
new yasp.Hardware({
cb: function(led) {
$('#led_blue_state').text(led.state);
},
container: $('#led_blue'),
type: yasp.HardwareType.LED,
params: {
onColor: 'rgb(0, 0, 255)',
offColor: 'rgb(0,0,255)'
}
})
];
var poti = new yasp.Hardware({
cb: function(poti) {
$('#poti_state').text(poti.state);
},
container: $('#poti'),
type: yasp.HardwareType.POTI,
state: 0
});
leds[2].receiveStateChange(1);
setInterval(function() {
var states = yasp.HardwareType.LED.States;
leds[0].receiveStateChange(!leds[0].state);
}, 1000);
var ledVal = 1;
var dir = 0.05;
var greenLedAn = function() {
leds[1].receiveStateChange(ledVal);
ledVal += dir;
if(ledVal > 1 || ledVal < 0)
dir *= -1;
};
setInterval(greenLedAn, 50);
var ledMatrix = new yasp.Hardware({
cb: function(matrix) {
$('#matrix_state').text(poti.state);
},
container: $('#matrix'),
type: yasp.HardwareType.LEDMatrix,
state: 0,
params: {
width: 8,
height: 8,
onColor: 'rgb(255, 0, 0)',
offColor: 'rgb(150,0,0)'
}
});
});
</script>
<style>
.pushbutton {
width: 40px;
height: 40px;
margin: 8px;
}
.desc {
width: 500px;
float: right;
height: 40px;
margin-top: -35px;
}
.led {
width: 30px;
height: 30px;
margin: 8px;
}
.group {
width: 600px;
height: inherit;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
padding: 8px;
}
.poti {
width: 80px;
height: 80px;
}
.matrix {
width: 256px;
height: 256px;
}
</style>
</head>
<body>
<h1>PushButtons</h1>
<div class="group">
<div id="button_red" class="pushbutton"></div>
<div id="button_red_state" class="desc"></div>
<div id="button_green" class="pushbutton"></div>
<div id="button_green_state" class="desc"></div>
<div id="button_blue" class="pushbutton"></div>
<div id="button_blue_state" class="desc"></div>
</div>
<h1>LED</h1>
<div class="group">
<div id="led_red" class="led"></div>
<div id="led_red_state" class="desc"></div>
<div id="led_green" class="led"></div>
<div id="led_green_state" class="desc"></div>
<div id="led_blue" class="led"></div>
<div id="led_blue_state" class="desc"></div>
</div>
<h1>Potentiometer</h1>
<div class="group">
<div id="poti" class="poti"></div>
<div id="poti_state" class="desc"></div>
</div>
<h1>LED MATRIX</h1>
<div class="group">
<div id="matrix" class="matrix"></div>
<div id="matrix_state" class="desc"></div>
</div>
</body>
</html>