Description
Hi,
I'm developing custom module for some unconventional use-case. I want to use Companion as fronted for custom developed intercom matrix system (this iteration is MQTT-controllable). To do so, I want to dynamically configure number of intercom ports in module config. I'm doing it like that. So far so good.
When I configure number of ports, save config and go back to the config, I have my newly created fields available but they do not have default values that I configured for them.
Moreover, when I manually set those values I ran into next problem which I believe is connected with the first one. Multidropdown list refuses to select any value while clicking it with a mouse. When I use arrow keys and enter, I am able to select value.
The funniest part is that when I select any value in each of those fields (with keyboard) and then remove them, I am able to select those values using mouse!
Here is the code I use to dynamically generate those fields
getConfigFields() {
let fields = []
fields.push({
type: 'dropdown',
id: 'protocol',
label: 'Protocol',
width: 4,
default: 'mqtt://',
choices: [
{ id: 'mqtt://', label: 'mqtt://' },
{ id: 'mqtts://', label: 'mqtts://' },
{ id: 'ws://', label: 'ws://' },
{ id: 'wss://', label: 'wss://' },
],
})
fields.push({
type: 'textinput',
id: 'broker_ip',
width: 4,
default: "127.0.0.1",
label: 'Broker (Hostname/IP)',
})
fields.push({
type: 'number',
id: 'port',
width: 4,
label: 'Port',
default: 1883,
min: 1,
max: 65535,
})
fields.push({
type: 'textinput',
id: 'user',
width: 6,
label: 'Username',
})
fields.push({
type: 'textinput',
id: 'password',
width: 6,
label: 'Password',
})
fields.push({
type: 'textinput',
id: 'clientId',
width: 6,
label: 'MQTT Client ID',
tooltip: "Must be unique for a broker, update if connecting more than one instance of this module on this Companion installation or another!",
default: 'bitfocus-companion-mqtt',
})
fields.push({
type: 'dropdown',
// type: 'multidropdown',
id: `capture_111`,
label: `Channel 111 captures`,
choices: this.captures,
width: 4,
});
fields.push({
type: 'number',
id: 'number_of_ports',
default: 0,
label: 'Number of Intercom Matrix ports',
width: 12,
})
if (this.config) {
if (this.config.number_of_ports > 0) {
for (let i = 1; i <= this.config.number_of_ports; i++) {
let field_description = {
type: 'static-text',
id: `description_${i}`,
label: `Port ${i}`,
width: 12,
};
let field_label = {
type: 'textinput',
id: `label_${i}`,
label: `Label`,
width: 4,
};
let field_color = {
type: 'colorpicker',
id: `color_${i}`,
label: `Color`,
width: 2,
};
let field_capture_count = {
type: 'number',
id: `capture_count_${i}`,
label: `Capture channels`,
min: 1,
default: 1,
width: 3,
};
let field_playback_count = {
type: 'number',
id: `playback_count_${i}`,
label: `Playback channels`,
min: 1,
default: 1,
width: 3,
};
fields.push(field_description, field_label, field_color, field_capture_count, field_playback_count);
let capture_count = this.config[`capture_count_${i}`];
let playback_count = this.config[`playback_count_${i}`];
let max_count = Math.max(capture_count, playback_count);
for (let j = 1; j <= max_count; j++) {
fields.push({
type: 'static-text',
id: `spacer_${i}_${j}`,
label: ``,
width: 4,
});
if (j <= capture_count) {
fields.push({
type: 'multidropdown',
// type: 'dropdown',
id: `capture_${i}_${j}`,
label: `Channel ${j} captures`,
choices: this.captures,
width: 4,
default: "None"
});
} else {
fields.push({
type: 'static-text',
id: `spacer_capture_${i}_${j}`,
label: ``,
width: 4,
});
}
if (j <= playback_count) {
fields.push({
type: 'multidropdown',
// type: 'dropdown',
id: `playback_${i}_${j}`,
label: `Channel ${j} playbacks`,
choices: this.playbacks,
width: 4,
default: "None"
});
} else {
fields.push({
type: 'static-text',
id: `spacer_playback_${i}_${j}`,
label: ``,
width: 4,
});
}
}
}
}
}
return fields
}