LWE - analoger Balken

Kleines Design am Rande:  

Wenn man zwei genau gleiche Bargraphen um 180° gedreht aneinander setzt, wie ixo65 in seinem Beispiel getan hat, die allerdings den selben Wert abfragen und das Ganze horizontal ausrichtet, so erhält man einen Effekt wie früher die "Magischen Augen" an einem Röhrenradio. Die Skalen sollten dann natürlich auch verdeckt werden.

mfG

Hallo Forum!

Ein riesiges Danke Schön an Alle! Ist wirklich toll wie viel Unterstützung, Anregung und Hilfe man hier bekommt!

Ich habe jetzt eine ganz einfache Lösung für meinen Plus-/Minus Balken gefunden. Anbei ein Screenshot. Da hier immer nur eine Datei geht habe ich zwei Screenshot nebeneinander in eine JPG kopiert!

Ich habe es mit zwei analogen Balken realisiert. Beide mit dem identischen Blocktyp und identischer Blocknummer und Blockformat signed. Für die obere Grafik habe ich den Wert Max= 3000 und Min= 0 angegeben und für die untere Grafik Max= 0 und Min= -3000

Die beiden Grafiken dann pixel-genau so angeordnet, dass die "Nulllinie" bei beiden an der gleichen Stelle sitzt.Bis hier her sicher ganz normal für jeden! Jetzt aber zum besonderen.

Die Farben. Für die obere Grafik habe ich für den Bereich von 0 bis 3000 die Farbe "GRÜN" gewählt. Für die untere Grafik habe ich für den Bereich von -3000 bis 0 die Farbe "WEISS" eingestellt.

Jetzt muss man "nur" noch ähnlich wie im Beitrag wie-kann-man-die-schriftgrösse-der-analogwerte-ändern von woodenmetall erklärt in der main.html im zugehörigen <DIV>die Background-color anpassen.

So eine Grafik besteht dabei immer aus zwei <DIV>s! Die erste <DIV> ist dabei für den farbigen Wertebereich zuständig und die zweite <DIV> für den "normalen" weißen Hintergrund. Hier die beiden unveränderten DIVs aus meinem Projekt für die obere Grafik.

<div id="barBg" class="barBg" style="width: 52px; background-color: rgb(51, 204, 0); height: 100%; float: left; border: 1px solid rgb(0, 0, 0);"></div>
<div class="whiteBg" style="width: 52px; height: 90px; position: absolute; background-color: white; top: 1px; left: 1px;"></div>

Man sieht hier die Farbe im ersten <DIV> für den Wertbereich ist rgb(51, 204, 0); = GRÜN und im zweiten <DIV> ist die Farbe für den Hintergrund background-color: white; = WEISS.Alles ganz normal!

Die Anpassung muss man in den beiden <DIV>s für die untere Grafik vornehmen. In der ersten <DIV> für die untere Grafik ist die Farbe für den Wertbereich wie im LWE eingestellt WEISS mit background-color: rgb(255, 255, 255); Die zweite <DIV> muss geändert werden. Ich habe dazu in der zweiten >DIV>

background-color: white;

auf

background-color: red;

geändert.

<div id="barBg" class="barBg" style="width: 52px; background-color: rgb(255, 255, 255); height: 100%; float: left; border: 1px solid rgb(0, 0, 0);"></div>
<div class="whiteBg" style="width: 52px; height: 90px; position: absolute; background-color: red; top: 1px; left: 1px;"></div>

Wichtig bei Änderungen in der main.html zuerst das Projekt im LWE schließen. Dann die Änderungen in der main.html ausführen und speichern. Danach das Projekt im LWE wieder öffnen und ganz wichtig zuerst noch eine Änderung im Projekt machen. Ich ändere dazu immer einen Text für eine Versionsnummer. Danach das Projekt speichern und übertragen.

Das gute an dieser Variante ist, dass auch die Legende zur Grafik ganz automatisch richtig ist.

Viel Erfolg und viel Spaß damit.

Greatone

Macht eine guten Eindruck.

Man könnte noch den weißen Hintergrund durch ein leichtes Grau ersetzt, oder einzelne Zahlenwerte der Skalierung verändern. 

Ist alles eine Frage des Geschmacks

mfG