Новый вид главной страницы, чего не хватает?

[renat2985]

В будущем будит доступен еще 1 вид главной страницы, его можете посмотреть ниже. Что бы вы хотели еще видеть на главной странице? И у нас достаточно много пустого места в "Страница устройств" с право (там где цифры 1 1), что можно туда еще добавить?

[2007-i]

ШИМ управление будет? Если да то можно настройки шим (pwm) там сделать, с выбором выхода gpio и значением например с 0-255. Можно и ползунок регулирования поставить для шим, что бы можно было управлять со страницы заранее установленным (настроенным на определенный gpio) значением. Это удобно было бы для управления светодиодной ленты или люстрой (если есть нужная силовая обвязка на выходе). Это лично моё мнение.

[7FKS]

Здравствуйте. Мне кажется, что просто необходима графическая индикация состояния устройств. Видно, что интерфейс построен в стиле жёсткого минимализма и понятно с чем это связано, но всё же могу предложить пожертвовать 3 килобайта и ввести, хотя бы, простейшие картинки. На мой взгляд требуется минимум 2 шт.

Это конечно не решает поставленного задания: заполнить пространство "там где цифры 1 1", но должно дополнить и украсить интерфейс. Кстати, а что за цифры: 1 1?

[renat2985]

@2007-i, ШИП в ближайшее время не планируем.
@7FKS, хорошие мысли. Так же хорошая идея по смене цвета кнопки в зависимости от ее статуса. Думаю сделаем. Но картинки все же предлагаю хранить не в png а в css (base64), такой способ будит меньше дергать ESP. @7FKS, на странице setup.htm в последних версиях мы используем эти картинки сигнала WiFi и замочки. Предлагаю с этого набора взять и лампу(RGB проект), жалюзи и sonoff - нужно найти что-то в виде розетки или электричества. Если у вас есть желание, можете помочь. Размеры 16x16, можете фон внутри сделать прозрачным, все остальное белым, если у вас получится сжать компактно в base64 мы их добавим.

P.S. цифры "1 1" пока просто наполнитель.

[7FKS]

@renat2985 Впервые услышал о css (base64), т.к. в сайто-строении не силён... Попробовал сделать картинки для SonOFF: На картинке SonOFF_2 взят с набора из предыдущего поста. Winamp на первой картинке получился сам собой :) Gif-ки получились по 0,9кб, а текстом 1,2кб SonOFF 16X16 gif-Base64 - 2.txt SonOFF 16X16 gif-Base64.txt

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

[renat2985]

Достаточно большой размер у вас получился, картинку можно уложить в такие размеры. <img src="(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAkklEQVQ4jc3QMQrCQBhE4Q9ipYKNsVU0HkCFpNJKIq73v4+FWTASzUYbB37Y5s0Oj3/LFAUqnHFFaN4Vtph0gTOUuCVe2TBg1fySCscLWGomXb4oqDGOKxYDVwTkrx6KAQWbLpFwSIB372AY4fQBPiL7VMBDat0Bt6T1JdeWGjBPhWOepa6HwjF7PdL6kkmQ9lPu7WseJohUYa0AAAAASUVORK5CYII=)">

Давайте отложим пока это. На днях выложили с Сергеем на github новую версию. Ее уже можно попробовать. Но толком еще ничего не работает. :) В ближайшие недели думаю все подкорректируем. Нам нужны люди которые протестируют сборку и напишут о найденных проблемах.

[2007-i]

Для esp32 наверное нужно будет пины переписывать?

[renat2985]

@2007-i Простой сменой пинов вы не отделаетесь, танцы с бубном тоже потребуются. Там не так все просто. Пожалуйста создавайте новые темы, не пишите все в одну.

[2007-i]

Ее уже можно попробовать. Но толком еще ничего не работает. :) В ближайшие недели думаю все подкорректируем. Нам нужны люди которые протестируют сборку и напишут о найденных проблемах.

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

[renat2985]

@2007-i, все верно. Для того что бы включить новую версию вам необходимо нажать на эту кнопку:

[vobis77]

А мне не хватает показаний влажности воздуха возле температуры. Или я просто не нашёл где это включить? Да и я использую Sanoff TH10.

[renat2985]

@vobis77 мы работает над этим. Пока данные влажности недоступны.

[grossbel]

Друзья, выскажу лично мое мнение, в шапке должны быть часы (можно календарь добавить), все настройки, журналы, лучше спрятать в боковое меню, на главной странице должно быть только: информация с датчиков модуля (график или цифровое отображение), статус модуля(в каком состоянии выходы) и управление этим модулем, остальные модули должны располагаться ниже и иметь упрощенный дизайн, в боковом меню находятся настройки и конфигурация модуля, если есть необходимость перенастроить другой модуль, то кликаем на его шапку и переходим на его главную страницу. Теперь про дизайн, не обижайтесь, но это вырви глаз, попробуйте сделать темную тему, избавьтесь от рамок и теней, меньше цветов, это не новогодняя елка, это система достойная уважения даже на данном этапе, кнопка управления не должна сливаться с рамками комментариев или названий, она теряется. Шрифт, посмотрите на "Roboto" современный и приятный. Избавьтесь от названия устройство, а то это похоже как на изделие 19п117м у военных, назовите просто - модуль. И необходимо отображение статуса выхода модуля, как уже писали выше. Не воспринимайте это в штыки, я просто прямо высказал взгляд со стороны, немного усилий и все у Вас получиться.

[7FKS]

Серыми тонами и без теней надо постараться чтобы получился достойный дизайн. Нарисуй что имеешь ввиду. По моему это будет уныло, если у тебя конечно не талант.

[renat2985]

@grossbel действительно, нарисуйте свой вариант. Если он понравится людям, я его сделаю.

[grossbel]

[grossbel]

Страница разбита на три колонки, на экране смарта они выстраиваются в столбик, на этих примерах нет фона, нет времени разбираться куда он пропал, это примеры просто заготовки, я не профессиональный дизайнер и не веб программист, просто любитель, фон был такой

[grossbel]

Ренат, отправил Вам на почту, вдруг пригодиться.

[renat2985]

Получил. Ждем отзывы пользователей. Фон лишнее, т.к. он слишком тяжелый. Страница будит долго грузиться.

[grossbel]

Фон можно из WEB хранилища подтягивать, чтоб в ESP не хранить и память не забивать.

[renat2985]

Сделал видео о том как можно достаточно просто изменить внешний вид кнопок, полей вода и других элементов дизайна: https://youtu.be/PVDottlyOxo После загрузки новых дизайнов заметил некоторые тормоза в ESP, возможно ей тяжело работать с такими большими файлами. Тестируйте на свой страх и риск.

[grossbel]

Ренат, добрый день, вот лазил на просторах интернета накопал такую вещь, может пригодится для проекта http://framework7.io/

[renat2985]

@grossbel спасибо :)

[alxnovo]

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

[renat2985]

Зачем вы правите код? Почему просто не сменить дизайн. Например тот же block он замечательно смотрится на телефонах.

[alxnovo]

@renat2985 Я правил json страницы управления жалюзями, а не главную страницу. Дизайн block хорош для отладки и созерцания максимума информации на экране, но не для ежедневного использования на смартфоне: кнопки маленькие, очень близко к друг другу находятся что приводит к ложным нажатиям, много лишней информации. Та же шапка занимает треть экрана, при этом кроме информации где и каким устройством управляешь (хотя эта же информация повторяется в блоке ниже) не несёт практического смысла...не нужно мне ежедневное переключение дизайна на смартфоне или помощь, попасть в кнопку рефреш почти не реально, пусть они будут в боковом выезжающем меню, а не на основном экране.

Я понимаю что на вкус и цвет фломастеры разные и у проекта сейчас главное не рюшечки, а функционал. И это ваш проект и вы вольны делать что угодно и как вам удобно! Мои мысли лишь на будущее :)

Вот как выглядит дизайн блок на iPhon'е

[renat2985]

В чем-то вы правы, шапки главных страниц в следующих версиях сделаю меньше.

[renat2985]

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

Что касается ваших попыток отредактировать страницы pages.htm , вы лучше зайдите на страницу конфигурации модулей устройсва. И отключите DDNS и другие не нужные вам модули. Тем самым устройство будет работать немного шустрее и у вас визуально страница будет такой же как мы не показываете. То есть многие блоки скроются.

[alxnovo]

@renat2985 Шапка уже лучше выглядит, если начали редактировать то неплохо бы блок "дизайн-обновить-помощь" выровнить по правому краю. И этот ведь дизайн на маленьких экранах будет, а на больших останется как был?

В page.htm у меня удалены не нужные блоки и выключены DDNS, MQTT, DHT, D18B20, A0

В видео видно что оставил в page.htm https://youtu.be/OCjAjXNVioo в конце видно как передёргивается таблица таймеров.

[renat2985]

Сделал. Код выложил на github. Если вам интересно можете пробовать. Да, эти фиксы касаются только маленьких экранов. По поводу refresh, с этим ничего не сделать.

[alxnovo]

Отлично! Шапка теперь смотрится гармоничнее и не занимает лишнего места

А как можно скачать отдельно файл, например, setup.json?

[grossbel]

Ренат, подкорректировал русский языковой файл, привел немного в порядок, чтоб глаза не резали названия некоторых пунктов. Отправил Вам на почту.

[renat2985]

@grossbel изменил, спасибо. Добавлю в ближайшие дни.

[grossbel]

Ренат, слово управление не стоило изменять на упралениЯ, правильней будет управлениЕ, хоть там и заложено множество функций, но оно в единственном роде. В списке таймера слово Удалить можно не писать с заглавной буквы в названии столбца, его можно вообще не писать, оно написано на кнопке, а еще бы я эту кнопку отобразил бы просто иконкой - крестик и так будет понятно, что это удалить, зато займет меньше места по ширине на мобильных экранах. Было бы не плохо иметь возможность редактирования и главной страницы, сейчас по возможности привожу в порядок страницу таймер, как подправлю эргономику, перешлю. Вообще есть задумки по интерфейсу Вашей разработки, но для проработки деталей нет представления логики построения главной страницы.

[renat2985]

Управления переименовал в Управление. Появится в следующей версии. От таймеров мы скорее всего скоро избавимся, их можно будит добавлять на странице Сценариев. О кнопке удалить, вы правы, сейчас добавлю иконку. Что касается редактирования главной страницы я думаю об этом. Но там есть некоторые проблемы, когда их решу можно будет редактировать и главную страницу.

[renat2985]

@grossbel иконки для проекта мы используем вот эти: https://www.iconfinder.com/iconsets/google-material-design-icons

Для кнопки удаления скорее всего подойдет вот такая иконка: https://www.iconfinder.com/icons/352303/delete_icon#size=16

На сайте можно нажать на Copy Base64 PNG и получить такой код, который мы вставляем в css data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAUklEQVQ4jWNgGGzAmoGBIYKBgSGNgYHhEwMDw38o/sjAwJAKlbPEZ8AaJE248ApCrogggAkCQi4YNWBIGPAPj+Z/xBgwH4ch/xgYGGYTYwB9AQDdSFjNz7nuOgAAAABJRU5ErkJggg==

Вы можете эту иконку сделать белой, и написать ее код? т.к. именно белого цвета она лучше смотрится. Но важно что бы код не увеличился сильно.

Так же буду благодарен если сможете сделать эту иконку тоже белой и напишете ее код, она нужна для другой страницы: https://www.iconfinder.com/icons/352272/cloud_icon#size=16

[grossbel]

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA r0lEQVQ4jcWSOw6BARAGZyUU4tEpXIBG4ihO4AouoHQFWjdQCLVWTUIcQSVqZFQeidfvkZh2M99+ 2Sz8m3g0UEtADdgB84jYJEpUc2pf3Xlhr3bV4is5o059zERN3xNDbaijJ/KJ1r2twwTiiaVauQ5o vyFfM1TzoS6BaqIL39ILdQsUPgxYp4DZhzLAIQV0vggYAKA21e2bRxyrufMrq1mgDpRf1QZWEbH4 ovkPOQIMLTXKNRW7ugAAAABJRU5ErkJggg==

белое облачко, а это корзинка

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA kklEQVQ4je2SsQ0CMRAEZ5FjKiBzRgU0QfaN0AcSheBCqIDsMyog/WBJjOSHxxaWyNjkfL7d0QUn 23tgpE8xAKOka0/aNuHlYwdsgDVwyhXgDhxyvUm6lKFt8U5uK5XZ2QaSBttDbW1JqezDgudcAwAq m1XD3NQf8CPAVPG/zZYAxw+QKc/mKk/5Wz1POdruZcQHJghSOxtB4NsAAAAASUVORK5CYII=

[grossbel]

По поводу таймера, я бы лучше оставил отдельно,

1. Таймер - это отработка по времени
2. Термостат - отработка по температуре и влажности
3. ADC - отработка по уровню сигнала adc (не надо его обзывать освещенностью, на нем может висеть и аналоговый датчик температуры либо уровня)
4. Логика - все остальные логические сценарии включения/выключения иначе будет мешанина в списке, а это ведет к усложнению понимания проекта простым пользователем, например 8-ми летним ребенком.

[renat2985]

Белая рамка вокруг картинки, уберите. По 3 пункту, предложите свое название, кроме ADC.

[grossbel]

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA aElEQVQ4jWNgGGjAiMz5//+/BQMDgwwDAwMfAwNDP5RmYGBg+MTAwFAIpZ8wMjKewGra////1/wn DNbgdAHUkBC8TmZkJGjAfwIGoOhhwqeYGDBqAI0M+I1HPYYcNgN6cBjyGyo3yAAAXoc8SmsJeyQA AAAASUVORK5CYII=

эта должна быть без рамки

[renat2985]

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