ui/audio.html at master · thingsjs/ui · 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
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
<!doctype html>
<html>
<head>
    <title>mySynth</title>
    <script src='/scripts/jquery.js'></script>
    <script src='/scripts/d3.js'></script>


    <script src="/components/polymer/polymer.min.js"></script>
    <script src="/components/polymer/pointerevents.js"></script>

    <link rel="import" href="/interactors/basethings.html">
    <link rel="import" href="/interactors/things.html">
    <link rel="import" href="/interactors/flex.html">
    <link rel="import" href="/interactors/pressure.html">
    <link rel="import" href="/interactors/huggable.html">
    <link rel="import" href="/interactors/potentiometer.html">

    <script src='/scripts/audio.js'></script>
    <style>

        @import url(http://fonts.googleapis.com/css?family=Lato:300,400);

        body{
            background: rgb(240,240,242);
            text-align:center;
        }
        input { display: block; }
        canvas {
            width:300;
            height: 300;
        }
        #labels{
            position:absolute;
            left:200px;
            bottom:50px;
            width:300px;
            margin: 0 auto;
            font-family: 'Lato';
            font-weight:700;
            font-size: 1.2em;
            color: black;
            text-align:center;
        }
        .label{
            text-align: center;
            margin: 10px 0 10px 0;
            width:350px;
            position: relative;
            display:block;
        }
        #type{
            width:50px;
        }
        #slider{
            display:inline-block;
            background-color: rgb(250,40,80);
            height:3px;
            font-weight: 300;
            color: rgba(150,150,160,0);
            font-size:0.8em;
            display: inline-block;
            max-width: 150px;
            position:absolute;
            bottom:0px;
        }
        #spectrum{
            width:700px;
            height:350px;
            padding: 50px;
            margin:0 auto;
            position: absolute;
            top:100px;
            left:200px;
            background: rgb(1,134,151);
            border: 5px rgb(40,45,50) solid;
        }
        #freq{
            top:0px;
            background: white;
            width:2px;
            margin: 2px;
            display:inline-block;

        }
    </style>
</head>

<script src="scripts/socket.io.js"></script>
        <script>
          var socket = io.connect('http://localhost:8080');

        </script>

<body onload="init()" >


    <!-- Physical control -->
            <x-button id='play2' pin=6 style='display:none'></x-button>
            <ain-pot id='volume2' pin=2 style='display:none'></ain-pot>
            <ain-pressure id='pass2' pin=3 style='display:none'></ain-pressure>


    <!-- Labels and sliders to display physical values coming in -->
    <div id='labels'>
        <div class='label' id='highpassval'>
            <div id='type'>HIGHPASS</div>
            <div id='slider'></div>
        </div>
        <!--
        <div class='label' id='panval'>
            <div id='type'>PAN</div>
            <div id='slider'></div>
        </div>
        -->
        <div class='label' id='volumeval'>
                    <div id='type'>VOLUME</div>
                <div id='slider'></div>
        </div>
    </div>

    <!-- FFT SPECTRUM -->
    <div id='spectrum'>
    </div>

</body>
</html>