说明

下面用demo1的例子演示样式插件的开发，样式为左右声道音量大小的动态显示，如上图所示。

demo1的根目录为top.mashiros.3rd-party-style-demo.advp，目录结构如下所示：

top.mashiros.3rd-party-style-demo.advp
 ├── Demo1.qml
 └── package.json

package.json

在根目录下新建package.json文件。此文件为SAO Utils 2的插件声明文件，ADV-Plugin会自动识别catalog为top.mashiros.advp-style的resources，该分类下的资源入口entry需要指定为组件文件。

package.json文件示例如下。

{
    "name": "top.mashiros.3rd-party-style-demo.advp",
    "version": "1.0.0",
    
    "title": {
        "en": "ADV-Plugin 3rd party style demo",
        "zh": "音频可视化插件第三方样式演示"
    },

    "description": "3rd party style demo for ADV-Plugin",

    "author": {
        "name": "Mashiro_Sorata",
        "email": "mashiro_sorata@qq.com",
        "url": "http://www.mashiros.top/"
    },

    "resources": [
        {
            "location": "/3rd-party-demo1",
            "catalog": "top.mashiros.advp-style",
            "title": "3rd party Demo1",
            "entry": "Demo1.qml"
        }
    ]
}

package.json中resources资源说明：

resources：为此插件的资源，可包含多个资源值。
location：定义本插件域内资源所在的位置（非实际路径，可自定义）。注意：在resources包含多个资源值时，需要保证不同资源值内的location不同。
catalog：样式插件的catalog需要定义为top.mashiros.advp-style。
title：定义此样式的显示名称。
entry：定义此样式资源值的相对路径，为该资源文件所在的路径。相对路径起点为此插件文件夹根目录。

注：一个样式对应resources中的一个资源值，可在一个插件内定义多个资源值（如demo2所示）。

Demo1.qml

好了，package.json已经创建完毕，我们开始编写实际代码了。这一步可能需要一些QML与Canvas的知识，网络上有关的教程还是很多的。下面为demo1的Demo1.qml代码实现，其功能为动态显示左右声道音量大小。代码功能说明写在了注释里。

import QtQuick 2.12
//通过相对路径导入ADV-Plugin插件目录下qml/api文件夹，调用相关的组件
import "../top.mashiros.widget.advp/qml/api"

AdvpStyleTemplate {
    style: AdvpCanvasTemplate {
        //填充颜色
        readonly property string line_color: "#f5a623"

        //音频数据更新时的处理代码，参数是长度为129的数组data
        onAudioDataUpdeted: {
            //清空画布
            context.clearRect(0, 0, width, height);
            //左声道音量
            let left_channel = 0;
            //右声道音量
            let right_channel = 0;
            //取前128位左右声道的数据进行处理
            for (let i=0;i<128;i++) {
                if(i<64) {
                    //左声道FFT数据求和
                    left_channel += data[i];
                } else {
                    //右声道FFT数据求和
                    right_channel += data[i];
                }
            }
            //利用最后一位归一化系数data[128]进行动态归一化，其中20为最大高度值的调节系数
            let normalize = 20*data[128]/height;
            left_channel /= normalize;
            right_channel /= normalize;
            //绘制左声道
            context.fillRect(0,height,width*0.45,-left_channel);
            //绘制右声道
            context.fillRect(width*0.55,height,width*0.45,-right_channel);
            //填充矩形
            context.fill();
            //QML Canvas绘制图形(绘制后需要显示必须调用canvas的requestPaint方法)
            requestPaint();
        }

        //属性configs或者context改变时的处理代码，无参数
        onConfigsUpdated: {
            //给canvas的context赋值初始样式(填充颜色)，避免在onAudioDataUpdeted处理代码中重复调用
            context.fillStyle = line_color;
        }
    }
}

demo1没有配置项，所以上面的示例代码没有defaultValues属性值与preference属性值。

完成代码后，启动SDK程序加载挂件，切换样式到3rd party Demo1的选项，即可在挂件处进行预览（记得播放音频）。