Insert or design a HMI

[ingdesarr1]

Question

Good morning. In the moment, I want to do a HMI in my web app. (HMI is a Human-Machine Interface). It's used in industrial processes to show data about sensor or visual indicators, and in some cases, send actions to the process, like turn on a motor or something like that. I want to know if this is possible to realize, like, put some images and elements in any part of the space to show a industrial process, and can show data in the same.

Thanks

Code sample

No response

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[FeodorFitsner]

Could you drop links to some examples? Are there any existing Flutter widgets/libraries for that? Is it something that can be done with Canvas control?

[ingdesarr1]

In this video, explains what is a HMI, and it's the idea that I want to do: https://www.youtube.com/watch?v=M3RZKW38XA8
In this video, show a HMI interface of a car, design in flutter: https://www.youtube.com/watch?v=7ND8CzsYrXk

I don't know if it's possible do it with Canvas control. I'm reading the doc, and not see if it's possible insert a image, o an element with animation, like a GIF, and if it's possible overlap some elements, like a text to show a value.

Thanks

[ingdesarr1]

I found a way to do that but is not perfect. I generate a Stack, and inside I put a Canvas, so, I put the images in the Stack and I can insert text, buttons and other elements overlapping, but I have a problem, and I don't know if exist a solution. I insert the images with a specific coordinate, but if the resolutión of the page change, the image stay in the same position, and i want that the objects change with the resolution. Is there any way to do that?

[felocru]

I am also interested in this. I would like to know if with Canvas you can set events, I haven't found any documentation or example with that.