[ Top page ]

Main | Perl database (tie) generation from text »

Web

Circular layout of radio buttons to a Web page using Perl

Sometimes it is necessary to layout radio buttons freely on a Web page. I once performed an experiment, in which I asked the human subjects to answer the sound direction and distance after hearing a spatialized sound. For this purpose, I used a Web page that contained radio buttons. The subjects answered by clicking one of the buttons. This method enables free layout of buttons, e.g., circular or any other layout, but the layout must be decided carefully not to overlay them with other contents. So, when it is possible to layout the buttons in an easier method, for example by a table, this method should not be used.

+










You can see the source code of this page, a radio button is basically represented by an HTML tag such as the one below.

<div style="position:absolute; left:xcoordinate px; top:ycoordinate px;">button</div>

Because the coordinates are specified by pixel, the location of a button does not move when changing other contents, such as the font size of the characters, so it may overlap with other contents. In the case of this page, I added extra white space not to overlap, but still they may overlap under some conditions.

An example of a Perl CGI program that generates a page with such a radio button. I had to write a more complicated program for the experiment, but a much more simpler program is shown here.



#!/usr/bin/perl	--	# -*-Perl-*-
############################################################################
#
#	Print radio button circle
#
############################################################################

use strict;


### print_button_circle($tableName, $y0, $value)
#   print a radio button array
#
sub print_button_circle($$$) {
    my ($tableName, $y0, $value) = @_;
    my $factor = 40;
    my $roomSize = $factor * 5;
    my $Pi = 3.1416;

    # Display center of the circle
    my $x = $factor * 2.25 + 13;
    my $y = $factor * 2.25 + $y0 - 3;
    print "<div style=\"position:absolute; left:${x}px; top:${y}px;\">";
    print "+</div>\n";

    # Display radio buttons
    my $distance = 1;
    for (my $angle = 1; $angle <= 12; $angle++) {
	my $r = $factor * $distance;
	my $displacement = $factor * (2.25 - $distance);
	my $x = int($r * (1 + cos($Pi*($angle-1)/6))) + $displacement + 8;
	my $y = int($r * (1 + sin($Pi*($angle-1)/6))) + $displacement + $y0;
	my $checked = $value eq $angle ? 'checked="checked" ' : "";
	print "<div style=\"position:absolute; left:${x}px; top:${y}px;\">";
	print "<input type=\"radio\" name=\"${tableName}\" ";
	print "value=\"${angle}\" ${checked}/></div>\n";
    };
}


#===========================================================================
#	Main program
#===========================================================================

print<<END;
Content-type: text/html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PULIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml"" xml:lang="ja" lang="ja">
<head>
<title>Title</title>
<meta HTTP-EQUIV=CONTENT-TYPE CONTENT="text/html; charset=UTF-8" />
</head>
<body>

<h1>Header</h1>

<form id="form" action="" method="get">
END

print_button_circle("A", 220, 1);

print<<END;
</form>
</body>
</html>
END

1;
Keywords:

TrackBack

TrackBack URL for this entry:
http://www.kanadas.com/mt/mt-tb.cgi/1644

Post a comment

About

This page contains a single entry from the blog posted on November 16, 2007 12:20 AM.

Many more can be found on the main index page or by looking through the archives.

Creative Commons License
This weblog is licensed under a Creative Commons License.
Powered by
Movable Type 3.36