21.09.2013, 18:42 | #1 |
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 код:
Код:
http://site.ru/test1.php?last=1&sensorid=T1 Вот пример 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> Автор использует метод $.getJSON, но сейчас не посмотреть, его сайт чот в дауне. Помню, что он использовал строчку в конце текста в теге виджета <script></script> типа g1.refresh( val[1]);, т.е. обновление данных. Заранее спасибо всем откликнувшимся... P.S. Пробовал пример нашего модератора andr128, описан тут и тут, но как прикрутить, не соображу)) Последний раз редактировалось electric; 21.09.2013 в 18:56. |
21.09.2013, 19:22 | #2 |
Member
Регистрация: 27.08.2013
Сообщений: 63
Вес репутации: 0 |
А что Вы хотите получить? Вывести виджет на сайт? Так для этого есть более простые решение. Некоторые погодные сайта дают готовые решения, только данные им отсылай.
|
21.09.2013, 19:33 | #3 | |
Member
Регистрация: 29.03.2013
Сообщений: 68
Вес репутации: 0 |
Цитата:
Согласен, можно было бы использовать narodmon, Cosm(Pachube) и прочие... Но мне интересен именно описанный выше вариант не ради результата - виждета, а ради тренировки чтоли, описание примера и общего понимания как это все работает, типа того)) Может кому пригодится в будущем... |
|
22.09.2013, 09:04 | #5 |
Member
Регистрация: 27.08.2013
Сообщений: 63
Вес репутации: 0 |
Ну все это можно сделать на стороне сервера только на php или вставляя цифры в картинку или по условию выбирать нужную картинку из каталога. Если хотите мое мнение, тут основная проблема в дизайне погодного виджета. Програмиское решение может быть простым и туповатым, как описал выше.
|
22.09.2013, 13:54 | #6 |
Member
Регистрация: 29.03.2013
Сообщений: 68
Вес репутации: 0 |
Немного разобрался.
На 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 код:
Код 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> Адаптация под себя - изменить настройки в файле connect_db.php и адрес запроса в функции $.getJSON() на путь к вашему файлу-адаптеру php. Последний раз редактировалось electric; 22.09.2013 в 14:31. |
23.09.2013, 15:46 | #7 |
Senior Member
Регистрация: 16.09.2012
Адрес: Irkutsk
Сообщений: 555
Вес репутации: 1604 |
Хорошая работа, особенно когда вы сами сделали
|
03.03.2014, 17:44 | #8 |
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. |
03.03.2014, 20:27 | #9 | |
Senior Member
Регистрация: 02.04.2012
Адрес: Питер
Сообщений: 1,125
Вес репутации: 1311 |
Re: Простые примеры Ajax, jQuery, JSON, Highstock
Покажите пожалуйста пример, как разобрать строку полученую от файла 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 |
|
04.03.2014, 14:15 | #10 | |
Senior Member
Регистрация: 02.04.2012
Адрес: Питер
Сообщений: 1,125
Вес репутации: 1311 |
Re: Простые примеры Ajax, jQuery, JSON, Highstock
Сам отвечу.
Цитата:
|
|
Здесь присутствуют: 1 (пользователей: 0 , гостей: 1) | |
|
|