1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
<!DOCTYPE html>
<html>
<head>
<title>Light Loop Pi</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/static/css/bootstrap-slider.css"/>
<link rel="stylesheet" href="/static/css/main.css"/>
<script src="/static/js/jquery-2.1.1.min.js"></script>
<script src="/static/js/underscore-min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$.get('/data', function(res) {
var data = res.data.split('\n===\n');
$('#sequences-area').val(data[0]);
$('#composition-area').val(data[1]);
})
$('#validate-btn').click(function() {
var sequences = $('#sequences-area').val();
var composition = $('#composition-area').val();
var sequences_len = 0;
var sequence_names = [];
_.each(sequences.split('\n\n'), function(seq) {
_.each(seq.split('\n'), function(s) {
if (s.startsWith('#')) {
if (s.split(' ').length > 2) {
alert('Sequence name ' + s + ' has whitespace in it');
}
else {
sequence_names.push(s.split(' ')[1]);
}
}
else if (s != '') {
if (sequences_len == 0) {
sequences_len = s.length;
}
else {
if (s.length != sequences_len) {
alert('One or more sequences are not equal in length');
return;
}
}
}
})
});
var composition_len = 0;
_.each(composition.split('\n'), function(cl) {
if (!(cl.startsWith('#') || cl == '')) {
_.each(cl.split(','), function(seq) {
if (!(sequence_names.indexOf(seq) > -1)) {
alert('Sequence name ' + seq + ' in composition does not exist');
}
});
if (sequences_len == 0) {
sequences_len = cl.split(',').length;
}
else if (cl.split(',').length != sequences_len) {
alert('One or more sequences in composition are not equal in length');
return;
}
}
});
})
$('#save-btn').click(function() {
$.ajax({
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
"data": $('#sequences-area').val() + '\n===\n' + $('#composition-area').val()
}),
dataType: 'json',
url: '/data',
success: function() { alert('Saved'); }
});
});
});
</script>
</head>
<body>
<div class="container">
<h1>Light Loop Pi</h1>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button id="validate-btn" type="button" class="btn btn-info">Validate</button>
</div>
<div class="btn-group">
<button id="save-btn" type="button" class="btn btn-primary">Save</button>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2>Sequences</h2>
<textarea id="sequences-area" cols="50" rows="20"></textarea>
<h4>Sequence Format</h4>
<pre>
# sequence_name
000000000000111111111111
010101010101010101010101
111111111111111111111111
111111111111000000000000
000000000000111111111111
010101010101010101010101
111111111111111111111111
111111111111000000000000
</pre>
<p>Rules: no spaces in name, same number of rows, all rows same length</p>
</div>
<div class="col-md-6">
<h2>Composition</h2>
<textarea id="composition-area" cols="60" rows="20"></textarea>
<h4>Composition Format</h4>
<pre>
# composition_100
blinking,blinking,off,off
on,on,blinking,on
on,off,fade,fade
</pre>
<p>Rules: name must include tempo, all rows same length of sequences</p>
</div>
</div>
</div>
</body>
</html>
|
