Tutorials :: Javascript > Animation > Drehregler mit Speicherfunktion
[Beispiel]   [Download]   [Schulnote: 3.95 aus 567 Bewertungen]
 Bewerten: 
6

5

4

3

2

1
Um einen Drehregler zu simulieren benötigt man nur ein Bild, dass per Drag & Drop auf einer Kreisbahn bewegt wird.
Der Mittelpunkt dieser Kreisbahn ist gleichzeitig auch der Mittelpunkt des Reglerbildes.
Die Mausposition relativ zum Mittelpunkt wird erfasst und daraus der Winkel ermittelt.
mit diesem Winkel wird zusammen mit dem richtigen Radius die Regleranzeige (der grüne Punkt) positioniert.

Bei Loslassen wird der aktuelle Wert in einem Cookie gespeichert.
Dieser kann später abgerufen und beispielsweise als Farbwert in der Seite verwendet werden.

Der html-Code für die Reglerbilder:










10 
11 
12 
13 
14 
<table>
<tr>
<td style="width: 140px;">
<div id="dr_regler_1" style="position: absolute; width: 100px; height: 100px; background-image:url('images/dr_regler.gif');"></div>
<div id="dr_led_1" style="position: absolute; width: 18px; height: 18px; background-image:url('images/dr_led.gif'); cursor: pointer;"></div>
</td>
<td>
Prozent: <input type="text" id="reglerProzent" value="0" style="width: 70px; border: 1px solid #FFFFFF;">
<br><br>
Farbwert: <input type="text" id="reglerHex" value="" style="width: 70px; border: 1px solid #FFFFFF;">
</td>
</tr>
</table>
<script language="javascript"> var regler1 = new DrehRegler(1, 36, 100); </script>


Als erstes müssen Funktion für das Klicken & Loslassen sowie das ziehen erstellt werden:










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 
54 
55 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
71 
72 
73 
74 
75 
76 
77 
78 
79 
80 
81 
82 
83 
84 
85 
86 
87 
88 
89 
90 
91 
92 
93 
94 
95 
96 
97 
98 
99 
100 
101 
102 
103 
104 
105 
106 
107 
108 
109 
110 
111 
112 
113 
114 
115 
116 
117 
118 
119 
120 
121 
122 
123 
124 
125 
126 
127 
128 
129 
document.addEventListener("mousedown", pageMousedown, true);
document.addEventListener("mousemove", pageMouseMove, true);
document.addEventListener("keyup", pageKey, true);
document.addEventListener("mouseup", pageMouseUp, true);


var drehReglerAktiv = '';
var drehReglerFarbe = '#FFFFFF';
var drehReglerProzente = 100;


function pageMousedown(event)
{
if( !event )
{
event = window.event;
}

var el = (event.target ? event.target : event.target.parentNode);

// Drehregler aktivieren
if( el.id.substr(0, 6) == 'dr_led' )
{
drehReglerAktiv = el.id;
}
}


function pageMouseUp(event)
{
if( !event )
{
event = window.event;
}

var el = (event.target ? event.target : event.target.parentNode);

// Drehregler deaktivieren und Stellung im Cookie speichern
// --------------------------------------------------------
if( drehReglerAktiv == 'dr_led_1' )
{
document.cookie = 'Farbe='+drehReglerFarbe;
document.cookie = 'Prozente='+drehReglerProzente;
}
drehReglerAktiv = '';
}


function pageMouseMove(event)
{
x = event.clientX + window.pageXOffset;
y = event.clientY + window.pageYOffset;

// Drehregler bewegen
// ------------------
if( drehReglerAktiv != '' )
{
useMpX = regler1.mpX;
useMpY = regler1.mpY;
useRadius = regler1.radius;

// Quadrant im Kreis erfassen
// --------------------------
if( x < useMpX && y >= useMpY )
{
// UL
x1 = useMpX - x;
y1 = y - useMpY;
istwinkel = ( x1 > 0 ) ? winkelInGrad(Math.atan(y1/x1)) : 45;
istwinkel = 90 - istwinkel - 45;
istwinkel = ( istwinkel < 0 ) ? 0 : istwinkel;
istwinkel = ( istwinkel > 45 ) ? 45 : istwinkel;
} else
if( x < useMpX && y < useMpY )
{
// OL
x1 = useMpX - x;
y1 = useMpY - y;
istwinkel = ( x1 > 0 ) ? winkelInGrad(Math.atan(y1/x1)) : 135;
istwinkel = istwinkel + 45;
istwinkel = ( istwinkel < 45 ) ? 45 : istwinkel;
istwinkel = ( istwinkel > 135 ) ? 135 : istwinkel;
} else
if( x >= useMpX && y < useMpY )
{
// OR
x1 = x - useMpX;
y1 = useMpY - y;
istwinkel = ( x1 > 0 ) ? winkelInGrad(Math.atan(y1/x1)) : 225;
istwinkel = 90 - istwinkel + 135;
istwinkel = ( istwinkel < 135 ) ? 135 : istwinkel;
istwinkel = ( istwinkel > 225 ) ? 225 : istwinkel;
} else
{
// UR
x1 = x - useMpX;
y1 = y - useMpY;
istwinkel = ( x1 > 0 ) ? winkelInGrad(Math.atan(y1/x1)) : 270;
istwinkel = istwinkel + 225;
istwinkel = ( istwinkel < 225 ) ? 225 : istwinkel;
istwinkel = ( istwinkel > 270 ) ? 270 : istwinkel;
}

// Dann den Winkel auf den benötigten Radius umrechnen
// ---------------------------------------------------
istwinkel -= 45;
prozent = Math.round( ( ( istwinkel / 270 ) * 100 ), 0 ) + 17;
drehReglerProzente = prozent;

dezVal = Math.round((255/100)*prozent);
teil = dezToHex(parseInt(dezVal, 10));
drehReglerFarbe = '#' + teil + teil + teil;

betragX = Math.cos(winkelImBogen(istwinkel)) * useRadius;
betragY = Math.sin(winkelImBogen(istwinkel)) * useRadius;

ledX = useMpX - betragX;
ledY = useMpY - betragY;

// Jetzt nur noch das grüne Bild positionieren
// -------------------------------------------
document.getElementById(idLed).style.left = ledX + 'px';
document.getElementById(idLed).style.top = ledY + 'px';

document.getElementById('reglerProzent').value = prozent;
document.getElementById('reglerHex').value = drehReglerFarbe;
document.getElementById('siteHeader').style.backgroundColor = drehReglerFarbe;
}
}


Dann brauchen wir Umrechnungsfunktionen für die Winkel.
Winkel müssen im Bogenmaß angegeben werden, 360 Grad = 2 Pi.

Die Funktion Drehregler initialisiert die Bilder und setzt sie auf die Startpositionen.
In diesem Beispiel wird der Cookie ausgelesen und die Hintergrundfarbe des Seitenheaders geändert.










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 
54 
55 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
71 
72 
73 
74 
75 
76 
77 
78 
79 
80 
81 
function winkelInGrad(alpha)
{
alphaGrad = ( alpha * 360 ) / ( 2 * Math.PI );
return alphaGrad;
}

function winkelImBogen(alpha)
{
alphaBogen = ( alpha * Math.PI * 2 ) / 360;
return alphaBogen;
}

function DrehRegler(number, radius, prozent)
{
// Falls vorhanden den Startwinkel aus Cookie auslesen
if( document.cookie )
{
if( document.cookie.search(/Farbe.+/) != -1 )
{
if( f = document.cookie.split("Farbe=") )
{
colorCode = f[1].split(";");
colorFromUser = colorCode[0];
drehReglerFarbe = colorFromUser;
}

if( p = document.cookie.split("Prozente=") )
{
prozenteCode = p[1].split(";");
drehReglerProzente = prozenteCode[0];
prozent = drehReglerProzente;
}
}
}

idButton = 'dr_regler_'+number;
idLed = 'dr_led_'+number;

document.getElementById(idButton).style.position = 'absolute';

// Bildinformationen einlesen
buttonWidth = document.getElementById(idButton).offsetWidth;
buttonHeight = document.getElementById(idButton).offsetHeight;
buttonLeft = document.getElementById(idButton).offsetLeft;
buttonTop = document.getElementById(idButton).offsetTop;

// Bilder positionieren
document.getElementById(idButton).style.left = buttonLeft + 'px';
document.getElementById(idButton).style.top = buttonTop + 'px';

ledWidth = document.getElementById(idLed).offsetWidth;
ledHeight = document.getElementById(idLed).offsetHeight;

mpX = buttonLeft + ( buttonWidth / 2 ) - ( ledWidth / 2 );
mpY = buttonTop + ( buttonHeight / 2 ) - ( ledHeight / 2 );

this.number = number;
this.radius = radius;
this.prozent = prozent;
this.mpX = mpX;
this.mpY = mpY;

startwinkel = Math.round( ( ( 270 * prozent ) / 100 ), 0 );
startwinkel -= 45;

betragX = Math.cos(winkelImBogen(startwinkel)) * radius;
betragY = Math.sin(winkelImBogen(startwinkel)) * radius;

ledX = mpX - betragX;
ledY = mpY - betragY;

document.getElementById(idLed).style.position = 'absolute';
document.getElementById(idLed).style.left = ledX + 'px';
document.getElementById(idLed).style.top = ledY + 'px';

if( document.getElementById('reglerProzent') )
{
document.getElementById('reglerProzent').value = prozent;
document.getElementById('reglerHex').value = drehReglerFarbe;
}
}