Как это сделать. Я, для экспериментов, создал копию папки pChart и назвал её pChart2. К графикам можно обращаться
<img src="/pChart2/?p=
а к живым индикаторам
<img src="/pChart/?p=
Все изменения вносятся в файл pChart\index.php. Делать две папки pChart и pChart2 не обязательно. Просто так проще, а в будущем можно всё совместить в одном файле index.php.
В чём секрет? Оказывается, если обновлять графики через изменение параметров вызова графика, то график на страничке «дёргается», а если через метатег
<meta http-equiv=refresh content=10>
, то обновляется плавно. А чтобы не передавать значения элементу через параметры вызова графика нужно получать значения через SQL запрос в файле index.php, т. е. как бы «изнутри» pCart. Тогда это становится возможным.
Рассмотрим пример создания «живого» термометра.
Элементов может быть много, поэтому сначала отлавливаем из вызова тип элемента.
Код: Выделить всё
if ($_GET['objt']=='generic') {
$objtype = "generic";
} elseif ($_GET['objt']=='therm1') {
$objtype = "therm1";
} elseif ($_GET['objt']=='therm2') {
$objtype = "therm2";
} elseif ($_GET['objt']=='sensors1') {
$objtype = "sensors1";
} elseif ($_GET['objt']=='sensors2') {
$objtype = "sensors2";
} else {
}
Вызов &objt=therm1
Затем отлавливаем из вызова RGB-составляющие активного состояния (ca-color active) RGB (cp-color passive). Так можно сделать индикацию любого цвета. По умолчанию active – красный, passive – серый. Вызов, например, &caR=230&caG=60&caB=30.
Код: Выделить всё
if ($_GET['caR']) {
$caR=$_GET['caR'];
} else {
$caR=230;
}
if ($_GET['caG']) {
$caG=$_GET['caG'];
} else {
$caG=100;
}
if ($_GET['caB']) {
$caB=$_GET['caB'];
} else {
$caB=100;
}
if ($_GET['cpR']) {
$cpR=$_GET['cpR'];
} else {
$cpR=100;
}
if ($_GET['cpG']) {
$cpG=$_GET['cpG'];
} else {
$cpG=100;
}
if ($_GET['cpB']) {
$cpB=$_GET['cpB'];
} else {
$cpB=100;
}
Рисуем градусник. Тут есть маленький момент. Нужно знать ID датчика в таблице pvalues. Я просто посмотрел в самой таблице (у меня это оказалось .ID='65'), но это не очень правильный подход. Так же здесь нет проверки на ошибки SQL запроса.
Код: Выделить всё
if ($objtype == "therm1") {
$wi=130;
$hi=296;
$t1bg=255;
$Test = new pChart($wi,$hi);
$Test->setColorPalette(0,100,140,220);
$Test->setFontProperties("./pChart/Fonts/tahoma.ttf",8);
$Test->setGraphArea(0,0,$wi,$hi);
// Background
$Test->drawBackground($t1bg,$t1bg,$t1bg);
// SQL q
$qTempStreet=SQLSelectOne("SELECT * FROM pvalues WHERE pvalues.ID='65'");
$TempStreetValue=$qTempStreet[VALUE];
// Body
$Test->drawFilledRoundedRectangle(23,0,72,250,10,200,200,200); // gray/body
$Test->drawFilledCircle(48,250,45,200,200,200,0); // circle gray/body
$Test->drawFilledRectangle(38,30,58,230,240,240,240,FALSE,100); // white
// Marks
$Test->drawLine(32,40,64,40,150,150,150,FALSE);
$Test->drawLine(32,80,64,80,150,150,150,FALSE);
$Test->drawLine(32,120,64,120,150,150,150,FALSE);
$Test->drawLine(32,160,64,160,150,150,150,FALSE);
$Test->drawLine(32,200,64,200,150,150,150,FALSE);
// Limits
$Test->setFontProperties("./pChart/Fonts/tahoma.ttf",14);
$Test->drawTextBox(90,20,140,60,"30"."°",0,255,100,100,ALIGN_LEFT,FALSE,-1,-1,-1,100);
$Test->drawTextBox(90,110,140,130,"0"."°",0,100,100,100,ALIGN_LEFT,FALSE,-1,-1,-1,100);
$Test->drawTextBox(80,190,140,210,"-30"."°",0,100,100,255,ALIGN_LEFT,FALSE,-1,-1,-1,100);
// Color temp
if ($TempStreetValue > 0) {
$tcR=$caR; $tcG=$caG; $tcB=$caB;
} else {
$tcR=130; $tcG=160; $tcB=230;
}
$Test->drawFilledCircle(48,250,30,$tcR,$tcG,$tcB,0); // red/blue
$Test->drawFilledRectangle(38,120-$TempStreetValue*2.7,58,230,$tcR,$tcG,$tcB,FALSE,100); // red/blue
// Current temp
$Test->setFontProperties("./pChart/Fonts/tahoma.ttf",16);
$Test->drawTextBox(32,240,50,260,"$TempStreetValue"."°",0,255,255,255,ALIGN_LEFT,FALSE,-1,-1,-1,100);
$Test->setFontProperties("./pChart/Fonts/tahoma.ttf",8);
} elseif ($objtype == "therm2") {
} elseif ($objtype == "sensors1") {
} elseif ($objtype == "generic") {
} elseif ($objtype == "sensors3") {
} elseif ($objtype == "sensors4") {
} elseif ($objtype == "sensors5") {
} else {
} // end of ($objtype == " ")
Что не сделано. Значения на термометре просто нарисованы, а должны передаваться в параметрах. Алгоритм рисования столбика должен учитывать эти значения.
Пример вызова
<img src="/pChart/?p=tempStreet.temp&objt=therm1&caR=130&caG=160&caB=230&type=1h&title= &width=280&height=610&unit= &gcolor=blue">
Вот и всё. Теперь вы можете нарисовать любой индикатор, какой вам нужен.
P.S.
Браузер в Андроид 2 и 3 не обращает внимание на метатег <meta http-equiv=refresh content=10>, он просто кеширует первую картинку и дальше показывает её из кеша.
ИЕ 8 обновляет страничку слегка дёргаясь.
