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

User Interface Elements - Radio Buttons

Radio Buttons are typically found in a set of more than one. Only one readio button can be selected at a time so when you select one, it must turn off the others.

We need to load all the radio buttons in memory, plus the apple.We will need to know the position of all the radio buttons and rather than using actual coordinates, we will specify these numbers as global variables so we can easily change them if we need to.

var ctx1;
var radioOne = new Image();
var radioTwo = new Image();
var radioThree = new Image();
var radioFour = new Image();
var radioFive = new Image();
var radioSix = new Image();

//loading buttons into memory
radioOne.src = "../images/radioOff.png";
radioTwo.src = "../images/radioOff.png";
radioThree.src = "../images/radioOff.png";
radioFour.src = "../images/radioOff.png";
radioFive.src = "../images/radioOff.png";
radioSix.src = "../images/radioOff.png";

//add images into memory
var apple = new Image();
apple.src = "../images/apple.jpg";

//****** info about the radio buttons ***************
var spacing = 30;
var radioXPos = new Array;
var startPos = 70;
for (i=0; i<=5; i++) {
	radioXPos[i] = startPos+(i*spacing);
}
var radioSize = 21;
var radioYPos = 150;
var radioYbottom = radioYPos + radioSize;
	

When we look for the location of the mouse click, we will use the position variables we set above. Notice that the x position is stored in an array.

 //***********************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 >= radioXPos[0])&&(posX < radioXPos[0]+radioSize)&&(posY >= radioYPos)&&(posY < radioYbottom)) {
		selectRadio(1);
	} else if ((posX >= radioXPos[1])&&(posX < radioXPos[1]+radioSize)&&(posY >= radioYPos)&&(posY < radioYbottom)) {   
		selectRadio(2);
	} else if ((posX >= radioXPos[2])&&(posX < radioXPos[2]+radioSize)&&(posY >= radioYPos)&&(posY < radioYbottom)) {   
		selectRadio(3);
	} else if ((posX >= radioXPos[3])&&(posX < radioXPos[3]+radioSize)&&(posY >= radioYPos)&&(posY < radioYbottom)) {   
		selectRadio(4);
	} else if ((posX >= radioXPos[4])&&(posX < radioXPos[4]+radioSize)&&(posY >= radioYPos)&&(posY < radioYbottom)) {   
		selectRadio(5);
	} else if ((posX >= radioXPos[5])&&(posX < radioXPos[5]+radioSize)&&(posY >= radioYPos)&&(posY < radioYbottom)) {   
		selectRadio(6);
	} 
}

Once we figure out where the click is, we need to turn all other radio buttons off and turn on the one that is clicked. Then at the bottom, we add the correct number of apples.

//******************** turn radio buttons on/off *******************************
function selectRadio(radioNum) {
	
	if (radioNum==1) {
		turnAllradiosOff();
		radioOne.src = "../images/radioOn.png";
		ctx1.drawImage(radioOne, radioXPos[0], radioYPos, radioSize, radioSize);
		
	} else if (radioNum==2) {
		turnAllradiosOff();
		radioTwo.src = "../images/radioOn.png";
		ctx1.drawImage(radioTwo, radioXPos[1], radioYPos, radioSize, radioSize);
		
	} else if (radioNum==3) {
		turnAllradiosOff();
		radioThree.src = "../images/radioOn.png";
		ctx1.drawImage(radioThree, radioXPos[2], radioYPos, radioSize, radioSize);
		
	} else if (radioNum==4) {
		turnAllradiosOff();
		radioFour.src = "../images/radioOn.png";
		ctx1.drawImage(radioFour, radioXPos[3], radioYPos, radioSize, radioSize);
		
	} else if (radioNum==5) {
		turnAllradiosOff();
		radioFive.src = "../images/radioOn.png";
		ctx1.drawImage(radioFive, radioXPos[4], radioYPos, radioSize, radioSize);
		
	} else if (radioNum==6) {
		turnAllradiosOff();
		radioSix.src = "../images/radioOn.png";
		ctx1.drawImage(radioSix, radioXPos[5], radioYPos, radioSize, radioSize);	
	}
//add the apples
	for (i=0; i < radioNum; i++) {
		ctx1.drawImage(apple, (i * 50)+10, radioYPos+60, 50, 60);
	}
}

To turn all the other radio buttons off, just add the picture of the off radio button on top of the other image. To remove the apples, just draw a black box on top of them.

//******************** turn all buttons off *******************************
function turnAllradiosOff() {
	radioOne.src = "../images/radioOff.png";
	ctx1.drawImage(radioOne, radioXPos[0], radioYPos, radioSize, radioSize);
	radioTwo.src = "../images/radioOff.png";
	ctx1.drawImage(radioTwo, radioXPos[1], radioYPos, radioSize, radioSize);
	radioThree.src = "../images/radioOff.png";
	ctx1.drawImage(radioThree, radioXPos[2], radioYPos, radioSize, radioSize);
	radioFour.src = "../images/radioOff.png";
	ctx1.drawImage(radioFour, radioXPos[3], radioYPos, radioSize, radioSize);
	radioFive.src = "../images/radioOff.png";
	ctx1.drawImage(radioFive, radioXPos[4], radioYPos, radioSize, radioSize);
	radioSix.src = "../images/radioOff.png";
	ctx1.drawImage(radioSix, radioXPos[5], radioYPos, radioSize, radioSize);

//remove all apples
	ctx1.fillStyle="black";
	for (i=0; i<6; i++) {
		ctx1.fillRect((i * 50)+10, radioYPos+60, 50, 60);  
	}	
}

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