Оформление HTML страницы
- Войдите на сайт для отправки комментариев
Мужики, снова добрый вечер! Мой проект умного дома набирает обороты и следующим этапом хотелось бы сделать красивую страничку в браузере, через которую вообщем-то осуществляется основное управление всем навешанным на дуинку барахлом... В данный момент страничка имеет элементарный вид, к примеру, вот 6 расположенных друг за другом цветных кнопок для включение потолочной РГБ-ленты:
client.print(F("<p><input name='off' type='submit' style='background-color:#FFFFFF' value='OFF'>")); client.print(F("<input name='redc' type='submit' style='background-color:#FF0000' value='Red'>")); client.print(F("<input name='green' type='submit' style='background-color:#00FF00' value='Green'>")); client.print(F("<input name='blue' type='submit' style='background-color:#0000FF' value='Blue'>")); client.print(F(" <input name='yellow' type='submit' style='background-color:#FFFF00' value='Yellow'>")); client.print(F("<input name='white' type='submit' style='background-color:#FFFFFF' value='White'>"));
Но как-то стремновато это... Хотелось бы, чтобы в браузере, допустим, открывалась в одном углу картинка на которой нарисова водонагреватель а посередине этой картинки светилась его температура.. Ну и все в таком духе.. Желательно, чтобы картинки эти грузились с SD карты по возможности... Слышал про AJAX, но пока не пробовал... Направьте, пожалуйста, куда копать...
Хотелось бы, чтобы в браузере, допустим, открывалась в одном углу картинка ...
Ну, и тему сисек забывать низзя!
Слышал про AJAX, но пока не пробовал... Направьте, пожалуйста, куда копать...
https://www.google.ru/#q=ajax
))) Ну да, забыл, что существует великий и могучий гугл).. Только фраза "куда копать" совмещала в себе не инфу про AJAX, а построение всего-этого в целом исходя из моих немногочисленных "хочу"... Может кто-то уже так делал и отписывался по этому делу, а мне не попалось... Или же Вы хотите сказать, что один лишь AJAX способен объединить все мои вышеописанные хотелки?
Или же Вы хотите сказать, что один лишь AJAX способен объединить все мои вышеописанные хотелки?
Нет, не хочу. Я ajax не использую за исключением случаев, когда надо сделать очень быстро и пофиг на всё. Также как и многочисленные "библиотеки" ардуино - у меня к ним одинаковое отношение.
Тогда позвольте спросить, а как лично Вы организовываете Web-управление каким-либо своим ардуино-проектом (если конечно вообще таким занимаетесь)... Также, как и большинство, используя принцип некого минимализма: "Переключить полив с помидорчиков на огурчики = чекбокс" или же используете что-то близкое к моим хотелкам?)
Стараюсь вообще никак этого не делать. Web-ом пусть занимается Web-сервер, а у ардуино другие заботы.
Но если вдруг надо, так среди Ваших отелок я не увидел ничего, что потребовало бы обязательно аджакса (да и куда Вы его пихать будете в ардуине-то - это ж 96 кило!?) Всё что Вам нужно вполне укладывается в крохотный в одну-две строчки скриптик на JScript.
Вот вооот... Вчера вечером как раз начал читать про AJAX и чем дальше, тем больше путаться начинал и верить в то, что мне это не надо... А вот яваскрипт с первых строк мне показался более подходящим... Спасибо за направлени "куда копать"!
Мда, попутали круглое с мягким. Ну какие 96 кил для AJAX на ардуине, блин? AJAX - это _клиентская_ технология, придуманная для обращения к _серверу_ без перезагрузки страницы. Если сервером выступает дуина с навешанным на неё шилдом для доступа в сеть (проводной/беспроводной - пофик), то всё, что от неё нужно для поддержки AJAX - это понимать, какой HTTP-запрос к ней пришёл, и выдавать ответ на запрос в формате, понятном AJAX-клиенту, например, JSON. Всё, никаких многокил не надо:
Вот вам и ответ в формате JSON, любой порядочный клиентский интерпретатор JavaScript поймёт, что ему передали переменную с именем answer и значением "ok". Где тут 96 кил для поддержки AJAX?
Мда, попутали круглое с мягким. Ну какие 96 кил для AJAX на ардуине, блин? AJAX - это _клиентская_ технология,
Откуда она берётся на клиенте? Не поверите, но с сервера грузится :)
Если вы планируете с SD загружать картинки, то как вариант, можно закачать туда же HTML страницы на все случаи жизни и подгружать их через фреймы. Может быть понадобится мета тег Refresh. Тогда можно обойтись html и css.
Способ 1: лысый сервер без флешки, jQuery и подобное содержится у клиента, допустим на телефоне, заведён каталог .\sdcard\MySuperDuperGigaUberSmartHouse, где кроме index.html хранится всё нужное.
Способ 2: всё требуемое отдаётся серверу по пустому запросу (http://ардуина/адальшепусто), потому что библиотека это по сути картинка (с сиськами, как завещал ЕвгенийП), а нужные данные по сервисному запросу (http://ардуина/?дайданные). Способ 2 универсальнее, способ 1 избавляет от изъёбств с запросами и флешкой. Промышленным проектом вроде тут не пахнет, так что рекомендую способ 1.
Мда, попутали круглое с мягким. Ну какие 96 кил для AJAX на ардуине, блин? AJAX - это _клиентская_ технология,
Откуда она берётся на клиенте? Не поверите, но с сервера грузится :)
Ну так в чём проблема-то? С SD-карты читать по кускам и отправлять клиенту? Зачем в скетче-то писать всякий говняный код, как у ТС?
Способ 1: лысый сервер без флешки, jQuery и подобное содержится у клиента, допустим на телефоне, заведён каталог .\sdcard\MySuperDuperGigaUberSmartHouse, где кроме index.html хранится всё нужное.
Только не стоит забывать, что в этом случае для нормального использования AJAX надо разрешить кроссдоменные запросы ;) А то потом у новичков возникает кучу вопросов типа "ААааа, оно не взлетает почему-то!" :)
Короче, при таком методе не забываем про CORS.
http://arduino.ru/forum/obshchii/w5100sd-vyvod-kartinki-iz-sd-v-brauzer
Для вывода картинки с sd запускается отдельный сервер на соседнем порту, который умеет катринку выдавать побайтово. К нему в нужном месте HTML основной страницы пишется запрос как обычно разместить картинку, путь ставится IP:port
ajax тоже применил, но вывод катринки тут не при чем.
далее можно рефрешами , только с картинкой переподгружаться будет долго. Потому дальше аяксами выводить данные поверх единожды погруженной картинки.
Аякс хорошо объясняется тут
Еще тут очень интересно и понятно и там же, уровнем выше
Мужики, спасибо всем... Мне вот понравилась эта статейка http://tehnopage.ru/ethernet-shield-w5100 , но у меня трабл: если я просто втыкаю SD-карту на 2Гб отформатированную в фат32 в w5100, то вся моя "ардуиногирлянда" тупо виснет...Резет не спасает... Может я пропустил какие-либо нюансы в подключении w5100 к Меге??? 4ый пин не занят, но может другие-какие нужны обязательно...
последовательность инициализации пинов имеет значение.
ресеты на гребенке от меги на 5100 перекушены их два около питания и на SPI , и выведен на отдельный пин меги.
За функцию ресет отдельное спасибо уважаемому Araris.
Форматнул SD в FAT16 и поставил 53 вывод в аутпут и все виснуть перестало... А что за функция резета? Это резет именно w5100? А для чего? Зависает бывает? inspiritus, спасибо за ссылки - очень пригодились.
Да, именно для w5100 старой версии. Без этого она нормально не запускалась. Также при работе через микротиковские роутеры возможен глюк с невозможностью работы через шлюз. Долго мучился с этим. Лечится перезагрузкой роутера. Там же в сетапе есть подсказка: запущенных слушающих серверов может быть несколько ( на разных портах).
А ведь я начал изучать дуинку всего лишь ради одного датчика температуры и реле... А тут чем дальше, тем веселее... Кое-как осилил стандартный набор ардуиновского Си с этого сайта, как тут теперь и HTML надо вкуривать вместе с яваскриптом и аяксом этим и это, чую, не предел... )))
Ардуино неисчерпаем :)
В этом и прелесть - подталкивает к прогрессу. И это Вам не большой комп, где давно все позиции расставлены. Тут же море возможностей.
Только вот новые мысли/проекты появляются гораздо быстрее и чаще, чем знания на их реализацию... Хорошо, если были хотя бы навыки программирования или наоборот HTML, а то пока все перегуглишь... Еще и нарвешься на не самую простую статью, которая тебя вконец запутает... Если бы не форум, то я бы (да и не только я) помигали бы светодиодом и забросили нафиг)
Да, точно. Andrey-S (и прочие неофиты), допишите строку:
где-нибудь после HTTP/1.1 200 OK.
Да, точно. Andrey-S (и прочие неофиты), допишите строку:
где-нибудь после HTTP/1.1 200 OK.
Ну хоть бы написали для чего это... Что даст эта одна строка? Или это юмор какой-то?
DIYMan писал же, это на случай если всё веб-оформление будет на клиенте, чтобы разрешить кросс-доменные запросы.
Да, точно. Andrey-S (и прочие неофиты), допишите строку:
где-нибудь после HTTP/1.1 200 OK.
Только вместо null надо звёздочку - *, емнип.
Да, точно. Andrey-S (и прочие неофиты), допишите строку:
где-нибудь после HTTP/1.1 200 OK.
Ну хоть бы написали для чего это... Что даст эта одна строка? Или это юмор какой-то?
Это ни разу не юмор. Раз взялись изучать динамически формируемый контент веб-страниц, то, применительно к технологии AJAX, есть такое ограничение: запрет кроссдоменных запросов. Сие означает ровно то, что вы не сможете без плясок с бубном со страничке, сделанной и сохранённой локально на вашем диске (например) запросить данные при помощи AJAX с google.com (опять же, например). Это - требования безопасности.
Для решения подобных проблем была придумана прокладка в виде JSONP - это раз. Два - придумали такую штуку, как CORS, подробности есть в википедии. Если вкратце - то сервер при запросе к нему может выдать заголовок, информирующий, с каких хостов разрешён кроссдоменный запрос.
Короче, штука мутная, но знать, что она есть - надо.
З.Ы. Если есть проблемы с AJAX - спрашивайте, подскажу, там всё просто, как два пальца, на самом деле.
З.З.Ы. Мелкие картинки можно прямо в файле стилей в бинарном виде прописывать ;) Вот, как пример: http://html5.by/blog/wtf-base64/
Я делал по этой статье:
Там есть продолжение, как файлы с карточки считывать, и не только файлы.
http://tehnopage.ru/ethernet-shield-w5100
http://tehnopage.ru/ethernet-shield-w5100-chast-2
http://tehnopage.ru/ethernet-shield-w5100-chast-3
http://tehnopage.ru/ethernet-arduino-control
http://tehnopage.ru/ethernet-arduino-pwm-control
Я делал по этой статье:
Благодарю Вас, я как раз в 14 посте ту же ссылку привел... Там достаточно неплохо все описано... Изучаю в данный момент!)
DIYMan, благодарю за пояснение, общий принцип начал представлять, но тыщщу возникших сразу вопросов пока озвучивать не буду, ибо не дошел до этого... Но обещаю не стесняться, когда дойду))) Спасибо!