GUI-Programmierung mit JControl/Vole

VI. Diagramme

In dem Paket jcontrol.ui.vole.graph stehen die beiden Klassen Diagram und Histogram zu Verfügung, mit denen Messwerte über eine Zeitachse grafisch dargestellt werden können.

Zum Beispiel kann mit diesen GUI-Komponenten der Verlauf der Spannungswerte in einem Computer oder dessen Temperaturen (Motherboard, CPU, ...) dargestellt werden. Sollte der Computer dann den Dienst versagen, können die Verlaufsanzeigen evt. Anhaltspunkte für den Grund des Versagens liefern.

Diagram

Die Klasse Diagram aus dem Package jcontrol.ui.vole.graph ermöglicht die kontinuierliche grafische Darstellung eines Messwertverlaufs als 2D-Diagramm. Die Aktualisierungsgeschwindigkeit kann dabei vom Anwendungsprogramm frei bestimmt werden. Wertebereich, Skalierung und Beschriftung können mit Hilfe entsprechender, in Tabelle 1 aufgeführten Methoden angegeben werden.

Methode	Beschreibung
`Diagram(int x, int y, int width, int height, int min, int max, int resolution)`	Erzeugt ein `Diagram`-Objekt an den Koordinaten (`x, y`) und mit dem übergebenen Wertebereich. Dieser Parameter `resolution` bestimmt, wieviele Messwerte das Diagramm gleichzeitig darstellen soll (Skalierung der Zeitachse).
`setCaption(String captionMin, String captionMax, int captionAlign)`	Fügt dem `Diagram` eine Beschriftung hinzu. Die beiden übergebenen `Strings` werden je nach Wert des Parameters `captionAlign` (`ALIGN_LEFT` oder `ALIGN_RIGHT`) am linken oder am rechten Rand des Diagramms angezeigt.
`setValue(int value)`	Diese Methode übergibt einen neuen Messwert an das `Diagram`, welcher am rechten Rand eingefügt wird. Die bereits dargestellte Kurve wird gleichzeitig nach links geschoben.

Tabelle 1: Methoden der Klasse jcontrol.ui.vole.graph.Diagram

Im Folgenden ist das Beispielprogramm VoleDiagramExample aufgelistet, dessen Darstellung in Bild 1 dargestellt wird. Das Programm erstellt eine bildschirmfüllende Diagram-Instanz, die in einer Endlosschleife mit zufälligen Messwerten versorgt wird. Laden Sie das Archiv VoleDiagramExample.zip http://www.jcontrol.org/examples/VoleDiagramExample.zip herunter, um die Quellen zusammen mit einem gleichnamigen JControl/IDE-Projekt zu erhalten. Sie können den Simulator der JControl/IDE verwenden, um das VoleDiagramExample selbst auszuprobieren.

Bild 1: Das VoleDiagramExample

1	import jcontrol.lang.Math;
2	import jcontrol.lang.ThreadExt;
3	import jcontrol.ui.vole.Frame;
4	import jcontrol.ui.vole.Label;
5	import jcontrol.ui.vole.graph.Diagram;
6
7	/**
8	* <p>This example demonstrates how to use the
9	* component Diagram within the GUI framework
10	* JControl/Vole.</p>
11	*
12	* <p>(C) DOMOLOGIC Home Automation GmbH 2003-2005</p>
13	*/
14	public class VoleDiagramExample extends Frame {
15
16	/**
17	* Create a Diagram and fill it with some random values.
18	*/
19	public VoleDiagramExample() {
20
21	// create the Diagram
22	Diagram dia = new Diagram(0, 10, 128, 40, 0, 20, 30);
23	dia.setCaption("0", "20", Diagram.ALIGN_LEFT);
24	add(dia);
25
26	// add a Label
27	add(new Label("Diagram", 0, 52, 128, 10, Label.ALIGN_CENTER));
28
29	// show the frame
30	show();
31
32	// generate random values and pass them to the Diagram
33	for (;;) {
34	dia.setValue(Math.rnd(20));
35	// sleep
36	try {
37	ThreadExt.sleep(500);
38	} catch (InterruptedException e) {}
39	}
40	}
41
42	/**
43	* Create an instance of the VoleDiagramExample
44	*/
45	public static void main(String[] args) {
46	new VoleDiagramExample();
47	}
48	}

Listing 1: VoleDiagramExample.java

Histogram

Das Histogram stellt im Gegensatz zum Diagram ein Balkendiagramm anstelle einer Kurve dar, ist ansonsten aber sehr ähnlich aufgebaut. In der folgenden Tabelle 2 werden die wichtigsten Methoden der Klasse Histogram zusammengefasst.

Methode	Beschreibung
`Histogram(int x, int y, int width, int height, int min, int max, int resolution)`	Erzeugt ein `Histogram`-Objekt an den Koordinaten (`x, y`) und mit dem übergebenen Wertebereich. Dieser Parameter `resolution` bestimmt, wieviele Messwerte das Diagramm gleichzeitig darstellen soll (Skalierung der Zeitachse).
`setCaption(String captionMin, String captionMax, int captionAlign)`	Fügt dem `Histogram` eine Beschriftung hinzu. Die beiden übergebenen `Strings` werden je nach dem Wert des Parameters `captionAlign` (`ALIGN_LEFT` oder `ALIGN_RIGHT`) am linken oder am rechten Rand des Histogramms angezeigt.
`setValue(int value)`	Übergibt einen neuen Messwert an das `Histogram`, worauf der Wert am linken Rand des Histogramms eingefügt wird. Die früheren Werte werden entsprechend nach rechts geschoben.

Tabelle 2: Methoden der Klasse jcontrol.ui.vole.graph.Histogram

Das Beispielprogramm VoleHistogramExample ist wie sein Pendant VoleDiagramExample aufgebaut und erzeugt ein Histogramm mit dem Wertebereich [0..20]. Eine Endlosschleife sorgt dafür, dass das Historgramm fortlaufend mit Zufallswerten aktualisiert wird. Nachfolgend ist der Quelltext des VoleHistogramExample aufgelistet und Bild 2 zeigt einen Screenshot des Beispielprogramms auf dem JControl/Sticker.

Bild 2: Das VoleHistogramExample

1	import jcontrol.lang.Math;
2	import jcontrol.lang.ThreadExt;
3	import jcontrol.ui.vole.Frame;
4	import jcontrol.ui.vole.Label;
5	import jcontrol.ui.vole.graph.Histogram;
6
7	/**
8	* <p>This example demonstrates how to use the
9	* component Histogram within the GUI framework
10	* JControl/Vole.</p>
11	*
12	* <p>(C) DOMOLOGIC Home Automation GmbH 2003-2005</p>
13	*/
14	public class VoleHistogramExample extends Frame {
15
16	/**
17	* Create a Histogram and fill it with some random values.
18	*/
19	public VoleHistogramExample() {
20
21	// create the Histogram
22	Histogram his = new Histogram(0, 10, 128, 40, 0, 20, 30);
23	his.setCaption("0", "20", Histogram.ALIGN_LEFT);
24	add(his);
25
26	// add a Label
27	add(new Label("Histogram", 0, 52, 128, 10, Label.ALIGN_CENTER));
28
29	// show the frame
30	show();
31
32	// generate random values and pass them to the Diagram
33	for (;;) {
34	his.setValue(Math.rnd(20));
35	// sleep
36	try {
37	ThreadExt.sleep(500);
38	} catch (InterruptedException e) {}
39	}
40	}
41
42	/**
43	* Create an instance of the VoleHistogramExample
44	*/
45	public static void main(String[] args) {
46	new VoleHistogramExample();
47	}
48	}

Listing 2: VoleHistogramExample.java