Design html5 responsive page

Displays, Symbols, Charts
#1

Hi everyone
I’m new to factory studio.
My most projects and client ask for pure html5 with responsive design. So I wonder how FS do html5 part. Does FS just convert all object to svg and render it and put them in DOM or is it possible to design web pages responsive and use css3 code for style?
For example I used to work with indusoft which has very poor and laggy experience when access via html5 because indusoft just render page and put it as background with some html5 components.
I looking sometimes like pure html5 design in scada package. Like perspective module from ignition.
Thanks for any help and feedback.

1 Like
#2

FactoryStudio runtime has a pure HTML5 design. The development environment is the same for HTML5 and .NET.

This way it is easier for the users to have only one environment, without the necessity to learn another product even when the runtime is using a different code language. So, the controls that you see in the engineering environment are .NET even for HTML5. They are replaced automatically by pure HTML5 objects in Runtime (browsers).

Also, each display has a CodeBehind that runs on it, and this CodeBehind uses JavaScript language in the HTML5 displays. Then, you can customize and create the HTLM5 pure code, add external HTML5 controls with CSS, and manipulate them.

1 Like
#3

Hi @Nader, thank you for your question and let us know if you got what you needed answered.

#4

Hello
Thanks for the answer. What about responsive design?
As the IDE use .NET how can I define the responsive roles?
Also if in a button I write C# code in runtime with html5 how this code is handle? May it run at server aside and send result to client.

1 Like
#5

The .NET pages are very similar with HTML5. To create a responsive design you can define some basic rules (common to both technologies) as defining the anchors or define the stretch display behavior.

Also, when you are using Dashboard pages, this page is smart to know the container size and change the layout when you have big differences between width and height.

About the language, the CodeBehind of .NET page is C# or VB.Net and HTML5 page is JavaScript code. However, you can call .NET methods in Server side from the HTML5 client.

1 Like