Живые индикаторы на pChart

[Alex]

Живые индикаторы на pChart.

(тестировалось в Firefox, в других браузерах могут быть проблемы)

Оказывается с помощью pChart можно создавать живые (динамические) индикаторы и графические элементы. Любые. Можно нарисовать всё, что угодно, например градусник, котёл или стрелочный индикатор и индикатор будет «живой», т.е махать стрелкой и мигать светодиодами. Пока всё это находится в состоянии эксперимента, но прототип реально работает.

[Alex]

Как это сделать. Я, для экспериментов, создал копию папки 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 обновляет страничку слегка дёргаясь.

[Vit]

симпотично))
сделал папку с 2
что в файл нужно добавить? не совсем понял

[Alex]

В index.php закомментировать всё, начиная с $Test = new pChart... до конца, оставив только три строчки в самом конце.

header...
imagepng...
$db->Disconnect...

На закомментированное место вставляете код как он идёт в моём посте по порядку.

Вызываете как обычно

<img src="/pChart/?p=tempStreet.temp&objt=therm1&caR=130&caG=160&caB=230&type=1h&title= &width=280&height=610&unit= &gcolor=blue">

, не забыв добавить на домашнюю страницу

<meta http-equiv=refresh content=10>

в самом начале. 10 - это период автообновления. Не перепутайте в вызове pChart и pChart2 (где графики, а где элементы).

[Vit]

В index.php закомментировать всё, начиная с $Test = new pChart... до конца, оставив только три строчки в самом конце.

header...
imagepng...
$db->Disconnect...

На закомментированное место вставляете код как он идёт в моём посте по порядку.

Вызываете как обычно

<img src="/pChart/?p=tempStreet.temp&objt=therm1&caR=130&caG=160&caB=230&type=1h&title= &width=280&height=610&unit= &gcolor=blue">

, не забыв добавить на домашнюю страницу

<meta http-equiv=refresh content=10>

в самом начале. 10 - это период автообновления. Не перепутайте в вызове pChart и pChart2 (где графики, а где элементы).

пустая страница...может картинку какую нужно подсовывать?

[Alex]

Вот мой рабочий файл index.php

TempStreet _в_ вызове_ графика_ надо заменить на название вашего датчика. Ещё нужно в таблице pvalues посмотреть ID вашего датчика и заменить мои 65 на ID вашего датчика.

И ещё раз — не перепутайте pCart и pCart2.

[BATONS]

Alex
Спасибо Вам за проделанную работу, очень здорово у Вас получилось.
наконец-то программа начала потихоньку обрастать "живыми графиками и индикаторами"

[Alex]

Всегда пожалуйста.

[Vit]

Alex, спасибо, вывел индикатор на основе вашего файла исправленного..


немного в темной схеме цвета некрасиво, но это уже мелочь....


спасибо за помощь)

[Alex]

Теперь можно делиться своими «виджетами».