-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
78 lines (74 loc) · 3.61 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="static/w3.css">
<link rel="stylesheet" href="static/styles.css">
<script src="scripts/geo_spoof.js"></script>
</head>
<!-- https://stackoverflow.com/questions/29008194/disabling-androids-chrome-pull-down-to-refresh-feature -->
<body>
<noscript>
<div class="w3-panel w3-pale-red">
<h1>Please enable JavaScript!</h1>
<p>This site relies heavily on Javascript to operate, and will simply not work without it.</p>
</div>
</noscript>
<div class="row w3-container w3-teal">
<div class="w3-row-padding">
<h2>Custom Range Slider W/BLE Write & Notify</h2>
<div class="w3-col m8 l9 w3-display-container">
<br>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-green">Description & links</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container w3-teal">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<h3>Custom Range Slider W/BLE Write & Notify</h3>
</header>
<div class="w3-container w3-light-gray">
<p>Press Bluetooth button to connect to a nearby ESP32 device. Drag the slider to display the current value.
When Bluetooth device is connected, auto ranging will take place, and the slider value will be written over BLE to set the ESP32 recieved variable.</p>
<p>
<a href="https://gist.github.com/UriShX/2b1f1c7b461b466a4b4ae336d52653dd">Arduino sketch of 'breathing' LED controlled by this app</a>
<br>
<a href="https://gist.github.com/UriShX/81266ab108876c4ef4252cc9fd3e1432">Arduino sketch of hobby servo controlled by this app</a>
</p>
</div>
<footer class="w3-container w3-teal">
<p><a href="https://github.com/UriShX/ESP32_fader">Github repository for this app</a></p>
</footer>
</div>
</div>
</div>
<div class="connection w3-padding-16 w3-col m4 l3" style="float: right;">
<button id="connect_text">Connect <i class="material-icons" id="connection_status">bluetooth</i></button>
</div>
</div>
</div>
<div class="row w3-container">
<div class="row" style="height: 15%; width: 100%;">
<div>
<!-- <div class="column"> -->
<form class="form-inline w3-container" id="form1" target="_self">
<label for="min">Min.:</label>
<input class="w3-input w3-border" type="number" id="min" value="0" name="Min">
<label for="max">Max.:</label>
<input class="w3-input w3-border" type="number" id="max" value="180" name="Max">
<br>
<button class="w3-btn w3-blue" id="setButton" type="button">Set</button>
</form>
<!-- </div> -->
</div>
<p class="inner_col">Value: <span id="demo"></span></p>
</div>
<div class="slidecontainer">
<input type="range" min="0" max="180" value="90" class="slider" id="myRange">
</div>
</div>
<script src="scripts/app.js"></script>
<script src="scripts/esp32_fader.js"></script>
</body>
</html>