node-red-contrib-cec/cec/cec-config.html

Node-Red contributed nodes for interacting with cec-enabled devices on a HDMI switch, such as a TV or digital receiver

<script type="text/javascript">
	RED.nodes.registerType('cec-config',{
		category: 'config',
		defaults: {
			// Name must be 14 chars or less and be only printable chars 0x20 - 0x7E
			OSDname: { value:"node-red", required: true, validate:function(v){ return (v.length <= 14 && /^[\x20-\x7E]+$/.test(v)) } },
			comport: { value:"", required: false },
			hdmiport: { value:"1", required: false, validate:RED.validators.number() },
			player: { value:true, required: false },
			recorder: { value:false, required: false },
			tuner: { value:false, required: false },
			audio: { value:false, required: false }
		},
		label: function() {
			return (this.comport||'Search')+'['+this.hdmiport+'] "'+this.OSDname+'"' ;
		}
	});
</script>

<script type="text/x-red" data-template-name="cec-config">
	<style>
		.cec-checkbox-grid li {
				display: inline-block;
				width: 40%;
		}

		.cec-checkbox {
				display: inline-block !important;
				width: auto !important;
				vertical-align: top !important;
		}

		.cec-checkbox-label {
				width: 70% !important;
		}
	</style>

    <div class="form-row">
        <label for="node-config-input-OSDname"><i class="icon-bookmark"></i> OSD Name</label>
        <input type="text" id="node-config-input-OSDname"/>
    </div>
    <div class="form-row">
        <label for="node-config-input-comport"><i class="icon-bookmark"></i> CEC Com Port</label>
        <input type="text" id="node-config-input-comport"/>
    </div>
    <div class="form-row">
        <label for="node-config-input-hdmiport"><i class="icon-bookmark"></i> HDMI Port</label>
        <input type="text" id="node-config-input-hdmiport"/>
    </div>
    <div class="form-row">
				<ul class="cec-checkbox-grid"> <!-- TODO The CSS here needs fixing so it all aligns -->
					<li>
						<input type="checkbox" class="cec-checkbox" id="node-config-input-player" value="PLAYER" placeholder="PLAYER"/>
						<label class="cec-checkbox-label" for="node-config-input-player">PLAYER</label>
					</li>
					<li>
						<input type="checkbox" class="cec-checkbox" id="node-config-input-recorder" value="RECORDER" placeholder="RECORDER"/>
						<label class="cec-checkbox-label" for="node-config-input-recorder">RECORDER</label>
					</li>
					<li>
						<input type="checkbox" class="cec-checkbox" id="node-config-input-tuner" value="TUNER" placeholder="TUNER"/>
						<label class="cec-checkbox-label" for="node-config-input-tuner">TUNER</label>
					</li>
					<li>
						<input type="checkbox" class="cec-checkbox" id="node-config-input-audio" value="AUDIO" placeholder="AUDIO"/>
						<label class="cec-checkbox-label" for="node-config-input-audio">AUDIO</label>
					</li>
				</ul>
    </div>
</script>

<!-- Next, some simple help text is provided for the node.                   -->
<script type="text/x-red" data-help-name="cec-config">
	<!-- data-help-name identifies the node type this help is for             -->
	<!-- This content appears in the Info sidebar when a node is selected     -->
	<!-- The first <p> is used as the pop-up tool tip when hovering over a    -->
	<!-- node in the palette.                                                 -->
	<p>Provide connection details for connecting to the cec serial port</p>
	<p><strong>OSD Name</strong> Is the name assigned to the hdmi device attached
	to the hdmi switch/bus. If a display such as a television sets this device
	as the active source, and if it supports it, this name will be displayed
	as a label for the device.</p>
	<p><strong>CEC Com Port</strong> specifies the name of the serial port to
	connect with to communicate on the HDMI CEC bus.  If left blank, a search is
	performed and the first found port is used.  The port name on a Raspberry Pi is "RPI"</p>
	<p><strong>HDMI Port</strong> refers to the physical HDMI socket on this device,
	and is relevant when there is more than one.  Otherwise it can be left blank.</p>
	<p><strong>Player, Recorder, Tuner, Audio</strong> are different source classes
	that can provide images to display on the output device (.i.e television/projector).
	For this device, select all classes that apply, or simply choose "Player".</p>
</script>