How to build a visualization with Responsive Design?

pedro-ant
2017-10-20
2020-06-26
  • pedro-ant - 2017-10-20

    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.

    IMG: Bild

     
  • asnik - 2020-06-26

    some years of silence... the same problem.

     
  • JAPIB

    JAPIB - 2020-06-26

    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

     
  • asnik - 2020-06-26

    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.