Import ESP_UniClock (upstream 1189810)
Vendored from https://github.com/gpeter62/ESP_UniClock: the sketch source, the web UI and the libraries the ESP8266 build needs, unpacked from the bundled zips. Adds a PlatformIO project for the ESP-12. The source is unchanged; local changes follow as separate commits. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
mangavalkandClaude Opus 5.5 committed
1 parent
8efa810e4e
commit
b347f1c63f
843 files changed
+122061
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 318 B |
@@ -0,0 +1,427 @@
|
||||
<!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>
|
||||
<!-- 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>
|
||||
<div id="version" class="info" pagemenu="settings"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,2 @@
|
||||
/*! jQuery v3.5.1 | (c) JS Foundation and other contributors | jquery.org/license */
|
||||
!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.5.1",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0<t&&t-1 in e)}S.fn=S.prototype={jquery:f,constructor:S,length:0,toArray:function(){return s.call(this)},get:function(e){return null==e?s.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=S.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return S.each(this,e)},map:function(n){return this.pushStack(S.map(this,function(e,t){return n.call(e,t,e)}))},slice:function(){return this.pushStack(s.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},even:function(){return this.pushStack(S.grep(this,function(e,t){return(t+1)%2}))},odd:function(){return this.pushStack(S.grep(this,function(e,t){return t%2}))},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(0<=n&&n<t?[this[n]]:[])},end:function(){return this.prevObject||this.constructor()},push:u,sort:t.sort,splice:t.splice},S.extend=S.fn.extend=function(){var e,t,n,r,i,o,a=arguments[0]||{},s=1,u=arguments.length,l=!1;for("boolean"==typeof a&&(l=a,a=arguments[s]||{},s++),"object"==typeof a||m(a)||(a={}),s===u&&(a=this,s--);s<u;s++)if(null!=(e=arguments[s]))for(t in e)r=e[t],"__proto__"!==t&&a!==r&&(l&&r&&(S.isPlainObject(r)||(i=Array.isArray(r)))?(n=a[t],o=i&&!Array.isArray(n)?[]:i||S.isPlainObject(n)?n:{},i=!1,a[t]=S.extend(l,o,r)):void 0!==r&&(a[t]=r));return a},S.extend({expando:"jQuery"+(f+Math.random()).replace(/\D/g,""),isReady:!0,error:function(e){throw new Error(e)},noop:function(){},isPlainObject:function(e){var t,n;return!(!e||"[object Object]"!==o.call(e))&&(!(t=r(e))||"function"==typeof(n=v.call(t,"constructor")&&t.constructor)&&a.call(n)===l)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},globalEval:function(e,t,n){b(e,{nonce:t&&t.nonce},n)},each:function(e,t){var n,r=0;if(p(e)){for(n=e.length;r<n;r++)if(!1===t.call(e[r],r,e[r]))break}else for(r in e)if(!1===t.call(e[r],r,e[r]))break;return e},makeArray:function(e,t){var n=t||[];return null!=e&&(p(Object(e))?S.merge(n,"string"==typeof e?[e]:e):u.call(n,e)),n},inArray:function(e,t,n){return null==t?-1:i.call(t,e,n)},merge:function(e,t){for(var n=+t.length,r=0,i=e.length;r<n;r++)e[i++]=t[r];return e.length=i,e},grep:function(e,t,n){for(var r=[],i=0,o=e.length,a=!n;i<o;i++)!t(e[i],i)!==a&&r.push(e[i]);return r},map:function(e,t,n){var r,i,o=0,a=[];if(p(e))for(r=e.length;o<r;o++)null!=(i=t(e[o],o,n))&&a.push(i);else for(o in e)null!=(i=t(e[o],o,n))&&a.push(i);return g(a)},guid:1,support:y}),"function"==typeof Symbol&&(S.fn[Symbol.iterator]=t[Symbol.iterator]),S.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(e,t){n["[object "+t+"]"]=t.toLowerCase()});var d=function(n){var e,d,b,o,i,h,f,g,w,u,l,T,C,a,E,v,s,c,y,S="sizzle"+1*new Date,p=n.document,k=0,r=0,m=ue(),x=ue(),A=ue(),N=ue(),D=function(e,t){return e===t&&(l=!0),0},j={}.hasOwnProperty,t=[],q=t.pop,L=t.push,H=t.push,O=t.slice,P=function(e,t){for(var n=0,r=e.length;n<r;n++)if(e[n]===t)return n;return-1},R="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",M="[\\x20\\t\\r\\n\\f]",I="(?:\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\[^\\r\\n\\f]|[\\w-]|[^\0-\\x7f])+",W="\\["+M+"*("+I+")(?:"+M+"*([*^$|!~]?=)"+M+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+I+"))|)"+M+"*\\]",F=":("+I+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+W+")*)|.*)\\)|)",B=new RegExp(M+"+","g"),$=new RegExp("^"+M+"+|((?:^|[^\\\\])(?:\\\\.)*)"+M+"+$","g"),_=new RegExp("^"+M+"*,"+M+"*"),z=new RegExp("^"+M+"*([>+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-lLine truncated
|
||||
@@ -0,0 +1,2 @@
|
||||
/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */
|
||||
!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.6.0",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0<t&&t-1 in e)}S.fn=S.prototype={jquery:f,constructor:S,length:0,toArray:function(){return s.call(this)},get:function(e){return null==e?s.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=S.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return S.each(this,e)},map:function(n){return this.pushStack(S.map(this,function(e,t){return n.call(e,t,e)}))},slice:function(){return this.pushStack(s.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},even:function(){return this.pushStack(S.grep(this,function(e,t){return(t+1)%2}))},odd:function(){return this.pushStack(S.grep(this,function(e,t){return t%2}))},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(0<=n&&n<t?[this[n]]:[])},end:function(){return this.prevObject||this.constructor()},push:u,sort:t.sort,splice:t.splice},S.extend=S.fn.extend=function(){var e,t,n,r,i,o,a=arguments[0]||{},s=1,u=arguments.length,l=!1;for("boolean"==typeof a&&(l=a,a=arguments[s]||{},s++),"object"==typeof a||m(a)||(a={}),s===u&&(a=this,s--);s<u;s++)if(null!=(e=arguments[s]))for(t in e)r=e[t],"__proto__"!==t&&a!==r&&(l&&r&&(S.isPlainObject(r)||(i=Array.isArray(r)))?(n=a[t],o=i&&!Array.isArray(n)?[]:i||S.isPlainObject(n)?n:{},i=!1,a[t]=S.extend(l,o,r)):void 0!==r&&(a[t]=r));return a},S.extend({expando:"jQuery"+(f+Math.random()).replace(/\D/g,""),isReady:!0,error:function(e){throw new Error(e)},noop:function(){},isPlainObject:function(e){var t,n;return!(!e||"[object Object]"!==o.call(e))&&(!(t=r(e))||"function"==typeof(n=v.call(t,"constructor")&&t.constructor)&&a.call(n)===l)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},globalEval:function(e,t,n){b(e,{nonce:t&&t.nonce},n)},each:function(e,t){var n,r=0;if(p(e)){for(n=e.length;r<n;r++)if(!1===t.call(e[r],r,e[r]))break}else for(r in e)if(!1===t.call(e[r],r,e[r]))break;return e},makeArray:function(e,t){var n=t||[];return null!=e&&(p(Object(e))?S.merge(n,"string"==typeof e?[e]:e):u.call(n,e)),n},inArray:function(e,t,n){return null==t?-1:i.call(t,e,n)},merge:function(e,t){for(var n=+t.length,r=0,i=e.length;r<n;r++)e[i++]=t[r];return e.length=i,e},grep:function(e,t,n){for(var r=[],i=0,o=e.length,a=!n;i<o;i++)!t(e[i],i)!==a&&r.push(e[i]);return r},map:function(e,t,n){var r,i,o=0,a=[];if(p(e))for(r=e.length;o<r;o++)null!=(i=t(e[o],o,n))&&a.push(i);else for(o in e)null!=(i=t(e[o],o,n))&&a.push(i);return g(a)},guid:1,support:y}),"function"==typeof Symbol&&(S.fn[Symbol.iterator]=t[Symbol.iterator]),S.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(e,t){n["[object "+t+"]"]=t.toLowerCase()});var d=function(n){var e,d,b,o,i,h,f,g,w,u,l,T,C,a,E,v,s,c,y,S="sizzle"+1*new Date,p=n.document,k=0,r=0,m=ue(),x=ue(),A=ue(),N=ue(),j=function(e,t){return e===t&&(l=!0),0},D={}.hasOwnProperty,t=[],q=t.pop,L=t.push,H=t.push,O=t.slice,P=function(e,t){for(var n=0,r=e.length;n<r;n++)if(e[n]===t)return n;return-1},R="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",M="[\\x20\\t\\r\\n\\f]",I="(?:\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\[^\\r\\n\\f]|[\\w-]|[^\0-\\x7f])+",W="\\["+M+"*("+I+")(?:"+M+"*([*^$|!~]?=)"+M+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+I+"))|)"+M+"*\\]",F=":("+I+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+W+")*)|.*)\\)|)",B=new RegExp(M+"+","g"),$=new RegExp("^"+M+"+|((?:^|[^\\\\])(?:\\\\.)*)"+M+"+$","g"),_=new RegExp("^"+M+"*,"+M+"*"),z=new RegExp("^"+M+"*([>+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^Line truncated
|
||||
@@ -0,0 +1,616 @@
|
||||
var isTest = (location.hostname === "localhost" || location.hostname === "127.0.0.1" || location.href.indexOf("file://") != -1);
|
||||
|
||||
var controlInfos = {
|
||||
"version": '<a href="https://github.com/gpeter62/ESP_UniClock" target="_blank">https://github.com/gpeter62/ESP_UniClock</a>',
|
||||
"maxDigits": "Number of tubes",
|
||||
"maxBrightness": "MAX Brightness",
|
||||
"currentDate": "Date",
|
||||
"currentTime": "Time",
|
||||
"temperature": "Temperature sensor #1",
|
||||
"temperature2": "Temperature sensor #2",
|
||||
"humidity": "Humidity sensor #1",
|
||||
"humidity2": "Humidity sensor #2",
|
||||
"pressure": "Pressure sensor #1",
|
||||
"lux": "Lux sensor current value",
|
||||
"rssi": "WiFi RSSI level dB (connection quality)",
|
||||
"wifiMode": "WiFi Client or Access Point",
|
||||
"alarmEnable": "Switch ON/OFF alarm",
|
||||
"alarmTime": "Alarm time (hour/minute)",
|
||||
"alarmPeriod": "Alarm maximum length (sec)",
|
||||
|
||||
//Tube display settings
|
||||
"utc_offset": 'Timezone setting. <a href="https://en.wikipedia.org/wiki/List_of_time_zones_by_country" target="_blank"></a>https://en.wikipedia.org/wiki/List_of_time_zones_by_country',
|
||||
"enableDST": "Daylight Saving Time ON/OFF",
|
||||
"set12_24": "Clock display 12 / 24 hours",
|
||||
"showZero": "Show starting zero on hours",
|
||||
"enableBlink": "ON / OFF",
|
||||
"interval": "Cathode protect interval (minutes)",
|
||||
"enableAutoShutoff": "Enable automatic day/night switch",
|
||||
"dayTime": "Day starts (manual brightness control)",
|
||||
"nightTime": "Night starts (manual brightness control)",
|
||||
"dayBright": "Day brightness",
|
||||
"nightBright": "Night brightness",
|
||||
"manualOverride": "Manual Day/Night change",
|
||||
"animMode": "Tube animation mode: 0=OFF, 1-5: Animations 6-7: Random",
|
||||
"dateMode": "0:dd/mm/yyyy 1:mm/dd/yyyy 2:yyyy/mm/dd",
|
||||
"tempCF": "Celsius / Fahrenheit display",
|
||||
"enableTimeDisplay": "Enable time&date display (Use OFF for thermometers)" ,
|
||||
"dateStart": "Date display start: Date is shown between Start/End seconds",
|
||||
"dateEnd": "Date display end",
|
||||
"tempStart": "Temperature display time slice start",
|
||||
"tempEnd": "Temperature display end",
|
||||
"humidStart": "Humidity display time slice start",
|
||||
"humidEnd": "Humidity display end",
|
||||
"dateRepeatMin": "Date is shown in every xx minutes. 0 = Disable date display",
|
||||
"tempRepeatMin": "Temperature/humidity is shown in every xx minutes. 0 = Disable temp/humid display",
|
||||
"enableDoubleBlink": "Enable both blinking dots",
|
||||
"enableAutoDim": "Enable auto brightness control (if sensor is installed)",
|
||||
"enableRadar": "Enable Radar/Pir tube switch (if sensor is installed)",
|
||||
"radarTimeout": "If Radar is used, automatic switch off after this timeout (minutes)",
|
||||
|
||||
//RGB settings
|
||||
"rgbDir" : "RGB animation direction (left/right)",
|
||||
"rgbEffect": "RGB animation#",
|
||||
"rgbBrightness": "RGB leds brightness 0..255",
|
||||
"rgbFixColor": "RGB color, if FixColor Effect is used",
|
||||
"rgbSpeed": "RGB animation speed",
|
||||
|
||||
//Wifi settings
|
||||
"wifiSsid": "WiFi network SSID to connect",
|
||||
"wifiPsw": "WiFI password",
|
||||
"ApSsid": "AccessPoint name, if standalone mode is used",
|
||||
"ApPsw": "AP password",
|
||||
"NtpServer": "Timeserver name, using WiFi. (Default is: pool.ntp.org)",
|
||||
"mqttBrokerAddr": "MQTT server address, if MQTT used",
|
||||
"mqttBrokerUser": "MQTT user",
|
||||
"mqttBrokerPsw": "MQTT password",
|
||||
"mqttBrokerRefresh": "MQTT send data in every xx sec",
|
||||
"mqttEnable": "Enable/Disable MQTT refresh",
|
||||
"firmware": "http server + firmware name to download new firmware",
|
||||
"corrT0": "Temperature sensor#1 correction",
|
||||
"corrT1": "Temperature sensor#2 correction",
|
||||
"corrH0": "Humidity sensor#1 correction",
|
||||
"corrH1": "Humidity sensor#2 correction" ,
|
||||
"cathProtMin": "Cathode Protect procedure (minutes)",
|
||||
"FW": "firmware code",
|
||||
"tubeDriver": "Tube driver modul"
|
||||
};
|
||||
|
||||
//Example config that UI recieves
|
||||
var configuration = {
|
||||
//Main screen
|
||||
"version": "UniClock 3.0",
|
||||
"maxDigits": 6,
|
||||
"maxBrightness": 10,
|
||||
"currentDate": "2020.10.24",
|
||||
"currentTime": "15:01",
|
||||
"temperature": 22.1,
|
||||
"temperature2": 255,
|
||||
"humidity": 45,
|
||||
"humidity2": 255,
|
||||
"pressure": 255,
|
||||
"lux": 100,
|
||||
"rssi": 0,
|
||||
"wifiMode": true,
|
||||
"alarmEnable": false,
|
||||
"alarmTime": "6:30",
|
||||
"alarmPeriod": 15,
|
||||
"enableRadar": false,
|
||||
"radarTimeout": 5,
|
||||
|
||||
//Tube display settings
|
||||
"utc_offset": 1,
|
||||
"enableDST": true,
|
||||
"set12_24": true,
|
||||
"showZero": true,
|
||||
"enableBlink": true,
|
||||
"interval": 15,
|
||||
"enableAutoShutoff": true,
|
||||
"dayTime": "7:00",
|
||||
"nightTime": "22:00",
|
||||
"dayBright": 10,
|
||||
"nightBright": 3,
|
||||
"manualOverride": true,
|
||||
"animMode": 6,
|
||||
"dateMode": 2, // 0:dd/mm/yyyy 1:mm/dd/yyyy 2:yyyy/mm/dd
|
||||
"tempCF": false, //Temperature Celsius / Fahrenheit
|
||||
"enableTimeDisplay": true,
|
||||
"dateStart": 45,
|
||||
"dateEnd": 50,
|
||||
"tempStart": 35,
|
||||
"tempEnd": 40,
|
||||
"humidStart": 40,
|
||||
"humidEnd": 45,
|
||||
"dateRepeatMin": 3,
|
||||
"tempRepeatMin": 1,
|
||||
"enableDoubleBlink": true,
|
||||
"enableAutoDim": false,
|
||||
|
||||
//RGB settings
|
||||
"rgbDir" : true,
|
||||
"rgbEffect": 1,
|
||||
"rgbBrightness": 100,
|
||||
"rgbFixColor": 150,
|
||||
"rgbSpeed": 50,
|
||||
|
||||
//Wifi settings
|
||||
"wifiSsid": "mywifi",
|
||||
"wifiPsw": "mypsw",
|
||||
"ApSsid": "UniClock",
|
||||
"ApPsw": "uniclock",
|
||||
"NtpServer": "pool.ntp.org",
|
||||
"mqttBrokerAddr": "10.0.99.12",
|
||||
"mqttBrokerUser": "mqtt",
|
||||
"mqttBrokerPsw": "mqttPW",
|
||||
"mqttBrokerRefresh": 30,
|
||||
"mqttEnable": false,
|
||||
"firmware": "http://server/fw.bin",
|
||||
"corrT0": 0.0,
|
||||
"corrT1": 0.0,
|
||||
"corrH0": 0.0,
|
||||
"corrH1": 0.0,
|
||||
"cathProtMin": 5,
|
||||
"FW": "fw",
|
||||
"tubeDriver": "xxx"
|
||||
};
|
||||
|
||||
var isMouseDown = 0;
|
||||
//Runs, when HTML document is fully loaded
|
||||
$(document).ready(function(){
|
||||
$(document).on('mousedown touchstart',function(event) {
|
||||
++isMouseDown;
|
||||
});
|
||||
$(document).on('mouseup touchend',function(event) {
|
||||
--isMouseDown;
|
||||
});
|
||||
|
||||
if(isTest){
|
||||
Init();
|
||||
setCurrentInfos();
|
||||
}
|
||||
else{
|
||||
getConfiguration();
|
||||
//Set current infos, like time, humidity and temperature
|
||||
getCurrentInfos();
|
||||
}
|
||||
});
|
||||
|
||||
function setLocalPagination(){
|
||||
$('[page]').not('[hidden]').each(function(){
|
||||
var page = $(this).attr('page');
|
||||
$('#menu tr').append('<td><div class="menu-item" pageMenu="'+page+'">'+page+'</div></td>');
|
||||
});
|
||||
}
|
||||
|
||||
function getConfiguration(){
|
||||
$.get('/getConfiguration/').done(function(data){
|
||||
configuration = data;
|
||||
}).always(function(){
|
||||
Init();
|
||||
});
|
||||
}
|
||||
|
||||
function sendMsgToArduino(key,value) {
|
||||
if(isTest){
|
||||
console.log(key + " " + value);
|
||||
}
|
||||
else{
|
||||
$.post('/saveSetting/', {"key" : key ,"value" : value }).done(function(data){
|
||||
console.log(data);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var COLORSATURATION = 255;
|
||||
var WHITE_INDEX = 192;
|
||||
function getColorFrom(WheelPos){
|
||||
if (WheelPos == WHITE_INDEX)
|
||||
return RgbColor(COLORSATURATION/2, COLORSATURATION/2, COLORSATURATION/2);
|
||||
|
||||
WheelPos = 255 - WheelPos;
|
||||
if(WheelPos < 85) {
|
||||
return RgbColor(255 - WheelPos * 3, 0, WheelPos * 3);
|
||||
} else if(WheelPos < 170) {
|
||||
WheelPos -= 85;
|
||||
return RgbColor(0, WheelPos * 3, 255 - WheelPos * 3);
|
||||
} else {
|
||||
WheelPos -= 170;
|
||||
return RgbColor(WheelPos * 3, 255 - WheelPos * 3, 0);
|
||||
}
|
||||
}
|
||||
|
||||
function RgbColor(r, g, b){
|
||||
return 'rgb('+r+','+g+','+b+')';
|
||||
}
|
||||
|
||||
function setPreviewColor(){
|
||||
var color = getColorFrom($('#rgbFixColor').val());
|
||||
$('#selectedColor').css('background-color',color);
|
||||
}
|
||||
|
||||
function setCurrentInfos(){
|
||||
$('#currentTime').html(getCurrentDate(configuration["currentDate"]) + " " + configuration["currentTime"]);
|
||||
$('#lux').html(configuration["lux"]);
|
||||
$('#rssi').html(configuration["rssi"]);
|
||||
$('#pressure').html(round(configuration["pressure"],1));
|
||||
$('#humidity').html(round(configuration["humidity"],1));
|
||||
$('#humidity2').html(round(configuration["humidity2"],1));
|
||||
$('#temperature').html(getTemperature(configuration["temperature"]));
|
||||
$('#temperature2').html(getTemperature(configuration["temperature2"]));
|
||||
$('#temperature, #temperature2').toggleClass('fahrenheit',configuration["tempCF"]);
|
||||
}
|
||||
|
||||
function round(value, decimals) {
|
||||
return parseFloat(value).toFixed(decimals);
|
||||
//return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
|
||||
}
|
||||
|
||||
function getTemperature(temperatureInC){
|
||||
if(configuration["tempCF"]){ //Fahrenheit
|
||||
return round(temperatureInC * 1.8 + 32,1);
|
||||
}
|
||||
else{
|
||||
return round(temperatureInC,1);
|
||||
}
|
||||
}
|
||||
|
||||
function getControlInfo(index){
|
||||
return controlInfos[index];
|
||||
}
|
||||
|
||||
//Contains the most important initializes
|
||||
function Init(){
|
||||
|
||||
$('#dayBright, #nightBright').attr('max',configuration['maxBrightness']);
|
||||
document.title = configuration['version'];
|
||||
$('#versionHeader').html(configuration['version']);
|
||||
|
||||
setLocalPagination();
|
||||
$('[pagemenu]').on('click',function(){
|
||||
$('.menu-item.active').removeClass('active');
|
||||
$('[page].active').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
$('[page="'+$(this).attr('pagemenu')+'"]').addClass('active');
|
||||
if($(this).attr('pagemenu') == 'settings'){
|
||||
getClockDetails();
|
||||
}
|
||||
});
|
||||
$('.menu-item').eq(0).trigger('click');
|
||||
|
||||
$('#rgbFixColor').on('input',function(){
|
||||
setPreviewColor();
|
||||
});
|
||||
|
||||
var sliderFadeOutTimer;
|
||||
function setFadeOutTimer(element){
|
||||
setTimeout(function(){
|
||||
if(isMouseDown > 0){
|
||||
clearTimeout(sliderFadeOutTimer);
|
||||
sliderFadeOutTimer = setFadeOutTimer(element);
|
||||
}
|
||||
else{
|
||||
$(element).addClass('fading').fadeOut('slow',function(){
|
||||
$(this).remove();
|
||||
});
|
||||
}
|
||||
},600);
|
||||
}
|
||||
|
||||
$('input[type="range"]').on('mousedown touchstart input',function(){
|
||||
clearTimeout(sliderFadeOutTimer);
|
||||
var id = $(this).attr('id');
|
||||
var parent = $(this).closest('.control-holder');
|
||||
$('[sliderfor]:not(.fading)').each(function(){
|
||||
if($(this).attr('sliderfor') != id && !$(this).hasClass('fading')){
|
||||
$(this).addClass('fading').fadeOut('slow',function(){
|
||||
$(this).remove();
|
||||
});
|
||||
}
|
||||
});
|
||||
if($(parent).children('.slider-info').length == 0){
|
||||
$(parent).append('<div class="slider-info" sliderfor="'+id+'"></div>');
|
||||
$(parent).children('.slider-info').fadeIn(300);
|
||||
}
|
||||
var _this = $(parent).children('.slider-info').text($(this).val());
|
||||
sliderFadeOutTimer = setFadeOutTimer(_this);
|
||||
});
|
||||
|
||||
$('.form label').on('click',function(){
|
||||
var id = '';
|
||||
if(!!$(this).attr('for')){
|
||||
id = $(this).attr('for');
|
||||
}
|
||||
else{
|
||||
id = $(this).closest('.control-holder').find('input, select, .info').eq(0).attr('id');
|
||||
}
|
||||
|
||||
var info = getControlInfo(id);
|
||||
if(!!info){
|
||||
showPopUp($(this).text(), info, 450, true);
|
||||
}
|
||||
});
|
||||
$('#popup-close-btn, #info-popup').on('click',function(){
|
||||
if($('#info-popup').hasClass('cantClose')){
|
||||
return;
|
||||
}
|
||||
else{
|
||||
$('#info-popup').fadeOut(450);
|
||||
}
|
||||
});
|
||||
$("#popup-box").click(function(event){
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
//binds custom switch functionality
|
||||
$('.switcher').on('click',function(){
|
||||
$('#'+$(this).attr('for')).prop('checked',!$('#'+$(this).attr('for')).is(":checked")).trigger('change');
|
||||
});
|
||||
|
||||
//binds custom switch text functionality
|
||||
$('.switcher-text').on('click',function(){
|
||||
$('#'+$(this).attr('for')).prop('checked',$(this).hasClass('right')).trigger('change');
|
||||
});
|
||||
|
||||
//fills autogenerated select drop downs
|
||||
/*
|
||||
Possible css class:
|
||||
two-digit - fills with two digit values if value lower than 10
|
||||
Possible attributes:
|
||||
min (mandatory) - auto generation's minimum value
|
||||
max (mandatory) - auto generation's maximum value
|
||||
step (optional) - auto generation's step, if not set, default is 1
|
||||
prefix (optional) - concatanate this string before value
|
||||
suffix (optional) - concatanate this string after value
|
||||
*/
|
||||
$('.number-select').each(function(){
|
||||
let from = $(this).attr('min')*1;
|
||||
let to = $(this).attr('max')*1;
|
||||
let step = !!$(this).attr('step') ? $(this).attr('step') : 1;
|
||||
|
||||
for(let i = from; i < to+1; i){
|
||||
let value = $(this).hasClass('two-digit') ? formatToTwoDigit(i) : i;
|
||||
let text_value = value;
|
||||
if($(this).attr('prefix') != null){
|
||||
text_value = $(this).attr('prefix') + text_value
|
||||
}
|
||||
if($(this).attr('suffix') != null){
|
||||
text_value += $(this).attr('suffix')
|
||||
}
|
||||
$(this).append('<option value="'+value+'">'+text_value+'</option>');
|
||||
i += step*1;
|
||||
}
|
||||
});
|
||||
|
||||
//fills the inputs with configuration values
|
||||
for(var index in configuration){
|
||||
let value = configuration[index];
|
||||
if(index == 'dayTime' || index == 'nightTime' || index == 'alarmTime'){
|
||||
value = value.split(':');
|
||||
$('#'+index+'Hours').val(formatToTwoDigit(value[0]));
|
||||
$('#'+index+'Minutes').val(formatToTwoDigit(value[1]));
|
||||
}
|
||||
else if(index == 'version'
|
||||
){
|
||||
$('#'+index).html(value);
|
||||
}
|
||||
else if(index == 'utc_offset' || index == 'maxBrightness' ||
|
||||
index == 'dayBright' || index == 'nightBright' ||
|
||||
index == 'animMode' || index == 'rgbBrightness' ||
|
||||
index == 'rgbFixColor' || index == 'rgbSpeed' ||
|
||||
index == 'rgbEffect' || index == 'interval' ||
|
||||
index == 'alarmPeriod' || index == 'radarTimeout' ||
|
||||
index == 'dateRepeatMin' || index == 'dateMode' ||
|
||||
index == 'dateStart' || index == 'dateEnd' ||
|
||||
index == 'timeStart' || index == 'timeEnd' ||
|
||||
index == 'tempStart' || index == 'tempEnd' ||
|
||||
index == 'humidStart' || index == 'humidEnd' ||
|
||||
index == 'mqttBrokerRefresh' || index == 'tempRepeatMin' ||
|
||||
index == 'wifiSsid' || index == 'wifiPsw' ||
|
||||
index == 'ApSsid' || index == 'ApPsw' ||
|
||||
index == 'mqttBrokerAddr' || index == 'NtpServer' ||
|
||||
index == 'mqttBrokerUser' || index =='mqttBrokerPsw' ||
|
||||
index == 'firmware' || index == 'corrT0' || index == 'corrT1' ||
|
||||
index == 'corrH0' || index == 'corrH1' || index == 'cathProtMin'
|
||||
){
|
||||
$('#'+index).val(value);
|
||||
}
|
||||
else if((index == 'enableDST' || index == 'set12_24' ||
|
||||
index == 'showZero' || index == 'enableBlink' ||
|
||||
index == 'enableAutoShutoff' || index == 'alarmEnable' ||
|
||||
index == 'rgbDir' || index == 'manualOverride' ||
|
||||
index == 'enableAutoDim' || index == 'enableRadar' ||
|
||||
index == 'enableDoubleBlink' || index == 'enableTimeDisplay' ||
|
||||
index == 'mqttEnable' || index == 'tempCF' || index == "wifiMode"
|
||||
) && !!value
|
||||
){
|
||||
$('#'+index).prop('checked',true);
|
||||
}
|
||||
else if(index == "maxDigits"){
|
||||
//TODO
|
||||
}
|
||||
}
|
||||
$('.radar-holder').toggleClass('hidden',configuration['radarTimeout'] == 0);
|
||||
$('.mqtt-holder').toggleClass('hidden',configuration['mqttBrokerRefresh'] == 0);
|
||||
$('.lux-holder').toggleClass('hidden',configuration['lux'] == 255);
|
||||
$('.pressure-holder').toggleClass('hidden',configuration['pressure'] == 255);
|
||||
$('.humidity-holder').toggleClass('hidden',configuration['humidity'] == 255);
|
||||
$('.humidity-holder2').toggleClass('hidden',configuration['humidity2'] == 255);
|
||||
$('.temperature-holder').toggleClass('hidden',configuration['temperature'] == 255);
|
||||
$('.temperature-holder2').toggleClass('hidden',configuration['temperature2'] == 255);
|
||||
$('.rgb-holder').toggleClass('hidden',configuration['rgbEffect'] == 255);
|
||||
$('.tube-holder').toggleClass('hidden',configuration['tubeDriver'] == "DUMMY");
|
||||
$('.wordclock-holder').toggleClass('hidden',configuration['tubeDriver'] == "WORDCLOCK");
|
||||
$('.sensors-holder').toggleClass('hidden',configuration['temperature'] == 255);
|
||||
setPreviewColor();
|
||||
|
||||
//sets a possible good timezone, if not already set
|
||||
//if(!configuration['utc_offset']){
|
||||
// //Intl.DateTimeFormat().resolvedOptions().timeZone <- I am in this Zone
|
||||
// var tryToFindCurrentZone = -(new Date().getTimezoneOffset() / 60);
|
||||
// $('#utc_offset').val(tryToFindCurrentZone);
|
||||
//}
|
||||
|
||||
setTimeout(function(){
|
||||
$('input, select').on('change',function(){
|
||||
var value = '';
|
||||
if($(this).attr('id').indexOf("Hours") == -1 || $(this).attr('id').indexOf("Minutes") == -1){
|
||||
if($(this).attr('type') == 'checkbox'){
|
||||
value = $(this).is(':checked');
|
||||
}
|
||||
else{
|
||||
value = $(this).val();
|
||||
}
|
||||
sendMsgToArduino($(this).attr('id'), value);
|
||||
}
|
||||
else{
|
||||
var key = $(this).attr('id').replace('Hours','').replace('Minutes','');
|
||||
value = $('#'+key+'Hours').val() + ":" + $('#'+key+'Minutes').val();
|
||||
sendMsgToArduino(key, value);
|
||||
}
|
||||
});
|
||||
$('#dateMode').on('change',function(){
|
||||
configuration["dateMode"] = $(this).val();
|
||||
setCurrentInfos();
|
||||
});
|
||||
$('#tempCF').on('change',function(){
|
||||
configuration["tempCF"] = !configuration["tempCF"];
|
||||
setCurrentInfos();
|
||||
});
|
||||
},200);
|
||||
}
|
||||
|
||||
function showPopUp(header, content, timeout, canClose){
|
||||
$('#popup-box h2').text(header);
|
||||
$('#popup-box .content').html(content);
|
||||
$('#info-popup').toggleClass('cantClose',!canClose);
|
||||
$('#info-popup').fadeIn(timeout);
|
||||
}
|
||||
|
||||
function areYouSure(fn){
|
||||
if (confirm("Are you sure to run " + fn + "?")) {
|
||||
if(fn == "reset"){
|
||||
callReset();
|
||||
}
|
||||
else if(fn == "factoryreset"){
|
||||
callFactoryReset();
|
||||
}
|
||||
else if(fn == "firmwareupdate"){
|
||||
callFirmwareUpdate();
|
||||
}
|
||||
else if(fn == "cathodeProtect"){
|
||||
callCathodeProtect();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function callReset(){
|
||||
if(isTest){return;}
|
||||
$.post('/reset/', {}).done(function(data){
|
||||
location.reload();
|
||||
}).always(function(){
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function callFactoryReset(){
|
||||
if(isTest){return;}
|
||||
$.post('/factoryreset/', {}).done(function(data){
|
||||
location.reload();
|
||||
}).always(function(){
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function callFirmwareUpdate(){
|
||||
if(isTest){return;}
|
||||
showPopUp("Firmware is updating", "Please do not turn off the clock", 300, false);
|
||||
$.post('/firmwareupdate/', {}).done(function(data){
|
||||
if(!!data.header){
|
||||
showPopUp(data.header, data.content, 300, data.canClose);
|
||||
}
|
||||
}).always(function(){
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function callCathodeProtect(){
|
||||
if(isTest){return;}
|
||||
$.post('/cathodeProtect/', {}).done(function(data){
|
||||
location.reload();
|
||||
}).always(function(){
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function getClockDetails(){
|
||||
if(isTest){return;}
|
||||
$.get('/getClockDetails/').done(function(data){
|
||||
$('#clock-details').html(data);
|
||||
}).always(function(){
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function getCurrentInfos(){
|
||||
if(isTest){return;}
|
||||
$.get('/getCurrentInfos/').done(function(data){
|
||||
for(var i in data){
|
||||
configuration[i] = data[i];
|
||||
}
|
||||
if(!!data["popupMsg"] && data["popupMsg"].length > 0){
|
||||
showPopUp("Info", data["popupMsg"], 300, true);
|
||||
}
|
||||
setCurrentInfos();
|
||||
setTimeout(getCurrentInfos,20000); //refreshes time every 20 second by calling itself
|
||||
}).always(function(){
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function getCurrentDate(date){
|
||||
var splittedDate = date.split('.');
|
||||
var yyyy = splittedDate[0];
|
||||
var mm = splittedDate[1];
|
||||
var dd = splittedDate[2];
|
||||
|
||||
if(configuration["dateMode"] == 0){
|
||||
return dd+"/"+mm+"/"+yyyy;
|
||||
}
|
||||
else if(configuration["dateMode"] == 1){
|
||||
return mm+"/"+dd+"/"+yyyy;
|
||||
}
|
||||
else if(configuration["dateMode"] == 2){
|
||||
return yyyy+"/"+mm+"/"+dd;
|
||||
}
|
||||
else{
|
||||
return yyyy+"/"+mm+"/"+dd; //if dateMode?? // 0:dd/mm/yyyy 1:mm/dd/yyyy 2:yyyy/mm/dd
|
||||
}
|
||||
}
|
||||
|
||||
//Gets the current time from browser and gives back as readable format
|
||||
function getCurrentTime(){
|
||||
var today = new Date();
|
||||
var dd = formatToTwoDigit(today.getDate());
|
||||
var mm = formatToTwoDigit(today.getMonth()+1);
|
||||
var yyyy = today.getFullYear();
|
||||
var hour = formatToTwoDigit(today.getHours());
|
||||
var minute = formatToTwoDigit(today.getMinutes());
|
||||
|
||||
if(configuration["dateMode"] == 0){
|
||||
return dd+"-"+mm+"-"+yyyy+" "+hour+":"+minute;
|
||||
}
|
||||
else if(configuration["dateMode"] == 1){
|
||||
return mm+"-"+dd+"-"+yyyy+" "+hour+":"+minute;
|
||||
}
|
||||
else if(configuration["dateMode"] == 2){
|
||||
return yyyy+"-"+mm+"-"+dd+" "+hour+":"+minute;
|
||||
}
|
||||
else{
|
||||
return yyyy+"-"+mm+"-"+dd+" "+hour+":"+minute; //if dateMode?? // 0:dd/mm/yyyy 1:mm/dd/yyyy 2:yyyy/mm/dd
|
||||
}
|
||||
}
|
||||
|
||||
//if number is lower than 10, adds a zero
|
||||
function formatToTwoDigit(number){
|
||||
return ("0" + number).slice(-2);
|
||||
}
|
||||
@@ -0,0 +1,479 @@
|
||||
*, *:before, *:after{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.non-selectable{
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-khtml-user-select: none; /* Konqueror HTML */
|
||||
-moz-user-select: none; /* Old versions of Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently
|
||||
supported by Chrome, Edge, Opera and Firefox */
|
||||
}
|
||||
html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-image: radial-gradient(#222, #111);
|
||||
min-height: 100%;
|
||||
background-attachment: fixed;
|
||||
color: #c35;
|
||||
}
|
||||
.hidden{
|
||||
display: none !important;
|
||||
}
|
||||
a, a:visited{
|
||||
color: #c35;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover{
|
||||
text-decoration: underline;
|
||||
color: #777;
|
||||
}
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
.form{
|
||||
overflow: auto;
|
||||
}
|
||||
.max-width{
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
.row{
|
||||
clear: both;
|
||||
overflow: auto;
|
||||
}
|
||||
.row + .row{
|
||||
margin-top: 15px;
|
||||
}
|
||||
.control-holder{
|
||||
width: 33.333333%;
|
||||
display: block;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
min-height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
.header{
|
||||
overflow: auto;
|
||||
}
|
||||
.form label {
|
||||
cursor: help;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
letter-spacing: 0.025em;
|
||||
font-size: 20px;
|
||||
vertical-align: top;
|
||||
line-height: 30px;
|
||||
position: relative;
|
||||
text-shadow: 1px 1px 0 black;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
input, select, button{
|
||||
margin: 0;
|
||||
font: inherit;
|
||||
line-height: normal;
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
background: #222222;
|
||||
color: #eee;
|
||||
position: relative;
|
||||
padding: 5px;
|
||||
min-height: 30px;
|
||||
outline: none;
|
||||
line-height: normal;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #666;
|
||||
transition: 0.15s background;
|
||||
}
|
||||
input:not([type="text"]):not(:disabled),select:not(:disabled),button:not(:disabled){
|
||||
cursor: pointer;
|
||||
}
|
||||
input:hover, select:hover, button:hover{
|
||||
background: #333;
|
||||
}
|
||||
input:focus, select:focus, button:focus{
|
||||
background: #4E4E4E;
|
||||
border-color: #888;
|
||||
}
|
||||
input:active, select:active, button:active{
|
||||
background: #5E5E5E;
|
||||
border-color: #aaa;
|
||||
}
|
||||
button{
|
||||
border: 2px solid #c35;
|
||||
color: #c35;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
button:hover{
|
||||
color: #ddd;
|
||||
}
|
||||
.multiple-input span{
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
.two-digit, .small{
|
||||
max-width: 60px;
|
||||
}
|
||||
[pagemenu="settings"]:hover{
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
[type="checkbox"].switch{
|
||||
position: fixed;
|
||||
left: -300px;
|
||||
top: -300px;
|
||||
}
|
||||
[type="checkbox"].switch ~ .switcher{
|
||||
width: 60px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
height: 30px;
|
||||
padding: 2px;
|
||||
background: #222222;
|
||||
border: 1px solid #666;
|
||||
transition: 0.15s background;
|
||||
border-radius: 30px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
[type="checkbox"].switch:focus ~ .switcher{
|
||||
background: #5E5E5E;
|
||||
border-color: #aaa;
|
||||
}
|
||||
[type="checkbox"].switch ~ .switcher:after{
|
||||
display: inline-block;
|
||||
content: '';
|
||||
vertical-align: top;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.4);
|
||||
transition: 0.3s all;
|
||||
}
|
||||
[type="checkbox"].switch:checked ~ .switcher:after{
|
||||
left: 34px;
|
||||
}
|
||||
[type="checkbox"].switch:not(.two-side):checked ~ .switcher:after{
|
||||
background: rgba(255,255,255,0.7);
|
||||
}
|
||||
[type="checkbox"].switch:not(.two-side):checked ~ .switcher{
|
||||
background: #37bfb9;
|
||||
background-color: #c35;
|
||||
}
|
||||
[page]{
|
||||
display: none;
|
||||
}
|
||||
[page].active{
|
||||
display: block;
|
||||
}
|
||||
#menu-holder{
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
#menu-holder > .floating-menu{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 110;
|
||||
background: #161616;
|
||||
}
|
||||
#menu{
|
||||
width: 100%;
|
||||
}
|
||||
#menu td{
|
||||
padding: 0 18px;
|
||||
}
|
||||
#menu td .menu-item{
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid gray;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
line-height: 30px;
|
||||
background-color: transparent;
|
||||
transition: 0.3s border, 0.3s background, 0.3s color;
|
||||
}
|
||||
#menu td .menu-item:hover{
|
||||
background-color: #4E4E4E;
|
||||
border-color: #ddd;
|
||||
}
|
||||
#menu td .menu-item.active{
|
||||
color: #ddd;
|
||||
border-color: #c35;
|
||||
}
|
||||
.switcher-text{
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s color;
|
||||
text-shadow: 1px 1px 0 black;
|
||||
}
|
||||
.switcher-text:hover{
|
||||
color: #c35 !important;
|
||||
}
|
||||
.switcher-text.left{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.switcher-text.right{
|
||||
margin-left: 10px;
|
||||
color: #555;
|
||||
}
|
||||
[type="checkbox"].switch:checked ~ .switcher-text.left{
|
||||
color: #555;
|
||||
}
|
||||
[type="checkbox"].switch:checked ~ .switcher-text.right{
|
||||
color: inherit;
|
||||
}
|
||||
.footer{
|
||||
margin: auto;
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 0 black;
|
||||
}
|
||||
.footer span{
|
||||
margin: 0 10px;
|
||||
font-size: 26px;
|
||||
color: #555;
|
||||
}
|
||||
.separator{
|
||||
border-top: 1px dotted #555;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.info{
|
||||
color: #555;
|
||||
padding: 10px 0;
|
||||
font-style: italic;
|
||||
display: inline-block;
|
||||
text-shadow: 1px 1px 0 black;
|
||||
}
|
||||
.info.medium{
|
||||
color: #888;
|
||||
font-weight: bold;
|
||||
font-size: 25px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.info.big{
|
||||
color: #888;
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.info:after{
|
||||
color: #666;
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
font-size: 28px;
|
||||
}
|
||||
#temperature:after{
|
||||
content: ' °C';
|
||||
}
|
||||
#temperature.fahrenheit:after{
|
||||
content: ' °F';
|
||||
}
|
||||
#temperature2:after{
|
||||
content: ' °C';
|
||||
}
|
||||
#temperature2.fahrenheit:after{
|
||||
content: ' °F';
|
||||
}
|
||||
#humidity:after{
|
||||
content: '%';
|
||||
}
|
||||
#pressure:after{
|
||||
content: ' hPa';
|
||||
}
|
||||
#lux:after{
|
||||
content: ' lux';
|
||||
}
|
||||
#color-select-holder > div{
|
||||
float: left;
|
||||
}
|
||||
#color-select-holder > div:first-child{
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
#color-select-holder > div:last-child{
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
#info-popup{
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
#popup-box{
|
||||
padding: 12px;
|
||||
border: 2px solid;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
background: #161616;
|
||||
margin-top: 50px;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
}
|
||||
#popup-box h2{
|
||||
margin-top: 0;
|
||||
color: #ddd;
|
||||
}
|
||||
#popup-close-btn{
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
background: #161616;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin-left: -15px;
|
||||
margin-top: -15px;
|
||||
transition: 0.3s background, 0.3s color;
|
||||
}
|
||||
#popup-close-btn:hover{
|
||||
color: #ddd;
|
||||
}
|
||||
#info-popup.cantClose #popup-close-btn{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#selectedColor{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.slider-info{
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding: 3px;
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
background: #161616;
|
||||
border: 2px solid #c35;
|
||||
z-index: 3;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
color: #ddd;
|
||||
min-width: 50px;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
/* slider control */
|
||||
|
||||
.slidecontainer {
|
||||
width: 100%; /* Width of the outside container */
|
||||
}
|
||||
|
||||
/* The slider itself */
|
||||
.slider {
|
||||
margin-top: 9px;
|
||||
height: 10px;
|
||||
min-height: auto;
|
||||
-webkit-appearance: none; /* Override default CSS styles */
|
||||
appearance: none;
|
||||
outline: none; /* Remove outline */
|
||||
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
|
||||
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
|
||||
transition: opacity .2s;
|
||||
}
|
||||
|
||||
/* Mouse-over effects */
|
||||
.slider:hover {
|
||||
opacity: 1; /* Fully shown on mouse-over */
|
||||
}
|
||||
|
||||
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none; /* Override default look */
|
||||
appearance: none;
|
||||
width: 20px; /* Set a specific slider handle width */
|
||||
height: 20px; /* Slider handle height */
|
||||
background: #c35;
|
||||
cursor: pointer; /* Cursor on hover */
|
||||
border-radius: 50%;
|
||||
border: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
width: 20px; /* Set a specific slider handle width */
|
||||
height: 20px; /* Slider handle height */
|
||||
background: #c35;
|
||||
cursor: pointer; /* Cursor on hover */
|
||||
border-radius: 50%;
|
||||
border: 2px solid #ddd;
|
||||
}
|
||||
|
||||
/* slider control end */
|
||||
|
||||
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #c35;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #d43d5f;
|
||||
}
|
||||
@media screen and (max-width: 600px){
|
||||
.control-holder{
|
||||
width: 50%;
|
||||
}
|
||||
.form label{
|
||||
font-size: 15px;
|
||||
}
|
||||
.switcher-text{
|
||||
font-size: 14px;
|
||||
}
|
||||
.info{
|
||||
padding: 5px 0;
|
||||
}
|
||||
.info:after{
|
||||
font-size: 16px;
|
||||
}
|
||||
.info.big{
|
||||
font-size: 20px;
|
||||
}
|
||||
.info.medium{
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 360px){
|
||||
body{
|
||||
text-align: center;
|
||||
}
|
||||
.control-holder{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user