mangavalkandClaude Opus 5.5
ae87849e75
The clock answers like a WLED device (mDNS _wled._tcp, /json/info, /json/state, realtime UDP on 21324 and DDP on 4048), so SignalRGB can drive the 4 backlight LEDs, one per tube, LED 0 = left tube. Frames are shown at most 30 times a second (WLED_MAX_FPS); the normal effect returns 2.5 s after they stop, and the alarm flash still wins. Three new settings on the RGB page: enable (also a Home Assistant switch), stay dark while the tubes are off, and scale by the RGB brightness. They are stored in EEPROM after prm with their own magic value, so the update does not factory-reset the clock. page.js and site.css are now sent with no-cache: browsers kept them for a year and ran the old script after a web UI update. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
454 lines
24 KiB
HTML
454 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Uniclock 3.0</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="site.css">
|
|
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" sizes="16x16">
|
|
<script src="jquery_360.js"></script>
|
|
<script src="page.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="info-popup">
|
|
<div id="popup-box" class="max-width">
|
|
<div id="popup-close-btn">X</div>
|
|
<h2>Random Input</h2>
|
|
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
|
|
</div>
|
|
</div>
|
|
<div id="menu-holder">
|
|
<div class="floating-menu">
|
|
<div class="max-width">
|
|
<table id="menu">
|
|
<tr></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content max-width">
|
|
<div class="form">
|
|
<div page="main">
|
|
<div class="header">
|
|
<br>
|
|
<div class="control-holder">
|
|
<label for="version">Version</label>
|
|
<span id="versionHeader" class="info medium" pagemenu="settings"></span>
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>Current Time</label>
|
|
<span id="currentTime" class="info medium"></span>
|
|
</div>
|
|
<div class="control-holder temperature-holder">
|
|
<label>Temperature</label>
|
|
<span id="temperature" class="info medium"></span>
|
|
</div>
|
|
<div class="control-holder temperature-holder2">
|
|
<label>Temperature-2</label>
|
|
<span id="temperature2" class="info medium"></span>
|
|
</div>
|
|
<div class="control-holder humidity-holder">
|
|
<label>Humidity</label>
|
|
<span id="humidity" class="info medium"></span>
|
|
</div>
|
|
<div class="control-holder humidity-holder2">
|
|
<label>Humidity-2</label>
|
|
<span id="humidity2" class="info medium"></span>
|
|
</div>
|
|
<div class="control-holder pressure-holder">
|
|
<label>Pressure</label>
|
|
<span id="pressure" class="info medium"></span>
|
|
</div>
|
|
<div class="control-holder lux-holder">
|
|
<label>Illuminance</label>
|
|
<span id="lux" class="info medium"></span>
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>WiFi RSSI dB</label>
|
|
<span id="rssi" class="info medium"></span>
|
|
</div>
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>Alarm</label>
|
|
<input id="alarmEnable" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="alarmEnable">off</span>
|
|
<span class="switcher non-selectable" for="alarmEnable"></span>
|
|
<span class="switcher-text right non-selectable" for="alarmEnable">on</span>
|
|
</div>
|
|
|
|
<div class="control-holder">
|
|
<label for="alarmTime">Alarm Time</label>
|
|
<div class="multiple-input">
|
|
<select id="alarmTimeHours" class="number-select two-digit" min="0" max="23"></select>
|
|
<span>:</span>
|
|
<select id="alarmTimeMinutes" class="number-select two-digit" min="0" max="59" step="1"></select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-holder">
|
|
<label for="alarmPeriod">Alarm End (sec)</label>
|
|
<input type="range" min="1" max="240" class="slider" id="alarmPeriod">
|
|
</div>
|
|
<div class="control-holder radar-holder">
|
|
<label>Radar</label>
|
|
<input id="enableRadar" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="enableRadar">off</span>
|
|
<span class="switcher non-selectable" for="enableRadar"></span>
|
|
<span class="switcher-text right non-selectable" for="enableRadar">on</span>
|
|
</div>
|
|
<div class="control-holder radar-holder">
|
|
<label>Radar Timeout (min)</label>
|
|
<input type="range" min="1" max="60" class="slider" id="radarTimeout">
|
|
</div>
|
|
<div class="control-holder lux-holder">
|
|
<label>AutoDimmer</label>
|
|
<input id="enableAutoDim" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="enableAutoDim">off</span>
|
|
<span class="switcher non-selectable" for="enableAutoDim"></span>
|
|
<span class="switcher-text right non-selectable" for="enableAutoDim">on</span>
|
|
</div>
|
|
</div>
|
|
<!-- display settings -->
|
|
<div page="display" class="tube-holder">
|
|
<br>
|
|
<div class="control-holder">
|
|
<label>Manual Override</label>
|
|
<input id="manualOverride" type="checkbox" class="switch two-side">
|
|
<span class="switcher-text left non-selectable" for="manualOverride">DAY</span>
|
|
<span class="switcher non-selectable" for="manualOverride"></span>
|
|
<span class="switcher-text right non-selectable" for="manualOverride">NIGHT</span>
|
|
</div>
|
|
|
|
<div class="control-holder wordclock-holder">
|
|
<label>Display Mode</label>
|
|
<input id="set12_24" type="checkbox" class="switch two-side">
|
|
<span class="switcher-text left non-selectable" for="set12_24">12h</span>
|
|
<span class="switcher non-selectable" for="set12_24"></span>
|
|
<span class="switcher-text right non-selectable" for="set12_24">24h</span>
|
|
</div>
|
|
|
|
<div class="control-holder wordclock-holder">
|
|
<label>Zero Handling</label>
|
|
<input id="showZero" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="showZero">Hide</span>
|
|
<span class="switcher non-selectable" for="showZero"></span>
|
|
<span class="switcher-text right non-selectable" for="showZero">Show</span>
|
|
</div>
|
|
|
|
<div class="control-holder wordclock-holder">
|
|
<label>Blinking Dots</label>
|
|
<input id="enableBlink" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="enableBlink">off</span>
|
|
<span class="switcher non-selectable" for="enableBlink"></span>
|
|
<span class="switcher-text right non-selectable" for="enableBlink">on</span>
|
|
</div>
|
|
<div class="control-holder wordclock-holder">
|
|
<label>Double Blink</label>
|
|
<input id="enableDoubleBlink" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="enableDoubleBlink">off</span>
|
|
<span class="switcher non-selectable" for="enableDoubleBlink"></span>
|
|
<span class="switcher-text right non-selectable" for="enableDoubleBlink">on</span>
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>Time Zone</label>
|
|
<select id="utc_offset" class="number-select" min="-12" max="12" prefix="(UTC " suffix=":00)"></select>
|
|
</div>
|
|
|
|
<div class="control-holder">
|
|
<label title="Daylight saving time">DST</label>
|
|
<input id="enableDST" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="enableDST">off</span>
|
|
<span class="switcher non-selectable" for="enableDST"></span>
|
|
<span class="switcher-text right non-selectable" for="enableDST">on</span>
|
|
</div>
|
|
|
|
<div class="control-holder">
|
|
<label for="animMode">Animation Mode</label>
|
|
<!-- <select id="animMode" class="number-select" min="0" max="6" step="1" prefix="Animation_" suffix=""></select> -->
|
|
<select id="animMode">
|
|
<option value="0">Off</option>
|
|
<option value="1">1 Count Up</option>
|
|
<option value="2">2 Count Down</option>
|
|
<option value="3">3 Shift Right</option>
|
|
<option value="4">4 Shift Left</option>
|
|
<option value="5">5 Transition</option>
|
|
<option value="6">Random 1-5</option>
|
|
<option value="7">Random 1-4</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="control-holder wordclock-holder">
|
|
<label for="interval">Cathode Protect</label>
|
|
<input type="range" min="0" max="60" class="slider" id="interval">
|
|
</div>
|
|
|
|
|
|
<div class="control-holder">
|
|
<label>Auto Day/Night</label>
|
|
<input id="enableAutoShutoff" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="enableAutoShutoff">off</span>
|
|
<span class="switcher non-selectable" for="enableAutoShutoff"></span>
|
|
<span class="switcher-text right non-selectable" for="enableAutoShutoff">on</span>
|
|
</div>
|
|
|
|
<div class="control-holder">
|
|
<label>Day Brightness</label>
|
|
<input type="range" min="1" class="slider" id="dayBright">
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>Night Brightness</label>
|
|
<input type="range" min="0" class="slider" id="nightBright">
|
|
</div>
|
|
|
|
<div class="control-holder">
|
|
<label>Day</label>
|
|
<div class="multiple-input">
|
|
<select id="dayTimeHours" class="number-select two-digit" min="0" max="23"></select>
|
|
<span>:</span>
|
|
<select id="dayTimeMinutes" class="number-select two-digit" min="0" max="59" step="5"></select>
|
|
</div>
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>Night</label>
|
|
<div class="multiple-input">
|
|
<select id="nightTimeHours" class="number-select two-digit" min="0" max="23"></select>
|
|
<span>:</span>
|
|
<select id="nightTimeMinutes" class="number-select two-digit" min="0" max="59" step="5"></select>
|
|
</div>
|
|
</div>
|
|
<div class="control-holder wordclock-holder">
|
|
<label>Display Time/Date</label>
|
|
<input id="enableTimeDisplay" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="enableTimeDisplay">off</span>
|
|
<span class="switcher non-selectable" for="enableTimeDisplay"></span>
|
|
<span class="switcher-text right non-selectable" for="enableTimeDisplay">on</span>
|
|
</div>
|
|
<div class="control-holder">
|
|
<label for="dateMode">Date Format</label>
|
|
<select id="dateMode">
|
|
<option value="0">dd/mm/yyyy</option>
|
|
<option value="1">mm/dd/yyyy</option>
|
|
<option value="2">yyyy/mm/dd</option>
|
|
</select>
|
|
</div>
|
|
<div class="control-holder wordclock-holder">
|
|
<label>Date Repeat (min)</label>
|
|
<input type="range" min="0" max="10" class="slider" id="dateRepeatMin">
|
|
</div>
|
|
<div class="control-holder temperature-holder">
|
|
<label>Temp/H. Repeat (min)</label>
|
|
<input type="range" min="0" max="10" class="slider" id="tempRepeatMin">
|
|
</div>
|
|
<div class="control-holder temperature-holder">
|
|
<label>Temperature Format</label>
|
|
<input id="tempCF" type="checkbox" class="switch two-side">
|
|
<span class="switcher-text left non-selectable" for="tempCF">C</span>
|
|
<span class="switcher non-selectable" for="tempCF"></span>
|
|
<span class="switcher-text right non-selectable" for="tempCF">F</span>
|
|
</div>
|
|
<div class="control-holder wordclock-holder">
|
|
<label>Date seconds</label>
|
|
<div class="multiple-input">
|
|
<select id="dateStart" class="number-select two-digit" min="0" max="59"></select>
|
|
<span>-</span>
|
|
<select id="dateEnd" class="number-select two-digit" min="0" max="59" step="1"></select>
|
|
</div>
|
|
</div>
|
|
<div class="control-holder temperature-holder">
|
|
<label>Temperature seconds</label>
|
|
<div class="multiple-input">
|
|
<select id="tempStart" class="number-select two-digit" min="0" max="59"></select>
|
|
<span>-</span>
|
|
<select id="tempEnd" class="number-select two-digit" min="0" max="59" step="1"></select>
|
|
</div>
|
|
</div>
|
|
<div class="control-holder humidity-holder">
|
|
<label>Humidity seconds</label>
|
|
<div class="multiple-input">
|
|
<select id="humidStart" class="number-select two-digit" min="0" max="59"></select>
|
|
<span>-</span>
|
|
<select id="humidEnd" class="number-select two-digit" min="0" max="59" step="1"></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RGB settings -->
|
|
<div page="rgb" class="tube-holder">
|
|
<br>
|
|
<div class="control-holder rgb-holder">
|
|
<label for="rgbEffect">RGB Effect</label>
|
|
<select id="rgbEffect">
|
|
<option value="0">OFF</option>
|
|
<option value="1">Fixed Color</option>
|
|
<option value="2">Rainbow Flow</option>
|
|
<option value="3">Rainbow Stepper</option>
|
|
<option value="4">Color Dimmer</option>
|
|
<option value="5">Color Changer</option>
|
|
<option value="6">Color FlowChanger</option>
|
|
<option value="7">Color FlowChanger Random-1</option>
|
|
<option value="8">Color FlowChanger Random-2</option>
|
|
<option value="9">Color FlowChanger Random-3</option>
|
|
<option value="10">Knight Rider's KITT</option>
|
|
</select>
|
|
</div>
|
|
<div class="control-holder rgb-holder">
|
|
<label>RGB Brightness</label>
|
|
<input type="range" min="8" max="255" class="slider" id="rgbBrightness">
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>Fixed Color</label>
|
|
<div id="color-select-holder">
|
|
<div>
|
|
<input type="range" min="1" max="255" class="slider" id="rgbFixColor">
|
|
</div>
|
|
<div>
|
|
<div id="selectedColor"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-holder rgb-holder">
|
|
<label>Direction</label>
|
|
<input id="rgbDir" type="checkbox" class="switch two-side">
|
|
<span class="switcher-text left non-selectable" for="rgbDir">left</span>
|
|
<span class="switcher non-selectable" for="rgbDir"></span>
|
|
<span class="switcher-text right non-selectable" for="rgbDir">right</span>
|
|
</div>
|
|
|
|
<div class="control-holder">
|
|
<label for="rgbSpeed">Animation Speed</label>
|
|
<input type="range" min="1" max="255" class="slider" id="rgbSpeed">
|
|
</div>
|
|
|
|
<div class="control-holder wled-holder">
|
|
<label>SignalRGB (WLED)</label>
|
|
<input id="wledEnable" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="wledEnable">off</span>
|
|
<span class="switcher non-selectable" for="wledEnable"></span>
|
|
<span class="switcher-text right non-selectable" for="wledEnable">on</span>
|
|
</div>
|
|
<div class="control-holder wled-holder">
|
|
<label>SignalRGB off with tubes</label>
|
|
<input id="wledDarkWithTubes" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="wledDarkWithTubes">off</span>
|
|
<span class="switcher non-selectable" for="wledDarkWithTubes"></span>
|
|
<span class="switcher-text right non-selectable" for="wledDarkWithTubes">on</span>
|
|
</div>
|
|
<div class="control-holder wled-holder">
|
|
<label>SignalRGB uses RGB Brightness</label>
|
|
<input id="wledUseBrightness" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="wledUseBrightness">off</span>
|
|
<span class="switcher non-selectable" for="wledUseBrightness"></span>
|
|
<span class="switcher-text right non-selectable" for="wledUseBrightness">on</span>
|
|
</div>
|
|
<div class="control-holder wled-holder">
|
|
<label>SignalRGB active</label>
|
|
<span id="wledLive" class="info medium"></span>
|
|
</div>
|
|
</div>
|
|
<!-- WiFi settings -->
|
|
<div page=wifi>
|
|
<br>
|
|
<div class="control-holder">
|
|
<label>WiFi SSID</label>
|
|
<input type="text" id="wifiSsid">
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>WiFi Password</label>
|
|
<input type="text" id="wifiPsw">
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>AP SSID</label>
|
|
<input type="text" id="ApSsid">
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>AP Password</label>
|
|
<input type="text" id="ApPsw">
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>WiFi Mode</label>
|
|
<input id="wifiMode" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="wifiMode">AP</span>
|
|
<span class="switcher non-selectable" for="wifiMode"></span>
|
|
<span class="switcher-text right non-selectable" for="wifiMode">Client</span>
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>Ntp Server</label>
|
|
<input type="text" id="NtpServer">
|
|
</div>
|
|
<div class="control-holder mqtt-holder">
|
|
<label>MQTT Enable</label>
|
|
<input id="mqttEnable" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="mqttEnable">off</span>
|
|
<span class="switcher non-selectable" for="mqttEnable"></span>
|
|
<span class="switcher-text right non-selectable" for="mqttEnable">on</span>
|
|
</div>
|
|
<div class="control-holder mqtt-holder">
|
|
<label>MQTT Address</label>
|
|
<input type="text" id="mqttBrokerAddr">
|
|
</div>
|
|
<div class="control-holder mqtt-holder">
|
|
<label>MQTT User</label>
|
|
<input type="text" id="mqttBrokerUser">
|
|
</div>
|
|
<div class="control-holder mqtt-holder">
|
|
<label>MQTT Password</label>
|
|
<input type="text" id="mqttBrokerPsw">
|
|
</div>
|
|
<div class="control-holder mqtt-holder">
|
|
<label>MQTT Refresh (sec)</label>
|
|
<input type="range" min="10" max="100" class="slider" id="mqttBrokerRefresh">
|
|
</div>
|
|
</div>
|
|
<div page="settings" hidden="true">
|
|
<br><br>
|
|
<!-- Sensor corrections -->
|
|
<div class="control-holder temperature-holder">
|
|
<label>Temperature#1</label>
|
|
<input type="range" min="-5" max="5" step="0.1" class="slider" id="corrT0">
|
|
</div>
|
|
<div class="control-holder temperature-holder2">
|
|
<label>Temperature#2</label>
|
|
<input type="range" min="-5" max="5" step="0.1" class="slider" id="corrT1">
|
|
</div>
|
|
<div class="control-holder humidity-holder">
|
|
<label>Humidity#1</label>
|
|
<input type="range" min="-25" max="25" step="0.1" class="slider" id="corrH0">
|
|
</div>
|
|
<div class="control-holder humidity-holder2">
|
|
<label>Humidity#2</label>
|
|
<input type="range" min="-25" max="25" step="0.1" class="slider" id="corrH1">
|
|
</div>
|
|
<div class="control-holder wordclock-holder">
|
|
<label>CathodeProtect (minutes)</label>
|
|
<input type="range" min="1" max="60" step="1" class="slider" id="cathProtMin">
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>Firmware Server</label>
|
|
<input type="text" id="firmware">
|
|
</div>
|
|
<br><br><br>
|
|
<div class="control-holder">
|
|
<button id="cath-prot-btn" onclick="areYouSure('cathodeProtect')">Cathode Protect</button>
|
|
<button id="fw-update-btn" onclick="areYouSure('firmwareupdate')">Firmware Update</button>
|
|
<button id="restart-btn" onclick="areYouSure('reset')">Restart</button>
|
|
<button id="factory-reset-btn" onclick="areYouSure('factoryreset')">Factory Reset</button>
|
|
</div>
|
|
<div id="clock-details">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="separator"></div>
|
|
<div class="footer">
|
|
© 2020-22 Peter Gautier<span>-</span><a href="mailto: gautier.p62@gmail.com">gautier.p62@gmail.com</a><br>
|
|
Modified by Claude for the RetroModding NixieIN12v2 clock<span>-</span><a href="https://mangavalk.com/mangavalk/nixie-clock" target="_blank">mangavalk.com/mangavalk/nixie-clock</a><br>
|
|
<div id="version" class="info" pagemenu="settings"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html> |