Индикаторы на HTML5+AJAX

Ivan · Сообщение **Ivan** » Вт окт 15, 2013 7:01 pm

Написал тестовый модуль для вывода индикаторов

: Снимок.JPG (12.5 КБ) 16997 просмотров

Отличие от s.php :
1. Отрисовка на стороне клиента при помощи HTML5->Canvas
2. Обновление через заданное время AJAX

Достоинства:
1. Не нагружает сервер за счёт перекладывания отрисовки на сторону клиента (Актуально для слабых компьютером типа Raspery и точек доступа)
2. Уменьшает потребляемый трафик, за счёт передачи только данных температуры в текстовом виде /pChart/?op=value&p=%objprop% (Актуально для узких каналов данных типа GPRS)
3. Применены файлы темплейтов что позволяет делать большое количество разнообразных индикаторов не меняя основной код
4. Добавлена функция авто генерации кода - Что позволяет добавить индикатор 1 строчкой

Недостатки:
1. Не работает в старых браузерах которые не поддерживают HTML5->Canvas
2. Не работает в старых браузерах которые не поддерживают AJAX

Как эти пользоваться (пример есть в test_s2.php)
1. Распаковать архив в корень сайта
2. Добавить индикатор

Код: Выделить всё

<?php
  include_once "./s2/stick.php";
  NewStick('ts1', 'stick1a', 'ts_attic.temp', 'Улица', 30000);
  NewStick('ts2', 'stick1a', 'ts_office.temp', 'Кабинет', 30000);
?>

Параметры функции:
1. contid - Идентификатор - Уникальное имя делает суффикс функциям и переменным
2. stype - Темплейт - Тип индикатора. Пока сделан 1 тип stick1a
3. objprop - Объект.Свойство
4. title - Pfujkjdjr
5. refreshtime - Время обновления в миллисекундах (если поставить 0 - 5 мин по умолчанию)
6. measure - Единица измерения

PS. Это пока тестовый модуль посему в нем нет устойчивости и безопасности

Очень люблю критику и предложения

Ivan · Сообщение **Ivan** » Вт окт 15, 2013 10:09 pm

Пытался вставить как домашнюю страницу с html кодом. И не получилось. PHP туда не лезит. Сделал через url

Код: Выделить всё

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<script type="text/javascript" src="/jquerymobile/jquery-1.8.3.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/scripts.js"></script>
<script language="javascript" type="text/javascript" src="/js/jquery-ui-1.9.1.custom.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/jquery.gritter.js"></script>
<script language="javascript" type="text/javascript" src="/js/jWindow.js"></script>
</head>
<body>
<?php
  include_once "./s2/stick.php";
 
  NewStick('ts1', 'stick1a', 'ts_bedroom.temp', 'Спальня', 30000);
  NewStick('ts2', 'stick1a', 'ts_nursery.temp', 'Детская', 30000);
  NewStick('ts3', 'stick1a', 'ts_office.temp', 'Кабинет', 30000);
  NewStick('ts4', 'stick1a', 'ts_attic.temp', 'Чердак', 30000);  
?>
</body>
</html>

Ivan · Сообщение **Ivan** » Чт окт 17, 2013 8:41 pm

Новая версия
1. 2 темплейта. (stick1b.tmpl, stick1c.tmpl)
2. Файл считывания данных. Дополнен датой последнего считывания
3. При наведении мыши на индикатор всплывает дата последнего считывания данных

: Screen.PNG (12.54 КБ) 16910 просмотров

Температуры реальные. В доме нет 1 окна и отопления (Стройка)

--------------------
Так и не получил ответа как вставить php в домашнюю страницу? Вместо этого использую test_s2.php

Ivan · Сообщение **Ivan** » Сб окт 19, 2013 9:08 pm

Добавил ещё 2 темплейта и проверил на черном фоне

: 1.PNG (13.78 КБ) 16851 просмотр

-----
Следующая будет шкала и градусник
Ещё задумался сделать индикатор с картинками. Под лампочку или другой статус. Но в принципе на сценах итак все работает хорошо

Жду предложений
-----
Так никто и ответил как в домашнюю страницу вставить код PHP?

Ivan · Сообщение **Ivan** » Вт окт 22, 2013 6:45 pm

Приятно поговорить с умным человеком

А нафига козе PHP подумал я и убрал его из своего модуля. Теперь инициализация идет прямо в JAVA (что привело к смене кода на странице. Хотя обещал не менять), Также в прошлых версиях дублировался код что есть неправильный подход к программированию и я применил классы, ну а чтобы было ещё лучше наследование. Теперь чтобы сделать темплейт вам нужно всего лишь заменить функцию DRAW

Внешне ничего не изменилось

: screen.JPG (41.96 КБ) 16740 просмотров

Зато инициализацию индикаторов придется изменить
В нужном месте отображения нужно вставить

Код: Выделить всё

<canvas id="ts11" width="100" height="100">Canvas not supported</canvas>

В начале странички нужно вставить, и строку библиотеки AJAX

Код: Выделить всё

<script language="javascript" type="text/javascript" src="/s2/s2.js"></script>
<script type="text/javascript" src="/jquerymobile/jquery-1.8.3.min.js"></script>

И ниже нужные вам темплейты

Код: Выделить всё

<script language="javascript" type="text/javascript" src="/s2/stick1a.js"></script>
<script language="javascript" type="text/javascript" src="/s2/stick1b.js"></script>
<script language="javascript" type="text/javascript" src="/s2/stick1c.js"></script>

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

Ну и в конце блок создания объектов индикаторов

Код: Выделить всё

<script type="text/javascript"><!--
new Stick1a('ts11', 'ts_bedroom.temp', 'Спальня', 5000, '°'); 
new Stick1b('ts12', 'ts_nursery.temp', 'Детская', 5000, '°'); 
new Stick1c('ts13', 'ts_office.temp', 'Кабинет', 5000, '°');
// --></script>

P.S. Прошу прощения у создателя (движка конечно). Мои индикаторы не перекрывают тот функционал что настоящие, т.к. у них нет проверки выходов за MIN/MAX и подсветкой такого состояния - но я обещаю исправиться

ser009 · Сообщение **ser009** » Вт окт 22, 2013 9:36 pm

Вот идейка

У меня планируется сенсорная панель.

Если твои индикаторы сделать кнопочкой для вывода информации по нажатию, например графика по данному датчику?

Ivan · Сообщение **Ivan** » Ср окт 23, 2013 9:39 am

Зачем изобретать. Используйте то что есть

Код: Выделить всё

<a href="/s2/grapsh.php?p=ts_bedroom.temp" target="_blank">
 <canvas id="ts11" width="100" height="100">Canvas not supported</canvas>
</a>

И добавить ещё файлик grapsh.php - Тот же пример с highcharts с изменением "обекта.свойства" из запроса.

Другое дело если сделать чтобы график на той же странице в плавающем div был. Но думаю тоже не проблема сделать

ser009 · Сообщение **ser009** » Сб ноя 09, 2013 11:16 pm

Ivan писал(а):Зачем изобретать. Используйте то что есть
Код: Выделить всё
<a href="/s2/grapsh.php?p=ts_bedroom.temp" target="_blank">
 <canvas id="ts11" width="100" height="100">Canvas not supported</canvas>
</a>
И добавить ещё файлик grapsh.php - Тот же пример с highcharts с изменением "обекта.свойства" из запроса.

Другое дело если сделать чтобы график на той же странице в плавающем div был. Но думаю тоже не проблема сделать

Ха замечательно работает
спасибо
кстати по поводу всплывания графика тоже вариант
просто посмотреть что удобней

ser009 · Сообщение **ser009** » Сб ноя 09, 2013 11:28 pm

Вот еще мысль

можно добавить функцию, которая будет показывать уменьшается значение датчика или увеличивается.
можно стрелочкой "вверх" либо "вниз" или значком "+" или "-"

посмотрел значение параметра и сразу увидел увеличивается он или уменьшается без просмотра графика (допустим ту же самую температуру)

Ivan · Сообщение **Ivan** » Вс ноя 10, 2013 9:47 am

Ок. Только как сделать анализ по выборкам. За какой период брать предыдущую точку. Также как быть если в именно тот момент была яма или бугор. Короче нужно посмотреть как это у финансистов работает

Я ещё никак не найду время сделать градусник, и Во все индикаторы добавить раскраску при Min/Max

Индикаторы на HTML5+AJAX

Индикаторы на HTML5+AJAX

Re: Индикаторы на HTML5+AJAX

Re: Индикаторы на HTML5+AJAX

Re: Индикаторы на HTML5+AJAX

Re: Индикаторы на HTML5+AJAX

Re: Индикаторы на HTML5+AJAX

Re: Индикаторы на HTML5+AJAX

Re: Индикаторы на HTML5+AJAX

Re: Индикаторы на HTML5+AJAX

Re: Индикаторы на HTML5+AJAX