How to build a visualization with Responsive Design?

2020-06-26T21:09:41.572000Z

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.

How to build a visualization with Responsive Design?

2020-06-26T19:24:51.726000Z

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

How to build a visualization with Responsive Design?

2020-06-26T13:39:37.133000Z

some years of silence... the same problem.

How to build a visualization with Responsive Design?

2020-02-27T17:54:20.353000Z

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:

      - 192.168.1.110:8080/webvisu_desktop.htm

      - 192.168.1.110:8080/_.htm

      - 192.168.1.110:8080/webvisu_smartphone.htm

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.

Recent posts to How to build a visualization with Responsive Design?

How to build a visualization with Responsive Design?

How to build a visualization with Responsive Design?

How to build a visualization with Responsive Design?

How to build a visualization with Responsive Design?