Оформление HTML страницы

Andrey-S
Offline
Зарегистрирован: 02.01.2015

Мужики, снова добрый вечер! Мой проект умного дома набирает обороты и следующим этапом хотелось бы сделать красивую страничку в браузере, через которую вообщем-то осуществляется основное управление всем навешанным на дуинку барахлом... В данный момент страничка имеет элементарный вид, к примеру, вот 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, но пока не пробовал... Направьте, пожалуйста, куда копать...

ЕвгенийП
ЕвгенийП аватар
Offline
Зарегистрирован: 25.05.2015

Andrey-S пишет:

Хотелось бы, чтобы в браузере, допустим, открывалась в одном углу картинка ...

Ну, и тему сисек забывать низзя!

Andrey-S пишет:

Слышал про AJAX, но пока не пробовал... Направьте, пожалуйста, куда копать...

https://www.google.ru/#q=ajax

 

 

Andrey-S
Offline
Зарегистрирован: 02.01.2015

))) Ну да, забыл, что существует великий и могучий гугл).. Только фраза "куда копать" совмещала в себе не инфу про AJAX, а построение всего-этого в целом исходя из моих немногочисленных "хочу"... Может кто-то уже  так делал и отписывался по этому делу, а мне не попалось... Или же Вы хотите сказать, что один  лишь AJAX способен объединить все мои вышеописанные хотелки?

ЕвгенийП
ЕвгенийП аватар
Offline
Зарегистрирован: 25.05.2015

Andrey-S пишет:

Или же Вы хотите сказать, что один  лишь AJAX способен объединить все мои вышеописанные хотелки?

Нет, не хочу. Я ajax не использую за исключением случаев, когда надо сделать очень быстро и пофиг на всё. Также как и многочисленные "библиотеки" ардуино - у меня к ним одинаковое отношение.

Andrey-S
Offline
Зарегистрирован: 02.01.2015

Тогда позвольте спросить, а как лично Вы организовываете Web-управление каким-либо своим ардуино-проектом (если конечно вообще таким занимаетесь)... Также, как и большинство, используя принцип некого минимализма: "Переключить полив с помидорчиков на огурчики = чекбокс" или же используете что-то близкое к моим хотелкам?)

ЕвгенийП
ЕвгенийП аватар
Offline
Зарегистрирован: 25.05.2015

Стараюсь вообще никак этого не делать. Web-ом пусть занимается Web-сервер, а у ардуино другие заботы.

Но если вдруг надо, так среди Ваших отелок я не увидел ничего, что потребовало бы обязательно аджакса (да и куда Вы его пихать будете в ардуине-то -  это ж 96 кило!?) Всё что Вам нужно вполне укладывается в крохотный в одну-две строчки скриптик на JScript.

Andrey-S
Offline
Зарегистрирован: 02.01.2015

Вот вооот... Вчера вечером как раз начал читать про AJAX и чем дальше, тем больше путаться начинал и верить в то, что мне это не надо... А вот яваскрипт с первых строк мне показался более подходящим... Спасибо за направлени "куда копать"!

DIYMan
DIYMan аватар
Offline
Зарегистрирован: 23.11.2015

Мда, попутали круглое с мягким. Ну какие 96 кил для AJAX на ардуине, блин? AJAX - это _клиентская_ технология, придуманная для обращения к _серверу_ без перезагрузки страницы. Если сервером выступает дуина с навешанным на неё шилдом для доступа в сеть (проводной/беспроводной - пофик), то всё, что от неё нужно для поддержки AJAX - это понимать, какой HTTP-запрос к ней пришёл, и выдавать ответ на запрос в формате, понятном AJAX-клиенту, например, JSON. Всё, никаких многокил не надо:

if(requestString.indexOf("light_on") != -1)
{
digitalWrite(13,HIGH);
response("{\"answer\":\"ok\"}");
}

Вот вам и ответ в формате JSON, любой порядочный клиентский интерпретатор JavaScript поймёт, что ему передали переменную с именем answer и значением "ok". Где тут 96 кил для поддержки AJAX?

ЕвгенийП
ЕвгенийП аватар
Offline
Зарегистрирован: 25.05.2015

DIYMan пишет:

Мда, попутали круглое с мягким. Ну какие 96 кил для AJAX на ардуине, блин? AJAX - это _клиентская_ технология, 

Откуда она берётся на клиенте? Не поверите, но с сервера грузится :)

Nosferatu
Offline
Зарегистрирован: 04.11.2012

Если вы планируете с SD загружать картинки, то как вариант,  можно закачать туда же HTML страницы на все случаи жизни и подгружать их через фреймы. Может быть понадобится мета тег Refresh. Тогда можно обойтись html и css.

std
Offline
Зарегистрирован: 05.01.2012

Способ 1: лысый сервер без флешки, jQuery и подобное содержится у клиента, допустим на телефоне, заведён каталог .\sdcard\MySuperDuperGigaUberSmartHouse, где кроме index.html хранится всё нужное.

Способ 2: всё требуемое отдаётся серверу по пустому запросу (http://ардуина/адальшепусто), потому что библиотека это по сути картинка (с сиськами, как завещал ЕвгенийП), а нужные данные по сервисному запросу (http://ардуина/?дайданные). Способ 2 универсальнее, способ 1 избавляет от изъёбств с запросами и флешкой. Промышленным проектом вроде тут не пахнет, так что рекомендую способ 1.

DIYMan
DIYMan аватар
Offline
Зарегистрирован: 23.11.2015

ЕвгенийП пишет:

DIYMan пишет:

Мда, попутали круглое с мягким. Ну какие 96 кил для AJAX на ардуине, блин? AJAX - это _клиентская_ технология, 

Откуда она берётся на клиенте? Не поверите, но с сервера грузится :)

Ну так в чём проблема-то? С SD-карты читать по кускам и отправлять клиенту? Зачем в скетче-то писать всякий говняный код, как у ТС?

DIYMan
DIYMan аватар
Offline
Зарегистрирован: 23.11.2015

std пишет:

Способ 1: лысый сервер без флешки, jQuery и подобное содержится у клиента, допустим на телефоне, заведён каталог .\sdcard\MySuperDuperGigaUberSmartHouse, где кроме index.html хранится всё нужное.

Только не стоит забывать, что в этом случае для нормального использования AJAX надо разрешить кроссдоменные запросы ;) А то потом у новичков возникает кучу вопросов типа "ААааа, оно не взлетает почему-то!" :)

Короче, при таком методе не забываем про CORS.

inspiritus
Offline
Зарегистрирован: 17.12.2012

http://arduino.ru/forum/obshchii/w5100sd-vyvod-kartinki-iz-sd-v-brauzer

Для вывода  картинки с sd запускается отдельный сервер на соседнем порту, который умеет катринку выдавать побайтово. К нему в нужном месте HTML основной страницы пишется запрос как обычно разместить картинку, путь ставится IP:port

ajax тоже применил, но вывод катринки тут не при чем.

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

Аякс хорошо объясняется тут

Еще тут очень интересно и понятно и там же, уровнем выше

Andrey-S
Offline
Зарегистрирован: 02.01.2015

Мужики, спасибо всем... Мне вот понравилась эта статейка http://tehnopage.ru/ethernet-shield-w5100 , но у меня трабл: если я просто втыкаю SD-карту на 2Гб отформатированную в фат32 в w5100, то вся моя "ардуиногирлянда" тупо виснет...Резет не спасает... Может я пропустил какие-либо нюансы в подключении w5100 к Меге??? 4ый пин не занят, но может другие-какие нужны обязательно...

inspiritus
Offline
Зарегистрирован: 17.12.2012

последовательность инициализации пинов имеет значение.

ресеты на гребенке от меги на 5100 перекушены их два около питания и на SPI , и выведен на отдельный пин меги.

За функцию ресет отдельное спасибо уважаемому Araris.



void setup() {
  
  Serial.begin(9600);
  pinMode(53, OUTPUT);
  pinMode(W5100_RESET_PIN, OUTPUT);digitalWrite(W5100_RESET_PIN,LOW);
  pinMode(SD_CS, OUTPUT); digitalWrite(SD_CS,HIGH);
  
//*********************start Ethernet services*******************************************

  resetLAN();
  server.begin();
  server1.begin();
  Udp.begin(8888);

//************************ вся програамма********************
//************************конец всей программы*************

void resetLAN()
{
digitalWrite(W5100_RESET_PIN, LOW);  Serial.println("reset lock");
delay(100);
digitalWrite(W5100_RESET_PIN, HIGH);Serial.println("reset release");
delay(1000);
Ethernet.begin(mac,ip,dnServer,gateway,subnet);
delay(500);
  Serial.print("My IP adress: "); Serial.println(Ethernet.localIP());
  Serial.print("My gateway: "); Serial.println(Ethernet.gatewayIP());
  Serial.print("My subnet mask: "); Serial.println(Ethernet.subnetMask());
  Serial.print("My dns Server: "); Serial.println(Ethernet.dnsServerIP());
}
Andrey-S
Offline
Зарегистрирован: 02.01.2015

Форматнул SD в FAT16 и поставил 53 вывод в аутпут и все виснуть перестало... А что за функция резета? Это резет именно w5100? А для чего? Зависает бывает? inspiritus, спасибо за ссылки - очень пригодились.

inspiritus
Offline
Зарегистрирован: 17.12.2012

Да, именно для w5100 старой версии. Без этого она нормально не запускалась. Также при работе через микротиковские роутеры возможен глюк с невозможностью работы через шлюз. Долго мучился с этим. Лечится перезагрузкой роутера. Там же в сетапе есть подсказка: запущенных слушающих серверов может быть несколько ( на разных портах).

Andrey-S
Offline
Зарегистрирован: 02.01.2015

А ведь я начал изучать дуинку всего лишь ради одного датчика температуры и реле... А тут чем дальше, тем веселее... Кое-как осилил стандартный набор ардуиновского Си с этого сайта, как тут теперь и HTML надо вкуривать вместе с яваскриптом и аяксом этим и это, чую, не предел... )))

inspiritus
Offline
Зарегистрирован: 17.12.2012

Ардуино неисчерпаем :)

В этом и прелесть - подталкивает к прогрессу. И это Вам не большой комп, где давно все позиции расставлены. Тут же море возможностей.

Andrey-S
Offline
Зарегистрирован: 02.01.2015

Только вот новые мысли/проекты появляются гораздо быстрее и чаще, чем знания на их реализацию... Хорошо, если были хотя бы навыки программирования или наоборот HTML, а то пока все перегуглишь... Еще и нарвешься на не самую простую статью, которая тебя вконец запутает... Если бы не форум, то я бы (да и не только я) помигали бы светодиодом и забросили нафиг)

std
Offline
Зарегистрирован: 05.01.2012

DIYMan пишет:
Короче, при таком методе не забываем про CORS

Да, точно. Andrey-S (и прочие неофиты), допишите строку:

client.println("Access-Control-Allow-Origin: null");

где-нибудь после HTTP/1.1 200 OK.

Andrey-S
Offline
Зарегистрирован: 02.01.2015

std пишет:

Да, точно. Andrey-S (и прочие неофиты), допишите строку:

client.println("Access-Control-Allow-Origin: null");

где-нибудь после HTTP/1.1 200 OK.

Ну хоть бы написали для чего это... Что даст эта одна строка? Или это юмор какой-то?

std
Offline
Зарегистрирован: 05.01.2012

DIYMan писал же, это на случай если всё веб-оформление будет на клиенте, чтобы разрешить кросс-доменные запросы.

DIYMan
DIYMan аватар
Offline
Зарегистрирован: 23.11.2015

std пишет:

DIYMan пишет:
Короче, при таком методе не забываем про CORS

Да, точно. Andrey-S (и прочие неофиты), допишите строку:

client.println("Access-Control-Allow-Origin: null");

где-нибудь после HTTP/1.1 200 OK.

Только вместо null надо звёздочку - *, емнип.

DIYMan
DIYMan аватар
Offline
Зарегистрирован: 23.11.2015

Andrey-S пишет:

std пишет:

Да, точно. Andrey-S (и прочие неофиты), допишите строку:

client.println("Access-Control-Allow-Origin: null");

где-нибудь после HTTP/1.1 200 OK.

Ну хоть бы написали для чего это... Что даст эта одна строка? Или это юмор какой-то?

Это ни разу не юмор. Раз взялись изучать динамически формируемый контент веб-страниц, то, применительно к технологии AJAX, есть такое ограничение: запрет кроссдоменных запросов. Сие означает ровно то, что вы не сможете без плясок с бубном со страничке, сделанной и сохранённой локально на вашем  диске (например) запросить данные при помощи AJAX с google.com (опять же, например). Это - требования безопасности.

Для решения подобных проблем была придумана прокладка в виде JSONP - это раз. Два - придумали такую штуку, как CORS, подробности есть в википедии. Если вкратце - то сервер при запросе к нему может выдать заголовок, информирующий, с каких хостов разрешён кроссдоменный запрос.

Короче, штука мутная, но знать, что она есть - надо.

З.Ы. Если есть проблемы с AJAX - спрашивайте, подскажу, там всё просто, как два пальца, на самом деле.

З.З.Ы. Мелкие картинки можно прямо в файле стилей в бинарном виде прописывать ;) Вот, как пример: http://html5.by/blog/wtf-base64/

vitalikost
Offline
Зарегистрирован: 28.11.2014

Я делал по этой статье: 

Там есть продолжение, как файлы с карточки считывать, и не только файлы.

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

 

Andrey-S
Offline
Зарегистрирован: 02.01.2015

vitalikost пишет:

Я делал по этой статье: 

Благодарю Вас, я как раз в 14 посте ту же ссылку привел... Там достаточно неплохо все описано... Изучаю в данный момент!)

DIYMan, благодарю за пояснение, общий принцип начал представлять, но тыщщу возникших сразу вопросов пока озвучивать не буду, ибо не дошел до этого... Но обещаю не стесняться, когда дойду))) Спасибо!