Hotcue RGB colors

CMakeLists.txt

@@ -167,7 +167,8 @@ add_library(mixxx-lib STATIC EXCLUDE_FROM_ALL
   src/control/controlproxy.cpp
   src/control/controlpushbutton.cpp
   src/control/controlttrotary.cpp
-  src/controllers/colorjsproxy.cpp
+  src/controllers/colormapper.cpp
+  src/controllers/colormapperjsproxy.cpp
   src/controllers/controller.cpp
   src/controllers/controllerdebug.cpp
   src/controllers/controllerengine.cpp
@@ -313,7 +314,6 @@ add_library(mixxx-lib STATIC EXCLUDE_FROM_ALL
   src/errordialoghandler.cpp
   src/library/analysisfeature.cpp
   src/library/analysislibrarytablemodel.cpp
-  src/library/trackloader.cpp
   src/library/autodj/autodjfeature.cpp
   src/library/autodj/autodjprocessor.cpp
   src/library/autodj/dlgautodj.cpp
@@ -410,6 +410,7 @@ add_library(mixxx-lib STATIC EXCLUDE_FROM_ALL
   src/library/tableitemdelegate.cpp
   src/library/trackcollection.cpp
   src/library/trackcollectionmanager.cpp
+  src/library/trackloader.cpp
   src/library/traktor/traktorfeature.cpp
   src/library/treeitem.cpp
   src/library/treeitemmodel.cpp
@@ -476,6 +477,7 @@ add_library(mixxx-lib STATIC EXCLUDE_FROM_ALL
   src/preferences/dialog/dlgprefwaveformdlg.ui
   src/preferences/dlgpreferencepage.cpp
   src/preferences/effectsettingsmodel.cpp
+  src/preferences/colorpalettesettings.cpp
   src/preferences/replaygainsettings.cpp
   src/preferences/settingsmanager.cpp
   src/preferences/upgrade.cpp
@@ -538,7 +540,7 @@ add_library(mixxx-lib STATIC EXCLUDE_FROM_ALL
   src/util/cache.cpp
   src/util/cmdlineargs.cpp
   src/util/color/color.cpp
-  src/util/color/predefinedcolor.cpp
+  src/util/color/colorpalette.cpp
   src/util/console.cpp
   src/util/db/dbconnection.cpp
   src/util/db/dbconnectionpool.cpp
@@ -926,6 +928,9 @@ add_executable(mixxx-test
   src/test/broadcastsettings_test.cpp
   src/test/cache_test.cpp
   src/test/channelhandle_test.cpp
+  src/test/colorconfig_test.cpp
+  src/test/colormapperjsproxy_test.cpp
+  src/test/colorpalette_test.cpp
   src/test/compatibility_test.cpp
   src/test/configobject_test.cpp
   src/test/controller_preset_validation_test.cpp

build/depends.py

@@ -790,6 +790,7 @@ def sources(self, build):
                    "src/preferences/effectsettingsmodel.cpp",
                    "src/preferences/broadcastprofile.cpp",
                    "src/preferences/upgrade.cpp",
+                   "src/preferences/colorpalettesettings.cpp",
                    "src/preferences/dlgpreferencepage.cpp",
 
                    "src/effects/effectmanifest.cpp",
@@ -925,7 +926,8 @@ def sources(self, build):
                    "src/controllers/midi/midioutputhandler.cpp",
                    "src/controllers/softtakeover.cpp",
                    "src/controllers/keyboard/keyboardeventfilter.cpp",
-                   "src/controllers/colorjsproxy.cpp",
+                   "src/controllers/colormapper.cpp",
+                   "src/controllers/colormapperjsproxy.cpp",
 
                    "src/main.cpp",
                    "src/mixxx.cpp",
@@ -1283,6 +1285,7 @@ def sources(self, build):
                    "src/util/cache.cpp",
                    "src/util/console.cpp",
                    "src/util/color/color.cpp",
+                   "src/util/color/colorpalette.cpp",
                    "src/util/db/dbconnection.cpp",
                    "src/util/db/dbconnectionpool.cpp",
                    "src/util/db/dbconnectionpooler.cpp",
@@ -1309,8 +1312,7 @@ def sources(self, build):
                    "src/util/desktophelper.cpp",
                    "src/util/widgetrendertimer.cpp",
                    "src/util/workerthread.cpp",
-                   "src/util/workerthreadscheduler.cpp",
-                   "src/util/color/predefinedcolor.cpp"
+                   "src/util/workerthreadscheduler.cpp"
                    ]
 
         proto_args = {

res/controllers/.eslintrc.json

@@ -1,10 +1,24 @@
 {
   "globals": {
+    "ColorMapper": "readonly",
     "_": "readonly",
-    "color": "readonly",
     "components": "readonly",
     "engine": "readonly",
     "midi": "readonly",
-    "script": "readonly"
+    "printObject": "readonly",
+    "stringifyObject": "readonly",
+    "arrayContains": "readonly",
+    "secondstominutes": "readonly",
+    "msecondstominutes": "readonly",
+    "colorCodeToObject": "readonly",
+    "colorCodeFromObject": "readonly",
+    "script": "readonly",
+    "bpm": "readonly",
+    "ButtonState": "readonly",
+    "LedState": "readonly",
+    "Controller": "readonly",
+    "Button": "readonly",
+    "Control": "readonly",
+    "Deck": "readonly"
   }
 }

res/controllers/Roland_DJ-505-scripts.js

@@ -970,17 +970,24 @@ DJ505.PadColor = {
     DIM_MODIFIER: 0x10,
 };
 
-DJ505.PadColorMap = [
-    DJ505.PadColor.OFF,
-    DJ505.PadColor.RED,
-    DJ505.PadColor.GREEN,
-    DJ505.PadColor.BLUE,
-    DJ505.PadColor.YELLOW,
-    DJ505.PadColor.CELESTE,
-    DJ505.PadColor.PURPLE,
-    DJ505.PadColor.APRICOT,
-    DJ505.PadColor.WHITE,
-];
+DJ505.PadColorMap = new ColorMapper({
+    "#CC0000": DJ505.PadColor.RED,
+    "#CC4400": DJ505.PadColor.CORAL,
+    "#CC8800": DJ505.PadColor.ORANGE,
+    "#CCCC00": DJ505.PadColor.YELLOW,
+    "#88CC00": DJ505.PadColor.GREEN,
+    "#00CC00": DJ505.PadColor.APPLEGREEN,
+    "#00CC88": DJ505.PadColor.AQUAMARINE,
+    "#00CCCC": DJ505.PadColor.TURQUOISE,
+    "#0088CC": DJ505.PadColor.CELESTE,
+    "#0000CC": DJ505.PadColor.BLUE,
+    "#4400CC": DJ505.PadColor.AZURE,
+    "#8800CC": DJ505.PadColor.PURPLE,
+    "#CC00CC": DJ505.PadColor.MAGENTA,
+    "#CC0044": DJ505.PadColor.RED,
+    "#FFCCCC": DJ505.PadColor.APRICOT,
+    "#FFFFFF": DJ505.PadColor.WHITE,
+});
 
 DJ505.PadSection = function(deck, offset) {
     // TODO: Add support for missing modes (flip, slicer, slicerloop)
@@ -1239,7 +1246,6 @@ DJ505.HotcueMode = function(deck, offset) {
     this.ledControl = DJ505.PadMode.HOTCUE;
     this.color = DJ505.PadColor.WHITE;
 
-    var hotcueColors = [this.color].concat(DJ505.PadColorMap.slice(1));
     this.pads = new components.ComponentContainer();
     for (var i = 0; i <= 7; i++) {
         this.pads[i] = new components.HotcueButton({
@@ -1251,7 +1257,7 @@ DJ505.HotcueMode = function(deck, offset) {
             group: deck.currentDeck,
             on: this.color,
             off: this.color + DJ505.PadColor.DIM_MODIFIER,
-            colors: hotcueColors,
+            colorMapper: DJ505.PadColorMap,
             outConnect: false,
         });
     }
@@ -1287,7 +1293,6 @@ DJ505.CueLoopMode = function(deck, offset) {
     this.ledControl = DJ505.PadMode.HOTCUE;
     this.color = DJ505.PadColor.BLUE;
 
-    var cueloopColors = [this.color].concat(DJ505.PadColorMap.slice(1));
     this.PerformancePad = function(n) {
         this.midi = [0x94 + offset, 0x14 + n];
         this.number = n + 1;
@@ -1303,7 +1308,7 @@ DJ505.CueLoopMode = function(deck, offset) {
         group: deck.currentDeck,
         on: this.color,
         off: this.color + DJ505.PadColor.DIM_MODIFIER,
-        colors: cueloopColors,
+        colorMapper: DJ505.PadColorMap,
         outConnect: false,
         unshift: function() {
             this.input = function(channel, control, value, status, group) {
@@ -1596,14 +1601,13 @@ DJ505.PitchPlayMode = function(deck, offset) {
     this.color = DJ505.PadColor.GREEN;
     this.cuepoint = 1;
     this.range = PitchPlayRange.MID;
-    var pitchplayColors = [this.color].concat(DJ505.PadColorMap.slice(1));
 
     this.PerformancePad = function(n) {
         this.midi = [0x94 + offset, 0x14 + n];
         this.number = n + 1;
         this.on = this.color + DJ505.PadColor.DIM_MODIFIER;
-        this.colors = pitchplayColors;
-        this.colorIdKey = "hotcue_" + this.number + "_color_id";
+        this.colorMapper = DJ505.PadColorMap;
+        this.colorKey = "hotcue_" + this.number + "_color";
         components.Button.call(this);
     };
     this.PerformancePad.prototype = new components.Button({
@@ -1614,10 +1618,10 @@ DJ505.PitchPlayMode = function(deck, offset) {
         mode: this,
         outConnect: false,
         off: DJ505.PadColor.OFF,
-        outputColor: function(id) {
+        outputColor: function(colorCode) {
             // For colored hotcues (shifted only)
-            var color = this.colors[id];
-            this.send((this.mode.cuepoint === this.number) ? color : (color + DJ505.PadColor.DIM_MODIFIER));
+            var midiColor = this.colorMapper.getNearestValue(colorCode);
+            this.send((this.mode.cuepoint === this.number) ? midiColor : (midiColor + DJ505.PadColor.DIM_MODIFIER));
         },
         unshift: function() {
             this.outKey = "pitch_adjust";
@@ -1665,8 +1669,8 @@ DJ505.PitchPlayMode = function(deck, offset) {
             this.outKey = "hotcue_" + this.number + "_enabled";
             this.output = function(value, _group, _control) {
                 var outval = this.outValueScale(value);
-                if (this.colorIdKey !== undefined && outval !== this.off) {
-                    this.outputColor(engine.getValue(this.group, this.colorIdKey));
+                if (this.colorKey !== undefined && outval !== this.off) {
+                    this.outputColor(engine.getValue(this.group, this.colorKey));
                 } else {
                     this.send(DJ505.PadColor.OFF);
                 }
@@ -1676,13 +1680,13 @@ DJ505.PitchPlayMode = function(deck, offset) {
                     var previousCuepoint = this.mode.cuepoint;
                     this.mode.cuepoint = this.number;
                     this.mode.pads[previousCuepoint - 1].trigger();
-                    this.outputColor(engine.getValue(this.group, this.colorIdKey));
+                    this.outputColor(engine.getValue(this.group, this.colorKey));
                 }
             };
             this.connect = function() {
                 components.Button.prototype.connect.call(this); // call parent connect
-                if (undefined !== this.group && this.colorIdKey !== undefined) {
-                    this.connections[1] = engine.makeConnection(this.group, this.colorIdKey, function(id) {
+                if (undefined !== this.group && this.colorKey !== undefined) {
+                    this.connections[1] = engine.makeConnection(this.group, this.colorKey, function(id) {
                         if (engine.getValue(this.group, this.outKey)) {
                             this.outputColor(id);
                         }