Text fields
A text field can be used to display a single value. However, structures can also be displayed. These are usually inappropriately formatted and require appropriate formatting via HTML/JavaScript/CSS.
Adding a text field
- 1. Open the server configuration page.
- 2. Go to the configuration of TcHmiReporting.
- The General tab opens.
- 3. Open the path or, if not available, create the path Reports/{report name}/text fields
- 4. Click on Add to create a new text field and enter the following values:
Name: Name of the text field (taken as default if no title is active).
Symbol: Symbol from which the data is read.
Filter (optional): Filter on specific values.
Limit (optional): Maximum number of data to be displayed (number of rows).
Sort by (optional): Specifies a sort order within the table.
Title (optional): Heading of the text field.
Value (optional): Editor for adding HTML code (without an entry, the value from the symbol is displayed).
- The value is read from the symbol and displayed.
Sample HTML code (add text to symbol value)
In the first step, the element in which the JavaScript code is executed is retrieved. This is required to write the result in the appropriate place. The placeholder is integrated with {value}. In this case, it is a string, which is why it is in quotation marks. In the sample, the code block at the end is overwritten by the result of the function.
<script>
var scriptTag = document.getElementsByTagName('script');
var parent = scriptTag[scriptTag.length - 1].parentNode;
var valueFull = "{value}";
parent.innerHTML = valueFull + " Hello World!";
</script>
Sample HTML code (temperature monitoring)
The required HTML objects are embedded directly in this sample. Styles are used to format the appearance accordingly. In the Script area, JavaScript is used to search for the required HTML objects in the first step. The current value is then evaluated. The JavaScript switches the color of the integrated SVG and the value is output to two decimal places with a unit.
The value read out here is an LREAL from the PLC.
<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>