Skip to content

Commit cb2addb

Browse files
author
Patrick Knabe
committed
Just a commit of current work
1 parent 3bc1652 commit cb2addb

File tree

6 files changed

+410
-0
lines changed

6 files changed

+410
-0
lines changed

‎CHANGELOG.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Changelog
2+
3+
## [v1.0.0] - 2020-09-30
4+
5+
### Added
6+
- Functional digital display for the Node-RED Dashboard
7+
- Readme, Changelog and License
8+
9+
[v1.0.0]: https://github.com/patrickknabe/node-red-contrib-ui-digital-display/releases/tag/v1.0.0

‎digital_display.svg‎

Lines changed: 248 additions & 0 deletions
Loading

‎display.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<script type="text/javascript">
2+
3+
RED.nodes.registerType( 'ui_digital_display', {
4+
category: 'dashboard',
5+
paletteLabel: 'digital display',
6+
inputs: 1,
7+
outputs: 0,
8+
color: '#2ed7e4',
9+
icon: 'font-awesome/fa-clock-o',
10+
align: 'right',
11+
defaults: {
12+
name: { value: '' },
13+
group: { type: 'ui_group', required: true },
14+
order: { value: 0 },
15+
width: { value: 0, validate: function( width ) {
16+
const group = RED.nodes.node( $( '#node-input-group' ).val() || this.group );
17+
const valid = !group || +width <= +group.width;
18+
19+
$( '#node-input-size' ).toggleClass( 'input-error', !valid );
20+
21+
return valid;
22+
} },
23+
height: { value: 0 }
24+
},
25+
label: function() {
26+
return this.name || 'digital display';
27+
},
28+
oneditprepare: () => {
29+
$( '#node-input-size' ).elementSizer( {
30+
width: "#node-input-width",
31+
height: "#node-input-height",
32+
group: "#node-input-group"
33+
} );
34+
}
35+
} );
36+
37+
</script>
38+
39+
<script type="text/html" data-template-name="ui_digital_display">
40+
<div class="form-row">
41+
<label for="node-input-name"><i class="fa fa-fw fa-tag"></i> Name</label>
42+
<input type="text" id="node-input-name" placeholder="Name" />
43+
</div>
44+
<br />
45+
<div class="form-row" id="template-row-group">
46+
<label><i class="fa fa-fw fa-table"></i> Group</label>
47+
<input type="text" id="node-input-group" />
48+
</div>
49+
<div class="form-row" id="template-row-size">
50+
<label><i class="fa fa-fw fa-object-group"></i> Size</label>
51+
<input type="hidden" id="node-input-width" />
52+
<input type="hidden" id="node-input-height" />
53+
<button id="node-input-size" class="editor-button"></button>
54+
</div>
55+
</script>
56+
57+
<script type="text/html" data-help-name="ui_digital_display">
58+
<p style="text-align: justify;">
59+
A digital display, with adjustable number of digits and decimal places, for the Node-RED Dashboard.
60+
</p>
61+
<br />
62+
<p style="text-align: center;">
63+
<img alt="ui_digital_display" src="data:image/png;base64,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" />
64+
</p>
65+
<br />
66+
<p style="text-align: justify;">
67+
The time to be displayed is transferred as timestamp (milliseconds since 01.01.1970) in
68+
<code>msg.payload</code>. The local time is displayed in the dashboard.
69+
</p>
70+
</script>

‎display.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
module.exports = RED => {
2+
let ui;
3+
4+
RED.nodes.registerType( 'ui_digital_display', function( config ) {
5+
RED.nodes.createNode( this, config );
6+
7+
if( !ui ) {
8+
try {
9+
ui = RED.require( 'node-red-dashboard' )( RED );
10+
} catch {}
11+
}
12+
13+
if( ui && RED.nodes.getNode( config.group ) ) {
14+
this.on( 'close', ui.addWidget( {
15+
node: this,
16+
format: `
17+
<div style="border-bottom: 1px solid #000000; font-size: 16px; font-weight: bold; margin: 0 0 10px;">Hurz der Habicht</div>
18+
<div style="display: flex; height: 100%; justify-content: flex-end; margin: 0 0 10px;">
19+
<svg ng-repeat="x in [].constructor( 2 ) track by $index" style="height: 100%;" version="1.1" viewBox="0 0 660 1000" xmlns="http://www.w3.org/2000/svg">
20+
<path d="m581.06 885.86h51.994l26.941 58.193-34.923 55.952h-51.994l-25.991-56.215z" />
21+
<path d="m73.685 963.97 83.764-78.112h233.35l72.84 78.112-38.641 36.033h-317.71z" />
22+
<path d="m525.64 542.51 27.085 29.045-23.14 330.91-27.204 25.368-79.153-84.881 15.331-219.24z" />
23+
<path d="m68.05 539.75 62.822 67.368-17.266 246.91-76.188 71.046-37.419-40.127 21.076-301.4z" />
24+
<path d="m171.1 443.65h262.35l55.921 59.968-58.717 54.612h-272.94l-50.926-54.612z" />
25+
<path d="m454.96 389.16 15.725-224.88 95.964-89.488 19.36 20.761-23.784 340.13-34.168 31.863z" />
26+
<path d="m87.115 72.249 75.498 80.961-16.917 241.93-74.915 69.86-38.525-41.313 22.462-321.23z" />
27+
<path d="m164.59 7.6241e-5h332.31l33.735 36.176-84.078 78.404h-247.65l-73.113-78.404z" />
28+
</svg>
29+
</div>
30+
`,
31+
width: config.width,
32+
height: +config.height || RED.nodes.getNode( config.group ).config.width,
33+
group: config.group,
34+
order: config.order,
35+
initController: $scope => $scope.$watch( 'msg.payload', payload => {
36+
const date = new Date( +payload || 0 );
37+
38+
$( `#ui_clock_${ $scope.$id }_s` ).attr( 'transform', `rotate( ${ date.getSeconds() * 6 }, 500, 500 )` );
39+
$( `#ui_clock_${ $scope.$id }_m` ).attr( 'transform', `rotate( ${ ( date.getMinutes() + date.getSeconds() / 60 ) * 6 }, 500, 500 )` );
40+
$( `#ui_clock_${ $scope.$id }_h` ).attr( 'transform', `rotate( ${ ( date.getHours() + date.getMinutes() / 60 ) * 30 }, 500, 500 )` );
41+
} )
42+
} ) );
43+
}
44+
} );
45+
};

‎package-lock.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)