SchiebeRegler

SchiebeRegler in der praktischen Informatik

Zielgruppe sind sowohl einfache IT-AnwenderInnen als auch StudentInnen und ambitionierte Informatik-Amateure

Grundkenntnisse der Informatik werden vorausgesetzt.



Live-SchiebeRegler

SVG ObjektGrafik SVG ObjektGrafik

User-Interface


Man sollte bei der Programmierung allerdings vorsorgen, dass besondere Situationen berücksichtigt und Missverständnisse vermieden werden.



Grafische (analoge) Rückmeldung:
Die beste Form der Rückmeldung ist die sofortige Änderung einer Grafik, z.B. so wie im ↑ Live-Beispiel dieser Seite.
Das erspart die meisten Erklärungen.

Digitale Rückmeldung
Wenn nötig, zeigt man den vom Programm verwendeten Zahlenwert (auch) als Zahl an.

Validierung
Wenn man (zusätzlich) auch die digitale Eingabe von Zahlen anbietet (so wie im ↑ Live-Beispiel), dann muss man den vom Programm verwendeten Wert unbedingt anzeigen: Dieser Wert kann sich von der Eigabe unterscheiden, z.B. wenn die zulässigen Grenzen überschritten wurden, wenn ein Dezimal-Beistrich eingegeben wurde oder bei einem Eingabe-Fehler.



Manchmal ist es notwendig, zusätzlich auch eine Möglichkeit zur (digitalen) Eingabe anzubieten.
In diesem Fall muss man durch geschickte → Programmierung dafür sorgen, dass jeweils nur ein einziger Wert gültig ist: Der vom Programm verwendete Wert muss sowohl vom Regler als auch digital angezeigt werden.



Mit passender Programmierung legt man die Schrittweite eines derartigen Einzelschritts fest: Sie kann auch andere Werte als ±1 annehmen.
Ein HTML-Regler bietet keine Pfeil-Symbole. Wenn man sie braucht, dann muss man sie selbst programmieren (↑ Live-Beispiel).



In Tabellen-Kalkulations-Programmen kann man die Orientierung (horizontal oder vertikal) einfach und intuitiv einstellen.

Auf Webseiten ist das nicht so einfach: HTML + CSS ermöglichen zwar jede beliebige Orientierung, es erfordert jedoch einige Übung, einen vertikalen Regler zuverlässig zu positionieren.
Beispiel → Spektralfarben mit SchiebeReglern in 2 Dimensionen.

SchiebeRegler in Webseiten





Typische Anwendung im HTML-Quelltext:
<form name="f1" method="get"
action="javascript:do_range()">
<input name="r1" type="range"
onchange="do_range()" />
</form>

Ohne weitere Maßnahmen liefert der Regler Werte im Bereich 0...100 mit einer Schrittweite von ±1


Funktion zum Lesen eines Regler-Wertes:
<script type="text/javascript">

function do_range() {
var v = document.f1.r1.value;
console.log('v=' + v);
// alert('v=' + v);
}

</script>



HTML-Ausgabe-Element:
Wert = <span id="v1">?</span>

Javascript-Funktion
function do_range() {
var v = document.f1.r1.value;
var n = document.getElementById('v1');
n.firstChild.nodeValue = v;
}


HTML-Formular:
<output name="out1" />

Javascript-Funktion:
function do_range() {
var v = document.f1.r1.value;
document.f1.out1.value = v;
}



Im Beispiel wird dazu ein <input>-(Eingabe)-Element mit type="text" verwendet. Besser wäre type="number", das funktioniert jedoch mit gängigen Browsern noch nicht zuverlässig.


HTML:
<body onload="do_onload()">
...
</body>
HTML-Formular:
<form name="f1" method="get"
action="javascript:do_text()">
<input name="r1" type="range"
onchange="do_range()" />
<input name="t1" type="text"
onchange="do_text()" />
</form>


Javascript-Funktionen:
var v;
function do_onload() {
v = 50;
form_write();
}
function do_range() {
v = parseFloat(document.f1.r1.value);
form_write();
}
function do_text() {
w = document.f1.t1.value;
w = w.replace(/,/,'.');
v = parseFloat(w);
form_write();
}
function form_write() {
document.f1.r1.value = v;
document.f1.t1.value = v;
}



HTML Dreiecks-Symbole
<span onclick="do_inc(-1)">&#x25C0;</span>
<input type="range" name="r1" onchange="do_f1r1()" />
<span onclick="do_inc(1)">&#x25B6;</span>

Javascript:
function do_inc(i) {
v += i;
form_write();
}
Die Funktion arbeitet nur dann so wie erwartet, wenn die Variable v eine Zahl (vom Typ number ) ist. Das wird hier durch die Funktion parseFloat() sichergestellt.



HTML:
Regler-Element mit Attributen für beide Änderungs-Ereignisse:
<input type="range" name="f1r1"
onchange="do_range()" oninput="do_range()" />

Seit Version → HTML-5 kann auch ein <form>-Element die Attribute onchange und/oder oninput enthalten. Es reagiert damit auf die Änderung jedes beliebigen darin enthaltenen Eingabe-Elements. Diese Methode wird jedoch noch nicht von allen gängigen Browsern unterstützt.


Die Attribute min und max können beliebige positive oder negative Werte annehmen, es muss jedoch min<max sein.
Alle 3 Attribute können auch Gleitkomma-Werte annehmen. Als Dezimal-Trennzeichen muss man einen Punkt verwenden.

Beispiele:
<input type="range" />
<input type="range" max="1000" />
<input type="range" min="-50 max="50" />
<input type="range" min="-1" max="1" step="0.01" />

Im Kapitel ↓ Kennlinie werden Beispiele von Reglern mit nicht-linearer (z.B. logarithmischer) Kennlinie vorgestellt.



Mit diesem Link kann man das Beispiel in einem eigenen Browser-Tab laden, mit diesem Link wird der HTML + Javascript Quelltext angezeigt.
Im Quelltext dieser Webseite finden sie die ungekürzten Original-Funktionen.

SchiebeRegler in der Tabellen-Kalkulation


Wählen sie eine der Optionen, um die zum Programm passenden Hinweise anzuzeigen:

Herstellung und Konfiguration von SchiebeRegler-Elementen in



Man verwendet eine Formel, um den gewünschten Wert in einer eigenen Ergebnis-Zelle zu programmieren.

Beispiel:
 AB
1Regler*
2Max*
3Min*
3 Ergebnis =B1*(B2-B3)/100+B3 *
Kennlinie:  linear  logarithmisch

Annahmen:
Verknüpfte Zelle des SchiebeReglers = B1
Grenzen des Regel-Bereichs sind in B2 und B3 eingetragen:
Sie stammen hier aus den aktuellen Werten des Kapitels ↓ Kennlinie.
Das Ergebnis in Zelle B3 wird hier doppelt angezeigt: Links die Formel, rechts der aktuelle Wert.



Der Wert der mit der Kennlinien-Formel Berechneten Zelle ist dagegen wichtig. Diese Zelle wird am besten gut sichtbar direkt neben dem Regler angeordnet.

In einem gut programmierten Kalkulations-Blatt werden die meisten Zellen gegen eine Änderung ihres Inhalts (Formel, Wert) geschützt. Davon ausgenommen sind nur die zur manuellen Eingabe vorgesehenen Zellen - und die Verknüpften Zellen aller SchiebeRegler.



Solange das Problem besteht, wird empfohlen, die Regler-Elemente aus portierten Dokumenten zu löschen und in der jeweiligen Programm-Version neu zu programmieren.

Kennlinie


Wenn sich der Regel-Bereich nicht wie gewünscht einstellen lässt, oder wenn man eine nicht-lineare Kennlinie wünscht, dann verwendet man einen Standard-Regler (Bereich 0...100) und berechnet den vom Programm zu verwendenden Zahlenwert mit einer Formel aus dem aktuellen Wert des Reglers.


SVG-Objektgrafik 0% 25% 50% 75% 100% Eingang Ausgang 0 25 50 75 100


SVG-Objektgrafik 0% 25% 50% 75% 100% Eingang Ausgang 1 10 100 1000 10000


Mit einem Trick ist auch ein ∼log.Regler 0...100 programmierbar:
Man programmiert einen logarithmischen Regler für den Bereich 1...101 und subtrahiert 1 vom berechneten Ergebnis.


Wenn vom Programm nicht der Regler-Wert selbst verwendet wird, sondern ein daraus berechneter Wert, dann muss man auch umgekehrt den Regler-Wert aus dem digital eingegebenen Wert berechnen.


 Lineare KennlinieLogarithmische Kennlinie
Vorgabenmin, max
Lineare Steigungk=(max-min)/100k=(ln(max/min))/100
Linearer Achsen-Abschnittd=mind=ln(min)
Ausgabe-Werty=k*r+dy=exp(k*r+d)
Regler-Wertr=(y-d)/kr=((ln(y)-d)/k
Die Formel 'Ausgabe-Wert' berechnet den vom Programm zu verwendenden Wert y als Funktion des Regler-Werts r

Die Formel 'Regler-Wert' berechnet den am Regler einzustellenden Wert r bei digitaler Eingabe eines gewünschten Ausgabe-Werts y

Als weitere Vorgabe wird ein Standard-Regler mit 100 Schritten angenommen. Wenn ihr Regler mit mehr oder weniger Schritten arbeitet, dann ersetzen sie die Zahl 100 damit.

Für einen Regler der Tabellen-Kalkulation ist die fortgeschrittene Programmierung mit einem Hilfsprogramm (in der Programmiersprache → Basic) möglich:
Man muss allerdings ein Event-Handler-Programm (Sub Worksheet_Change() ) schreiben, welches bei digitaler Eingabe den berechneten Regler-Wert in die Zellverknüpfung des Reglers schreibt.