Download project

Responsive Design Example

This example project shows how the design of visualizations can be adapted for
various devices like monitors, tablets or smartphones.

Product description

The example project concerns "Responsive Design".
The visualization in the project loads different visualizations depending on the screen size of the calling device. Thus it is possible to optimize the design for monitors, tablets and smartphones.

More information

The program PLC_PRG registers the function block ClientManagerListener at the
global ClientManager. The visualization is set in the function SetStartVisu
depending on the screen size of the client. This function is called by the method
StartVisualizationSet of the ClientManagerListener.

The example project can be tested with a web browser by changing the size of the browser
and reloading the page.

System requirements and restrictions

System requirements and restrictions Info
Programming System CODESYS Development System Version or higher
Required Accessories CODESYS Visualization

Screenshot thumbnail
View: Monitor
Screenshot thumbnail
View: Tablet
Screenshot thumbnail
View: Smartphone

Download other versions

Version Requirements Download CODESYS Development System Version or higher