Merge pull request #1 from VictorGrycuk/dev/1.1

[v1.1] Implement new dynamic functionality
VictorGrycuk · Sep 1, 2020 · 27b1547 · 27b1547
2 parents f875ae4 + 4f902ac
commit 27b1547
Show file tree

Hide file tree

Showing 9 changed files with 130 additions and 113 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
-# Color Picker for StreamDeck 
+# Color Picker for StreamDeck
+
 ## Description
 
 As a [color-blind](https://en.wikipedia.org/wiki/Color_blindness) person sometimes I struggle to recognize certain colors, so I thought it would be nice to have the functionality of [WhatColor](http://www.hikarun.com/e/) in StreamDeck. And while I was there, I decided to add the options to show their RGB or hexadecimal value.
@@ -12,17 +13,19 @@ Also check my [KeePass plugin](https://github.com/VictorGrycuk/StreamDeck-KeePas
 It was done using BarRaider's [Stream Deck Tools](https://github.com/BarRaider/streamdeck-tools).
 
 ## Features
-#### Color Picker
+
+### Color Picker
 
 When pressed, it will return either the color name, the RGB value, or the hexadecimal value of the color where the mouse is. It has the following configuration:
 
-- **Value to show:** The value to show on the key:
-  - Color name
-  - RGB Value
-  - Hex Value
-- **Copy value to clipboard:** If checked, it will copy the selected value to the clipboard. For the RGB it will copy the RGB value delimited by coma, for the hexadecimal value it will copy the hexadecimal without the hash character.
+-   **Value to show:** The value to show on the key:
+    -   Color name
+    -   RGB Value
+    -   Hex Value
+
+-   **Copy value to clipboard:** If checked, it will copy the selected value to the clipboard. For the RGB it will copy the RGB value delimited by coma, for the hexadecimal value it will copy the hexadecimal without the hash character.
 
-#### Custom Color Name
+### Custom Color Name
 
 I am using the [WhatColor](http://www.hikarun.com/e/) names definition for the 16 VGA color. I might expand this, not sure.
 
@@ -32,11 +35,10 @@ However, have in mind that in its current state, the plugin has a static font si
 
 ## Future Features
 
-I am planning to add two different behaviour for the plugin:
+I am planning to add one more behaviour for the plugin:
 
-- **Dynamic:** Follow the mouse around and update the data shown in the key every 1 second.
-- **Fixed Dynamic:** Same as above, except at a fixed screen location.
+-   **Fixed Dynamic:** Same as above, except at a fixed screen location.
 
----
+* * *
 
-The icons are modified version of *Color* and *iOS Filled* at [Icon8](https://icons8.com).
+The icons are modified version of _Color_ and _iOS Filled_ at [Icon8](https://icons8.com).
diff --git a/StreamDeck.ColorPicker/StreamDeck.ColorPicker/Program.cs b/StreamDeck.ColorPicker/StreamDeck.ColorPicker/Program.cs
@@ -1,19 +1,11 @@
 using BarRaider.SdTools;
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
 
 namespace StreamDeck.ColorPicker
 {
-    class Program
+    static class Program
     {
         static void Main(string[] args)
         {
-            // Uncomment this line of code to allow for debugging
-            //while (!System.Diagnostics.Debugger.IsAttached) { System.Threading.Thread.Sleep(100); }
-
             SDWrapper.Run(args);
         }
     }

diff --git a/StreamDeck.ColorPicker/StreamDeck.ColorPicker/PropertyInspector/ColorPickerPI.html b/StreamDeck.ColorPicker/StreamDeck.ColorPicker/PropertyInspector/ColorPickerPI.html
@@ -12,6 +12,13 @@
 </head>
 <body>
     <div class="sdpi-wrapper">
+        <div class="sdpi-item" id="dvFunctionType">
+            <div class="sdpi-item-label">Select Type</div>
+            <select class="sdpi-item-value select sdProperty" id="functionType" oninput="setSettings()">
+               <option value="onKeyPress">On Key Press</option>
+               <option value="dynamic">Dynamic</option>
+            </select>
+        </div>
         <div class="sdpi-item" id="dvValueToShow">
             <div class="sdpi-item-label">Value to show</div>
             <select class="sdpi-item-value select sdProperty" id="valueToShow" oninput="setSettings()">

diff --git a/StreamDeck.ColorPicker/StreamDeck.ColorPicker/PropertyInspector/PluginActionPI.html b/StreamDeck.ColorPicker/StreamDeck.ColorPicker/PropertyInspector/PluginActionPI.html
diff --git a/StreamDeck.ColorPicker/StreamDeck.ColorPicker/PropertyInspector/sdtools.common.js b/StreamDeck.ColorPicker/StreamDeck.ColorPicker/PropertyInspector/sdtools.common.js
@@ -42,16 +42,17 @@ function websocketOnMessage(evt) {
     // Received message from Stream Deck
     var jsonObj = JSON.parse(evt.data);
 
+    var payload;
     if (jsonObj.event === 'sendToPropertyInspector') {
-        var payload = jsonObj.payload;
+        payload = jsonObj.payload;
         loadConfiguration(payload);
     }
     else if (jsonObj.event === 'didReceiveSettings') {
-        var payload = jsonObj.payload;
+        payload = jsonObj.payload;
         loadConfiguration(payload.settings);
     }
     else {
-        console.log("Unhandled websocketOnMessage: " + jsonObj.event);
+        console.log('Unhandled websocketOnMessage: ' + jsonObj.event);
     }
 }
 
@@ -61,20 +62,20 @@ function loadConfiguration(payload) {
     for (var key in payload) {
         try {
             var elem = document.getElementById(key);
-            if (elem.classList.contains("sdCheckbox")) { // Checkbox
+            if (elem.classList.contains('sdCheckbox')) { // Checkbox
                 elem.checked = payload[key];
             }
-            else if (elem.classList.contains("sdFile")) { // File
-                var elemFile = document.getElementById(elem.id + "Filename");
+            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...";
+                    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");
+            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;
@@ -87,31 +88,32 @@ function loadConfiguration(payload) {
                 }
                 elem.value = payload[valueField];
             }
-            else if (elem.classList.contains("sdHTML")) { // HTML element
+            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]);
+            console.log(`Load: ${ key }=${ payload[key] }`);
         }
         catch (err) {
-            console.log("loadConfiguration failed for key: " + key + " - " + err);
+            console.log(`loadConfiguration failed for key: ${ key } - ${ err }`);
         }
     }
 }
 
 function setSettings() {
     var payload = {};
-    var elements = document.getElementsByClassName("sdProperty");
+    var elements = document.getElementsByClassName('sdProperty');
 
     Array.prototype.forEach.call(elements, function (elem) {
         var key = elem.id;
-        if (elem.classList.contains("sdCheckbox")) { // Checkbox
+        var valueField;
+        if (elem.classList.contains('sdCheckbox')) { // Checkbox
             payload[key] = elem.checked;
         }
-        else if (elem.classList.contains("sdFile")) { // File
-            var elemFile = document.getElementById(elem.id + "Filename");
+        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)
@@ -122,18 +124,18 @@ function setSettings() {
                 elemFile.innerText = elem.value;
             }
         }
-        else if (elem.classList.contains("sdList")) { // Dynamic dropdown
-            var valueField = elem.getAttribute("sdValueField");
+        else if (elem.classList.contains('sdList')) { // Dynamic dropdown
+            valueField = elem.getAttribute('sdValueField');
             payload[valueField] = elem.value;
         }
-        else if (elem.classList.contains("sdHTML")) { // HTML element
-            var valueField = elem.getAttribute("sdValueField");
+        else if (elem.classList.contains('sdHTML')) { // HTML element
+            valueField = elem.getAttribute('sdValueField');
             payload[valueField] = elem.innerHTML;
         }
         else { // Normal value
             payload[key] = elem.value;
         }
-        console.log("Save: " + key + "<=" + payload[key]);
+        console.log(`Save: ${ key }<=${ payload[key] }`);
     });
     setSettingsToPlugin(payload);
 }
@@ -155,7 +157,7 @@ function setSettingsToPlugin(payload) {
 function sendPayloadToPlugin(payload) {
     if (websocket && (websocket.readyState === 1)) {
         const json = {
-            'action': actionInfo['action'],
+            'action': actionInfo.action,
             'event': 'sendToPlugin',
             'context': uuid,
             'payload': payload
@@ -168,7 +170,7 @@ function sendPayloadToPlugin(payload) {
 function sendValueToPlugin(value, param) {
     if (websocket && (websocket.readyState === 1)) {
         const json = {
-            'action': actionInfo['action'],
+            'action': actionInfo.action,
             'event': 'sendToPlugin',
             'context': uuid,
             'payload': {
@@ -231,20 +233,20 @@ function addDynamicStyles(clrs) {
     input[type="radio"]:active + label span,
     input[type="checkbox"]:active:checked + label span,
     input[type="checkbox"]:active + label span {
-      background-color: ${clrs.mouseDownColor};
+    background-color: ${clrs.mouseDownColor};
     }
 
     input[type="radio"]:active + label span,
     input[type="checkbox"]:active + label span {
-      background-color: ${clrs.buttonPressedBorderColor};
+    background-color: ${clrs.buttonPressedBorderColor};
     }
 
     td.selected,
     td.selected:hover,
     li.selected:hover,
     li.selected {
-      color: white;
-      background-color: ${clrs.highlightColor};
+    color: white;
+    background-color: ${clrs.highlightColor};
     }
 
     .sdpi-file-label > label:active,
@@ -253,9 +255,9 @@ function addDynamicStyles(clrs) {
     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};
+    background-color: ${clrs.buttonPressedBackgroundColor};
+    color: ${clrs.buttonPressedTextColor};
+    border-color: ${clrs.buttonPressedBorderColor};
     }
 
     ::-webkit-progress-value,
@@ -269,7 +271,7 @@ function addDynamicStyles(clrs) {
     }
     `;
     document.body.appendChild(node);
-};
+}
 
 /** UTILITIES */
 

diff --git a/StreamDeck.ColorPicker/StreamDeck.ColorPicker/ScreenHelper.cs b/StreamDeck.ColorPicker/StreamDeck.ColorPicker/ScreenHelper.cs
@@ -1,12 +1,8 @@
-using System;
-using System.Collections.Generic;
+using BarRaider.SdTools;
+using System;
 using System.Drawing;
-using System.Linq;
-using System.Runtime.InteropServices;
-using System.Text;
-using System.Threading.Tasks;
 using System.Drawing.Imaging;
-using BarRaider.SdTools;
+using System.Runtime.InteropServices;
 
 namespace StreamDeck.ColorPicker
 {
@@ -50,7 +46,7 @@ public static Color GetColor(Point location)
                 {
                     IntPtr hSrcDC = gsrc.GetHdc();
                     IntPtr hDC = gdest.GetHdc();
-                    int retval = BitBlt(hDC, 0, 0, 1, 1, hSrcDC, location.X, location.Y, (int)CopyPixelOperation.SourceCopy);
+                    _ = BitBlt(hDC, 0, 0, 1, 1, hSrcDC, location.X, location.Y, (int)CopyPixelOperation.SourceCopy);
                     gdest.ReleaseHdc();
                     gsrc.ReleaseHdc();
                 }