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
|
<!DOCTYPE html>
<html>
<head>
<title>Light Loop Pi - Sequence Editor</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 src="/static/js/bootstrap-slider.min.js"></script>
<script>
function load_data() {
$.get('/data', function(res) {
console.log('Loading: ', res);
$('#speed-slider').slider({
tooltip: 'always',
value: res.tempo
});
_.each(res.trees, function(tree, i) {
var $tree = $('div[data-light-tree=' + i + ']');
_.each(tree, function(channel, j) {
var $channel = $tree.find('div[data-light-channel=' + j + ']');
_.each(channel, function(cell, k) {
var $cell = $channel.find('button[data-light-cell=' + k + ']');
if (cell) {
$cell.addClass('active');
}
});
});
});
});
};
function save_data(data) {
var data = {
tempo: +$('#speed-slider').val(),
trees: []
};
$('.light-tree').each(function(_idx, tree) {
tree = $(tree);
var tree_data = []
tree.find('.light-row').each(function(_idx, row) {
var vals = $(row).find('.light-cell-btn').toArray().map(function(x) {
return x.className.contains('active') ? 1 : 0;
});
tree_data.push(vals);
});
data.trees.push(tree_data);
});
console.log('Saved:', data);
$.ajax({
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(data),
dataType: 'json',
url: '/sequence/name',
});
}
$(document).ready(function() {
$('.sequence-name-item').click(function() {
var name = $(this).attr('data-sequence-name');
$.get('/sequence/' + name, function(res) {
})
})
});
</script>
</head>
<body>
<div class="container">
<h1>Light Loop Pi</h1>
<h2>Sequence Editor</h2>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Sequences <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
{% for sequence in sequences %}
<li><a href="#" class="sequence-name-item" data-sequence-name="{{ sequence.name }}">{{ sequence.name }}</a></li>
{% endfor %}
<li class="divider"></li>
<li><a href="#">New</a></li>
</ul>
</div>
<div class="btn-group">
<button id="save-btn" type="button" class="btn btn-primary">Save</button>
</div>
<div id="light-container"></div>
</div>
</body>
</html>
|
