134 lines
3.6 KiB
HTML
134 lines
3.6 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>fnordlichts</title>
|
|
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
|
|
<script type="text/javascript" src="js/farbtastic.js"></script>
|
|
<link rel="stylesheet" href="css/farbtastic.css" type="text/css" />
|
|
<link rel="stylesheet" href="css/style.css" type="text/css" />
|
|
<script type="text/javascript" charset="utf-8">
|
|
var locked = false;
|
|
var count; /* count of lamps */
|
|
var color; /* last color */
|
|
|
|
function stop() {
|
|
if (!locked) {
|
|
locked = true;
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: 'stop',
|
|
success: function(data) {
|
|
locked = false;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function start(script) {
|
|
var mask = get_mask();
|
|
var data = {
|
|
script : script
|
|
};
|
|
|
|
if (mask.indexOf('0') != -1) {
|
|
data.mask = mask;
|
|
}
|
|
|
|
if (!locked) {
|
|
locked = true;
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: 'start?' + $.param(data),
|
|
success: function(data) {
|
|
locked = false;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function get_mask() {
|
|
var mask = new String;
|
|
for (var i=0; i < count; i++) {
|
|
mask += ($('#lamp_' + i).attr('checked')) ? '1' : '0';
|
|
}
|
|
return mask;
|
|
}
|
|
|
|
function fade(hex) {
|
|
color = (hex == undefined) ? $.farbtastic('#picker').color.substr(1) : hex.substr(1);
|
|
|
|
var mask = get_mask();
|
|
var data = {
|
|
color: color,
|
|
step: $('#step').val(),
|
|
delay: $('#delay').val(),
|
|
}
|
|
|
|
if (mask.indexOf('0') != -1) {
|
|
data.mask = mask;
|
|
}
|
|
|
|
if (!locked) {
|
|
locked = true;
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: 'fade?' + $.param(data),
|
|
success: function(data) {
|
|
locked = false;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
|
|
/* draw mask boxes */
|
|
$.get('count', function(data) {
|
|
count = parseInt(data);
|
|
|
|
for (var i=0; i < count; i++) {
|
|
$('#mask').append(
|
|
$('<input>')
|
|
.attr('type', 'checkbox')
|
|
.attr('id', 'lamp_' + i)
|
|
.attr('checked', true)
|
|
);
|
|
}
|
|
});
|
|
|
|
/* get current color */
|
|
$.get('color', function(data) {
|
|
color = data;
|
|
$.farbtastic('#picker').setColor('#' + color);
|
|
});
|
|
|
|
$('#picker').farbtastic(fade);
|
|
//$('input').bind('click change keypress', fade);
|
|
|
|
$('#details').hide();
|
|
$('#show_details').click(function() { $('#details').slideToggle(); });
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="wrapper">
|
|
<div id="picker"></div>
|
|
<p id="show_details">more..</p>
|
|
<div id="details">
|
|
<table>
|
|
<tr><td><label>Verzögerung</label></td><td><input type="text" id="delay" value="3"/></td></tr>
|
|
<tr><td><label>Schrittweite</label></td><td><input type="text" id="step" value="20" /></td></tr>
|
|
<tr><td><label>Lampen</label></td><td><div id="mask" /></td></tr>
|
|
<tr><td></td><td>
|
|
<input type="button" onclick="stop()" value="Stop" />
|
|
<input type="button" onclick="start(1)" value="Party" />
|
|
<input type="button" onclick="start(0)" value="Farbrad" />
|
|
</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
</body>
|
|
</html>
|