Initial commit
This commit is contained in:
commit
62a5597ae0
22 changed files with 595 additions and 0 deletions
70
ESP32/static/busylight-api.js
Normal file
70
ESP32/static/busylight-api.js
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
async function setStatus(status = '') {
|
||||
// Les options par défaut sont indiquées par *
|
||||
const response = await fetch(`/api/status/${status}`, {
|
||||
method: "POST", // *GET, POST, PUT, DELETE, etc.
|
||||
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
});
|
||||
return response.json(); // transforme la réponse JSON reçue en objet JavaScript natif
|
||||
}
|
||||
|
||||
async function getStatus() {
|
||||
// Les options par défaut sont indiquées par *
|
||||
const response = await fetch(`/api/status`, {
|
||||
method: "GET", // *GET, POST, PUT, DELETE, etc.
|
||||
cache: "no-cache" // *default, no-cache, reload, force-cache, only-if-cached
|
||||
});
|
||||
return response.json(); // transforme la réponse JSON reçue en objet JavaScript natif
|
||||
}
|
||||
|
||||
async function setColor(color = {}) {
|
||||
// Les options par défaut sont indiquées par *
|
||||
const response = await fetch(`/api/color`, {
|
||||
method: "POST", // *GET, POST, PUT, DELETE, etc.
|
||||
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify(color) // le type utilisé pour le corps doit correspondre à l'en-tête "Content-Type"
|
||||
});
|
||||
return response.json(); // transforme la réponse JSON reçue en objet JavaScript natif
|
||||
}
|
||||
|
||||
async function getColor() {
|
||||
// Les options par défaut sont indiquées par *
|
||||
const response = await fetch(`/api/color`, {
|
||||
method: "GET", // *GET, POST, PUT, DELETE, etc.
|
||||
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
});
|
||||
return response.json(); // transforme la réponse JSON reçue en objet JavaScript natif
|
||||
}
|
||||
|
||||
async function setBrightness(brightness = {}) {
|
||||
// Les options par défaut sont indiquées par *
|
||||
const response = await fetch(`/api/brightness`, {
|
||||
method: "POST", // *GET, POST, PUT, DELETE, etc.
|
||||
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify(brightness) // le type utilisé pour le corps doit correspondre à l'en-tête "Content-Type"
|
||||
});
|
||||
return response.json(); // transforme la réponse JSON reçue en objet JavaScript natif
|
||||
}
|
||||
|
||||
async function getBrightness() {
|
||||
// Les options par défaut sont indiquées par *
|
||||
const response = await fetch(`/api/brightness`, {
|
||||
method: "GET", // *GET, POST, PUT, DELETE, etc.
|
||||
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
});
|
||||
return response.json(); // transforme la réponse JSON reçue en objet JavaScript natif
|
||||
}
|
||||
136
ESP32/static/index.html
Normal file
136
ESP32/static/index.html
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>BusyLight</title>
|
||||
<script src="static/busylight-api.js"></script>
|
||||
<script src="static/jscolor.min.js"></script>
|
||||
|
||||
</head>
|
||||
<body onload="initForm()">
|
||||
<h1>Status</h1>
|
||||
<section>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="status" id="off" value="off" onclick="putStatus(this.value)" />
|
||||
<label for="off">OFF</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="status" id="busy" value="busy" onclick="putStatus(this.value)" />
|
||||
<label for="busy">Busy</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="status" id="available" value="available" onclick="putStatus(this.value)" />
|
||||
<label for="available">Available</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="status" id="away" value="away" onclick="putStatus(this.value)" />
|
||||
<label for="away">Away</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="status" id="colored" value="colored" onclick="openColorPicker()" />
|
||||
<label for="colored">Colored: </label>
|
||||
<button id="colorPicker">Pick color</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="range" id="brightness" name="brightness" min="0" max="100" step="1" onchange="putBrightness(this.value)"/>
|
||||
<label for="brightness">Brightness</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
jscolor.presets.rgb = {
|
||||
format: 'rgb',
|
||||
alphaChannel: false
|
||||
};
|
||||
|
||||
//var colorPicker = new JSColor("colorPicker", "{preset:'default', onChange: 'putColor(this)'}")
|
||||
var colorPickerOpts = {};
|
||||
colorPickerOpts["preset"] = "rgb";
|
||||
colorPickerOpts["format"] = "rgb";
|
||||
colorPickerOpts["alphaChannel"] = false;
|
||||
colorPickerOpts["onChange"] = "putColor(this)";
|
||||
var colorPicker = new JSColor("#colorPicker", colorPickerOpts);
|
||||
|
||||
async function initForm() {
|
||||
var s = await getStatus();
|
||||
var c = await getColor();
|
||||
var b = await getBrightness();
|
||||
|
||||
var statusRadio;
|
||||
switch (s.status) {
|
||||
case 'off':
|
||||
statusRadio = document.getElementById('off');
|
||||
break;
|
||||
case 'busy':
|
||||
statusRadio = document.getElementById('busy');
|
||||
break;
|
||||
case 'available':
|
||||
statusRadio = document.getElementById('available');
|
||||
break;
|
||||
case 'away':
|
||||
statusRadio = document.getElementById('away');
|
||||
break;
|
||||
case 'colored':
|
||||
statusRadio = document.getElementById('colored');
|
||||
colorPicker.fromString('rgb(' + c.color.r + ',' + c.color.g + ',' + c.color.b + ')');
|
||||
break;
|
||||
}
|
||||
statusRadio.checked = true;
|
||||
|
||||
brightnessRange = document.getElementById('brightness');
|
||||
brightnessRange.value = b.brightness * 100;
|
||||
|
||||
setColorPickerColor(s.status);
|
||||
}
|
||||
|
||||
function openColorPicker() {
|
||||
colorPicker.show();
|
||||
}
|
||||
|
||||
async function putColor(picker) {
|
||||
var color = {};
|
||||
color.r = Math.round(picker.channel('R'));
|
||||
color.g = Math.round(picker.channel('G'));
|
||||
color.b = Math.round(picker.channel('B'));
|
||||
var s = await setColor(color);
|
||||
statusRadio = document.getElementById('colored');
|
||||
statusRadio.checked = true;
|
||||
}
|
||||
|
||||
|
||||
async function putStatus(status) {
|
||||
var s = await setStatus(status);
|
||||
setColorPickerColor(status);
|
||||
}
|
||||
|
||||
function setColorPickerColor(status) {
|
||||
switch (status) {
|
||||
case 'off':
|
||||
colorPicker.fromString('rgb(0,0,0)');
|
||||
break;
|
||||
case 'busy':
|
||||
colorPicker.fromString('rgb(255,0,0)');
|
||||
break;
|
||||
case 'available':
|
||||
colorPicker.fromString('rgb(0,255,0)');
|
||||
break;
|
||||
case 'away':
|
||||
colorPicker.fromString('rgb(246,190,0)');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
async function putBrightness(value) {
|
||||
var brightness = {};
|
||||
brightness.brightness = value/100;
|
||||
var b = await setBrightness(brightness);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1
ESP32/static/jscolor.min.js
vendored
Normal file
1
ESP32/static/jscolor.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue