Шаблоны Оформления для Веб-Интерфейса

[Sio]

Привет Артём, приветствую вас коллеги.
Хотел выразить признательность Артёму за замечательные графики которые были выложены на форуме.
По теме графиков есть вопрос, можно ли показания графиков растянуть на 24 часа или даже большое?
В настройках "частота запросов...." стоит ( 99)
Ещё пробовал увеличить количество точек графика, не помогло...

Я на неделе протестировал блок, при этом у меня это было всего пару часов 3-4 часа.
Утром встаю смотрю температуру за последние 3-4 часа, интересно было бы посмотреть а ночью сколько градусов было?
Может есть возможность увеличить частоту запросов до 15 минут?

[artemka19]

можно ли показания графиков растянуть на 24 часа или даже большое?

недопонял вопроса:
-можно указать частоту записи в графики: например если писать с частотой один раз в час, то при установке 1000 точек мы получим график длиной в 40 дней
-чтоб отобразить все эти сорок дней на графике - нужно выбрать на самом графике (слева-вверху) значение "ВСЕ" (это там где 10мин, 6часов, 24часа и т.д.)

Отправлено спустя 3 минуты 5 секунд:

В настройках "частота запросов...." стоит ( 99)

это настройка частоты получения значений в режиме "REALTIME",
т.е. после того, как откроем страницу с графиками в браузере, мы можем получать свежие данные от еспшки в реальном времени,НЕЗАВИСИМО от того какая частота записи данных установлена в самом проекте.

*но это пока открыта страница с графиками в браузере

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

Может есть возможность увеличить частоту запросов до 15 минут?

любое период времени можно выбрать.

[vitalik9]

artemka19, cmept-27,
А я познал прелесть "структуры"

СпойлерПоказать

Без имени-2.jpg

artemka19, чуть сложнее, чем у вас, но уже не нужно разбирать строчку.

СпойлерПоказать

time__0004_Слой 1.jpgtime__0003_Слой 2.jpgtime__0002_Слой 3.jpgtime__0001_Слой 4.jpgtime__0000_Слой 5.jpg

HTML

Код: Выделить всё

<input type="datetime-local" id="dt">

JS

Код: Выделить всё

let daTi = document.querySelector('#dt');
daTi.addEventListener('change', dataTime);
function dataTime(){
    const v = {};
    let x = new Date(daTi.value);
    v.H = x.getHours().toString();
    v.M = x.getMinutes().toString();
    v.y = x.getFullYear().toString();
    v.m = (x.getMonth() + 1).toString();
    v.d = x.getDate().toString();
    sUH("dt",v);
    console.log(v);
};

///////////Обновил. Добавил, что бы при изменение в контроллере данные передавались в вэб.////////
Test_7_4_4_получение датыВремя.flp

Как применить данный блок с часами реального времени, как подключить его к часам реального времени? если можно пример

[Sio]

Приветствую дорогие друзья!
по обучающему видео Сергея Глушенко "Создание собственных виджетов в вэб интерфейсе в программе FLProg начиная с версии 7.4.4".
Сделал ползунок на ESP для изменения яркости лед. На одном цвете все работает.
Потом решил подключить RGB лед и сделать смену цвета на 3-х ползунках.
Но так и не понял как сделать второй и третий слайдер для других цветов RGB лед.
Не могу понять, что не так?
Пожалуйста, посмотрите...

[artemka19]

id должны различаться

[Sio]

Артем, я все понял.
Всем кого заинтересует, нашёл решение на:
https://stackoverflow.com/questions/475 ... s-possible
Удачи всем, Артём тебе отдельный "РАХМЕТ" спасибо

[artemka19]

Стрелочные индикаторы в штатном вебе

тут отмечено что нужно раскомментить для работы в веб-отладчике (в конце кода удалить такой же символ " */ ")
И не забываем закомментить обратно или удалить вообще этот код отладки, при залитии в еспшку

решил забрать эти индикаторы из темы viewtopic.php?f=202&t=8427 и интегрировать их в штатный веб.

в целом достаточно легко добавить нужное их количество, расположение, размер и другие свойства внешности индикаторов.

К тому же имеется возможность предварительно настраивать оформление этих индикторов в отладчике штатного веб-интерфейса: достаточно раскомментировать код (см.описание)

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


Файл проекта:
блок_ограничен_администрацией

[malina]

Конфигурация стрелочных индикаторов:

СпойлерПоказать

Параметры конфигурации предоставляются конструктору Gauge в виде объекта, который может содержать любой из параметров, описанных ниже. Единственный параметр является обязательным. Таким образом, чтобы создать датчик на странице, достаточно инициализировать его следующим образом:

var gauge = new Gauge({ renderTo: 'canvas-id' }); gauge.draw();
renderTo — {String|HTMLCanvasElement} — идентификатор элемента холста HTML или сам элемент. Это идентифицирует элемент холста, на который будет нарисован датчик. Этот параметр является обязательным для указания.
width - {Integer} - ширина холста в пикселях
height - {Integer} - высота холста в пикселях
title - {String} - заголовок, который должен быть нарисован на датчике. По умолчанию false (заголовок не отображается)
minValue - {Число} - минимальное значение, которое используется на индикаторной полосе. По умолчанию 0
maxValue - {Число} - максимальное значение, которое используется на полосе индикатора. По умолчанию 100
majorTicks - {Array} - массив основных делений. По умолчанию ['0', '20', '60', '80', '100']
minorTicks — {Integer} — количество второстепенных тиков, которые нужно отрисовать между основными тиками на индикаторной полосе. По умолчанию 10.
strokeTicks — {Boolean} — флаг, определяющий, следует ли обводить полосу тиков или нет. По умолчанию верно.
юниты - {String} - укажите название юнитов, которое будет отображаться на датчике. По умолчанию false (не отображать единицы измерения).
valueFormat - {Object} - укажите, как должно отображаться значение. Можно указать целую часть значения и десятичную часть. По умолчанию {int: 3, dec: 2}
glow - {Boolean} - указывает, следует ли рисовать теневое свечение для измерительной пластины или нет
animation - {Object} - Конфигурация анимации иглы датчика. Обрабатывает три параметра — задержку, продолжительность и функцию анимации.
colors - {Object} - цвета, которые будут использоваться на разных деталях датчика при рисовании. Может быть указан в шестнадцатеричном формате ('#000000' - '#ffffff') или RGB с/без альфа-канала. По умолчанию:

plate : '#fff',
majorTicks : '#444',
minorTicks : '#666',
title : '#888',
units : '#888',
numbers : '#444',
needle : { start : 'rgba(240, 128, 128, 1)', end : 'rgba(255, 160, 122, .9)' }
highlights — {Массив} — массив цветов бликов, которые можно отобразить на шкале. Если указано как пустой массив или false, не будет нарисовано. По умолчанию:

[{ from: 20, to: 60, color: '#eee' }, { from: 60, to: 80, color: '#ccc' }, { from: 80, to: 100, color: '#999' }]
Где from — значение, с которого начинается выделение, to — значение, до которого выполняется выделение, color — используемый цвет.

Методы

Gauge( {Object} options) - конструктор. Принимает параметры конфигурации в качестве аргумента. Варианты конфигурации описаны выше.
draw() - рисует датчик (рендерит его на указанном холсте)
clear() - немедленно устанавливает значение датчика на минимальное значение и перерисовывает датчик
setValue (значение {Float}) — устанавливает новое значение для отображения в датчике. Если анимация включена - запускает анимацию.
getValue() - возвращает текущее значение на датчике
События

onready — рекомендуется использовать это, даже если требуется динамическая работа с датчиком (изменение значения) и быть уверенным, что датчик был правильно инициализирован и отрисован до запуска динамических обновлений. - {Boolean} - указывает, следует ли рисовать теневое свечение для измерительной пластины или нет
анимация - {Объект} - Конфигурация анимации иглы датчика. Обрабатывает три параметра — задержку, продолжительность и функцию анимации.

colors - {Object} - цвета, которые будут использоваться на разных деталях датчика при рисовании. Может быть указан в шестнадцатеричном формате ('#000000' - '#ffffff') или RGB с/без альфа-канала. По умолчанию:

plate : '#fff',
majorTicks : '#444',
minorTicks : '#666',
title : '#888',
units : '#888',
numbers : '#444',
needle : { start : 'rgba(240, 128, 128, 1)', end : 'rgba(255, 160, 122, .9)' }
highlights — {Массив} — массив цветов бликов, которые можно отобразить на шкале. Если указано как пустой массив или false, не будет нарисовано. По умолчанию:

[{ from: 20, to: 60, color: '#eee' }, { from: 60, to: 80, color: '#ccc' }, { from: 80, to: 100, color: '#999' }]
Где from — значение, с которого начинается выделение, to — значение, до которого выполняется выделение, color — используемый цвет.

Код js скрипта размещается в файловой сиситеме SPIFFS

data.rar

(7.05 КБ) 29 скачиваний

Настройки работы со SPIFFS проводились для отдельной страницы.

two_forum radial indicator v1.0.flp

(1.82 МБ) 29 скачиваний

СпойлерПоказать

..а такой пример работы с SPIFFS, на практике не совсем корректен.
Настройки работы со SPIFFS проводились для всего интерфейса, а не для отдельной
страницы.

Скрипт индикатора в файловой системе SPIFFS .flp

(1.67 МБ) 29 скачиваний

[aidar_i]

Подправил немного последние сообщения.

[Serenkiy83]

Добрый день.

Друзья, благодаря FLProg немного освоил программирование ESP32, но "красивый" web интерфейс для меня дремучий лес.
Хочется сделать простенький график в web интерфейсе отображающий диаграмму прокалки и точку с текущей температурой.

Погуглив нашел как нарисовать график на canvas.
вставил в html код примерно того что хочется изобразить:

СпойлерПоказать

<canvas id="myCanvas" width="306" height="200"></canvas>

<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");

//Переменные
//Точка температуры
let Tx = 180
let Ty = 200-100
//График
let x0 = 0
let y0 = 200-9
let x1 = 22
let y1 = 200-40
let x2 = 88
let y2 = 200-40
let x3 = 176
let y3 = 200-86
let x4 = 190
let y4 = 200-200
let x5 = 264
let y5 = 200-200
let x6 = 282
let y6 = 200-123
let x7 = 306
let y7 = 200-123

ctx.beginPath();
// Точка температуры
ctx.strokeStyle = "rgb(255,0,0)";
ctx.fillStyle = "rgb(255,0,0)";
ctx.arc(Tx, Ty, 2, 0, Math.PI * 2, true);
ctx.fill();
ctx.stroke();

// Текст обозначения осей
ctx.fillStyle = "#00bfff";
ctx.font = "20px serif";
ctx.fillText("T", 6, 15);
ctx.fillText("t", 300, 194);
ctx.stroke();

// Линии координат
ctx.beginPath();
ctx.strokeStyle = "#00bfff";
ctx.moveTo(0, 200);
ctx.lineTo(0, 0);
ctx.lineTo(4, 15);
ctx.moveTo(0, 200);
ctx.lineTo(306, 200);
ctx.lineTo(291, 196);

ctx.stroke();
// График
ctx.beginPath();
ctx.strokeStyle = "rgb(255,255,255)";
ctx.moveTo(x0, y0);
ctx.lineTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.lineTo(x4, y4);
ctx.lineTo(x5, y5);
ctx.lineTo(x6, y6);
ctx.lineTo(x7, y7);

ctx.stroke();
</script>

Изображение выводит.
Но как сделать чтоб параметры из микроконтроллера изменяли координаты точек понять не могу.
Ролик Сергея Глушенко про создание виджета пересмотрел несколько раз, но к сожалению ничего не понял(((
Может кто подскажет как связать параметры с кодом?

[ivansidor012]

Может кто подскажет как связать параметры с кодом

гайвер.портал
crmui
jeeui

в них реализованы графики в более законченном и удобном виде, нежели в видеоприимере

[ivansidor012]

Serenkiy83, хотя можно и в штатном веб:
viewtopic.php?t=7761&start=140#p118732

файлы находятся на flprog.pro

[Serenkiy83]

, хотя можно и в штатном веб:
viewtopic.php?t=7761&start=140#p118732

файлы находятся на flprog.pro

Графики Артёма отличные и я их уже вставил в отдельную страницу web интерфейса. Но они показывают текущее и пришедшие значения, а хотелось бы видеть всю картину (какой участок пройден и какой предстоит) для наглядности, а более детально рассматривать в больших графиках от Артёма. Да и при вводе точек нагрева сразу было бы видно нет ли косяков.
Из видео Сергея поня что все координаты точек надо задавать структурой, но в код встроить не получаеся.

[ArtemArable]

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

[ivansidor012]

. Но они показывают текущее и пришедшие значения

почему только текущее и пришедшее?

там показывается сохраненное (до отключения питания) значения. Т.е. если есп включена неделю - то и покажет что было неделю назад

[ivansidor012]

Да и при вводе точек нагрева сразу было бы видно нет ли косяков

у jeeui есть еще опция "Загрузить из файла": вот можно создать файл на ПК и забить в него данные и открыть этот файл в графиках

[ivansidor012]

Имеющиеся графики работают здесь и сейчас, для прсмотра процесса в реальном времени

не совсем так - там создается и хранится массив с данными, и эти прошлые данные можно посмотреть

[ArtemArable]

Имеющиеся графики работают здесь и сейчас, для прсмотра процесса в реальном времени

не совсем так - там создается и хранится массив с данными, и эти прошлые данные можно посмотреть

Перезагрузка все стирает. Можно конечно на SPIFFS сохранять или карту памяти.

[Serenkiy83]

Может кто подскажет как связать параметры с кодом?

Разобрался, скрипт из вкладки html кода перенёс во вкладку параметры из контроллера, и вместо координат точек внёс переменные v которые программа берёт из подвязанной структуры.
Всё сразу заработало!!!