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 ["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.
some years of silence... the same problem.
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
This example uses only client's resolution as above mentioned. But for now the idea is not working nice:
IsSmartphone := FALSE;
IF (_clientSize.iWidth <= 380 AND _clientSize.iHeight <= 600) THEN...
Now smartphones have the resolution bigger than 24" monitors.
Log in to post a comment.