Course notes 30
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

User Interface Elements - Toggle Buttons

Toggle buttons have two states: on or off. When you click the button it switches to the opposite state of what it currently is.

The first thing you need to do is to set a variable (toggle1) that will keep track of the current state (is it on or off). Then we load two images into memory - the image of the toggle switch and a light bulb.

 var ctx1, toggle1=0;

 //loading toggle button into memory
 var toggle = new Image();
 toggle.src = "../images/off.png";

 //add images into memory
 var lightbulb = new Image();
 lightbulb.src = "../images/bulbOff.png";

We set up the canvas and add a listener to watch out for a click. We can click anywhere on the canvas and then later detect where the click is.

 //*********************** initialization ************************************
 function init(){
	
    canvas1 = document.getElementById('myCanvas1');
    ctx1 = canvas1.getContext('2d');

	  drawBackground();
   
	  canvas1.addEventListener('click', doClick, false);
 }

When drawing the background, you can use the drawImage command to add the image of the toggle button and the light bulb. You
must have the image defined and loaded before using it on the page.

 //*************************** draw the backgrounds *******************************

 function drawBackground () {
	
   //make a background color
   ctx1.fillStyle='black';
   ctx1.fillRect(0,0,320,480);
	
   //write the captions
   ctx1.font = "20pt Arial";
   ctx1.fillStyle = "Red";
   ctx1.fillText("Toggle Button", 70, 30);

   //draw a toggle button
   ctx1.drawImage(toggle, 110, 50, 97, 27);

   //add a lightbulb
   ctx1.drawImage(lightbulb, 250, 30, 52, 87); 
 }

To determine where the click is, we can specify the coordinates of the toggle button and check to see if the click was inside. If it is, then
we call the swapToggle() function.

//***********************Figure out where the click is ************************
 function doClick(e) {

    //*******Include this*******
	  var offset = findOffset(canvas1);    
    var posX = e.pageX - offset.x;     
    var posY = e.pageY - offset.y;     
 
 //You need to figure out where the click is
    if ((posX >= 110)&&(posX < 207)&&(posY >= 50)&&(posY < 77)) {
		swapToggle();
    } 	
 }

Then we need to swap the image if the toggle button is clicked. Notice that we swap the light bulb image also. If the toggle1 is 0,
then that means it is off and we need to turn it on.

//********************** Toggle button **************************************
 function swapToggle() {
	
	if (toggle1==0) {
		toggle.src = "../images/on.png";
		lightbulb.src = "../images/bulbOn.png";
		ctx1.drawImage(toggle, 110, 50, 97, 27);
		ctx1.drawImage(lightbulb, 250, 30, 52, 87); 
		toggle1=1;
	 } else {
		toggle.src = "../images/off.png";
		lightbulb.src = "../images/bulbOff.png";
		ctx1.drawImage(lightbulb, 250, 30, 52, 87); 
		ctx1.drawImage(toggle, 110, 50, 97, 27);
		toggle1=0;
	 }
 }

Click to see the example in its own page (view the source)