Textfarbe ändern in Abhängigkeit einer Variablen

T

Thomas_99

Grünschnabel
Hallo - ich brauche etwas Hilfe:

Ich möchte aktuelle Messwerte auf einer Webseite darstellen. Das funktioniert auch schon ganz gut.

Damit ich einen schnelleren Überblick über eventuelle Probleme der Anlage bekomme, sollen die Werte die normalerweise schwarz dargestellt sind, rot dargestellt werden sobald sie einen
Grenzwert überschreiten.

Ich suche ein JavaScript, welches dies für mich tut.

Derzeit definiere ich im CSS verschiedene Styles, die ich beim Aufruf der Messwerte fix mit gebe.

Ich suche ein Script, dem als Parameter den Namen des Messwertes, die Obergrenze und die Notfall-Farbdefinition dieses Messwertes übergebe.
Wird der Wert überschritten, soll der Style des Messwertes ausgetauscht werden und der Messwert erscheint rot und blinkend.... na, ja falls das so geht....



Meine Seite im Wesentlichen:

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" /><meta http-equiv="refresh" content="300;">
<title>Onlineschema</title>
<style type="text/css">
body {font-size: 18px; font-family: Verdana, Arial, Helvetica, sans-serif; background-repeat: no-repeat;}
#graphic {text-align: left; vertical-align: top; position: relative; width: 1045px; height: 778px; margin-right: auto; margin-left: auto;}

/* A.) Positionen der digitalen Werte */
#pos-n1d0 {left: 824px; top: 331px;} /* Pumpe 1 */
#pos-n1d1 {left: 435px; top: 173px;} /* Pumpe 2 */

/* B.) Positionen der analogen Werte */
#pos-n1a0 {left: 467px; top: 564px;} /* Temperatur 1 */
#pos-n1a1 {left: 442px; top: 80px;} /* Temperatur 2 */

/*########## CSS-Klasse: Darstellungsparameter der Ein- und Ausgangswerte des Bootloaders festlegen ##########*/
.styleblack {font-family: Tahoma; font-weight: normal; color: #000000; position: absolute;} /* schwarz, nicht fett */
.stylegold {font-family: Tahoma; font-weight: bold; color: #ffd700; position: absolute;} /* gold, nicht fett */
.stylered {font-family: Tahoma; text-decoration:blink; font-weight: bold; color: #ff0000; position: absolute;} /* rot, fett, blinkend */

</style>

</head>
<body>
<!-- A.) Hintergrundgrafik laden -->
<div id="graphic">
<img src="GRAFIK.gif" alt="GRAFIK.gif" width="960" height="690" border="0"/>

<!-- C.) Ausgeben der digitalen Ausgangswerte an der vordefinierten Position > -->
<div class="styleblack" id="pos-n1d0">$n1d0</div>
<div class="styleblack" id="pos-n1d1">$n1d1</div>

<!-- D.) Ausgeben der analogen Ausgangswerte an der vordefinierten Position > -->
<div class="stylegold" id="pos-n1a0">$n1a0</div>
<div class="styleblack" id="pos-n1a1">$n1a1</div>
</div>
>
</body>
</html>


Ist das in JavaScript ein großes Problem ?

Herzlichen Dank im voraus....

Gruß Thomas :);)
 
Hallo Sven,

also der Messwert ist in meiner HTML-Codierung nicht direkt zu sehen.

Der Platzhalter $n1a0 wird im Onlinebetrieb durch den aktuellen analogen Messwert Nummer 1 ersetzt, das könnte dann z.B. "72,4" sein.

Zum Testen eines JavaScript könnte man also das $n1a0 durch 72,4 ersetzen.

Wenn man nun den Schwellenwert 70,0 übergibt sollten die 72,4 dann rot erscheinen.


Mit der Zeile <div class="styleblack" id="pos-n1a1">$n1a1</div> gebe ich also einen altuellen Messwert $n1a1 ( der z.B. durch 65,4 ersetzt wird ) im Style styleblack ( schwarz )
an der Koordinate pos-n1a1 ( hier: left: 442px; top: 80px ) aus.

Das Script könnte z.B. diese Angabe styleblack beim Überschreiten eines Schwellenwertes austauschen gegen stylered.


Bitte melde dich, falls ich mich undeutlich ausgedrückt habe.

Danke sehr !!
 
Ich glaub, das war verständlich :)

Hier mal nen Beispiel:

Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
String.prototype.cf=function()
{
  var r=this.replace(/,/,'.');
  if(isNaN(r))r=parseInt(r,10);  
  if(isNaN(r))r=0;
  return new Number(r);
}


fx=function(args)
{
  for(var k in args)
  {
    try{
        var t=document.getElementById(k);
            if(args[k].max.cf()<t.firstChild.data.cf())
            {
              t.className=args[k].class
            }
        
       }catch(e){}
  }
}

window.onload=function()
{
  fx(
      {
        'pos-n1d0':{'max':'9,3','class':'stylered'},
        'pos-n1d1':{'max':'20,3','class':'stylered'},
        'pos-n1a0':{'max':'29','class':'stylewhite'},
        'pos-n1a1':{'max':'40','class':'stylered'}        
      }
    );
}
//-->
</script>
<style type="text/css">
<!--
div{float:left;border:1px dotted #c1c1c1;padding:3px;margin:3px;}
.styleblack{color:black}
.stylered{color:red}
.stylewhite{background-color:black;color:white}
-->
</style>
</head>
<body>
<div class="styleblack" id="pos-n1d0">10</div>
<div class="styleblack" id="pos-n1d1">20,3</div>
<div class="styleblack" id="pos-n1a0">30</div>
<div class="styleblack" id="pos-n1a1">40</div>
</body>
</html>

Kurze Erläuterung, was was ist:

Code: 
String.prototype.cf=function()
{
  var r=this.replace(/,/,'.');
  if(isNaN(r))r=parseInt(r,10);  
  if(isNaN(r))r=0;
  return new Number(r);
}
...das muss dich nicht gross interessieren. Du bekommst ja, so scheint es, Fliesskommazahlen geliefert, in denen das Komma als Separator dient....JS verwendet da aber einen Punkt. Das dient also nur, aus diesem Komma einen Punkt zu machen, damit JS ordentlich vergleichen kann.

Code: 
fx=function(args)
{
  for(var k in args)
  {
    try{
        var t=document.getElementById(k);
            if(args[k].max.cf()<t.firstChild.data.cf())
            {
              t.className=args[k].class
            }
        
       }catch(e){}
  }
}
...das ist die Funktion, sie macht halt das, was du brauchst :)

Code: 
window.onload=function()
{
  fx(
      {
        'pos-n1d0':{'max':'9,3','class':'stylered'},
        'pos-n1d1':{'max':'20,3','class':'stylered'},
        'pos-n1a0':{'max':'29','class':'stylewhite'},
        'pos-n1a1':{'max':'40','class':'stylered'}        
      }
    );
}
...das ist der Funktionsaufruf.
Übergeben wird ein Objekt. Ich weiss jetzt nicht, inwiefern du mit der Objekt-Notation in JS vertraut bist, kurze Erklärung dazu:

Code: 
{
        'pos-n1d0':{'max':'9,3','class':'stylered'},
        'pos-n1d1':{'max':'20,3','class':'stylered'},
        'pos-n1a0':{'max':'29','class':'stylewhite'},
        'pos-n1a1':{'max':'40','class':'stylered'}        
      }
..das ist das Objekt.
Es enthält 4 sogen. Member, deren Name ist identisch mit der ID des betreffenden Elementes im HTML-Code.
Die Eigenschaften dieser Member sind jeweils der Maximalwert, mit dem verglichen wird, und der Klassenname, gegen den ausgetauscht werden soll, wenn der Wert überschritten wird.

Du kannst da so viele "Member" hineinpacken, wie du brauchst, achte nur darauf, hinter jedem ein Komma zu notieren(ausser dem letzten)
Aber ich glaub, das kriegst du schon hin, wenn nicht, frag nach :)

BTW: Farben sind schön, es wäre aber bspw. auch machbar, einen Ton abzuspielen, wenn ein Wert überschritten wird...falls Bedarf besteht;)
 
Super!

G A N Z H E R Z L I C H E N D A N K ! ! ! !

Ich arbeite es gerade ein - teilweise tut es schon.

Ich melde mich nochmal ( auch wenn ich´s nicht ganz zu laufen bekommen sollte ;-) )

Viele Grüße, und nochmlas: Danke!!

Gruß Thomas


zur Beeware: Soll ich Dir ein Bier senden oder lieber eines auf Dein Wohl trinken?
 
Hallo Sven,

Dein Script funktioniert nun auch mit den sich ständig ändernden Daten aus meiner Heizungsanlage sehr gut. Danke für die schnelle Hilfe.

Ich trau mich´s kaum zu fragen:

Geht das auch mit Text?

Hintergrund:

Die analogen Messwerte bekomme ich als Zahl mit Dezimalkomma geliefert - da tut ja nun alles.
Aber die digitalen Werte erscheinen bei mir als EIN oder AUS und leider nicht als 0 oder 1.

Das bedeutet bei diesen Textwerten sollte das Script sowas tun können wie:

If { der aktuelle Wert der Variablen $n1d1 = "EIN" } THEN { schreibe EIN mit styleblack hin } ELSE { schreibe das Wort "Störung"mit stylered an die Position hin }

Wobei ich wieder gerne der Funktion den Variablennamen, den Vergleichsstring und den Notfalltext per kleiner Tabelle übergeben will. ( wie Du das mit den Temperaturen und deren Maximum gemacht hast )
Denn dann kann ich steuern, ob ich EIN oder AUS als kritisch dargestellt haben will und was dann im Notfall zu lesen ist.


Falls du diese Nuss knacken willst maile ich dir eine Flasche Rotkäppchen aus dem Schwarzwald.

Wenn nicht: dann hast Du Dir trotzdem einen ruhigen Sonntagabend wohl verdient. :rolleyes:

Gruß Thomas
 
Das geht auch,

Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
String.prototype.cf=function()
{
  var r=this.replace(/,/,'.');
  if(isNaN(r))r=parseInt(r,10);  
  if(isNaN(r))r=0;
  return new Number(r);
}


fx=function(args)
{
  for(var k in args)
  {
    try{
        var t=document.getElementById(k);
        switch(args[k].type)
        {
          case 'd':
            if(args[k].max.cf()<t.firstChild.data.cf())
            {
              t.className=args[k].cls;
            }
           break;
          
          case 'a':
            var e=(t.firstChild.data!=args[k].msg[0])?1:0;
                t.firstChild.data=args[k].msg[e];
                if(e)t.className=args[k].cls;
           break;
          
        }        
       }catch(err){alert(err.description)}
  }
}

window.onload=function()
{
  fx(
      {
        'pos-n1d0':{'type':'d','cls':'stylered','max':'9,3'},   
        'pos-n1d1':{'type':'d','cls':'stylered','max':'20,3'},   
        'pos-n1d2':{'type':'d','cls':'stylered','max':'29'},   
        'pos-n1d3':{'type':'d','cls':'stylered','max':'40'},   
        'pos-n1a0':{'type':'a','cls':'stylered','msg':['EIN','Störung']},   
        'pos-n1a1':{'type':'a','cls':'stylered','msg':['EIN','Störung']},   
        'pos-n1a2':{'type':'a','cls':'stylered','msg':['EIN','Störung']}   
      }
    );
}
//-->
</script>
<style type="text/css">
<!--
div{float:left;border:1px dotted #c1c1c1;padding:3px;margin:3px;}
.styleblack{color:black}
.stylered{color:red}
-->
</style>
</head>
<body>
<div class="styleblack" id="pos-n1d0">10</div>
<div class="styleblack" id="pos-n1d1">20</div>
<div class="styleblack" id="pos-n1d2">30</div>
<div class="styleblack" id="pos-n1d3">31</div>
<div class="styleblack" id="pos-n1a0">EIN</div>
<div class="styleblack" id="pos-n1a1">AUS</div>
<div class="styleblack" id="pos-n1a2">EIN</div>
</body>
</html>

Beachte die Änderungen des Aufbaus der Objekte.
Aus class ist cls geworden(das Wort class ist in JS reserviert und könnte in einigen Browser Probleme verursachen)

Zusätzlich gibt es "type", "d" für digital, "a" für "analog"
Bei dem type a gebe bei msg die beiden Wörter ein, die dort angezeigt werden sollen, wobei das 1. dem Soll-Zusatnd entspricht(darauf wird geprüft) und das 2. das Wort ist, gegen das ausgetauscht wird, wenn der Soll-Zustand nicht gegeben ist.

betreffs Beerware:
Bier auf mein Wohl passt schon....ein Rothaus natürlich, vorzugsweise ein Zäpfle :)
 
Hallo Sven,

ich hab´s schon eingebaut und es sieht sehr gut aus.

Nun kommen hoffentlich ganz viele Störungen, die ich dann auf den ersten Blick erkenne... ( ich schreib dir dann bei jeder Störung eine ausführliche Email ;-) )

Große Verbeugung vor dem Meister


Grüße von Thomas
 
Hallo Sven,

die Reglersoftware, die ich verwende ist in einer neuen Release erschienen. Bisher war die Visualisierung der Regelungstechnik ein einfaches HTML-Dokument ohne JavaScript.
Mit deiner Hilfe hatte ich ein paar nützliche Zusatzinformationen mit JavaScript hinzufügen können ( Siehe unseren Schriftwechsel oben ).

In der neuen Version haben die Jungs ihrerseits die HTML-Seite mit JAVAScript versehen. Vorteil: die Hintergrundgrafik muss nun nicht immer wieder neu geladen werden, sondern es werden nur
die Messwerte alle 60 Sekunden aktualisiert. Das macht Sinn, da der Regler nebenher ein extrem langsamer Webserver ist und sich die Hintergrundgrafik nie ändert.

Leider verstehe ich nun nicht mehr, wie ich deine JavaScripts in die neue HTMAL-Seite einfügen kann, da ich nicht verstehe welche Teile des Programmcodes künftig noch aktualisiert werden.

Kannst Du mir eventuell nochmals helfen?

Dazu müsste ich dir drei kleine HTML-Codes ( inkl. JavaScript ) senden:
1. Die alte einfache Version des Onlineschemas.
2. Die Version, die ich mit deiner Hilfe aufgepeppt habe
3. Die neue einfache Version des Onlineschemas, die nur noch die Messdaten aber nicht mehr die Hintergrundgrafik nachlädt - in der aber deine Zusatzfunktionen fehlen.

A.) Kannst / Willst du mir helfen beide Codes zusammen zufügen?
B.) IF A.)=Ja THEN "Wie kann ich dir die Codes senden?

Voerstmal recht herzlichen Dank!

Grüße, Thomas
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück