FlProg

Используется: МЕГА 2560, Шилд 5100.
Вот видео. Мне кажется сказано здесь все.
https://youtu.be/ophqoqAyoUE
Архив с проектом.

при чем тут wifi? у тебя модуль в5100 проводной
в 3.1.2 есть поддержка есп8266, где можно сделать тоже самое реально без проводов и даже роутера, да и памяти там навалом для хтмл и стоит дешевле в5100

Есть конечно не точность в названии ролика, но все сделано и объяснено очень хорошо. Рекомендовал бы всем начинающим к просмотру перед тем как начинать делать свой проект с управлением через веб страницу. Сразу вопросов поубавится что да как делать.

Подкорректировал название темы.
В целом хороший и поучительный проект.

kalobyte писал(а): 14 июл 2018, 01:38при чем тут wifi? у тебя модуль в5100 проводной
в 3.1.2 есть поддержка есп8266, где можно сделать тоже самое реально без проводов и даже роутера, да и памяти там навалом для хтмл и стоит дешевле в5100

Да описка в названии темы и ролика. Исправил. Прошу прощения. Спешка и поздняя ночь. Но в самом ролике я объяснил почему сделал не на ESP8266, а на шилде 5100. Хотя я и пробовал. И если бы Вы внимательно смотрели, то поняли бы , что я просто описался. Вот кстати топик как этот же проект, с ошибкой, получается на поддерживаемом версией 3.1.2 ESP8266. Который , я с Вами соглашусь, и дешевле и объёмней.

Отправлено спустя 7 минут 17 секунд:

rw6cm писал(а): 14 июл 2018, 09:09Подкорректировал название темы.
В целом хороший и поучительный проект.

Спасибо за исправление. Действительно зарапортовался.

объясняю где ошибки
во-первых генерируется не хтмл5 валидный код

в самом скетчек 2 раза повторяется закрытие тега боди
tempString = tempString + "</body>";


tempString = tempString + "</body></html>";

появляются вот такие артефакты двойных кавычек
tempString = tempString + """>";

направильный формат тега ссылки, отсутствуют кавычки
tempString = tempString + "<a href=../2><button class=""";
---
итого вердиктъ - блок веб страницы надо полностью переделать следущим образом
в память программ для авр должна записываться строка цсс файлом
строка с яваскрипт файлом
и строка с хтмл5 файлом

зачем это нужно?
когда передадутся эти файлы, то браузер их закеширует и больше не будет запрашивать, при этом при передаче каждого такого файла, вебсервер должен передавать заголовок как тут описано
https://ruhighload.com/%D0%9A%D1%8D%D1% ... he-control

зачем нужны отдельные файлы? почему нельзя все в одну кучу засунуть?
блок вебсервера надо доработать так, чтобы он позволял хранить файлы на сд карте или в spiffs для есп, использование авр для таких вещей довольно затратное дело, поэтому лучше будет использовать просто удп сокет сервер как самый простой вариант передачи данных по сети, правда это уже никак не связано с вебом

в качестве альтернативы можно использовать remotexy, blynk, json, simpte get request
чтобы просто дергать релешки - достаточно посылать гет запросы при помощи софта с телефона
https://play.google.com/store/apps/deta ... _shortcuts
либо у вас где-то расположен хтмл файл локально и вы его открываете браузером, а там яваскрипт дергает нужные урл с нужными параметрами и получает в ответ джейсона

вобщем авр и куча текста хтмл это несовместимые вещи и лучше это не использовать
но если использовать сд карту или есп, то файлы могут быть большого размера и чтобы не нагружать контроллер передачей каждый раз кучи хтмл, то яваскрипт будет дергать урлы
при этом очень легко будет сделать красивую вебморду как тут
https://youtu.be/NrIrLw1rOdk?t=196

сейчас веб строится при помощи т.н. цсс фреймворков, которые используют яваскрипт для разных целей и основную библиотеку jquery, которая позволяет навешивать разные плагины контролов

можно легко визуально сделать разметку при помощи этого сервиса https://www.layoutit.com/
в ютубе есть уроки по bootstrap4, там 95% это копипаста готового когда из примеров

вот тут можно посмотреть готовый пример вебморды для автомата эффектов гирлянды и исходники на гитхабе
https://mysku.ru/blog/aliexpress/59187.html
там вебсервер загружает один раз хтмл и яваскрипт, дальше яваскрипт открывает вебсокет и передает данные в реальном времени уже, но это полезно, когда надо передавать показания приборов в реальном времени, но главное такая возможность есть в пакете веб сервера для есп

если вы уверены, что ваш клиент всегда будет иметь доступ в инторнет, то вам даже не надо размещать яваскрипт и цсс в памяти своего устройства и он в всегда будет доступен онлайн при помощи одной строки в хтмл
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ... ap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

есть еще платные темы и среди них есть админ панели с разными индикаторами и графиками
https://themes.getbootstrap.com/

Я согласен с каждым Вашим словом. Но по поводу сторонних серверов скажу:
1. Не люблю я их.(Это моё личное мнение)
2. Этому яркое подтверждение недавняя борьба РоcКомНадзора с Telegram. Из-за их блокировок практически все эти сервисы стали не доступны. И всё , что у нас на них работало упало.
Поэтому я всегда стараюсь избавиться от зависимости от них. А плохо или хорошо это другой разговор.
А всё остальное я видел и знаю. Поэтому и обозначил в видео в ветке о Flprog 3.1.2.