Fork of the espurna firmware for `mhsw` switches
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

845 lines
51 KiB

8 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>ESPurna 0.0.0</title>
  5. <meta charset="utf-8" />
  6. <!-- shortcut::html/favicon.ico -->
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <!-- build:css style.css -->
  9. <link rel="stylesheet" href="pure-min.css" />
  10. <link rel="stylesheet" href="side-menu.css" />
  11. <link rel="stylesheet" href="grids-responsive-min.css" />
  12. <link rel="stylesheet" href="checkboxes.css" />
  13. <link rel="stylesheet" href="custom.css" />
  14. <link rel="stylesheet" href="wheelcolorpicker.css" />
  15. <link rel="stylesheet" href="nouislider.min.css" />
  16. <!-- endbuild -->
  17. </head>
  18. <body>
  19. <div id="credentials" class="webmode">
  20. Wrong credentials
  21. </div>
  22. <div id="password" class="webmode">
  23. <div class="content">
  24. <form id="formPassword" class="pure-form" action="/" method="post">
  25. <input class="pure-u-1 pure-u-sm-3-4" type="hidden" name="webMode" value="1" />
  26. <div class="panel" style="display: block;">
  27. <div class="header">
  28. <h1>SECURITY</h1>
  29. <h2>Before using this device you have to change the default password for the user 'admin'. This password will be used for the <strong>AP mode hotspot</strong>, the <strong>web interface</strong> (where you are now) and the <strong>over-the-air updates</strong>.</h2>
  30. </div>
  31. <div class="page">
  32. <fieldset>
  33. <div class="pure-g">
  34. <label class="pure-u-1 pure-u-md-1-4" for="adminPass1">Admin password</label>
  35. <input name="adminPass1" class="pure-u-1 pure-u-md-3-4" type="password" tabindex="1" autocomplete="false" />
  36. <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
  37. <div class="pure-u-1 pure-u-md-3-4 hint">
  38. The administrator password is used to access this web interface (user 'admin'), but also to connect to the device when in AP mode or to flash a new firmware over-the-air (OTA).<br />
  39. It should have at least <strong>eight characters</strong> (letters, numbers or the underscore) and at least <strong>one number</strong>, <strong>one lowercase</strong> and <strong>one uppercase</strong> letter.</div>
  40. </div>
  41. <div class="pure-g">
  42. <label class="pure-u-1 pure-u-md-1-4" for="adminPass2">Admin password (repeat)</label>
  43. <input name="adminPass2" class="pure-u-1 pure-u-md-3-4" type="password" tabindex="2" autocomplete="false" />
  44. </div>
  45. <button class="pure-button button-update-password">Update</button>
  46. </fieldset>
  47. </div>
  48. </div>
  49. </form>
  50. </div> <!-- content -->
  51. </div>
  52. <div id="layout" class="webmode">
  53. <a href="#menu" id="menuLink" class="menu-link">
  54. <span></span>
  55. </a>
  56. <div id="menu">
  57. <div class="pure-menu">
  58. <span class="pure-menu-heading">ESPurna 0.0.0</span>
  59. <ul class="pure-menu-list">
  60. <li class="pure-menu-item">
  61. <a href="#" class="pure-menu-link" data="panel-status">STATUS</a>
  62. </li>
  63. <li class="pure-menu-item">
  64. <a href="#" class="pure-menu-link" data="panel-general">GENERAL</a>
  65. </li>
  66. <li class="pure-menu-item">
  67. <a href="#" class="pure-menu-link" data="panel-wifi">WIFI</a>
  68. </li>
  69. <li class="pure-menu-item">
  70. <a href="#" class="pure-menu-link" data="panel-mqtt">MQTT</a>
  71. </li>
  72. <li class="pure-menu-item">
  73. <a href="#" class="pure-menu-link" data="panel-ntp">NTP</a>
  74. </li>
  75. <li class="pure-menu-item module module-dcz">
  76. <a href="#" class="pure-menu-link" data="panel-domoticz">DOMOTICZ</a>
  77. </li>
  78. <li class="pure-menu-item module module-idb">
  79. <a href="#" class="pure-menu-link" data="panel-idb">INFLUXDB</a>
  80. </li>
  81. <li class="pure-menu-item module module-pow">
  82. <a href="#" class="pure-menu-link" data="panel-power">POWER</a>
  83. </li>
  84. <li class="pure-menu-item">
  85. <a href="#" class="pure-menu-link" data="panel-admin">ADMIN</a>
  86. </li>
  87. </ul>
  88. <div class="main-buttons">
  89. <button class="pure-button button-update">Update</button>
  90. <button class="pure-button button-reconnect">Reconnect</button>
  91. <button class="pure-button button-reset">Reset</button>
  92. </div>
  93. <div class="footer">
  94. &copy; 2016-2017<br />
  95. Xose Pérez<br/>
  96. <a href="http://tinkerman.cat" target="_blank">http://tinkerman.cat</a><br/>
  97. <a href="https://bitbucket.org/xoseperez/espurna" target="_blank">ESPurna @ Bitbucket</a><br/>
  98. GPLv3 license<br/>
  99. </div>
  100. </div>
  101. </div>
  102. <div class="content">
  103. <div class="panel" id="panel-status" style="display: block;">
  104. <div class="header">
  105. <h1>STATUS</h1>
  106. <h2>Current configuration</h2>
  107. </div>
  108. <div class="page">
  109. <form class="pure-form pure-form-aligned">
  110. <fieldset>
  111. <div id="relays">
  112. </div>
  113. <div id="colors">
  114. </div>
  115. <div id="channels">
  116. </div>
  117. <div class="pure-g module module-analog">
  118. <label class="pure-u-1 pure-u-sm-1-4" for="analogValue">Analog</label>
  119. <input class="pure-u-1 pure-u-sm-3-4" type="text" name="analogValue" readonly />
  120. </div>
  121. <div class="pure-g module module-ds">
  122. <label class="pure-u-1 pure-u-sm-1-4" for="dsTmp">Temperature (<span id="tmpUnit"></span>)</label>
  123. <input class="pure-u-1 pure-u-sm-3-4" type="text" name="dsTmp" readonly />
  124. </div>
  125. <div class="pure-g module module-dht">
  126. <label class="pure-u-1 pure-u-sm-1-4" for="dhtTmp">Temperature (<span id="tmpUnit"></span>)</label>
  127. <input class="pure-u-1 pure-u-sm-3-4" type="text" name="dhtTmp" readonly />
  128. </div>
  129. <div class="pure-g module module-dht">
  130. <label class="pure-u-1 pure-u-sm-1-4" for="dhtHum">Humidity (%)</label>
  131. <input class="pure-u-1 pure-u-sm-3-4" type="text" name="dhtHum" readonly />
  132. </div>
  133. <div class="pure-g module module-emon">
  134. <label class="pure-u-1 pure-u-sm-1-4" for="emonApparentPower">Apparent Power (VA)</label>
  135. <input class="pure-u-1 pure-u-sm-3-4" type="text" name="emonApparentPower" readonly />
  136. </div>
  137. <div class="pure-g module module-emon">
  138. <label class="pure-u-1 pure-u-sm-1-4" for="emonCurrent">Current (A)</label>
  139. <input class="pure-u-1 pure-u-sm-3-4" type="text" name="emonCurrent" readonly />
  140. </div>
  141. <div class="pure-g module module-pow">
  142. <label class="pure-u-1 pure-u-sm-1-4" for="powActivePower">Active Power (W)</label>
  143. <input class="pure-u-1 pure-u-sm-3-4" type="text" name="powActivePower" readonly />
  144. </div>
  145. <div class="pure-g module module-pow">
  146. <label class="pure-u-1 pure-u-sm-1-4" for="powApparentPower">Apparent Power (VA)</label>
  147. <input class="pure-u-1 pure-u-sm-3-4" type="text" name="powApparentPower" readonly />
  148. </div>
  149. <div class="pure-g module module-pow">
  150. <label class="pure-u-1 pure-u-sm-1-4" for="powReactivePower">Reactive Power (VAR)</label>
  151. <input class="pure-u-1 pure-u-sm-3-4" type="text" name="powReactivePower" readonly />
  152. </div>
  153. <div class="pure-g module module-pow">
  154. <label class="pure-u-1 pure-u-sm-1-4" for="powCurrent">Current (A)</label>
  155. <input class="pure-u-1 pure-u-sm-3-4" type="text" name="powCurrent" readonly />
  156. </div>
  157. <div class="pure-g module module-pow">
  158. <label class="pure-u-1 pure-u-sm-1-4" for="powVoltage">Voltage (V)</label>
  159. <input class="pure-u-1 pure-u-sm-3-4" type="text" name="powVoltage" readonly />
  160. </div>
  161. <div class="pure-g module module-pow">
  162. <label class="pure-u-1 pure-u-sm-1-4" for="powPowerFactor">Power Factor</label>
  163. <input class="pure-u-1 pure-u-sm-3-4" type="text" name="powPowerFactor" readonly />
  164. </div>
  165. <div class="pure-u-1 state">
  166. <div class="pure-u-1 pure-u-sm-11-24">Manufacturer</div>
  167. <div class="pure-u-1 pure-u-sm-11-24"><span class="right" name="manufacturer"></span></div>
  168. <div class="pure-u-1 pure-u-sm-11-24">Device</div>
  169. <div class="pure-u-1 pure-u-sm-11-24"><span class="right" name="device"></span></div>
  170. <div class="pure-u-1 pure-u-sm-11-24">Chip ID</div>
  171. <div class="pure-u-1 pure-u-sm-11-24"><span class="right" name="chipid"></span></div>
  172. <div class="pure-u-1 pure-u-sm-11-24">MAC</div>
  173. <div class="pure-u-1 pure-u-sm-11-24"><span class="right" name="mac"></span></div>
  174. <div class="pure-u-1 pure-u-sm-11-24">Network</div>
  175. <div class="pure-u-1 pure-u-sm-11-24"><span class="right" name="network"></span></div>
  176. <div class="pure-u-1 pure-u-sm-11-24">IP</div>
  177. <div class="pure-u-1 pure-u-sm-11-24"><span class="right" name="deviceip"></span></div>
  178. <div class="pure-u-1 pure-u-sm-11-24">ESPurna Version</div>
  179. <div class="pure-u-1 pure-u-sm-11-24"><span class="right" name="version"></span></div>
  180. <div class="pure-u-1 pure-u-sm-11-24">ESPurna Build</div>
  181. <div class="pure-u-1 pure-u-sm-11-24"><span class="right" name="buildDate"></span> <span class="right" name="buildTime"></span></div>
  182. <div class="pure-u-1 pure-u-sm-11-24">MQTT Status</div>
  183. <div class="pure-u-1 pure-u-sm-11-24"><span class="right" name="mqttStatus"></span></div>
  184. <div class="pure-u-1 pure-u-sm-11-24">NTP Status</div>
  185. <div class="pure-u-1 pure-u-sm-11-24"><span class="right" name="ntpStatus"></span></div>
  186. </div>
  187. </fieldset>
  188. </form>
  189. </div>
  190. </div>
  191. <form id="formSave" class="pure-form" action="/" method="post" enctype="multipart/form-data">
  192. <input class="pure-u-1 pure-u-sm-3-4" type="hidden" name="webMode" value="0" />
  193. <div class="panel" id="panel-general">
  194. <div class="header">
  195. <h1>GENERAL</h1>
  196. <h2>General configuration values</h2>
  197. </div>
  198. <div class="page">
  199. <fieldset>
  200. <div class="pure-g">
  201. <label class="pure-u-1 pure-u-md-1-4" for="hostname">Hostname</label>
  202. <input name="hostname" class="pure-u-1 pure-u-md-3-4" type="text" tabindex="1" />
  203. <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
  204. <div class="pure-u-1 pure-u-md-3-4 hint">This name will identify this device in your network (http://&lt;hostname&gt;.local). For this setting to take effect you should restart the wifi interface clicking the "Reconnect" button.</div>
  205. </div>
  206. <div class="pure-g">
  207. <label class="pure-u-1 pure-u-md-1-4" for="relayMode">Switch boot mode</label>
  208. <div class="pure-u-1 pure-u-md-3-4">
  209. <select name="relayMode" class="pure-u-3-4" tabindex="2">
  210. <option value="0">Always OFF</a>
  211. <option value="1">Always ON</a>
  212. <option value="2">Same as before</a>
  213. <option value="3">Toogle before</a>
  214. </select>
  215. </div>
  216. <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
  217. <div class="pure-u-1 pure-u-md-3-4 hint">Here you can define what will be the status of the switch after a reboot.</div>
  218. </div>
  219. <div class="pure-g module module-multirelay">
  220. <label class="pure-u-1 pure-u-md-1-4" for="relaySync">Switch sync mode</label>
  221. <div class="pure-u-1 pure-u-md-3-4">
  222. <select name="relaySync" class="pure-u-3-4" tabindex="3">
  223. <option value="0">No synchonisation</a>
  224. <option value="1">Zero or one switches active</a>
  225. <option value="2">One and just one switch active</a>
  226. <option value="3">All synchonised</a>
  227. </select>
  228. </div>
  229. <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
  230. <div class="pure-u-1 pure-u-md-3-4 hint">Define how the different switches should be synchronized.</div>
  231. </div>
  232. <div class="pure-g">
  233. <label class="pure-u-1 pure-u-md-1-4" for="relayPulseMode">Switch pulse mode</label>
  234. <div class="pure-u-1 pure-u-md-3-4">
  235. <select name="relayPulseMode" class="pure-u-3-4" tabindex="4">
  236. <option value="0">Don't pulse</a>
  237. <option value="1">Normally OFF (stays on for a short time)</a>
  238. <option value="2">Normally ON (stays off for a short time)</a>
  239. </select>
  240. </div>
  241. <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
  242. <div class="pure-u-1 pure-u-md-3-4 hint">When pulse mode is enabled the switch will automatically switch back to its normal state after the pulse time (below).</div>
  243. </div>
  244. <div class="pure-g">
  245. <label class="pure-u-1 pure-u-md-1-4" for="relayPulseTime">Switch pulse time</label>
  246. <input name="relayPulseTime" class="pure-u-1 pure-u-md-3-4" type="number" min="0" step="0.1" max="60" tabindex="5" />
  247. <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
  248. <div class="pure-u-1 pure-u-md-3-4 hint">Pulse time in seconds (maximum value is 60s, accepts decimals).</div>
  249. </div>
  250. <div class="pure-g">
  251. <label class="pure-u-1 pure-u-md-1-4" for="btnDelay">Double click delay</label>
  252. <input name="btnDelay" class="pure-u-1 pure-u-md-3-4" type="number" min="0" step="100" max="1000" tabindex="6" />
  253. <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
  254. <div class="pure-u-1 pure-u-md-3-4 hint">Delay in milliseconds to detect a double click (from 0 to 1000ms).<br />
  255. The lower this number the faster the device will respond to button clicks but the harder it will be to get a double click.
  256. Increase this number if you are having trouble to double click the button.
  257. Set this value to 0 to disable double click. You won't be able to set the device in AP mode manually but your device will respond immediately to button clicks.<br />
  258. You will have to <strong>reset the device</strong> after updating for this setting to apply.
  259. </div>
  260. </div>
  261. <div class="pure-g module module-color">
  262. <div class="pure-u-1 pure-u-sm-1-4"><label for="useColor">Use colorpicker</label></div>
  263. <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="useColor" tabindex="8" /></div>
  264. <div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>
  265. <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
  266. <div class="pure-u-1 pure-u-md-3-4 hint">Use color picker for the first 3 channels as RGB.<br />Will only work if the device has at least 3 dimmable channels.</div>
  267. </div>
  268. <div class="pure-g module module-color">
  269. <div class="pure-u-1 pure-u-sm-1-4"><label for="useWhite">Use white channel</label></div>
  270. <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="useWhite" tabindex="9" /></div>
  271. <div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>
  272. <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
  273. <div class="pure-u-1 pure-u-md-3-4 hint">Use forth dimmable channel as white when first 3 have the same RGB value.<br />Will only work if the device has at least 4 dimmable channels.</div>
  274. </div>
  275. <div class="pure-g module module-color">
  276. <div class="pure-u-1 pure-u-sm-1-4"><label for="useGamma">Use gamma correction</label></div>
  277. <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="useGamma" tabindex="10" /></div>
  278. <div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>
  279. <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
  280. <div class="pure-u-1 pure-u-md-3-4 hint">Use gamma correction for RGB channels.<br />Will only work if "use colorpicker" above is also ON.</div>
  281. </div>
  282. <div class="pure-g module module-fauxmo">
  283. <div class="pure-u-1 pure-u-sm-1-4"><label for="fauxmoEnabled">Alexa integration</label></div>
  284. <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="fauxmoEnabled" tabindex="11" /></div>
  285. </div>
  286. <div class="pure-g module module-ds module-dht">
  287. <label class="pure-u-1 pure-u-sm-1-4" for="tmpUnits">Temperature units</label>
  288. <div class="pure-u-1 pure-u-sm-1-4"><input type="radio" name="tmpUnits" tabindex="12" value="0"> Celsius (ºC)</input></div>
  289. <div class="pure-u-1 pure-u-sm-1-4"><input type="radio" name="tmpUnits" tabindex="13" value="1"> Fahrenheit (ºF)</input></div>
  290. </div>
  291. <div class="pure-g">
  292. <label class="pure-u-1 pure-u-sm-1-4">Settings</label>
  293. <div class="pure-u-1 pure-u-sm-1-8"><button class="pure-button button-settings-backup pure-u-23-24">Backup</button></div>
  294. <div class="pure-u-1 pure-u-sm-1-8"><button class="pure-button button-settings-restore pure-u-23-24">Restore</button></div>
  295. </div>
  296. </fieldset>
  297. </div>
  298. </div>
  299. <div class="panel" id="panel-admin">
  300. <div class="header">
  301. <h1>ADMINISTRATION</h1>
  302. <h2>Device administration and security settings</h2>
  303. </div>
  304. <div class="page">
  305. <fieldset>
  306. <div class="pure-g">
  307. <label class="pure-u-1 pure-u-md-1-4" for="adminPass1">Admin password</label>
  308. <input name="adminPass1" class="pure-u-1 pure-u-md-3-4" type="password" tabindex="11" autocomplete="false" />
  309. <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
  310. <div class="pure-u-1 pure-u-md-3-4 hint">
  311. The administrator password is used to access this web interface (user 'admin'), but also to connect to the device when in AP mode or to flash a new firmware over-the-air (OTA).<br />
  312. It should have at least <strong>eight characters</strong> (letters, numbers or the underscore) and at least <strong>one number</strong>, <strong>one lowercase</strong> and <strong>one uppercase</strong> letter.</div>
  313. </div>
  314. <div class="pure-g">
  315. <label class="pure-u-1 pure-u-md-1-4" for="adminPass2">Admin password (repeat)</label>
  316. <input name="adminPass2" class="pure-u-1 pure-u-md-3-4" type="password" tabindex="12" autocomplete="false" />
  317. </div>
  318. <div class="pure-g">
  319. <label class="pure-u-1 pure-u-md-1-4" for="webPort">HTTP port</label>
  320. <input name="webPort" class="pure-u-1 pure-u-md-3-4" type="text" tabindex="13" />
  321. <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
  322. <div class="pure-u-1 pure-u-md-3-4 hint">
  323. This is the port for the web interface and API requests.<br />
  324. If different than 80 (standard HTTP port) you will have to add it explicitly to your requests: http://myip:myport/
  325. </div>
  326. </div>
  327. <div class="pure-g">
  328. <div class="pure-u-1 pure-u-sm-1-4"><label for="apiEnabled">Enable HTTP API</label></div>
  329. <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="apiEnabled" /></div>
  330. </div>
  331. <div class="pure-g">
  332. <label class="pure-u-1 pure-u-md-1-4" for="apiKey">HTTP API Key</label>
  333. <input name="apiKey" class="pure-u-3-4 pure-u-md-1-2" type="text" tabindex="14" />
  334. <div class=" pure-u-1-4 pure-u-md-1-4"><button class="pure-button button-apikey pure-u-23-24">Generate</button></div>
  335. <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
  336. <div class="pure-u-1 pure-u-md-3-4 hint">
  337. This is the key you will have to pass with every HTTP request to the API, either to get or write values.<br />
  338. All API calls must contain the <strong>apikey</strong> parameter with the value above.<br />
  339. To know what APIs are enabled do a call to <strong>/apis</strong>.
  340. </div>
  341. </div>
  342. <div class="pure-g">
  343. <label class="pure-u-1 pure-u-md-1-4">Upgrade</label>
  344. <input class="pure-u-1-2 pure-u-md-1-2" name="filename" type="text" readonly />
  345. <div class=" pure-u-1-8 pure-u-md-1-8"><button class="pure-button button-upgrade-browse pure-u-23-24">Browse</button></div>
  346. <div class=" pure-u-1-8 pure-u-md-1-8"><button class="pure-button button-upgrade pure-u-23-24">Upgrade</button></div>
  347. <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
  348. <div class="pure-u-1 pure-u-md-3-4"><progress id="upgrade-progress"></progress></div>
  349. <input name="upgrade" type="file" tabindex="15" />
  350. </div>
  351. </fieldset>
  352. </div>
  353. </div>
  354. <div class="panel" id="panel-wifi">
  355. <div class="header">
  356. <h1>WIFI</h1>
  357. <h2>You can configure up to 5 different WiFi networks. The device will try to connect in order of signal strength.</h2>
  358. </div>
  359. <div class="page">
  360. <fieldset>
  361. <div id="networks">
  362. </div>
  363. <button type="button" class="pure-button button-add-network">Add network</button>
  364. </fieldset>
  365. </div>
  366. </div>
  367. <div class="panel" id="panel-mqtt">
  368. <div class="header">
  369. <h1>MQTT</h1>
  370. <h2>Configure an <strong>MQTT broker</strong> in your network and you will be able to change the switch status via an MQTT message. Leave the server field empty to disable MQTT.</h2>
  371. </div>
  372. <div class="page">
  373. <fieldset>
  374. <div class="pure-g">
  375. <label class="pure-u-1 pure-u-md-1-4" for="mqttServer">MQTT Server</label>
  376. <input class="pure-u-1 pure-u-md-3-4" name="mqttServer" type="text" size="20" tabindex="21" placeholder="IP or address of your broker" />
  377. </div>
  378. <div class="pure-g">
  379. <label class="pure-u-1 pure-u-md-1-4" for="mqttPort">MQTT Port</label>
  380. <input class="pure-u-1 pure-u-md-3-4" name="mqttPort" type="text" size="6" tabindex="22" value="1883" />
  381. </div>
  382. <div class="pure-g">
  383. <label class="pure-u-1 pure-u-md-1-4" for="mqttUser">MQTT User</label>
  384. <input class="pure-u-1 pure-u-md-3-4" name="mqttUser" type="text" size="20" tabindex="23" placeholder="Leave blank if no user/pass" autocomplete="false" />
  385. </div>
  386. <div class="pure-g">
  387. <label class="pure-u-1 pure-u-md-1-4" for="mqttPassword">MQTT Password</label>
  388. <input class="pure-u-1 pure-u-md-3-4" name="mqttPassword" type="password" size="20" tabindex="24" placeholder="Leave blank if no user/pass" autocomplete="false" />
  389. </div>
  390. <div class="pure-g">
  391. <label class="pure-u-1 pure-u-md-1-4" for="mqttTopic">MQTT Root Topic</label>
  392. <input class="pure-u-1 pure-u-md-3-4" name="mqttTopic" type="text" size="20" tabindex="25" />
  393. <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
  394. <div class="pure-u-1 pure-u-md-3-4 hint">
  395. This is the root topic for this device. A trailing slash will be added if not preset. The {identifier} placeholder will be replaces by the device hostname.<br />
  396. - <strong>&lt;root&gt;/relay/#</strong> Send a 0 or a 1 as a payload to this topic to switch it on or off. You can also send a 2 to toggle its current state. Replace # with the switch ID (starting from 0). If the board has only one switch it will be 0.<br />
  397. <span class="module module-color">- <strong>&lt;root&gt;/color</strong> The device will report the current color in #RRGGBB format to this topic. You can also set the color using this same topic.<br /></span>
  398. - <strong>&lt;root&gt;/led/#</strong> Send a 0 or a 1 as a payload to this topic to set the onboard LED to the given state, send a 3 to turn it back to WIFI indicator. Replace # with the LED ID (starting from 0). If the board has only one LED it will be 0.<br />
  399. - <strong>&lt;root&gt;/button/#</strong> For each button in the board subscribe to this topic to know when it is pressed (payload 1) or released (payload 0).<br />
  400. - <strong>&lt;root&gt;/status</strong> The device will report a 1 to this topic every few minutes. Upon MQTT disconnecting this will be set to 0.<br />
  401. - Other values reported (depending on the build) are: <strong>firmware</strong> and <strong>version</strong>, <strong>hostname</strong>, <strong>IP</strong>, <strong>MAC</strong>, signal strenth (<strong>RSSI</strong>), <strong>uptime</strong> (in seconds), <strong>free heap</strong> and <strong>power supply</strong>.
  402. </div>
  403. </div>
  404. <div class="pure-g module module-fauxmo">
  405. <div class="pure-u-1 pure-u-sm-1-4"><label for="mqttUseJson">Use JSON payload</label></div>
  406. <div class="pure-u-1 pure-u-sm-3-4"><input type="checkbox" name="mqttUseJson" tabindex="26" /></div>
  407. <div class="pure-u-1 pure-u-md-1-4">&nbsp;</div>
  408. <div class="pure-u-1 pure-u-md-3-4 hint">
  409. All messages (except the device status) will be included in a JSON payload along with the timestamp and hostname
  410. and sent under the <strong>&lt;root&gt;/data</strong> topic.<br />
  411. Messages will be queued and sent after 100ms, so different messages could be merged into a single payload.<br />
  412. Subscribtions will still be done to single topics.
  413. </div>
  414. </div>
  415. </fieldset>
  416. </div>
  417. </div>
  418. <div class="panel" id="panel-ntp">
  419. <div class="header">
  420. <h1>NTP</h1>
  421. <h2>Configure your NTP (Network Time Protocol) servers and local configuration to keep your device time up to the second for your location.</h2>
  422. </div>
  423. <div class="page">
  424. <fieldset>
  425. <div class="pure-g">
  426. <label class="pure-u-1 pure-u-md-1-4" for="ntpServer1">NTP Server 1</label>
  427. <input class="pure-u-1 pure-u-md-3-4" name="ntpServer1" type="text" size="20" tabindex="41" />
  428. </div>
  429. <div class="pure-g">
  430. <label class="pure-u-1 pure-u-md-1-4" for="ntpServer2">NTP Server 2</label>
  431. <input class="pure-u-1 pure-u-md-3-4" name="ntpServer2" type="text" size="20" tabindex="42" />
  432. </div>
  433. <div class="pure-g">
  434. <label class="pure-u-1 pure-u-md-1-4" for="ntpServer3">NTP Server 3</label>
  435. <input class="pure-u-1 pure-u-md-3-4" name="ntpServer3" type="text" size="20" tabindex="43" />
  436. </div>
  437. <div class="pure-g">
  438. <label class="pure-u-1 pure-u-sm-1-4" for="ntpOffset">Time offset</label>
  439. <div class="pure-u-1 pure-u-sm-1-8"><input class="pure-u-sm-23-24" name="ntpOffset" type="number" min="-11" max="14" tabindex="44" data="0" /></div>
  440. <div class="pure-u-1 pure-u-sm-5-8 hint center">Set to 0 for UTC time</div>
  441. </div>
  442. <div class="pure-g">
  443. <div class="pure-u-1 pure-u-sm-1-4"><label for="ntpDST">Enable Daylight Saving Time</label></div>
  444. <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="ntpDST" /></div>
  445. </div>
  446. </fieldset>
  447. </div>
  448. </div>
  449. <div class="panel" id="panel-domoticz">
  450. <div class="header">
  451. <h1>DOMOTICZ</h1>
  452. <h2>
  453. Configure the connection to your Domoticz server.
  454. </h2>
  455. </div>
  456. <div class="page">
  457. <fieldset>
  458. <div class="pure-g">
  459. <label class="pure-u-1 pure-u-md-1-4" for="dczTopicIn">Domoticz IN Topic</label>
  460. <input class="pure-u-1 pure-u-md-3-4" name="dczTopicIn" type="text" tabindex="31" />
  461. </div>
  462. <div class="pure-g">
  463. <label class="pure-u-1 pure-u-md-1-4" for="dczTopicOut">Domoticz OUT Topic</label>
  464. <input class="pure-u-1 pure-u-md-3-4" name="dczTopicOut" type="text" tabindex="32" />
  465. </div>
  466. <div class="pure-g module module-dht module-ds">
  467. <label class="pure-u-1 pure-u-sm-1-4" for="dczTmpIdx">Temperature IDX</label>
  468. <div class="pure-u-1 pure-u-sm-1-8"><input class="pure-u-sm-23-24" name="dczTmpIdx" type="number" min="0" tabindex="33" data="0" /></div>
  469. <div class="pure-u-1 pure-u-sm-5-8 hint center">Set to 0 to disable notifications.</div>
  470. </div>
  471. <div class="pure-g module module-dht">
  472. <label class="pure-u-1 pure-u-sm-1-4" for="dczHumIdx">Humidity IDX</label>
  473. <div class="pure-u-1 pure-u-sm-1-8"><input class="pure-u-sm-23-24" name="dczHumIdx" type="number" min="0" tabindex="34" data="0" /></div>
  474. <div class="pure-u-1 pure-u-sm-5-8 hint center">Set to 0 to disable notifications.</div>
  475. </div>
  476. <div class="pure-g module module-pow module-emon">
  477. <label class="pure-u-1 pure-u-sm-1-4" for="dczPowIdx">Power IDX</label>
  478. <div class="pure-u-1 pure-u-sm-1-8"><input class="pure-u-sm-23-24" name="dczPowIdx" type="number" min="0" tabindex="35" data="0" /></div>
  479. <div class="pure-u-1 pure-u-sm-5-8 hint center">Set to 0 to disable notifications.</div>
  480. </div>
  481. <div class="pure-g module module-pow module-emon">
  482. <label class="pure-u-1 pure-u-sm-1-4" for="dczEnergyIdx">Energy increment IDX</label>
  483. <div class="pure-u-1 pure-u-sm-1-8"><input class="pure-u-sm-23-24" name="dczEnergyIdx" type="number" min="0" tabindex="36" data="0" /></div>
  484. <div class="pure-u-1 pure-u-sm-5-8 hint center">Set to 0 to disable notifications.</div>
  485. </div>
  486. <div class="pure-g module module-pow">
  487. <label class="pure-u-1 pure-u-sm-1-4" for="dczVoltIdx">Voltage IDX</label>
  488. <div class="pure-u-1 pure-u-sm-1-8"><input class="pure-u-sm-23-24" name="dczVoltIdx" type="number" min="0" tabindex="37" data="0" /></div>
  489. <div class="pure-u-1 pure-u-sm-5-8 hint center">Set to 0 to disable notifications.</div>
  490. </div>
  491. <div class="pure-g module module-pow module-emon">
  492. <label class="pure-u-1 pure-u-sm-1-4" for="dczCurrentIdx">Current IDX</label>
  493. <div class="pure-u-1 pure-u-sm-1-8"><input class="pure-u-sm-23-24" name="dczCurrentIdx" type="number" min="0" tabindex="38" data="0" /></div>
  494. <div class="pure-u-1 pure-u-sm-5-8 hint center">Set to 0 to disable notifications.</div>
  495. </div>
  496. <div class="pure-g module module-analog">
  497. <label class="pure-u-1 pure-u-sm-1-4" for="dczAnaIdx">Analog IDX</label>
  498. <div class="pure-u-1 pure-u-sm-1-8"><input class="pure-u-sm-23-24" name="dczAnaIdx" type="number" min="0" tabindex="39" data="0" /></div>
  499. <div class="pure-u-1 pure-u-sm-5-8 hint center">Set to 0 to disable notifications.</div>
  500. </div>
  501. <div id="idxs">
  502. </div>
  503. </fieldset>
  504. </div>
  505. </div>
  506. <div class="panel" id="panel-idb">
  507. <div class="header">
  508. <h1>INFLUXDB</h1>
  509. <h2>
  510. Configure the connection to your InfluxDB server. Leave the host field empty to disable InfluxDB connection.
  511. </h2>
  512. </div>
  513. <div class="page">
  514. <fieldset>
  515. <div class="pure-g">
  516. <label class="pure-u-1 pure-u-md-1-4" for="idbHost">Host</label>
  517. <input class="pure-u-1 pure-u-md-3-4" name="idbHost" type="text" tabindex="41" />
  518. </div>
  519. <div class="pure-g">
  520. <label class="pure-u-1 pure-u-md-1-4" for="idbPort">Port</label>
  521. <input class="pure-u-1 pure-u-md-3-4" name="idbPort" type="text" tabindex="42" />
  522. </div>
  523. <div class="pure-g">
  524. <label class="pure-u-1 pure-u-md-1-4" for="idbDatabase">Database</label>
  525. <input class="pure-u-1 pure-u-md-3-4" name="idbDatabase" type="text" tabindex="43" />
  526. </div>
  527. <div class="pure-g">
  528. <label class="pure-u-1 pure-u-md-1-4" for="idbUsername">Username</label>
  529. <input class="pure-u-1 pure-u-md-3-4" name="idbUsername" type="text" tabindex="44" autocomplete="false" />
  530. </div>
  531. <div class="pure-g">
  532. <label class="pure-u-1 pure-u-md-1-4" for="idbPassword">Password</label>
  533. <input class="pure-u-1 pure-u-md-3-4" name="idbPassword" type="password" tabindex="45" autocomplete="false" />
  534. </div>
  535. </fieldset>
  536. </div>
  537. </div>
  538. <div class="panel" id="panel-power">
  539. <div class="header">
  540. <h1>POWER</h1>
  541. <h2>
  542. Calibrate your power monitor device. Use a pure resistive load and introduce the expected values for active power, current and voltage. Use the nominal values or a multimeter to get the proper numbers. Set any field to 0 to leave the calibration value untouched.
  543. </h2>
  544. </div>
  545. <div class="page">
  546. <fieldset>
  547. <div class="pure-g">
  548. <label class="pure-u-1 pure-u-md-1-4" for="powExpectedPower">AC RMS Active Power</label>
  549. <input class="pure-u-1 pure-u-md-3-4 powExpected" name="powExpectedPower" type="text" size="8" tabindex="51" placeholder="0" />
  550. <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
  551. <div class="pure-u-1 pure-u-md-3-4 hint">In Watts (W). If you are using a pure resistive load like a bulb this will be writen on it, otherwise use a socket multimeter to get this value.</div>
  552. </div>
  553. <div class="pure-g">
  554. <label class="pure-u-1 pure-u-md-1-4" for="powExpectedVoltage">AC RMS Voltage</label>
  555. <input class="pure-u-1 pure-u-md-3-4 powExpected" name="powExpectedVoltage" type="text" size="8" tabindex="52" placeholder="0" />
  556. <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
  557. <div class="pure-u-1 pure-u-md-3-4 hint">In Volts (V). Enter your the nominal AC voltage for your household or facility, or use multimeter to get this value.</div>
  558. </div>
  559. <div class="pure-g">
  560. <label class="pure-u-1 pure-u-md-1-4" for="powExpectedCurrent">AC RMS Current</label>
  561. <input class="pure-u-1 pure-u-md-3-4 powExpected" name="powExpectedCurrent" type="text" size="8" tabindex="55" placeholder="0" />
  562. <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
  563. <div class="pure-u-1 pure-u-md-3-4 hint">In Ampers (A). If you are using a pure resistive load like a bulb this will the ratio between the two previous values, i.e. power / voltage. You can also use a current clamp around one fo the power wires to get this value.</div>
  564. </div>
  565. <div class="pure-g">
  566. <div class="pure-u-1 pure-u-sm-1-4"><label for="powExpectedReset">Reset calibration</label></div>
  567. <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="powExpectedReset" /></div>
  568. <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
  569. <div class="pure-u-1 pure-u-md-3-4 hint">Move this switch to ON and press "Update" to revert to factory values.</div>
  570. </div>
  571. </fieldset>
  572. </div>
  573. </div>
  574. </form>
  575. </div> <!-- content -->
  576. </div> <!-- layout -->
  577. <!-- Templates -->
  578. <div id="networkTemplate" class="template">
  579. <div class="pure-g">
  580. <label class="pure-u-md-1-6 pure-u-1-4" for="ssid">Network SSID</label>
  581. <div class="pure-u-md-3-4 pure-u-5-8"><input name="ssid" type="text" class="pure-u-23-24" value="" size="8" tabindex="0" placeholder="Network SSID" required autocomplete="false" /></div>
  582. <div class="pure-u-md-1-12 pure-u-1-8"><button type="button" class="pure-button button-more-network pure-u-1">...</button></div>
  583. <div class="more">
  584. <div class="break"></div>
  585. <label class="pure-u-md-1-6 pure-u-1-4" for="pass">Password</label>
  586. <input class="pure-u-md-5-6 pure-u-3-4" name="pass" type="password" value="" tabindex="0" autocomplete="false" />
  587. <div class="break"></div>
  588. <label class="pure-u-md-1-6 pure-u-1-4" for="ip">Static IP</label>
  589. <input class="pure-u-md-5-6 pure-u-3-4" name="ip" type="text" value="" size="15" tabindex="0" autocomplete="false" />
  590. <div class="pure-u-md-1-6 pure-u-1-4"></div>
  591. <div class="pure-u-md-5-6 pure-u-3-4 hint">Leave empty for DNS negotiation</div>
  592. <label class="pure-u-md-1-6 pure-u-1-4" for="gw">Gateway IP</label>
  593. <input class="pure-u-md-5-6 pure-u-3-4" name="gw" type="text" value="" size="15" tabindex="0" autocomplete="false" />
  594. <div class="pure-u-md-1-6 pure-u-1-4"></div>
  595. <div class="pure-u-md-5-6 pure-u-3-4 hint">Set when using a static IP</div>
  596. <label class="pure-u-md-1-6 pure-u-1-4" for="mask">Network Mask</label>
  597. <input class="pure-u-md-5-6 pure-u-3-4" name="mask" type="text" value="255.255.255.0" size="15" tabindex="0" autocomplete="false" />
  598. <div class="pure-u-md-1-6 pure-u-1-4"></div>
  599. <div class="pure-u-md-5-6 pure-u-3-4 hint">Usually 255.255.255.0 for /24 networks</div>
  600. <label class="pure-u-md-1-6 pure-u-1-4" for="dns">DNS IP</label>
  601. <input class="pure-u-md-5-6 pure-u-3-4" name="dns" type="text" value="8.8.8.8" size="15" tabindex="0" autocomplete="false" />
  602. <div class="pure-u-md-1-6 pure-u-1-4"></div>
  603. <div class="pure-u-md-5-6 pure-u-3-4 hint">Set the Domain Name Server IP to use when using a static IP</div>
  604. <div class="pure-u-md-1-6 pure-u-1-4"></div>
  605. <div class="pure-u-md-1-6 pure-u-1-4"><button type="button" class="pure-button button-del-network pure-u-5-6 pure-u-md-5-6">Del</button></div>
  606. </div>
  607. </div>
  608. </div>
  609. <div id="relayTemplate" class="template">
  610. <div class="pure-g">
  611. <div class="pure-u-1 pure-u-sm-1-4"><label>Switch<span class="relay_id"></span> Status</label></div>
  612. <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" class="relayStatus pure-u-1 pure-u-sm-1-4" data="0" /></div
  613. </div>
  614. </div>
  615. <div id="idxTemplate" class="template">
  616. <div class="pure-g">
  617. <label class="pure-u-1 pure-u-sm-1-4" for="dczRelayIdx">Switch<span class="id"></span> IDX</label>
  618. <div class="pure-u-1 pure-u-sm-1-8"><input class="pure-u-sm-23-24 dczRelayIdx" name="dczRelayIdx" type="number" min="0" tabindex="0" data="0" /></div>
  619. <div class="pure-u-1 pure-u-sm-5-8 hint center">Set to 0 to disable notifications.</div>
  620. </div>
  621. </div>
  622. <div id="colorTemplate" class="template">
  623. <div class="pure-g">
  624. <label class="pure-u-1 pure-u-sm-1-4">Color</label>
  625. <input class="pure-u-1 pure-u-sm-1-4" data-wcp-layout="block" name="color" readonly />
  626. </div>
  627. <div class="pure-g">
  628. <label class="pure-u-1 pure-u-sm-1-4">Brightness</label>
  629. <div class="slider pure-u-1 pure-u-sm-1-4" id="brightness"></div>
  630. </div>
  631. </div>
  632. <div id="channelTemplate" class="template">
  633. <div class="pure-g">
  634. <label class="pure-u-1 pure-u-sm-1-4">Channel #</label>
  635. <div class="slider channels pure-u-1 pure-u-sm-1-4" data="99"></div>
  636. </div>
  637. </div>
  638. <iframe id="downloader" style="display:none;"></iframe>
  639. <input id="uploader" type="file" style="display:none;" />
  640. </body>
  641. <!-- build:js script.js -->
  642. <script src="jquery-1.12.3.min.js"></script>
  643. <script src="checkboxes.js"></script>
  644. <script src="custom.js"></script>
  645. <script src="jquery.wheelcolorpicker-3.0.2.min.js"></script>
  646. <script src="nouislider.min.js"></script>
  647. <!-- endbuild -->
  648. </html>