Added support for remote0
This commit is contained in:
mikx
571
com.exension.hwinfo.sdPlugin/index_pi.js
Normal file
571
com.exension.hwinfo.sdPlugin/index_pi.js
Normal file
@@ -0,0 +1,571 @@
|
||||
// this is our global websocket, used to communicate from/to Stream Deck software
|
||||
// and some info about our plugin, as sent by Stream Deck software
|
||||
var websocket = null,
|
||||
uuid = null,
|
||||
actionInfo = {},
|
||||
inInfo = {},
|
||||
runningApps = [],
|
||||
isQT = navigator.appVersion.includes("QtWebEngine"),
|
||||
onchangeevt = "onchange"; // 'oninput'; // change this, if you want interactive elements act on any change, or while they're modified
|
||||
|
||||
function connectElgatoStreamDeckSocket(inPort, inUUID, inRegisterEvent, inInfo, inActionInfo) {
|
||||
uuid = inUUID;
|
||||
// please note: the incoming arguments are of type STRING, so
|
||||
// in case of the inActionInfo, we must parse it into JSON first
|
||||
actionInfo = JSON.parse(inActionInfo); // cache the info
|
||||
inInfo = JSON.parse(inInfo);
|
||||
websocket = new WebSocket("ws://localhost:" + inPort);
|
||||
|
||||
/** Since the PI doesn't have access to native settings
|
||||
* Stream Deck sends some color settings to PI
|
||||
* We use these to adjust some styles (e.g. highlight-colors for checkboxes)
|
||||
*/
|
||||
addDynamicStyles(inInfo.colors, "connectSocket");
|
||||
initPropertyInspector(5);
|
||||
|
||||
// if connection was established, the websocket sends
|
||||
// an 'onopen' event, where we need to register our PI
|
||||
websocket.onopen = function () {
|
||||
var json = {
|
||||
event: inRegisterEvent,
|
||||
uuid: inUUID,
|
||||
};
|
||||
// register property inspector to Stream Deck
|
||||
websocket.send(JSON.stringify(json));
|
||||
sendValueToPlugin("propertyInspectorConnected", "property_inspector");
|
||||
};
|
||||
|
||||
websocket.onmessage = function (evt) {
|
||||
// Received message from Stream Deck
|
||||
var jsonObj = JSON.parse(evt.data);
|
||||
var event = jsonObj["event"];
|
||||
if (
|
||||
"boolean" === typeof getPropFromString(jsonObj, "payload.error") &&
|
||||
event === "sendToPropertyInspector"
|
||||
) {
|
||||
if (jsonObj.payload.error === true) {
|
||||
document.querySelector("#ui").style = "display:none";
|
||||
document.querySelector("#error").style = "display:block";
|
||||
} else if (jsonObj.payload.message === "show_ui") {
|
||||
document.querySelector("#ui").style = "display:block";
|
||||
document.querySelector("#error").style = "display:none";
|
||||
sendValueToPlugin("propertyInspectorConnected", "property_inspector");
|
||||
}
|
||||
}
|
||||
if (
|
||||
getPropFromString(jsonObj, "payload.sensors") &&
|
||||
event === "sendToPropertyInspector"
|
||||
) {
|
||||
addSensors(
|
||||
document.querySelector("#sensorSelect"),
|
||||
jsonObj.payload.sensors,
|
||||
jsonObj.payload.settings
|
||||
);
|
||||
}
|
||||
if (
|
||||
getPropFromString(jsonObj, "payload.readings") &&
|
||||
event === "sendToPropertyInspector"
|
||||
) {
|
||||
addReadings(
|
||||
document.querySelector("#readingSelect"),
|
||||
jsonObj.payload.readings,
|
||||
jsonObj.payload.settings
|
||||
);
|
||||
}
|
||||
if (getPropFromString(jsonObj, "payload.settings")) {
|
||||
var settings = jsonObj.payload.settings;
|
||||
if (settings.min === 0 && settings.max === 0) {
|
||||
// don't show 0, 0 min/max
|
||||
} else {
|
||||
document.querySelector("#min").value = settings.min;
|
||||
document.querySelector("#max").value = settings.max;
|
||||
}
|
||||
document.querySelector("#format input").value = settings.format;
|
||||
document.querySelector("#divisor input").value = settings.divisor || "";
|
||||
if (
|
||||
settings.format.length > 0 ||
|
||||
(settings.divisor && settings.divisor.length > 0)
|
||||
) {
|
||||
var attr = document.createAttribute("open");
|
||||
attr.value = "open";
|
||||
document
|
||||
.querySelector("#advanced_details")
|
||||
.attributes.setNamedItem(attr);
|
||||
}
|
||||
if (settings.foregroundColor !== "") {
|
||||
document.querySelector("#foreground").value = settings.foregroundColor;
|
||||
}
|
||||
if (settings.backgroundColor !== "") {
|
||||
document.querySelector("#background").value = settings.backgroundColor;
|
||||
}
|
||||
if (settings.highlightColor !== "") {
|
||||
document.querySelector("#highlight").value = settings.highlightColor;
|
||||
}
|
||||
if (settings.valueTextColor !== "") {
|
||||
document.querySelector("#valuetext").value = settings.valueTextColor;
|
||||
}
|
||||
if (settings.titleFontSize !== "") {
|
||||
document.querySelector("#titleFontSize input").value =
|
||||
settings.titleFontSize || 10.5;
|
||||
}
|
||||
if (settings.valueFontSize !== "") {
|
||||
document.querySelector("#valueFontSize input").value =
|
||||
settings.valueFontSize || 10.5;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function sortBy(key) {
|
||||
return function (a, b) {
|
||||
if (a[key] > b[key]) return 1;
|
||||
if (b[key] > a[key]) return -1;
|
||||
return 0;
|
||||
};
|
||||
}
|
||||
|
||||
function addSensors(el, sensors, settings) {
|
||||
var i;
|
||||
for (i = el.options.length - 1; i >= 0; i--) {
|
||||
el.remove(i);
|
||||
}
|
||||
|
||||
el.removeAttribute("disabled");
|
||||
|
||||
var option = document.createElement("option");
|
||||
option.text = "Choose a sensor";
|
||||
option.disabled = true;
|
||||
if (settings.isValid !== true) {
|
||||
option.selected = true;
|
||||
}
|
||||
el.add(option);
|
||||
var sortByName = sortBy("name");
|
||||
sensors.sort(sortByName).forEach((s) => {
|
||||
var option = document.createElement("option");
|
||||
option.text = s.name;
|
||||
option.value = s.uid;
|
||||
if (settings.isValid === true && settings.sensorUid === s.uid) {
|
||||
option.selected = true;
|
||||
setTimeout(function () {
|
||||
var event = new Event("change");
|
||||
el.dispatchEvent(event);
|
||||
}, 0);
|
||||
}
|
||||
el.add(option);
|
||||
});
|
||||
}
|
||||
|
||||
function addReadings(el, readings, settings) {
|
||||
var i;
|
||||
for (i = el.options.length - 1; i >= 0; i--) {
|
||||
el.remove(i);
|
||||
}
|
||||
|
||||
el.removeAttribute("disabled");
|
||||
|
||||
var option = document.createElement("option");
|
||||
option.text = "Choose a reading";
|
||||
option.disabled = true;
|
||||
if (settings.isValid !== true) {
|
||||
option.selected = true;
|
||||
}
|
||||
el.add(option);
|
||||
|
||||
var sortByLabel = sortBy("label");
|
||||
var maxL = 0;
|
||||
readings.sort(sortByLabel).forEach((r) => {
|
||||
var l = r.prefix.length;
|
||||
if (l > maxL) {
|
||||
maxL = l;
|
||||
}
|
||||
});
|
||||
readings.sort(sortByLabel).forEach((r) => {
|
||||
var option = document.createElement("option");
|
||||
option.style = "white-space: pre";
|
||||
var spaces = " ";
|
||||
for (i = 0; i < maxL - r.prefix.length; ++i) {
|
||||
spaces += " ";
|
||||
}
|
||||
option.innerHTML = `${r.prefix}${spaces}${r.label}`;
|
||||
option.value = r.id;
|
||||
if (settings.isValid === true && settings.readingId === r.id) {
|
||||
option.selected = true;
|
||||
}
|
||||
el.add(option);
|
||||
});
|
||||
}
|
||||
|
||||
function initPropertyInspector(initDelay) {
|
||||
prepareDOMElements(document);
|
||||
}
|
||||
|
||||
function revealSdpiWrapper() {
|
||||
const el = document.querySelector(".sdpi-wrapper");
|
||||
el && el.classList.remove("hidden");
|
||||
}
|
||||
|
||||
// openUrl in default browser
|
||||
function openUrl(url) {
|
||||
if (websocket && websocket.readyState === 1) {
|
||||
const json = {
|
||||
event: "openUrl",
|
||||
payload: {
|
||||
url: url,
|
||||
},
|
||||
};
|
||||
websocket.send(JSON.stringify(json));
|
||||
}
|
||||
}
|
||||
|
||||
// our method to pass values to the plugin
|
||||
function sendValueToPlugin(value, param) {
|
||||
if (websocket && websocket.readyState === 1) {
|
||||
const json = {
|
||||
action: actionInfo["action"],
|
||||
event: "sendToPlugin",
|
||||
context: uuid,
|
||||
payload: {
|
||||
[param]: value,
|
||||
},
|
||||
};
|
||||
websocket.send(JSON.stringify(json));
|
||||
}
|
||||
}
|
||||
|
||||
if (!isQT) {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
initPropertyInspector(100);
|
||||
});
|
||||
}
|
||||
|
||||
/** the beforeunload event is fired, right before the PI will remove all nodes */
|
||||
window.addEventListener("beforeunload", function (e) {
|
||||
e.preventDefault();
|
||||
sendValueToPlugin("propertyInspectorWillDisappear", "property_inspector");
|
||||
// Don't set a returnValue to the event, otherwise Chromium with throw an error. // e.returnValue = '';
|
||||
});
|
||||
|
||||
/** the pagehide event is fired, when the view disappears */
|
||||
/*
|
||||
window.addEventListener('pagehide', function (event) {
|
||||
console.log('%c%s','background: green; font-size: 22px; font-weight: bold;','window --->> pagehide.');
|
||||
sendValueToPlugin('propertyInspectorPagehide', 'property_inspector');
|
||||
|
||||
});
|
||||
*/
|
||||
|
||||
/** the unload event is fired, when the PI will finally disappear */
|
||||
/*
|
||||
window.addEventListener('unload', function (event) {
|
||||
console.log('%c%s','background: orange; font-size: 22px; font-weight: bold;','window --->> onunload.');
|
||||
sendValueToPlugin('propertyInspectorDisconnected', 'property_inspector');
|
||||
});
|
||||
*/
|
||||
|
||||
/** if you prefer, you can apply these listeners to PI's body, like so:
|
||||
*
|
||||
* <body onpagehide="sendValueToPlugin('propertyInspectorPagehide', 'property_inspector');">
|
||||
*
|
||||
* <body onunload="sendValueToPlugin('propertyInspectorDisconnected', 'property_inspector');">
|
||||
*/
|
||||
|
||||
/** CREATE INTERACTIVE HTML-DOM
|
||||
* where elements can be clicked or act on their 'change' event.
|
||||
* Messages are then processed using the 'handleSdpiItemClick' method below.
|
||||
*/
|
||||
|
||||
function prepareDOMElements(baseElement) {
|
||||
baseElement = baseElement || document;
|
||||
Array.from(baseElement.querySelectorAll(".sdpi-item-value")).forEach(
|
||||
(el, i) => {
|
||||
const elementsToClick = [
|
||||
"BUTTON",
|
||||
"OL",
|
||||
"UL",
|
||||
"TABLE",
|
||||
"METER",
|
||||
"PROGRESS",
|
||||
"CANVAS",
|
||||
].includes(el.tagName);
|
||||
const evt = elementsToClick ? "onclick" : onchangeevt || "onchange";
|
||||
// console.log(el.type, el.tagName, elementsToClick, el, evt);
|
||||
|
||||
/** Look for <input><span> combinations, where we consider the span as label for the input
|
||||
* we don't use `labels` for that, because a range could have 2 labels.
|
||||
*/
|
||||
const inputGroup = el.querySelectorAll("input, span");
|
||||
if (inputGroup.length === 2) {
|
||||
const offs = inputGroup[0].tagName === "INPUT" ? 1 : 0;
|
||||
inputGroup[offs].innerText = inputGroup[1 - offs].value;
|
||||
inputGroup[1 - offs]["oninput"] = function () {
|
||||
inputGroup[offs].innerText = inputGroup[1 - offs].value;
|
||||
};
|
||||
}
|
||||
/** We look for elements which have an 'clickable' attribute
|
||||
* we use these e.g. on an 'inputGroup' (<span><input type="range"><span>) to adjust the value of
|
||||
* the corresponding range-control
|
||||
*/
|
||||
Array.from(el.querySelectorAll(".clickable")).forEach((subel, subi) => {
|
||||
subel["onclick"] = function (e) {
|
||||
handleSdpiItemClick(e.target, subi);
|
||||
};
|
||||
});
|
||||
el[evt] = function (e) {
|
||||
handleSdpiItemClick(e.target, i);
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
baseElement.querySelectorAll("textarea").forEach((e) => {
|
||||
const maxl = e.getAttribute("maxlength");
|
||||
e.targets = baseElement.querySelectorAll(`[for='${e.id}']`);
|
||||
if (e.targets.length) {
|
||||
let fn = () => {
|
||||
for (let x of e.targets) {
|
||||
x.innerText = maxl
|
||||
? `${e.value.length}/${maxl}`
|
||||
: `${e.value.length}`;
|
||||
}
|
||||
};
|
||||
fn();
|
||||
e.onkeyup = fn;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleSdpiItemClick(e, idx) {
|
||||
/** Following items are containers, so we won't handle clicks on them */
|
||||
if (["OL", "UL", "TABLE"].includes(e.tagName)) {
|
||||
return;
|
||||
}
|
||||
// console.log('--- handleSdpiItemClick ---', e, `type: ${e.type}`, e.tagName, `inner: ${e.innerText}`);
|
||||
|
||||
/** SPANS are used inside a control as 'labels'
|
||||
* If a SPAN element calls this function, it has a class of 'clickable' set and is thereby handled as
|
||||
* clickable label.
|
||||
*/
|
||||
|
||||
if (e.tagName === "SPAN") {
|
||||
const inp = e.parentNode.querySelector("input");
|
||||
if (e.getAttribute("value")) {
|
||||
return inp && (inp.value = e.getAttribute("value"));
|
||||
}
|
||||
}
|
||||
|
||||
const selectedElements = [];
|
||||
const isList = ["LI", "OL", "UL", "DL", "TD"].includes(e.tagName);
|
||||
const sdpiItem = e.closest(".sdpi-item");
|
||||
const sdpiItemGroup = e.closest(".sdpi-item-group");
|
||||
let sdpiItemChildren = isList
|
||||
? sdpiItem.querySelectorAll(e.tagName === "LI" ? "li" : "td")
|
||||
: sdpiItem.querySelectorAll(".sdpi-item-child > input");
|
||||
|
||||
if (isList) {
|
||||
const siv = e.closest(".sdpi-item-value");
|
||||
if (!siv.classList.contains("multi-select")) {
|
||||
for (let x of sdpiItemChildren) x.classList.remove("selected");
|
||||
}
|
||||
if (!siv.classList.contains("no-select")) {
|
||||
e.classList.toggle("selected");
|
||||
}
|
||||
}
|
||||
|
||||
if (sdpiItemGroup && !sdpiItemChildren.length) {
|
||||
for (let x of ["input", "meter", "progress"]) {
|
||||
sdpiItemChildren = sdpiItemGroup.querySelectorAll(x);
|
||||
if (sdpiItemChildren.length) break;
|
||||
}
|
||||
}
|
||||
|
||||
if (e.selectedIndex) {
|
||||
idx = e.selectedIndex;
|
||||
} else {
|
||||
sdpiItemChildren.forEach((ec, i) => {
|
||||
if (ec.classList.contains("selected")) {
|
||||
selectedElements.push(ec.innerText);
|
||||
}
|
||||
if (ec === e) idx = i;
|
||||
});
|
||||
}
|
||||
|
||||
const returnValue = {
|
||||
key: e.id || sdpiItem.id,
|
||||
value: isList
|
||||
? e.innerText
|
||||
: e.value
|
||||
? e.type === "file"
|
||||
? decodeURIComponent(e.value.replace(/^C:\\fakepath\\/, ""))
|
||||
: e.value
|
||||
: e.getAttribute("value"),
|
||||
group: sdpiItemGroup ? sdpiItemGroup.id : false,
|
||||
index: idx,
|
||||
selection: selectedElements,
|
||||
checked: e.checked,
|
||||
};
|
||||
|
||||
/** Just simulate the original file-selector:
|
||||
* If there's an element of class '.sdpi-file-info'
|
||||
* show the filename there
|
||||
*/
|
||||
if (e.type === "file") {
|
||||
const info = sdpiItem.querySelector(".sdpi-file-info");
|
||||
if (info) {
|
||||
const s = returnValue.value.split("/").pop();
|
||||
info.innerText =
|
||||
s.length > 28
|
||||
? s.substr(0, 10) + "..." + s.substr(s.length - 10, s.length)
|
||||
: s;
|
||||
}
|
||||
}
|
||||
|
||||
sendValueToPlugin(returnValue, "sdpi_collection");
|
||||
}
|
||||
|
||||
function updateKeyForDemoCanvas(cnv) {
|
||||
sendValueToPlugin(
|
||||
{
|
||||
key: "your_canvas",
|
||||
value: cnv.toDataURL(),
|
||||
},
|
||||
"sdpi_collection"
|
||||
);
|
||||
}
|
||||
|
||||
/** Stream Deck software passes system-highlight color information
|
||||
* to Property Inspector. Here we 'inject' the CSS styles into the DOM
|
||||
* when we receive this information. */
|
||||
|
||||
function addDynamicStyles(clrs, fromWhere) {
|
||||
const node =
|
||||
document.getElementById("#sdpi-dynamic-styles") ||
|
||||
document.createElement("style");
|
||||
if (!clrs.mouseDownColor)
|
||||
clrs.mouseDownColor = fadeColor(clrs.highlightColor, -100);
|
||||
const clr = clrs.highlightColor.slice(0, 7);
|
||||
const clr1 = fadeColor(clr, 100);
|
||||
const clr2 = fadeColor(clr, 60);
|
||||
const metersActiveColor = fadeColor(clr, -60);
|
||||
|
||||
node.setAttribute("id", "sdpi-dynamic-styles");
|
||||
node.innerHTML = `
|
||||
|
||||
input[type="radio"]:checked + label span,
|
||||
input[type="checkbox"]:checked + label span {
|
||||
background-color: ${clrs.highlightColor};
|
||||
}
|
||||
|
||||
input[type="radio"]:active:checked + label span,
|
||||
input[type="radio"]:active + label span,
|
||||
input[type="checkbox"]:active:checked + label span,
|
||||
input[type="checkbox"]:active + label span {
|
||||
background-color: ${clrs.mouseDownColor};
|
||||
}
|
||||
|
||||
input[type="radio"]:active + label span,
|
||||
input[type="checkbox"]:active + label span {
|
||||
background-color: ${clrs.buttonPressedBorderColor};
|
||||
}
|
||||
|
||||
td.selected,
|
||||
td.selected:hover,
|
||||
li.selected:hover,
|
||||
li.selected {
|
||||
color: white;
|
||||
background-color: ${clrs.highlightColor};
|
||||
}
|
||||
|
||||
.sdpi-file-label > label:active,
|
||||
.sdpi-file-label.file:active,
|
||||
label.sdpi-file-label:active,
|
||||
label.sdpi-file-info:active,
|
||||
input[type="file"]::-webkit-file-upload-button:active,
|
||||
button:active {
|
||||
background-color: ${clrs.buttonPressedBackgroundColor};
|
||||
color: ${clrs.buttonPressedTextColor};
|
||||
border-color: ${clrs.buttonPressedBorderColor};
|
||||
}
|
||||
|
||||
::-webkit-progress-value,
|
||||
meter::-webkit-meter-optimum-value {
|
||||
background: linear-gradient(${clr2}, ${clr1} 20%, ${clr} 45%, ${clr} 55%, ${clr2})
|
||||
}
|
||||
|
||||
::-webkit-progress-value:active,
|
||||
meter::-webkit-meter-optimum-value:active {
|
||||
background: linear-gradient(${clr}, ${clr2} 20%, ${metersActiveColor} 45%, ${metersActiveColor} 55%, ${clr})
|
||||
}
|
||||
`;
|
||||
document.body.appendChild(node);
|
||||
}
|
||||
|
||||
/** UTILITIES */
|
||||
|
||||
/** Helper function to construct a list of running apps
|
||||
* from a template string.
|
||||
* -> information about running apps is received from the plugin
|
||||
*/
|
||||
|
||||
function sdpiCreateList(el, obj, cb) {
|
||||
if (el) {
|
||||
el.style.display = obj.value.length ? "block" : "none";
|
||||
Array.from(document.querySelectorAll(`.${el.id}`)).forEach((subel, i) => {
|
||||
subel.style.display = obj.value.length ? "flex" : "none";
|
||||
});
|
||||
if (obj.value.length) {
|
||||
el.innerHTML = `<div class="sdpi-item" ${obj.type ? `class="${obj.type}"` : ""
|
||||
} id="${obj.id || window.btoa(new Date().getTime().toString()).substr(0, 8)
|
||||
}">
|
||||
<div class="sdpi-item-label">${obj.label || ""}</div>
|
||||
<ul class="sdpi-item-value ${obj.selectionType ? obj.selectionType : ""
|
||||
}">
|
||||
${obj.value.map((e) => `<li>${e.name}</li>`).join("")}
|
||||
</ul>
|
||||
</div>`;
|
||||
setTimeout(function () {
|
||||
prepareDOMElements(el);
|
||||
if (cb) cb();
|
||||
}, 10);
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (cb) cb();
|
||||
}
|
||||
|
||||
/** get a JSON property from a (dot-separated) string
|
||||
* Works on nested JSON, e.g.:
|
||||
* jsn = {
|
||||
* propA: 1,
|
||||
* propB: 2,
|
||||
* propC: {
|
||||
* subA: 3,
|
||||
* subB: {
|
||||
* testA: 5,
|
||||
* testB: 'Hello'
|
||||
* }
|
||||
* }
|
||||
* }
|
||||
* getPropFromString(jsn,'propC.subB.testB') will return 'Hello';
|
||||
*/
|
||||
const getPropFromString = (jsn, str, sep = ".") => {
|
||||
const arr = str.split(sep);
|
||||
return arr.reduce(
|
||||
(obj, key) => (obj && obj.hasOwnProperty(key) ? obj[key] : undefined),
|
||||
jsn
|
||||
);
|
||||
};
|
||||
|
||||
/*
|
||||
Quick utility to lighten or darken a color (doesn't take color-drifting, etc. into account)
|
||||
Usage:
|
||||
fadeColor('#061261', 100); // will lighten the color
|
||||
fadeColor('#200867'), -100); // will darken the color
|
||||
*/
|
||||
function fadeColor(col, amt) {
|
||||
const min = Math.min,
|
||||
max = Math.max;
|
||||
const num = parseInt(col.replace(/#/g, ""), 16);
|
||||
const r = min(255, max((num >> 16) + amt, 0));
|
||||
const g = min(255, max((num & 0x0000ff) + amt, 0));
|
||||
const b = min(255, max(((num >> 8) & 0x00ff) + amt, 0));
|
||||
return "#" + (g | (b << 8) | (r << 16)).toString(16).padStart(6, 0);
|
||||
}
|
||||
Reference in New Issue
Block a user