Create overlay showing boolean values

Hello,

I am currently creating an HMI for our robotic palletizer.
I would like to display some sensor data in the 'main' screen where each box displays a boolean value. Currently we do this with a codesys web visualization this way:

Each orange box displays an boolean value (orange means true, white means false).

Now I want to recreate this screen in web-IQ.

I tried using an image changer and setting an absolute position. This works, however it gives some problem when the image is scaled up/down because to absolute position is not on the right position anymore.

Is there a better or easier way to do this in webIQ?

Thank you in advance!

WebIQ uses responsive layout extensively and it is also the default. However, responsive layout on the web does not mean "scaling proportionally", but instead different ways of resizing and wrapping blocks of content on a website - see our responsive demo for example and resize the browser window in the different areas of the demo: https://demo.smart-hmi.com/demo-responsive/

This demo also shows you some common examples on how to solve this optimized for UX, e.g. using numbers in the image and adding the detailed content below.

To position images as you wish with different breakpoints (i.e. specific widths where the display changes) you can use device-specific styling in WebIQ which is based on common device widths.