Skip to content

Commit cea3b86

Browse files
author
Patrick Knabe
committed
First working version!
1 parent cb2addb commit cea3b86

File tree

2 files changed

+89
-18
lines changed

2 files changed

+89
-18
lines changed

‎display.html‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@
2020

2121
return valid;
2222
} },
23-
height: { value: 0 }
23+
height: { value: 0 },
24+
digits: { value: 2, validate: digits => ( +digits || 0 ) >= 1 && ( +digits || 0 ) <= 10 },
25+
decimals: { value: 1, validate: decimals => ( +decimals || 0 ) >= 0 && ( +decimals || 0 ) <= 9 }
2426
},
2527
label: function() {
2628
return this.name || 'digital display';
@@ -31,7 +33,7 @@
3133
height: "#node-input-height",
3234
group: "#node-input-group"
3335
} );
34-
}
36+
},
3537
} );
3638

3739
</script>
@@ -52,6 +54,15 @@
5254
<input type="hidden" id="node-input-height" />
5355
<button id="node-input-size" class="editor-button"></button>
5456
</div>
57+
<br />
58+
<div class="form-row">
59+
<label for="node-input-digits"><i class="fa fa-fw fa-bars"></i> Digits</label>
60+
<input type="number" id="node-input-digits" min="1" max="10" style="width: 35%;" />
61+
</div>
62+
<div class="form-row">
63+
<label for="node-input-decimals"><i class="fa fa-fw fa-bars"></i> Decimals</label>
64+
<input type="number" id="node-input-decimals" min="0" max="9" style="width: 35%;" />
65+
</div>
5566
</script>
5667

5768
<script type="text/html" data-help-name="ui_digital_display">

‎display.js‎

Lines changed: 76 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,31 +14,91 @@ module.exports = RED => {
1414
this.on( 'close', ui.addWidget( {
1515
node: this,
1616
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" />
17+
<div id="ui_digital_display_{{ $id }}" style="display: flex; height: 100%; justify-content: flex-end;" ng-init="digits = ${ +config.digits || 0 }; decimals = ${ +config.decimals || 0 };">
18+
<svg style="height: 100%;" version="1.1" viewBox="0 0 660 1000" xmlns="http://www.w3.org/2000/svg" ng-repeat="x in [].constructor( ${ +config.digits || 0 } ) track by $index">
2719
<path d="m164.59 7.6241e-5h332.31l33.735 36.176-84.078 78.404h-247.65l-73.113-78.404z" />
20+
<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" />
21+
<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" />
22+
<path d="m171.1 443.65h262.35l55.921 59.968-58.717 54.612h-272.94l-50.926-54.612z" />
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="m525.64 542.51 27.085 29.045-23.14 330.91-27.204 25.368-79.153-84.881 15.331-219.24z" />
25+
<path d="m73.685 963.97 83.764-78.112h233.35l72.84 78.112-38.641 36.033h-317.71z" />
26+
<path d="m581.06 885.86h51.994l26.941 58.193-34.923 55.952h-51.994l-25.991-56.215z" />
2827
</svg>
2928
</div>
3029
`,
3130
width: config.width,
3231
height: +config.height || RED.nodes.getNode( config.group ).config.width,
3332
group: config.group,
3433
order: config.order,
35-
initController: $scope => $scope.$watch( 'msg.payload', payload => {
36-
const date = new Date( +payload || 0 );
34+
beforeEmit: msg => ( { msg } ),
35+
initController: $scope => {
36+
$( () => $scope.msg = { payload: 0 } );
37+
38+
$scope.$watch( 'msg', msg => {
39+
const pattern = {
40+
' ': [ false, false, false, false, false, false, false ],
41+
'-': [ false, false, false, true, false, false, false ],
42+
'0': [ true, true, true, false, true, true, true ],
43+
'1': [ false, false, true, false, false, true, false ],
44+
'2': [ true, false, true, true, true, false, true ],
45+
'3': [ true, false, true, true, false, true, true ],
46+
'4': [ false, true, true, true, false, true, false ],
47+
'5': [ true, true, false, true, false, true, true ],
48+
'6': [ true, true, false, true, true, true, true ],
49+
'7': [ true, false, true, false, false, true, false ],
50+
'8': [ true, true, true, true, true, true, true ],
51+
'9': [ true, true, true, true, false, true, true ]
52+
};
53+
54+
let value = '';
55+
56+
if( msg ) {
57+
switch( typeof msg.payload ) {
58+
59+
case 'number':
60+
value = msg.payload.toFixed( $scope.decimals );
61+
break;
62+
63+
case 'string':
64+
if( msg.payload.match( /^[+-]?\d+[.,]?\d*$/ ) ) {
65+
value = parseFloat( msg.payload.replace( ',', '.' ) ).toFixed( $scope.decimals );
66+
}
67+
68+
break;
69+
70+
}
71+
72+
value = value.replace( '.', '' );
73+
74+
if( value.length > $scope.digits ) {
75+
value = '';
76+
}
77+
}
78+
79+
if( value === '' ) {
80+
value = ''.padStart( $scope.digits, '-' );
81+
} else {
82+
value = value.padStart( $scope.digits );
83+
}
84+
85+
$( `#ui_digital_display_${ $scope.$id } > svg` ).each( ( idx, digit ) => {
86+
pattern[ value.charAt( idx ) ].forEach( ( val, idx ) => {
87+
if( val ) {
88+
$( $( digit ).find( 'path' ).get( idx ) ).css( 'fill', 'var( --nr-dashboard-pageTitlebarBackgroundColor )' );
89+
} else {
90+
$( $( digit ).find( 'path' ).get( idx ) ).css( 'fill', 'var( --nr-dashboard-groupBackgroundColor )' );
91+
}
92+
} );
3793

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-
} )
94+
if( idx === $scope.digits - $scope.decimals - 1 ) {
95+
$( digit ).find( 'path:last-child' ).css( 'fill', 'var( --nr-dashboard-pageTitlebarBackgroundColor )' );
96+
} else {
97+
$( digit ).find( 'path:last-child' ).css( 'fill', 'var( --nr-dashboard-groupBackgroundColor )' );
98+
}
99+
} );
100+
} );
101+
}
42102
} ) );
43103
}
44104
} );

0 commit comments

Comments
 (0)