Anwendungen - 7-Segment-Anzeige
Diese Anwendung zeigt die Ansteuerung einer 7-Segment-Anzeige. Werden mehr Anzeigen kombiniert, können damit Counter, Uhren oder sonstige Elemente erstellt werden, die zur Anzeige von Ziffern und Zahlen benötigt werden.
Beispiel
Mit Hilfe der Schaltflächen können die gewünschten Operationen ausgeführt werden. Die Ausgabe erfolgt in der dafür vorgesehenen 7-Segment-Anzeige.
Stoppuhr
Werden sechs 7-Segment-Anzeigen kombiniert, so kann daraus eine Stoppuhr entwickelt werden.
7-Segment-Anzeige
Eine 7-Segment-Anzeige besteht aus sieben Einzelsegmenten, die zur Darstellung einer Ziffern gezielt angesteuert werden müssen.
Die Segmente werden wie in der Abbildung gezeigt nummeriert. Anschliessend können mit Hilfe einer Wertetabelle die Zustände beschrieben werden.
Wertetabelle
| dez | a | b | c | d | x0 | x1 | x2 | x3 | x4 | x5 | x6 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 0 | 0 | 0 | 0 | 0 | 1 | 1 | 1 | 1 | 1 | 1 | 0 |
| 1 | 0 | 0 | 0 | 1 | 0 | 1 | 1 | 0 | 0 | 0 | 0 |
| 2 | 0 | 0 | 1 | 0 | 1 | 1 | 0 | 1 | 1 | 0 | 1 |
| 3 | 0 | 0 | 1 | 1 | 1 | 1 | 1 | 1 | 0 | 0 | 1 |
| 4 | 0 | 1 | 0 | 0 | 0 | 1 | 1 | 0 | 0 | 1 | 1 |
| 5 | 0 | 1 | 0 | 1 | 1 | 0 | 1 | 1 | 0 | 1 | 1 |
| 6 | 0 | 1 | 1 | 0 | 1 | 0 | 1 | 1 | 1 | 1 | 1 |
| 7 | 0 | 1 | 1 | 1 | 1 | 1 | 1 | 0 | 0 | 0 | 0 |
| 8 | 1 | 0 | 0 | 0 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 9 | 1 | 0 | 0 | 1 | 1 | 1 | 1 | 1 | 0 | 1 | 1 |
Nun können die Zustände der Segmente durch UND- und ODER-Verknüpfungen beschrieben werden, wobei die erste Verknüpfung durch Multiplikation, die zweite durch Addition angezeigt wird. Die gefundenen Terme können jetzt noch minimisiert werden, um möglichst wenige Operationen durchführen zu müssen.
Beispiel - Segment 4
Um das Segment 4 zu aktivieren, müssen in der Spalte x4 alle 1-sen (Einsen) ermittelt werden. Die Eingangs-Bits (a, b, c, d) werden mit UND verknüpft. Die entstehenden Einzelterme werden mittels ODER-Verknüpfungen zu einer disjunktiven Normalform (DNF) verbunden.
Der Ausgangsterm für das Segment mit der Nummer 4 sieht wie folgt aus:
x4 = abcd+ abcd + abcd + abcd
Minimisieren
Mit unterschiedlichen Methoden (z.B. Karnaugh-Veitch-Diagramm) kann dieser Term minimisiert werden. Weiterhin können zum Minimisieren die unbenutzen Zustände (10-15) verwendet werden - im Diagramm durch d angezeigt.
Damit ergibt sich nachstehender minimisierter Term.
x4 = acd + bd
Minimisierte Terme
Für die anderen Segmente muss ebenso verfahren werden, um zu die nachstehenden Terme zu ermitteln.
x0 = a + c + bd + bd x1 = a + b + cd + cd x2 = b + c + d x3 = a + dc + abc + bcd + bcd x4 = acd + bd x5 = ac + bc + bd + cd x6 = a + bc + bc + cd
Deutung für JavaScript
Einer Funktion zum Anzeigen einer Ziffer wird die Ziffer (0 - 9) übergeben. Die Bits dieser Ziffer müssen geprüft werden, ob sie gesetzt sind (true) oder nicht (false). Dabei gelten folgende Beziehungen:
a: 23 = 8 => a=((Ziffer & 8)==8), true, wenn 4. Bit gesetzt b: 22 = 4 => b=((Ziffer & 4)==4), true, wenn 3. Bit gesetzt c: 21 = 2 => c=((Ziffer & 2)==2), true, wenn 2. Bit gesetzt d: 20 = 1 => d=((Ziffer & 1)==1), true, wenn 1. Bit gesetzt
Mit dieser Überlegung kann eine JS-Funktion definiert werden, die reguliert, welche Segmente bei der Übergabe einer Ziffer angezeigt werden müssen.
JS-Funktion
function drawDigit(intDigit){
// Falls keine gültige Ziffer übergeben wurde
if((intDigit<0) || (intDigit>9)) return;
// Boolwerte zu den jeweiligen Bits
var a = ((intDigit & 8) == 8); // true, wenn 4-tes Bit gesetzt
var b = ((intDigit & 4) == 4); // true, wenn 3-tes Bit gesetzt
var c = ((intDigit & 2) == 2); // true, wenn 2-tes Bit gesetzt
var d = ((intDigit & 1) == 1); // true, wenn 1-tes Bit gesetzt
/* Segmente zeichnen */
// Segment 0
if(a || c || (b&&d) || (!b&&!d))
drawHorizontalSegment(/* Notwendige Parameter */);
// Segment 1
if(a || (!c&&!d) || !b || (c&&d))
drawVerticalSegment(/* Notwendige Parameter */);
// Segment 2
if(!c || b || d)
drawVerticalSegment(/* Notwendige Parameter */);
// Segment 3
if(a || (!b&&!c&&!d) || (!d&&c) || (!a&&!b&&c) || (b&&!c&&d))
drawHorizontalSegment(/* Notwendige Parameter */);
// Segment 4
if((!b&&!d) || (!a&&c&&!d))
drawVerticalSegment(/* Notwendige Parameter */);
// Segment 5
if((b&&!d) || (!c&&!d) || (b&&!c) || (a&&!c))
drawVerticalSegment(/* Notwendige Parameter */);
// Segment 6
if(a || (c&&!d) || (!b&&c) || (b&&!c))
drawHorizontalSegment(/* Notwendige Parameter */);
}
Die angedeuteten Funktionen drawHorizontalSegment und drawVerticalSegment
übernehmen das Zeichnen der Segmente zur jeweils zughörigen Ziffer. Möglich wäre hier eine Implementierung,
bei der neben der Ziffer selbst das Offset übergeben wird, an der sie im
Context angezeigt werden soll.
Beispiel - drawHorizontalSegment
Die Routine zeichnet wie in der Abbildung angedeutet sechseckige Segmente. Die benötigten Offset-Parameter
intOffX und intOffY, sowie die Dimensionen (Breite und Höhe) sind aus der
Abbildung ersichtlich.
Die Farbe der Segmente kann über den Parameter strColor festgelegt werden.
function drawHorizontalSegment(intOffX, intOffY, strColor){
// Länge und Höhe eines Segments ohne Spitzen
var intDim = 15;
// Halbe Dicke eines Segments
var intWidth = 2;
// Neuen Pfad beginnen
objContext.beginPath();
// Startposition festlegen
objContext.moveTo(intOffX, intOffY);
// Horizontales Segment konstruieren
objContext.lineTo(intOffX, intOffY);
objContext.lineTo(intOffX+intWidth, intOffY-intWidth);
objContext.lineTo(intOffX+intWidth+intDim, intOffY-intWidth);
objContext.lineTo(intOffX+2*intWidth+intDim, intOffY);
objContext.lineTo(intOffX+intWidth+intDim, intOffY+intWidth);
objContext.lineTo(intOffX+intWidth, intOffY+intWidth);
objContext.lineTo(intOffX, intOffY);
// Segment zeichnen
objContext.save();
objContext.fillStyle = strColor;
objContext.fill();
objContext.restore();
}
Innerhalb der Routine wird mit Hilfe der Pfad-Schnittstelle und deren Methoden das Sechseck am übergebenen Offset gezeichnet.