|
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="nDrCv0" width="80" height="80" style="border: 0px solid #808080;"></canvas>
<script language="javascript">
var nDrCv = [];
// Konfiguration für einen Regler
// ------------------------------
nDrCv[0] = [];
nDrCv[0]['prozente'] = 0; // READONLY - Speicher für den aktuellen Prozentwert
nDrCv[0]['min'] = 0; // 0 = SSW
nDrCv[0]['max'] = 270; // 270 = SSO
nDrCv[0]['radius'] = 20; // Radius des Knopfes
nDrCv[0]['mitte'] = 0; // Mittelstellung
nDrCv[0]['start'] = 25; // Startwinkel in %
nDrCv[0]['schritte'] = 4; // Schrittweite in % bei Drehung
nDrCv[0]['farbe_hinter'] = '#909090'; // Hintergrundfarbe, 0 = keine
nDrCv[0]['Knopf_farbe_1'] = '#DCDCDC'; // Farbe oben vom Farbverlauf
nDrCv[0]['Knopf_farbe_2'] = '#505050'; // Farbe unten vom Farbverlauf
nDrCv[0]['punkt'] = 'strich'; // "punkt" oder "strich"
nDrCv[0]['punkt_farbe'] = '#00FFFF'; //
nDrCv[0]['skala'] = 1; // 0(keine), 1(1 bis 10), 2(-5 bis +5), 3(-10 bis 0)
nDrCv[0]['skala_alle'] = 1; // 1 = alle 11 Werte, 0 = nur Start, Mitte & Ende
nDrCv[0]['skala_farbe'] = '#FFFFFF'; // SChriftfarbe der Skala
nDrCv[0]['ring'] = 1; // 0(keiner), 1(aktiv), 2(dauer-an), 3(dauer-an Vollkreis)
nDrCv[0]['ring_breite'] = 4; // Strichstärke
nDrCv[0]['ring_farbe'] = 'orange'; // Farbe des Rings
nDrCv[0]['ring_hinter'] = 1; // 0(keiner), 1(wie Vordergrund), 2(dauer-an Vollkreis)
nDrCv[0]['ring_hinter_f'] = '#505050'; // Farbe des Hintergrund-Rings
nDrCv[0]['stufen'] = []; // Stufenstellungen in %
</script>
<script type="text/javascript" src="nDrehregler.js"></script>
|
Die ID des ersten Canvas "nDrCv0" hat die 0 am Ende, weiter ginge es mit "nDrCv1" usw.
Die Regler werden automatisch nach dem Laden der Seite entsprechend ihren Startwerten aus der Konfiguration gezeichnet.
Als erstes wird der Prozentwert in einen Winkel innerhalb der Vorgaben (z.B. 180 oder 270 Grad) umgerechnet.
Dann werden der Hintergrund, der Knopf selber, dann dessen Punkt oder Strich und zuletzt die Skala und der Ring 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
53
| canvas.title = drcvPROZ + '%';
ctx = canvas.getContext('2d');
nDrCv[drcvID]['width'] = canvas.width;
nDrCv[drcvID]['height'] = canvas.height;
nCpX = nDrCv[drcvID]['width'] / 2;
nCpY = nDrCv[drcvID]['height'] / 2;
// Radius den anderen Funktionen zur Verfügung stellen
// ===================================================
nDrCvRadius = nDrCv[drcvID]['radius'];
// Prozent in Winkel umrechnen
// ===========================
if( drcvPROZ < 0 ) { drcvPROZ = 0; }
if( drcvPROZ > 100 ) { drcvPROZ = 100; }
nDrCv[drcvID]['prozente'] = drcvPROZ;
nDrCv[drcvID]['winkel'] = nDrCv[drcvID]['min'] + ( ( nDrCv[drcvID]['max'] - nDrCv[drcvID]['min'] ) * ( drcvPROZ / 100 ) );
// Hintergrund
// ===========
ctx.clearRect(0, 0, nDrCv[drcvID]['width'], nDrCv[drcvID]['height']);
if( nDrCv[drcvID]['farbe_hinter'] != '' )
{
ctx.fillStyle = nDrCv[drcvID]['farbe_hinter'];
ctx.fillRect(0, 0, nDrCv[drcvID]['width'], nDrCv[drcvID]['height']);
}
// Knopf
// =====
nDrGradient = ctx.createLinearGradient(0, (nCpY+(nDrCv[drcvID]['radius']/2)), 0, 0);
nDrGradient.addColorStop(0, nDrCv[drcvID]['Knopf_farbe_2']);
nDrGradient.addColorStop(1, nDrCv[drcvID]['Knopf_farbe_1']);
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = nDrCv[drcvID]['Knopf_farbe_2'];
ctx.fillStyle = nDrGradient;
ctx.arc(nCpX, nCpY, nDrCv[drcvID]['radius'], 0, 2*Math.PI, false);
ctx.fill();
ctx.stroke();
ctx.closePath();
// Skala
// =====
...
// Punkt oder Strich
// =================
...
|
Die ganzen Berechnungen unterscheiden zwischen Linear- und Stufenregler, sowie welche mit Mittelstellung.
Das Bild ist eigentlich immer gleich, bis auf den Punkt, welcher mit Sinus & Cosinus vom Mittelpunkt aus errechnet wird.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| if( nDrCv[drcvID]['punkt'] == 'strich' )
{
StartPunktX = nRadialToCosinus(nProzentToRadial(drcvID, useDrcvPROZ), 1.0);
StartPunktY = nRadialToSinus(nProzentToRadial(drcvID, useDrcvPROZ), 1.0);
EndPunktX = nRadialToCosinus(nProzentToRadial(drcvID, useDrcvPROZ), 0.4);
EndPunktY = nRadialToSinus(nProzentToRadial(drcvID, useDrcvPROZ), 0.4);
ctx.moveTo((nCpX+StartPunktX),(nCpY+StartPunktY));
ctx.lineTo((nCpX+EndPunktX), (nCpY+EndPunktY));
} else
{
StartPunktX = nRadialToCosinus(nProzentToRadial(drcvID, useDrcvPROZ), 0.7);
StartPunktY = nRadialToSinus(nProzentToRadial(drcvID, useDrcvPROZ), 0.7);
ctx.arc(nCpX+StartPunktX, nCpY+StartPunktY, 2, 0, 2*Math.PI);
ctx.fill();
}
|
Eine Neuberechnung wird von den Eventlistenern MouseUp, MouseDown und MouseMove ausgelöst.
Während des Ziehens werden die bewegten Pixel in Winkel umgerechnet -> nDrCv[0]['schritte']
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
| function nDrCvMouseMove(event)
{
x = event.clientX + window.pageXOffset;
y = event.clientY + window.pageYOffset;
if( nDrCvDrag != -1 )
{
nDrCvDragX = ( nDrCvDragX == -1 ) ? x : nDrCvDragX;
nDrCvDragY = ( nDrCvDragY == -1 ) ? y : nDrCvDragY;
if( y > nDrCvDragY )
{
nDrCv[nDrCvDrag]['prozente'] -= nDrCv[nDrCvDrag]['schritte'];
nDrCv[nDrCvDrag]['prozente'] = ( nDrCv[nDrCvDrag]['prozente'] <= 0 ) ? 0 : nDrCv[nDrCvDrag]['prozente'];
} else
if( y < nDrCvDragY )
{
nDrCv[nDrCvDrag]['prozente'] += nDrCv[nDrCvDrag]['schritte'];
nDrCv[nDrCvDrag]['prozente'] = ( nDrCv[nDrCvDrag]['prozente'] >= 100 ) ? 100 : nDrCv[nDrCvDrag]['prozente'];
}
nDrCvDragX = x;
nDrCvDragY = y;
nDrCvSet(nDrCvDrag, nDrCv[nDrCvDrag]['prozente']);
}
}
|
Die Weiterverarbeitung des Stellwertes in Prozent erfolgt in der Hauptfunktion nDrCvSet() anhand der Regler-ID.
Ebenso bietet die Funktion "nDrCvMouseUp(event)" die Möglichkeit, den beim Loslassen eingestellten Wert zu verarbeiten.
|
|
