[Дизайн] Сцена "Hitech"

Оформление сцен, меню, страниц

Модераторы: immortal, newz20

Ответить
zoz
Сообщения: 74
Зарегистрирован: Чт авг 11, 2016 1:19 am
Откуда: Киев
Благодарил (а): 6 раз
Поблагодарили: 40 раз

[Дизайн] Сцена "Hitech"

Сообщение zoz » Ср фев 03, 2021 6:52 pm

Часто в фильмах мы видим крутые интерфейсы, но из-за своей перегруженности дизайном они не очень то и удобны в использовании. Попытался найти какой-то компромисс и нарисовал дизайн в стиле модных UI.

Хотелось максимально компактно разместить всё управление и индикацию на одном экране и избавится от каши из разных иконок.
За основу решил взять элемент комната(условно), где все информеры как температура влажность освещенность прописаны сразу справа от названия комнаты. Все информеры со значением 0-1 прописаны списком снизу под комнатой, а состояние "1"(включено, открыто, сработало) показывает загорающийся индикатор. Для важных вещей таких как открытый замок или протечка эти информеры оранжевые.
screen.jpg
screen.jpg (416.05 КБ) 1283 просмотра
Размер 1280x720 пх.

Демонстрация работы:
https://youtu.be/GqxFFJXz1ik

UPD: Version 02
Сделал версию где многое завязал на модули

Сцена и нужные файлы:
scene_HItech_v02.zip
(583.15 КБ) 74 скачивания
--------------------
СпойлерПоказать
старая версия
scene_HItech.zip
(469.38 КБ) 44 скачивания
Установка:
Есть подробное видео: https://youtu.be/-ofmlvXTPv8

импортировать сцену и нужно скопировать все графические элементы
кнопки копируем в кнопки
scenes/styles/button копируем btn_a.png, btn_l.png
scenes/styles/switch i_btn.png, i_btn_off.png, i_btn_on.png
остальное в scenes

Должна быть включена темная тема в настройках MD (в css несмог победить)
Ставим из маркета:
FontAwesome
OpenWeatherMap, настраиваем со своим апи ключем
Виджет Состояние системы
Курс валют
Формат даты

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

Из того что хотел, но не смог (Может кто подскажет):
1.История событий недолжна менять размер из-за длинных строк, а то сейчас низ плавает. И нужно поменять дизайн кнопки отправить.
также новые сообщения должны быть внизу.
2. Нужно придумать решение для правой части с кнопками управления, сейчас это просто кусок из меню выглядит инородным.

Пожелания или мысли вслух:
Было б хорошо из ПУ иметь возможность создавать блок комнаты для сцены с возможностью отключить лишнее ПУ. (ато как сейчас добавлять это в сцену по одной штуке очень долго). А у дизайна ПУ должна быть возможность менять иконки и отключать текст. Такими готовыми блоками было б намного проще формировать сцены.
Последний раз редактировалось zoz Ср фев 10, 2021 5:22 am, всего редактировалось 3 раза.
За это сообщение автора zoz поблагодарили (всего 9):
dengi.76 (Ср фев 03, 2021 8:38 pm) • skysilver (Ср фев 03, 2021 8:59 pm) • Axeffekt (Ср фев 03, 2021 9:18 pm) • xor (Ср фев 03, 2021 10:51 pm) • homester (Чт фев 04, 2021 2:07 am) • Jilber (Чт фев 04, 2021 1:11 pm) • Sergey.Chek (Ср фев 17, 2021 4:47 pm) • Divan (Вс фев 28, 2021 9:05 pm) • Molostov (Пн мар 01, 2021 2:08 am)
Рейтинг: 10.59%
Домик Алисы - Orange Pi PC, DietPi | +BroadlinkRM+esp8266(espEasy)+zigbee(sonoff,Aqara)
homester
Сообщения: 175
Зарегистрирован: Вт дек 24, 2019 2:09 pm
Благодарил (а): 86 раз
Поблагодарили: 29 раз

Re: Дизайн сцена Hitech

Сообщение homester » Пт фев 05, 2021 3:01 am

zoz писал(а):
Ср фев 03, 2021 6:52 pm
Из того что хотел, но не смог (Может кто подскажет):
1.История событий недолжна менять размер из-за длинных строк, а то сейчас низ плавает.
У меня вот-так:

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

<style>
.eventHistory {
 width: 280px;
 height: 345px;
 border-radius: 10px;
 border: 1px solid rgba(255,69,0, 0.9);
 background: rgba(0, 0, 0, 0.5);
 display: flex;
 text-align: left;
 padding: 15px 5px 25px 5px;
 overflow-x:hidden;
 } 
</style>
<div class="eventHistory">[#module name="shoutbox" limit="12" reverse="1" mobile="1"#]</div>
За это сообщение автора homester поблагодарили (всего 5):
xor (Пт фев 05, 2021 3:14 am) • Chainik (Пт фев 05, 2021 8:47 am) • Jilber (Сб фев 06, 2021 11:16 am) • bua (Вт фев 16, 2021 4:01 pm) • Molostov (Пн мар 01, 2021 2:08 am)
Рейтинг: 5.88%
Raspberry Pi3 B+, v4.44, внешняя з/к
zoz
Сообщения: 74
Зарегистрирован: Чт авг 11, 2016 1:19 am
Откуда: Киев
Благодарил (а): 6 раз
Поблагодарили: 40 раз

Re: [Дизайн] Сцена "Hitech"

Сообщение zoz » Ср фев 10, 2021 5:20 am

Обновил версию и добавил демонстрационное видео. Также есть видео по установке и настройке.
За это сообщение автора zoz поблагодарили (всего 2):
skysilver (Ср фев 10, 2021 9:58 am) • Molostov (Пн мар 01, 2021 2:08 am)
Рейтинг: 2.35%
Домик Алисы - Orange Pi PC, DietPi | +BroadlinkRM+esp8266(espEasy)+zigbee(sonoff,Aqara)
zoz
Сообщения: 74
Зарегистрирован: Чт авг 11, 2016 1:19 am
Откуда: Киев
Благодарил (а): 6 раз
Поблагодарили: 40 раз

Re: [Дизайн] Сцена "Hitech"

Сообщение zoz » Ср фев 10, 2021 7:11 pm

Добрались руки до иконок погоды.
Снимок.JPG
Снимок.JPG (18.53 КБ) 889 просмотров
оказалось в openweather кодов погоды намного больше чем картинок
https://websygen.github.io/owfont/
сделаны они как FontAwesome и подключаются также, качаем с гитхаба архив копируем в папку /3rdparty/owfont
owfont-master.zip
(1.07 МБ) 43 скачивания
В css сцены добавляем

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

@import url("/3rdparty/owfont/css/owfont-regular.min.css");
html блок у меня такой:

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

<div> <i class="owf owf-%ow_fact.condCode% owf-5x owf-pull-left"></i>
	<div style="font-size:16px;text-align:left;">
    	<i class="fa fa-thermometer-half"></i>%Sensor_temp02.value%&deg;C<br>
    	<b>%ow_fact.weather_type%</b>  </div>
   	 	<div style="font-size:14px;text-align:left;">
    	<i class="fa fa-tint"></i>&nbsp;%ow_fact.humidity%%&nbsp;&nbsp;<i class="fa fa-bars"></i> %Sensor_pressure01.value%&nbsp;мм&nbsp;&nbsp;<i class="fa fa-flag" aria-hidden="true"></i> %ow_fact.wind_speed% м/c<br>
    	<b>%ow_fact.wind_direction_full%</b>
	</div>
</div>
За это сообщение автора zoz поблагодарили (всего 2):
Sergey.Chek (Ср фев 17, 2021 4:40 pm) • Molostov (Пн мар 01, 2021 2:08 am)
Рейтинг: 2.35%
Домик Алисы - Orange Pi PC, DietPi | +BroadlinkRM+esp8266(espEasy)+zigbee(sonoff,Aqara)
Ответить