Initial commit

ESP32/static/index.html

@@ -0,0 +1,289 @@
+<!doctype html>
+<html>
+   <head>
+      <title>BusyLight</title>
+      <script src="static/libs/busylight-api.js"></script>
+      <script src="static/libs/jscolor.min.js"></script>
+      <style>
+         /* General Reset */
+         * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+         }
+
+         body {
+            font-family: 'Arial', sans-serif;
+            background: linear-gradient(135deg, #1a1a2e, #16213e);
+            color: #ffffff;
+            text-align: center;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            overflow: hidden;
+         }
+
+         /* Glassmorphism Container */
+         section {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            padding: 30px;
+            border-radius: 20px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+            width: 90%;
+            max-width: 500px;
+            animation: fadeIn 0.5s ease-in-out;
+         }
+
+         @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(-20px); }
+            to { opacity: 1; transform: translateY(0); }
+         }
+
+         h1 {
+            font-size: 28px;
+            margin-bottom: 30px;
+            color: #ffffff;
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+         }
+
+         /* Radio Buttons */
+         div {
+            margin: 20px 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 15px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 12px;
+            transition: all 0.3s ease;
+         }
+
+         div:hover {
+            background: rgba(255, 255, 255, 0.2);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+         }
+
+         label {
+            font-size: 20px;
+            font-weight: 500;
+            margin-right: 15px;
+            cursor: pointer;
+         }
+
+         input[type="radio"] {
+            appearance: none;
+            width: 25px;
+            height: 25px;
+            border-radius: 50%;
+            border: 3px solid #ffffff;
+            transition: all 0.3s ease;
+            cursor: pointer;
+         }
+
+         input[type="radio"]:checked {
+            background: #4CAF50;
+            border-color: #4CAF50;
+            box-shadow: 0 0 10px rgba(76, 175, 80, 0.7);
+         }
+
+         /* Color Picker Button */
+         #colorPicker {
+            background: linear-gradient(135deg, #007bff, #0056b3);
+            border: none;
+            padding: 15px 30px;
+            color: white;
+            font-size: 18px;
+            border-radius: 12px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
+         }
+
+         #colorPicker:hover {
+            background: linear-gradient(135deg, #0056b3, #003d80);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4);
+         }
+
+         /* Brightness Slider */
+         input[type="range"] {
+            width: 100%;
+            cursor: pointer;
+            -webkit-appearance: none;
+            background: linear-gradient(135deg, #4CAF50, #45a049);
+            height: 10px;
+            border-radius: 5px;
+            outline: none;
+            transition: all 0.3s ease;
+         }
+
+         input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 25px;
+            height: 25px;
+            background: #ffffff;
+            border-radius: 50%;
+            cursor: pointer;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+            transition: all 0.3s ease;
+         }
+
+         input[type="range"]:hover::-webkit-slider-thumb {
+            transform: scale(1.1);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+         }
+
+         /* Responsive Design */
+         @media (max-width: 600px) {
+            section {
+               padding: 20px;
+            }
+
+            h1 {
+               font-size: 24px;
+            }
+
+            label {
+               font-size: 18px;
+            }
+
+            input[type="radio"] {
+               width: 22px;
+               height: 22px;
+            }
+
+            #colorPicker {
+               padding: 12px 24px;
+               font-size: 16px;
+            }
+
+            input[type="range"]::-webkit-slider-thumb {
+               width: 20px;
+               height: 20px;
+            }
+         }
+      </style>
+   </head>
+   <body onload="initForm()">
+      <section>
+         <h1>BusyLight Status</h1>
+         <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 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>

ESP32/static/libs/busylight-api.js

@@ -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
+}

ESP32/static/libs/jscolor.min.js

@@ -0,0 +1 @@
+(function(global,factory){"use strict";if(typeof module==="object"&&typeof module.exports==="object"){module.exports=global.document?factory(global):function(win){if(!win.document){throw new Error("jscolor needs a window with document")}return factory(win)};return}factory(global)})(typeof window!=="undefined"?window:this,function(window){"use strict";var jscolor=function(){var jsc={initialized:false,instances:[],readyQueue:[],register:function(){if(typeof window!=="undefined"&&window.document){if(window.document.readyState!=="loading"){jsc.pub.init()}else{window.document.addEventListener("DOMContentLoaded",jsc.pub.init,false)}}},installBySelector:function(selector,rootNode){rootNode=rootNode?jsc.node(rootNode):window.document;if(!rootNode){throw new Error("Missing root node")}var elms=rootNode.querySelectorAll(selector);var matchClass=new RegExp("(^|\\s)("+jsc.pub.lookupClass+")(\\s*(\\{[^}]*\\})|\\s|$)","i");for(var i=0;i<elms.length;i+=1){if(elms[i].jscolor&&elms[i].jscolor instanceof jsc.pub){continue}if(elms[i].type!==undefined&&elms[i].type.toLowerCase()=="color"&&jsc.isColorAttrSupported){continue}var dataOpts,m;if((dataOpts=jsc.getDataAttr(elms[i],"jscolor"))!==null||elms[i].className&&(m=elms[i].className.match(matchClass))){var targetElm=elms[i];var optsStr="";if(dataOpts!==null){optsStr=dataOpts}else if(m){console.warn('Installation using class name is DEPRECATED. Use data-jscolor="" attribute instead.'+jsc.docsRef);if(m[4]){optsStr=m[4]}}var opts=null;if(optsStr.trim()){try{opts=jsc.parseOptionsStr(optsStr)}catch(e){console.warn(e+"\n"+optsStr)}}try{new jsc.pub(targetElm,opts)}catch(e){console.warn(e)}}}},parseOptionsStr:function(str){var opts=null;try{opts=JSON.parse(str)}catch(eParse){if(!jsc.pub.looseJSON){throw new Error("Could not parse jscolor options as JSON: "+eParse)}else{try{opts=new Function("var opts = ("+str+'); return typeof opts === "object" ? opts : {};')()}catch(eEval){throw new Error("Could not evaluate jscolor options: "+eEval)}}}return opts},getInstances:function(){var inst=[];for(var i=0;i<jsc.instances.length;i+=1){if(jsc.instances[i]&&jsc.instances[i].targetElement){inst.push(jsc.instances[i])}}return inst},createEl:function(tagName){var el=window.document.createElement(tagName);jsc.setData(el,"gui",true);return el},node:function(nodeOrSelector){if(!nodeOrSelector){return null}if(typeof nodeOrSelector==="string"){var sel=nodeOrSelector;var el=null;try{el=window.document.querySelector(sel)}catch(e){console.warn(e);return null}if(!el){console.warn("No element matches the selector: %s",sel)}return el}if(jsc.isNode(nodeOrSelector)){return nodeOrSelector}console.warn("Invalid node of type %s: %s",typeof nodeOrSelector,nodeOrSelector);return null},isNode:function(val){if(typeof Node==="object"){return val instanceof Node}return val&&typeof val==="object"&&typeof val.nodeType==="number"&&typeof val.nodeName==="string"},nodeName:function(node){if(node&&node.nodeName){return node.nodeName.toLowerCase()}return false},removeChildren:function(node){while(node.firstChild){node.removeChild(node.firstChild)}},isTextInput:function(el){return el&&jsc.nodeName(el)==="input"&&el.type.toLowerCase()==="text"},isButton:function(el){if(!el){return false}var n=jsc.nodeName(el);return n==="button"||n==="input"&&["button","submit","reset"].indexOf(el.type.toLowerCase())>-1},isButtonEmpty:function(el){switch(jsc.nodeName(el)){case"input":return!el.value||el.value.trim()==="";case"button":return el.textContent.trim()===""}return null},isPassiveEventSupported:function(){var supported=false;try{var opts=Object.defineProperty({},"passive",{get:function(){supported=true}});window.addEventListener("testPassive",null,opts);window.removeEventListener("testPassive",null,opts)}catch(e){}return supported}(),isColorAttrSupported:function(){var elm=window.document.createElement("input");if(elm.setAttribute){elm.setAttribute("type","color");if(elm.type.toLowerCase()=="color"){return true}}return false}(),dataProp:"_data_jscolor",setData:function(){var obj=arguments[0];if(arguments.length===3){var data=obj.hasOwnProperty(jsc.dataProp)?obj[jsc.dataProp]:obj[jsc.dataProp]={};var prop=arguments[1];var value=arguments[2];data[prop]=value;return true}else if(arguments.length===2&&typeof arguments[1]==="object"){var data=obj.hasOwnProperty(jsc.dataProp)?obj[jsc.dataProp]:obj[jsc.dataProp]={};var map=arguments[1];for(var prop in map){if(map.hasOwnProperty(prop)){data[prop]=map[prop]}}return true}throw new Error("Invalid arguments")},removeData:function(){var obj=arguments[0];if(!obj.hasOwnProperty(jsc.dataProp)){return true}for(var i=1;i<arguments.length;i+=1){var prop=arguments[i];delete obj[jsc.dataProp][prop]}return true},getData:function(obj,prop,setDefault){if(!obj.hasOwnProperty(jsc.dataProp)){if(setDefault!==undefined){obj[jsc.dataProp]={}}else{return undefined}}var data=obj[jsc.dataProp];if(!data.hasOwnProperty(prop)&&setDefault!==undefined){data[prop]=setDefault}return data[prop]},getDataAttr:function(el,name){vLine truncated