Updated for Traktor 3.2

README.md

@@ -1,4 +1,4 @@
-# Replacement screens for **Traktor Pro 3.1** and **Kontrol D2/S5/S8 and S4 MK3**
+# Replacement screens for **Traktor Pro 3.2** and **Kontrol D2/S5/S8 and S4 MK3**
 
 **Contact:**
 
@@ -16,7 +16,6 @@
   - Global: User defined phrase length (set in prefs)
   - Browser: Gauges for Key/BPM match (toggle in prefs)
   - Browser: Display 7 or 9 items on screen (toggle in prefs)
-  - Deck: Cycle through MixerFX on S5 by pressing SHIFT + FILTER-ON/OFF
   - Deck: Press SHIFT + FLUX to engage flux reverse
   - Deck: Layout more closely resembles main Traktor layout
   - Deck: All 9 data elements are configurable (set it prefs)

qml/CSI/S5/Channel.qml

@@ -19,9 +19,7 @@ Module
   Wire { from: surface_prefix + "eq.mid";     to: DirectPropertyAdapter { path: app_prefix + "eq.mid"    } }
   Wire { from: surface_prefix + "eq.low";     to: DirectPropertyAdapter { path: app_prefix + "eq.low"    } }
   Wire { from: surface_prefix + "filter";     to: DirectPropertyAdapter { path: app_prefix + "fx.adjust" } }
-  Wire { enabled: !shift; from: surface_prefix + "filter_on"; to: TogglePropertyAdapter { path: app_prefix + "fx.on"; } }
-  Wire { enabled: shift;  from: surface_prefix + "filter_on"; to: ButtonScriptAdapter { onPress: { mixerFX.value = (mixerFX.value + 1) % 5; } } }
-
+  Wire { from: surface_prefix + "filter_on";  to: TogglePropertyAdapter { path: app_prefix + "fx.on"     } }
   Wire { from: surface_prefix + "cue";        to: TogglePropertyAdapter { path: app_prefix + "cue"       } }
 
   // level meter
@@ -33,8 +31,6 @@ Module
 
   AppProperty { id: fxMode; path: "app.traktor.fx.4fx_units" }
 
-  AppProperty { id: mixerFX; path: app_prefix + "fx.select" }
-
   WiresGroup
   {
     enabled: !channel.shift || (fxMode.value == FxMode.TwoFxUnits)

qml/Screens/S4MK3/ViewModels/DeckInfo.qml

@@ -27,9 +27,9 @@ Item
   readonly property bool    hightlightLoop:       !shift
   readonly property bool    hightlightKey:        shift
   readonly property int     isLoaded:             (propTrackLength.value > 0) || (deckType === DeckType.Remix)
-  readonly property string  keyString:            propKeyForDisplay.value
-  readonly property int     keyIndex:             propFinalKeyId.value
-  readonly property bool    hasKey:               isLoaded && keyIndex >= 0
+  readonly property string  resultingKeyStr:      prefs.camelotKey ? utils.convertToCamelot(propKeyForDisplay.value) : propKeyForDisplay.value // propKeyForDisplay.value
+  readonly property int     resultingKeyIdx:      propFinalKeyId.value 
+  readonly property bool    hasKey:               isLoaded && resultingKeyIdx >= 0
   readonly property bool    isKeyLockOn:          propKeyLockOn.value
   readonly property bool    loopActive:           propLoopActive.value
   readonly property string  loopSizeString:       loopSizeText[propLoopSizeIdx.value]
@@ -43,14 +43,15 @@ Item
   readonly property bool    touchLoop:            false // TODO map shift encoder touch event
 
   readonly property int     deckType:             propDeckType.value
-  readonly property string  keyAdjustString:      (keyAdjustVal < 0 ? "" : "+") + (keyAdjustVal).toFixed(1).toString()
+  readonly property string  keyAdjustFloatText:   (keyAdjustVal < 0 ? "" : "+") + keyAdjustVal.toFixed(2).toString()
+  readonly property string  keyAdjustIntText:     (keyAdjustVal < 0 ? "" : "+") + keyAdjustVal.toFixed(0).toString()
   readonly property real    keyAdjustVal:         propKeyAdjust.value*12
   readonly property variant loopSizeText:         ["1/32", "1/16", "1/8", "1/4", "1/2", "1", "2", "4", "8", "16", "32"]
 
   AppProperty { id: propDeckType;               path: "app.traktor.decks." + deckId + ".type" }
   AppProperty { id: propTitle;                  path: "app.traktor.decks." + deckId + ".content.title" }
   AppProperty { id: propArtist;                 path: "app.traktor.decks." + deckId + ".content.artist" }
-  AppProperty { id: propKeyForDisplay;          path: "app.traktor.decks." + deckId + ".track.key.key_for_display" }
+  AppProperty { id: propKeyForDisplay;          path: "app.traktor.decks." + deckId + ".track.key.resulting.quantized" }
   AppProperty { id: propFinalKeyId;             path: "app.traktor.decks." + deckId + ".track.key.final_id" }
   AppProperty { id: propKeyAdjust;              path: "app.traktor.decks." + deckId + ".track.key.adjust" }
   AppProperty { id: propKeyLockOn;              path: "app.traktor.decks." + deckId + ".track.key.lock_enabled" }

qml/Screens/S4MK3/Views/Colors.qml

@@ -4,6 +4,8 @@ QtObject {
 
   function rgba(r,g,b,a) { return Qt.rgba(  r/255. ,  g/255. ,  b/255. , a/255. ) }
   function darkerColor( c, factor ) { return Qt.rgba(factor*c.r, factor*c.g, factor*c.b, c.a); }
+  function opacity( c, factor ) { return Qt.rgba(c.r, c.g, c.b, factor * c.a); }
+
 
   property color defaultBackground:             "black"
   property color defaultTextColor:              "white"
@@ -26,10 +28,10 @@ QtObject {
   property variant colorDeckBlueBright:         rgba(0, 136, 184, 255) 
   property variant colorWhite:                  rgba (255, 255, 255, 255)
 
-  property variant colorQuantizeOn:             rgba ( 20, 255, 255, 170)
-  property variant colorQuantizeOff:            darkerColor(colorQuantizeOn, 0.7)
   property variant colorRed:                    rgba(255,0,80,255)
 
+  property variant colorEnabledCyan:            rgba(96, 220, 255, 255)
+
   //--------------------------------------------------------------------------------------------------------------------
 
   //  Waveform coloring
@@ -265,49 +267,32 @@ QtObject {
   //  Musical Key coloring
   //--------------------------------------------------------------------------------------------------------------------
 
-  readonly property variant color01MusicalKey: rgba (255,  0,  0, 255) // not yet in use
-  readonly property variant color02MusicalKey: rgba (255,  64,  0, 255)
-  readonly property variant color03MusicalKey: rgba (255, 120,   0, 255) // not yet in use
-  readonly property variant color04MusicalKey: rgba (255, 200,   0, 255)
-  readonly property variant color05MusicalKey: rgba (255, 255,   0, 255)
-  readonly property variant color06MusicalKey: rgba (210, 255,   0, 255) // not yet in use
-  readonly property variant color07MusicalKey: rgba (  0, 255,   0, 255)
-  readonly property variant color08MusicalKey: rgba (  0, 255, 128, 255)
-  readonly property variant color09MusicalKey: colorDeckBlueBright // use the same color as for the browser selection
-  readonly property variant color10MusicalKey: rgba (  0, 100, 255, 255)
-  readonly property variant color11MusicalKey: rgba (  0,  40, 255, 255)
-  readonly property variant color12MusicalKey: rgba (128,   0, 255, 255)
-  readonly property variant color13MusicalKey: rgba (160,   0, 200, 255) // not yet in use
-  readonly property variant color14MusicalKey: rgba (240,   0, 200, 255)
-  readonly property variant color15MusicalKey: rgba (255,   0, 120, 255) // not yet in use
-  readonly property variant color16MusicalKey: rgba (248,   8,  64, 255)
-
   property variant musicalKeyColors: [
-    color15Bright,        //0   -11 c
-    color06Bright,        //1   -4  c#, db
-    color11MusicalKey,    //2   -13 d
-    color03Bright,        //3   -6  d#, eb
-    color09MusicalKey,    //4   -16 e
-    color01Bright,        //5   -9  f
-    color07MusicalKey,    //6   -2  f#, gb
-    color13Bright,        //7   -12 g
-    color04MusicalKey,    //8   -5  g#, ab
-    color10MusicalKey,    //9   -15 a
-    color02MusicalKey,    //10  -7  a#, bb
-    color08MusicalKey,    //11  -1  b
-    color03Bright,        //12  -6  cm
-    color09MusicalKey,    //13  -16 c#m, dbm
-    color01Bright,        //14  -9  dm
-    color07MusicalKey,    //15  -2  d#m, ebm
-    color13Bright,        //16  -12 em
-    color04MusicalKey,    //17  -5  fm
-    color10MusicalKey,    //18  -15 f#m, gbm
-    color02MusicalKey,    //19  -7  gm
-    color08MusicalKey,    //20  -1  g#m, abm
-    color15Bright,        //21  -11 am
-    color06Bright,        //22  -4  a#m, bbm
-    color11MusicalKey     //23  -13 bm
-  ]
+  rgba(255,  64, 235, 255),    //0   -11 c
+  rgba(153, 255,   0, 255),    //1   -4  c#, db
+  rgba( 81, 179, 254, 255),    //2   -13 d
+  rgba(250, 141,  41, 255),    //3   -6  d#, eb
+  rgba(  0, 232, 232, 255),    //4   -16 e
+  rgba(253,  74,  74, 255),    //5   -9  f
+  rgba( 64, 255,  64, 255),    //6   -2  f#, gb
+  rgba(225, 131, 255, 255),    //7   -12 g
+  rgba(255, 215,   0, 255),    //8   -5  g#, ab
+  rgba(  0, 202, 255, 255),    //9   -15 a
+  rgba(255, 101,  46, 255),    //10  -7  a#, bb
+  rgba(  0, 214, 144, 255),    //11  -1  b
+  rgba(250, 141,  41, 255),    //12  -6  cm
+  rgba(  0, 232, 232, 255),    //13  -16 c#m, dbm
+  rgba(253,  74,  74, 255),    //14  -9  dm
+  rgba( 64, 255,  64, 255),    //15  -2  d#m, ebm
+  rgba(213, 125, 255, 255),    //16  -12 em
+  rgba(255, 215,   0, 255),    //17  -5  fm
+  rgba(  0, 202, 255, 255),    //18  -15 f#m, gbm
+  rgba(255, 101,  46, 255),    //19  -7  gm
+  rgba(  0, 214, 144, 255),    //20  -1  g#m, abm
+  rgba(255,  64, 235, 255),    //21  -11 am
+  rgba(153, 255,   0, 255),    //22  -4  a#m, bbm
+  rgba( 86, 189, 254, 255)     //23  -13 bm
+]
 
   //this list will be filled with Component.onCompleted() based on musicalKeyColor (see further down)
   property variant musicalKeyDarkColors: []

qml/Screens/S4MK3/Views/RemixDeck.qml

@@ -123,7 +123,7 @@ Item {
           font.pixelSize: 24
           font.family: "Roboto"
           font.weight: Font.Normal
-          color: colors.hotcue.hotcue
+          color: colors.colorEnabledCyan
           anchors.left: quantText.right
           anchors.leftMargin: 3
           anchors.verticalCenter: parent.verticalCenter
@@ -151,7 +151,6 @@ Item {
           text: deckInfo.beatPositionString
           font.pixelSize: 45
           font.family: "Roboto"
-          font.weight: Font.Medium
           color: "white"
           anchors.fill: parent
           anchors.leftMargin: display.textMargin
@@ -178,7 +177,6 @@ Item {
           text: deckInfo.loopSizeString
           font.pixelSize: 45
           font.family: "Roboto"
-          font.weight: Font.Medium
           color: deckInfo.loopActive ? "black" : colors.defaultTextColor
           anchors.fill: parent
           anchors.leftMargin:   display.textMargin

qml/Screens/S4MK3/Views/TrackDeck.qml

@@ -81,43 +81,57 @@ Item {
       }
 
       // KEY DISPLAY //
-      Rectangle {
-        id: keyBox
-
-        height: display.firstRowHeight
-        width:  display.infoBoxesWidth
+      Item {
+          id: keyDisplay
+
+          property var keyColor: deckInfo.hasKey ? colors.musicalKeyColors[deckInfo.resultingKeyIdx] : colors.colorBlack
+
+          // key box background color
+          property var bgKeyOn: deckInfo.hasKey ? colors.opacity( keyColor, 0.3 ) : colors.opacity( colors.colorEnabledCyan, 0.7 )
+          property var bgKeyOnShift: deckInfo.hasKey ? colors.opacity( keyColor, 0.5 ) : colors.opacity( colors.colorEnabledCyan, 1.0 )
+          property var bgKeyOff: colors.colorDeckDarkGrey
+          property var bgKeyOffShift: colors.colorDeckGrey
+          property var backgroundColor: deckInfo.isKeyLockOn ? ( deckInfo.shift ? bgKeyOnShift   : bgKeyOn  ) :
+                                                               ( deckInfo.shift ? bgKeyOffShift  : bgKeyOff )
+
+          // key text color
+          property var textColor: deckInfo.isKeyLockOn ? keyColor : colors.colorWhite
+
+          // key text string
+          readonly property real keyAdjustThreshold: 0.01
+          property bool isKeyAdjusted: deckInfo.isKeyLockOn && Math.abs(deckInfo.keyAdjustVal) > keyAdjustThreshold
+          property string keyLabelStr: deckInfo.hasKey ?
+                                           // Has Key
+                                           ( deckInfo.resultingKeyStr  + ( isKeyAdjusted && deckInfo.shift ? "  " + deckInfo.keyAdjustIntText : "" ) ) :
+                                           // Has No Key
+                                           ( isKeyAdjusted ? deckInfo.keyAdjustFloatText : "No key" )
+
+          height: display.firstRowHeight
+          width:  display.infoBoxesWidth
+
+          Rectangle {
+            id: keyBackground
+            color: keyDisplay.backgroundColor
+            radius: display.boxesRadius
+            anchors.fill: parent
+          }
 
-        color: deckInfo.shift ? colors.colorDeckGrey : colors.colorDeckDarkGrey
-        radius: display.boxesRadius
+          Text {
+            id: keyText
+            text: keyDisplay.keyLabelStr
+            font.pixelSize: 24
+            font.family: "Roboto"
+            color: keyDisplay.textColor
+            anchors.fill: parent
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+          }
+      }
 
-        Text {
-          id: keyText
-          // text: deckInfo.hasKey ? deckInfo.keyString : "No key"
-          text: deckInfo.hasKey ? (prefs.camelotKey ? utils.convertToCamelot(deckInfo.keyString) : deckInfo.keyString) : "No key"
-          font.pixelSize: 24
-          font.family: "Roboto"
-          font.weight: Font.Normal
-          color: colors.colorWhite
-          anchors.verticalCenter: parent.verticalCenter
-          anchors.horizontalCenter: parent.horizontalCenter
-        }
 
-        //keylock circle
-        Text {
-          visible: deckInfo.isKeyLockOn && deckInfo.hasKey
-          text: "\u25CF"
-          font.pixelSize: 24
-          font.family: "Roboto"
-          font.weight: Font.Normal
-          color: colors.hotcue.hotcue
-          anchors.left: keyText.right
-          anchors.leftMargin: 3
-          anchors.verticalCenter: parent.verticalCenter
-        }
-      }
     } // first row
 
-    
+
     // SECOND ROW //
     RowLayout {
       id: secondRow
@@ -139,7 +153,6 @@ Item {
           text: deckInfo.remainingTimeString
           font.pixelSize: 45
           font.family: "Roboto"
-          font.weight: Font.Medium
           color: trackEndBlinkTimer.blink ? "black": "white"
           anchors.fill: parent
           horizontalAlignment: Text.AlignHCenter
@@ -180,7 +193,6 @@ Item {
           text: deckInfo.loopSizeString
           font.pixelSize: 45
           font.family: "Roboto"
-          font.weight: Font.Medium
           color: deckInfo.loopActive ? "black" : ( deckInfo.shift ? colors.colorDeckGrey : colors.defaultTextColor )
           anchors.fill: parent
           horizontalAlignment: Text.AlignHCenter

qml/Screens/S4MK3/Widgets/InfoBox.qml

@@ -46,7 +46,6 @@ Item {
         text: widget.text
         font.pixelSize: widget.fontSize
         font.family: "Roboto"
-        font.weight: Font.Light
         color: widget.color
         verticalAlignment: Text.AlignBottom
         horizontalAlignment: widget.alignment

qml/Screens/S8/Views/Overlays/CenterOverlays/Keylock.qml

@@ -17,11 +17,14 @@ CenterOverlay {
   //--------------------------------------------------------------------------------------------------------------------
 
   AppProperty { id: keyValue;   path: "app.traktor.decks." + (deckId+1) + ".track.key.adjust" }
+  AppProperty { id: keyId;      path: "app.traktor.decks." + (deckId+1) + ".track.key.final_id" }
   AppProperty { id: keyEnable;  path: "app.traktor.decks." + (deckId+1) + ".track.key.lock_enabled" }
-  AppProperty { id: keyDisplay; path: "app.traktor.decks." + (deckId+1) + ".track.key.key_for_display" }
+  AppProperty { id: keyDisplay; path: "app.traktor.decks." + (deckId+1) + ".track.key.resulting.precise" }
+
 
   property real key:    keyValue.value * 12
   property int  offset: (key.toFixed(2) - key.toFixed(0)) * 100.0
+  property var keyColor: keyEnable.value && keyId.value >= 0 ? colors.musicalKeyColors[keyId.value] : colors.colorWhite
 
   //--------------------------------------------------------------------------------------------------------------------
 
@@ -56,18 +59,19 @@ CenterOverlay {
     }
   }
 
-  // value
+  // key
   Text {
     anchors.top:              parent.top
     anchors.horizontalCenter: parent.horizontalCenter
     anchors.topMargin:        55
-    font.pixelSize:           fonts.extraLargeValueFontSize
+    font.pixelSize:           fonts.moreLargeValueFontSize
     font.family   :           "Pragmatica"
-    color:                    colors.colorWhite    
-  	text:  ((key<0)?"":"+") + key.toFixed(2).toString()
+    color:                    keylock.keyColor
+    opacity:                  (keyDisplay.value == "") ? 0 : 1
+    text:                     prefs.camelotKey ? utils.convertToCamelot(keyDisplay.value) : keyDisplay.value
   }
 
-  // key
+  // value
   Text {
     anchors.top:              parent.top
     anchors.right:            parent.right
@@ -77,8 +81,7 @@ CenterOverlay {
     font.family   :           "Pragmatica"
     font.capitalization: Font.AllUppercase
     color:                    colors.colorGrey104
-    opacity: (keyDisplay.value=="") ? 0 : 1
-    text:    "(" + (prefs.camelotKey ? utils.convertToCamelot(keyDisplay.value) : keyDisplay.value) + ((offset==0)?"":" ") + ")"
+    text:  ((key<0)?"":"+") + key.toFixed(2).toString()
   }
 
   // footline