Skip to content

Commit

Permalink
Merge pull request #13 from atcurtis/11-colour
Browse files Browse the repository at this point in the history 
More configurable colour
  • Loading branch information
@atcurtis
atcurtis authored Nov 10, 2023
2 parents 6843f8f + 0f25b5a commit d71fefb
Show file tree
Hide file tree
Showing 6 changed files with 122 additions and 35 deletions.
Binary file modified Release/org.xiphis.ohs.streamDeckPlugin
View file
Binary file not shown.
83 changes: 65 additions & 18 deletions Sources/org.xiphis.ohs.sdPlugin/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,19 @@ const action = {
if (settings.hasOwnProperty('sensor_background')) {
sensor.setSensorBackground(settings.sensor_background);
}


if (settings.hasOwnProperty('sensor_valuecolour')) {
sensor.setSensorValueColour(settings.sensor_valuecolour);
}

if (settings.hasOwnProperty('sensor_gradicule')) {
sensor.setSensorGradicule(settings.sensor_gradicule);
}

if (settings.hasOwnProperty('sensor_fillcolour')) {
sensor.setSensorFillColour(settings.sensor_fillcolour);
}

if (settings.hasOwnProperty('sensor_minimum')) {
sensor.setSensorMinimum(settings.sensor_minimum);
}
Expand Down Expand Up @@ -206,8 +218,11 @@ function OpenHardwareSensor(jsonObj) {
history = [],
max_history = 60,
count = 0,
background = '#181818',
background = '#000000',
gradicule = '#181818',
foreground = '#ff8800',
valueColour = '#ff8800',
fillColour = '#ff8800',
minimum = null,
maximum = null,
knob;
Expand Down Expand Up @@ -252,7 +267,8 @@ function OpenHardwareSensor(jsonObj) {
const fontSizeString = fontSize.toString();
const valueStr = value.Value;

ctx.clearRect(0, 0, width, height);
ctx.fillStyle = background;
ctx.fillRect(0, 0, width, height);

let w = [];
for (var wx = 0, wd = (width - 1) / (max_history + 0.1); wx <= width; wx += wd) {
Expand All @@ -265,7 +281,7 @@ function OpenHardwareSensor(jsonObj) {
const scale = height / range;


ctx.strokeStyle = background;
ctx.strokeStyle = gradicule;
ctx.lineWidth = 3.1
ctx.beginPath();
ctx.moveTo(0, height + min * scale);
Expand All @@ -285,7 +301,7 @@ function OpenHardwareSensor(jsonObj) {

ctx.strokeStyle = foreground;
ctx.lineJoin = "round";
ctx.lineWidth = 1.1;
ctx.lineWidth = 3.1;
var draw;
draw = function(x, y) {
ctx.moveTo(x, y);
Expand All @@ -303,22 +319,22 @@ function OpenHardwareSensor(jsonObj) {
last_x = x;
}
if (doFill) {
draw(last_x, height);
draw(0, height);
draw(last_x, height+1);
draw(0, height+1);
ctx.closePath();
ctx.fillStyle = foreground;
ctx.fillStyle = fillColour;
ctx.fill();
}
ctx.stroke();

ctx.font = fontSizeString + 'px sans-serif';
ctx.fillStyle = foreground;
ctx.strokeStyle = 'black';
ctx.fillStyle = valueColour;
ctx.strokeStyle = background;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.lineWidth = 3.1;
ctx.shadowBlur = 3.8;
ctx.shadowColor = 'black';
ctx.shadowColor = background;
ctx.strokeText(valueStr, centerX, centerY);
ctx.lineWidth = 1;
ctx.fillText(valueStr, centerX, centerY);
Expand All @@ -335,9 +351,10 @@ function OpenHardwareSensor(jsonObj) {
const fontSize = 0.3 * smaller;
const fontSizeString = fontSize.toString();
const valueStr = value.Value;
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = background;
ctx.fillRect(0, 0, width, height);
ctx.font = fontSizeString + 'px sans-serif';
ctx.fillStyle = foreground;
ctx.fillStyle = valueColour;
ctx.strokeStyle = background;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
Expand All @@ -354,8 +371,11 @@ function OpenHardwareSensor(jsonObj) {
knob.resize = function() {};
knob.setProperty("angleStart", -0.75 * Math.PI);
knob.setProperty("angleEnd", 0.75 * Math.PI);
knob.setProperty("colorBG", background);
knob.setProperty("colorFG", foreground);
knob.setProperty("background", background);
knob.setProperty("foreground", foreground);
knob.setProperty("gradicule", gradicule);
knob.setProperty("filling", fillColour);
knob.setProperty("colorValue", valueColour);
knob.setProperty("trackWidth", 0.4);
knob.setProperty("fnValueToString", function(ignore) {
return value.Value;
Expand Down Expand Up @@ -396,15 +416,39 @@ function OpenHardwareSensor(jsonObj) {
function setSensorForeground(fg) {
foreground = fg;
if (knob) {
knob.setProperty("colorFG", foreground);
knob.setProperty("foreground", foreground);
}
drawSensor();
}

function setSensorBackground(bg) {
background = bg;
if (knob) {
knob.setProperty("colorBG", background);
knob.setProperty("background", background);
}
drawSensor();
}

function setSensorGradicule(fg) {
gradicule = fg;
if (knob) {
knob.setProperty("colorBG", gradicule);
}
drawSensor();
}

function setSensorFillColour(bg) {
fillColour = bg;
if (knob) {
knob.setProperty("colorFG", fillColour);
}
drawSensor();
}

function setSensorValueColour(fg) {
valueColour = fg;
if (knob) {
knob.setProperty("colorValue", valueColour);
}
drawSensor();
}
Expand Down Expand Up @@ -451,7 +495,10 @@ function OpenHardwareSensor(jsonObj) {
setSensorMinimum: setSensorMinimum,
setSensorMaximum: setSensorMaximum,
setSensorBackground: setSensorBackground,
setSensorForeground: setSensorForeground
setSensorForeground: setSensorForeground,
setSensorGradicule: setSensorGradicule,
setSensorFillColour: setSensorFillColour,
setSensorValueColour: setSensorValueColour
}
}

24 changes: 18 additions & 6 deletions Sources/org.xiphis.ohs.sdPlugin/js/pureknob.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,8 @@
* Properties of this bar graph.
*/
'_properties': {
'background': '#000000',
'foreground': '#ff8800',
'colorBG': '#181818',
'colorFG': '#ff8800',
'colorMarkers': '#888888',
Expand Down Expand Up @@ -137,6 +139,8 @@
'redraw': function() {
this.resize();
const properties = this._properties;
const background = properties.background;
const foreground = properties.foreground;
const colorTrack = properties.colorBG;
const colorFilling = properties.colorFG;
const colorMarkers = properties.colorMarkers;
Expand Down Expand Up @@ -164,7 +168,8 @@
/*
* Clear the canvas.
*/
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = background;
ctx.fillRect(0, 0, width, height);

/*
* Check if markers should be drawn.
Expand Down Expand Up @@ -207,7 +212,7 @@
/*
* Prepare for drawing the peaks.
*/
ctx.strokeStyle = colorFilling;
ctx.strokeStyle = foreground;

/*
* Draw the peaks.
Expand Down Expand Up @@ -412,9 +417,12 @@
'angleEnd': 2.0 * Math.PI,
'angleOffset': -0.5 * Math.PI,
'angleStart': 0,
'background': '#000000',
'foreground': '#ff8800',
'colorBG': '#181818',
'colorFG': '#ff8800',
'colorLabel': '#ffffff',
'colorValue': '#ff8800',
'fnStringToValue': function(string) { return parseInt(string); },
'fnValueToString': function(value) { return value.toString(); },
'label': null,
Expand Down Expand Up @@ -503,9 +511,12 @@
const relValue = (value - valMin) / (valMax - valMin);
const relAngle = relValue * (angleEnd - angleStart);
const angleVal = actualStart + relAngle;
const foreground = properties.foreground;
const background = properties.background;
const colorTrack = properties.colorBG;
const colorFilling = properties.colorFG;
const colorLabel = properties.colorLabel;
const colorValue = properties.colorValue;
const textScale = properties.textScale;
const trackWidth = properties.trackWidth;
const height = this._height;
Expand All @@ -526,7 +537,8 @@
/*
* Clear the canvas.
*/
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = background;
ctx.fillRect(0, 0, width, height);

/*
* Draw the track.
Expand Down Expand Up @@ -561,13 +573,13 @@
* Draw the number.
*/
ctx.font = fontSizeString + 'px sans-serif';
ctx.fillStyle = colorFilling;
ctx.strokeStyle = 'black';
ctx.fillStyle = colorValue;
ctx.strokeStyle = background;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.lineWidth = 3.1;
ctx.shadowBlur = 3.8;
ctx.shadowColor = 'black';
ctx.shadowColor = background;
ctx.strokeText(valueStr, centerX, centerY);
ctx.lineWidth = 1;
ctx.fillText(valueStr, centerX, centerY);
Expand Down
2 changes: 1 addition & 1 deletion Sources/org.xiphis.ohs.sdPlugin/manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"Name": "OpenHardwareSensor",
"Icon": "action/images/action",
"URL": "https://github.com/atcurtis/streamdeck-ohs",
"Version": "1.1.2",
"Version": "1.3.0",
"ApplicationsToMonitor": {
"windows": ["OpenHardwareMonitor.exe"]
},
Expand Down
5 changes: 5 additions & 0 deletions Sources/org.xiphis.ohs.sdPlugin/propertyinspector/css/sdpi.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,6 +330,11 @@ ol.sdpi-item-value {
text-align: center;
}

table.noborder, td.noborder {
border: none;
border-collapse: collapse;
}

table > caption {
margin: 2px;
}
Expand Down
43 changes: 33 additions & 10 deletions Sources/org.xiphis.ohs.sdPlugin/propertyinspector/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,25 +30,48 @@
</select>
</div>

<div class="sdpi-item" id="combo_foreground">
<div class="sdpi-item-label">Foreground</div>
<input type="color" class="sdpi-item-value" id="sensor_foreground" value="#ff8800">
</div>
<hr/>

<div class="sdpi-item" id="combo_background">
<div class="sdpi-item-label">Background</div>
<input type="color" class="sdpi-item-value" id="sensor_background" value="#181818">
</div>
<table class="noborder">
<tr>
<td class="noborder" style="vertical-align:top">
<div class="sdpi-item" id="combo_background">
<div class="sdpi-item-label">Background</div>
<input type="color" class="sdpi-item-value" id="sensor_background" value="#000000">
</div>
<div class="sdpi-item" id="combo_fillcolour">
<div class="sdpi-item-label">Filling</div>
<input type="color" class="sdpi-item-value" id="sensor_fillcolour" value="#ff8800">
</div>
<div class="sdpi-item" id="combo_gradicule">
<div class="sdpi-item-label">Gradicule</div>
<input type="color" class="sdpi-item-value" id="sensor_gradicule" value="#181818">
</div>
</td>
<td class="noborder" style="vertical-align:top">
<div class="sdpi-item" id="combo_foreground">
<div class="sdpi-item-label">Foreground</div>
<input type="color" class="sdpi-item-value" id="sensor_foreground" value="#ff8800">
</div>
<div class="sdpi-item" id="combo_valuecolour">
<div class="sdpi-item-label">Value Text</div>
<input type="color" class="sdpi-item-value" id="sensor_valuecolour" value="#ff8800">
</div>
</td>
</tr>
</table>

<hr/>

<div class="sdpi-item" id="input_minimum">
<div class="sdpi-item-label">Minimum Value</div>
<input type="number" class="sdpi-item-value" id="sensor_minimum" inputmode="numeric" pattern="[0-9]*(\.[0-9]+)?">
</div>
</div>

<div class="sdpi-item" id="input_maximum">
<div class="sdpi-item-label">Maximum Value</div>
<input type="number" class="sdpi-item-value" id="sensor_maximum" inputmode="numeric" pattern="[0-9]*(\.[0-9]+)?">
</div>
</div>

<!-- END OF SDPI-WRAPPER -->
</div>
Expand Down

0 comments on commit d71fefb

Please sign in to comment.