Spaces:
Sleeping
Sleeping
| <!-- | |
| Dimension by HTML5 UP | |
| html5up.net | @ajlkn | |
| Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) | |
| --> | |
| <html> | |
| <head> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> | |
| <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script> | |
| <title>Server Autom</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}"> | |
| <noscript><link rel="stylesheet" href="{{ url_for('static', filename='css/noscript.css') }}" /></noscript> | |
| <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js" ></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" ></script> | |
| </head> | |
| <body class="is-preload"> | |
| <!-- Wrapper --> | |
| <div id="wrapper"> | |
| <!-- Header --> | |
| <header id="header"> | |
| <div class="logo"> | |
| <span class="icon fa-gem"></span> | |
| </div> | |
| <div class="content"> | |
| <div class="inner"> | |
| <h1>Domovní Informační Systém</h1> | |
| </div> | |
| </div> | |
| <nav> | |
| <ul> | |
| <li><a href="#elektrina">Elektřina</a></li> | |
| <li><a href="#ovl">Ovládání</a></li> | |
| <li><a href="#kamery">Kamery</a></li> | |
| <li><a href="#prehled">Zařízení</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <!-- Main --> | |
| <div id="main"> | |
| <!-- Elektroměr --> | |
| <article id="elektrina"> | |
| <h2 class="major">Elektřina</h2> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| fetchAndPlotGraph('graph_1', 'e1', 'fullscreen-toggle' ); | |
| fetchAndPlotGraph('graph_2', 'e2', 'fullscreen-toggle-2'); | |
| fetchAndPlotGraph('graph_3', 'e3', 'fullscreen-toggle-3'); | |
| }); | |
| </script> | |
| <button id="fullscreen-toggle">Graf spotřeby ve spodním bytě</button> | |
| <div id="graph_1" class="graphs"></div> | |
| <button id="fullscreen-toggle-2">Graf spotřeby v horním bytě</button> | |
| <div id="graph_2" class="graphs"></div> | |
| <button id="fullscreen-toggle-3">Graf spotřeby Čerpadla</button> | |
| <div id="graph_3" class="graphs"></div> | |
| </article> | |
| <!-- Ovladani --> | |
| <article id="ovl"> | |
| <h2 class="major">Světla</h2> | |
| <div class="container"> | |
| <div class="row"> | |
| <h3 class="card-title">Kůlna</h3> | |
| <!-- Light 1 --> | |
| <div class="col-sm-4"> | |
| <div class="card"> | |
| <div class="card-body"> | |
| <div class="light-switch"> | |
| <input type="checkbox" class="btn-check light-toggle" id="light1-toggle" data-light="0" onchange="toggleBrightness(this)"> | |
| <label class="btn btn-outline-success" for="light1-toggle">kůlna lustr</label><br> | |
| <input type="range" min="0" max="254" class="slider light-slider" id="light1-slider" data-light="0"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Light 2 --> | |
| <div class="col-sm-4"> | |
| <div class="card"> | |
| <div class="card-body"> | |
| <div class="light-switch"> | |
| <input type="checkbox" class="btn-check light-toggle" id="light2-toggle" data-light="1" onchange="toggleBrightness(this)"> | |
| <label class="btn btn-outline-success" for="light2-toggle">kůlna trámky</label><br> | |
| <input type="range" min="0" max="254" class="slider light-slider" id="light2-slider" data-light="1"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Light 3 --> | |
| <div class="col-sm-4"> | |
| <div class="card"> | |
| <div class="card-body"> | |
| <div class="light-switch"> | |
| <input type="checkbox" class="btn-check light-toggle" id="light3-toggle" data-light="2" onchange="toggleBrightness(this)"> | |
| <label class="btn btn-outline-success" for="light3-toggle">kůlna pásek</label><br> | |
| <input type="range" min="0" max="254" class="slider light-slider" id="light3-slider" data-light="2"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function newToggleLight(lightIdPrefix) { | |
| // Select the corresponding checkbox in the original control | |
| let checkbox = document.getElementById(lightIdPrefix + '-toggle'); | |
| // Toggle the checkbox state | |
| checkbox.checked = !checkbox.checked; | |
| // Trigger the onchange event of the checkbox to update the original control | |
| $(checkbox).trigger('change'); | |
| } | |
| function toggleBrightness(checkbox) { | |
| let slider = $(checkbox).siblings('.light-slider')[0]; | |
| slider.value = checkbox.checked ? 255 : 0; | |
| saveSliderValue(slider); | |
| // Update the appearance of the new section button | |
| let newButton = document.getElementById('new-' + checkbox.id.split('-')[0] + '-btn'); | |
| if (newButton) { | |
| newButton.classList.toggle('btn-success', checkbox.checked); | |
| newButton.classList.toggle('btn-outline-success', !checkbox.checked); | |
| } | |
| } | |
| function saveSliderValue(slider) { | |
| let address = $(slider).data('light'); | |
| let checkbox = $(slider).siblings('.light-toggle')[0]; | |
| if (slider.value > 10) { | |
| checkbox.checked = true; | |
| } else { | |
| checkbox.checked = false; | |
| } | |
| $.ajax({ | |
| url: `/lighting-data`, | |
| type: "POST", | |
| contentType: "application/json", | |
| data: JSON.stringify({ address: address, value: slider.value }), | |
| }); | |
| } | |
| $(document).ready(function() { | |
| $(".light-slider").on("change", function() { | |
| saveSliderValue(this); | |
| }); | |
| $(".light-toggle").on("change", function() { | |
| toggleBrightness(this); | |
| }); | |
| setInterval(function() { | |
| $(".light-slider").each(function() { | |
| updateLightingValue(this); | |
| }); | |
| }, 5000); | |
| }); | |
| function updateLightingValue(slider) { | |
| let address = $(slider).data('light'); | |
| $.get(`/lighting-data`, { address: address }, function(data) { | |
| if (data.address === address) { | |
| $(slider).val(data.value); | |
| let checkbox = $(slider).siblings('.light-toggle')[0]; | |
| let isChecked = data.value > 0; | |
| checkbox.checked = isChecked; | |
| let newButton = document.getElementById('new-' + checkbox.id.split('-')[0] + '-btn'); | |
| if (newButton) { | |
| newButton.classList.toggle('btn-success', isChecked); | |
| newButton.classList.toggle('btn-outline-success', !isChecked); | |
| } | |
| } | |
| }); | |
| } | |
| </script> | |
| <!-- | |
| <div class="col-sm-4"> | |
| <div class="card"> | |
| <div class="card-body"> | |
| <div class="light-switch"> | |
| <input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off" onchange="toggleBrightness()"> | |
| <label class="btn btn-outline-success" for="btn-check-2-outlined">Kůlna lustr</label><br> | |
| <input type="range" min="0" max="255" class="slider" id="dimmerSlider"> | |
| </div> | |
| <script> | |
| function toggleBrightness() { | |
| var checkbox = document.getElementById('btn-check-2-outlined'); | |
| var slider = document.getElementById('dimmerSlider'); | |
| if (checkbox.checked) { | |
| slider.value = 255; // Set brightness to maximum when checkbox is checked | |
| } else { | |
| slider.value = 0; // Set brightness to minimum when checkbox is unchecked | |
| } | |
| saveSliderValue(); | |
| } | |
| function updateLightingValue() { | |
| $.get("/lighting-data", function(data) { | |
| $("#dimmerSlider").val(data.value); | |
| }); | |
| } | |
| function saveSliderValue() { | |
| var checkbox = document.getElementById('btn-check-2-outlined'); | |
| var slider = document.getElementById('dimmerSlider'); | |
| if (slider.value > 10) { | |
| checkbox.checked = true; // Check the checkbox if slider value is greater than 10 | |
| } else { | |
| checkbox.checked = false; // Uncheck the checkbox if slider value is 10 or less | |
| } | |
| $.ajax({ | |
| url: "/lighting-data", | |
| type: "POST", | |
| contentType: "application/json", | |
| data: JSON.stringify({ value: slider.value }), | |
| }); | |
| } | |
| // Add an event listener to the slider to detect changes | |
| $("#dimmerSlider").on("change", saveSliderValue); | |
| setInterval(updateLightingValue, 5000); | |
| </script> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- You can add more control sections for Cameras and Others here. --> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- Kamery --> | |
| <article id="kamery"> | |
| <h2 class="major">Kamery</h2> | |
| <button id="refresh-cameras-btn" class="top-right">Načíst Kamery</button> | |
| {% for camera in cameras %} | |
| <h3>{{ camera.name }}</h3> | |
| <div class="video-container"> | |
| <img class="camera-feed" src="{{ url_for('camera_blueprint.stream_camera', camera_id=camera.id) }}" alt="" onclick="zoomImage(this)"> | |
| </div> | |
| {% endfor %} | |
| </article> | |
| <!-- Zařízení --> | |
| <article id="prehled"> | |
| <h2 class="major">Přehled systému</h2> | |
| <div class="container"> | |
| <!-- Teploměry --> | |
| <h4 class="nadpis-sekce">Teploměry</h4> | |
| <div class="row"> | |
| <!-- Placeholder for Power Meters Chart --> | |
| {% for thermo in thermo %} | |
| <div class="col-sm-3"> | |
| <div class="card"> | |
| <div class="card-body"> | |
| <h5 class="card-title">{{ thermo.name }}</h5> | |
| {% for idx in range(thermo.values|length) %} | |
| {% if thermo.values[idx] and thermo.values[idx] != 'None' %} | |
| <div class="value-unit-pair"> | |
| <span class="measurement">{{ thermo.measurement[idx] }}:</span> | |
| <span class="value">{{ thermo.values[idx] }}</span> | |
| <span class="unit">{{ thermo.units[idx] }}</span> | |
| </div> | |
| {% endif %} | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| <!-- Elektroměry --> | |
| <h4 class="nadpis-sekce">Elektroměry</h4> | |
| <div class="row"> | |
| <!-- Placeholder for Power Meters Chart --> | |
| {% for elektro in ele %} | |
| <div class="col-sm-3"> | |
| <div class="card"> | |
| <div class="card-body"> | |
| <h5 class="card-title">{{ elektro.name }}</h5> | |
| {% for idx in range(elektro.values|length) %} | |
| {% if elektro.values[idx] and elektro.values[idx] != 'None' %} | |
| <div class="value-unit-pair"> | |
| <span class="measurement">{{ elektro.measurement[idx] }}:</span> | |
| <span class="value">{{ elektro.values[idx] }}</span> | |
| <span class="unit">{{ elektro.units[idx] }}</span> | |
| </div> | |
| {% endif %} | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| <!-- Světla --> | |
| <h4 class="nadpis-sekce">Světla</h4> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-sm-4"> | |
| <button class="btn btn-outline-success" id="new-light1-btn" onclick="newToggleLight('light1')">Kůlna Lustr</button> | |
| </div> | |
| <div class="col-sm-4"> | |
| <button class="btn btn-outline-success" id="new-light2-btn" onclick="newToggleLight('light2')">Kůlna Trámky</button> | |
| </div> | |
| <div class="col-sm-4"> | |
| <button class="btn btn-outline-success" id="new-light3-btn" onclick="newToggleLight('light3')">Kůlna Pásek</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Kamery --> | |
| <h4 class="nadpis-sekce">Kamery</h4> | |
| <div class="row"> | |
| <!-- Placeholder for Power Meters Chart --> | |
| {% for camera in cameras %} | |
| <div class="col-sm-3"> | |
| <div class="card"> | |
| <div class="card-body"> | |
| <h5 class="card-title">{{ camera.name }}</h5> | |
| <img class="video-mini" src=" {{ url_for('camera_blueprint.stream_camera', camera_id=camera.id) }} " alt=""> | |
| </div> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </article> | |
| </div> | |
| <!-- Footer --> | |
| <footer id="footer"> | |
| <p class="copyright">© 2023 Ondrej Major </p> | |
| <p class="copyright"><a href="https://github.com/Teapack1/IoT_Webserver_Python">APP</a>|<a href="https://html5up.net">design</a></p> | |
| </footer> | |
| </div> | |
| <!-- BG --> | |
| <div id="bg"></div> | |
| <!-- Scripts --> | |
| <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script> | |
| <script src="{{ url_for('static', filename='js/browser.min.js') }}"></script> | |
| <script src="{{ url_for('static', filename='js/breakpoints.min.js') }}"></script> | |
| <script src="{{ url_for('static', filename='js/util.js') }}"></script> | |
| <script src="{{ url_for('static', filename='js/main.js') }}"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script> | |
| </body> | |
| </html> | |