Let's say we have an industrial plant controlled by a PLC programmed with CODESYS V3 and we want to develop a Web Visualisation that works as the SCADA/HMI for the plant.
It's desirable to develop this visualisation in a way that allows the proper control of the plant using interchangeably a desktop PC, a _ or a smartphone.
To achieve that is necessary to chose a different user interface philosophy for each category of devices in order to make the use of the SCADA as smooth as possible for each device.
Once we have this 3 user interfaces designed and developed, we need to present one of them to the user depending on the device used to access to the PLC's web server.
And instruct the user to use each of them depending on the device of choice.
2) Automate this selection of user interface through a routine in the PLC.
Obviously I would prefer to use the second option. The problem is that I haven't been able to figure it out yet in a satisfactory way.
I based my attempts in 2 sources:
- The ["Responsive Design Example"](https://store.codesys.com/responsive-design-example.html) from CODESYS Store
- The ["Sophisticated visualization with Responsive Design"](http://www.sks.fi/www/images/03_CUC2016_Sophisticated%20Visualization%20with%20Responsive%20Design_en.pdf/$FILE/03_CUC2016_Sophisticated%20Visualization%20with%20Responsive%20Design_en.pdf) conference give by 3S-Smart
The example it's not functional or at least I haven't been able to make it work as expected.
However, tinkering with the methods mentioned in that 2 sources I managed to list all the clients connected to the Web Visualisation and to access to their VisuElems.VisuStructClientData structure.
Within this data I've only found one thing useful: the resolution of the client.
With this I can select the user interface depending on the resolution of the device screen (using a philosophy similar to the Store example). But this is useless giving that resolution is not necessarily related with screen size. For example, I've tried with these devices:
- Toshiba Laptop: 1366 x 768 - 16.3"
- iPad Air: 1536 x 2048 - 9.4"
- BQ Aquaris E5 (Smartphone): 1280 x 720 - 5"
I mean, I also need the pixel density in orden to determine the screen size or getting the screen size directly.
So, do you know a way of getting this data from CODESYS?
If you think there is a better way to do this I would be pleased to read it too.
Thank you in advance for your help.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Hi,
Now, there is a way to do responsive design.
You can find a Responsive Design Example in the CODESYS Store : ;https://store.codesys.com/responsive-design-example.html
BR
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Let's give some context:
Let's say we have an industrial plant controlled by a PLC programmed with CODESYS V3 and we want to develop a Web Visualisation that works as the SCADA/HMI for the plant.
It's desirable to develop this visualisation in a way that allows the proper control of the plant using interchangeably a desktop PC, a _ or a smartphone.
To achieve that is necessary to chose a different user interface philosophy for each category of devices in order to make the use of the SCADA as smooth as possible for each device.
Once we have this 3 user interfaces designed and developed, we need to present one of them to the user depending on the device used to access to the PLC's web server.
I see two ways of implement this:
1) Provide 3 differents urls, for example:
And instruct the user to use each of them depending on the device of choice.
2) Automate this selection of user interface through a routine in the PLC.
Obviously I would prefer to use the second option. The problem is that I haven't been able to figure it out yet in a satisfactory way.
I based my attempts in 2 sources:
The example it's not functional or at least I haven't been able to make it work as expected.
However, tinkering with the methods mentioned in that 2 sources I managed to list all the clients connected to the Web Visualisation and to access to their VisuElems.VisuStructClientData structure.
Within this data I've only found one thing useful: the resolution of the client.
With this I can select the user interface depending on the resolution of the device screen (using a philosophy similar to the Store example). But this is useless giving that resolution is not necessarily related with screen size. For example, I've tried with these devices:
I mean, I also need the pixel density in orden to determine the screen size or getting the screen size directly.
So, do you know a way of getting this data from CODESYS?
If you think there is a better way to do this I would be pleased to read it too.
Thank you in advance for your help.
some years of silence... the same problem.
Hi,
Now, there is a way to do responsive design.
You can find a Responsive Design Example in the CODESYS Store : ;https://store.codesys.com/responsive-design-example.html
BR
This example uses only client's resolution as above mentioned. But for now the idea is not working nice:
Now smartphones have the resolution bigger than 24" monitors.