# Black background when loading webvisu

**URL:** <https://www.wago.community/t/black-background-when-loading-webvisu/738>\
**Category:** CODESYS\
**Created:** [January 9, 2024, 3:36pm UTC](https://www.wago.community/t/black-background-when-loading-webvisu/738 "2024-01-09T15:36:29Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![TomasD](https://sea2.discourse-cdn.com/flex016/user_avatar/www.wago.community/tomasd/32/2042_2.png) [@TomasD](https://www.wago.community/u/TomasD)\
**Post date:** [January 9, 2024, 3:36pm UTC](https://www.wago.community/t/black-background-when-loading-webvisu/738/1 "2024-01-09T15:36:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TomasD](https://sea2.discourse-cdn.com/flex016/user_avatar/www.wago.community/tomasd/32/2042_2.png) [@TomasD](https://www.wago.community/u/TomasD)\
**Post date:** [March 22, 2024, 1:08pm UTC](https://www.wago.community/t/black-background-when-loading-webvisu/738/2 "2024-03-22T13:08:48Z")

</div>

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

 ![2024-03-22_16-07-31](https://us1.discourse-cdn.com/flex016/uploads/wago/original/1X/de0b8f9e8a61de19083ef89d4b8a59d772f519cd.png)

---

<div class="post-metadata">

**Author:** ![WagoIcard](https://sea2.discourse-cdn.com/flex016/user_avatar/www.wago.community/wagoicard/32/1508_2.png) [@WagoIcard](https://www.wago.community/u/WagoIcard)\
**Post date:** [March 27, 2024, 8:57am UTC](https://www.wago.community/t/black-background-when-loading-webvisu/738/3 "2024-03-27T08:57:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![PatrickR](https://sea2.discourse-cdn.com/flex016/user_avatar/www.wago.community/patrickr/32/262_2.png) [@PatrickR](https://www.wago.community/u/PatrickR)\
**Post date:** [April 2, 2024, 7:10am UTC](https://www.wago.community/t/black-background-when-loading-webvisu/738/4 "2024-04-02T07:10:46Z")

</div>

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](https://us1.discourse-cdn.com/flex016/uploads/wago/original/1X/e067b207763d7a3fab2ccdd19e0c31c90778a660.png)

 ![image](https://us1.discourse-cdn.com/flex016/uploads/wago/original/1X/ebcbca2431fc92dcb9853755b36a25d9aa21ce91.png)

---

<div class="post-metadata">

**Author:** ![TomasD](https://sea2.discourse-cdn.com/flex016/user_avatar/www.wago.community/tomasd/32/2042_2.png) [@TomasD](https://www.wago.community/u/TomasD)\
**Post date:** [April 3, 2024, 1:50pm UTC](https://www.wago.community/t/black-background-when-loading-webvisu/738/5 "2024-04-03T13:50:17Z")

</div>

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](https://us1.discourse-cdn.com/flex016/uploads/wago/original/1X/0c76e8d4ad8ff464bff0c55ff2915335dc6fbf4c.png)  
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?

---

<div class="post-metadata">

**Author:** ![PatrickR](https://sea2.discourse-cdn.com/flex016/user_avatar/www.wago.community/patrickr/32/262_2.png) [@PatrickR](https://www.wago.community/u/PatrickR)\
**Post date:** [April 4, 2024, 5:12am UTC](https://www.wago.community/t/black-background-when-loading-webvisu/738/6 "2024-04-04T05:12:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TomasD](https://sea2.discourse-cdn.com/flex016/user_avatar/www.wago.community/tomasd/32/2042_2.png) [@TomasD](https://www.wago.community/u/TomasD)\
**Post date:** [April 4, 2024, 1:07pm UTC](https://www.wago.community/t/black-background-when-loading-webvisu/738/7 "2024-04-04T13:07:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![PatrickR](https://sea2.discourse-cdn.com/flex016/user_avatar/www.wago.community/patrickr/32/262_2.png) [@PatrickR](https://www.wago.community/u/PatrickR)\
**Post date:** [April 4, 2024, 2:04pm UTC](https://www.wago.community/t/black-background-when-loading-webvisu/738/8 "2024-04-04T14:04:05Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![TomasD](https://sea2.discourse-cdn.com/flex016/user_avatar/www.wago.community/tomasd/32/2042_2.png) [@TomasD](https://www.wago.community/u/TomasD)\
**Post date:** [April 5, 2024, 9:05am UTC](https://www.wago.community/t/black-background-when-loading-webvisu/738/9 "2024-04-05T09:05:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TomasD](https://sea2.discourse-cdn.com/flex016/user_avatar/www.wago.community/tomasd/32/2042_2.png) [@TomasD](https://www.wago.community/u/TomasD)\
**Post date:** [April 17, 2024, 12:06pm UTC](https://www.wago.community/t/black-background-when-loading-webvisu/738/10 "2024-04-17T12:06:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![PatrickR](https://sea2.discourse-cdn.com/flex016/user_avatar/www.wago.community/patrickr/32/262_2.png) [@PatrickR](https://www.wago.community/u/PatrickR)\
**Post date:** [April 18, 2024, 8:01am UTC](https://www.wago.community/t/black-background-when-loading-webvisu/738/11 "2024-04-18T08:01:52Z")

</div>

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

```auto

<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](https://us1.discourse-cdn.com/flex016/uploads/wago/original/1X/ff1db2cbbe783945f122c1d70d86a24c5908ac68.png)

---

<div class="post-metadata">

**Author:** ![PatrickR](https://sea2.discourse-cdn.com/flex016/user_avatar/www.wago.community/patrickr/32/262_2.png) [@PatrickR](https://www.wago.community/u/PatrickR)\
**Post date:** [April 18, 2024, 8:03am UTC](https://www.wago.community/t/black-background-when-loading-webvisu/738/12 "2024-04-18T08:03:48Z")

</div>

looks like this while loading:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/wago/original/1X/83ba2c862e1eaf03ce254b590e3514eb3f47f77c.png)

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

---

<div class="post-metadata">

**Author:** ![TomasD](https://sea2.discourse-cdn.com/flex016/user_avatar/www.wago.community/tomasd/32/2042_2.png) [@TomasD](https://www.wago.community/u/TomasD)\
**Post date:** [April 18, 2024, 1:15pm UTC](https://www.wago.community/t/black-background-when-loading-webvisu/738/13 "2024-04-18T13:15:59Z")

</div>

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](https://us1.discourse-cdn.com/flex016/uploads/wago/original/1X/16d60b6f409764eea9790d05683a91d6554fa0c7.png)  
 ![Ex.2](https://us1.discourse-cdn.com/flex016/uploads/wago/original/1X/d887eb88b0a120747357a4beb6df614231c4513d.png)

---

<div class="post-metadata">

**Author:** ![PatrickR](https://sea2.discourse-cdn.com/flex016/user_avatar/www.wago.community/patrickr/32/262_2.png) [@PatrickR](https://www.wago.community/u/PatrickR)\
**Post date:** [April 19, 2024, 11:54am UTC](https://www.wago.community/t/black-background-when-loading-webvisu/738/14 "2024-04-19T11:54:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TomasD](https://sea2.discourse-cdn.com/flex016/user_avatar/www.wago.community/tomasd/32/2042_2.png) [@TomasD](https://www.wago.community/u/TomasD)\
**Post date:** [April 19, 2024, 1:51pm UTC](https://www.wago.community/t/black-background-when-loading-webvisu/738/15 "2024-04-19T13:51:12Z")

</div>

Example of my file last important lines:

```auto
</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](https://us1.discourse-cdn.com/flex016/uploads/wago/original/1X/1625cb7904653eb4f21ab731c1fc598c447d7c9b.png)

---

<div class="post-metadata">

**Author:** ![TomasD](https://sea2.discourse-cdn.com/flex016/user_avatar/www.wago.community/tomasd/32/2042_2.png) [@TomasD](https://www.wago.community/u/TomasD)\
**Post date:** [April 23, 2024, 10:20am UTC](https://www.wago.community/t/black-background-when-loading-webvisu/738/16 "2024-04-23T10:20:38Z")

</div>

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](https://us1.discourse-cdn.com/flex016/uploads/wago/original/1X/5d49f87b61f2981cedd1d82e27b4e17d60eb7620.png)  
After editing:  
 ![webvisu_2](https://us1.discourse-cdn.com/flex016/uploads/wago/original/1X/288a781b49c61c39c266e5dfba9221f99643e675.png)