node-red-nd-zigbee2mqtt
Version:
Zigbee2mqtt connectivity nodes for node-red
265 lines (236 loc) • 11.5 kB
HTML
<script type="text/x-red" data-template-name="zigbee2mqtt-out">
<link rel="stylesheet" href="zigbee2mqtt/static/css/multiple-select.css" type="text/css" />
<link rel="stylesheet" href="zigbee2mqtt/static/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" data-single="true"></select>
</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>
<div class="form-row node-input-rule-container-row">
<ol id="node-input-rule-container"></ol>
</div>
<hr>
<!--homekit-->
<div class="form-tips help_block help_block__homekit_homekit">
<strong><span data-i18n="help.important"></span></strong><br>
<span data-i18n="help.command_homekit"></span>
</div>
<!--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>
<!--transition-->
<div class="help_block help_block__z2m_cmd_brightness help_block__z2m_cmd_state help_block__z2m_cmd_color_temp help_block__z2m_cmd_hue help_block__z2m_cmd_saturation">
<strong><span data-i18n="help.options"></span></strong><br>
<div class="form-row">
<label for="node-input-transition" class="l-width"><i class="fa fa-clock-o"></i> <span data-i18n="label.transition"></span></label>
<input type="number" id="node-input-transition" data-i18n="[placeholder]placeholder.transition">
</div>
<span class="help-tips" data-i18n="help.option_transition"></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,
required: true
},
command: {
value: '/set',
},
commandType: {
value: 'z2m_cmd',
},
payload: {
value: 'payload',
},
payloadType: {
value: 'msg',
},
transition: {
value: 0,
required: false
},
},
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;
}
if (!this.name && this.command) {
let suffix = this.command
label = `${label} (${suffix})`;
}
return label;
},
oneditprepare: function() {
var node = this;
var topicTypes = {
value: 'z2m_cmd',
label: 'zigbee2mqtt',
icon: 'icons/node-red-nd-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_step', 'label':'Brightness Step (-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':'position', 'label':'Position'},
'alert'
]
};
$('#node-input-command').typedInput({
types: [topicTypes, {value:'homekit',label:'homekit',icon: 'icons/node-red-nd-zigbee2mqtt/homekit-logo.png',options:['homekit']}, 'str', 'msg', {value:'json',label:'JSON',options:['{}']}],
default: 'msg',
value: 'topic',
typeField: $('#node-input-commandType'),
});
$('#node-input-device_id').on('change', function(type, value) {
$('#node-input-command').trigger('change');
$('#node-input-friendly_name').val($('#node-input-device_id option:selected').attr('data-friendly_name'));
});
$('#node-input-command').on('change', function(type, value) {
var val = $(this).val();
//chane options
var options = {};
if ('state' === val) {
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' === val) {
options = [
{'value':'50', 'label':'Cold'},
{'value':'250', 'label':'White'},
{'value':'400', 'label':'Warm'}
];
} else if ('alert' === val) {
options = [
{'value':'none', 'label':'None'},
{'value':'select', 'label':'Blink short'},
{'value':'lselect', 'label':'Blink log'}
];
}
if (options.length) {
var payloadTypes = {
value: 'z2m_payload',
label: 'zigbee2mqtt',
icon: 'icons/node-red-nd-zigbee2mqtt/icon.png',
options: options
};
$('#node-input-payload').typedInput('types', [payloadTypes, 'msg', 'flow', 'global', 'str', 'num', 'json']);
} else {
$('#node-input-payload').typedInput('types', ['msg', 'flow', 'global', 'str', 'num', 'json']);
}
//show/hide
if (['homekit'].indexOf(val) >= 0) {
$('#node-input-payload').closest('.form-row').hide();
} else {
$('#node-input-payload').closest('.form-row').show();
}
showHelpBlock();
});
//init typedInput
var payloadTypes = {
value: 'z2m_payload',
label: 'zigbee2mqtt',
icon: 'icons/node-red-nd-zigbee2mqtt/icon.png',
options: []
};
$('#node-input-payload').typedInput({
types: [payloadTypes, 'msg', 'flow', 'global', 'str', 'num', 'json'],
default: 'msg',
value: 'payload',
typeField: $('#node-input-payloadType'),
});
$('#node-input-commandType').val(node.commandType);
$('#node-input-payloadType').val(node.payloadType);
setTimeout(function(){
var $deviceInput = $('#node-input-device_id');
z2m_getItemList(node.device_id, '#node-input-device_id', {allowEmpty:false});
showHelpBlock();
// $deviceInput.on('change', function(){
// z2m_getItemStateList(0, '#node-input-state');
// });
// setTimeout(function () {
// z2m_getItemStateList(node.state, '#node-input-state');
// },100);
}, 100); //we need small timeout, too fire change event for server select
function showHelpBlock() {
var command = $('#node-input-command').val(); //state
var commandType = $('#node-input-commandType').val(); //z2m_cmd
var payload = $('#node-input-payloadType').val(); //msg
var payloadType = $('#node-input-payload').val(); //payload
if (command == '{}') command = 'json';
if (commandType == 'str') command = 'custom';
$('.help_block').hide();
$('.help_block__'+commandType+'_'+command).show();
}
}
});
</script>