平台：steam | wallpaper engine

介绍

用户可以更改颜色并根据自己的喜好调整壁纸，这将使其变得更加有趣。此时，您可以为浏览器创建颜色选择器，滑块和复选框，并相应地使用自己的JavaScript处理这些颜色选择器，滑块和复选框。

project.json：

在你web wallpaper项目下有名为project.json的文件。里面的内容大致如下

title:你的壁纸名称 file:你的壁纸主文件 type:壁纸类型 general:你的壁纸配置 properties:你的壁纸的用户自定义属性

{
    "file" : "index.html",
    "general" : 
    {
        "properties" : 
        {
        }
    },
    "title" : "Advanced Web Tutorial - User Properties",
    "type" : "web"
}

自定义用户属性：

颜色

颜色：customcolor

{
	"file" : "index.html",
	"general" : 
	{
		"properties" : 
		{
			"customcolor" : 
			{
				"text" : "User accent",
				"type" : "color",
				"value" : "0.2 0.8 1"
			}
		}
	},
	"title" : "Advanced Web Tutorial - User Properties",
	"type" : "web"
}

选择框

选择框：custombool

{
	"file" : "index.html",
	"general" : 
	{
		"properties" : 
		{
			"custombool" : 
            {
                "text" : "User bool",
                "type" : "bool",
                "value" : false
            }
		}
	},
	"title" : "Advanced Web Tutorial - User Properties",
	"type" : "web"
}

滑块（整数）

滑块：customint

{
    "file" : "index.html",
    "general" : 
    {
        "properties" : 
        {
            
            "customint" :
            {
                "text" : "User slider",
                "type" : "slider",
                "value" : 50,
                "min" : 0,
                "max" : 100,
                "editable" : true
            }
        }
    },
    "title" : "Advanced Web Tutorial - User Properties",
    "type" : "web"
}

添加组合框（整数或字符串）

滑块：customcombo

{
    "file" : "index.html",
    "general" : 
    {
        "properties" : 
        {
            
         "customcombo" :
            {
                "text" : "User combo",
                "type" : "combo",
                "value" : 1,
                "options" :
                [
                    {
                        "value" : 1,
                        "label" : "First"
                    },
                    {
                        "value" : 2,
                        "label" : "Second"
                    },
                    {
                        "value" : 3,
                        "label" : "Third"
                    }
                ]
            }            
        }
    },
    "title" : "Advanced Web Tutorial - User Properties",
    "type" : "web"
}

输入框

滑块：customtext

{
    "file" : "index.html",
    "general" : 
    {
        "properties" : 
        {
            
          "customtext" : 
            {
                "text" : "User text",
                "type" : "textinput",
                "value" : ""
            }           
        }
    },
    "title" : "Advanced Web Tutorial - User Properties",
    "type" : "web"
}

从墙纸读取属性

在你的web wallpaper壁纸中，使用javascript读取以上配置的选项。

使用JavaScript，您需要使用名为“wallpaperPropertyListener”的新成员扩展全局“ window”对象，该成员本身就是一个对象。像这样定义它：

window.wallpaperPropertyListener = {

};

现在创建一个名为“ applyUserProperties”的新成员，该成员具有一个参数，即属性：

window.wallpaperPropertyListener = {
    applyUserProperties: function(properties) {

    }
};

加载文档以应用初始属性后，以及在用户在浏览器中应用更改时，将立即调用此函数。 “ properties”参数是一个包含所有已更改属性的对象，因此在访问它们之前，请确保它们确实已定义：

window.wallpaperPropertyListener = {
    applyUserProperties: function(properties) {

        // Read custom color
        if (properties.customcolor) {
            // Convert the custom color to be applied as a CSS style
            var customColor = properties.customcolor.value.split(' ');
            customColor = customColor.map(function(c) {
                return Math.ceil(c * 255);
            });
            var customColorAsCSS = 'rgb(' + customColor + ')';
        }

    }
};

上面对应的 project.json内容为：

{
	"file" : "index.html",
	"general" : 
	{
		"properties" : 
		{
			"customcolor" : 
			{
				"text" : "User accent",
				"type" : "color",
				"value" : "0.2 0.8 1"
			}
		}
	},
	"title" : "Advanced Web Tutorial - User Properties",
	"type" : "web"
}

控制某个选项是否显示

"condition" : "custombool.value"

condition对应的字段会被当成Javascript表达式，也就是意味着，可以使用更复杂的表达式。

{
    "file" : "index.html",
    "general" : 
    {
        "properties" : 
        {
            "custombool" : 
            {
                "text" : "User bool",
                "type" : "bool",
                "value" : false
            },
            "customint" :
            {
                "text" : "User slider",
                "type" : "slider",
                "value" : 50,
                "min" : 0,
                "max" : 100,
                "condition" : "custombool.value"
            }
        }
    },
    "title" : "Advanced Web Tutorial - User Properties",
    "type" : "web"
}

原文链接：https://blog.csdn.net/weixin_48916470/article/details/109489801

Web wallpaper用户自定义属性