[Übersicht] [Support-Forum]
Tutorials > Javascript > Canvas > Schiebeschalter  

  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



php


[Beispiel]   [Download]  

Schiebeschalter sieht man immer häufiger, sei es in den Handyeinstellungen oder auf Internetseiten.
Anlass genug, mal einen eigenen zu programmieren. Dieser hier ist recht simpel und verzichtet auf Animationen.

Dieses Script bietet einige Konfigurationsmöglichkeiten in Darstellung und Funktionsweise:










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 
<script type="text/javascript" src="javascript/nSchalter/CanvasSchalter.js"></script>

<canvas id="nSsCv0" width="50" height="22" style="border: 0px;" onclick="javascript:nSsCvSet(0, -1);"></canvas>

<script language="javascript">

var nSsCv = [];

// Konfiguration für einen SChiebeschalter
// ---------------------------------------
nSsCv[0] = [];

nSsCv[0]['titel_an'] = 'An'; // MouseOver-Titel bei Stellung an
nSsCv[0]['titel_aus'] = 'Aus'; // MouseOver-Titel bei Stellung aus

nSsCv[0]['start'] = 0; // Startstellung 1 oder 0
nSsCv[0]['richtung'] = 'r'; // Stellung bei an - l oder r

nSsCv[0]['text_an'] = 'On'; // Schrift auf Fläche bei Stellung an
nSsCv[0]['text_aus'] = 'Off'; // Schrift auf Fläche bei Stellung aus

nSsCv[0]['text_farbe_an'] = '#FF0000'; // Farbe der Schrift bei Stellung an
nSsCv[0]['text_farbe_aus'] = '#FFFFFF'; // Farbe der Schrift bei Stellung aus

nSsCv[0]['breite_basis'] = 20; // Basis + ( 2 * Radius ) = Gesamtbreite
nSsCv[0]['hoehe_basis'] = 7; // Basis = Gesamthöhe

nSsCv[0]['Knopf_radius'] = 7; // Radius des Knopfes
nSsCv[0]['Knopf_farbe'] = '#808080'; // Farbe des Knopfes
nSsCv[0]['Knopf_rahmen'] = '#808080'; // Farbe des Knopfrahmens

nSsCv[0]['farbe_flaeche'] = '#000000'; // Hintergrundfarbe Fläche Schalter aus
nSsCv[0]['farbe_aktiv'] = '#00FFFF'; // Hintergrundfarbe Fläche Schalter an

nSsCv[0]['farbe_hinter'] = ''; // Hintergrundfarbe des Canvas, keine = transparent
nSsCv[0]['rahmen_farbe'] = '#808080'; // Farbe des Aussenrahmens
nSsCv[0]['stellung'] = 0; // READONLY - Speicher für den aktuellen Stellwert

</script>

<script type="text/javascript" src="nSchieberegler.js"></script>


Die ID des ersten Canvas "nSsCv0" hat die 0 am Ende, weiter ginge es mit "nSsCv1" usw.

Die Schalter werden automatisch nach dem Laden der Seite entsprechend ihren Startwerten aus der Konfiguration gezeichnet.
Übergibt man der zeichnenden Funktion als Soll-Stellung eine -1, wird der Zustand einfach gewechselt.

Es wird zuerst der Hintergrund gezeichnet, dann geprüft ob der Button links oder rechts stehen muss.
Zuletzt noch die korrekte Beschriftung positionierten und das war es dann auch schon.










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 
function nSsCvSet(sscvID, sscvStellung)
{
/*
* sscvStellung
* ============
*
* 0 = ausschalten
* 1 = einschalten
* -1 = Stellungswechsel
*
*/

useSs = 'nSsCv'+sscvID;
if( nSrCanvas = document.getElementById(useSs) )
{
ctx = nSrCanvas.getContext('2d');

if( sscvStellung == -1 )
{
if( nSsCv[sscvID]['stellung'] == 1 )
{
sscvStellung = 0;
nSrCanvas.title = nSsCv[sscvID]['titel_an'];
} else
{
sscvStellung = 1;
nSrCanvas.title = nSsCv[sscvID]['titel_aus'];
}
nSrCanvas.title = ( sscvStellung == 1 ) ? nSsCv[sscvID]['titel_an'] : nSsCv[sscvID]['titel_aus'];
}

nSsCv[sscvID]['width'] = nSrCanvas.width;
nSsCv[sscvID]['height'] = nSrCanvas.height;

// Hintergrund
// ===========
ctx.clearRect(0, 0, nSsCv[sscvID]['width'], nSsCv[sscvID]['height']);
if( nSsCv[sscvID]['farbe_hinter'] != '' )
{
ctx.fillStyle = nSsCv[sscvID]['farbe_hinter'];
ctx.fillRect(0, 0, nSsCv[sscvID]['width'], nSsCv[sscvID]['height']);
}

// Rahmen zeichnen
// ===============
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = ( sscvStellung == 1 ) ? nSsCv[sscvID]['farbe_aktiv'] : nSsCv[sscvID]['rahmen_farbe'];
ctx.fillStyle = ( sscvStellung == 1 ) ? nSsCv[sscvID]['farbe_aktiv'] : nSsCv[sscvID]['farbe_flaeche'];

x = ( nSsCv[sscvID]['width'] / 2 ) - ( nSsCv[sscvID]['breite_basis'] / 2 );
y = ( nSsCv[sscvID]['height'] / 2 ) ;

ctx.arc( x, y, nSsCv[sscvID]['hoehe_basis'], -(Math.PI/2), (Math.PI/2), true);
ctx.moveTo( x, y - nSsCv[sscvID]['hoehe_basis'] );
ctx.lineTo( x + nSsCv[sscvID]['breite_basis'], y - nSsCv[sscvID]['hoehe_basis']);
ctx.arc( x + nSsCv[sscvID]['breite_basis'], y, nSsCv[sscvID]['hoehe_basis'], -(Math.PI/2), (Math.PI/2), false);
ctx.lineTo( x, y + nSsCv[sscvID]['hoehe_basis'] );

ctx.stroke();
ctx.fill();
ctx.closePath();

// Knopf
// =====
if( ( sscvStellung == 0 && nSsCv[sscvID]['richtung'] == 'l' ) || ( sscvStellung == 1 && nSsCv[sscvID]['richtung'] == 'r' ) )
{
// Knopf rechts
x_k = x + nSsCv[sscvID]['breite_basis'];
} else
{
// Knopf links
x_k = x;
}

ctx.beginPath();
ctx.strokeStyle = nSsCv[sscvID]['Knopf_rahmen'];
ctx.fillStyle = nSsCv[sscvID]['Knopf_farbe'];
ctx.arc( x_k, y, nSsCv[sscvID]['Knopf_radius'], 0, (2*Math.PI), true);
ctx.stroke();
ctx.fill();
ctx.closePath();

// Beschriftung
// ============
ctx.font = "normal 10px Arial,sans-serif";
if( sscvStellung == 1 )
{
ctx.fillStyle = nSsCv[sscvID]['text_farbe_an'];
nSsCvUseText = nSsCv[sscvID]['text_an'];
} else
{
ctx.fillStyle = nSsCv[sscvID]['text_farbe_aus'];
nSsCvUseText = nSsCv[sscvID]['text_aus'];
}
if( nSsCvUseText != "" )
{
if( ( sscvStellung == 0 && nSsCv[sscvID]['richtung'] == 'r' ) || ( sscvStellung == 1 && nSsCv[sscvID]['richtung'] == 'l' ) )
{
ctx.fillText(nSsCvUseText, x + 3 + nSsCv[sscvID]['Knopf_radius'], y + 3);
} else
{
ctx.fillText(nSsCvUseText, x - 2, y + 3);
}
}

// Aktuelle Stellung speichern
// ===========================
nSsCv[sscvID]['stellung'] = sscvStellung;
}
}


Die Weiterverarbeitung kann in der Hauptfunktion nSsCvSet() anhand der Schalter-ID erfolgen.