MQTT smart home web interface
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

index.html 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <meta name="color-scheme" content="dark light">
  7. <title>Lights Control</title>
  8. <!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">-->
  9. <link href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-dark.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12. <div class="container text-center">
  13. <div class="row">
  14. <div class="col">
  15. <h1>Lights Control</h1>
  16. </div>
  17. </div>
  18. <div class="row">
  19. <div class="col-2"></div>
  20. <div class="col-8">
  21. <nav>
  22. <div class="nav nav-tabs" id="nav-tab" role="tablist">
  23. <button class="nav-link" id="nav-livingroom-tab" data-bs-toggle="tab" data-bs-target="#nav-livingroom" type="button" role="tab" aria-controls="nav-livingroom" aria-selected="false">
  24. Livingroom
  25. </button>
  26. <button class="nav-link active" id="nav-bathroom-tab" data-bs-toggle="tab" data-bs-target="#nav-bathroom" type="button" role="tab" aria-controls="nav-bathroom" aria-selected="true">
  27. Bathroom
  28. </button>
  29. <button class="nav-link" id="nav-help-tab" data-bs-toggle="tab" data-bs-target="#nav-help" type="button" role="tab" aria-controls="nav-help" aria-selected="false">
  30. Help
  31. </button>
  32. </div>
  33. </nav>
  34. </div>
  35. <div class="col-2"></div>
  36. </div>
  37. <div class="row">
  38. <div class="col-2"></div>
  39. <div class="col-8">
  40. <hr>
  41. </div>
  42. <div class="col-2"></div>
  43. </div>
  44. <div class="tab-content" id="nav-tabContent">
  45. <div class="tab-pane fade show active" id="nav-bathroom" role="tabpanel" aria-labelledby="nav-bathroom-tab" tabindex="0">
  46. <div class="row">
  47. <div class="col">
  48. <h2>Actors</h2>
  49. </div>
  50. </div>
  51. <div class="row">
  52. <div class="col text-end">
  53. <p>Lights<br><small>(will return to 'Auto' after 2h)</small></p>
  54. </div>
  55. <div class="col text-start">
  56. <div class="btn-group" role="group">
  57. <input type="radio" class="btn-check" name="bathroomradio" id="bathroomlightauto" autocomplete="off">
  58. <label class="btn btn-outline-primary" for="bathroomlightauto">
  59. Auto
  60. </label>
  61. <input type="radio" class="btn-check" name="bathroomradio" id="bathroomlightbig" autocomplete="off">
  62. <label class="btn btn-outline-success" for="bathroomlightbig">
  63. Big
  64. </label>
  65. <input type="radio" class="btn-check" name="bathroomradio" id="bathroomlightsmall" autocomplete="off">
  66. <label class="btn btn-outline-info" for="bathroomlightsmall">
  67. Small
  68. </label>
  69. <input type="radio" class="btn-check" name="bathroomradio" id="bathroomlightoff" autocomplete="off">
  70. <label class="btn btn-outline-dark" for="bathroomlightoff">
  71. Off
  72. </label>
  73. </div>
  74. </div>
  75. </div>
  76. <div class="row">
  77. <div class="col-2"></div>
  78. <div class="col-8">
  79. <hr>
  80. </div>
  81. <div class="col-2"></div>
  82. </div>
  83. <div class="row">
  84. <div class="col">
  85. <h2>Sensors</h2>
  86. </div>
  87. </div>
  88. <div class="row">
  89. <div class="col text-end">
  90. <p>Temperature</p>
  91. </div>
  92. <div class="col text-start" id="bathtemp">
  93. <p>Unknown</p>
  94. </div>
  95. </div>
  96. <div class="row">
  97. <div class="col text-end">
  98. <p>Relative Humidity</p>
  99. </div>
  100. <div class="col text-start" id="bathhumid">
  101. <p>Unknown</p>
  102. </div>
  103. </div>
  104. <div class="row">
  105. <div class="col text-end">
  106. <p>tVOC</p>
  107. </div>
  108. <div class="col text-start" id="bathtvoc">
  109. <p>Unknown</p>
  110. </div>
  111. </div>
  112. <div class="row">
  113. <div class="col text-end">
  114. <p>eCO2</p>
  115. </div>
  116. <div class="col text-start" id="batheco2">
  117. <p>Unknown</p>
  118. </div>
  119. </div>
  120. <div class="row">
  121. <div class="col text-end">
  122. <p>Air Pressure</p>
  123. </div>
  124. <div class="col text-start" id="bathpress">
  125. <p>Unknown</p>
  126. </div>
  127. </div>
  128. </div>
  129. <div class="tab-pane fade" id="nav-livingroom" role="tabpanel" aria-labelledby="nav-livingroom-tab" tabindex="0">
  130. <div class="row">
  131. <div class="col">
  132. <p>No controls available yet.</p>
  133. </div>
  134. </div>
  135. <div class="row">
  136. <div class="col text-end">
  137. <p>Workspace Lights</p>
  138. </div>
  139. <div class="col text-start">
  140. <div class="btn-group" role="group">
  141. <input type="radio" class="btn-check" name="workspaceradio" id="workspaceon" autocomplete="off">
  142. <label class="btn btn-outline-primary" for="workspaceon">
  143. On
  144. </label>
  145. <input type="radio" class="btn-check" name="workspaceradio" id="workspaceoff" autocomplete="off">
  146. <label class="btn btn-outline-dark" for="workspaceoff">
  147. Off
  148. </label>
  149. </div>
  150. </div>
  151. </div>
  152. <div class="row">
  153. <div class="col text-end">
  154. <p>TV Lights</p>
  155. </div>
  156. <div class="col text-start">
  157. <div class="btn-group" role="group">
  158. <input type="radio" class="btn-check" name="tvradio" id="tvon" autocomplete="off">
  159. <label class="btn btn-outline-primary" for="tvon">
  160. On
  161. </label>
  162. <input type="radio" class="btn-check" name="tvradio" id="tvoff" autocomplete="off">
  163. <label class="btn btn-outline-dark" for="tvoff">
  164. Off
  165. </label>
  166. </div>
  167. </div>
  168. </div>
  169. <div class="row">
  170. <div class="col text-end">
  171. <p>Kitchen Lights</p>
  172. </div>
  173. <div class="col text-start">
  174. <div class="btn-group" role="group">
  175. <input type="radio" class="btn-check" name="kitchenradio" id="kitchenon" autocomplete="off">
  176. <label class="btn btn-outline-primary" for="kitchenon">
  177. On
  178. </label>
  179. <input type="radio" class="btn-check" name="kitchenradio" id="kitchenoff" autocomplete="off">
  180. <label class="btn btn-outline-dark" for="kitchenoff">
  181. Off
  182. </label>
  183. </div>
  184. </div>
  185. </div>
  186. </div>
  187. <div class="tab-pane fade" id="nav-help" role="tabpanel" aria-labelledby="nav-help-tab" tabindex="0">
  188. <div class="row">
  189. <div class="col">
  190. <p><a href=".">Refresh page</a></p>
  191. </div>
  192. </div>
  193. <div class="row">
  194. <div class="col-2"></div>
  195. <div class="col-8">
  196. <p>Please wait after opening the page until the buttons change to reflect the current state of the lights. If that doesn't happen after a couple of seconds, there is probably a connection problem.</p>
  197. </div>
  198. <div class="col-2"></div>
  199. </div>
  200. <div class="row">
  201. <div class="col-2"></div>
  202. <div class="col-8">
  203. <p><b>Please note:</b> this only works when the MQTT broker and the NodeRED logic are working properly. Also not all web browsers support web socket connections to the MQTT broker. Firefox gives problems, so try a Chromium based browser instead.</p>
  204. </div>
  205. <div class="col-2"></div>
  206. </div>
  207. </div>
  208. </div>
  209. <div class="row">
  210. <div class="col-2"></div>
  211. <div class="col-8">
  212. <hr>
  213. </div>
  214. <div class="col-2"></div>
  215. </div>
  216. <div class="row">
  217. <div class="col-2"></div>
  218. <div class="col-8">
  219. <p class="text-muted">By <a class="text-decoration-none" href="https://www.xythobuz.de">xythobuz</a>. <a class="text-decoration-none" href="https://git.xythobuz.de/thomas/lights-web">Source</a>.</p>
  220. </div>
  221. <div class="col-2"></div>
  222. </div>
  223. </div>
  224. <!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>-->
  225. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
  226. <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
  227. <script src="credentials.js"></script>
  228. <script src="lights.js"></script>
  229. <script>
  230. const btnsBath = document.querySelectorAll("#bathroomlightauto, #bathroomlightbig, #bathroomlightsmall, #bathroomlightoff")
  231. // handle changes to bathroom lights
  232. subscribeTopic("bathroom/force_light", function (msg) {
  233. // clear all buttons
  234. for (const btn of btnsBath) {
  235. btn.checked = false
  236. }
  237. // activate proper button
  238. if (msg == "none") {
  239. const btn = document.querySelector("#bathroomlightauto")
  240. btn.checked = true
  241. } else if (msg == "big") {
  242. const btn = document.querySelector("#bathroomlightbig")
  243. btn.checked = true
  244. } else if (msg == "small") {
  245. const btn = document.querySelector("#bathroomlightsmall")
  246. btn.checked = true
  247. } else if (msg == "off") {
  248. const btn = document.querySelector("#bathroomlightoff")
  249. btn.checked = true
  250. } else {
  251. console.log("unknown msg " + msg)
  252. }
  253. })
  254. // set new bathroom light state
  255. for (const btn of btnsBath) {
  256. btn.addEventListener('change', function (e) {
  257. if (this.checked) {
  258. if (this == document.querySelector("#bathroomlightauto")) {
  259. setTopic("bathroom/force_light", "none")
  260. } else if (this == document.querySelector("#bathroomlightbig")) {
  261. setTopic("bathroom/force_light", "big")
  262. } else if (this == document.querySelector("#bathroomlightsmall")) {
  263. setTopic("bathroom/force_light", "small")
  264. } else if (this == document.querySelector("#bathroomlightoff")) {
  265. setTopic("bathroom/force_light", "off")
  266. } else {
  267. console.log("unknown btn value " + this.value)
  268. }
  269. }
  270. })
  271. }
  272. // handle bathroom sensors
  273. subscribeTopic("bathroom/temperature", function (msg) {
  274. const txt = document.querySelector("#bathtemp")
  275. txt.innerHTML = "<p>" + parseInt(msg) + " °C</p>"
  276. })
  277. subscribeTopic("bathroom/humidity", function (msg) {
  278. const txt = document.querySelector("#bathhumid")
  279. txt.innerHTML = "<p>" + parseInt(msg) + " %</p>"
  280. })
  281. subscribeTopic("bathroom/pressure", function (msg) {
  282. const txt = document.querySelector("#bathpress")
  283. txt.innerHTML = "<p>" + parseInt(msg / 100.0) + " mbar</p>"
  284. })
  285. subscribeTopic("bathroom/tvoc", function (msg) {
  286. const txt = document.querySelector("#bathtvoc")
  287. txt.innerHTML = "<p>" + parseInt(msg) + " ppb</p>"
  288. })
  289. subscribeTopic("bathroom/eco2", function (msg) {
  290. const txt = document.querySelector("#batheco2")
  291. txt.innerHTML = "<p>" + parseInt(msg) + " ppm</p>"
  292. })
  293. </script>
  294. </body>
  295. </html>