MQTT smart home web interface
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

index.html 7.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  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. <nav>
  19. <div class="nav nav-tabs" id="nav-tab" role="tablist">
  20. <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">
  21. Bathroom
  22. </button>
  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. </div>
  27. </nav>
  28. <div class="row">
  29. <div class="col">
  30. <hr>
  31. </div>
  32. </div>
  33. <div class="tab-content" id="nav-tabContent">
  34. <div class="tab-pane fade show active" id="nav-bathroom" role="tabpanel" aria-labelledby="nav-bathroom-tab" tabindex="0">
  35. <div class="row">
  36. <div class="col">
  37. Lights
  38. </div>
  39. <div class="col">
  40. <div class="btn-group" role="group">
  41. <input type="radio" class="btn-check" name="btnradio" id="bathroomlightauto" autocomplete="off">
  42. <label class="btn btn-outline-primary" for="bathroomlightauto">
  43. Auto
  44. </label>
  45. <input type="radio" class="btn-check" name="btnradio" id="bathroomlightbig" autocomplete="off">
  46. <label class="btn btn-outline-success" for="bathroomlightbig">
  47. Big
  48. </label>
  49. <input type="radio" class="btn-check" name="btnradio" id="bathroomlightsmall" autocomplete="off">
  50. <label class="btn btn-outline-info" for="bathroomlightsmall">
  51. Small
  52. </label>
  53. <input type="radio" class="btn-check" name="btnradio" id="bathroomlightoff" autocomplete="off">
  54. <label class="btn btn-outline-dark" for="bathroomlightoff">
  55. Off
  56. </label>
  57. </div>
  58. </div>
  59. </div>
  60. </div>
  61. <div class="tab-pane fade" id="nav-livingroom" role="tabpanel" aria-labelledby="nav-livingroom-tab" tabindex="0">
  62. <div class="row">
  63. <div class="col">
  64. <p>No controls available yet.</p>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. <div class="row">
  70. <div class="col">
  71. <hr>
  72. </div>
  73. </div>
  74. <div class="row">
  75. <div class="col">
  76. <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>
  77. </div>
  78. </div>
  79. <div class="row">
  80. <div class="col">
  81. <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>
  82. </div>
  83. </div>
  84. </div>
  85. <!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>-->
  86. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
  87. <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
  88. <script src="lights.js"></script>
  89. <script>
  90. const btns = document.querySelectorAll("#bathroomlightauto, #bathroomlightbig, #bathroomlightsmall, #bathroomlightoff")
  91. // handle changes to bathroom lights
  92. subscribeTopic("bathroom/force_light", function (msg) {
  93. // clear all buttons
  94. for (const btn of btns) {
  95. btn.checked = false
  96. }
  97. // activate proper button
  98. if (msg == "none") {
  99. const btn = document.querySelector("#bathroomlightauto")
  100. btn.checked = true
  101. } else if (msg == "big") {
  102. const btn = document.querySelector("#bathroomlightbig")
  103. btn.checked = true
  104. } else if (msg == "small") {
  105. const btn = document.querySelector("#bathroomlightsmall")
  106. btn.checked = true
  107. } else if (msg == "off") {
  108. const btn = document.querySelector("#bathroomlightoff")
  109. btn.checked = true
  110. } else {
  111. console.log("unknown msg " + msg)
  112. }
  113. })
  114. // set new bathroom light state
  115. for (const btn of btns) {
  116. btn.addEventListener('change', function (e) {
  117. if (this.checked) {
  118. if (this == document.querySelector("#bathroomlightauto")) {
  119. setTopic("bathroom/force_light", "none")
  120. } else if (this == document.querySelector("#bathroomlightbig")) {
  121. setTopic("bathroom/force_light", "big")
  122. } else if (this == document.querySelector("#bathroomlightsmall")) {
  123. setTopic("bathroom/force_light", "small")
  124. } else if (this == document.querySelector("#bathroomlightoff")) {
  125. setTopic("bathroom/force_light", "off")
  126. } else {
  127. console.log("unknown btn value " + this.value)
  128. }
  129. }
  130. })
  131. }
  132. </script>
  133. </body>
  134. </html>