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
Next revision Both sides next revision
components_js [2019/02/24 15:58]
swiftb0y changed shiftComponent to shiftControl
components_js [2019/07/08 09:19]
swiftb0y added description for colored hotcues
Line 271: Line 271:
 } }
 </​code>​ </​code>​
 +
 +In addition, the HotcueButton has also got a built functionality to handle color. There are three ways
 +of implementing color. 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]]. 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
 +    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.
 +<​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
 +    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 this time Mixxx provides the color palette automatically. However, this time the ''​sendRGB(color)''​ method gets 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 488: Line 558:
  
 For the shift functionality to work, the shift button of your controller must be mapped to a function that calls the ''​shift''/''​unshift''​ methods of the EffectUnit on button press/​release. Also, if your controller sends different MIDI signals when shift is pressed, map those as well as the unshifted signals to the ''​input''​ method of each Component in your XML file. If the EffectUnit is a property of another [[#​ComponentContainer]] (for example a [[#Deck]]), calling ''​shift''​ and ''​unshift''​ on the parent ComponentContainer will recursively call it on the EffectUnit too (just like it will for any other ComponentContainer). For the shift functionality to work, the shift button of your controller must be mapped to a function that calls the ''​shift''/''​unshift''​ methods of the EffectUnit on button press/​release. Also, if your controller sends different MIDI signals when shift is pressed, map those as well as the unshifted signals to the ''​input''​ method of each Component in your XML file. If the EffectUnit is a property of another [[#​ComponentContainer]] (for example a [[#Deck]]), calling ''​shift''​ and ''​unshift''​ on the parent ComponentContainer will recursively call it on the EffectUnit too (just like it will for any other ComponentContainer).
 +
 +By default an effect can only be focused when the respective GUI unit is expanded: when the focus button of a collapsed unit is pressed, the GUI counterpart is expanded. Accordingly,​ units release the effect focus and switch back to Meta knob mapping as soon as an unit is collapsed.\\
 +However, there are situations when the on-screen parameters of a focused effect can safely stay hidden while the controller is mapped to the parameter knobs. Collapsed units show a focus indicator then. To enable this mode instatiate effect units with '​true'​ added after the effect unit numbers array. For example:
 +<​code=javascript>​
 +MyController.effectUnit = new components.EffectUnit([1,​ 3],true);
 +...
 +</​code>​
 +
  
 ==== Assignment switches ==== ==== Assignment switches ====
 Generally, most controllers should use [[#​EffectAssignmentButton]]s in [[#Deck]]s to enable effect units on decks. If you have a dedicated effects controller that does not manipulate decks, the enableOnChannelButtons provided by EffectUnit would be more appropriate. You can easily create these by calling ''​enableOnChannelButtons.addButton('​CHANNEL_NAME'​)''​ (do not put brackets around the Generally, most controllers should use [[#​EffectAssignmentButton]]s in [[#Deck]]s to enable effect units on decks. If you have a dedicated effects controller that does not manipulate decks, the enableOnChannelButtons provided by EffectUnit would be more appropriate. You can easily create these by calling ''​enableOnChannelButtons.addButton('​CHANNEL_NAME'​)''​ (do not put brackets around the
 CHANNEL_NAME) on the EffectUnit object, then define their ''​midi''​ properties. CHANNEL_NAME) on the EffectUnit object, then define their ''​midi''​ properties.
components_js.txt ยท Last modified: 2019/08/31 23:47 by be.ing