Hi,
I would change a class in the ui template node dynamically? Is that somehow possible? I tried it with several options. but i can't get the solution. I'm not firm with HTML.
to my data input, I have 15 inputs with "item-gridPass", "item-gridFail" and 15 corresponding qr codes. My 15 item grids "should" change the class and the QR-codes shoult displayed in the grid (easy thing)
My Payload for example for the first input of 15
PCB1: object
status: "item-gridFail"
qrcontent: "QR-Code not detected"
My code:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 5px;
justify-items: center;
align-items: center;
}
.grid-itemPass {
background: lime;
text-align: center;
border: black 5px solid;
width: 100px;
height: 100px;
}
.grid-itemFail {
background: red;
text-align: center;
border: black 5px solid;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="{{PCB1.status}}">{{PCB1.qrcontent}}</div><!-- thats what i wanted to show you-->
<div class="grid-item1">2</div>
<div class="grid-item1">3</div>
<div class="grid-item1">4</div>
<div class="grid-item1">5</div>
</div>
<div class="grid-container">
<div class="grid-item1">1</div>
<div class="grid-item1">2</div>
<div class="grid-item1">3</div>
<div class="grid-item1">4</div>
<div class="grid-item1">5</div>
</div>
<div class="grid-container">
<div class="grid-item1">1</div>
<div class="grid-item1">2</div>
<div class="grid-item1">3</div>
<div class="grid-item1">4</div>
<div class="grid-item1">5</div>
</div>
</body>
</html>
I hope you can help me with my Problem
best regards
Freshtronic
