|
PHP Basics
• Administrationsbereich
• Counter
• Umfrage
• Kalender
• Kontaktformular
Javascript
• WebAudio Player
• WebAudio Player Singles
• Web-Farbmixer
• Beim Scrollen nachladen
Canvas
• Weihnachtskalender
• BCD Uhr
• Analog Anzeigeinstrument
• Drehregler
• Schieberegler
• Schiebeschalter
Navigation
• Registerkarten-Navigation
• Rotationsmenue
Animation & Spiele
• Warp-Flug
• Lichtjockey
HTML
• HTML 5 Grundgerüst
CSS
• Responsive Tabelle
|
| [Beispiel] [Download] |
Oftmals stellen Dreh- und Schieberegler eine kompfortable Variante dar um Werte einzustellen.
Dieses Script bietet einige Konfigurationsmöglichkeiten in Darstellung und Funktionsweise:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <canvas id="nSrCv0" width="60" height="200" style="border: 1px solid #808080;"></canvas>
<script language="javascript">
var nSrCv = [];
// Konfiguration für einen Regler
// ------------------------------
nSrCv[0] = [];
nSrCv[0]['prozente'] = 0; // READONLY - Speicher für den aktuellen Prozentwert
nSrCv[0]['quer'] = 0;
nSrCv[0]['mitte'] = 0; // Mittelstellung
nSrCv[0]['start'] = 25; // Startstellung in %
nSrCv[0]['schritte'] = 3; // Schrittweite in % bei Drehung
nSrCv[0]['farbe_hinter'] = '#909090'; // Hintergrundfarbe, 0 = keine
nSrCv[0]['str_leucht'] = 1;
nSrCv[0]['str_laenge'] = 150;
nSrCv[0]['str_breite'] = 4;
nSrCv[0]['str_hinter'] = '#606060';
nSrCv[0]['str_farbe'] = '#00FFFF';
nSrCv[0]['Knopf_rund'] = 1; // 1 = rund, 0 = eckig
nSrCv[0]['Knopf_radius'] = 10; // Radius des Knopfes
nSrCv[0]['Knopf_laenge'] = 14;
nSrCv[0]['Knopf_breite'] = 24;
nSrCv[0]['Knopf_farbe_1'] = '#AAAAAA'; // Farbe unten vom Farbverlauf
nSrCv[0]['Knopf_farbe_2'] = '#707070'; // Farbe oben vom Farbverlauf
nSrCv[0]['Knopf_aktiv'] = '#00FF00'; // Farbe wenn Knopf gedrückt
nSrCv[0]['skala'] = 1; // 0 = nein, 1 = ja, 2 = nur 1, 5, 10
nSrCv[0]['skala_farbe'] = '#FFFFFF'; // SChriftfarbe der Skala
nSrCv[0]['stufen'] = []; // Stufenstellungen in %
</script>
<script type="text/javascript" src="nSchieberegler.js"></script>
|
Die ID des ersten Canvas "nSrCv0" hat die 0 am Ende, weiter ginge es mit "nSrCv1" usw.
Die Regler werden automatisch nach dem Laden der Seite entsprechend ihren Startwerten aus der Konfiguration gezeichnet.
Als erstes wird der Prozentwert in entsprechende Länge innerhalb der Vorgaben umgerechnet.
Dann werden der Hintergrund, der Knopf selber und zuletzt die Skala gezeichnet.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| canvas.title = srcvPROZ + '%';
ctx = canvas.getContext('2d');
nSrCv[drcvID]['width'] = canvas.width;
nSrCv[drcvID]['height'] = canvas.height;
// Prozente
// ========
if( srcvPROZ < 0 ) { srcvPROZ = 0; }
if( srcvPROZ > 100 ) { srcvPROZ = 100; }
nSrCv[drcvID]['prozente'] = srcvPROZ;
// Hintergrund
// ===========
ctx.clearRect(0, 0, nSrCv[drcvID]['width'], nSrCv[drcvID]['height']);
if( nSrCv[drcvID]['farbe_hinter'] != '' )
{
ctx.fillStyle = nSrCv[drcvID]['farbe_hinter'];
ctx.fillRect(0, 0, nSrCv[drcvID]['width'], nSrCv[drcvID]['height']);
}
// Streifen berechnen
// ==================
if( nSrCv[drcvID]['quer'] == 1 )
{
streifenLinks = ( nSrCv[drcvID]['width'] - nSrCv[drcvID]['str_laenge'] ) / 2;
streifenOben = ( nSrCv[drcvID]['height'] - nSrCv[drcvID]['str_breite'] ) / 2;
streifenLaenge = nSrCv[drcvID]['str_breite'];
streifenBreite = nSrCv[drcvID]['str_laenge'];
} else
{
streifenLinks = ( nSrCv[drcvID]['width'] - nSrCv[drcvID]['str_breite'] ) / 2;
streifenOben = ( nSrCv[drcvID]['height'] - nSrCv[drcvID]['str_laenge'] ) / 2;
streifenLaenge = nSrCv[drcvID]['str_laenge'];
streifenBreite = nSrCv[drcvID]['str_breite'];
}
// Skala
// =====
...
// Knopf
// =====
...
// Streifen-Beleuchtung
// =====
...
|
Die ganzen Berechnungen unterscheiden zwischen Linear- und Stufenregler, sowie welche mit Mittelstellung.
Eine Neuberechnung wird von den Eventlistenern MouseUp, MouseDown und MouseMove ausgelöst.
Während des Ziehens werden die bewegten Pixel in die Schrittweite umgerechnet -> nSrCv[0]['schritte']
Zusätzlich kann man direkt auf eine Stelle der Skala klicken, zu dieser der Regler sofort hinspringt.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| function nSrCvMouseMove(event)
{
x = event.clientX + window.pageXOffset;
y = event.clientY + window.pageYOffset;
if( nSrCvDrag != -1 )
{
nSrCvDragX = ( nSrCvDragX == -1 ) ? x : nSrCvDragX;
nSrCvDragY = ( nSrCvDragY == -1 ) ? y : nSrCvDragY;
if( nSrCv[nSrCvDrag]['quer'] == 1 )
{
if( x < nSrCvDragX )
{
nSrCv[nSrCvDrag]['prozente'] -= nSrCv[nSrCvDrag]['schritte'];
nSrCv[nSrCvDrag]['prozente'] = ( nSrCv[nSrCvDrag]['prozente'] <= 0 ) ? 0 : nSrCv[nSrCvDrag]['prozente'];
} else
if( x > nSrCvDragX )
{
nSrCv[nSrCvDrag]['prozente'] += nSrCv[nSrCvDrag]['schritte'];
nSrCv[nSrCvDrag]['prozente'] = ( nSrCv[nSrCvDrag]['prozente'] >= 100 ) ? 100 : nSrCv[nSrCvDrag]['prozente'];
}
} else
{
if( y > nSrCvDragY )
{
nSrCv[nSrCvDrag]['prozente'] -= nSrCv[nSrCvDrag]['schritte'];
nSrCv[nSrCvDrag]['prozente'] = ( nSrCv[nSrCvDrag]['prozente'] <= 0 ) ? 0 : nSrCv[nSrCvDrag]['prozente'];
} else
if( y < nSrCvDragY )
{
nSrCv[nSrCvDrag]['prozente'] += nSrCv[nSrCvDrag]['schritte'];
nSrCv[nSrCvDrag]['prozente'] = ( nSrCv[nSrCvDrag]['prozente'] >= 100 ) ? 100 : nSrCv[nSrCvDrag]['prozente'];
}
}
nSrCvDragX = x;
nSrCvDragY = y;
nSrCvSet(nSrCvDrag, nSrCv[nSrCvDrag]['prozente']);
}
}
|
Die Weiterverarbeitung des Stellwertes in Prozent erfolgt in der Hauptfunktion nSrCvSet() anhand der Regler-ID.
Ebenso bietet die Funktion "nSrCvMouseUp(event)" die Möglichkeit, den beim Loslassen eingestellten Wert zu verarbeiten.
|
|
