v2.1: add Property Inspector with poll interval setting

2026-06-18 15:10:55 +08:00
parent 77c4db36d8
commit 8535838fc4
11 changed files with 1849 additions and 3 deletions
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AI Monitor Settings</title>
+  <link rel="stylesheet" href="../utils/css/sdpi.css">
+  <style>
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #1a1a2e; color: #e0e0e0; padding: 16px; margin: 0; }
+    label { display: block; font-size: 12px; color: #888; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
+    .row { display: flex; align-items: center; gap: 8px; }
+    input[type="range"] { flex: 1; accent-color: #f59e0b; }
+    .row span { font-size: 12px; color: #f59e0b; min-width: 50px; text-align: right; }
+  </style>
+</head>
+<body>
+  <label>Poll Interval (ms)</label>
+  <div class="row">
+    <input type="range" id="pollInterval" min="500" max="5000" step="100" value="1000">
+    <span id="pollVal">1000ms</span>
+  </div>
+  <script src="../utils/action.js"></script>
+  <script>
+    (function () {
+      var slider = document.getElementById('pollInterval');
+      var val = document.getElementById('pollVal');
+      slider.addEventListener('input', function () { val.textContent = this.value + 'ms'; $settings.pollInterval = parseInt(this.value, 10); });
+      if ($settings.pollInterval) slider.value = $settings.pollInterval;
+      else $settings.pollInterval = 1000;
+    })();
+  </script>
+</body>
+</html>
@@ -0,0 +1,157 @@
+let $websocket, $uuid, $action, $context, $settings, $lang, $FileID = '';
+
+WebSocket.prototype.setGlobalSettings = function(payload) {
+    this.send(JSON.stringify({
+        event: "setGlobalSettings",
+        context: $uuid, payload
+    }));
+}
+
+WebSocket.prototype.getGlobalSettings = function() {
+    this.send(JSON.stringify({
+        event: "getGlobalSettings",
+        context: $uuid,
+    }));
+}
+
+// 与插件通信
+WebSocket.prototype.sendToPlugin = function (payload) {
+    this.send(JSON.stringify({
+        event: "sendToPlugin",
+        action: $action,
+        context: $uuid,
+        payload
+    }));
+};
+
+//设置标题
+WebSocket.prototype.setTitle = function (str, row = 0, num = 6) {
+    console.log(str);
+    let newStr = '';
+    if (row) {
+        let nowRow = 1, strArr = str.split('');
+        strArr.forEach((item, index) => {
+            if (nowRow < row && index >= nowRow * num) { nowRow++; newStr += '\n'; }
+            if (nowRow <= row && index < nowRow * num) { newStr += item; }
+        });
+        if (strArr.length > row * num) { newStr = newStr.substring(0, newStr.length - 1); newStr += '..'; }
+    }
+    this.send(JSON.stringify({
+        event: "setTitle",
+        context: $context,
+        payload: {
+            target: 0,
+            title: newStr || str
+        }
+    }));
+}
+
+// 设置状态
+WebSocket.prototype.setState = function (state) {
+    this.send(JSON.stringify({
+        event: "setState",
+        context: $context,
+        payload: { state }
+    }));
+};
+
+// 设置背景
+WebSocket.prototype.setImage = function (url) {
+    let image = new Image();
+    image.src = url;
+    image.onload = () => {
+        let canvas = document.createElement("canvas");
+        canvas.width = image.naturalWidth;
+        canvas.height = image.naturalHeight;
+        let ctx = canvas.getContext("2d");
+        ctx.drawImage(image, 0, 0);
+        this.send(JSON.stringify({
+            event: "setImage",
+            context: $context,
+            payload: {
+                target: 0,
+                image: canvas.toDataURL("image/png")
+            }
+        }));
+    };
+};
+
+// 打开网页
+WebSocket.prototype.openUrl = function (url) {
+    this.send(JSON.stringify({
+        event: "openUrl",
+        payload: { url }
+    }));
+};
+
+// 保存持久化数据
+WebSocket.prototype.saveData = $.debounce(function (payload) {
+    this.send(JSON.stringify({
+        event: "setSettings",
+        context: $uuid,
+        payload
+    }));
+});
+
+// StreamDock 软件入口函数
+const connectSocket = connectElgatoStreamDeckSocket;
+async function connectElgatoStreamDeckSocket(port, uuid, event, app, info) {
+    info = JSON.parse(info);
+    $uuid = uuid; $action = info.action; 
+    $context = info.context;
+    $websocket = new WebSocket('ws://127.0.0.1:' + port);
+    $websocket.onopen = () => $websocket.send(JSON.stringify({ event, uuid }));
+
+    // 持久数据代理
+    $websocket.onmessage = e => {
+        let data = JSON.parse(e.data);
+        if (data.event === 'didReceiveSettings') {
+            $settings = new Proxy(data.payload.settings, {
+                get(target, property) {
+                    return target[property];
+                },
+                set(target, property, value) {
+                    target[property] = value;
+                    $websocket.saveData(data.payload.settings);
+                }
+            });
+            if (!$back) $dom.main.style.display = 'block';
+        }
+        $propEvent[data.event]?.(data.payload);
+    };
+
+    // 自动翻译页面
+    if (!$local) return;
+    $lang = await new Promise(resolve => {
+        const req = new XMLHttpRequest();
+        req.open('GET', `../../${JSON.parse(app).application.language}.json`);
+        req.send();
+        req.onreadystatechange = () => {
+            if (req.readyState === 4) {
+                resolve(JSON.parse(req.responseText).Localization);
+            }
+        };
+    });
+
+    // 遍历文本节点并翻译所有文本节点
+    const walker = document.createTreeWalker($dom.main, NodeFilter.SHOW_TEXT, (e) => {
+        return e.data.trim() && NodeFilter.FILTER_ACCEPT;
+    });
+    while (walker.nextNode()) {
+        console.log(walker.currentNode.data);
+        walker.currentNode.data = $lang[walker.currentNode.data];
+    }
+    // placeholder 特殊处理
+    const translate = item => {
+        if (item.placeholder?.trim()) {
+            console.log(item.placeholder);
+            item.placeholder = $lang[item.placeholder];
+        }
+    };
+    $('input', true).forEach(translate);
+    $('textarea', true).forEach(translate);
+}
+
+// StreamDock 文件路径回调
+Array.from($('input[type="file"]', true)).forEach(item => item.addEventListener('click', () => $FileID = item.id));
+const onFilePickerReturn = (url) => $emit.send(`File-${$FileID}`, JSON.parse(url));
@@ -0,0 +1,81 @@
+// 自定义事件类
+class EventPlus {
+    constructor() {
+        this.event = new EventTarget();
+    }
+    on(name, callback) {
+        this.event.addEventListener(name, e => callback(e.detail));
+    }
+    send(name, data) {
+        this.event.dispatchEvent(new CustomEvent(name, {
+            detail: data,
+            bubbles: false,
+            cancelable: false
+        }));
+    }
+}
+
+// 补零
+String.prototype.fill = function () {
+    return this >= 10 ? this : '0' + this;
+};
+
+// unicode编码转换字符串
+String.prototype.uTs = function () {
+    return eval('"' + Array.from(this).join('') + '"');
+};
+
+// 字符串转换unicode编码
+String.prototype.sTu = function (str = '') {
+    Array.from(this).forEach(item => str += `\\u${item.charCodeAt(0).toString(16)}`);
+    return str;
+};
+
+// 全局变量/方法
+const $emit = new EventPlus(), $ = (selector, isAll = false) => {
+    const element = document.querySelector(selector), methods = {
+        on: function (event, callback) {
+            this.addEventListener(event, callback);
+        },
+        attr: function (name, value = '') {
+            value && this.setAttribute(name, value);
+            return this;
+        }
+    };
+    if (!isAll && element) {
+        return Object.assign(element, methods);
+    } else if (!isAll && !element) {
+        throw `HTML没有 ${selector} 元素! 请检查是否拼写错误`;
+    }
+    return Array.from(document.querySelectorAll(selector)).map(item => Object.assign(item, methods));
+};
+
+// 节流函数
+$.throttle = (fn, delay) => {
+    let Timer = null;
+    return function () {
+        if (Timer) return;
+        Timer = setTimeout(() => {
+            fn.apply(this, arguments);
+            Timer = null;
+        }, delay);
+    };
+};
+
+// 防抖函数
+$.debounce = (fn, delay) => {
+    let Timer = null;
+    return function () {
+        clearTimeout(Timer);
+        Timer = setTimeout(() => fn.apply(this, arguments), delay);
+    };
+};
+
+// 绑定限制数字方法
+Array.from($('input[type="num"]', true)).forEach(item => {
+    item.addEventListener('input', function limitNum() {
+        if (!item.value || /^\d+$/.test(item.value)) return;
+        item.value = item.value.slice(0, -1);
+        limitNum(item);
+    });
+});