Skip to content

Commit 082411d

Browse files
chabalachabala
committed
add web UI example
1 parent a6cdf14 commit 082411d

File tree

2 files changed

+64
-0
lines changed

2 files changed

+64
-0
lines changed

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ https://web.archive.org/web/20220511161248/https://maker.wiznet.io/2022/01/25/we
3030
If you are interested in running the project, you can copy the contents of [CIRCUITPY](CIRCUITPY) on
3131
to your `W5100S-EVB-Pico` running CircuitPython and stop reading and start hacking.
3232

33+
Update: I've added a sample of a [simple HTML web UI](web-ui-example.html) that uses this project as
34+
the backend. It can be customized to the preset channels and input labels you desire. It is compact
35+
enough to be easily usable on phone screens, but also has keyboard shortcuts for desktop use.
36+
3337
## Why?
3438

3539
My TV already has a remote, what's the point? Mostly for better integration with home automation

‎web-ui-example.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.5">
6+
<title>TV controls</title>
7+
<style>
8+
fieldset {display:inline;}
9+
.toplevel {min-width:153px;}
10+
</style>
11+
<script type="text/javascript">
12+
const tvService = 'http://your-device.example.com/tv/';
13+
function get(url) {
14+
const req = new XMLHttpRequest();
15+
req.open('GET', tvService + url);
16+
req.send();
17+
}
18+
window.onload = function() {
19+
a = document.getElementById("serviceUrl");
20+
a.setAttribute("href", tvService);
21+
a.textContent = tvService;
22+
};
23+
</script>
24+
</head>
25+
<body>
26+
<fieldset class="toplevel">
27+
<legend>Power control</legend>
28+
<button type="button" onclick="get('power/?set=1')" accesskey="o">Power <u>O</u>n</button>
29+
<button type="button" onclick="get('power/?set=0')" accesskey="f">Power O<u>f</u>f</button>
30+
</fieldset><br>
31+
<fieldset class="toplevel">
32+
<legend>Input selection</legend>
33+
<button type="button" onclick="get('input/?i=t')" accesskey="t">switch to <u>T</u>V</button><br>
34+
<fieldset>
35+
<legend>Preset channels</legend>
36+
<button type="button" onclick="get('channel/?c=0501')">NBC</button><br>
37+
<button type="button" onclick="get('channel/?c=0901')">WGN</button><br>
38+
<button type="button" onclick="get('channel/?c=1101')">WTTW</button><br>
39+
<button type="button" onclick="get('channel/?c=1102')">WTTW Prime</button><br>
40+
<button type="button" onclick="get('channel/?c=1103')">WTTW Create</button><br>
41+
</fieldset><br><br>
42+
<button type="button" onclick="get('input/?i=5')">switch to Chromecast</button><br>
43+
<button type="button" onclick="get('input/?i=6')">switch to PS3</button><br>
44+
<button type="button" onclick="get('input/?i=7')" accesskey="p">switch to <u>P</u>S4</button>
45+
</fieldset><br>
46+
<fieldset class="toplevel">
47+
<legend>Volume control</legend>
48+
<button type="button" onclick="get('volume/?m=0')" accesskey="m">toggle <u>m</u>ute</button><br><br>
49+
<button type="button" onclick="get('volume/?v=4')">set volume to 4</button><br>
50+
<button type="button" onclick="get('volume/?v=6')">set volume to 6</button><br>
51+
<button type="button" onclick="get('volume/?v=8')">set volume to 8</button><br>
52+
<button type="button" onclick="get('volume/?v=10')">set volume to 10</button><br>
53+
<button type="button" onclick="get('volume/?v=15')">set volume to 15</button><br>
54+
<button type="button" onclick="get('volume/?v=20')">set volume to 20</button>
55+
</fieldset><br>
56+
<p><a id="serviceUrl" target="_blank"></a></p>
57+
<p><a id="schedule" href="https://titantv.com/" target="_blank">TV schedules by TitanTV</a></p>
58+
<p><a id="tracking" href="https://trakt.tv/dashboard" target="_blank">Track your watch history with trakt.tv</a></p>
59+
</body>
60+
</html>

0 commit comments

Comments
 (0)