Страница 1 из 7

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

Добавлено: Вт окт 15, 2013 7:01 pm
Ivan
Написал тестовый модуль для вывода индикаторов
Снимок.JPG
Снимок.JPG (12.5 КБ) 17034 просмотра
Отличие от 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. Это пока тестовый модуль посему в нем нет устойчивости и безопасности

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

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

Добавлено: Вт окт 15, 2013 10:09 pm
Ivan
Пытался вставить как домашнюю страницу с 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>

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

Добавлено: Чт окт 17, 2013 8:41 pm
Ivan
Новая версия
1. 2 темплейта. (stick1b.tmpl, stick1c.tmpl)
2. Файл считывания данных. Дополнен датой последнего считывания
3. При наведении мыши на индикатор всплывает дата последнего считывания данных
Screen.PNG
Screen.PNG (12.54 КБ) 16947 просмотров
Температуры реальные. В доме нет 1 окна и отопления (Стройка)

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

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

Добавлено: Сб окт 19, 2013 9:08 pm
Ivan
Добавил ещё 2 темплейта и проверил на черном фоне
1.PNG
1.PNG (13.78 КБ) 16888 просмотров
-----
Следующая будет шкала и градусник
Ещё задумался сделать индикатор с картинками. Под лампочку или другой статус. Но в принципе на сценах итак все работает хорошо

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

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

Добавлено: Вт окт 22, 2013 6:45 pm
Ivan
Приятно поговорить с умным человеком :)

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

Внешне ничего не изменилось
screen.JPG
screen.JPG (41.96 КБ) 16777 просмотров
Зато инициализацию индикаторов придется изменить
В нужном месте отображения нужно вставить

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

<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 и подсветкой такого состояния - но я обещаю исправиться

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

Добавлено: Вт окт 22, 2013 9:36 pm
ser009
Вот идейка :idea:

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

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

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

Добавлено: Ср окт 23, 2013 9:39 am
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 был. Но думаю тоже не проблема сделать

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

Добавлено: Сб ноя 09, 2013 11:16 pm
ser009
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 был. Но думаю тоже не проблема сделать
Ха замечательно работает
спасибо
кстати по поводу всплывания графика тоже вариант
просто посмотреть что удобней

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

Добавлено: Сб ноя 09, 2013 11:28 pm
ser009
Вот еще мысль :idea:
можно добавить функцию, которая будет показывать уменьшается значение датчика или увеличивается.
можно стрелочкой "вверх" либо "вниз" или значком "+" или "-"

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

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

Добавлено: Вс ноя 10, 2013 9:47 am
Ivan
Ок. Только как сделать анализ по выборкам. За какой период брать предыдущую точку. Также как быть если в именно тот момент была яма или бугор. Короче нужно посмотреть как это у финансистов работает :)

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