Home Assistant - Apache2 webserver

[Solarnoob]

Ahoj,
vlákno vzniklo jako reakce na diskuzi https://forum.mypower.cz/viewtopic.php? ... &start=120, ať tam nemícháme jablka a hrušky.

MOTIVACE :
Důvodem monitoringu pomocí webových služeb, byla snaha jednoduše a rychle (i na mobilech, když nejsem doma atd..) vizualizovat data, za pomocí technik, které jsem již znal a měl.

JAK ŠEL VÝVOJ :
S postupem času jsem se trochu naučil instalovat a používat HomeAssistenta, tak jsem web přesunul z externího webhostingu na domácí webserver na HA a tento web jsem skrze Firewall vystavil do internetu. Tedy jen ten malý web a ne celého HomeAsistenta. Pro detailní informace pak používám již HA včetně grafany atd... a jen když jsem doma.

Proto zde budu popisovat již jen instalaci na HA.
Pro HA je použit apache 2 plugin https://github.com/FaserF/hassio-addons ... er/apache2
společně s MariaDB a PhpMyadmin https://community.home-assistant.io/t/h ... min/171729
Samotná webová stránka je kombinací několika technik. PHP, AJAX, Java. A byla vytvořena jako lab k ověření možností vizualizace. Pro rychlý přehled to docela dostačuje a lze jej poměrně velice jednoduše doplnit o chybějící informace.

Stránka je kombinací statických hodnot a dynamicky se měnících. Statické hodnoty jako například grafy se obnovují při obnově celé stránky. Zatímco AJAX (kulaté budíky) se refrešují automaticky bez nutnosti obnovy stránky.

[PetrV2]

Ahoj, budíky vypadají pěkně, také bych případně chtěl něco podobného, co by se dalo ukazovat veřejnosti.
Ale ty píšeš, že to máš pro sebe, aby ses na to mohl koukat z mobilu. Jestli to máš doma, tak buďto máš normální připojení k internetu (= veřejné IP adresy) nebo tuneluješ port přes nějaký cloud?

Pokud máš normální internet, doporučil bych použít nějakou VPN, třeba OpenVPN nebo Strongswan, pak se můžeš připojit do domácí sítě z mobilu, ať už OpenVPN klientem nebo v případě Strongswan by to mělo jít i nativní VPN na mobilu a tím i k HA. No a na mobil si můžeš dát apku Home Assistant Companion, což je prakticky HA klient na mobily (umí všechno co web a i ještě leccos navíc). Existují 2 verze - standard a minimal. Minimal např. na F-Droid. Minimal neobsahuje/nepoužívá Google Spyware (Google Play, Firebase atd.).

Tou VPNkou bys pak mohl mít na všechno HA Companion včetně administrace HA a pokud toto tvé dílo (budíky) nejsou pro veřejnost ale pro tebe či rodinu, mohl by sis ušetřit spoustu práce

Tím nechci nikterak hanit tvé dílo, ber to jenom jako tip, jak se dostat ke stavu elektrárny skoro bez práce . Třeba jsi o této možnosti nevěděl.

[Solarnoob]

to co jsem zde ukázal, je pouze jedna z mnoha možností realizace. Toto je možnost jak neotvírat HA světu a přitom "něco" vidět a třeba to i někomu ukázat, když třeba to raspberry běží stále.
U mě jde ve skutečnosti o dost složitější síťovou realizaci. A web je jen její třešínka.
Mám spojené dva objekty skrze internet od sebe vzdálené 200 km za použití tunelů s certifikáty. ve kterých běhá vše od zigbee, tuya, kamer, HA automatizace až po internet a HA geo-cluster. Prostě taková zuřivost

[Solarnoob]

Jak se dělá Budík ?

kde začít shánět informace, no přeci na Googlu
https://developers.google.com/chart/int ... lery/gauge

No jo, ale jak to namontovat na DB aby se mi to hezky samo pohybovalo?
Tak zde je příklad jak to udělat za pomocí PHP a MariaDB.
Hlavní soubor, který se volá se jmenuje "budik.php" příklad zde: http://hsteam.cz/graf/budik.php .
Pomocný soubor, který získává data s DB se jmenuje "vyndejdata.php"

soubor: budik.php

Kód: Vybrat vše

<title>Priklad - kulaty ukazatel </title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 
<script type="text/javascript">

  google.charts.load('current', {'packages':['gauge']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var dataBvolt = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Baterie', 0],
      ]);
           
    var optionsBvolt = {
      width: 150, height: 150,
      redFrom: 14, redTo: 16,
      yellowFrom:10, yellowTo: 12,
      greenFrom: 12, greenTo: 14,
      majorTicks: ['8','9','10','11','12','13','14','15','16'],
      minorTicks: 9,
      min: 8,
      max: 16
        };
    var formatBvolt = new google.visualization.NumberFormat({
      suffix: 'V',
      fractionDigits: 1
    });
    formatBvolt.format(dataBvolt, 1);

    var chartBvolt = new google.visualization.Gauge(document.getElementById("chart_Bvolt"));

    chartBvolt.draw(dataBvolt, optionsBvolt);

    setInterval(function() {
        var JSON=$.ajax({
            url:"vyndejdata.php?api_key=napetibaterie",
            dataType: 'json',
            async: false}).responseText;
            $jdata=jQuery.parseJSON(JSON);
      dataBvolt.setValue(0, 1, $jdata);
      formatBvolt.format(dataBvolt, 1);
      chartBvolt.draw(dataBvolt, optionsBvolt);
    }, 1300);    
  }
  
</script>

<html>
  <body>
     <table width = "1200">
          <td>
            <div class="gauge" id="chart_Bvolt"></div>
          </td>
     </table>
  </body>
</html>

soubor: vyndejdata.php

Kód: Vybrat vše

<?php

$con = mysqli_connect("server", "user", "heslo" , "databaze");  //https://www.w3schools.com/php/func_mysqli_connect.asp

session_start();
error_reporting (E_ALL ^ E_NOTICE);
extract($_GET);

//------------------------------------------------------------------------------
if($api_key == "napetibaterie") {
    $sql = "SELECT baterie-napeti FROM epever-data ORDER BY time DESC LIMIT 1";  //zde zaleží jak mate postavenou databazi
          $result = mysqli_query($con, $sql);
                      while($row = mysqli_fetch_assoc($result)) {
                      $table = $row["baterie-napeti"];
                        }
   echo json_encode($table);
  }   
 else {} 

?>