clock.html

<script type="text/javascript">

	RED.nodes.registerType( 'ui_clock', {
		category: 'dashboard',
		paletteLabel: 'clock',
		inputs: 1,
		outputs: 0,
		color: '#2ed7e4',
		icon: 'font-awesome/fa-clock-o',
		align: 'right',
		defaults: {
			name: { value: '' },
			group: { type: 'ui_group', required: true },
			order: { value: 0 },
			width: { value: 0, validate: function( width ) {
				const group = RED.nodes.node( $( '#node-input-group' ).val() || this.group );
				const valid = !group || +width <= +group.width;

				$( '#node-input-size' ).toggleClass( 'input-error', !valid );

				return valid;
			} },
			height: { value: 0 }
		},
		label: function() {
			return this.name || 'clock';
		},
		oneditprepare: () => {
			$( '#node-input-size' ).elementSizer( {
				width: "#node-input-width",
				height: "#node-input-height",
				group: "#node-input-group"
			} );
		}
	} );

</script>

<script type="text/html" data-template-name="ui_clock">
	<div class="form-row">
		<label for="node-input-name"><i class="fa fa-fw fa-tag"></i> Name</label>
		<input type="text" id="node-input-name" placeholder="Name" />
	</div>
	<br />
	<div class="form-row" id="template-row-group">
		<label><i class="fa fa-fw fa-table"></i> Group</label>
		<input type="text" id="node-input-group" />
	</div>
	<div class="form-row" id="template-row-size">
		<label><i class="fa fa-fw fa-object-group"></i> Size</label>
		<input type="hidden" id="node-input-width" />
		<input type="hidden" id="node-input-height" />
		<button id="node-input-size" class="editor-button"></button>
	</div>
</script>

<script type="text/html" data-help-name="ui_clock">
	<p style="text-align: justify;">
		A simple analog clock for the Node-RED Dashboard.
	</p>
	<br />
	<p style="text-align: center;">
		<img alt="ui_clock" src="data:image/png;base64,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" />
	</p>
	<br />
	<p style="text-align: justify;">
		The time to be displayed is transferred as timestamp (milliseconds since 01.01.1970) in
		<code>msg.payload</code>. The local time is displayed in the dashboard.
	</p>
</script>