summaryrefslogtreecommitdiff
path: root/templates/home.html
blob: ae0a9330e6b733d5fd8c635aea73f8fee1c390d1 (plain)
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
<!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>
        function load_data() {

        };

        function save_data(data) {

        }

        $(document).ready(function() {
            $.get('/data', function(res) {
                var data = res.data.split('\n===\n');
                $('#sequences-area').val(data[0]);
                $('#composition-area').val(data[1]);
            })

            $('#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="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="60" 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="80" rows="20"></textarea>
                    <h4>Composition Format</h4>
                    <pre>
# composition
blinking,blinking,off,off
on,on,blinking,on
on,off,fade,fade

                    </pre>
                    <p>Rules: all rows same length of sequences</p>
                </div>
            </div>
        </div>
    </body>
</html>