Графическое отображение переменной из формы

rasebor

Новичок
Графическое отображение переменной из формы

В упрощенном виде моя задача сводится к параллельному выводу цифрового значения из формы, и графической шкалы, иллюстрирующей качество этого значения: длина шкалы согласно значению, и ее цвет взависимости от условий.

Форма:


Код:
[SIZE=2]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Diagramm</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
BODY {margin: 100px 0 0 150px;}
TD {height: 30px; padding-left: 5px; border: 1px solid black;}
</style>
</head>

<body>

<form action="form.php" method="post">

<table width="400">
<tr>
<td>Введите число меньше 100:</td>
<td width="30"><input type="Text" size="2" name="nomer"></td>
<td width="110">&nbsp(точка с запятой)</td>
</tr>
</table>

<p><input type="Submit" value="Обработать">

</form>

</body>
</html>
[/SIZE]

Если прицепить следующий файл form.php, то будет выведена таблица с введенным значением, и пустой ячейкой справа:

Код:
[SIZE=2]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Diagramm</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
BODY {margin: 100px 0 0 150px;}
TD {height: 30px; padding-left: 5px; border: 1px solid black;}
</style>
</head>

<body>
[PHP]<?php $widhtf = $_POST['nomer']; ?>[/PHP] 
<table width="400">
<tr>
<td>Результат:</td>
<td width="30">[PHP]<?php echo $widhtf; ?>[/PHP]</td>
<td width="110">&nbsp(точка с запятой)</td>
</tr>
</table>

</body>
</html>
[/SIZE]

А в пустую ячейку мне очень хочется поместить шкалу с длиной согласно значению, и цвету по условиям. Если прицепите к форме такой файл form.php - увидите:

PHP:
<?php

if ($_POST['nomer'] == 0) { $nomer = 1; }
else { $nomer = $_POST['nomer']; }
//echo $nomer;
//exit;

// Шкала
$myImage = imagecreate($nomer, 20);
if ($_POST['nomer'] < 20) {
$myColor = imagecolorallocate($myImage,0,0,255);
}
	else if ($_POST['nomer'] < 50) {
	$myColor = imagecolorallocate($myImage,0,255,0);
	}
	else if ($_POST['nomer'] < 100) {
	$myColor = imagecolorallocate($myImage,255,0,0);
	}
	else {
	$myColor = imagecolorallocate($myImage,0,0,255);
	}
imagerectangle($myImage,0,0,$nomer,20,$myColor);
header("Content-type: image/png");
imagepng($myImage);
imagedestroy($myImage);

?>
Буду признателен, если подскажете, как мне эту шкалу вставить в результат обработки формы.

* Вообще-то изначально я не собирался делать шкалу графической, а использовать DIV с переменной длиной и изменяемым уветом фона. Но не нашел, как это сделать, и возможно ли это в принципе.
 

AmdY

Пью пиво
Команда форума
делай тег img в src путь к скрипту, а данные передвай гетом
 

dimagolov

Новичок
для градусников есть более простое решение:
background-image который позиционируем внутри div-а в зависимости от того %, который хотим отобразить.
 

rasebor

Новичок
Автор оригинала: dimagolov
для градусников есть более простое решение:
background-image который позиционируем внутри div-а в зависимости от того %, который хотим отобразить.
Можно кусочек кода? Я в РНР практически ноль. Хоть понять о чем речь идет, и куда читать. Если я правилльно понял, предлагается не ширину изображения менять, а просто позиционировать его через стили. Так? Но как быть с изменением цвета?

* А возможно обойтись вообще без рисунка, задав DIV-у переменные параметры в скрипте?
 

dimagolov

Новичок
rasebor, тут вообще не php, а html.

Имеем:
1. div с фоном какого-то цвета
2. у него backgroundImage, который изображает градусник, вернее его показания. то есть это в простейшем случае квадрат нужного цвета не меньше, чем div, в не простейшем можно текстуру наложить. он статический, так, если кто еще не понял.

Задача: спозиционировать backgroundImage так, чтобы он покрывал нужную часть div.

п.с. Есть нюанс в том, что backgroundImage позиционируется не относительно элемента, которому приписан, а относительно document.body. То ли всегда, то ли только при абсолютном позиционировании "хозяина", но факт в том, что я натра%ался не слабо, пока сообразил почему backgroundImage прописан, а не виден.

п.п.с. ман: http://www.w3schools.com/css/css_background.asp

-~{}~ 13.11.08 16:42:

для особых эстетов в диве можно текст спозиционировать по центру и прописать кол-во процентов (получится поверх градусника).

можно позиционировать текст не по центру дива, а по центру градусника и отображать только тогда, когда видимый градусник шире текста.

в общем поле для фантазии бесконечное и никакой динамической генерации картинок
 

rasebor

Новичок
dimagolov, с позиционированием мне понятно как раз. В статике.
Мне непонятно - как задать параметры позиционирования и цвет взависимости от введенного в форму значения.

Вот, к примеру, такой:

Код:
[SIZE=2]<div style="position: absolute; left: 200px; top: 200px; width: 200px; height: 20px; background: red;"></div>[/SIZE]
Как статическое значение динамическим сделать?
 

dimagolov

Новичок
rasebor, ты когда отображать хочешь? после отправки формы или в процессе ее заполнения ее юзером?

если первое, то смотришь на полученные значения php и высчитываешь какое background-position прописать.

если второе, то то же самое, только JS-ом
 

rasebor

Новичок
Автор оригинала: dimagolov
rasebor, ты когда отображать хочешь? после отправки формы или в процессе ее заполнения ее юзером?

если первое, то смотришь на полученные значения php и высчитываешь какое background-position прописать.

если второе, то то же самое, только JS-ом
После отправки. Вот форма: http://any.optics-chemical.com/form_pict.html
Чел вводит значение (на самом деле все гораздо сложнее), и в появившейся странице, в правом столбце должна автоматически сгенерироваться шкала.

-~{}~ 14.11.08 00:45:

Хочется что-то вроде:

PHP:
<?php $width = 50; ?>
Код:
<div stile="width: <?php $width; ?>, height: 20px;"><div>
-~{}~ 14.11.08 00:49:

Йес! Получилось!

Код:
<div stile="width: <?php $width; ?>[B][COLOR=red]px[/COLOR][/B], height: 20px;"><div>
Всего лишь px не дописал)

-~{}~ 14.11.08 01:22:

То, что хотел. Ха!

http://any.optics-chemical.com/form_pict.html

Спасибо всем!
 

rasebor

Новичок
Оно там есть, конечно! В посте забыл прописать.

-~{}~ 21.11.08 01:36:

Косяк с IE6!

Как оказалось - этот нехороший броузер не воспиримает высоту DIV-а, если она меньше 20px. Поэтому шкала отображается высотой 20px, даже если поставишь 3px.

Выход - использовать вместо DIV - TABLE. Получается такой код:

Код:
<table><tr><td style="width: <?php echo $sum11; ?>px; height: 12px; border: 0; background: <?php echo $com11; ?>;"></td></tr></table>
 

newARTix

Новичок
этот нехороший броузер не воспиримает высоту DIV-а, если она меньше 20px
если у тебя в диве текст (пробел, перенос строки), то высота дива не может быть меньше line-height которая, если не указана явно, зависит от font-size.
Впрочем это оффтоп.
 

rasebor

Новичок
Я просто забыл упомянуть, что речь - о "чистом" блоке.

Товарищи модераторы! Дайте мне отредактировать свой пост ! Ну пожалуйста!

ЗЫ: Свой пост ведь, не чужой..

Сорри за оффтоп
 
Сверху