On a view screen can you change the background of the screen?

The default is white and I need to change it to a gray.

If you are using viewON4, the easiest way to change the color of your background canvas is with JavaScript.

If you click on your project view on the left hand side and then go down the page and click on the actions tab.
Right click here and select JavaScript section.

Paste the following:
$(“body”).css(“background-color”, “ColorYouWant”);

You’ll have to get the HEX code of the color you want.
I googled this and found a lot of different colors here:
https://www.w3schools.com/colors/colors_names.asp

Why does this work?

viewON4 was updated to use HTML5.

ViewON essentially creates an HTML5 canvas to store the project items. Once compiled, this becomes like any other web page in that you can alter things using JavaScript.

By inserting ##$(“body”).css(“background-color”, “ColorYouWant”);## into the scripting section, we are essentially telling the page to change the background color on page load.

You are not limited to just colors as well! You can do animations, custom validation and more using viewon scripts.

For more information regarding the use of JavaScript in viewON4, please see the following document:
https://websupport.ewon.biz/sites/default/files/viewon4_support_guide.pdf

Thank you for that info. That was very helpful but can you confirm, does this update it on all views or just the one I add this script to?

This will only update the view you select.

You will need to update each view manually which allows you to use unique colors for each view if desired.

A post was split to a new topic: Updating background by UID, ViewON

Hi Joe,

This works great, but when I go to test the animation, I only see the background color when I display the ‘default’ view.

Any other selection (Galaxy/iPad/iPhone) still shows a white background, which is problematic because I want to use a dark background and white text.

Any ideas? Thanks!

@acj

You can change your view in the view properties.

image
image

When I do that, the java code is still there, but the other views still show white background. Maybe i’m missing something?

@acj

You are loading this under test animations not on the actual eWON device.

This gives you the ability to use a drop down box to see the size of different views, for example, a tablet or an iphone or Galaxy. It’s just an example and it will not turn white when you actually connect to your device. The java script will still load for that page as intended.

Sounds great, thanks! Still getting my eWon setup today so hopefully will be able to see it work shortly.