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/08/01 16:58]
swiftb0y [ComponentContainer and Managing Layers]
components_js [2019/08/31 23:47] (current)
be.ing [ComponentContainer and Managing Layers]
Line 272: Line 272:
 </​code>​ </​code>​
  
-In addition, the HotcueButton ​has also got a built functionality to handle color. There are three ways +===Hotcue colors=== 
-of implementing ​color. Which one to choose depends on the controller.+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 single byte based on controller internal palette
   - Set color via SysEx based on custom palette.   - Set color via SysEx based on custom palette.
   - Set color via SysEx based on predefined colors by Mixxx.   - Set color via SysEx based on predefined colors by Mixxx.
  
-Option 1is 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:+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>​ <​code=javascript>​
 var hotcueButton = new components.HotcueButton({ var hotcueButton = new components.HotcueButton({
Line 286: Line 286:
     // key-value map to correlate the Mixxx ColorID     // key-value map to correlate the Mixxx ColorID
     // with the value the controller expects for      // with the value the controller expects for 
-    // specific colors+    // specific colors. These values are passed to 
 +    // the HotcueButton'​s send method.
     colors: {     colors: {
         0: 0x10,         0: 0x10,
Line 298: Line 299:
 </​code>​ </​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.+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>​ <​code=javascript>​
 var hotcueButton = new components.HotcueButton({ var hotcueButton = new components.HotcueButton({
Line 306: Line 307:
     // key-value map to correlate the Mixxx ColorID     // key-value map to correlate the Mixxx ColorID
     // with an array which contains (in this case)     // with an array which contains (in this case)
-    // the RGB components of a color+    // the RGB components of a color. These values 
 +    // are passed as input to the sendRGB method.
     colors: {     colors: {
         0: [0x00,​0x00,​0x00],​ // black         0: [0x00,​0x00,​0x00],​ // black
Line 323: Line 325:
 }); });
 </​code>​ </​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:+ 
 +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>​ <​code=javascript>​
 var hotcueButton = new components.HotcueButton({ var hotcueButton = new components.HotcueButton({
Line 459: 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.+  * **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.1564693080.txt.gz · Last modified: 2019/08/01 16:58 by swiftb0y