User Tools

Site Tools


components_js

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
components_js [2019/04/30 04:09]
ronso Fx: document 'allowFocusWhenParametersHidden'
components_js [2019/08/31 23:47] (current)
be.ing [ComponentContainer and Managing Layers]
Line 271: Line 271:
 } }
 </​code>​ </​code>​
 +
 +===Hotcue colors===
 +HotcueButton can show hotcue colors on the controller. There are three ways of implementing this. Which one to choose depends on the controller.
 +  - Set color via single byte based on controller internal palette
 +  - Set color via SysEx based on custom palette.
 +  - Set color via SysEx based on predefined colors by Mixxx.
 +
 +Option 1 is the simplest and most common method for most controllers. You must figure out which MIDI values correspond to which colors and the correlate it with the [[hotcue_colors|predefined hotcue colors]] (the controller'​s manual from the manufacturer may document this). Creating such HotcueButton could look like this:
 +<​code=javascript>​
 +var hotcueButton = new components.HotcueButton({
 +    number: 1,
 +    group: '​[Channel1]',​
 +    midi: [0x91, 0x26],
 +    // key-value map to correlate the Mixxx ColorID
 +    // with the value the controller expects for 
 +    // specific colors. These values are passed to
 +    // the HotcueButton'​s send method.
 +    colors: {
 +        0: 0x10,
 +        1: 0x18,
 +        2: 0x20,
 +        ...
 +    },
 +    // value to turn off the buttons LED.
 +    off: 0x00,
 +});
 +</​code>​
 +
 +With the second option, you can send predefined colors from the palette to the controller but this time via SysEx. Since SysEx is very controller specific, it is mandatory to specify a custom ''​sendRGB''​ method which is responsible for taking a color description,​ extracting the relevant information,​ and sending the SysEx Message to the controller. In this case, the values of the attributes in the ''​colors''​ object are passed as the input to the ''​sendRGB''​ method.
 +<​code=javascript>​
 +var hotcueButton = new components.HotcueButton({
 +    number: 1,
 +    group: '​[Channel1]',​
 +    midi: [0x91, 0x26],
 +    // key-value map to correlate the Mixxx ColorID
 +    // with an array which contains (in this case)
 +    // the RGB components of a color. These values
 +    // are passed as input to the sendRGB method.
 +    colors: {
 +        0: [0x00,​0x00,​0x00],​ // black
 +        1: [0xFF,​0x00,​0x00],​ // pure red
 +        2: [0xFF,​0xFF,​0x00],​ // pure Yellow
 +        ...
 +    },
 +    sendRGB: function (color_obj) {
 +        // example Message (hardcoded bytes are controller specific).
 + // colors entries contain 8-bit values, but SysEx only supports 7-bit values
 + // so were bitshifting by 1 to reduce the resolution.
 +        var msg = [0xF0, 0x00, 0x01, color_obj[0]>>​1,​color_obj[1]>>​1,​color_obj[2]>>​1];​
 +        // send message
 + midi.sendSysexMsg(msg,​ msg.length);​
 +    }
 +});
 +</​code>​
 +
 +The third option is similar to the second one. You need to define a ''​sendRGB''​ method again, but in this Mixxx provides the color palette automatically and you do not provide a ''​colors''​ object for the HotcueButton. The ''​sendRGB(color)''​ method gets passed a color object (more on the color API [[midi_scripting#​color_api|here]]). Such a button could be defined like this:
 +<​code=javascript>​
 +var hotcueButton = new components.HotcueButton({
 +    number: 1,
 +    group: '​[Channel1]',​
 +    midi: [0x91, 0x26],
 +    // colors automatically assigned by Components.JS framework
 +    sendRGB: function (color_obj) {
 +        // example Message (hardcoded bytes are controller specific).
 + // colors entries contain 8-bit values, but SysEx only supports 7-bit values
 + // so were bitshifting by 1 to reduce the resolution.
 +        var msg = [0xF0, 0x00, 0x01, color_obj.red>>​1,​color_obj.green>>​1,​color_obj.blue>>​1];​
 +        // send message
 + midi.sendSysexMsg(msg,​ msg.length);​
 +    }
 +});
 +</​code>​
 +
  
 ==== SamplerButton ==== ==== SamplerButton ====
Line 389: Line 462:
   * **forEachComponent**:​ Iterate over all Components in this ComponentContainer and perform an operation on them. The operation is a function provided as the first argument to ''​forEachComponent''​. The operation function takes each Component as its first argument. In the context of the operation function, ''​this''​ refers to the ComponentContainer. ''​forEachComponent''​ iterates recursively through the Components in any ComponentContainers and arrays that are properties of this ComponentContainer. If you do not want ''​forEachComponent''​ to operate recursively,​ pass ''​false''​ as the second argument to ''​forEachComponent''​.   * **forEachComponent**:​ Iterate over all Components in this ComponentContainer and perform an operation on them. The operation is a function provided as the first argument to ''​forEachComponent''​. The operation function takes each Component as its first argument. In the context of the operation function, ''​this''​ refers to the ComponentContainer. ''​forEachComponent''​ iterates recursively through the Components in any ComponentContainers and arrays that are properties of this ComponentContainer. If you do not want ''​forEachComponent''​ to operate recursively,​ pass ''​false''​ as the second argument to ''​forEachComponent''​.
   * **reconnectComponents**:​ Call each Component'​s ''​disconnect''​ method, optionally perform an operation on it, then call its ''​connect''​ and ''​trigger''​ methods to sync the state of the controller'​s LEDs. Arguments are the same as ''​forEachComponent''​.   * **reconnectComponents**:​ Call each Component'​s ''​disconnect''​ method, optionally perform an operation on it, then call its ''​connect''​ and ''​trigger''​ methods to sync the state of the controller'​s LEDs. Arguments are the same as ''​forEachComponent''​.
 +  * **shutdown**:​ Iterate over all Components and call their shutdown methods. The Button ​ is the only component with a predefined shutdown method. All other components have to be implemented manually if they require anything to be done when Mixxx shuts down.
  
 Typically, ''​reconnectComponents''​ is used to switch between layers. The callback passed to reconnectComponents can manipulate each Component'​s properties as appropriate for the new layer. Below is a basic example for switching between decks 1 and 3. This is a simple example that does not handle the complexities presented by EQs, QuickEffects,​ or EffectAssignmentButtons like [[#​Deck|Deck.setCurrentDeck]] does. Typically, ''​reconnectComponents''​ is used to switch between layers. The callback passed to reconnectComponents can manipulate each Component'​s properties as appropriate for the new layer. Below is a basic example for switching between decks 1 and 3. This is a simple example that does not handle the complexities presented by EQs, QuickEffects,​ or EffectAssignmentButtons like [[#​Deck|Deck.setCurrentDeck]] does.
components_js.1556611788.txt.gz ยท Last modified: 2019/04/30 04:09 by ronso