Use rgb presentation for cue colors with "no color" migration

CMakeLists.txt

@@ -469,6 +469,7 @@ add_library(mixxx-lib STATIC EXCLUDE_FROM_ALL
   src/preferences/replaygainsettings.cpp
   src/preferences/settingsmanager.cpp
   src/preferences/upgrade.cpp
+  src/preferences/hotcuecolorpalettesettings.cpp
   src/recording/recordingmanager.cpp
   src/skin/colorschemeparser.cpp
   src/skin/imgcolor.cpp
@@ -524,7 +525,7 @@ add_library(mixxx-lib STATIC EXCLUDE_FROM_ALL
   src/util/battery/battery.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
@@ -907,6 +908,7 @@ add_executable(mixxx-test
   src/test/broadcastprofile_test.cpp
   src/test/broadcastsettings_test.cpp
   src/test/channelhandle_test.cpp
+  src/test/colorconfig_test.cpp
   src/test/configobject_test.cpp
   src/test/controller_preset_validation_test.cpp
   src/test/controllerengine_test.cpp
@@ -2101,3 +2103,4 @@ if(NOT OPTIMIZE STREQUAL "off")
     endif()
   endif()
 endif()
+

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/hotcuecolorpalettesettings.cpp",
                    "src/preferences/dlgpreferencepage.cpp",
 
                    "src/effects/effectmanifest.cpp",
@@ -1271,6 +1272,7 @@ def sources(self, build):
                    "src/util/movinginterquartilemean.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",
@@ -1297,8 +1299,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/Roland_DJ-505-scripts.js

@@ -1565,7 +1565,7 @@ DJ505.PitchPlayMode = function(deck, offset) {
         this.number = n + 1;
         this.on = this.color + DJ505.PadColor.DIM_MODIFIER;
         this.colors = pitchplayColors;
-        this.colorIdKey = "hotcue_" + this.number + "_color_id";
+        this.colorKey = "hotcue_" + this.number + '_color';
         components.Button.call(this);
     };
     this.PerformancePad.prototype = new components.Button({
@@ -1627,8 +1627,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);
                 }
@@ -1638,13 +1638,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);
                         }

res/controllers/midi-components-0.0.js

@@ -295,9 +295,13 @@
             return;
         }
         if (options.colors !== undefined || options.sendRGB !== undefined) {
+<<<<<<< HEAD
+            this.colorKey = 'hotcue_' + options.number + '_color';
+=======
             this.colorIdKey = "hotcue_" + options.number + "_color_id";
+>>>>>>> upstream/master
             if (options.colors === undefined) {
-                options.colors = color.predefinedColorsList();
+                options.colors = color.hotcueColorPalette();
             }
         }
         this.number = options.number;
@@ -312,8 +316,13 @@
             this.inKey = "hotcue_" + this.number + "_clear";
         },
         getColor: function() {
+<<<<<<< HEAD
+            if (this.colorKey !== undefined) {
+                return color.colorFromHexCode(engine.getValue(this.group,this.colorKey));
+=======
             if (this.colorIdKey !== undefined) {
                 return color.predefinedColorFromId(engine.getValue(this.group, this.colorIdKey));
+>>>>>>> upstream/master
             } else {
                 return null;
             }
@@ -324,8 +333,8 @@
             // and there is no hotcueColor for turning the LED
             // off. So the `send()` function is responsible for turning the
             // actual LED off.
-            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(outval);
             }
@@ -348,9 +357,15 @@
         },
         connect: function() {
             Button.prototype.connect.call(this); // call parent connect
+<<<<<<< HEAD
+            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)) {
+=======
             if (undefined !== this.group && this.colorIdKey !== undefined) {
                 this.connections[1] = engine.makeConnection(this.group, this.colorIdKey, function(id) {
                     if (engine.getValue(this.group, this.outKey)) {
+>>>>>>> upstream/master
                         this.outputColor(id);
                     }
                 });

res/schema.xml

@@ -480,5 +480,30 @@ METADATA
         position INTEGER
         );
     </sql>
-  </revision>  
+  </revision>
+  <revision version="31" min_compatible="3">
+    <description>
+      Convert the PredefinedColor id to the actual RGB value.
+    </description>
+    <sql>
+      <!-- No Color becomes black -->
+      UPDATE cues SET color=0x000000 WHERE color=0;
+      <!-- Red -->
+      UPDATE cues SET color=0xC50A08 WHERE color=1;
+      <!-- Green -->
+      UPDATE cues SET color=0x32BE44 WHERE color=2;
+      <!-- Blue -->
+      UPDATE cues SET color=0x0044FF WHERE color=3;
+      <!-- Yellow -->
+      UPDATE cues SET color=0xF8D200 WHERE color=4;
+      <!-- Celeste -->
+      UPDATE cues SET color=0x42D4F4 WHERE color=5;
+      <!-- Magenta -->
+      UPDATE cues SET color=0xAF00CC WHERE color=6;
+      <!-- Pink -->
+      UPDATE cues SET color=0xFCA6D7 WHERE color=7;
+      <!-- White -->
+      UPDATE cues SET color=0xF2F2FF WHERE color=8;
+    </sql>
+  </revision>
 </schema>

res/skins/Deere (64 Samplers)/skin.xml

@@ -130,6 +130,8 @@
     <SetVariable name="VerticalStretchButtonMaximumSize">22,-1</SetVariable>
     <SetVariable name="VerticalStretchButtonSizePolicy">f,me</SetVariable>
 
+    <SetVariable name="HotcueSkinDefaultColor">#4487d9</SetVariable>
+
     <!-- The waveforms (zoomed and overview) use a lot of memory. They appear in multiple places in
     main_decks.xml, left_deck.xml, and right_deck.xml, so define them in singletons. This makes
     toggling between 2/4 decks and stacked/split waveforms slower, but it makes Mixxx startup

res/skins/Deere/hotcue_button.xml

@@ -46,8 +46,8 @@
       <ConnectValueFromWidget>false</ConnectValueFromWidget>
     </Connection>
     <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="hotcue"/>_color_id</ConfigKey>
-      <BindProperty>highlight</BindProperty>
+      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="hotcue"/>_color</ConfigKey>
+      <BindProperty>backgroundColorRgb</BindProperty>
     </Connection>
   </PushButton>
 </Template>

res/skins/Deere/skin.xml

@@ -130,6 +130,8 @@
     <SetVariable name="VerticalStretchButtonMaximumSize">22,-1</SetVariable>
     <SetVariable name="VerticalStretchButtonSizePolicy">f,me</SetVariable>
 
+    <SetVariable name="HotcueSkinDefaultColor">#0080be</SetVariable>
+
     <!-- The waveforms (zoomed and overview) use a lot of memory. They appear in multiple places in
     main_decks.xml, left_deck.xml, and right_deck.xml, so define them in singletons. This makes
     toggling between 2/4 decks and stacked/split waveforms slower, but it makes Mixxx startup

res/skins/Deere/style.qss

@@ -1583,7 +1583,6 @@ WPushButton:hover {
 /*"Pressed" state*/
 WPushButton[value="1"],
 WPushButton[value="2"] {
-    /*color: #FDFDFD;*/
     color: #FDFDFD;
     background-color: #006596;
     border: 0px solid #006596;
@@ -1596,129 +1595,17 @@ WPushButton[value="2"]:hover {
     border: 0px solid #0080BE;
 }
 
-/* Hotcue Color: No Color */
-#HotcueButton[value="1"][highlight="0"],
-#HotcueButton[value="2"][highlight="0"] {
-    background-color: #006596;
-}
-
-#HotcueButton[value="1"][highlight="0"]:hover,
-#HotcueButton[value="2"][highlight="0"]:hover {
-    background-color: #0080BE;
-}
-
-/* Hotcue Color: Red */
-#HotcueButton[value="1"][highlight="1"],
-#HotcueButton[value="2"][highlight="1"] {
-    background-color: #c50a08;
-}
-
-#HotcueButton[value="1"][highlight="1"]:hover,
-#HotcueButton[value="2"][highlight="1"]:hover {
-    background-color: #e50c08;
-}
-
-/* Hotcue Color: Green */
-#HotcueButton[value="1"][highlight="2"],
-#HotcueButton[value="2"][highlight="2"] {
-    background-color: #32be44;
-}
-
-#HotcueButton[value="1"][highlight="2"]:hover,
-#HotcueButton[value="2"][highlight="2"]:hover {
-    background-color: #52de64;
-}
-
-/* Hotcue Color: Blue */
-#HotcueButton[value="1"][highlight="3"],
-#HotcueButton[value="2"][highlight="3"] {
-    background-color: #0044ff;
-}
-
-#HotcueButton[value="1"][highlight="3"]:hover,
-#HotcueButton[value="2"][highlight="3"]:hover {
-    background-color: #0064ff;
-}
-
-/* Hotcue Color: Yellow */
-#HotcueButton[value="1"][highlight="4"],
-#HotcueButton[value="2"][highlight="4"] {
-    color: #4B4B4B;
-    background-color: #f8d200;
-}
-
-#HotcueButton[value="1"][highlight="4"]:hover,
-#HotcueButton[value="2"][highlight="4"]:hover {
-    color: #4B4B4B;
-    background-color: #f8f200;
-}
-
-/* Hotcue Color: Celeste */
-#HotcueButton[value="1"][highlight="5"],
-#HotcueButton[value="2"][highlight="5"] {
-    color: #4B4B4B;
-    background-color: #42d4f4;
+#HotcueButton {
+    qproperty-shouldHighlightBackgroundOnHover: true;
 }
 
-#HotcueButton[value="1"][highlight="5"]:hover,
-#HotcueButton[value="2"][highlight="5"]:hover {
-    color: #4B4B4B;
-    background-color: #62f4f4;
-}
-
-/* Hotcue Color: Purple */
-#HotcueButton[value="1"][highlight="6"],
-#HotcueButton[value="2"][highlight="6"] {
-    background-color: #af00cc;
-}
-
-#HotcueButton[value="1"][highlight="6"]:hover,
-#HotcueButton[value="2"][highlight="6"]:hover {
-    background-color: #cf00ec;
-}
-
-/* Hotcue Color: Pink */
-#HotcueButton[value="1"][highlight="7"],
-#HotcueButton[value="2"][highlight="7"] {
-    color: #4B4B4B;
-    background-color: #fca6d7;
-}
-
-#HotcueButton[value="1"][highlight="7"]:hover,
-#HotcueButton[value="2"][highlight="7"]:hover {
-    color: #4B4B4B;
-    background-color: #fcc6f7;
-}
-
-/* Hotcue Color: White */
-#HotcueButton[value="1"][highlight="8"],
-#HotcueButton[value="2"][highlight="8"] {
-    color: #4B4B4B;
-    background-color: #f2f2ff;
-}
-
-#HotcueButton[value="1"][highlight="8"]:hover,
-#HotcueButton[value="2"][highlight="8"]:hover {
-    color: #4B4B4B;
-    background-color: #ffffff;
-}
-
-/*"Enabled" state, e.g. for recording status
-  0 -- disconnected / off
-  1 -- connecting / enabling
-  2 -- connected / enabled
-WPushButton[value="2"] {
+#HotcueButton[backgroundIsDark=true][hasBackgroundColor=true] {
     color: #FDFDFD;
-    background-color: #4B4B4B;
-    border: 0px solid #006596;
 }
 
-WPushButton[value="2"]:hover {
-    color: #FDFDFD;
-    background-color: #4B4B4B;
-    border: 0px solid #0080BE;
+#HotcueButton[backgroundIsDark=false][hasBackgroundColor=true] {
+    color: #1f1e1e;
 }
-*/
 
 #PlayToggle[value="0"] {
   image: url(skin:/icon/ic_play_48px.svg) no-repeat center center;

res/skins/LateNight/button_hotcue.xml

@@ -37,8 +37,8 @@
           <ConnectValueFromWidget>false</ConnectValueFromWidget>
         </Connection>
         <Connection>
-          <ConfigKey><Variable name="group"/>,hotcue_<Variable name="number"/>_color_id</ConfigKey>
-          <BindProperty>highlight</BindProperty>
+          <ConfigKey><Variable name="group"/>,hotcue_<Variable name="number"/>_color</ConfigKey>
+          <BindProperty>backgroundColorRgb</BindProperty>
         </Connection>
       </PushButton>
     </Children>

res/skins/LateNight/skin.xml

@@ -159,7 +159,7 @@
       <SetVariable name="PlayPosColor">#00FF00</SetVariable>
       <SetVariable name="PlayedOverlayColor">#bb000000</SetVariable>
       <SetVariable name="EndOfTrackColor">#F856E7</SetVariable>
-
+      <SetVariable name="HotcueSkinDefaultColor">#ff0909</SetVariable>
     </Scheme>
 
     <Scheme>
@@ -201,7 +201,7 @@
       <SetVariable name="PlayPosColor">#00ff00</SetVariable>
       <SetVariable name="PlayedOverlayColor">#bb000000</SetVariable>
       <SetVariable name="EndOfTrackColor">#ff00ff</SetVariable>
-
+      <SetVariable name="HotcueSkinDefaultColor">#ff0909</SetVariable>
     </Scheme>
   </Schemes>