https://docs.wallpaperengine.io

This tutorial requires knowledge about HTML, JavaScript and JSON. If you have never made a web wallpaper before, check out the starter tutorial for web wallpapers here: http://gtm.steamproxy.vip/sharedfiles/filedetails/?id=770801435

Follow this tutorial to let users import their own images into your web wallpaper and enable custom backgrounds, slideshows or even import the images into WebGL. Multiple options allow you to import single image files or entire directories.

First, create your web wallpaper as usual and navigate to its path (click on edit -> open in explorer). Now open the project.json in your favorite text editor. First, you will need to create two objects inside of the JSON file, general and properties. If you set a custom scheme color in the editor, these properties might exist already. Your project file should now look similar to this one:


The properties that we are going to add here will follow this schema:

• text: a string that is shown in the editor, this is visible to the user.
  
• type: a string that defines which control to use in the editor, the following are possible: color, text, slider, bool.
  
• value: the default value either as a string (color/text type), integer (slider) or boolean (bool). Colors are stored as floats in RGB with spaces in between, so red (#F00) would equivalent to this: "1 0 0".

There are two separate modes to import images, single files and directories

Add the following property to your project.json to add a control that can be used to import a single image:


If you want to import a whole directory of images, you have two options. The first, recommended option, will allow you to query a single random file on demand at any time, which is ideally to display random backgrounds, for example. To enable this option, the property member mode has to be set to ondemand. the second option will send the entire contents of the directory to you and notify you of new or removed files, which may imply performance issues if large directories are imported. This second option can be enabled by setting mode to fetchall.

We will now add two new properties for both of these modes to project.json:


For video files (WebM only), set the 'fileType' member to 'video':

Using JavaScript, you need to extend the global window object with a new member, named wallpaperPropertyListener which itself is an object. Define it like this:


Now create a new member named applyUserProperties which is a function that takes one argument, the properties:



This function will be called as soon as the document has been loaded to apply initial properties but also while the user is applying changes in the browser. The properties argument is an object that contains all changed properties, so before accessing them, make sure they are indeed defined.

In the following example, we will receive the selected file from the very first property named customimage and apply it to an <img> element in our HTML:


If you want to receive a random file from the property customrandomdirectory, which has been set to ondemand, you simply need to call the predefined function window.wallpaperRequestRandomFileForProperty and supply the name of the property as the first parameter and a callback function as the second. A random image file path will be sent to your callback shortly after:


In order to cycle through images, simply call this function on a timer, for example. You can also call it multiple times to get more than one image for use.

To display a default image, if the user has not specified a directory or removed the directory again, you should also listen to changes to the property itself and act accordingly:


In order to receive files from the property customdirectory, which has been set to fetchall, we need to extend the wallpaperPropertyListener as follows:


What you do with these files is up to you. If you want to randomly pick a file, simply get a random index into the file array. Unless you have something complex in mind, it is recommended to stick to the solution that is offered through customrandomdirectory.

Demo wallpaper with user properties: http://www.mediafire .com/file/y75e1eie4dly4wv/web_image_file_input.zip
Copy this folder into wallpaper_engine/projects/myprojects to use it (REMOVE THE SPACE.)