Akkuanzeige mit ChatGPT

hfichtinger · 16. Mai 2025 um 18:30

Das hat mir ChatGPT generiert. Ich war echt überrascht, wie gut das funktioniert hat.

//Batteriegrafik
$height = 253;             // Höhe des Akkus
$width = 150;               // Breite des Akkus
$fontsize=20;
// Farbe je nach Ladezustand

$level = getvalue($soc_basis_id);
$kwh = (getvalue($wh_basis_id)/1000)." kWh";
$status= getvalue($status_basis_id);
$fillColor = ($level <= 20) ? 'red' : (($level <= 50) ? 'orange' : 'green');
$filledHeight = ($level / 100) * $height;
$yOffset = $height - $filledHeight;

setvalue ($grafik_basis_id, '<center><svg xmlns="http://www.w3.org/2000/svg" width="'.($width + 20).'" height="'.($height + 60).'" font-family="Arial" font-size="'.$fontsize.'">

  <!-- Batterie-Kopf -->
  <rect x="'.(10 + $width / 4).'" y="10" width="'.($width / 2).'" height="10" fill="black"/>

  <!-- Batterie-Gehäuse -->
  <rect x="10" y="20" width="'.$width.'" height="'.$height.'" rx="6" ry="6"
        fill="none" stroke="black" stroke-width="3"/>

  <!-- Batterie-Füllung -->
  <rect x="14" y="'.(20 + $yOffset).'" width="'.($width - 8).'" height="'.$filledHeight.'"
        fill="'.$fillColor.'"/>

  <!-- Prozentanzeige im Akku -->
  <text x="'.($width / 2 + 10).'" y="'.($height / 2 + 15).'" text-anchor="middle"
        dominant-baseline="middle" fill="white">'.$level.'%</text>

  <!-- kWh -->
  <text x="'.($width / 2 + 10).'" y="'.($height / 2 + 35).'" text-anchor="middle"
        dominant-baseline="middle" fill="white">'.$kwh.'</text>

  <!-- Status -->
  <text x="'.($width / 2 + 10).'" y="'.($height / 2 + 55).'" text-anchor="middle"
        dominant-baseline="middle" fill="white">'.$status.'</text>

</svg></center>');

Ich denke die getvalues und die Variablen muss ich nicht näher erklären.

hfichtinger · 24. Mai 2025 um 09:08

Offenbar gefällt es. Ich hab die Grafik etwas angepasst, sodass die Rundungen weg sind, und bei mir passt der %-Balken jetzt genau in den Rahmen.
Außerdem hab ich eine Funktion daraus gemacht, ist ja immer die selbe Anzeige und das setvalue wird nur dann ausgeführt, wenn sich was ändert, damit nicht immer alle Grafiken blinken.

<?php
function grafik ($level, $kwh, $status)
{
    $height = 253;
    $width = 150;
    $fontsize=20;
    $stroke=5;
    $fillcolor_battery="gray";

    $fillColor = ($level <= 20) ? 'red' : (($level <= 50) ? 'orange' : 'green');
    $filledHeight = ($level / 100) * $height - $stroke-1;
    $yOffset = $height - $filledHeight-$stroke+2;

    $svg=   '<center><svg xmlns="http://www.w3.org/2000/svg" width="'.($width + 20).'" height="'.($height + 30).'" font-family="Arial" font-size="'.$fontsize.'">

            <!-- Batterie-Kopf -->
            <rect x="'.(10 + $width / 4).'" y="10" width="'.($width / 2).'" height="20" fill="black"/>

            <!-- Batterie-Gehäuse -->
            <rect x="10" y="20" width="'.$width.'" height="'.$height.'" 
            fill="'.$fillcolor_battery.'" stroke="black" stroke-width="'.$stroke.'"/>

            <!-- Batterie-Füllung -->
            <rect x="13" y="'.(20 + $yOffset).'" width="'.($width-6).'" height="'.$filledHeight.'"
            fill="'.$fillColor.'"/>

            <!-- Prozentanzeige im Akku -->
            <text x="'.($width / 2 + 10).'" y="'.($height / 2 + 15).'" font-weight="bold" text-anchor="middle"
            dominant-baseline="middle" fill="white">'.$level.'%</text>

            <!-- kWh -->
            <text x="'.($width / 2 + 10).'" y="'.($height / 2 + 35).'" font-weight="bold" text-anchor="middle"
            dominant-baseline="middle" fill="white">'.$kwh.'</text>

            <!-- Status -->
            <text x="'.($width / 2 + 10).'" y="'.($height / 2 + 55).'" font-weight="bold" text-anchor="middle"
            dominant-baseline="middle" fill="white">'.$status.'</text>

            </svg></center>';
    return $svg;
}
$soc_gesamt_id=11713;
$soc_basis_id=52390;
$soc_e1_id=18531;
$soc_e2_id=18922;

$grafik_gesamt_id=15060;
$grafik_basis_id=29165;
$grafik_e1_id=18869;
$grafik_e2_id=27520;

$wh_gesamt_id=58528;
$wh_basis_id=47835;
$wh_e1_id=48539;
$wh_e2_id=59562;

$status_gesamt_id=39128;
$status_basis_id=29015;
$status_e1_id=39631;
$status_e2_id=57511;

$grafik=grafik(getvalue($soc_gesamt_id),(getvalue($wh_gesamt_id)/1000)." kWh",getvalue($status_gesamt_id));
if ($grafik != getvalue($grafik_gesamt_id)) setvalue ($grafik_gesamt_id,$grafik);

$grafik=grafik(getvalue($soc_basis_id),(getvalue($wh_basis_id)/1000)." kWh", getvalue($status_basis_id));
if ($grafik != getvalue($grafik_basis_id)) setvalue ($grafik_basis_id,$grafik);

$grafik=grafik(getvalue($soc_e1_id),(getvalue($wh_e1_id)/1000)." kWh",getvalue($status_e1_id));
if ($grafik != getvalue($grafik_e1_id)) setvalue ($grafik_e1_id,$grafik);

$grafik=grafik(getvalue($soc_e2_id),(getvalue($wh_e2_id)/1000)." kWh",getvalue($status_e2_id));
if ($grafik != getvalue($grafik_e2_id)) setvalue ($grafik_e2_id,$grafik);