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

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

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

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

[artemka19]

красиво

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

, что с помощью штатных средств (http://localhost/) - я прекрасно получаю индикаторы(датчики) в браузере , а после прошивки их в браузере тупо нет

а что отображает после прошивки браузер?
в какой версии флпрог проект?

[malina]

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

[artemka19]

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

[malina]

да я тоже далеко от ПК, да и опять прошивать нужно чтобы посмотреть но я обязательно посмотрю... не скоро - но..

[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

[malina]

[ref]artemka19[/ref], дружище!!! Ты зе бест програМмЁр !!!
Прям респект тебе. Да прибудет с тобой Дзен .

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

Благодарю!

[malina]

[ref]artemka19[/ref], залил - проверил.
По адресу http://localhost/ числа и градуировка на индикаторе отображаются,
а по адресу http://192.168.43.51/ нет чисел и чёрточек.

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

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

[artemka19]

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

а это сделал?)

[malina]

[/quote]

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

а это сделал?)

Буду через файловую систему делать...наверное. Щас как раз изучаю SPIFFS.

[Fuksas]

Буду через файловую систему делать...наверное

viewtopic.php?f=202&t=7761&start=140#p115681

[artemka19]

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