Widget "SequencerStepItem" consists of an image and a text. It can look like this at runtime:
The widget represents a step in the sequence. The commands that can be used are defined in the MpSequenceCore configuration under Commands.
For each command, an image with the same name as the command must be stored in the project. This will automatically add the proper image for a step automatically. For more information, see here under section "Adding widget 'Sequencer'".
In the MpSequenceCore configuration, the Commands can be divided up into groups for a better visual overview.
Depending on the defined hierarchy, the step can be shown differently. One step can have a red border, for example, while another has green.
Widget "SequencerStepItem" is not defined via the instance here, but instead using themes and styles. It can look like this, for example:
<Style id="StepItem_Green" xsi:type="widgets.brease.SequencerStepItem"
margin="20px"
textColor="#00FF00"
activeTextColor="#FF0000"
disabledTextColor="#0000FF"
borderColor="#00a200"
borderWidth="3px"
cornerRadius="10px"
backColor="#f3f3f3"
/>
<Style id="StepItem_Red" xsi:type="widgets.brease.SequencerStepItem"
margin="20px"
borderColor="#ea0000"
borderWidth="3px"
cornerRadius="10px"
backColor="#f3f3f3"
/>
All styles must use the same margin property!
Individual hierarchies are differentiated by the style ID ("StepItem_Green", "StepItem_Red"). In order for a step to use the correct style for a hierarchy, it must specify property stepItemStyle for widget "Sequencer".
For example, if hierarchy groups "Basic" and "Control" are being used, and group "Control" contains subgroup "Clamp", then the style could be specified as follows:
stepItemStyle = [{'group':'Basic','style':'StepItem_Red'},{'group':'Control;Clamp','style':'StepItem_Green'}]
This means that hierarchy "Basic" uses style "StepItem_Red", while subgroup "Clamp" under "Control" uses style "StepItem_Green".