Regenwasserzisterne: Füllstand visualisieren

Hallo,

ich stelle den Füllstand meiner Regenwasserzisterne in einem horizontalen Balken (prozent) dar. Hat von euch jemand eine optisch schickere Lösung grafisch den Füllstand der Zisterne darzustellen realisiert?

Gruß
hardlog

zisterne.jpg

So,

hab mal nen wenig gebastelt. Ist nur der erste Versuch: Ist nen einfaches html-Script, das die Zisterne als Hintergrundbild in einer Tabelle darstellt und die Füllung wird als zweites Bild überlagert und entsprechend dem Füllungsstand in Prozent gestaucht angezeigt. Nicht sonderlich pfiffig und ein wenig hingebastelt aber es geht. Meine Zisterne ist rund/oval, auf die Art geht es aber nur als Rechteck. Erster Entwurf halt…

Gruß
hardlog

zisterne_shot15.jpg

zisterne_shot100.jpg

Find ich schon super. Da bin ich auf Deine nächsten Versuche gespannt. :wink:

Würde gern abkupfern.

Gruß Helmut

Sieht doch beides nicht schlecht aus.

Bleib da dran, bin gespannt wie das noch wird. Denn im Prinzip geht das ja für mehr Sachen:
-Briefkasten
-Puffer-Temperaturen
usw

Hallo hardlog,

wenn du einen ovalen <div> mit border-radius erstellst und den overflow:hidden setzt,
dann kannst du eine rechteckiges Bild in eine ovale Form legen.

rounded-border

Hoffe es hilft :smiley:

Gruß soundman33

Schön, dass es auf Interesse stößt.
Hier die Anleitung:
(1) Stringvariable mit Profil ~htmlBox anlegen
(2) dardrunter ein script mit folgendem Inhalt

<?
$fuellung=GetValue(12345); // prozentuale Füllung, falls z.B. in Litern, muss es hier umgerechnet werden

$html="
 <table border='0' cellpadding='0' cellspacing='0' widht='150' frame='void'>
   <tr>
      <td height=186 width=150 align='center' style='background-image:url(/user/zisterneoben.gif);' valign='bottom'>
		<img src='/user/wasser.gif' width='128px' height='".$fuellung*0.62."%'>
		</td>
		<td valign='top'><font size='+2'>***Füllung: ".$fuellung." %</td>
	</tr>
	<tr>
        <td height=12 width=150 align='left' style='background-image:url(/user/zisterneunten.gif);'>
	</tr>
  </table>
";
setvalue(38311,$html); // ID der unter (1) angelegten String-Variable

?>

(3) die zwei gif-Bilder der Zisterne und das gif des Wassers müssen im Verzeichniss ip-symcon/webfront/user liegen

wasser.gif

zisterneoben.gif

zisterneunten.gif

Hatte gerade Probleme die Gifs zu posten. Daher hier die entsprechenden Dateien…

wasser.gifzisterneoben.gifzisterneunten.gif

zisterneoben.gif

wasser.gif

…oder das ganze per one-Click exportieren/importieren :wink:

Script im Anhang ist ein Install-Script (mit dem Project Exporter generiert) und legt alle Objekte und Grafik-Files im Zielsystem an (alles wasim Ordner „Config“ angelegt wird, kann problemlos gelöscht werden)

…Script entfernt…

also bei mir scheint dein install-script leider nicht zu funktionieren.

was passiert denn? Oder was auch nicht?

Gruß
hardlog

Bei mir geht der web Editor auf. In diesem Fall Microsoft expression, und zeigt mir eine leere Seite an.

hmm,

ich weiß nicht genau was du da meinst.
Hast Du es so wie in post #6 beschrieben versucht? Mach mal nen screenshot vom Objektbaum an relevanter stelle und poste noch mal dein script.

hardlog

ja hab es so gemacht und es funktioniert.Wie begrenze ich die Kommastellen?

also bei mir scheint dein install-script leider nicht zu funktionieren.

Das Script ist kein Installscript und kann nicht gehen. Ich habs mal rausgenommen.

ja hab es so gemacht und es funktioniert.Wie begrenze ich die Kommastellen?

Begrenzung der Nachkommastellen z.B. mit dem php-Befehl ROUND mit Angabe der Stellenzahl (0-xx).

       <td valign='top'><font size='+2'>***Füllung: ".round($fuellung,1)." %</td>

Also soweit funktioniert jetzt alles.
Mir ist aber aufgefallen das die Aktualisierung der Werte in diesem Script nicht ganz so fix ist wie Sie aus der SPS (WAGO 881 über GB-LAN) kommen.
Beim vergleich in der WF Visu von einer einfachen REAL-Anzeige und der Anzeige über das Script, scheint es eine ewigkeit zu dauern ehe mal was aktualisiert wird. In den instanzen sind 300ms eingestellt.
Wie mache ich den Aktualisierungsintervall für das Script schneller bzw fast 1:1?

Gleichzeitig ist das eine gute Basis für viele weiter Visualisierungsideen.

LG, Herbert

Hallo, habe mit deiner Füllstandsanzeige rumprobiert.
Sieht auch alles ganz gut aus. Habe deinen php Code genommen und etwas abegändert.
Nur wie hast du wie im diesem Bild:

es hinbekommen, die Anzeige daneben anzeigen zu lassen ?

Viele Grüße

Jörg

Hi Jörg,

der entsprechende php-Code-Teil sieht bei mir so aus:


$html="
 <table border='0' cellpadding='0' cellspacing='0' width='420' frame='void'>
   <tr>
      <td height=186 width=150 align='center' style='background-image:url(/user/zisterneoben.gif);' valign='bottom'>
         <font size='+2'>".$fuellung." %
      	<img src='/user/wasser.gif' width='128px' align='center' height='".($fuellung*0.66)."%'></img>
		</td>
		<td colspan='2' rowspan='2' width=250 valign='top'></br>
				<span style='font-size:150%'>***Füllung: ".($fuellung*4500/100)." l</span>
      				<font color='grey'><font size='2'>
     				</br>*****Temperatur: ".$temp." °C
						</br>*****∑ Regensammelfläche ".$Flaeche." m²
						</br>*****Δ Vol. letzte 24h: ".$Regenmenge." l = ".round($Regenmenge/$Flaeche,0)." l/m²
						</br>*****Δ Vol. letzte 1 h: ".getvalue(57967 /*[Gebäude\Außen L\Regenwasserzisterne\Zisternen viso\Fuellstand vor 1h\regenmenge der letzten h]*/)." l
						</br>*****=> ".round(getvalue(57967 /*[Gebäude\Außen L\Regenwasserzisterne\Zisternen viso\Fuellstand vor 1h\regenmenge der letzten h]*/)/$Flaeche,2)." l/m² Regen pro h
<p style='margin-top:0.8em'>*****Status: Sensor ".$DrucksensorStatus." / 1-wire ".$OnewireStatus."</p>
		</td>
	</tr>
	<tr>
        <td height=12 width=150 align='left' style='background-image:url(/user/zisterneunten.gif);'>
	</tr>
  </table>";

Gruß
hardlog

Hallo,

SUPER :slight_smile: