bte-Makeblock/index.html at master · CMPS3152-SemesterProject/bte-Makeblock · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="favicon.ico">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="controller.css">
    <title>Hello, world!</title>
</head>

<body>

    <div id="connectedAlert" class="alert alert-danger" role="alert">
        Not connected!
    </div>
    <div id="controller">
        <div class="dpad">
            <p env3d-key="speedText">SPEED: <span id="speedInfo"></span></p>
            <button id="upBtn" env3d-key="KEY_UP" type="button" class="btn btn-success">UP</button>
            <button id="leftBtn" env3d-key="KEY_LEFT" type="button" class="btn btn-success">LEFT</button>
            <button id="rightBtn" env3d-key="KEY_RIGHT" type="button" class="btn btn-success">RIGHT</button>
            <button id="downBtn" env3d-key="KEY_DOWN" type="button" class="btn btn-success">DOWN</button>
            <button id="connectBtn" env3d-key="KEY_A" class="btn btn-primary">Connect</button>
            <button id="LEDLeft" env3d-key="KEY_1" type="button" class="btn btn-danger">LED Left</button>
            <button id="LEDBoth" env3d-key="KEY_2" type="button" class="btn btn-danger">LED Both</button>
            <button id="LEDRight" env3d-key="KEY_3" type="button" class="btn btn-danger">LED Right</button>
            <button id="pianoBtn" env3d-key="KEY_4" type="button" class="btn btn-dark">Piano?</button>
        </div>
        <div class="rangeslider" style="margin-top:10px">
            <input type="range" min="40" max="255" value="100" class="myslider" id="sliderRange">

        </div>
        <div id="rgbContainer" style="padding-top:20px;padding-bottom: 20px;">
            <link rel="stylesheet" href="colorpicker.css">
            <fieldset>
                <label for="r">R</label>
                <input type="range" min="0" max="255" id="r" step="1" value="0">
                <output for="r" id="r_out">0</output>
            </fieldset>

            <fieldset>
                <label for="g">G</label>
                <input type="range" min="0" max="255" id="g" step="1" value="0">
                <output for="g" id="g_out">0</output>
            </fieldset>

            <fieldset>
                <label for="b">B</label>
                <input type="range" min="0" max="255" id="b" step="1" value="0">
                <output for="b" id="b_out">0</output>
            </fieldset>

            <output id="hex">#000000</output>
        </div>
        <div class="piano" id="pianoDiv">
            <button id="noteA" env3d-key="p1" type="button" class="btn ">A</button>
            <button id="noteB" env3d-key="p2" type="button" class="btn ">B</button>
            <button id="noteC" env3d-key="p3" type="button" class="btn ">C</button>
            <button id="noteD" env3d-key="p4" type="button" class="btn ">D</button>
            <button id="noteE" env3d-key="p5" type="button" class="btn ">E</button>
            <button id="noteF" env3d-key="p6" type="button" class="btn ">F</button>
            <button id="noteG" env3d-key="p7" type="button" class="btn ">G</button>
        </div>
    </div>


</body>
<script type="text/javascript" src="mbot.js"></script>
<script type="text/javascript" src="bte.js"></script>
<script type="text/javascript" src="colorpicker.js"></script>

</html>