libfn/share/web/index.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&ouml;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>