node-red-contrib-google-smarthome
Version:
Lets you control Node-Red via Google Assistant or the Google Home App
723 lines (624 loc) • 212 kB
HTML
<!--
node-red-contrib-google-smarthome
Copyright (C) 2024 Claudio Chimera and others.
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<!--
Google Device with all traits
-->
<script type="text/html" data-template-name="google-device">
<style>
ol#node-input-device-zone-container .red-ui-typedInput-container {
flex:1;
}
ol#node-input-device-network-profiles-container .red-ui-typedInput-container {
flex:1;
}
</style>
<div class="form-tips" style="margin-bottom: 1em">
For setup instructions, <a href="https://github.com/mikejac/node-red-contrib-google-smarthome/blob/master/docs/setup_instructions.md" target="_blank">look here </a>.
</div>
<div class="form-row">
<b>Google SmartHome Settings</b>
</div>
<div class="form-row">
<label style="width:auto" for="node-input-client"><i class="fa fa-globe"></i> SmartHome</label>
<input type="text" id="node-input-client">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="device.label.name"></span></label>
<input type="text" id="node-input-name" data-i18n="[placeholder]device.placeholder.name">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-nicknames"><i class="fa fa-tag"></i> <span data-i18n="device.label.nicknames"></span></label>
<input type="text" id="node-input-nicknames" data-i18n="[placeholder]device.placeholder.nicknames">
</div>
<div class="form-row">
<b>Node-RED Settings</b>
</div>
<div class="form-row">
<label style="width:auto" for="node-input-topic"><i class="fa fa-tag"></i> <span data-i18n="device.label.topic"></span></label>
<input type="text" id="node-input-topic" data-i18n="[placeholder]device.placeholder.topic">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-room_hint"><i class="fa fa-tag"></i> <span data-i18n="device.label.room_hint"></span></label>
<input type="text" id="node-input-room_hint" data-i18n="[placeholder]device.placeholder.room_hint">
</div>
<!-- Filter by Topic -->
<div class="form-row">
<label style="width:auto" for="node-input-topic_filter"><i class="fa fa-arrow-right"></i> <span data-i18n="device.label.topic_filter"></span></label>
<input type="checkbox" id="node-input-topic_filter" style="display:inline-block; width:auto; vertical-align:top;">
</div>
<!-- Passthru -->
<div class="form-row">
<label style="width:auto" for="node-input-passthru"><i class="fa fa-arrow-right"></i> <span data-i18n="device.label.passthru"></span></label>
<input type="checkbox" id="node-input-passthru" style="display:inline-block; width:auto; vertical-align:top;">
</div>
<!-- Persistent State -->
<div class="form-row">
<label style="width:auto" for="node-input-persistent_state"><i class="fa fa-arrow-right"></i> <span data-i18n="device.label.persistent_state"></span></label>
<input type="checkbox" id="node-input-persistent_state" style="display:inline-block; width:auto; vertical-align:top;">
</div>
<!-- Device Type -->
<div class="form-row" id="device_type">
<label style="width:auto" for="node-input-device_type"><i class="fa fa-tag"></i> <span data-i18n="device.label.device_type"></span></label>
<select id="node-input-device_type" >
<option value='AC_UNIT' data-i18n='device.device_type.AC_UNIT'></option>
<option value='AIRCOOLER' data-i18n='device.device_type.AIRCOOLER'></option>
<option value='AIRFRESHENER' data-i18n='device.device_type.AIRFRESHENER'></option>
<option value='AIRPURIFIER' data-i18n='device.device_type.AIRPURIFIER'></option>
<option value='AUDIO_VIDEO_RECEIVER' data-i18n='device.device_type.AUDIO_VIDEO_RECEIVER'></option>
<option value='AWNING' data-i18n='device.device_type.AWNING'></option>
<option value='BATHTUB' data-i18n='device.device_type.BATHTUB'></option>
<option value='BED' data-i18n='device.device_type.BED'></option>
<option value='BLENDER' data-i18n='device.device_type.BLENDER'></option>
<option value='BLINDS' data-i18n='device.device_type.BLINDS'></option>
<option value='BOILER' data-i18n='device.device_type.BOILER'></option>
<option value='CAMERA' data-i18n='device.device_type.CAMERA'></option>
<option value='CARBON_MONOXIDE_DETECTOR' data-i18n='device.device_type.CARBON_MONOXIDE_DETECTOR'></option>
<option value='CHARGER' data-i18n='device.device_type.CHARGER'></option>
<option value='CLOSET' data-i18n='device.device_type.CLOSET'></option>
<option value='COFFEE_MAKER' data-i18n='device.device_type.COFFEE_MAKER'></option>
<option value='COOKTOP' data-i18n='device.device_type.COOKTOP'></option>
<option value='CURTAIN' data-i18n='device.device_type.CURTAIN'></option>
<option value='DEHUMIDIFIER' data-i18n='device.device_type.DEHUMIDIFIER'></option>
<option value='DEHYDRATOR' data-i18n='device.device_type.DEHYDRATOR'></option>
<option value='DISHWASHER' data-i18n='device.device_type.DISHWASHER'></option>
<option value='DOOR' data-i18n='device.device_type.DOOR'></option>
<option value='DOORBELL' data-i18n='device.device_type.DOORBELL'></option>
<option value='DRAWER' data-i18n='device.device_type.DRAWER'></option>
<option value='DRYER' data-i18n='device.device_type.DRYER'></option>
<option value='FAN' data-i18n='device.device_type.FAN'></option>
<option value='FAUCET' data-i18n='device.device_type.FAUCET'></option>
<option value='FIREPLACE' data-i18n='device.device_type.FIREPLACE'></option>
<option value='FREEZER' data-i18n='device.device_type.FREEZER'></option>
<option value='FRYER' data-i18n='device.device_type.FRYER'></option>
<option value='GAME_CONSOLE' data-i18n='device.device_type.GAME_CONSOLE'></option>
<option value='GARAGE' data-i18n='device.device_type.GARAGE'></option>
<option value='GATE' data-i18n='device.device_type.GATE'></option>
<option value='GRILL' data-i18n='device.device_type.GRILL'></option>
<option value='HEATER' data-i18n='device.device_type.HEATER'></option>
<option value='HOOD' data-i18n='device.device_type.HOOD'></option>
<option value='HUMIDIFIER' data-i18n='device.device_type.HUMIDIFIER'></option>
<option value='KETTLE' data-i18n='device.device_type.KETTLE'></option>
<option value='LIGHT' data-i18n='device.device_type.LIGHT'></option>
<option value='LOCK' data-i18n='device.device_type.LOCK'></option>
<option value='MICROWAVE' data-i18n='device.device_type.MICROWAVE'></option>
<option value='MOP' data-i18n='device.device_type.MOP'></option>
<option value='MOWER' data-i18n='device.device_type.MOWER'></option>
<option value='MULTICOOKER' data-i18n='device.device_type.MULTICOOKER'></option>
<option value='NETWORK' data-i18n='device.device_type.NETWORK'></option>
<option value='OUTLET' data-i18n='device.device_type.OUTLET'></option>
<option value='OVEN' data-i18n='device.device_type.OVEN'></option>
<option value='PERGOLA' data-i18n='device.device_type.PERGOLA'></option>
<option value='PETFEEDER' data-i18n='device.device_type.PETFEEDER'></option>
<option value='PRESSURECOOKER' data-i18n='device.device_type.PRESSURECOOKER'></option>
<option value='RADIATOR' data-i18n='device.device_type.RADIATOR'></option>
<option value='REFRIGERATOR' data-i18n='device.device_type.REFRIGERATOR'></option>
<option value='REMOTECONTROL' data-i18n='device.device_type.REMOTECONTROL'></option>
<option value='ROUTER' data-i18n='device.device_type.ROUTER'></option>
<option value='SCENE' data-i18n='device.device_type.SCENE'></option>
<option value='SECURITYSYSTEM' data-i18n='device.device_type.SECURITYSYSTEM'></option>
<option value='SENSOR' data-i18n='device.device_type.SENSOR'></option>
<option value='SETTOP' data-i18n='device.device_type.SETTOP'></option>
<option value='SHOWER' data-i18n='device.device_type.SHOWER'></option>
<option value='SHUTTER' data-i18n='device.device_type.SHUTTER'></option>
<option value='SMOKE_DETECTOR' data-i18n='device.device_type.SMOKE_DETECTOR'></option>
<option value='SOUNDBAR' data-i18n='device.device_type.SOUNDBAR'></option>
<option value='SOUSVIDE' data-i18n='device.device_type.SOUSVIDE'></option>
<option value='SPEAKER' data-i18n='device.device_type.SPEAKER'></option>
<option value='SPRINKLER' data-i18n='device.device_type.SPRINKLER'></option>
<option value='STANDMIXER' data-i18n='device.device_type.STANDMIXER'></option>
<option value='STREAMING_BOX' data-i18n='device.device_type.STREAMING_BOX'></option>
<option value='STREAMING_SOUNDBAR' data-i18n='device.device_type.STREAMING_SOUNDBAR'></option>
<option value='STREAMING_STICK' data-i18n='device.device_type.STREAMING_STICK'></option>
<option value='SWITCH' data-i18n='device.device_type.SWITCH'></option>
<option value='THERMOSTAT' data-i18n='device.device_type.THERMOSTAT'></option>
<option value='TV' data-i18n='device.device_type.TV'></option>
<option value='VACUUM' data-i18n='device.device_type.VACUUM'></option>
<option value='VALVE' data-i18n='device.device_type.VALVE'></option>
<option value='WASHER' data-i18n='device.device_type.WASHER'></option>
<option value='WATERHEATER' data-i18n='device.device_type.WATERHEATER'></option>
<option value='WATERPURIFIER' data-i18n='device.device_type.WATERPURIFIER'></option>
<option value='WATERSOFTENER' data-i18n='device.device_type.WATERSOFTENER'></option>
<option value='WINDOW' data-i18n='device.device_type.WINDOW'></option>
<option value='YOGURTMAKER' data-i18n='device.device_type.YOGURTMAKER'></option>
</select>
</div>
<!-- Show Traits -->
<div class="form-row">
<label style="width:auto" for="node-input-show_trait"><i class="fa fa-tag"></i> <span data-i18n="device.label.show_trait"></span></label>
<select id="node-input-show_trait" >
<option value="selected" data-i18n="device.label.selected"></option>
<option value="recommended" data-i18n="device.label.recommended"></option>
<option value="all" data-i18n="device.label.all"></option>
</select>
</div>
<div class="form-row" hidden>
<label style="width:auto" for="node-input-advanced_settings"><i class="fa fa-arrow-right"></i> <span data-i18n="device.label.advanced_settings"></span></label>
<input type="checkbox" id="node-input-advanced_settings" style="display:inline-block; width:auto; vertical-align:top;">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-online"><i class="fa fa-arrow-right"></i> <span data-i18n="device.label.online"></span></label>
<input type="checkbox" id="node-input-online" style="display:inline-block; width:auto; vertical-align:top;">
</div>
<!-- AppSelector Trait-->
<div class="form-row red-ui-editableList-border div_trait" id="appselector" style="background: #fbfbfb; padding: 5px;">
<div class="form-row" id="cb_trait_appselector">
<b><label style="width:auto" for="node-input-trait_appselector"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.appselector"></span></label></b>
<input type="checkbox" id="node-input-trait_appselector" style="display:inline-block; width:auto; vertical-align:top;" class="cb_trait">
<a target="_blank" class="red-ui-palette-module-link" href="https://developers.google.com/assistant/smarthome/traits/appselector"><i class="fa fa-external-link"></i></a>
<a class="pull-right" href="#"><i class="fa fa-caret-down oc_trait"></i></a>
</div>
<div class="form-row label_trait" id="label_trait_appselector">
<b><label style="width:auto"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.appselector"></span></label></b>
<a target="_blank" class="red-ui-palette-module-link" href="https://developers.google.com/assistant/smarthome/traits/appselector"><i class="fa fa-external-link"></i></a>
<a class="pull-right" href="#"><i class="fa fa-caret-down oc_trait"></i></a>
</div>
<div id="trait_appselector">
<div class="form-row">
<label style="width:auto" for="node-input-appselector_file"><i class="fa fa-file"></i> <span data-i18n="device.label.appselector_file"></span></label>
<input type="text" id="node-input-appselector_file" data-i18n="[placeholder]device.placeholder.appselector_file">
<input type="hidden" id="node-input-appselector_type">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-ct_appselector"><i class="fa fa-tag"></i> <span data-i18n="device.label.challenge_type"></span></label>
<select id="node-input-ct_appselector" class="challenge_type">
<option value="" data-i18n="device.label.no_challenge"></option>
<option value="ackNeeded" data-i18n="device.label.ackNeeded"></option>
<option value="pinNeeded" data-i18n="device.label.pinNeeded"></option>
</select>
</div>
<div class="form-row challenge_pin">
<label style="width:auto" for="node-input-pin_appselector"><i class="fa fa-tag"></i> <span data-i18n="device.label.pin"></span></label>
<input type="text" id="node-input-pin_appselector" data-i18n="[placeholder]device.placeholder.pin">
</div>
</div>
</div>
<!-- ArmDisarm Trait-->
<div class="form-row red-ui-editableList-border div_trait" id="armdisarm" style="background: #fbfbfb; padding: 5px;">
<div class="form-row" id="cb_trait_armdisarm">
<b><label style="width:auto" for="node-input-trait_armdisarm"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.armdisarm"></span></label></b>
<input type="checkbox" id="node-input-trait_armdisarm" style="display:inline-block; width:auto; vertical-align:top;" class="cb_trait">
<a target="_blank" class="red-ui-palette-module-link" href="https://developers.google.com/assistant/smarthome/traits/armdisarm"><i class="fa fa-external-link"></i></a>
<a class="pull-right" href="#"><i class="fa fa-caret-down oc_trait"></i></a>
</div>
<div class="form-row label_trait" id="label_trait_armdisarm">
<b><label style="width:auto"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.armdisarm"></span></label></b>
<a target="_blank" class="red-ui-palette-module-link" href="https://developers.google.com/assistant/smarthome/traits/armdisarm"><i class="fa fa-external-link"></i></a>
<a class="pull-right" href="#"><i class="fa fa-caret-down oc_trait"></i></a>
</div>
<div id="trait_armdisarm">
<div class="form-row">
<label style="width:auto" for="node-input-available_arm_levels_file"><i class="fa fa-file"></i> <span data-i18n="device.label.available_arm_levels_file"></span></label>
<input type="text" id="node-input-available_arm_levels_file" data-i18n="[placeholder]device.placeholder.available_arm_levels_file">
<input type="hidden" id="node-input-available_arm_levels_type">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-arm_levels_ordered"><i class="fa fa-arrow-right"></i> <span data-i18n="device.label.arm_levels_ordered"></span></label>
<input type="checkbox" id="node-input-arm_levels_ordered" style="display:inline-block; width:auto; vertical-align:top;">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-ct_armdisarm"><i class="fa fa-tag"></i> <span data-i18n="device.label.challenge_type"></span></label>
<select id="node-input-ct_armdisarm" class="challenge_type">
<option value="" data-i18n="device.label.no_challenge"></option>
<option value="ackNeeded" data-i18n="device.label.ackNeeded"></option>
<option value="pinNeeded" data-i18n="device.label.pinNeeded"></option>
</select>
</div>
<div class="form-row challenge_pin">
<label style="width:auto" for="node-input-pin_armdisarm"><i class="fa fa-tag"></i> <span data-i18n="device.label.pin"></span></label>
<input type="text" id="node-input-pin_armdisarm" data-i18n="[placeholder]device.placeholder.pin">
</div>
</div>
</div>
<!-- Brightness Trait-->
<div class="form-row red-ui-editableList-border div_trait" id="brightness" style="background: #fbfbfb; padding: 5px;">
<div class="form-row" id="cb_trait_brightness">
<b><label style="width:auto" for="node-input-trait_brightness"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.brightness"></span></label></b>
<input type="checkbox" id="node-input-trait_brightness" style="display:inline-block; width:auto; vertical-align:top;" class="cb_trait">
<a target="_blank" class="red-ui-palette-module-link" href="https://developers.google.com/assistant/smarthome/traits/brightness"><i class="fa fa-external-link"></i></a>
<a class="pull-right" href="#"><i class="fa fa-caret-down oc_trait"></i></a>
</div>
<div class="form-row label_trait" id="label_trait_brightness">
<b><label style="width:auto"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.brightness"></span></label></b>
<a target="_blank" class="red-ui-palette-module-link" href="https://developers.google.com/assistant/smarthome/traits/brightness"><i class="fa fa-external-link"></i></a>
<a class="pull-right" href="#"><i class="fa fa-caret-down oc_trait"></i></a>
</div>
<div id="trait_brightness">
<div class="form-row device-advanced">
<label style="width:auto" for="node-input-command_only_brightness"><i class="fa fa-arrow-right"></i> <span data-i18n="device.label.command_only"></span></label>
<input type="checkbox" id="node-input-command_only_brightness" style="display:inline-block; width:auto; vertical-align:top;">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-ct_brightness"><i class="fa fa-tag"></i> <span data-i18n="device.label.challenge_type"></span></label>
<select id="node-input-ct_brightness" class="challenge_type">
<option value="" data-i18n="device.label.no_challenge"></option>
<option value="ackNeeded" data-i18n="device.label.ackNeeded"></option>
<option value="pinNeeded" data-i18n="device.label.pinNeeded"></option>
</select>
</div>
<div class="form-row challenge_pin">
<label style="width:auto" for="node-input-pin_brightness"><i class="fa fa-tag"></i> <span data-i18n="device.label.pin"></span></label>
<input type="text" id="node-input-pin_brightness" data-i18n="[placeholder]device.placeholder.pin">
</div>
</div>
</div>
<!-- CameraStream trait-->
<div class="form-row red-ui-editableList-border div_trait" id="camerastream" style="background: #fbfbfb; padding: 5px;">
<div class="form-row" id="cb_trait_camerastream">
<b><label style="width:auto" for="node-input-trait_camerastream"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.camerastream"></span></label></b>
<input type="checkbox" id="node-input-trait_camerastream" style="display:inline-block; width:auto; vertical-align:top;" class="cb_trait">
<a target="_blank" class="red-ui-palette-module-link" href="https://developers.google.com/assistant/smarthome/traits/camerastream"><i class="fa fa-external-link"></i></a>
<a class="pull-right" href="#"><i class="fa fa-caret-down oc_trait"></i></a>
</div>
<div class="form-row label_trait" id="label_trait_camerastream">
<b><label style="width:auto"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.camerastream"></span></label></b>
<a target="_blank" class="red-ui-palette-module-link" href="https://developers.google.com/assistant/smarthome/traits/camerastream"><i class="fa fa-external-link"></i></a>
<a class="pull-right" href="#"><i class="fa fa-caret-down oc_trait"></i></a>
</div>
<div id="trait_camerastream">
<div class="form-row">
<label style="width:auto" for="node-input-hls"><i class="fa fa-globe"></i> <span data-i18n="device.label.hls"></span></label>
<input type="text" id="node-input-hls" data-i18n="[placeholder]device.placeholder.hls">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-hls_app_id"><i class="fa fa-tag"></i> <span data-i18n="device.label.hls_app_id"></span></label>
<input type="text" id="node-input-hls_app_id" data-i18n="[placeholder]device.placeholder.hls_app_id">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-dash"><i class="fa fa-globe"></i> <span data-i18n="device.label.dash"></span></label>
<input type="text" id="node-input-dash" data-i18n="[placeholder]device.placeholder.dash">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-dash_app_id"><i class="fa fa-tag"></i> <span data-i18n="device.label.dash_app_id"></span></label>
<input type="text" id="node-input-dash_app_id" data-i18n="[placeholder]device.placeholder.dash_app_id">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-smooth_stream"><i class="fa fa-globe"></i> <span data-i18n="device.label.smooth_stream"></span></label>
<input type="text" id="node-input-smooth_stream" data-i18n="[placeholder]device.placeholder.smooth_stream">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-smooth_stream_app_id"><i class="fa fa-tag"></i> <span data-i18n="device.label.smooth_stream_app_id"></span></label>
<input type="text" id="node-input-smooth_stream_app_id" data-i18n="[placeholder]device.placeholder.smooth_stream_app_id">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-progressive_mp4"><i class="fa fa-globe"></i> <span data-i18n="device.label.progressive_mp4"></span></label>
<input type="text" id="node-input-progressive_mp4" data-i18n="[placeholder]device.placeholder.progressive_mp4">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-progressive_mp4_app_id"><i class="fa fa-tag"></i> <span data-i18n="device.label.progressive_mp4_app_id"></span></label>
<input type="text" id="node-input-progressive_mp4_app_id" data-i18n="[placeholder]device.placeholder.progressive_mp4_app_id">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-webrtc"><i class="fa fa-globe"></i> <span data-i18n="device.label.webrtc"></span></label>
<input type="text" id="node-input-webrtc" data-i18n="[placeholder]device.placeholder.webrtc">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-webrtc_offer"><i class="fa fa-tag"></i> <span data-i18n="device.label.webrtc_offer"></span></label>
<input type="text" id="node-input-webrtc_offer" data-i18n="[placeholder]device.placeholder.webrtc_offer">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-webrtc_ice_servers"><i class="fa fa-tag"></i> <span data-i18n="device.label.webrtc_ice_servers"></span></label>
<input type="text" id="node-input-webrtc_ice_servers" data-i18n="[placeholder]device.placeholder.webrtc_ice_servers">
<input type="hidden" id="node-input-webrtc_ice_servers_type">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-need_auth_token"><i class="fa fa-arrow-right"></i> <span data-i18n="device.label.need_auth_token"></span></label>
<input type="checkbox" id="node-input-need_auth_token" style="display:inline-block; width:auto; vertical-align:top;">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-auth_token"><i class="fa fa-tag"></i> <span data-i18n="device.label.auth_token"></span></label>
<input type="text" id="node-input-auth_token" data-i18n="[placeholder]device.placeholder.auth_token">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-ct_camerastream"><i class="fa fa-tag"></i> <span data-i18n="device.label.challenge_type"></span></label>
<select id="node-input-ct_camerastream" class="challenge_type">
<option value="" data-i18n="device.label.no_challenge"></option>
<option value="ackNeeded" data-i18n="device.label.ackNeeded"></option>
<option value="pinNeeded" data-i18n="device.label.pinNeeded"></option>
</select>
</div>
<div class="form-row challenge_pin">
<label style="width:auto" for="node-input-pin_camerastream"><i class="fa fa-tag"></i> <span data-i18n="device.label.pin"></span></label>
<input type="text" id="node-input-pin_camerastream" data-i18n="[placeholder]device.placeholder.pin">
</div>
</div>
</div>
<!-- Channel Trait-->
<div class="form-row red-ui-editableList-border div_trait" id="channel" style="background: #fbfbfb; padding: 5px;">
<div class="form-row" id="cb_trait_channel">
<b><label style="width:auto" for="node-input-trait_channel"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.channel"></span></label></b>
<input type="checkbox" id="node-input-trait_channel" style="display:inline-block; width:auto; vertical-align:top;" class="cb_trait">
<a target="_blank" class="red-ui-palette-module-link" href="https://developers.google.com/assistant/smarthome/traits/channel"><i class="fa fa-external-link"></i></a>
<a class="pull-right" href="#"><i class="fa fa-caret-down oc_trait"></i></a>
</div>
<div class="form-row label_trait" id="label_trait_channel">
<b><label style="width:auto"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.channel"></span></label></b>
<a target="_blank" class="red-ui-palette-module-link" href="https://developers.google.com/assistant/smarthome/traits/channel"><i class="fa fa-external-link"></i></a>
<a class="pull-right" href="#"><i class="fa fa-caret-down oc_trait"></i></a>
</div>
<div id="trait_channel">
<div class="form-row">
<label style="width:auto" for="node-input-channel_file"><i class="fa fa-file"></i> <span data-i18n="device.label.channel_file"></span></label>
<input type="text" id="node-input-channel_file" data-i18n="[placeholder]device.placeholder.channel_file">
<input type="hidden" id="node-input-channel_type">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-ct_channel"><i class="fa fa-tag"></i> <span data-i18n="device.label.challenge_type"></span></label>
<select id="node-input-ct_channel" class="challenge_type">
<option value="" data-i18n="device.label.no_challenge"></option>
<option value="ackNeeded" data-i18n="device.label.ackNeeded"></option>
<option value="pinNeeded" data-i18n="device.label.pinNeeded"></option>
</select>
</div>
<div class="form-row challenge_pin">
<label style="width:auto" for="node-input-pin_channel"><i class="fa fa-tag"></i> <span data-i18n="device.label.pin"></span></label>
<input type="text" id="node-input-pin_channel" data-i18n="[placeholder]device.placeholder.pin">
</div>
</div>
</div>
<!-- ColorSetting Trait-->
<div class="form-row red-ui-editableList-border div_trait" id="colorsetting" style="background: #fbfbfb; padding: 5px;">
<div class="form-row" id="cb_trait_colorsetting">
<b><label style="width:auto" for="node-input-trait_colorsetting"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.colorsetting"></span></label></b>
<input type="checkbox" id="node-input-trait_colorsetting" style="display:inline-block; width:auto; vertical-align:top;" class="cb_trait">
<a target="_blank" class="red-ui-palette-module-link" href="https://developers.google.com/assistant/smarthome/traits/colorsetting"><i class="fa fa-external-link"></i></a>
<a class="pull-right" href="#"><i class="fa fa-caret-down oc_trait"></i></a>
</div>
<div class="form-row label_trait" id="label_trait_colorsetting">
<b><label style="width:auto"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.colorsetting"></span></label></b>
<a target="_blank" class="red-ui-palette-module-link" href="https://developers.google.com/assistant/smarthome/traits/colorsetting"><i class="fa fa-external-link"></i></a>
<a class="pull-right" href="#"><i class="fa fa-caret-down oc_trait"></i></a>
</div>
<div id="trait_colorsetting">
<div class="form-row device-advanced">
<label style="width:auto" for="node-input-command_only_colorsetting"><i class="fa fa-arrow-right"></i> <span data-i18n="device.label.command_only"></span></label>
<input type="checkbox" id="node-input-command_only_colorsetting" style="display:inline-block; width:auto; vertical-align:top;">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-color_model"><i class="fa fa-tag"></i> <span data-i18n="device.label.color_model"></span></label>
<select id="node-input-color_model" >
<option value="temp" data-i18n="device.label.temperature_k"></option>
<option value="rgb" data-i18n="device.label.rgb"></option>
<option value="hsv" data-i18n="device.label.hsv"></option>
<option value="rgb_temp" data-i18n="device.label.rgb_temp"></option>
<option value="hsv_temp" data-i18n="device.label.hsv_temp"></option>
</select>
</div>
<div class="form-row">
<b><label style="width:auto"><i class="fa fa-arrow-right"></i> <span data-i18n="device.label.color_temperature_range"></span></label></b>
<div class="form-row">
<label style="width:auto" for="node-input-temperature_min_k"><i class="fa fa-tag"></i> <span data-i18n="device.label.temperature_min_k"></span></label>
<input type="text" id="node-input-temperature_min_k" data-i18n="[placeholder]device.placeholder.temperature_min_k">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-temperature_max_k"><i class="fa fa-tag"></i> <span data-i18n="device.label.temperature_max_k"></span></label>
<input type="text" id="node-input-temperature_max_k" data-i18n="[placeholder]device.placeholder.temperature_max_k">
</div>
</div>
<div class="form-row">
<label style="width:auto" for="node-input-ct_colorsetting"><i class="fa fa-tag"></i> <span data-i18n="device.label.challenge_type"></span></label>
<select id="node-input-ct_colorsetting" class="challenge_type">
<option value="" data-i18n="device.label.no_challenge"></option>
<option value="ackNeeded" data-i18n="device.label.ackNeeded"></option>
<option value="pinNeeded" data-i18n="device.label.pinNeeded"></option>
</select>
</div>
<div class="form-row challenge_pin">
<label style="width:auto" for="node-input-pin_colorsetting"><i class="fa fa-tag"></i> <span data-i18n="device.label.pin"></span></label>
<input type="text" id="node-input-pin_colorsetting" data-i18n="[placeholder]device.placeholder.pin">
</div>
</div>
</div>
<!-- Cook Trait-->
<div class="form-row red-ui-editableList-border div_trait" id="cook" style="background: #fbfbfb; padding: 5px;">
<div class="form-row" id="cb_trait_cook">
<b><label style="width:auto" for="node-input-trait_cook"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.cook"></span></label></b>
<input type="checkbox" id="node-input-trait_cook" style="display:inline-block; width:auto; vertical-align:top;" class="cb_trait">
<a target="_blank" class="red-ui-palette-module-link" href="https://developers.google.com/assistant/smarthome/traits/cook"><i class="fa fa-external-link"></i></a>
<a class="pull-right" href="#"><i class="fa fa-caret-down oc_trait"></i></a>
</div>
<div class="form-row label_trait" id="label_trait_cook">
<b><label style="width:auto"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.cook"></span></label></b>
<a target="_blank" class="red-ui-palette-module-link" href="https://developers.google.com/assistant/smarthome/traits/cook"><i class="fa fa-external-link"></i></a>
<a class="pull-right" href="#"><i class="fa fa-caret-down oc_trait"></i></a>
</div>
<div id="trait_cook">
<div class="form-row">
<label style="width:auto" for="node-input-supported_cooking_modes"><i class="fa fa-tag"></i> <span data-i18n="device.label.supported_cooking_modes"></span></label>
<select multiple id="node-input-supported_cooking_modes" >
<option value="UNKNOWN_COOKING_MODE" data-i18n="device.label.UNKNOWN_COOKING_MODE"></option>
<option value="BAKE" data-i18n="device.label.BAKE"></option>
<option value="BEAT" data-i18n="device.label.BEAT"></option>
<option value="BLEND" data-i18n="device.label.BLEND"></option>
<option value="BOIL" data-i18n="device.label.BOIL"></option>
<option value="BREW" data-i18n="device.label.BREW"></option>
<option value="BROIL" data-i18n="device.label.BROIL"></option>
<option value="CONVECTION_BAKE" data-i18n="device.label.CONVECTION_BAKE"></option>
<option value="COOK" data-i18n="device.label.COOK"></option>
<option value="DEFROST" data-i18n="device.label.DEFROST"></option>
<option value="DEHYDRATE" data-i18n="device.label.DEHYDRATE"></option>
<option value="FERMENT" data-i18n="device.label.FERMENT"></option>
<option value="FRY" data-i18n="device.label.FRY"></option>
<option value="GRILL" data-i18n="device.label.GRILL"></option>
<option value="KNEAD" data-i18n="device.label.KNEAD"></option>
<option value="MICROWAVE" data-i18n="device.label.MICROWAVE"></option>
<option value="MIX" data-i18n="device.label.MIX"></option>
<option value="PRESSURE_COOK" data-i18n="device.label.PRESSURE_COOK"></option>
<option value="PUREE" data-i18n="device.label.PUREE"></option>
<option value="ROAST" data-i18n="device.label.ROAST"></option>
<option value="SAUTE" data-i18n="device.label.SAUTE"></option>
<option value="SLOW_COOK" data-i18n="device.label.SLOW_COOK"></option>
<option value="SOUS_VIDE" data-i18n="device.label.SOUS_VIDE"></option>
<option value="STEAM" data-i18n="device.label.STEAM"></option>
<option value="STEW" data-i18n="device.label.STEW"></option>
<option value="STIR" data-i18n="device.label.STIR"></option>
<option value="WARM" data-i18n="device.label.WARM"></option>
<option value="WHIP" data-i18n="device.label.WHIP"></option>
</select>
</div>
<div class="form-row">
<label style="width:auto" for="node-input-food_presets_file"><i class="fa fa-file"></i> <span data-i18n="device.label.food_presets_file"></span></label>
<input type="text" id="node-input-food_presets_file" data-i18n="[placeholder]device.placeholder.food_presets_file">
<input type="hidden" id="node-input-food_presets_type">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-ct_cook"><i class="fa fa-tag"></i> <span data-i18n="device.label.challenge_type"></span></label>
<select id="node-input-ct_cook" class="challenge_type">
<option value="" data-i18n="device.label.no_challenge"></option>
<option value="ackNeeded" data-i18n="device.label.ackNeeded"></option>
<option value="pinNeeded" data-i18n="device.label.pinNeeded"></option>
</select>
</div>
<div class="form-row challenge_pin">
<label style="width:auto" for="node-input-pin_cook"><i class="fa fa-tag"></i> <span data-i18n="device.label.pin"></span></label>
<input type="text" id="node-input-pin_cook" data-i18n="[placeholder]device.placeholder.pin">
</div>
</div>
</div>
<!-- Dispense Trait-->
<div class="form-row red-ui-editableList-border div_trait" id="dispense" style="background: #fbfbfb; padding: 5px;">
<div class="form-row" id="cb_trait_dispense">
<b><label style="width:auto" for="node-input-trait_dispense"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.dispense"></span></label></b>
<input type="checkbox" id="node-input-trait_dispense" style="display:inline-block; width:auto; vertical-align:top;" class="cb_trait">
<a target="_blank" class="red-ui-palette-module-link" href="https://developers.google.com/assistant/smarthome/traits/dispense"><i class="fa fa-external-link"></i></a>
<a class="pull-right" href="#"><i class="fa fa-caret-down oc_trait"></i></a>
</div>
<div class="form-row label_trait" id="label_trait_dispense">
<b><label style="width:auto"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.dispense"></span></label></b>
<a target="_blank" class="red-ui-palette-module-link" href="https://developers.google.com/assistant/smarthome/traits/dispense"><i class="fa fa-external-link"></i></a>
<a class="pull-right" href="#"><i class="fa fa-caret-down oc_trait"></i></a>
</div>
<div id="trait_dispense">
<div class="form-row">
<label style="width:auto" for="node-input-supported_dispense_items_file"><i class="fa fa-file"></i> <span data-i18n="device.label.supported_dispense_items_file"></span></label>
<input type="text" id="node-input-supported_dispense_items_file" data-i18n="[placeholder]device.placeholder.supported_dispense_items_file">
<input type="hidden" id="node-input-supported_dispense_items_type">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-supported_dispense_presets_file"><i class="fa fa-file"></i> <span data-i18n="device.label.supported_dispense_presets_file"></span></label>
<input type="text" id="node-input-supported_dispense_presets_file" data-i18n="[placeholder]device.placeholder.supported_dispense_presets_file">
<input type="hidden" id="node-input-supported_dispense_presets_type">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-ct_dispense"><i class="fa fa-tag"></i> <span data-i18n="device.label.challenge_type"></span></label>
<select id="node-input-ct_dispense" class="challenge_type">
<option value="" data-i18n="device.label.no_challenge"></option>
<option value="ackNeeded" data-i18n="device.label.ackNeeded"></option>
<option value="pinNeeded" data-i18n="device.label.pinNeeded"></option>
</select>
</div>
<div class="form-row challenge_pin">
<label style="width:auto" for="node-input-pin_dispense"><i class="fa fa-tag"></i> <span data-i18n="device.label.pin"></span></label>
<input type="text" id="node-input-pin_dispense" data-i18n="[placeholder]device.placeholder.pin">
</div>
</div>
</div>
<!-- Dock Trait-->
<div class="form-row red-ui-editableList-border div_trait" id="dock" style="background: #fbfbfb; padding: 5px;">
<div class="form-row" id="cb_trait_dock">
<b><label style="width:auto" for="node-input-trait_dock"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.dock"></span></label></b>
<input type="checkbox" id="node-input-trait_dock" style="display:inline-block; width:auto; vertical-align:top;" class="cb_trait">
<a target="_blank" class="red-ui-palette-module-link" href="https://developers.google.com/assistant/smarthome/traits/dock"><i class="fa fa-external-link"></i></a>
<a class="pull-right" href="#"><i class="fa fa-caret-down oc_trait"></i></a>
</div>
<div class="form-row label_trait" id="label_trait_dock">
<b><label style="width:auto"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.dock"></span></label></b>
<a target="_blank" class="red-ui-palette-module-link" href="https://developers.google.com/assistant/smarthome/traits/dock"><i class="fa fa-external-link"></i></a>
<a class="pull-right" href="#"><i class="fa fa-caret-down oc_trait"></i></a>
</div>
<div id="trait_dock">
<div class="form-row">
<label style="width:auto" for="node-input-ct_dock"><i class="fa fa-tag"></i> <span data-i18n="device.label.challenge_type"></span></label>
<select id="node-input-ct_dock" class="challenge_type">
<option value="" data-i18n="device.label.no_challenge"></option>
<option value="ackNeeded" data-i18n="device.label.ackNeeded"></option>
<option value="pinNeeded" data-i18n="device.label.pinNeeded"></option>
</select>
</div>
<div class="form-row challenge_pin">
<label style="width:auto" for="node-input-pin_dock"><i class="fa fa-tag"></i> <span data-i18n="device.label.pin"></span></label>
<input type="text" id="node-input-pin_dock" data-i18n="[placeholder]device.placeholder.pin">
</div>
</div>
</div>
<!-- EnergyStorage Trait-->
<div class="form-row red-ui-editableList-border div_trait" id="energystorage" style="background: #fbfbfb; padding: 5px;">
<div class="form-row" id="cb_trait_energystorage">
<b><label style="width:auto" for="node-input-trait_energystorage"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.energystorage"></span></label></b>
<input type="checkbox" id="node-input-trait_energystorage" style="display:inline-block; width:auto; vertical-align:top;" class="cb_trait">
<a target="_blank" class="red-ui-palette-module-link" href="https://developers.google.com/assistant/smarthome/traits/energystorage"><i class="fa fa-external-link"></i></a>
<a class="pull-right" href="#"><i class="fa fa-caret-down oc_trait"></i></a>
</div>
<div class="form-row label_trait" id="label_trait_energystorage">
<b><label style="width:auto"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.energystorage"></span></label></b>
<a target="_blank" class="red-ui-palette-module-link" href="https://developers.google.com/assistant/smarthome/traits/energystorage"><i class="fa fa-external-link"></i></a>
<a class="pull-right" href="#"><i class="fa fa-caret-down oc_trait"></i></a>
</div>
<div id="trait_energystorage">
<div class="form-row device-advanced">
<label style="width:auto" for="node-input-query_only_energy_storage"><i class="fa fa-arrow-right"></i> <span data-i18n="device.label.query_only"></span></label>
<input type="checkbox" id="node-input-query_only_energy_storage" style="display:inline-block; width:auto; vertical-align:top;">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-energy_storage_distance_unit_for_ux"><i class="fa fa-tag"></i> <span data-i18n="device.label.energy_storage_distance_unit_for_ux"></span></label>
<select id="node-input-energy_storage_distance_unit_for_ux" >
<option value=""></option>
<option value="KILOMETERS" data-i18n="device.label.KILOMETERS"></option>
<option value="MILES" data-i18n="device.label.MILES"></option>
</select>
</div>
<div class="form-row">
<label style="width:auto" for="node-input-is_rechargeable"><i class="fa fa-arrow-right"></i> <span data-i18n="device.label.is_rechargeable"></span></label>
<input type="checkbox" id="node-input-is_rechargeable" style="display:inline-block; width:auto; vertical-align:top;">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-ct_energystorage"><i class="fa fa-tag"></i> <span data-i18n="device.label.challenge_type"></span></label>
<select id="node-input-ct_energystorage" class="challenge_type">
<option value="" data-i18n="device.label.no_challenge"></option>
<option value="ackNeeded" data-i18n="device.label.ackNeeded"></option>
<option value="pinNeeded" data-i18n="device.label.pinNeeded"></option>
</select>
</div>
<div class="form-row challenge_pin">
<label style="width:auto" for="node-input-pin_energystorage"><i class="fa fa-tag"></i> <span data-i18n="device.label.pin"></span></label>
<input type="text" id="node-input-pin_energystorage" data-i18n="[placeholder]device.placeholder.pin">
</div>
</div>
</div>
<!-- FanSpeed Trait-->
<div class="form-row red-ui-editableList-border div_trait" id="fanspeed" style="background: #fbfbfb; padding: 5px;">
<div class="form-row" id="cb_trait_fanspeed">
<b><label style="width:auto" for="node-input-trait_fanspeed"><i class="fa fa-arrow-right"></i> <span data-i18n="device.trait.fanspeed"></span></label></b>
<input type="checkbox" id="node-input-trait_fanspeed" style="display:inline-block; width:auto; vertical-align:top;" class="cb_trait">
<a target="_blank" class="red-ui-palette-module-link" href=