Предложения по дизайну UI

[shamrockpl]

После покупки Node-MCU и Sonoff`a для тестов, нашел на просторах интернета данную прошивку. Сергею и Ренату огромное спасибо, так как имел схожую задумку по реализации. Тут неоднократно поднимались темы про смену пользовательского интерфейса. На суд сообщества всуну и я свои 5 копеек (то что было подсмотрено в интернетах и подогнано под эту прошивку):

Итак: 1.1 На первом слайде оперативная информация с периферии в виде виджетов с возможностью добавления, удаления, изменения размеров (сетка плавающая)
1.2 Сверху вкладки, которые дают возможность группировать информацию по определенному признаку или локации

2.1 Список устройств в сети с возможностью их настройки (настройка происходит без непосредственного перехода на адрес настраиваемого устройства - в всплывающем окне подгружается страница настроек с необходимого устройства. Насколько я понял, в данной версии редактора страниц из прошивки есть функция подгрузки стороннего сайта на страницу)

Ну и так как название для прошивки, разработчики, еще не представили сообществу. Хочу предложить свой вариант. Так как прошивка имеет несколько направлений - название "Shamrock" ( трилистник или клевер ) очень актуальное.

Если это будет интересно, готов предложить помощь в визуализации и разработке.

[renat2985]

Мне понравился ваш дизайн. Цвета, гамма, все как я люблю. Пока на мой взгляд у вас получилось лучше всех остальных предложенных вариантов. 1.2 Локация поддерживаю. 2.1 О недоступных устройствах идея интересная. Но пока не понимаю как ее реализовать и нужно ли это? Каждое устройство раз в 5-10 минут, не помню точное время отправляет в сеть пакет, и другие устройства должны ответить. Те которые отвечают попадают в файл ssdp.list.json то есть мы знаем только активные устройства которые ответили...

Какие предлагаете библиотеки использовать в дизайне?

[shamrockpl]

О библиотеках еще не задумывался. Цвета - bootstrap (он уже Вами используется) Дизайн на 70% "слизан" с проекта myDevices под названием Cayenne (https://mydevices.com/cayenne/features/) и набросан как черновой вариант за вчерашний вечер. Раньше мне попадались на глаза подобного рода библиотеки для сортировки, ресайза. Тут основной момент их размер. Но если убрать из ФС файлы для переключения видов отображения (стандарт, инлайн), то можно выиграть немного места. Я не силен в js, к сожалению, но перелопатить код и разобраться смогу. Сей час начну заниматься поисками. 2.1 Тут не столько для интерфейса, как такового, нужно отображение устройств которые оффлайн. Тут скорей для работы сценариев. Я бегло глянул код Сергея, основная часть функционала в грядущем обновлении будет завязана на них. Но тут возникает закономерный вопрос. Как обрабатывать событие если некое устройство выключено, зависло и пр.? Это я к тому, что файл ssdp.list.json, с моей точки зрения, должен содержать данную информацию. Ну а вывести ее в интерфейс не такая уж и проблема.

[shamrockpl]

Покопался в библиотеках. Заинтересовала парочка следующих:

1. https://haltu.github.io/muuri/, из минусов тянет за собой еще две небольшие библиотеки
2. https://packery.metafizzy.co/ , относительно небольшая и инициализируется без jQuery
   • нужна будет штатная библа от бутстрапа для подгонки интерфейса под мобильные устройства. Ну и еще ajax - для обновления данных.

Ренат, если Вам это интересно, готов за недельку набросать рабочий прототип страницы

[renat2985]

@shamrockpl, вы молодец. Но все эти библиотеки занимают около 40кб, к сожалению это слишком много для ESP, она не сможем отдать такие объемы и зависнет. Насколько я помню, есть более легкие решения на css3, там можно вложится в < 3кб. Поищите в этом направление в google. Буду рад если попробуете внедрить пока в какой-то из текущих шаблонов.

Интересная статья, полностью не читал: https://aerolab.co/blog/flexbox-grids/

[shamrockpl]

@renat2985, спасибо, на выходных почитаем! Вы правы. Вес muuri приличный. А вот packery.min, как не странно, в сжатом виде до 8кб (gzip не пробовал, смотрел rar`ом ) и она независима. "Буду рад если попробуете внедрить пока в какой-то из текущих шаблонов." - что именно? Если только дизайн виджетов, остальное просто не впишется в Ваш функционал.

[renat2985]

Я работал с packery.min. Но давайте попробуем пока сделать на css. Дизайн Life схож с предлагаемым вашим. Там есть квадратные блоки, которые можно более красиво попробовать сортировать используя css возможно с маленькой помощью js. Если сможете предложить хорошее решение будет здорава. Потом предлагаю найти модули чекбоков, и больших кнопок. Которые тоже внедрим в уже существующий дизайн. А потом начнет переделывать Default шаблон под ваш эскиз.

[shamrockpl]

Принято. На неделе обдумаю.

[renat2985]

@shamrockpl вот эта хорошая альтернатива найденным вами библиотекам, в сжатом видео она занимает всего 600 байт. http://callmecavs.com/bricks.js/ можно внедрить ее.

[shamrockpl]

@renat2985, спасибо, уже кручу ее.

[renat2985]

У вас получилось скомпилировать исходники проекта? Если нет, пишите в skype: renat2985, т.к. лучше делать под новую версию.

[shamrockpl]

Исходники не компилировал. Посмотрел что IDE сыплет ошибками, отложил на завтра. Если у вас есть готовые - не откажусь. В скайп постучал.