diff options
| author | Yuval Adam <yuv.adm@gmail.com> | 2014-06-07 21:13:54 +0300 |
|---|---|---|
| committer | Yuval Adam <yuv.adm@gmail.com> | 2014-06-07 21:13:54 +0300 |
| commit | 7e75dfdd983abf915b4201c99b16d60cd5419101 (patch) | |
| tree | d8c770cee26575dcaa3041648781872cc210c848 | |
| parent | 48d3e0aab0a7125f563f41c269e627231fd12180 (diff) | |
Final sequence stuff
| -rw-r--r-- | server.py | 20 | ||||
| -rw-r--r-- | templates/sequence.html | 102 |
2 files changed, 122 insertions, 0 deletions
@@ -11,6 +11,26 @@ app = Flask(__name__) def home(): return render_template('home.html') +@app.route('/sequence', methods=['GET']) +@app.route('/sequence/<name>', methods=['POST', 'GET']) +def sequence(name=None): + sequences_dir = DATA_DIR.child('sequences') + + if name and request.method == 'GET': + with open(sequences_dir.child('{}.json'.format(name)), 'r') as f: + return jsonify(json.load(f)) + + sequences = [{ + 'name': sequence.name.split('.json')[0], + 'pattern': json.load(open(sequence, 'r')) + } for sequence in sequences_dir.walk(pattern='*.json')] + + if request.method == 'POST': + with open(sequences_dir.child('{}.json'.format(name)), 'w') as f: + json.dump(data, f, indent=2) + + return render_template('sequence.html', sequences=sequences) + def save_json(data, filename): with open(DATA_DIR.child(filename), 'w') as f: json.dump(data, f, indent=2) diff --git a/templates/sequence.html b/templates/sequence.html new file mode 100644 index 0000000..7c32f5a --- /dev/null +++ b/templates/sequence.html @@ -0,0 +1,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> |