[ トップページ ]

メイン | テキストからの Perl データベース (tie) 生成 »

Web

Perl による Web ページへのラジオボタン円形配置

Web ページ上にラジオボタンを自由に配置したいことがある. 私のばあいは,被験者に立体音をきいてもらってその音源方向や距離をあててもらうときに,結果を Web ページ上にならべた,つぎのようなラジオボタンのうちのひとつをクリックして,こたえてもらった. この方法をつかうとボタンを円形にかぎらず自由に配置できるかわりに,おなじページの他のコンテンツとかさならないように,配置を慎重にきめる必要がある. したがって,他の方法たとえば表などをつかって容易に配置できる形状のときはつかわないほうがよいとかんがえられる.

+










このページのソースをみてみればわかるが,基本的にはつぎのような HTML タグによってひとつのラジオボタンが表現される.

<div style="position:absolute; left:x座標px; top:y座標px;">ボタン</div>

座標はピクセル単位で指定するため,フォントサイズなどをかえても位置はかわらず,他のコンテンツとかさなる危険がある. このページのばあい,余白を余計にとることによって,できるだけかさならないようにしているが,条件によってはやはりかさなる.

以下,このようなラジオボタンをふくむページを生成する Perl CGI プログラムの例をしめす. 実験につかうためにはもうすこし,くふうが必要だったが,ここではプログラムをなるべくかんたんにしている.



#!/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:

トラックバック

このエントリーのトラックバックURL:
http://www.kanadas.com/mt/mt-tb.cgi/1627

コメントを投稿

このページについて

2007-11-14 20:18 に投稿されたエントリーのページです。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。

Creative Commons License
このブログは、次のライセンスで保護されています。 クリエイティブ・コモンズ・ライセンス.
Powered by
Movable Type 3.36