dlprows/FocusVolumeControlPlugin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Adding in a step picker, so that the user can choose how much the volume should change with each tick of the encoder

Browse Source
This commit is contained in:
dlprows 2023-09-10 22:07:11 -06:00
parent b57ea24b11
commit 84a9a89074
7 changed files with 2166 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/FocusVolumeControl/DialAction.cs
View File

@ -19,6 +19,9 @@ public class DialAction : EncoderBase
[JsonProperty("fallbackBehavior")] [JsonProperty("fallbackBehavior")]
public FallbackBehavior FallbackBehavior { get; set; } public FallbackBehavior FallbackBehavior { get; set; }
[JsonProperty("stepSize")]
public int StepSize { get; set; }
public static PluginSettings CreateDefaultSettings() public static PluginSettings CreateDefaultSettings()
{ {
PluginSettings instance = new PluginSettings(); PluginSettings instance = new PluginSettings();
@ -119,7 +122,7 @@ public class DialAction : EncoderBase
{ {
if (_currentAudioSession != null) if (_currentAudioSession != null)
{ {
_currentAudioSession.IncrementVolumeLevel(1, payload.Ticks); _currentAudioSession.IncrementVolumeLevel(settings.StepSize, payload.Ticks);
await UpdateStateIfNeeded(); await UpdateStateIfNeeded();
} }
else else

3
src/FocusVolumeControl/FocusVolumeControl.csproj
View File

@ -84,6 +84,9 @@
<Content Include="Images\**\*.png"> <Content Include="Images\**\*.png">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory> <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content> </Content>
<Content Include="PropertyInspector\**\*.js;PropertyInspector\**\*.css">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Content Include="PropertyInspector\PluginActionPI.html"> <Content Include="PropertyInspector\PluginActionPI.html">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory> <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content> </Content>

20
src/FocusVolumeControl/PropertyInspector/PluginActionPI.html
View File

@ -6,11 +6,14 @@
<meta name=apple-mobile-web-app-capable content=yes> <meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black> <meta name=apple-mobile-web-app-status-bar-style content=black>
<title>FocusVolumeControl Settings</title> <title>FocusVolumeControl Settings</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/barraider/streamdeck-easypi@latest/src/sdpi.css"> <link rel="stylesheet" href="./lib/sdpi.css">
<script src="https://cdn.jsdelivr.net/gh/barraider/streamdeck-easypi@latest/src/sdtools.common.js"></script> <link rel="sytlesheet" href="./lib/rangeTooltip.css">
<script src="lib/sdtools.common.js"></script>
<script src="lib/rangeTooltip.js"></script>
</head> </head>
<body> <body>
<div class="sdpi-wrapper"> <div class="sdpi-wrapper">
<div class="sdpi-item"> <div class="sdpi-item">
<div class="sdpi-item-label">Fallback</div> <div class="sdpi-item-label">Fallback</div>
<select class="sdpi-item-value sdProperty" id="fallbackBehavior" oninput="setSettings()"> <select class="sdpi-item-value sdProperty" id="fallbackBehavior" oninput="setSettings()">
@ -19,12 +22,25 @@
<option value="2">Main System Volume</option> <option value="2">Main System Volume</option>
</select> </select>
</div> </div>
<div type="range" class="sdpi-item sdShowTooltip">
<div class="sdpi-item-label">Step Size</div>
<div class="sdpi-item-value">
<span class="clickable" value="1">1</span>
<input type="range" min="1" max="10" value="1" class="sdProperty" data-suffix=" %" id="stepSize" oninput="setSettings()" />
<span class="clickable" value="1">10</span>
</div>
</div>
<div class="sdpi-info-label hidden" style="top: -1000;" value="">Tooltip</div>
<details> <details>
<p>If you look at windows volume mixer, you will see that not all applications can have their volume controlled. The fallback behavior controls what happens when you are in an application that doesn't show up in the volume mixer</p> <p>If you look at windows volume mixer, you will see that not all applications can have their volume controlled. The fallback behavior controls what happens when you are in an application that doesn't show up in the volume mixer</p>
<p>* System Sounds - Switch to system sounds. This will control windows sound effects such as when an error sound plays. If you're in an application that is making beeping sounds, this will often allow you to control those sounds while leaving things like your music/videos alone</p> <p>* System Sounds - Switch to system sounds. This will control windows sound effects such as when an error sound plays. If you're in an application that is making beeping sounds, this will often allow you to control those sounds while leaving things like your music/videos alone</p>
<p>* Previous App - Use the last app that had a volume control. This can result in the stream deck not changing after you have quit an application.</p> <p>* Previous App - Use the last app that had a volume control. This can result in the stream deck not changing after you have quit an application.</p>
<p>* Main System Volume - Switch to the main volume control for the system. This will change the volume of all applications</p> <p>* Main System Volume - Switch to the main volume control for the system. This will change the volume of all applications</p>
</details> </details>
</div> </div>
</body> </body>
</html> </html>

41
src/FocusVolumeControl/PropertyInspector/lib/rangeTooltip.css Normal file
View File

@ -0,0 +1,41 @@
.sdpi-info-label {
display: inline-block;
user-select: none;
position: absolute;
height: 15px;
width: auto;
text-align: center;
border-radius: 4px;
min-width: 44px;
max-width: 80px;
background: white;
font-size: 11px;
color: black;
z-index: 1000;
box-shadow: 0px 0px 12px rgba(0,0,0,.8);
padding: 2px;
}
.sdpi-info-label.hidden {
opacity: 0;
transition: opacity 0.25s linear;
}
.sdpi-info-label.shown {
position: absolute;
opacity: 1;
transition: opacity 0.25s ease-out;
}
.rangeLabel {
position: relative;
font-weight: normal;
margin-top: 22px;
left: -200px;
min-width: 200px;
text-align: center;
}
.percent::after {
content: "%";
}

122
src/FocusVolumeControl/PropertyInspector/lib/rangeTooltip.js Normal file
View File

@ -0,0 +1,122 @@
// ****************************************************************
// * EasyPI v1.3
// * Author: BarRaider
// *
// * rangeTooltip.js adds a tooltip showing the value of a range slider.
// * Requires rangeTooltip.css to be referenced in the HTML file.
// *
// * Project page: https://github.com/BarRaider/streamdeck-easypi
// * Support: http://discord.barraider.com
// ****************************************************************
var tooltip = document.querySelector('.sdpi-info-label');
var tw;
document.addEventListener("DOMContentLoaded", function () {
// Handler when the DOM is fully loaded
setRangeTooltips();
});
function calcRangeLabel(elem) {
const value = elem.value;
const percent = (elem.value - elem.min) / (elem.max - elem.min);
let tooltipValue = value;
let outputType = elem.dataset.suffix;
if (outputType && outputType == '%') {
tooltipValue = Math.round(100 * percent);
}
return tooltipValue + outputType;
}
function setElementLabel(elem, str) {
// Try to set this for the rangeLabel class, if it exists
let label = elem.querySelector('.rangeLabel');
if (label) {
label.innerHTML = str;
}
else {
console.log('setElementLabel ERROR! No .rangeLabel found', elem);
}
}
function setRangeTooltips() {
console.log("Loading setRangeTooltips");
if (!tooltip) {
tooltip = document.querySelector('.sdpi-info-label');
}
if (!tw) {
tw = tooltip.getBoundingClientRect().width;
}
const rangeToolTips = document.querySelectorAll('div[type=range].sdShowTooltip');
rangeToolTips.forEach(elem => {
let rangeSelector = elem.querySelector('input[type=range]');
let fn = () => {
const rangeRect = rangeSelector.getBoundingClientRect();
const w = rangeRect.width - tw / 2;
const labelStr = calcRangeLabel(rangeSelector);
// Set the tooltip
if (tooltip.classList.contains('hidden')) {
tooltip.style.top = '-1000px';
} else {
const percent = (rangeSelector.value - rangeSelector.min) / (rangeSelector.max - rangeSelector.min);
tooltip.style.left = (rangeRect.left + Math.round(w * percent) - tw / 4) + 'px';
tooltip.textContent = labelStr;
tooltip.style.top = (rangeRect.top - 32) + 'px';
}
setElementLabel(elem, labelStr)
};
rangeSelector.addEventListener(
'mouseenter',
function () {
tooltip.classList.remove('hidden');
tooltip.classList.add('shown');
fn();
},
false
);
rangeSelector.addEventListener(
'mouseout',
function () {
tooltip.classList.remove('shown');
tooltip.classList.add('hidden');
fn();
},
false
);
rangeSelector.addEventListener('input', fn, false);
rangeSelector.addEventListener("change", fn, false);
document.addEventListener(
'settingsUpdated',
function () {
console.log('rangeTooltip settingsUpdated called');
window.setTimeout(function () {
let str = calcRangeLabel(rangeSelector);
setElementLabel(elem, str);
}, 500);
},
false
);
document.addEventListener(
'websocketCreate',
function () {
console.log('rangeTooltip websocketCreate called');
window.setTimeout(function () {
let str = calcRangeLabel(rangeSelector);
setElementLabel(elem, str);
}, 500);
},
false
);
});
}

1650
src/FocusVolumeControl/PropertyInspector/lib/sdpi.css Normal file
View File

File diff suppressed because it is too large Load Diff

321
src/FocusVolumeControl/PropertyInspector/lib/sdtools.common.js Normal file
View File

@ -0,0 +1,321 @@
// ****************************************************************
// * EasyPI v1.4
// * Author: BarRaider
// *
// * JS library to simplify the communication between the
// * Stream Deck's Property Inspector and the plugin.
// *
// * Project page: https://github.com/BarRaider/streamdeck-easypi
// * Support: http://discord.barraider.com
// *
// * Initially forked from Elgato's common.js file
// ****************************************************************
var websocket = null,
uuid = null,
registerEventName = null,
actionInfo = {},
inInfo = {},
runningApps = [],
isQT = navigator.appVersion.includes('QtWebEngine');
function connectElgatoStreamDeckSocket(inPort, inUUID, inRegisterEvent, inInfo, inActionInfo) {
uuid = inUUID;
registerEventName = inRegisterEvent;
console.log(inUUID, inActionInfo);
actionInfo = JSON.parse(inActionInfo); // cache the info
inInfo = JSON.parse(inInfo);
websocket = new WebSocket('ws://127.0.0.1:' + inPort);
addDynamicStyles(inInfo.colors);
websocket.onopen = websocketOnOpen;
websocket.onmessage = websocketOnMessage;
// Allow others to get notified that the websocket is created
var event = new Event('websocketCreate');
document.dispatchEvent(event);
loadConfiguration(actionInfo.payload.settings);
initPropertyInspector();
}
function websocketOnOpen() {
var json = {
event: registerEventName,
uuid: uuid
};
websocket.send(JSON.stringify(json));
// Notify the plugin that we are connected
sendValueToPlugin('propertyInspectorConnected', 'property_inspector');
}
function websocketOnMessage(evt) {
// Received message from Stream Deck
var jsonObj = JSON.parse(evt.data);
if (jsonObj.event === 'didReceiveSettings') {
var payload = jsonObj.payload;
loadConfiguration(payload.settings);
}
else {
console.log("Ignored websocketOnMessage: " + jsonObj.event);
}
}
function loadConfiguration(payload) {
console.log('loadConfiguration');
console.log(payload);
for (var key in payload) {
try {
var elem = document.getElementById(key);
if (elem.classList.contains("sdCheckbox")) { // Checkbox
elem.checked = payload[key];
}
else if (elem.classList.contains("sdFile")) { // File
var elemFile = document.getElementById(elem.id + "Filename");
elemFile.innerText = payload[key];
if (!elemFile.innerText) {
elemFile.innerText = "No file...";
}
}
else if (elem.classList.contains("sdList")) { // Dynamic dropdown
var textProperty = elem.getAttribute("sdListTextProperty");
var valueProperty = elem.getAttribute("sdListValueProperty");
var valueField = elem.getAttribute("sdValueField");
var items = payload[key];
elem.options.length = 0;
for (var idx = 0; idx < items.length; idx++) {
var opt = document.createElement('option');
opt.value = items[idx][valueProperty];
opt.text = items[idx][textProperty];
elem.appendChild(opt);
}
elem.value = payload[valueField];
}
else if (elem.classList.contains("sdHTML")) { // HTML element
elem.innerHTML = payload[key];
}
else { // Normal value
elem.value = payload[key];
}
console.log("Load: " + key + "=" + payload[key]);
}
catch (err) {
console.log("loadConfiguration failed for key: " + key + " - " + err);
}
}
}
function setSettings() {
var payload = {};
var elements = document.getElementsByClassName("sdProperty");
Array.prototype.forEach.call(elements, function (elem) {
var key = elem.id;
if (elem.classList.contains("sdCheckbox")) { // Checkbox
payload[key] = elem.checked;
}
else if (elem.classList.contains("sdFile")) { // File
var elemFile = document.getElementById(elem.id + "Filename");
payload[key] = elem.value;
if (!elem.value) {
// Fetch innerText if file is empty (happens when we lose and regain focus to this key)
payload[key] = elemFile.innerText;
}
else {
// Set value on initial file selection
elemFile.innerText = elem.value;
}
}
else if (elem.classList.contains("sdList")) { // Dynamic dropdown
var valueField = elem.getAttribute("sdValueField");
payload[valueField] = elem.value;
}
else if (elem.classList.contains("sdHTML")) { // HTML element
var valueField = elem.getAttribute("sdValueField");
payload[valueField] = elem.innerHTML;
}
else { // Normal value
payload[key] = elem.value;
}
console.log("Save: " + key + "<=" + payload[key]);
});
setSettingsToPlugin(payload);
}
function setSettingsToPlugin(payload) {
if (websocket && (websocket.readyState === 1)) {
const json = {
'event': 'setSettings',
'context': uuid,
'payload': payload
};
websocket.send(JSON.stringify(json));
var event = new Event('settingsUpdated');
document.dispatchEvent(event);
}
}
// Sends an entire payload to the sendToPlugin method
function sendPayloadToPlugin(payload) {
if (websocket && (websocket.readyState === 1)) {
const json = {
'action': actionInfo['action'],
'event': 'sendToPlugin',
'context': uuid,
'payload': payload
};
websocket.send(JSON.stringify(json));
}
}
// Sends one value to the sendToPlugin method
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));
}
}
function openWebsite() {
if (websocket && (websocket.readyState === 1)) {
const json = {
'event': 'openUrl',
'payload': {
'url': 'https://BarRaider.com'
}
};
websocket.send(JSON.stringify(json));
}
}
if (!isQT) {
document.addEventListener('DOMContentLoaded', function () {
initPropertyInspector();
});
}
window.addEventListener('beforeunload', function (e) {
e.preventDefault();
// Notify the plugin we are about to leave
sendValueToPlugin('propertyInspectorWillDisappear', 'property_inspector');
// Don't set a returnValue to the event, otherwise Chromium with throw an error.
});
function prepareDOMElements(baseElement) {
baseElement = baseElement || document;
/**
* You could add a 'label' to a textares, e.g. to show the number of charactes already typed
* or contained in the textarea. This helper updates this label for you.
*/
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.textContent = maxl ? `${e.value.length}/${maxl}` : `${e.value.length}`;
}
};
fn();
e.onkeyup = fn;
}
});
}
function initPropertyInspector() {
// Place to add functions
prepareDOMElements(document);
}
function addDynamicStyles(clrs) {
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 */
/*
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);
}