node-red-contrib-zigbee2mqtt
Version:
Zigbee2mqtt connectivity nodes for node-red
290 lines (267 loc) • 13 kB
HTML
<script type="text/x-red" data-template-name="zigbee2mqtt-out">
<link rel="stylesheet" href="resources/node-red-contrib-zigbee2mqtt/css/multiple-select.css" type="text/css" />
<link rel="stylesheet" href="resources/node-red-contrib-zigbee2mqtt/css/common.css" type="text/css" />
<div class="form-row">
<label for="node-input-name" class="l-width"><i class="fa fa-bookmark"></i> <span data-i18n="label.name"></span></label>
<input type="text" id="node-input-name" data-i18n="[placeholder]placeholder.name">
</div>
<div class="form-row" style="display:none;">
<label for="node-input-friendly_name" class="l-width"><i class="fa fa-bookmark"></i> <span data-i18n="label.friendly_name"></span></label>
<input type="text" id="node-input-friendly_name" data-i18n="[placeholder]placeholder.friendly_name">
</div>
<div class="form-row">
<label for="node-input-server" class="l-width"><i class="fa fa-globe"></i> <span data-i18n="label.server"></span></label>
<input type="text" id="node-input-server">
</div>
<div class="form-row">
<label for="node-input-device_id" class="l-width"><i class="fa fa-crosshairs"></i> <span data-i18n="label.topic"></span></label>
<select id="node-input-device_id" class="s-width" multiple="multiple"></select>
</div>
<!-- <div class="form-row">-->
<!-- <label for='node-input-enableMultiple' class="l-width"></label>-->
<!-- <input type="checkbox" id="node-input-enableMultiple" style="display: inline-block; width: auto; vertical-align: top;"> <span data-i18n="node-red-contrib-spruthub/server:label.enable_multiple"></span></input>-->
<!-- </div>-->
<div class="form-row">
<label for="force-refresh" class="l-width"><i class="fa fa-refresh"></i> <span data-i18n="label.refresh"></span></label>
<a class="red-ui-button s-width" id="force-refresh" name="force-refresh"><span data-i18n="label.refresh_devices_list"></span></a>
</div>
<div class="form-row">
<label for="node-input-command" class="l-width"><i class="fa fa-tasks"></i> <span data-i18n="label.command"></span></label>
<input type="text" id="node-input-command" style="width:70%">
<input type="hidden" id="node-input-commandType">
</div>
<div class="form-row">
<label for="node-input-payload" class="l-width"><i class="fa fa-envelope"></i> <span data-i18n="label.payload"></span></label>
<input type="text" id="node-input-payload" style="width:70%">
<input type="hidden" id="node-input-payloadType">
</div>
<!--homekit-->
<div class="form-row help_block help_block__homekit_homekit">
<div class="form-tips">
<strong><span data-i18n="help.important"></span></strong><br>
<span data-i18n="help.command_homekit"></span>
</div>
</div>
<div class="form-row">
<label for="node-input-optionsValue" class="l-width"><i class="fa fa-gears"></i> <span data-i18n="label.options"></span></label>
<input type="text" id="node-input-optionsValue" style="width:70%">
<input type="hidden" id="node-input-optionsType">
</div>
<!--option description-->
<div class="form-tips optionsType_description">
<strong><div data-i18n="help.description"></div></strong>
<span></span>
</div>
<div class="form-row node-input-rule-container-row">
<ol id="node-input-rule-container"></ol>
</div>
<hr>
<!--brightness_move-->
<div class="form-tips help_block help_block__z2m_cmd_brightness_move">
<strong><span data-i18n="help.description"></span></strong><br>
<span data-i18n="help.command_brightness_move"></span>
</div>
<!--brightness_step-->
<div class="form-tips help_block help_block__z2m_cmd_brightness_step">
<strong><span data-i18n="help.description"></span></strong><br>
<span data-i18n="help.command_brightness_step"></span>
</div>
</script>
<script type='text/javascript'>
RED.nodes.registerType('zigbee2mqtt-out', {
category: 'Zigbee2mqtt',
color: '#FDBF48',
align: 'right',
defaults: {
name: {
value: ""
},
server: {
type: "zigbee2mqtt-server",
required: true
},
friendly_name: {
value: "",
required: false
},
device_id: {
value: null
},
command: {
value: 'state',
},
commandType: {
value: 'z2m_cmd',
},
payload: {
value: 'payload',
},
payloadType: {
value: 'msg',
},
optionsValue: {
value: null,
},
optionsType: {
value: null,
},
// enableMultiple: {
// value: false,
// required: true
// },
},
inputLabels: "value",
paletteLabel: 'out',
inputs: 1,
outputs: 0,
icon: "icon.png",
label: function() {
var label = 'z2m-out';
if (this.name) {
label = this.name;
} else if (typeof(this.friendly_name) == 'string' && this.friendly_name.length) {
label = this.friendly_name;
} else if (typeof(this.device_id) == 'string') {
label = this.device_id;
}
return label;
},
oneditprepare: function() {
let node = this;
let $inputCommand = $('#node-input-command');
let $inputCommandType = $('#node-input-commandType');
// setTimeout(()=>{
new Zigbee2MqttEditor(node, {
'allow_empty': true
}).build();
showHelpBlock();
buildTypesInput();
$inputCommand.on('change', function(event, type, value) {
$('#node-input-payload').typedInput('types', getPayloadTypes(value));
//show/hide
if ('homekit' === type || 'nothing' === type) {
$('#node-input-payload').closest('.form-row').hide();
} else {
$('#node-input-payload').closest('.form-row').show();
}
showHelpBlock();
});
//init typedInput
$('#node-input-payload').typedInput({
types: getPayloadTypes(node.command),
default: 'msg',
value: 'payload',
typeField: $('#node-input-payloadType'),
});
$inputCommandType.val(node.commandType);
$('#node-input-payloadType').val(node.payloadType);
function showHelpBlock() {
var command = $('#node-input-command').val(); //state
var commandType = $('#node-input-commandType').val(); //z2m_cmd
if (command === '{}') command = 'json';
if (commandType === 'str') command = 'custom';
$('.help_block').hide();
$('.help_block__'+commandType+'_'+command).show();
}
function buildTypesInput() {
$('#node-input-command').typedInput({
types: getCommandTypes(),
default: 'msg',
value: 'topic',
typeField: $('#node-input-commandType'),
});
}
function getCommandTypes() {
return [
//z2m commands
{
value: 'z2m_cmd',
label: 'zigbee2mqtt',
icon: 'icons/node-red-contrib-zigbee2mqtt/icon.png',
options: [
{'value':'state', 'label':'State (on|off|toggle)'},
{'value':'brightness', 'label':'Brightness (0..255)'},
{'value':'brightness_move', 'label':'Brightness Move (-255...255|stop)'},
{'value':'brightness_move_onoff', 'label':'Brightness Move On/Off (-255...255|stop)'},
{'value':'brightness_step', 'label':'Brightness Step (-255...255)'},
{'value':'brightness_step_onoff', 'label':'Brightness Step On/Off (-255...255)'},
{'value':'color', 'label':'Color: {}'},
{'value':'color_rgb', 'label':'Color: r,g,b'},
{'value':'color_hex', 'label':'Color: #hex'},
{'value':'color_hsb', 'label':'Color: h,s,b'},
{'value':'color_hsv', 'label':'Color: h,s,v'},
{'value':'color_hue', 'label':'Color: hue'},
{'value':'color_saturation', 'label':'Color: saturation'},
{'value':'color_temp', 'label':'Color Temperature (50..400)'},
{'value':'color_temp_move', 'label':'Color Temperature Move (50..400|stop)'},
{'value':'color_temp_step', 'label':'Color Temperature Step (50..400)'},
{'value':'position', 'label':'Position (0..100)'},
{'value':'scene', 'label':'Scene (0..255)'},
{'value':'lock', 'label':'Lock (lock|unlock|on|off|toggle)'},
{'value':'alert', 'label':'Alert'}
]
},
//homekit
{
value:'homekit',
label:'homekit',
icon:'icons/node-red-contrib-zigbee2mqtt/homekit-logo.png',
options:[{'value':'homekit', 'label':'Apple Homekit data format'}]
},
{
value: 'nothing',
label: RED._("node-red-contrib-zigbee2mqtt/server:editor.nothing"),
options:['']
},
{value:'str', label: 'str'},
{value:'msg', label: 'msg'},
{value:'json',label:'JSON',options:['{}']}
];
}
function getPayloadTypes(command) {
let types = ['msg', 'flow', 'global', 'str', 'num', 'json'];
let options = [];
if ('state' === command) {
options = [
{'value':'on', 'label':'On'},
{'value':'off', 'label':'Off'},
{'value':'toggle', 'label':'Toggle'},
{'value':'lock', 'label':'Lock'},
{'value':'unlock', 'label':'Unlock'}
];
} else if ('color_temp' === command) {
options = [
{'value':'50', 'label':'Cold'},
{'value':'250', 'label':'White'},
{'value':'400', 'label':'Warm'}
];
} else if ('alert' === command) {
options = [
{'value':'none', 'label':'None'},
{'value':'select', 'label':'Blink short'},
{'value':'lselect', 'label':'Blink log'}
];
}
if (options.length) {
const predefinedValuesPayload = {
value: 'z2m_payload',
label: 'zigbee2mqtt',
icon: 'icons/node-red-contrib-zigbee2mqtt/icon.png',
options
};
return [predefinedValuesPayload, ...types]
} else {
return types;
}
}
// }, 100); //need timeout to load server node
},
oneditsave: function () {
//convert array for string if single mode
if (!$('#node-input-enableMultiple').is(':checked')) {
let device_id = $('#node-input-device_id').multipleSelect('getSelects', 'value');
this.device_id = device_id.length ? device_id[0] : null;
}
}
});
</script>