274 lines
8.1 KiB
JavaScript
274 lines
8.1 KiB
JavaScript
// 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 = {},
|
|
settings = {},
|
|
isQT = navigator.appVersion.includes('QtWebEngine'); // 'oninput'; // change this, if you want interactive elements act on any change, or while they're modified
|
|
|
|
function connectSocket (
|
|
inPort,
|
|
inUUID,
|
|
inMessageType,
|
|
inApplicationInfo,
|
|
inActionInfo
|
|
) {
|
|
connectElgatoStreamDeckSocket(
|
|
inPort,
|
|
inUUID,
|
|
inMessageType,
|
|
inApplicationInfo,
|
|
inActionInfo
|
|
);
|
|
}
|
|
|
|
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 your OS 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, 'connectElgatoStreamDeckSocket');
|
|
|
|
/** let's see, if we have some settings */
|
|
settings = getPropFromString(actionInfo, 'payload.settings');
|
|
console.log(settings, actionInfo);
|
|
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
|
|
};
|
|
|
|
websocket.send(JSON.stringify(json));
|
|
};
|
|
|
|
websocket.onmessage = function (evt) {
|
|
// Received message from Stream Deck
|
|
var jsonObj = JSON.parse(evt.data);
|
|
var event = jsonObj['event'];
|
|
};
|
|
}
|
|
|
|
function initPropertyInspector(initDelay) {
|
|
if (actionInfo['action'] == 'tf.meow.remote.website') {
|
|
$('#url_container').show();
|
|
$('#url_background_container').show();
|
|
}
|
|
|
|
Object.keys(settings).forEach(function (item) {
|
|
$('#' + item).val(settings[item]);
|
|
});
|
|
|
|
$('input').each(function() {
|
|
var $this = $(this),
|
|
id = $this.attr('id');
|
|
|
|
let $item = $this.closest('.sdpi-item');
|
|
|
|
$this.on('change', function(e) {
|
|
const type = $this.attr('type');
|
|
|
|
if (type) {
|
|
const info = $item.find('.sdpi-file-info');
|
|
|
|
if (info) {
|
|
const s = decodeURIComponent($this.val().replace(/^C:\\fakepath\\/, '')).split('/').pop();
|
|
|
|
info.text(s.length > 28
|
|
? s.substr(0, 10)
|
|
+ '...'
|
|
+ s.substr(s.length - 10, s.length)
|
|
: s);
|
|
}
|
|
}
|
|
|
|
let val = $this.val();
|
|
|
|
switch (type) {
|
|
case 'checkbox':
|
|
if (val == 'false' || val == 'true') {
|
|
val = (/^true$/i).test(val);
|
|
}
|
|
break;
|
|
}
|
|
|
|
updateSetting(id, val);
|
|
});
|
|
});
|
|
|
|
$('#ssh_key').change(function(e) {
|
|
if (e.target.files.length < 1) {
|
|
// Hide passphrase field
|
|
$('#ssh_key_passphrase_container').hide();
|
|
$('#ssh_password_container').show();
|
|
} else {
|
|
$('#ssh_password_container').hide();
|
|
}
|
|
|
|
var f = e.target.files[0];
|
|
|
|
var reader = new FileReader();
|
|
|
|
// Closure to capture the file information.
|
|
reader.onload = function(e) {
|
|
var result = e.target.result;
|
|
|
|
var pki = forge.pki;
|
|
|
|
try {
|
|
pki.privateKeyFromPem(result);
|
|
$('#ssh_key_passphrase_container').hide();
|
|
} catch (ex) {
|
|
if (ex.message.indexOf('PEM is encrypted.') !== -1) {
|
|
$('#ssh_key_passphrase_container').show();
|
|
} else {
|
|
// Show error message?
|
|
}
|
|
}
|
|
};
|
|
|
|
// Read in the image file as a data URL.
|
|
reader.readAsText(f);
|
|
});
|
|
}
|
|
|
|
if (!isQT) {
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
initPropertyInspector(100);
|
|
});
|
|
}
|
|
|
|
/** 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 */
|
|
|
|
/** 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);
|
|
}
|
|
|
|
function updateSetting(setting, value) {
|
|
if (!settings) {
|
|
settings = {};
|
|
}
|
|
|
|
settings[setting] = value;
|
|
|
|
setSettings(settings);
|
|
}
|
|
|
|
function setSettings(settings) {
|
|
var json = {
|
|
"event": "setSettings",
|
|
"context": uuid,
|
|
"payload": settings
|
|
};
|
|
|
|
if (websocket) {
|
|
websocket.send(JSON.stringify(json));
|
|
} else {
|
|
console.log('Update:', json);
|
|
}
|
|
} |