<!doctype html> <html> <head> <style></style> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Light setup - {{LIGHT_NAME}}</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css"> </head> <body> <fieldset> <h3>{{LIGHT_NAME}}</h3> <div class="pure-form pure-form-aligned"> <div class="pure-controls"> <span class="pure-form-message"> <a href="/?alert=1">alert</a> <a href="/?reset=1">reset</a> <a href="/?resettc">reset timing control data</a> <a href="/update">update</a> </span> <label for="cb" class="pure-checkbox"></label> </div> <br> <div class="pure-control-group"> <label for="tc_on"> <strong>Timing control</strong> </label> <a id="tc_on" class="pure-button {{TC_LINK_PRIMARY_ON}}" href="#">ON</a> <a id="tc_off" class="pure-button {{TC_LINK_PRIMARY_OFF}}" href="#">OFF</a> </div> <script> var links = document.querySelectorAll('[id^="tc_on"]'); links.forEach(function(link) { link.addEventListener('click', function(event) { event.preventDefault(); var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true); xhr.send(); console.log('tc=true call'); document.getElementById('tc_on').classList.add('pure-button-primary'); document.getElementById('tc_off').classList.remove('pure-button-primary'); }); }); var links = document.querySelectorAll('[id^="tc_off"]'); links.forEach(function(link) { link.addEventListener('click', function(event) { event.preventDefault(); var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true); xhr.send(); console.log('tc=false call'); document.getElementById('tc_off').classList.add('pure-button-primary'); document.getElementById('tc_on').classList.remove('pure-button-primary'); }); }); </script> <br> <div class="pure-control-group"> <label for="transition">Transition time (s)</label> <input id="transition" name="transition" type="text" placeholder="10" value="{{TRANSITION_TIME}}"> </div> <br> <script> let timeoutId; function sendSliderValue(x) { x = x - 1; clearTimeout(timeoutId); timeoutId = setTimeout(() => { var value = document.getElementById(`bri${x}`).value; var url = `http://{{IP_ADDRESS}}/?bri${x}=${value}`; fetch(url).then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } console.log(`Sent slider value ${value} to ${url}`); }).catch(error => { console.error(`Error sending slider value to ${url}: ${error}`); }); }, 500); } </script> <br> <table border=0> <tr> <td>