2 5 19 54 0 0 0

LCD-Ziffern aus einem SVG-path-Element konstruiert

Das Ursprungsobjekt im defs-Container definiert und hier links einmal im use-Container ausgegeben.
Darunter wird nach Wahl einer Ziffernanzeigeeinheit das Zählen begonnen.

Das Pfad-Element wird siebenmal geschert, verschoben und zur Senkrechten dann gedreht und schließlich zu einer Gruppe gefasst. Je nach Wahl der Ziffernmenge werden entsprechend PfadElemente kreiert:„ document.createElementNS( _svgNS, "use")“ .

Das Zählwerk:

Der Schieberegler dient der Größenveränderung der SVG-Zeichenfläche. Im Minimum ist die noch akzeptable Sichtbarkeit überschritten. Das Maximum wird durch die Containerbreite des section-Elementes begrenzt.

Die Radio-Button dienen der Begrenzung des Zählwerkes und lösen am Beispiel das Zählen aus. In einer Anwendung wird ein Begrenzer natürlich wenig Sinn machen. Bei Überschreiten einer Zahleneinheit muss automatisch eine neue Ziffernabbildung aus den sieben Pfadelementen vorangestellt werden.

Zum Verständnis der Elementenanordnung, Erklärung zur Matrix und Zahlendarstellung:

0 1 2 3 4 5 6

Anzeige für diese Zahl:

0 1 2 3 4
5 6 7 8 9

Die Matrix besteht aus einer zweidimensionalen Tabelle, die in jeder Zeile mit null und eins bestimmt, welches PfadElement andersfarbig hervorgehoben werden soll.
rgb(0,127,255) für 1 und rgb(235,245,255) für 0
Die Zählfolge 0 bis 6 ist abgebildet.
var ar_lcd = [

Wen es interessiert, kann den Code für das Zählwerk

Die Definition des Pfadelementes und ein Gruppenelement bilden das Grundgerüst der Zeichenfläche.
Was hier folgt ist eine inkludierte Datei, die natürlich auch zur Darstellung benutzt ist. Der einzige Grund hierfür: damit ich den Überblick nicht verliehre.

07
08
09
10
11
12
13
14
15
16
17
18
19
<svg id='svgzahlen' width="400" height="100" viewBox="0 0 860 200">
 <defs>
 <path d="M  15  15 
          l  10 -10
          l  40   0
          l  10  10
          l -10  10
          l -40   0
          l -10 -10" 
    id='einer' />
 </defs>
 <g id="zahlengruppe"></g>
</svg>

Es folgt der ScriptBereich:

35
36
37
38
39
40
41
42
43		 var _svgNS = 'http://www.w3.org/2000/svg';
var _nsLink = "http://www.w3.org/1999/xlink" ;
var obj_range_svg = document.getElementById('svgsize') ;
var obj_svg = document.getElementById("svgzahlen") ;
var obj_zg = document.getElementById("zahlengruppe") ;
var elem, relation=4 ;
// Ausgabe der Dimensionierung der Zeichenfläche SVG-Größe: width: ... height:...
document.getElementById('svgw').textContent = obj_svg.getAttribute('width') ;  
document.getElementById('svgh').textContent = obj_svg.getAttribute('height') ;  

Was nicht direkt dem Zählen dient, also Größenänderung der Zeichenfläche, bleibt außen vor.
Die Funktion ZIFFERMENGE wird durch die RadioButtons aufgerufen wie am Beispiel:
<input type="radio" name="Ziffern" onclick="ZIFFERMENGE(this);" value="2"> 2

54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89		 // Die Transformung in Tabellen gespeichert
var ar_x = new Array(15,115,15,115,15,35,35) ;
var ar_y = new Array( 0, 10, 80, 90,160,90,10) ;
var ar_r = new Array( 0,90,0,90,0,90,90) ;
function MAKE_LCD(id, x,y,r,f){
elem = document.createElementNS( _svgNS, "use") ;
elem.setAttributeNS( _nsLink, "xlink:href", "#einer" ) ;
elem.setAttributeNS( null, 'transform','skewX(-8) translate('+(x+25)+' '+y+') rotate('+r+') ') ;
elem.setAttributeNS( null, 'id',''+id+'') ;
elem.setAttributeNS( null, 'fill',''+f+'') ;
obj_zg.appendChild(elem) ;
}
// Bestimmung für die Anzahl an Ziffern anhand der Wahl eines Radiobuttons
var ziffernanzeige = 0, zifferelems=7,  xzm, lcid ;
var abbruch_bei = '' , wsTo ;
function ZIFFERMENGE(Ziffern) {
 ziffernanzeige = Ziffern.value;
 zifferstelle = ziffernanzeige - 1 ;
// Kindelemente löschen bei Neubestimmung der Ziffernanzahl
 while (obj_zg.firstChild) {
  obj_zg.removeChild(obj_zg.firstChild);
 }
 // clearTimeout, um eine Überlagerung der Funktion ZAHLEN() zu verhindern
 if (wsTo) window.clearTimeout(wsTo) ;
 abbruch_bei = '' ;
 for (var ja=0; ja < ziffernanzeige; ja++) abbruch_bei += '9' ;
 for (var zm=0 ; zm < ziffernanzeige ; zm++){
  xzm = (120*zm) ;
  for (var z=0; z<zifferelems; z++){
   lcid = zm+''+z ;
   MAKE_LCD(lcid, ar_x[z]+xzm, ar_y[z], ar_r[z],'rgb(40,48,68)') ;
  }
 }
// Mit Auswahl eines RadioButtons wird die Funktion ausgelöst
 ZAHLEN() ;
}

Hier nochmal die Definition der Matrix zur Darstellung einer Zahl:

91
92
93
94
95
96
97
98
99
100
101
102		 var ar_lcd  = [
 [1,1,0,1,1,1,1] ,
 [0,1,0,1,0,0,0] ,
 [1,1,1,0,1,1,0] ,
 [1,1,1,1,1,0,0] ,
 [0,1,1,1,0,0,1] ,
 [1,0,1,1,1,0,1] ,
 [1,0,1,1,1,1,1] ,
 [1,1,0,1,0,0,0] ,
 [1,1,1,1,1,1,1] ,
 [1,1,1,1,1,0,1]
 ] ;

Die Funktionen ZAHLEN() und AKTUALISIERE(...) bestimmen die Farbigkeit der Pfadelemente.

104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134		 function AKTUALISIERE(id, zahlwert, b){
 if ( ar_lcd[zahlwert][b] ) rgb_e = 'rgb(0,255,255)' ;
 else rgb_e = 'rgb(40,68,68)' ;
 document.getElementById(id).setAttribute('fill',''+rgb_e+'') ;
}
var rgb_e, rgb_z, undab = 0, zahleneinheit=0 ;
var zifferstelle, ar_dez = new Array() ;  

function ZAHLEN(){
 zahleneinheit = Math.pow(10,ziffernanzeige) ;
 undab++ ;
 if ( undab <= abbruch_bei ) { 
  wsTo = window.setTimeout(ZAHLEN, 1000); 
 } else undab = abbruch_bei ;
 
 for (var ar = 0; ar < ziffernanzeige; ar++){
  ar_dez[ar] = Math.floor(undab/Math.pow(10,ar) ) % 10 ; 
 }
 for ( var b=0; b < zifferelems; b++){
  AKTUALISIERE(zifferstelle+''+b, ar_dez[0], b) ;
  if ( undab > 9 ) AKTUALISIERE( zifferstelle-1+''+b, ar_dez[1], b ) ; 
  if ( undab > 99 && ziffernanzeige > 2 ) AKTUALISIERE( zifferstelle-2+''+b, ar_dez[2], b ) ;
  if ( undab > 999 && ziffernanzeige > 3 ) AKTUALISIERE( zifferstelle-3+''+b, ar_dez[3], b ) ;
  if ( undab > 9999 && ziffernanzeige > 4 ) AKTUALISIERE( zifferstelle-4+''+b, ar_dez[4], b ) ;
  if ( undab > 99999 && ziffernanzeige > 5 ) AKTUALISIERE( zifferstelle-5+''+b, ar_dez[5], b ) ;
  if ( undab > 999999 && ziffernanzeige > 6 ) AKTUALISIERE( zifferstelle-6+''+b, ar_dez[6], b ) ;
  if ( undab > 9999999 && ziffernanzeige > 7 ) AKTUALISIERE( zifferstelle-7+''+b, ar_dez[7], b ) ;
 }
// der Hinweis unter den RadioButton nach Wahl einer Ziffernmenge
 document.getElementById('endet').innerHTML = 'Zählung endet bei: <b>'+abbruch_bei+'</b> ' ;
}


Dokument geändert am: 14. Dez. 2017 10:10