node-red-contrib-wio-seeed/wio-servo/wio-servo.html

Wio Link Nodes using Grove modules for Node RED

<script type="text/javascript">
	RED.nodes.registerType('wio-servo', {
		paletteLabel: 'servo',
		category: 'wio',
		color: '#C0EDC0',
		defaults: {
			name: { value: '' },
			connection: { type: 'wio-config' },
			node: { value: '' },
			port: { value: '' },
			mode: { value: 'manual' },
			angle: { value: 0 },
			duration: { value: 1 }
		},
		inputs: 1,
		outputs: 1,
		icon: 'timer.png',
		label: function () {
			return this.name || 'servo';
		},
		oneditprepare: function () {
			var config = this;
			var skus = {
				'316010005': {
					name: 'Grove Servo',
					module: 'GroveServo'
				}
			};
			$.getScript('wio-common').done(function (res) {
				WioCommon(config, skus);

				var mode = $('#node-input-mode');
				var angleRow = $('.node-input-angle-row');
				var durationRow = $('.node-input-duration-row');

				mode.on('change', function () {
					var value = mode.val();
					angleRow.toggle((value != 'manualduration'));
					durationRow.toggle((value != 'manualangle'));
				}).trigger('change');
			});
		}
	});
</script>

<script type="text/x-red" data-template-name="wio-servo">
	<div class="form-row">
		<label for="node-input-name"><i class="icon-tag"></i> Name</label>
		<input type="text" id="node-input-name" placeholder="Name">
	</div>
	<div class="form-row">
		<label for="node-input-connection"><i class="icon-tag"></i> Connection</label>
		<select type="text" id="node-input-connection"></select>
	</div>
	<div class="form-row">
		<label for="node-input-node"><i class="icon-tag"></i> Node</label>
		<select type="text" id="node-input-node"></select>
	</div>
	<div class="form-row">
		<label for="node-input-port"><i class="icon-tag"></i> Port</label>
		<select type="text" id="node-input-port"></select>
	</div>
	<div class="form-row">
		<label for="node-input-mode"><i class="icon-tag"></i> Mode</label>
		<select type="text" id="node-input-mode">
			<option value="manual">Manual Angle &amp; Duration</option>
			<option value="manualangle">Manual Angle</option>
			<option value="manualduration">Manual Duration</option>
		</select>
	</div>
	<div class="form-row node-input-angle-row">
		<label for="node-input-angle"><i class="icon-tag"></i> Angle</label>
		<input type="number" id="node-input-angle" placeholder="Angle">
	</div>
	<div class="form-row node-input-duration-row">
		<label for="node-input-duration"><i class="icon-tag"></i> Duration</label>
		<input type="number" id="node-input-duration" placeholder="Duration">
	</div>
</script>

<script type="text/x-red" data-help-name="wio-servo">
	<p>Wio Servo</p>
</script>