rbbit 0.4.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/.gitignore +9 -0
- data/Gemfile +6 -0
- data/LICENSE +21 -0
- data/README.md +94 -0
- data/Rakefile +2 -0
- data/bin/console +14 -0
- data/bin/setup +8 -0
- data/exe/rbbit +184 -0
- data/lib/rbbit/version.rb +3 -0
- data/lib/rbbit.rb +456 -0
- data/microbit/microbit-rbbit_20201127_js.txt +153 -0
- data/microbit/microbit-rbbit_20201127_v1.5.hex +14625 -0
- data/microbit/microbit-rbbit_20201127_v2.0.hex +34286 -0
- data/rbbit.gemspec +45 -0
- data/sample_console/s1_heart.rb +28 -0
- data/sample_console/s2_myname.rb +16 -0
- data/sample_console/s3_smiley.rb +63 -0
- data/sample_console/s4_dice1.rb +38 -0
- data/sample_console/s4_dice2.rb +82 -0
- data/sample_console/t1_blinker.rb +39 -0
- data/sample_console/t2_rotation.rb +47 -0
- data/sample_console/t3_timer.rb +24 -0
- data/sample_console/t4_alphabet.rb +28 -0
- data/sample_console/t5_switch.rb +33 -0
- data/sample_console/t6_dq.rb +111 -0
- data/sample_console/t7_ball.rb +69 -0
- data/sample_console/t8_light.rb +56 -0
- data/sample_console/t9_progress.rb +154 -0
- data/sample_web/led.html +325 -0
- data/sample_web/monitor.html +253 -0
- data/sample_web/rectangle.html +76 -0
- data/sample_web/sound.html +171 -0
- metadata +146 -0
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="ja">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<title>rbbit sample</title>
|
|
7
|
+
<style>
|
|
8
|
+
/* 線の色の指定 */
|
|
9
|
+
.epoch .category1 .line {
|
|
10
|
+
stroke: #ff0000;
|
|
11
|
+
stroke-width: 3px;
|
|
12
|
+
}
|
|
13
|
+
.epoch .category2 .line {
|
|
14
|
+
stroke: #0000ff;
|
|
15
|
+
stroke-width: 3px;
|
|
16
|
+
}
|
|
17
|
+
.epoch .category3 .line {
|
|
18
|
+
stroke: #00cc00;
|
|
19
|
+
stroke-width: 3px;
|
|
20
|
+
}
|
|
21
|
+
.epoch {
|
|
22
|
+
display: inline-block;
|
|
23
|
+
margin: 10px;
|
|
24
|
+
}
|
|
25
|
+
.remark_r {
|
|
26
|
+
border-bottom: solid;
|
|
27
|
+
border-color: #ff0000;
|
|
28
|
+
border-width: 2px;
|
|
29
|
+
}
|
|
30
|
+
.remark_g {
|
|
31
|
+
border-bottom: solid;
|
|
32
|
+
border-color: #00cc00;
|
|
33
|
+
border-width: 2px;
|
|
34
|
+
}
|
|
35
|
+
.remark_b {
|
|
36
|
+
border-bottom: solid;
|
|
37
|
+
border-color: #0000ff;
|
|
38
|
+
border-width: 2px;
|
|
39
|
+
</style>
|
|
40
|
+
</head>
|
|
41
|
+
|
|
42
|
+
<body>
|
|
43
|
+
<div class="container">
|
|
44
|
+
<h1>micro:bit [status monitor]</h1>
|
|
45
|
+
<div class="row">
|
|
46
|
+
<h4>
|
|
47
|
+
<p>
|
|
48
|
+
加速度
|
|
49
|
+
<span class="remark_r">(x)</span>
|
|
50
|
+
<span class="remark_b">(y)</span>
|
|
51
|
+
<span class="remark_g">(z)</span>
|
|
52
|
+
</p>
|
|
53
|
+
</h4>
|
|
54
|
+
<div id="myChart1" class="epoch" style="width: 480px; height: 150px">
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
<div class="row">
|
|
58
|
+
<h4>
|
|
59
|
+
<p>
|
|
60
|
+
傾き
|
|
61
|
+
<span class="remark_r">(前後)</span>
|
|
62
|
+
<span class="remark_b">(左右)</span>
|
|
63
|
+
</p>
|
|
64
|
+
</h4>
|
|
65
|
+
<div id="myChart2" class="epoch" style="width: 480px; height: 100px">
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
<div class="row">
|
|
69
|
+
<h4>
|
|
70
|
+
<p>
|
|
71
|
+
その他
|
|
72
|
+
<span class="remark_r">(温度)</span>
|
|
73
|
+
<span class="remark_b">(明るさ)</span>
|
|
74
|
+
</p>
|
|
75
|
+
</h4>
|
|
76
|
+
<div id="myChart3" class="epoch" style="width: 480px; height: 100px">
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="row">
|
|
80
|
+
<h4>
|
|
81
|
+
<p>
|
|
82
|
+
ボタン
|
|
83
|
+
<span class="remark_r">(A)</span>
|
|
84
|
+
<span class="remark_b">(B)</span>
|
|
85
|
+
</p>
|
|
86
|
+
</div>
|
|
87
|
+
<div id="myChart4" class="epoch" style="width: 480px; height: 50px">
|
|
88
|
+
</h4>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
|
|
93
|
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
|
|
94
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
|
|
95
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/ja.js"></script>
|
|
96
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.js" charset="utf-8"></script>
|
|
97
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/js/epoch.min.js"></script>
|
|
98
|
+
|
|
99
|
+
<script>
|
|
100
|
+
// チャート１設定
|
|
101
|
+
let chart = $('#myChart1').epoch({
|
|
102
|
+
type: 'time.line', //グラフの種類
|
|
103
|
+
data: [
|
|
104
|
+
{ values: [], range: [-2048, 2048] },
|
|
105
|
+
{ values: [], range: [-2048, 2048] },
|
|
106
|
+
{ values: [], range: [-2048, 2048] }
|
|
107
|
+
],
|
|
108
|
+
axes: ['bottom', 'left', 'right'], //利用軸の選択
|
|
109
|
+
range: { //軸の範囲
|
|
110
|
+
left: [-2048, 2048]
|
|
111
|
+
},
|
|
112
|
+
ticks: {time: 10, left: 5}, // 目盛りの設定(間隔秒数、目盛り数)
|
|
113
|
+
tickFormats: { // 目盛りの書式
|
|
114
|
+
bottom: function (d) { return moment(d * 1000).format('HH:mm:ss'); },
|
|
115
|
+
left: function (d) { return (d).toFixed(0); },
|
|
116
|
+
right: function (d) { return ''; }
|
|
117
|
+
},
|
|
118
|
+
margins: {left: 60},
|
|
119
|
+
fps: 24, // フレームレート
|
|
120
|
+
queueSize: 1, // キューサイズ(push時にキューからあふれたデータは破棄される)
|
|
121
|
+
windowSize: 20 // 表示データ件数
|
|
122
|
+
});
|
|
123
|
+
|
|
124
|
+
// チャート２設定
|
|
125
|
+
let chart2 = $('#myChart2').epoch({
|
|
126
|
+
type: 'time.line', //グラフの種類
|
|
127
|
+
data: [
|
|
128
|
+
{ values: [], range: [-180, 180] },
|
|
129
|
+
{ values: [], range: [-180, 180] }
|
|
130
|
+
],
|
|
131
|
+
axes: ['left', 'right'], //利用軸の選択
|
|
132
|
+
range: { //軸の範囲
|
|
133
|
+
left: [-180, 180]
|
|
134
|
+
},
|
|
135
|
+
ticks: {time: 10, left: 3}, // 目盛りの設定(間隔秒数、目盛り数)
|
|
136
|
+
tickFormats: { // 目盛りの書式
|
|
137
|
+
left: function (d) {
|
|
138
|
+
return (d).toFixed(0) + "°";
|
|
139
|
+
},
|
|
140
|
+
right: function (d) { return ''; }
|
|
141
|
+
},
|
|
142
|
+
margins: {left: 60},
|
|
143
|
+
fps: 24, // フレームレート
|
|
144
|
+
queueSize: 1, // キューサイズ(push時にキューからあふれたデータは破棄される)
|
|
145
|
+
windowSize: 20 // 表示データ件数
|
|
146
|
+
});
|
|
147
|
+
|
|
148
|
+
// チャート３設定
|
|
149
|
+
let chart3 = $('#myChart3').epoch({
|
|
150
|
+
type: 'time.line', //グラフの種類
|
|
151
|
+
data: [
|
|
152
|
+
{ values: [], range: [-20.5, 60.5] },
|
|
153
|
+
{ values: [], range: [0, 255] }
|
|
154
|
+
],
|
|
155
|
+
axes: ['left', 'right'], //利用軸の選択
|
|
156
|
+
range: { //軸の範囲
|
|
157
|
+
left: [-20.5, 60.5],
|
|
158
|
+
right: [0, 255]
|
|
159
|
+
},
|
|
160
|
+
margins: {left: 60},
|
|
161
|
+
ticks: {time: 5, right: 3, left: 3}, // 目盛りの設定(間隔秒数、目盛り数)
|
|
162
|
+
tickFormats: { // 目盛りの書式
|
|
163
|
+
left: function (d) {
|
|
164
|
+
return (d).toFixed(0) + "℃";
|
|
165
|
+
},
|
|
166
|
+
right: function (d) {
|
|
167
|
+
return (d).toFixed(0);
|
|
168
|
+
}
|
|
169
|
+
},
|
|
170
|
+
fps: 24, // フレームレート
|
|
171
|
+
queueSize: 1, // キューサイズ(push時にキューからあふれたデータは破棄される)
|
|
172
|
+
windowSize: 20 // 表示データ件数
|
|
173
|
+
});
|
|
174
|
+
|
|
175
|
+
// チャート４設定
|
|
176
|
+
let chart4 = $('#myChart4').epoch({
|
|
177
|
+
type: 'time.line', // グラフの種類
|
|
178
|
+
data: [
|
|
179
|
+
{ values: [], range: [-1.05, 1.05] },
|
|
180
|
+
{ values: [], range: [-1.05, 1.05] }
|
|
181
|
+
],
|
|
182
|
+
axes: ['left', 'right'], // 利用軸の選択
|
|
183
|
+
range: { // 軸の範囲
|
|
184
|
+
left: [-1.05, 1.05],
|
|
185
|
+
right: [0, 100]
|
|
186
|
+
},
|
|
187
|
+
margins: {left: 60},
|
|
188
|
+
ticks: {time: 10, left: 3}, // 目盛りの設定(間隔秒数、目盛り数)
|
|
189
|
+
tickFormats: { // 目盛りの書式
|
|
190
|
+
left: function (d) { return (d == 0 ? '' : d > 0 ? "Up" : "Down"); },
|
|
191
|
+
right: function (d) { return ''; }
|
|
192
|
+
},
|
|
193
|
+
fps: 24, // フレームレート
|
|
194
|
+
queueSize: 1, // キューサイズ(push時にキューからあふれたデータは破棄される)
|
|
195
|
+
windowSize: 20 // 表示データ件数
|
|
196
|
+
});
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
// データ更新
|
|
200
|
+
$(function() {
|
|
201
|
+
ws = new WebSocket("ws://127.0.0.1:50215");
|
|
202
|
+
ws.onmessage = (evt) => {
|
|
203
|
+
// console.log(evt.data);
|
|
204
|
+
let data = JSON.parse(evt.data); // ###
|
|
205
|
+
let x = data.x
|
|
206
|
+
let y = data.y
|
|
207
|
+
let z = data.z
|
|
208
|
+
let p = data.p
|
|
209
|
+
let r = data.r
|
|
210
|
+
let t = data.t
|
|
211
|
+
let l = data.l
|
|
212
|
+
let a = (data.a_down ? -1 : 1)
|
|
213
|
+
let b = (data.b_down ? -1 : 1)
|
|
214
|
+
|
|
215
|
+
chart.push(
|
|
216
|
+
[
|
|
217
|
+
{time: Date.now() / 1000, y: x },
|
|
218
|
+
{time: Date.now() / 1000, y: y },
|
|
219
|
+
{time: Date.now() / 1000, y: z },
|
|
220
|
+
],
|
|
221
|
+
);
|
|
222
|
+
chart2.push(
|
|
223
|
+
[
|
|
224
|
+
{time: Date.now() / 1000, y: p },
|
|
225
|
+
{time: Date.now() / 1000, y: r },
|
|
226
|
+
],
|
|
227
|
+
);
|
|
228
|
+
chart3.push(
|
|
229
|
+
[
|
|
230
|
+
{time: Date.now() / 1000, y: t },
|
|
231
|
+
{time: Date.now() / 1000, y: l },
|
|
232
|
+
],
|
|
233
|
+
);
|
|
234
|
+
chart4.push(
|
|
235
|
+
[
|
|
236
|
+
{time: Date.now() / 1000, y: a,},
|
|
237
|
+
{time: Date.now() / 1000, y: b,},
|
|
238
|
+
],
|
|
239
|
+
);
|
|
240
|
+
};
|
|
241
|
+
|
|
242
|
+
ws.onclose = () => {
|
|
243
|
+
console.log("Disconnected from server")
|
|
244
|
+
};
|
|
245
|
+
|
|
246
|
+
ws.onopen = () => {
|
|
247
|
+
ws.send("Connected to server");
|
|
248
|
+
};
|
|
249
|
+
});
|
|
250
|
+
</script>
|
|
251
|
+
</body>
|
|
252
|
+
</html>
|
|
253
|
+
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
|
|
4
|
+
<script src="https://spoolkitamura.github.io/nyle-canvas/dev2/nyle-canvas.js"></script>
|
|
5
|
+
|
|
6
|
+
<script>
|
|
7
|
+
let colors = ['red', 'green', 'blue']
|
|
8
|
+
let c = 2
|
|
9
|
+
let size = 200
|
|
10
|
+
|
|
11
|
+
let nyle = new Core();
|
|
12
|
+
nyle.show();
|
|
13
|
+
|
|
14
|
+
const draw = (data) => {
|
|
15
|
+
// console.log(data.r, data.p);
|
|
16
|
+
let [d, color, al, ar] = convert(data.r, data.p, size, c);
|
|
17
|
+
|
|
18
|
+
// 左右の四角形を描画
|
|
19
|
+
xl = nyle.getScreenWidth() / 2 - (size + d); // 左側四角形の起点 x座標
|
|
20
|
+
xr = nyle.getScreenWidth() / 2 + d; // 右側四角形の起点 x座標
|
|
21
|
+
yl = nyle.getScreenHeight() / 2 - (size / 2 + d);
|
|
22
|
+
yr = nyle.getScreenHeight() / 2 - (size / 2 - d);
|
|
23
|
+
|
|
24
|
+
nyle.clear();
|
|
25
|
+
nyle.drawRect(xl, yl, size + (d * 2), size + (d * 2), {color: color, a: al, fill: true});
|
|
26
|
+
nyle.drawRect(xr, yr, size - (d * 2), size - (d * 2), {color: color, a: ar, fill: true});
|
|
27
|
+
|
|
28
|
+
nyle.drawText(10, 45, 'micro:bit [app sample]', {color: 'black', size: 24, bold: true});
|
|
29
|
+
nyle.drawText(10, 410, 'roll : change size', {color: 'gray', size: 20, font: 'monospace', bold: true, italic: true});
|
|
30
|
+
nyle.drawText(10, 435, 'pitch : change alpha', {color: 'gray', size: 20, font: 'monospace', bold: true, italic: true});
|
|
31
|
+
nyle.drawText(10, 460, 'press[A] : change color', {color: 'gray', size: 20, font: 'monospace', bold: true, italic: true});
|
|
32
|
+
|
|
33
|
+
// # [A]ボタンが押されたら色を変える
|
|
34
|
+
if (data.a_release) {
|
|
35
|
+
c += 1
|
|
36
|
+
if (c == colors.length) c = 0;
|
|
37
|
+
// console.log(c, colors.length)
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// ±180あたりのときの色や大きさ...###
|
|
42
|
+
function convert(wx, wy, size, c) {
|
|
43
|
+
let d = wx
|
|
44
|
+
let color = colors[c] // 色
|
|
45
|
+
let al = (180 + wy) / 400.0 // 明度(明)
|
|
46
|
+
let ar = (180 - wy) / 400.0 // 明度(暗)
|
|
47
|
+
return [d, color, al, ar]
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
$(function(){
|
|
51
|
+
ws = new WebSocket("ws://localhost:50215");
|
|
52
|
+
ws.onmessage = function(evt) {
|
|
53
|
+
let data;
|
|
54
|
+
try {
|
|
55
|
+
data = JSON.parse(evt.data);
|
|
56
|
+
} catch(e) {
|
|
57
|
+
console.log(evt.data);
|
|
58
|
+
}
|
|
59
|
+
draw(data);
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
ws.onclose = function() {
|
|
63
|
+
console.log("Disconnected from server")
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
ws.onopen = function() {
|
|
67
|
+
ws.send("Connected to server");
|
|
68
|
+
};
|
|
69
|
+
});
|
|
70
|
+
</script>
|
|
71
|
+
</head>
|
|
72
|
+
|
|
73
|
+
<body>
|
|
74
|
+
</body>
|
|
75
|
+
</html>
|
|
76
|
+
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="ja">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<style>
|
|
6
|
+
#keyboard {
|
|
7
|
+
width: 100%;
|
|
8
|
+
opacity: 1.0;
|
|
9
|
+
position: relative;
|
|
10
|
+
}
|
|
11
|
+
.whitekey {
|
|
12
|
+
width: 50px;
|
|
13
|
+
height: 240px;
|
|
14
|
+
display: inline-block;
|
|
15
|
+
border: 2px solid #000;
|
|
16
|
+
position: relative;
|
|
17
|
+
top: 0;
|
|
18
|
+
z-index: 0;
|
|
19
|
+
}
|
|
20
|
+
.whitekey:hover {
|
|
21
|
+
background-color: #eee;
|
|
22
|
+
}
|
|
23
|
+
.blackkey {
|
|
24
|
+
width: 45px;
|
|
25
|
+
height: 140px;
|
|
26
|
+
display: inline-block;
|
|
27
|
+
margin-left: -24px;
|
|
28
|
+
background-color: #000;
|
|
29
|
+
position: absolute;
|
|
30
|
+
top: 0;
|
|
31
|
+
z-index: 1;
|
|
32
|
+
}
|
|
33
|
+
.blackkey:hover {
|
|
34
|
+
background-color: #333;
|
|
35
|
+
}
|
|
36
|
+
.whitekey .text {
|
|
37
|
+
position: absolute;
|
|
38
|
+
bottom: 5px;
|
|
39
|
+
left: 30%;
|
|
40
|
+
color: #000; /* #bbb; */
|
|
41
|
+
font-size: 14px;
|
|
42
|
+
font-weight: bold;
|
|
43
|
+
z-index: 0;
|
|
44
|
+
}
|
|
45
|
+
.blackkey .text {
|
|
46
|
+
position: absolute;
|
|
47
|
+
bottom: 5px;
|
|
48
|
+
left: 15%;
|
|
49
|
+
color: #fff;
|
|
50
|
+
font-size: 12px;
|
|
51
|
+
font-weight: bold;
|
|
52
|
+
z-index: 2;
|
|
53
|
+
}
|
|
54
|
+
.activekey {
|
|
55
|
+
background-color: #ccc;
|
|
56
|
+
}
|
|
57
|
+
</style>
|
|
58
|
+
|
|
59
|
+
<script>
|
|
60
|
+
let ws; // WebSocket
|
|
61
|
+
|
|
62
|
+
ws = new WebSocket("ws://127.0.0.1:50215");
|
|
63
|
+
ws.onmessage = (evt) => {
|
|
64
|
+
// $("#msg").append("<p>"+evt.data+"</p>");
|
|
65
|
+
// console.log(evt.data);
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
ws.onclose = () => {
|
|
69
|
+
console.log("Disconnected from server")
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
ws.onopen = () => {
|
|
73
|
+
ws.send("Connected to server");
|
|
74
|
+
volume(64); // volumeの初期化
|
|
75
|
+
tempo(120); // tempo の初期化
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
let div; // div要素の格納
|
|
79
|
+
let playing = false;
|
|
80
|
+
|
|
81
|
+
// 「押した」状態のイベント処理
|
|
82
|
+
window.addEventListener('keydown', playSound);
|
|
83
|
+
window.addEventListener('mousedown', playSound);
|
|
84
|
+
|
|
85
|
+
// 「離した」状態のイベント処理
|
|
86
|
+
window.addEventListener('keyup', offSound);
|
|
87
|
+
window.addEventListener('mouseup', offSound);
|
|
88
|
+
|
|
89
|
+
function playSound(e) {
|
|
90
|
+
if (playing) return;
|
|
91
|
+
// 「キーボード」はkeyCodeを、「マウス」はdata-key属性を取得する
|
|
92
|
+
var key = e.keyCode || e.target.dataset.key;
|
|
93
|
+
// 「key」を使って「div要素」を取得する
|
|
94
|
+
div = document.querySelector('div[data-key="'+ key +'"]');
|
|
95
|
+
// 「div要素」が取得できたかチェック
|
|
96
|
+
if(div) {
|
|
97
|
+
// div要素のテキスト(音名)を代入する
|
|
98
|
+
let tone = div.textContent.replace('#', 's');
|
|
99
|
+
console.log(tone);
|
|
100
|
+
|
|
101
|
+
data = `{"command": "play", "arg1": "${tone}", "arg2": "0.5"}`
|
|
102
|
+
console.log(data);
|
|
103
|
+
ws.send(data)
|
|
104
|
+
|
|
105
|
+
// 状態をtrueにして、連続的な発音を防止する(キーの連打には無効...)
|
|
106
|
+
playing = true
|
|
107
|
+
div.classList.add('activekey');
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
function offSound(e) {
|
|
112
|
+
if(div) {
|
|
113
|
+
playing = false; // 再度発音できるように falseへ戻す
|
|
114
|
+
div.classList.remove('activekey');
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
function volume(value) {
|
|
119
|
+
console.log(value);
|
|
120
|
+
data = `{"command": "volume", "arg1": "${value}"}`
|
|
121
|
+
console.log(data);
|
|
122
|
+
ws.send(data)
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
function tempo(value) {
|
|
126
|
+
console.log(value);
|
|
127
|
+
data = `{"command": "tempo", "arg1": "${value}"}`
|
|
128
|
+
console.log(data);
|
|
129
|
+
ws.send(data)
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
</script>
|
|
133
|
+
</head>
|
|
134
|
+
|
|
135
|
+
<body>
|
|
136
|
+
<h1>micro:bit [sound player]</h1>
|
|
137
|
+
<div id="keyboard">
|
|
138
|
+
<div data-key="65" class="whitekey"><span class="text">C4</span></div>
|
|
139
|
+
<div data-key="87" class="blackkey"><span class="text">C#4</span></div>
|
|
140
|
+
<div data-key="83" class="whitekey"><span class="text">D4</span></div>
|
|
141
|
+
<div data-key="69" class="blackkey"><span class="text">D#4</span></div>
|
|
142
|
+
<div data-key="68" class="whitekey"><span class="text">E4</span></div>
|
|
143
|
+
<div data-key="70" class="whitekey"><span class="text">F4</span></div>
|
|
144
|
+
<div data-key="84" class="blackkey"><span class="text">F#4</span></div>
|
|
145
|
+
<div data-key="71" class="whitekey"><span class="text">G4</span></div>
|
|
146
|
+
<div data-key="89" class="blackkey"><span class="text">G#4</span></div>
|
|
147
|
+
<div data-key="72" class="whitekey"><span class="text">A4</span></div>
|
|
148
|
+
<div data-key="85" class="blackkey"><span class="text">A#4</span></div>
|
|
149
|
+
<div data-key="74" class="whitekey"><span class="text">B4</span></div>
|
|
150
|
+
<div data-key="75" class="whitekey"><span class="text">C5</span></div>
|
|
151
|
+
</div>
|
|
152
|
+
|
|
153
|
+
<div id="volume">
|
|
154
|
+
Volume :
|
|
155
|
+
<input type="range" value="64" min="32" max="160" step="32"
|
|
156
|
+
oninput="document.getElementById('output1').value=this.value"
|
|
157
|
+
onchange="volume(this.value);">
|
|
158
|
+
<output id="output1">64</output>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<div id="bpm">
|
|
162
|
+
Tempo :
|
|
163
|
+
<input type="range" value="120" min="60" max="180" step="30"
|
|
164
|
+
oninput="document.getElementById('output2').value=this.value"
|
|
165
|
+
onchange="tempo(this.value);">
|
|
166
|
+
<output id="output2">120</output>
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
</body>
|
|
170
|
+
</html>
|
|
171
|
+
|
metadata
ADDED
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: rbbit
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: 0.4.6
|
|
5
|
+
platform: ruby
|
|
6
|
+
authors:
|
|
7
|
+
- Koki Kitamura
|
|
8
|
+
autorequire:
|
|
9
|
+
bindir: exe
|
|
10
|
+
cert_chain: []
|
|
11
|
+
date: 2020-11-28 00:00:00.000000000 Z
|
|
12
|
+
dependencies:
|
|
13
|
+
- !ruby/object:Gem::Dependency
|
|
14
|
+
name: serialport
|
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
|
16
|
+
requirements:
|
|
17
|
+
- - "~>"
|
|
18
|
+
- !ruby/object:Gem::Version
|
|
19
|
+
version: '1.3'
|
|
20
|
+
type: :runtime
|
|
21
|
+
prerelease: false
|
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
23
|
+
requirements:
|
|
24
|
+
- - "~>"
|
|
25
|
+
- !ruby/object:Gem::Version
|
|
26
|
+
version: '1.3'
|
|
27
|
+
- !ruby/object:Gem::Dependency
|
|
28
|
+
name: em-websocket
|
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
|
30
|
+
requirements:
|
|
31
|
+
- - "~>"
|
|
32
|
+
- !ruby/object:Gem::Version
|
|
33
|
+
version: '0.5'
|
|
34
|
+
type: :runtime
|
|
35
|
+
prerelease: false
|
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
37
|
+
requirements:
|
|
38
|
+
- - "~>"
|
|
39
|
+
- !ruby/object:Gem::Version
|
|
40
|
+
version: '0.5'
|
|
41
|
+
- !ruby/object:Gem::Dependency
|
|
42
|
+
name: websocket-client-simple
|
|
43
|
+
requirement: !ruby/object:Gem::Requirement
|
|
44
|
+
requirements:
|
|
45
|
+
- - "~>"
|
|
46
|
+
- !ruby/object:Gem::Version
|
|
47
|
+
version: '0.3'
|
|
48
|
+
type: :runtime
|
|
49
|
+
prerelease: false
|
|
50
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
51
|
+
requirements:
|
|
52
|
+
- - "~>"
|
|
53
|
+
- !ruby/object:Gem::Version
|
|
54
|
+
version: '0.3'
|
|
55
|
+
- !ruby/object:Gem::Dependency
|
|
56
|
+
name: bundler
|
|
57
|
+
requirement: !ruby/object:Gem::Requirement
|
|
58
|
+
requirements:
|
|
59
|
+
- - "~>"
|
|
60
|
+
- !ruby/object:Gem::Version
|
|
61
|
+
version: '1.17'
|
|
62
|
+
type: :development
|
|
63
|
+
prerelease: false
|
|
64
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
65
|
+
requirements:
|
|
66
|
+
- - "~>"
|
|
67
|
+
- !ruby/object:Gem::Version
|
|
68
|
+
version: '1.17'
|
|
69
|
+
- !ruby/object:Gem::Dependency
|
|
70
|
+
name: rake
|
|
71
|
+
requirement: !ruby/object:Gem::Requirement
|
|
72
|
+
requirements:
|
|
73
|
+
- - "~>"
|
|
74
|
+
- !ruby/object:Gem::Version
|
|
75
|
+
version: '10.0'
|
|
76
|
+
type: :development
|
|
77
|
+
prerelease: false
|
|
78
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
79
|
+
requirements:
|
|
80
|
+
- - "~>"
|
|
81
|
+
- !ruby/object:Gem::Version
|
|
82
|
+
version: '10.0'
|
|
83
|
+
description: "'rbbit' is a Class library and WebSocket server to use 'micro:bit'"
|
|
84
|
+
email:
|
|
85
|
+
- spool.kitamura@nifty.ne.jp
|
|
86
|
+
executables:
|
|
87
|
+
- rbbit
|
|
88
|
+
extensions: []
|
|
89
|
+
extra_rdoc_files: []
|
|
90
|
+
files:
|
|
91
|
+
- ".gitignore"
|
|
92
|
+
- Gemfile
|
|
93
|
+
- LICENSE
|
|
94
|
+
- README.md
|
|
95
|
+
- Rakefile
|
|
96
|
+
- bin/console
|
|
97
|
+
- bin/setup
|
|
98
|
+
- exe/rbbit
|
|
99
|
+
- lib/rbbit.rb
|
|
100
|
+
- lib/rbbit/version.rb
|
|
101
|
+
- microbit/microbit-rbbit_20201127_js.txt
|
|
102
|
+
- microbit/microbit-rbbit_20201127_v1.5.hex
|
|
103
|
+
- microbit/microbit-rbbit_20201127_v2.0.hex
|
|
104
|
+
- rbbit.gemspec
|
|
105
|
+
- sample_console/s1_heart.rb
|
|
106
|
+
- sample_console/s2_myname.rb
|
|
107
|
+
- sample_console/s3_smiley.rb
|
|
108
|
+
- sample_console/s4_dice1.rb
|
|
109
|
+
- sample_console/s4_dice2.rb
|
|
110
|
+
- sample_console/t1_blinker.rb
|
|
111
|
+
- sample_console/t2_rotation.rb
|
|
112
|
+
- sample_console/t3_timer.rb
|
|
113
|
+
- sample_console/t4_alphabet.rb
|
|
114
|
+
- sample_console/t5_switch.rb
|
|
115
|
+
- sample_console/t6_dq.rb
|
|
116
|
+
- sample_console/t7_ball.rb
|
|
117
|
+
- sample_console/t8_light.rb
|
|
118
|
+
- sample_console/t9_progress.rb
|
|
119
|
+
- sample_web/led.html
|
|
120
|
+
- sample_web/monitor.html
|
|
121
|
+
- sample_web/rectangle.html
|
|
122
|
+
- sample_web/sound.html
|
|
123
|
+
homepage: https://github.com/spoolkitamura/rbbit
|
|
124
|
+
licenses:
|
|
125
|
+
- MIT
|
|
126
|
+
metadata: {}
|
|
127
|
+
post_install_message:
|
|
128
|
+
rdoc_options: []
|
|
129
|
+
require_paths:
|
|
130
|
+
- lib
|
|
131
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
132
|
+
requirements:
|
|
133
|
+
- - ">="
|
|
134
|
+
- !ruby/object:Gem::Version
|
|
135
|
+
version: '0'
|
|
136
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
137
|
+
requirements:
|
|
138
|
+
- - ">="
|
|
139
|
+
- !ruby/object:Gem::Version
|
|
140
|
+
version: '0'
|
|
141
|
+
requirements: []
|
|
142
|
+
rubygems_version: 3.0.3
|
|
143
|
+
signing_key:
|
|
144
|
+
specification_version: 4
|
|
145
|
+
summary: Class library and WebSocket server to use 'micro:bit'
|
|
146
|
+
test_files: []
|