Textfelder
Durch ein Textfeld kann ein einzelner Wert zur Anzeige gebracht werden. Es lassen sich aber auch Strukturen anzeigen. Diese sind meist unpassend formatiert und benötigen über HTML/JavaScript/CSS eine entsprechende Formatierung.
Hinzufügen eines Textfeldes
- 1. Öffnen Sie die Server Konfigurationsseite.
- 2. Gehen Sie auf die Konfiguration vom TcHmiReporting.
- Es öffnet sich der Reiter Allgemein.
- 3. Öffnen Sie den Pfad oder (sofern nicht vorhanden) erstellen Sie den Pfad Reports/{Reportname}/Textfelder
- 4. Klicken Sie auf Hinzufügen, um ein neues Textfeld zu erstellen und geben Sie die folgenden Werte an:
Name: Name des Textfeldes (Wird als Default genommen sofern kein Titel aktiv).
Symbol: Symbol aus dem die Daten gelesen werden.
Filter (Optional): Filtern auf bestimmte Werte.
Limit (Optional): Anzahl der maximal anzuzeigenden Daten (Anzahl der Reihen).
Sortieren nach (Optional): Gibt eine Sortierreihenfolge innerhalb der Tabelle an.
Titel (Optional): Überschrift des Textfeldes.
Value (Optional): Editor zum Hinzufügen von HTML-Code (ohne Eintrag wird der Wert aus dem Symbol angezeigt).
- Der Wert wird aus dem Symbol gelesen und zur Anzeige gebracht.
Beispiel HTML-Code (Symbol Wert um Text erweitern)
Im ersten Schritt wird sich das Element geholt, in dem der JavaScript Code ausgeführt wird. Dies wird benötigt, um das Ergebnis an die passende Stelle zu schreiben. Mit {value} wird der Platzhalter eingebunden. In diesem Fall handelt es sich um einen String, weshalb es in Anführungszeichen steht. Im Beispiel wird der Codeblock am Ende durch das Ergebnis der Funktion überschrieben.
<script>
var scriptTag = document.getElementsByTagName('script');
var parent = scriptTag[scriptTag.length - 1].parentNode;
var valueFull = "{value}";
parent.innerHTML = valueFull + " Hello World!";
</script>
Beispiel HTML-Code (Temperatur Überwachung)
Die benötigten HTML-Objekte werden in diesem Beispiel direkt eingebettet. Über Styles werden die entsprechenden Formatierungen am Aussehen vorgenommen. Im Bereich Script werden mittels JavaScript im ersten Schritt die benötigten HTML-Objekte gesucht. Im Nachgang wird der aktuelle Wert ausgewertet. Durch das JavaScript wird die Farbe des integrierten SVGs umgeschaltet und der Wert auf zwei Nachkommastellen mit Einheit zur Ausgabe gebracht.
Bei dem hier ausgelesen Wert handelt es sich um ein LREAL aus der SPS.
<style>
.temperature {
width: 100%;
height: 100%;
display: flex;
}
.temperature-image {
height: 80px;
width: 80px;
}
.temperature-text {
display: flex;
align-items: center;
}
.temperature-text-value {
width: 200px;
font-size: larger;
font-weight: bold;
margin: 0;
color: lightslategrey;
}
.temperature-red {
--tchmi-icons-color: #EF0000;
}
.temperature-orange {
--tchmi-icons-color: #FFA500;
}
.temperature-green {
--tchmi-icons-color: #009940;
}
</style>
<div class="temperature">
<div class="temperature-image">
<svg class="temperature-svg" width="100%" height="100%" viewBox="0 0 80 80" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(30, 18)" fill="var(--tchmi-icons-color, #4c6374)">
<path
d="M9.4008,-0.0004 C12.1738,-0.0004 14.4298,2.2556 14.4298,5.0286 L14.4298,5.5766 L17.5298,5.5766 C17.8058,5.5766 18.0298,5.8006 18.0298,6.0766 C18.0298,6.3526 17.8058,6.5766 17.5298,6.5766 L14.4298,6.5766 L14.4298,10.1696 L17.5298,10.1696 C17.8058,10.1696 18.0298,10.3936 18.0298,10.6696 C18.0298,10.9456 17.8058,11.1696 17.5298,11.1696 L14.4298,11.1696 L14.4298,14.7626 L17.5298,14.7626 C17.8058,14.7626 18.0298,14.9866 18.0298,15.2626 C18.0298,15.5386 17.8058,15.7626 17.5298,15.7626 L14.4298,15.7626 L14.4298,19.3556 L17.5298,19.3556 C17.8058,19.3556 18.0298,19.5796 18.0298,19.8556 C18.0298,20.1316 17.8058,20.3556 17.5298,20.3556 L14.4298,20.3556 L14.4298,23.9486 L17.5298,23.9486 C17.8058,23.9486 18.0298,24.1726 18.0298,24.4486 C18.0298,24.7246 17.8058,24.9486 17.5298,24.9486 L14.4298,24.9486 L14.4298,28.1376 C16.3348,29.3776 17.7058,31.2466 18.3188,33.4556 C18.9848,35.8576 18.6758,38.3746 17.4488,40.5436 C15.7958,43.4656 12.6808,45.2806 9.3208,45.2806 C7.7198,45.2806 6.1338,44.8616 4.7338,44.0696 C0.2568,41.5366 -1.3252,35.8326 1.2078,31.3546 C1.9738,30.0016 3.0608,28.8666 4.3718,28.0446 L4.3718,5.0286 C4.3718,2.2556 6.6278,-0.0004 9.4008,-0.0004 Z M9.4008,1.9996 C7.7308,1.9996 6.3718,3.3586 6.3718,5.0286 L6.3718,28.6186 C6.3718,28.9856 6.1708,29.3236 5.8468,29.4986 C4.6308,30.1546 3.6288,31.1376 2.9488,32.3396 C0.9588,35.8576 2.2008,40.3386 5.7188,42.3286 C6.8188,42.9516 8.0648,43.2806 9.3208,43.2806 C11.9618,43.2806 14.4088,41.8546 15.7078,39.5586 C16.6718,37.8546 16.9148,35.8776 16.3918,33.9906 C15.8688,32.1036 14.6418,30.5336 12.9378,29.5696 C12.6238,29.3916 12.4298,29.0596 12.4298,28.6996 L12.4298,5.0286 C12.4298,3.3586 11.0718,1.9996 9.4008,1.9996 Z M9.3282,14.2621 C9.8802,14.2621 10.3282,14.7101 10.3282,15.2621 L10.3282,32.8361 C11.6172,33.2601 12.5572,34.4611 12.5572,35.8901 C12.5572,37.6711 11.1082,39.1191 9.3282,39.1191 C7.5482,39.1191 6.0992,37.6711 6.0992,35.8901 C6.0992,34.4611 7.0392,33.2601 8.3282,32.8361 L8.3282,15.2621 C8.3282,14.7101 8.7762,14.2621 9.3282,14.2621 Z M9.3282,34.6611 C8.6502,34.6611 8.0992,35.2131 8.0992,35.8901 C8.0992,36.5681 8.6502,37.1191 9.3282,37.1191 C10.0062,37.1191 10.5572,36.5681 10.5572,35.8901 C10.5572,35.2131 10.0062,34.6611 9.3282,34.6611 Z" />
</g>
</g>
</svg>
</div>
<div class="temperature-text">
<p class="temperature-text-value">
</p>
</div>
</div>
<script>
var elementTextValue = document.getElementsByClassName("temperature-text-value");
var elementSvg = document.getElementsByClassName("temperature-svg");
var value = {value};
if (elementSvg && value) {
elementSvg[0].classList.toggle("temperature-green", value < 10);
elementSvg[0].classList.toggle("temperature-orange", value >= 10 && value < 30);
elementSvg[0].classList.toggle("temperature-red", value >= 30);
}
if (elementTextValue && value) {
elementTextValue[0].innerHTML = value.toFixed(2) + " °C";
}
</script>
Weiterführende Informationen