Skip to content

Commit 9dda972

Browse files
hathachhathach
committed
add webusb rgb example
1 parent b41f874 commit 9dda972

File tree

6 files changed

+274
-4
lines changed

6 files changed

+274
-4
lines changed

‎docs/examples/webusb-rgb/application.css‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
.main-content {
2+
width: 1440px;
3+
margin: auto;
4+
font-size: 14px;
5+
}
6+
7+
.connect-container {
8+
margin: 20px 0;
9+
}
10+
11+
.button::before {
12+
-webkit-border-radius: 3px;
13+
-moz-border-radius: 3px;
14+
-webkit-box-shadow: #959595 0 2px 5px;
15+
-moz-box-shadow: #959595 0 2px 5px;
16+
border-radius: 3px;
17+
box-shadow: #959595 0 2px 5px;
18+
content: "";
19+
display: block;
20+
left: 0;
21+
padding: 2px 0 0;
22+
position: absolute;
23+
top: 0;
24+
}
25+
26+
.button:active::before { padding: 1px 0 0; }
27+
28+
.button.black {
29+
background: #656565;
30+
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#656565), to(#444));
31+
background: -moz-linear-gradient(#656565, #444);
32+
background: linear-gradient(#656565, #444);
33+
border: solid 1px #535353;
34+
border-bottom: solid 3px #414141;
35+
box-shadow: inset 0 0 0 1px #939393;
36+
color: #fff;
37+
text-shadow: 0 1px 0 #2f2f2f;
38+
padding: 8px 16px;
39+
outline: none;
40+
}
41+
42+
.button.black:hover {
43+
background: #4c4c4c;
44+
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#4c4c4c), to(#565656));
45+
background: -moz-linear-gradient(#4c4c4c, #565656);
46+
background: linear-gradient(#4c4c4c, #565656);
47+
border: solid 1px #464646;
48+
border-bottom: solid 3px #414141;
49+
box-shadow: inset 0 0 0 1px #818181;
50+
}
51+
52+
.button.black:active {
53+
background: #474747;
54+
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#474747), to(#444));
55+
background: -moz-linear-gradient(#474747, #444);
56+
background: linear-gradient(#474747, #444);
57+
border: solid 1px #2f2f2f;
58+
box-shadow: inset 0 10px 15px 0 #3e3e3e;
59+
}
60+
61+
.color-picker-container {
62+
width: 100px;
63+
height: 100px;
64+
border-radius: 50px;
65+
overflow: hidden;
66+
}
67+
68+
.color-picker {
69+
padding: 0;
70+
border: none;
71+
width: 200px;
72+
height: 200px;
73+
outline: none;
74+
transform: translate(-25%, -25%)
75+
}

‎docs/examples/webusb-rgb/application.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
(function() {
2+
'use strict';
3+
4+
document.addEventListener('DOMContentLoaded', event => {
5+
let connectButton = document.querySelector("#connect");
6+
let statusDisplay = document.querySelector('#status');
7+
let port;
8+
9+
function connect() {
10+
port.connect().then(() => {
11+
statusDisplay.textContent = '';
12+
connectButton.textContent = 'Disconnect';
13+
}, error => {
14+
statusDisplay.textContent = error;
15+
});
16+
}
17+
18+
function str2ab(str) {
19+
var buf = new ArrayBuffer(str.length); // 2 bytes for each char
20+
var bufView = new Uint8Array(buf);
21+
for (var i=0, strLen=str.length; i<strLen; i++) {
22+
bufView[i] = str.charCodeAt(i);
23+
}
24+
return buf;
25+
}
26+
27+
function hexToBytes(hex) {
28+
for (var bytes = [], c = 0; c < hex.length; c += 2)
29+
bytes.push(parseInt(hex.substr(c, 2), 16));
30+
return bytes;
31+
}
32+
33+
connectButton.addEventListener('click', function() {
34+
if (port) {
35+
port.disconnect();
36+
connectButton.textContent = 'Connect';
37+
statusDisplay.textContent = '';
38+
port = null;
39+
} else {
40+
serial.requestPort().then(selectedPort => {
41+
port = selectedPort;
42+
connect();
43+
}).catch(error => {
44+
statusDisplay.textContent = error;
45+
});
46+
}
47+
});
48+
49+
serial.getPorts().then(ports => {
50+
if (ports.length === 0) {
51+
statusDisplay.textContent = 'No device found.';
52+
} else {
53+
statusDisplay.textContent = 'Connecting...';
54+
port = ports[0];
55+
connect();
56+
}
57+
});
58+
59+
60+
let colorPicker = document.getElementById("color_picker");
61+
62+
colorPicker.addEventListener("change", function(event) {
63+
port.send(str2ab(colorPicker.value));
64+
});
65+
});
66+
})();

‎docs/examples/webusb-rgb/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>TinyUSB</title>
5+
<script src="serial.js"></script>
6+
<script src="application.js"></script>
7+
<link rel="stylesheet" href="application.css">
8+
</head>
9+
<body>
10+
<div class="main-content">
11+
<h1>TinyUSB WebUSB RGB Example</h1>
12+
<div class="connect-container">
13+
<button id="connect" class="button black">Connect</button>
14+
<span id="status"></span>
15+
</div>
16+
<div class="color-picker-container">
17+
<input type="color" id="color_picker" value="#00ff00" class="color-picker">
18+
</div>
19+
</div>
20+
</body>
21+
</html>

‎docs/examples/webusb-rgb/serial.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
var serial = {};
2+
3+
(function() {
4+
'use strict';
5+
6+
serial.getPorts = function() {
7+
return navigator.usb.getDevices().then(devices => {
8+
return devices.map(device => new serial.Port(device));
9+
});
10+
};
11+
12+
serial.requestPort = function() {
13+
const filters = [
14+
{ 'vendorId': 0x239A }, // Adafruit boards
15+
{ 'vendorId': 0xcafe }, // TinyUSB example
16+
];
17+
return navigator.usb.requestDevice({ 'filters': filters }).then(
18+
device => new serial.Port(device)
19+
);
20+
}
21+
22+
serial.Port = function(device) {
23+
this.device_ = device;
24+
this.interfaceNumber = 0;
25+
this.endpointIn = 0;
26+
this.endpointOut = 0;
27+
};
28+
29+
serial.Port.prototype.connect = function() {
30+
let readLoop = () => {
31+
this.device_.transferIn(this.endpointIn, 64).then(result => {
32+
this.onReceive(result.data);
33+
readLoop();
34+
}, error => {
35+
this.onReceiveError(error);
36+
});
37+
};
38+
39+
return this.device_.open()
40+
.then(() => {
41+
if (this.device_.configuration === null) {
42+
return this.device_.selectConfiguration(1);
43+
}
44+
})
45+
.then(() => {
46+
var interfaces = this.device_.configuration.interfaces;
47+
interfaces.forEach(element => {
48+
element.alternates.forEach(elementalt => {
49+
if (elementalt.interfaceClass==0xFF) {
50+
this.interfaceNumber = element.interfaceNumber;
51+
elementalt.endpoints.forEach(elementendpoint => {
52+
if (elementendpoint.direction == "out") {
53+
this.endpointOut = elementendpoint.endpointNumber;
54+
}
55+
if (elementendpoint.direction=="in") {
56+
this.endpointIn =elementendpoint.endpointNumber;
57+
}
58+
})
59+
}
60+
})
61+
})
62+
})
63+
.then(() => this.device_.claimInterface(this.interfaceNumber))
64+
.then(() => this.device_.selectAlternateInterface(this.interfaceNumber, 0))
65+
.then(() => this.device_.controlTransferOut({
66+
'requestType': 'class',
67+
'recipient': 'interface',
68+
'request': 0x22,
69+
'value': 0x01,
70+
'index': this.interfaceNumber}))
71+
.then(() => {
72+
readLoop();
73+
});
74+
};
75+
76+
serial.Port.prototype.disconnect = function() {
77+
return this.device_.controlTransferOut({
78+
'requestType': 'class',
79+
'recipient': 'interface',
80+
'request': 0x22,
81+
'value': 0x00,
82+
'index': this.interfaceNumber})
83+
.then(() => this.device_.close());
84+
};
85+
86+
serial.Port.prototype.send = function(data) {
87+
return this.device_.transferOut(this.endpointOut, data);
88+
};
89+
})();

‎docs/examples/webusb-serial/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</head>
99
<body>
1010
<div class="main-content">
11-
<h1>TinyUSB's WebUSB Demo</h1>
11+
<h1>TinyUSB WebUSB Serial Example</h1>
1212
<div class="connect-container">
1313
<button id="connect" class="button black">Connect</button>
1414
<span id="status"></span>

‎examples/WebUSB/webusb_rgb/webusb_rgb.ino‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,12 +72,31 @@ void setup()
7272
Serial.println("TinyUSB WebUSB RGB example");
7373
}
7474

75+
// convert a hex character to number
76+
uint8_t char2num(char c)
77+
{
78+
if (c >= 'a') return c - 'a' + 10;
79+
if (c >= 'A') return c - 'A' + 10;
80+
return c - '0';
81+
}
82+
7583
void loop()
7684
{
77-
// Landing Page send 3 bytes of color as RGB
78-
if (usb_web.available() < 3 ) return;
85+
// Landing Page 7 characters as hex color '#RRGGBB'
86+
if (usb_web.available() < 7) return;
87+
88+
uint8_t input[7];
89+
usb_web.readBytes(input, 7);
90+
91+
// Print to serial for debugging
92+
Serial.write(input, 7);
93+
Serial.println();
7994

80-
pixels.setPixelColor(0, usb_web.read(), usb_web.read(), usb_web.read());
95+
uint8_t red = 16*char2num(input[1]) + char2num(input[2]);
96+
uint8_t green = 16*char2num(input[3]) + char2num(input[4]);
97+
uint8_t blue = 16*char2num(input[5]) + char2num(input[6]);
98+
99+
pixels.setPixelColor(0, red, green, blue);
81100
pixels.show();
82101
}
83102

0 commit comments

Comments
 (0)