Progressbar fürs Webfront

Funktionswünsche WebFront
1

Hallo,
habe mich etwas umgeschaut, wie ich einen Progressbar im Webfront machen könnte und hab ein bisschen rumgespielt. Der Code ist nicht bereinigt oder sauber eingerückt.
Ich würde mir wünschen, dass es sowas auf einfach Art und Weise als z.B. Variablenprofil geben würde. Die Sache mir der HTMLBox funktioniert zwar, gefällt mir aber von der Übersichtlichkeit her nicht so gut. Auch muss natürlich der Code der HTMLBox dynamisch generiert werden, wenn sich die zugrundeliegene Variable ändert.

progress.png
progress.png944×236 11.4 KB

<?
// Quelle: https://catalin.red/stylish-css3-progress-bars/

$wert = GetValueInteger(26172);
$wert = 80; //test

$html="
<style>

progress {
    /* RESETS */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    width: 100%;
    
}
progress::-webkit-progress-bar {
    background-color: #fff;   
}
progress::-webkit-progress-value {
    background-color: #33f;  
} 
progress::-moz-progress-bar {
}

.progress-bar {
    background-color: #1a1a1a;
    height: 25px;
    padding: 5px;
    width: 99%;
    margin: 20px 0;
    border-radius: 5px;
    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
  }

  .progress-bar span {
    display: inline-block;
    height: 100%;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    transition: width .4s ease-in-out;
  }
  .blue span {
    background-color: #34c2e3;
  }

  .orange span {
    background-color: #fecf23;
    background-image: linear-gradient(top, #fecf23, #fd9215);
  }

  .green span {
    background-color: #a5df41;
    background-image: linear-gradient(top, #a5df41, #4ca916);
  }

  .stripes span {
    background-size: 30px 30px;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%,
                      transparent 25%,
                      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                      transparent 75%, transparent);
    animation: animate-stripes 3s linear infinite;
  }

  @keyframes animate-stripes {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 60px 0;
    }
  }

</style>

<div class=\"progress-bar blue stripes\">
    <span style=\"width: 50%\"></span>
  </div>

<div class=\"progress-bar green \">
    <span style=\"width: 100%\"></span>
  </div>

  <div class=\"progress-bar orange \">
    <span style=\"width: 100%\"></span>
  </div>
";
if ($wert <= 30 ){
    $farbe = "<div class=\"progress-bar orange \">";
};
if ($wert > 30 and $wert <= 70){
    $farbe = "<div class=\"progress-bar blue \">";
}
if ($wert > 70){
    $farbe = "<div class=\"progress-bar green \">";
}
$html = $html.$farbe."
    <span style=\"width:";
    $html = $html.$wert."%\"></span>
  </div>

 <progress max=\"100\" value=\"".$wert."\"></progress><br><br>
 <progress max=\"100\" value=\"50\" style=\"width: 80%; height: 40px;\"></progress><br><br>
 <progress max=\"100\" value=\"10\" style=\"width: 80%; height: 40px; \"></progress><br><br>

";
setvalue(IPS_GetParent($_IPS['SELF']),$html); // ID der unter (1) angelegten String-Variable ; Variable mit dem Profil ~HTMLBox

?>

Jemand Interesse?

Grüße
Stefan

progress.png
progress.png1888×471 14 KB

2

Hier noch ein Skript. Werden unterhalb des Skripts Variablen verlinkt (müssen aktuell 0-100 enthalten), werden diese untereinander visualisiert. Die Farbgebung kann invertiert werden, indem dem Linknamen ein ! vorangestellt wird. (Dieses wird dann wieder abgeschnitten)

process2.png
process2.png1550×269 17.4 KB

<?
// Quelle: https://catalin.red/stylish-css3-progress-bars/

$html="
<style>

.label {
    text-align: left;
    font-size: 21px;
    padding: 0px;
    margin: 0px 0;
}

.value span{
    text-align: center;
    font-size: 21px;
}

.progress-bar {
    background-color: #1a1a1a;
    height: 25px;
    padding: 5px;
    width: 99%;
    margin: 10px 0;
    border-radius: 5px;
    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
  }

  .progress-bar span {
    display: inline-block;
    height: 100%;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    transition: width .4s ease-in-out;
  }
  .blue span {
    background-color: #34c2e3;
  }

  .red span {
    background-color: #ff0000;
  }

  .orange span {
    background-color: #fecf23;
    background-image: linear-gradient(top, #fecf23, #fd9215);
  }

  .green span {
    background-color: #a5df41;
    background-image: linear-gradient(top, #a5df41, #4ca916);
  }
</style>";

 
foreach (IPS_GetChildrenIDs($_IPS['SELF']) as $Link) {
    $Objekt = IPS_GetObject($Link);
    if ($Objekt['ObjectType'] != 6) {
        continue;
    }

    $Target = @IPS_GetObject(IPS_GetLink($Link)['TargetID']);
    if ($Target === false) {
        continue;
    }
    
    if ($Target['ObjectType'] != 2) {
        continue;
    }
    
    $value = Getvalue($Target['ObjectID']);
    //$html = $html."<div class=\"progress-bar green \"><span style=\"width: ".$value."%\"></span></div>";
    
    $name = IPS_GetName($Link);
    // Hat der Link einen Namen, dann wird dieser verwendet, ansonsten der Name des Ziels
    if(strpos($name, 'Unnamed Object') !== false){ 
        $name = IPS_GetName($Target['ObjectID']);
    }

    // Die Farben werden invertiert, indem ein ! vor den Namen gesetzt wird
    if(strpos($name, '!') !== false){ 
        $name = substr($name, 1);
        $html = $html."<div class=\"label\">".$name."</div>";
        if ($value <= 30 ){
            $farbe = "<div class=\"progress-bar green value\">";
        }
        if ($value > 30 and $value <= 70){
            $farbe = "<div class=\"progress-bar orange value\">";
        }
        if ($value > 70){
            $farbe = "<div class=\"progress-bar red value\">";
        }
        $html = $html.$farbe."<span style=\"width:".$value."%\">".$value."%</span></div>";
    }
    else{ 
        $html = $html."<div class=\"label\">".$name."</div>";
        if ($value <= 30 ){
            $farbe = "<div class=\"progress-bar red value\">";
        }
        if ($value > 30 and $value <= 70){
            $farbe = "<div class=\"progress-bar orange value\">";
        }
        if ($value > 70){
            $farbe = "<div class=\"progress-bar green value\">";
        }
        $html = $html.$farbe."<span style=\"width:".$value."%\">".$value."%</span></div>";
    }
    
}
        

setvalue(IPS_GetParent($_IPS['SELF']),$html); // ID der unter (1) angelegten String-Variable ; Variable mit dem Profil ~HTMLBox
?>
3

Hallo Stefan,
ich hab da schon Interesse. Ich muß mir nur mal in Ruhe ansehen wie das mit der Konfiguration funktioniert.

Gruß
Thomas

4

Hier noch die Struktur vom zweiten Skript

progressbar.png
progressbar.png1255×155 24.5 KB

Grüße
Stefan

5

Hallo Stefan,

daß Script funktioniert einwandfrei. Ich habe es etwas umgestellt und benutze es für den Stromverbrauch.

Ashampoo_Snap_Sonntag, 9. Februar 2020_01h41m09s_002_.png
Ashampoo_Snap_Sonntag, 9. Februar 2020_01h41m09s_002_.png939×331 18.6 KB

Jetzt werde ich noch versuchen zwischen der Zahl und den kWh 2 Leerzeichen rein zu machen.Wenn Du weißt wie das geht darfst Du mir es auch verraten.:smiley:

Es sieht gut aus im Webfront.

Vielen Dank für das coole Script!!:slight_smile:

Gruß
Thomas

6

Da es einfaches html ist, kannst du den Abstand einfach als Leerzeichen an der richtigen Stelle einfügen.

abstand.png
abstand.png757×29 1.48 KB

Grüße
Stefan