Простые примеры Ajax, jQuery, JSON, Highstock - Форум обсуждения систем "Умный дом", проектов Ардуино, OpenWRT и других DIY устройств

electric · 21.09.2013, 18:42

Доброго времени суток всем...
Надеюсь я не ошибся темой, если что админ меня поправит...
Долго уже эксперементирую со всякими ардуинами, роутерами и пр... С железками наигрался, заказал себе на алли кучу всяких ништяков, сейчас получаю и играюсь с ними))
В веб-программировании, особенно в PHP и JAVA особо не силен, есть некоторые навыки в HTML. Обычно просто нахожу в инете похожие применения, чуть подкручиаю под себя и использую. На данном этапе все же не хватает знаний даже для "подкручивания". Поэтому был бы очень признателен коллегам по форуму, может кто сможет доступно "разжевать" или показать свои примеры с пояснениями...
Итак, на данном этапе пытаюсь на html страничке отобразить виджет - типа стрелочного прибора. Для начала взял, на мой взгляд, самый простой - justgage скрипт.
Есть БД MySQL на удаленном сервере куда каждые 10мин пишет данные (id, дата-время, температуры, давление, влажность) MR3020, который в свою очередь получает их от ардуины по порту UART. С этим разобрался...
На данный момент проблема с файлом-адаптером на php, который вызывается из HTML странички с входными параметрами типа id датчика и last=1 (последняя запись). Сейчас у меня скрипт-адаптер умеет запрашивать нужную запись из БД исходя из входных данных. Вот его содержание:

PHP код:


			
<?php

$sensorid = "";

$last = "";

include "connect_db.php"; //файл с параметрами подключеня к БД



if (isset($_GET['sensorid'])) $sensorid="".$_GET['sensorid'];

if (isset($_GET['last'])) $last="".$_GET['last'];



$query = mysql_query("SELECT ".$sensorid." FROM data ORDER BY id_data DESC LIMIT ".$last."");

if ($query)

{

    $res = mysql_fetch_array($query);

    $data = $res[0];

    echo ($data);

}

mysql_close($dbcnx);

?>

При вызове типа

Код:

http://site.ru/test1.php?last=1&sensorid=T1

скрипт выдает последние значение из таблицы БД в столбце "Т1".
Вот пример html странички с виджетом, найденной на просторах инета:

Код HTML:

<html>
  <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style>
      body {
        text-align: center;
      }
      #g1 {
        width:100px; height:80px;
        display: inline-block;
        margin: 1em;
      }
    </style>
    <script src="/js/jquery-1.10.2.min.js"></script>
    <script src="/js/raphael.2.1.0.min.js"></script>
    <script src="/js/justgage.1.0.1.min.js"></script>
    <script>
        $(function (){
        var g1 = new JustGage({
        id: "g1", 
        value: 20, 
        min: 0,
        max: 100,
        title: "Температура 1",
        label: "",  
        showMinMax: false,
      
        levelColors: ["#ff0000"],
        showInnerShadow: false,        
        startAnimationTime: 10,
        startAnimationType: "linear",
        refreshAnimationTime: 10,
        refreshAnimationType: "linear" 
        });
	});
</script>
</head>
 <body>  
<table border=1 width="250">
<tr>
<td>
    <div id="g1"></div><br>
</td>
</tr>
</table>
 </body>
</html>

И вот собственно вопрос, как вызвать скрипт-адаптер на PHP и передать данные JAVA скрипту?
Автор использует метод $.getJSON, но сейчас не посмотреть, его сайт чот в дауне.
Помню, что он использовал строчку в конце текста в теге виджета <script></script> типа g1.refresh( val[1]);, т.е. обновление данных.
Заранее спасибо всем откликнувшимся...

P.S. Пробовал пример нашего модератора andr128, описан тут и тут, но как прикрутить, не соображу))

UA6ATG · 21.09.2013, 19:22

А что Вы хотите получить? Вывести виджет на сайт? Так для этого есть более простые решение. Некоторые погодные сайта дают готовые решения, только данные им отсылай.

electric · 21.09.2013, 19:33

Цитата:

Сообщение от UA6ATG

А что Вы хотите получить? Вывести виджет на сайт? Так для этого есть более простые решение. Некоторые погодные сайта дают готовые решения, только данные им отсылай.

Ожидал такую фразу))
Согласен, можно было бы использовать narodmon, Cosm(Pachube) и прочие... Но мне интересен именно описанный выше вариант не ради результата - виждета, а ради тренировки чтоли, описание примера и общего понимания как это все работает, типа того))
Может кому пригодится в будущем...

svyaz · 22.09.2013, 01:47

Посмотрите пример с этого сайта

Я себе правда покрасивше Canvas индикаторы прикрутил (в архиве)

UA6ATG · 22.09.2013, 09:04

Ну все это можно сделать на стороне сервера только на php или вставляя цифры в картинку или по условию выбирать нужную картинку из каталога. Если хотите мое мнение, тут основная проблема в дизайне погодного виджета. Програмиское решение может быть простым и туповатым, как описал выше.

electric · 22.09.2013, 13:54

Немного разобрался.
На html страничке java-виджет отображающий последнюю запись из БД MySQL по конкретному датчику. БД называется weater, таблица data состоит из полей "id_data" auto increment, "dt", "T1", "T2", "T3", "P", "H". Виджет с помощью функции $.getJSON() обращается к php-адаптеру передавая ему входные данные - "sensorid" (код поля таблицы) и "last" (последняя запись). В ответ в формате json_encode() передается массив из {"sensorid":"T2","data":"37.56"}.
Скрипт-адаптер на PHP:

PHP код:


			
<?php

$sensorid = "";

$last = "";

include "connect_db.php"; //файл с параметрами подключеня к БД



if (isset($_GET['sensorid'])) $sensorid="".$_GET['sensorid'];

if (isset($_GET['last'])) $last="".$_GET['last'];



$query = mysql_query("SELECT ".$sensorid." FROM data ORDER BY id_data DESC LIMIT ".$last."");

if ($query)

{

    $res = mysql_fetch_array($query);

    $data = $res[0];

    $data = strval($data);

    $a["sensorid"] = $sensorid;

    $a["data"]   = $data;

}

mysql_close($dbcnx);

echo json_encode($a); //послать ответ браузеру

?>

Страричка html:

Код HTML:

<html>
  <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style>
      body {
        text-align: center;
      }
      
      #g1 {
        width:100px; height:80px;
        display: inline-block;
        margin: 1em;
      }
    </style>
    <script src="/js/jquery-1.10.2.min.js"></script>
    <script src="/js/raphael.2.1.0.min.js"></script>
    <script src="/js/justgage.1.0.1.min.js"></script>
    <script>
 var g1;
 window.onload = function(){
	var g1 = new JustGage({
	id: "g1", 
	value: 0, 
	min: 0,
	max: 100,
	title: "Sensor",
	});
 
	setInterval(function() {
		$.getJSON('http://site.ru/test.php?last=1&sensorid=T2', function(data) {
			$.each(data, function(key, val) {
			g1.refresh(val);
			});
		});
		}, 1000);
};      
</script>
</head>
 <body>  
<table border=1 width="250">
<tr>
<td>
    <div id="g1"></div><br>
</td>
</tr>
</table>
</body>
</html>

Разобрался с автообновлением виджета, раз в 10 сек, смотри код html.
Адаптация под себя - изменить настройки в файле connect_db.php и адрес запроса в функции $.getJSON() на путь к вашему файлу-адаптеру php.

andr128 · 23.09.2013, 15:46

Хорошая работа, особенно когда вы сами сделали

Sirocco · 03.03.2014, 17:44

А кто-нибудь подскажет, как прикрутить MySQL к highstock графику? Я написал парсер, он собирал и отправлял температуру в БД, а как вытащить на график - непонятно.
БД (имя "temperature", таблица "tempet-water") имеет структуру:
{mark} {date} {temper1}...{temper5}, где имя датчика, дата записи показания в БД, значение температур от 1 до 5 (пять датчиков).
Нужно сделать отображение на одном графике этих температур. Как понял, нужно как-то прокладку написать, чтоб php вытягивал всё из БД и передавал в highstock. Нагуглить ничего не смог, везде пишут что это настолько просто, что писать про это смысла нет.

stD · 03.03.2014, 20:27

Покажите пожалуйста пример, как разобрать строку полученую от файла PHP, на странице HTML ?

До этого момента делал так:

На HTML-странице нажимаю кнопку, в php отправляется запрос:

Цитата:

Ответ приходит в виде строки с данными:
24,25,13

И воводится на html-странице вот так:
<font color="#a79b95" size="4"><div id="infa"></div></font>
То есть одной строчкой.

Сейчас хочу данные от php (24,25,13) выводить в разных местах html-страницы.

Собственно вопрос, как данные полученые от php распихать по разным переменным?

То есть:

переменная1 = 24
переменная2 = 25
переменная3 = 13

stD · 04.03.2014, 14:15

Сам отвечу.

Цитата:

success: function(data)
{

var qs = data;
var vars = qs.split(",");
va = vars[5];
$("#infa").html(va);
$("#inf").html(vars[0]);

}

21.09.2013, 18:42	#1
electric Member Регистрация: 29.03.2013 Сообщений: 68 Вес репутации: 0	Простые примеры Ajax, jQuery, JSON, Highstock Доброго времени суток всем... Надеюсь я не ошибся темой, если что админ меня поправит... Долго уже эксперементирую со всякими ардуинами, роутерами и пр... С железками наигрался, заказал себе на алли кучу всяких ништяков, сейчас получаю и играюсь с ними)) В веб-программировании, особенно в PHP и JAVA особо не силен, есть некоторые навыки в HTML. Обычно просто нахожу в инете похожие применения, чуть подкручиаю под себя и использую. На данном этапе все же не хватает знаний даже для "подкручивания". Поэтому был бы очень признателен коллегам по форуму, может кто сможет доступно "разжевать" или показать свои примеры с пояснениями... Итак, на данном этапе пытаюсь на html страничке отобразить виджет - типа стрелочного прибора. Для начала взял, на мой взгляд, самый простой - justgage скрипт. Есть БД MySQL на удаленном сервере куда каждые 10мин пишет данные (id, дата-время, температуры, давление, влажность) MR3020, который в свою очередь получает их от ардуины по порту UART. С этим разобрался... На данный момент проблема с файлом-адаптером на php, который вызывается из HTML странички с входными параметрами типа id датчика и last=1 (последняя запись). Сейчас у меня скрипт-адаптер умеет запрашивать нужную запись из БД исходя из входных данных. Вот его содержание: PHP код: `<?php $sensorid = ""; $last = ""; include "connect_db.php"; //файл с параметрами подключеня к БД if (isset($_GET['sensorid'])) $sensorid="".$_GET['sensorid']; if (isset($_GET['last'])) $last="".$_GET['last']; $query = mysql_query("SELECT ".$sensorid." FROM data ORDER BY id_data DESC LIMIT ".$last.""); if ($query) { $res = mysql_fetch_array($query); $data = $res[0]; echo ($data); } mysql_close($dbcnx); ?>` При вызове типа Код: http://site.ru/test1.php?last=1&sensorid=T1 скрипт выдает последние значение из таблицы БД в столбце "Т1". Вот пример html странички с виджетом, найденной на просторах инета: Код HTML: <html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <style> body { text-align: center; } #g1 { width:100px; height:80px; display: inline-block; margin: 1em; } </style> <script src="/js/jquery-1.10.2.min.js"></script> <script src="/js/raphael.2.1.0.min.js"></script> <script src="/js/justgage.1.0.1.min.js"></script> <script> $(function (){ var g1 = new JustGage({ id: "g1", value: 20, min: 0, max: 100, title: "Температура 1", label: "", showMinMax: false, levelColors: ["#ff0000"], showInnerShadow: false, startAnimationTime: 10, startAnimationType: "linear", refreshAnimationTime: 10, refreshAnimationType: "linear" }); }); </script> </head> <body> <table border=1 width="250"> <tr> <td> <div id="g1"></div><br> </td> </tr> </table> </body> </html> И вот собственно вопрос, как вызвать скрипт-адаптер на PHP и передать данные JAVA скрипту? Автор использует метод $.getJSON, но сейчас не посмотреть, его сайт чот в дауне. Помню, что он использовал строчку в конце текста в теге виджета <script></script> типа g1.refresh( val[1]);, т.е. обновление данных. Заранее спасибо всем откликнувшимся... P.S. Пробовал пример нашего модератора andr128, описан тут и тут, но как прикрутить, не соображу)) Последний раз редактировалось electric; 21.09.2013 в 18:56.

03.03.2014, 17:44	#8
Sirocco Senior Member Регистрация: 12.10.2012 Адрес: Moscow-Voronezg Сообщений: 272 Вес репутации: 0	Re: Простые примеры Ajax, jQuery, JSON, Highstock А кто-нибудь подскажет, как прикрутить MySQL к highstock графику? Я написал парсер, он собирал и отправлял температуру в БД, а как вытащить на график - непонятно. БД (имя "temperature", таблица "tempet-water") имеет структуру: {mark} {date} {temper1}...{temper5}, где имя датчика, дата записи показания в БД, значение температур от 1 до 5 (пять датчиков). Нужно сделать отображение на одном графике этих температур. Как понял, нужно как-то прокладку написать, чтоб php вытягивал всё из БД и передавал в highstock. Нагуглить ничего не смог, везде пишут что это настолько просто, что писать про это смысла нет. Последний раз редактировалось Sirocco; 03.03.2014 в 17:48.

21.09.2013, 19:22	#2
UA6ATG Member Регистрация: 27.08.2013 Сообщений: 63 Вес репутации: 0	А что Вы хотите получить? Вывести виджет на сайт? Так для этого есть более простые решение. Некоторые погодные сайта дают готовые решения, только данные им отсылай.

22.09.2013, 09:04	#5
UA6ATG Member Регистрация: 27.08.2013 Сообщений: 63 Вес репутации: 0	Ну все это можно сделать на стороне сервера только на php или вставляя цифры в картинку или по условию выбирать нужную картинку из каталога. Если хотите мое мнение, тут основная проблема в дизайне погодного виджета. Програмиское решение может быть простым и туповатым, как описал выше.

23.09.2013, 15:46	#7
andr128 Senior Member Регистрация: 16.09.2012 Адрес: Irkutsk Сообщений: 555 Вес репутации: 1605	Хорошая работа, особенно когда вы сами сделали

Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)