CODESYS Responsive Design Example - Article no.000069

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.