Black background when loading webvisu

CODESYS
1

Can you tell me how to set a black background when loading a webvisu page instead of a white one?
I think this parameter should be somewhere.

2

I mean this white background.
Maybe there are other options for displaying in the browser?

2024-03-22_16-07-31
2024-03-22_16-07-31752Ă—663 26.8 KB

3

hello,
I think this is made by codesys iself and can’t be changed.
Maybe you can try to ask on codesysforge.

1 Like
4

Hi,
I am not aware of any setting for this in the CODESYS IDE. However, you could edit the webvisu.htm afterwards. But if a program is downloaded again, the file is overwritten then.

image
image936Ă—378 26.7 KB

image
image1064Ă—903 82.5 KB

2 Likes
5

That’s an interesting solution, I think I might be good with one of those. I’ve noticed I have a different approach to structure.

2024-04-03_16-43-04
2024-04-03_16-43-041095Ă—227 9.38 KB

I added a line:
canvas id=“foreground” width=“1280” height=“1024” style=“position: absolute; background: black; left: 0px; top: 0px;”></canvas
Once the page loads, the text runs off in different directions. Have you ever noticed anything like that?

6

Hi,
Has a program with visualisation already been loaded on your PLC? If that is the case, I would have expected it to look different.

7

Yes the program is loaded, it’s code and working visualization.

8

I’ve just realised that this article doesn’t say anything about the FW used. My last screenshot is with FW26. Which FW are you using?

9

I’m using eCockpit, 750-8202 (FW 22).
In the future, on new PLCs I will switch to 26 and Codesys 19.2

10

Tell me, do you know the solution to the white background for firmware version 22?

11

Hi,
of course, this is all just a workaround for a function that does not exist in the IDE…


<body onload="new Webvisu('background', 'foreground', true, false)">
	<div id="cdsRoot" style="position: absolute; left: 0px; top: 0px; width: 700px; height:500px; overflow:hidden">
		<canvas id="background" width="700" height="500" style="position: absolute; left: 0px; top: 0px;">Webvisu not supported due to missing browser feature HTML5-Canvas</canvas>
		<canvas id="foreground" width="700" height="500" style="position: absolute; background: black; left: 0px; top: 0px;">Webvisu not supported due to missing browser feature HTML5-Canvas</canvas>
	</div>
</body>

image
image1677Ă—276 7.79 KB

12

looks like this while loading:

image
image1260Ă—643 9.75 KB

In the IDE, I selected a colour as the background, as otherwise everything was overlaid with the change

13

I already did this, but after loading everything immediately floats for me. All objects are shifted to the upper left corner.
I took screenshots for clarity.

Ex.1
Ex.1929Ă—577 57.2 KB

Ex.2
Ex.2876Ă—515 32.8 KB

14

Are the 6 lines in your file really exactly the same as in my last post?
Perhaps switch off the Client Animations setting in the Visualization Manager.

15

Example of my file last important lines:

</head>
<body onload="new Webvisu('background', 'foreground', true, false)">
	<div id="cdsRoot" style="position: absolute; left: 0px; top: 0px; width: 1280px; height:1024px; overflow:hidden">
		<canvas id="background" width="1280" height="1024" style="position: absolute; left: 0px; top: 0px;">Webvisu not supported due to missing browser feature HTML5-Canvas</canvas>
		<canvas id="foreground" width="1280" height="1024" style="position: absolute; background: black; left: 0px; top: 0px;">Webvisu not supported due to missing browser feature HTML5-Canvas</canvas>
	</div>
</body>
</html>

Are we talking about this tick?
2024-04-19_16-49-58

1 Like
16

The checkbox has changed position, and now everything is static.
A new problem has emerged. Now some elements are black.
I thought I could change the color from white to another color, but as this picture shows, the color change has no effect.
Initially:
webvisu_1
After editing:
webvisu_2