Страница 1 из 1

Радиальный датчик (стрелочный индикатор) веб-сервера отображающий аналоговое значение

Добавлено: 12 фев 2023, 23:11
malina
Полученный интерфейс:

Стрелочные индикаторы:
От artemka19
Код js скрипта вынесен в отдельный блок, который нужно разместить в проекте флпрог.
Стрелочные индикаторы.flp
1-обзор.png
От malina
Код js скрипта размещается в файловой сиситеме SPIFFS
data.rar
Пример: В настройках вэб интерфейса (общие)
такой пример работы с SPIFFS, на практике не совсем корректен.
Настройки работы со SPIFFS проводились для всего интерфейса, а не для отдельной
страницы.
Скрипт индикатора в файловой системе SPIFFS .flp
Screenshot_2.png
Пример: В настройках страницы вэб интерфейса (только нужная страница)
two_forum radial indicator v1.0.flp
Настройки работы со SPIFFS проводились для отдельной страницы.
------------------------------------------------------------------------------------------------------------------------------------------------------------

Здравствуйте Всем!

Дня три тому назад посмотрел- "Создание собственных виджетов в вэб интерфейсе в программе FLProg" Сергей Глушенко
https://www.youtube.com/watch?v=oBWwPablQ04
Все прекрасно получилось... часа за 4 и я решил свой виджет воткнуть в штатный Веб. Чтобы было как на скринах )))

Сразу припомнил далекий 2016 год, где я прикрутил к Изернет шилду прекрасные стрелочние индикаторы.
Сейчас изернет-шилды не в моде , а гуляет по просторам IOT - уважаемая ESP :smile9: . Поэтому вместо SD карты для Вебморды логично было бы использовать SPIFFS, но заморачиваться с изучением, как прикрутить все это к FLprog времени соАвсем нет.
Учитывая, что и без SPIFFS все получилось быстро :smile171: (вообщем и целом - НиФига НЕ получилось . я таки наваял V1.0 – по мотивам:
https://startingelectronics.org/tutoria ... ard-gauge/ и
https://github.com/tehniq3/Two-Gauge-Arduino-Web-Server
Я даже подготовил материалы по этой теме( ниже приложу) И с прекрасным настроением прошил ESP, чтобы выложить на форум рабочий проект ....НО..
...набрав в строке браузера заветный адрес ....********ть - я не увидел индикаторы :shok:
------------------------------------------------------------------------------------------------------------------------------------------------------------
Проблема:
Вы видете по скринам, что с помощью штатных средств (http://localhost/) - я прекрасно получаю индикаторы(датчики) в браузере , а после прошивки их в браузере тупо нет.
------------------------------------------------------------------------------------------------------------------------------------------------------------

Да. Я не программер и не продвинутый юзер...но Абыдно такую красоту терять.

Друзья!!! Хочется не только причину знать, но и симпатичный интерфейс получить.
-------------------------------------------------------------------------------------------------------------------------------------

Радиальный датчик (индикатор) веб-сервера отображающий аналоговое значение

Добавлено: 13 фев 2023, 00:44
artemka19
красиво :smile9:

Отправлено спустя 1 минуту 50 секунд:
malina писал(а): 12 фев 2023, 23:11 , что с помощью штатных средств (http://localhost/) - я прекрасно получаю индикаторы(датчики) в браузере , а после прошивки их в браузере тупо нет
а что отображает после прошивки браузер?
в какой версии флпрог проект?

Радиальный датчик (индикатор) веб-сервера отображающий аналоговое значение

Добавлено: 13 фев 2023, 15:54
malina
[ref]artemka19[/ref], браузер после прошивки просто страницу от FlProg с меню "индикаторы" , " wifi client" показывает... а индикаторов нет
Версия флпрог 7.5.2
Можно залить на любую ESP пример v1.0 и он будет работать - при изменении переменной temp, индикатор показывает значения - НО -
только на Localhost.

Радиальный датчик (индикатор) веб-сервера отображающий аналоговое значение

Добавлено: 13 фев 2023, 16:05
artemka19
[ref]malina[/ref],
я пока не у пк.
но если открыть в браузере средства разработчика - там какие ошибки в консоли имеются?

Радиальный датчик (индикатор) веб-сервера отображающий аналоговое значение

Добавлено: 13 фев 2023, 16:19
malina
да я тоже далеко от ПК, да и опять прошивать нужно чтобы посмотреть но я обязательно посмотрю... не скоро - но..

Радиальный датчик (индикатор) веб-сервера отображающий аналоговое значение

Добавлено: 13 фев 2023, 21:00
artemka19
[ref]malina[/ref],
у тебя там ошибки в скрипте:
1 - код неправильно закомментирован - такими (<!-- -->) кавычками комментируется код в html, а не в js
<!-- Gauge Code Starts -->
<!-- Gauge Code Ends -->


2 - вот такой код со слешами /^\s*function\s*\(/.test(g) при заливке в еспшку ломается.

либо убирай его, либо грузи этот код из js в еспшку другим методом (например через PROGMEM или через файловую систему)
*можно попробовать экранировать эти слеши

Остальное работает:

ьььььь.png
radial indicator v1.0.flp

Радиальный датчик (индикатор) веб-сервера отображающий аналоговое значение

Добавлено: 14 фев 2023, 07:51
malina
[ref]artemka19[/ref], дружище!!! Ты зе бест програМмЁр !!!
Прям респект тебе. :yes: Да прибудет с тобой Дзен .

...завтра залью и залипну )))

Благодарю!

Радиальный датчик (стрелочный индикатор) веб-сервера отображающий аналоговое значение

Добавлено: 14 фев 2023, 18:25
malina
[ref]artemka19[/ref], залил - проверил.
По адресу http://localhost/ числа и градуировка на индикаторе отображаются, :smile9:
а по адресу http://192.168.43.51/ нет чисел и чёрточек. :smile44:

Какая то Карма НеДопиЛенНосТИ преследует этот виджет... :smile390:

Буду рад и счастлив, если еще раз поможешь.

Радиальный датчик (стрелочный индикатор) веб-сервера отображающий аналоговое значение

Добавлено: 14 фев 2023, 19:30
artemka19
malina писал(а): 14 фев 2023, 18:25 вот такой код со слешами /^\s*function\s*\(/.test(g) при заливке в еспшку ломается
а это сделал?)

Радиальный датчик (стрелочный индикатор) веб-сервера отображающий аналоговое значение

Добавлено: 14 фев 2023, 19:57
malina
[/quote]
artemka19 писал(а): 14 фев 2023, 19:30
malina писал(а): 14 фев 2023, 18:25 вот такой код со слешами /^\s*function\s*\(/.test(g) при заливке в еспшку ломается
а это сделал?)
Буду через файловую систему делать...наверное. Щас как раз изучаю SPIFFS.

Радиальный датчик (стрелочный индикатор) веб-сервера отображающий аналоговое значение

Добавлено: 14 фев 2023, 22:05
Fuksas
malina писал(а): 14 фев 2023, 19:57 Буду через файловую систему делать...наверное
viewtopic.php?f=202&t=7761&start=140#p115681

Радиальный датчик (стрелочный индикатор) веб-сервера отображающий аналоговое значение

Добавлено: 16 фев 2023, 00:19
artemka19
[ref]malina[/ref],
вот тут решил использовать твой пример индикаторов для штатного веб-интерфейса
viewtopic.php?t=7761&start=160#p121260