HTMLBox Strompreischart und PV

und hier noch das Script für die PV Produktion etc

Da es ja vermutlich sehr individuell ist wo jeder die Werte her bekommt bzw. berechnet habe ich den ersten Teil des Scripts hier weggelassen.

Folgende Variablen müssen mit Werten gefüllt werden:

$eigenverbrauch_prozent
$eigenproduktion_prozent
$produktion_heute_round
$eigenverbrauch_kwh_round
$eigenproduktion_kwh_round
$einspeisung_heute_round
$verbrauch_heute_round
$zukauf_heute_prozent
$zukauf_heute_round
$kosten_heute

$htmlpv = '
    <style>
      .container1 {
        position: relative;
        width: 100%;
        height: 100px;
        border: 0px solid #000;
      }
        .overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white; /* Textfarbe anpassen */
        z-index: 2; /* Über anderen Inhalten schweben */
  }
      .container2 {
        width: 100%;
        height: 80px;
        border: 0px solid #000;
        font-size: 0.8em;
      }
      .einspeisung {
        width: auto;
        background: #15c603;
        overflow: visible;
        padding-top: 10px;
        padding-left: 10px;
        padding-bottom: 10px;
        padding-right: 10px;
        white-space: nowrap;
        direction: rtl;
        color: white;
      }
      .eigenverbrauch {

        width: '.$eigenverbrauch_prozent.'%;
        background: #28cdab;
        float: left;
        padding-top: 10px;
        padding-left: 10px;
        padding-bottom: 10px;
        color: white;
      }
     .bezug {
        width: auto;
        background: #d00000;
        overflow: visible;
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        white-space: nowrap;
        direction: rtl;
        color: white;
      }
      .eigenproduktion {
        width: '.$eigenproduktion_prozent.'%;
        background: #28cdab;
        float: left;
        padding-top: 10px;
        padding-left: 10px;
        padding-bottom: 10px;
        color: white;
      }
      .einspeisungsubtext {
        width: auto;
        height: 80px;
        background: #ffffff;
        overflow: hidden;
        text-align: right;
      }
      .eigenverbrauchsubtext {
        height: 80px;
        width: 50%;
        background: #ffffff;
        float: left;
      }
     .bezugsubtext {
        width: auto;
        height: 80px;
        background: #ffffff;
        overflow: hidden;
        text-align: right;
      }
      .eigenproduktionsubtext {
        height: 80px;
        width: 50%;
        background: #ffffff;
        float: left;

      }
    </style>
  </head>
  <body>
    <div class="container1">
        <div class="overlay">
        Produktion '.$produktion_heute_round.' kWh
        </div>
      <div class="eigenverbrauch">'.$eigenverbrauch_prozent.'%</div>
      <div class="einspeisung">'.$einspeisung_prozent.'%</div>
    </div>
    <div class="container2">
      <div class="eigenverbrauchsubtext">Eigenverbrauch '.$eigenverbrauch_kwh_round.'&nbsp;kWh</div>
      <div class="einspeisungsubtext">Einspeisung '.$einspeisung_heute_round.'&nbsp;kWh</div>
    </div>
    <div class="container1">
         <div class="overlay">
        Verbrauch '.$verbrauch_heute_round.' kWh
        </div>
      <div class="eigenproduktion">'.$eigenproduktion_prozent.'%</div>
      <div class="bezug">'.$zukauf_heute_prozent.'%</div>
    </div>
    <div class="container2">
      <div class="eigenproduktionsubtext">Eigenproduktion '.$eigenproduktion_kwh_round.'&nbsp;kWh</div>
      <div class="bezugsubtext">Zukauf <font style="color: red;">'.$zukauf_heute_round.'&nbsp;kWh&nbsp;</font> / '.$kosten_heute.' EUR</div>
    </div>
';


Setvalue(35609, $htmlpv);

Viele Grüße
Stephan

5 „Gefällt mir“