Как поменять иконку лампочки?

Если вы только начинаете осваивать систему MajorDoMo и чего-то не знаете или не можете понять, то задавайте свои вопросы в этой ветке.

Модератор: immortal

Ответить
Аватара пользователя
Валера
Сообщения: 35
Зарегистрирован: Чт апр 16, 2020 6:03 am
Благодарил (а): 20 раз
Поблагодарили: 5 раз

Как поменять иконку лампочки?

Сообщение Валера » Вс дек 26, 2021 7:10 pm

Друзья, подскажите как поменять отображение лампочки, глаз режет желтый квадрат ,когда лампа включена. :roll:
Понимать меня необязательно. Обязательно любить и кормить вовремя.
Chainik
Сообщения: 1462
Зарегистрирован: Вс янв 10, 2016 11:05 am
Благодарил (а): 260 раз
Поблагодарили: 454 раза

Re: Как поменять иконку лампочки?

Сообщение Chainik » Вс дек 26, 2021 9:38 pm

Вместо штатных элементов типа "выключатель" можете использовать тип "изображение" или html-блок:

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

<style type="text/css">
.gorizontalno {
display: inline-block
}

.button:active {
  transform: scale(0.9, 0.9);
}

</style>


<div class="gorizontalno">
<div class="button">
<div style='display:%Lamp_0380_SP05_205z.Status|"block;none"%' onClick='callMethod("%Lamp_0380_SP05_205z.turnOn");'><img src="\cms\scenes\LampSP03.png"></div>
<div style='display:%Lamp_0380_SP05_205z.Status|"none;block"%' onClick='callMethod("%Lamp_0380_SP05_205z.turnOff");'><img src="\cms\scenes\LampSP03.png" style="background-color: green;"></div>
</div>
</div>
А там используйте любой цвет, какой захочется (в пределах таблицы цветов).
CropImage_r.png
CropImage_r.png (152.22 КБ) 1369 просмотров
За это сообщение автора Chainik поблагодарил:
Валера (Пн дек 27, 2021 4:13 am)
Рейтинг: 1.16%
Аватара пользователя
Валера
Сообщения: 35
Зарегистрирован: Чт апр 16, 2020 6:03 am
Благодарил (а): 20 раз
Поблагодарили: 5 раз

Re: Как поменять иконку лампочки?

Сообщение Валера » Пн дек 27, 2021 5:39 am

Chainik писал(а):
Вс дек 26, 2021 9:38 pm
Вместо штатных элементов типа "выключатель" можете использовать тип "изображение" или html-блок:

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

<style type="text/css">
.gorizontalno {
display: inline-block
}

.button:active {
  transform: scale(0.9, 0.9);
}

</style>


<div class="gorizontalno">
<div class="button">
<div style='display:%Lamp_0380_SP05_205z.Status|"block;none"%' onClick='callMethod("%Lamp_0380_SP05_205z.turnOn");'><img src="\cms\scenes\LampSP03.png"></div>
<div style='display:%Lamp_0380_SP05_205z.Status|"none;block"%' onClick='callMethod("%Lamp_0380_SP05_205z.turnOff");'><img src="\cms\scenes\LampSP03.png" style="background-color: green;"></div>
</div>
</div>
А там используйте любой цвет, какой захочется (в пределах таблицы цветов).
CropImage_r.png
А можно чутка подробнее , попробовал не получилось.
У меня ubuntu server 20.04 :?
Понимать меня необязательно. Обязательно любить и кормить вовремя.
Chainik
Сообщения: 1462
Зарегистрирован: Вс янв 10, 2016 11:05 am
Благодарил (а): 260 раз
Поблагодарили: 454 раза

Re: Как поменять иконку лампочки?

Сообщение Chainik » Пн дек 27, 2021 9:24 am

Берете две картинки (иконки). Одна для включенного состояния, другая -- для выключенного. Можно взять и одну иконку, как в моем примере, но с прозрачным фоном, который для включенного состояния будет заливаться цветом (в моем примере зеленым). Кладете картинку(ки) по какому-нибудь пути в Мажордомо (в моем примере "\cms\scenes\").

Теперь по коду. Стиль CSS "gorizontalno" отвечает за горизонтальное расположение элемента в html-блоке относительно предыдущего. Для единственного элемента в блоке это не особо актуально, а для нескольких (например, для расположения нескольких подобных выключателей в строке меню) будет необходимо.
Стиль CSS "button" отвечает за имитацию нажатия на иконку, когда мы на нее кликаем.

Затем в коде идут две главные строчки, отвечающие за условие отображения картинки, действие при нажатии и внешний вид самой картики.

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

style='display:%Lamp_0380_SP05_205z.Status|"block;none"%'
Вот тут задано условие отображения, при котором картинка будет отображаться, когда значение свойства "Status" объекта "Lamp_0380_SP05_205z" равно "0". Картинка из следующей строки будет отображаться при "1".

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

onClick='callMethod("%Lamp_0380_SP05_205z.turnOn");'
Тут прописано действие при клике на элемент. В данном случае будет запущен метод "turnOn". В самом методе "turnOn" происходит присвоение свойству "Status" значения "1" (помимо команды на включение реле/светильника). После этого картинка из данной строки отображаться перестанет и будет отображаться картинка из второй строки (залитая цветом).

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

img src="\cms\scenes\LampSP03.png"
Тут идет ссылка на картинку иконки.

Во второй строке наша картинка с прозрачным фоном заливается цветом:

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

style="background-color: green;
Можете использовать любой цвет, который нравится: https://colorscheme.ru/html-colors.html
За это сообщение автора Chainik поблагодарили (всего 2):
Валера (Пн дек 27, 2021 4:47 pm) • ~220v (Пн май 30, 2022 3:24 am)
Рейтинг: 2.33%
Аватара пользователя
Svetлая
Сообщения: 238
Зарегистрирован: Вс май 06, 2018 11:36 pm
Благодарил (а): 80 раз
Поблагодарили: 75 раз
Контактная информация:

Re: Как поменять иконку лампочки?

Сообщение Svetлая » Пн дек 27, 2021 2:02 pm

Можно ещё проще сделать.
Для красоты - gif. Если красота не нужна, только функциональность - png картинки.

Создаете в сцене элемент с типом - изображение.
Под каждое состояние - своя картинка. Можно украсить чуть чуть html-ом стандартным
el051.png
el051.png (22.39 КБ) 1279 просмотров
el052.png
el052.png (25.6 КБ) 1279 просмотров
el053.png
el053.png (25.63 КБ) 1279 просмотров
За это сообщение автора Svetлая поблагодарил:
Валера (Пн дек 27, 2021 4:48 pm)
Рейтинг: 1.16%
Аватара пользователя
Svetлая
Сообщения: 238
Зарегистрирован: Вс май 06, 2018 11:36 pm
Благодарил (а): 80 раз
Поблагодарили: 75 раз
Контактная информация:

Re: Как поменять иконку лампочки?

Сообщение Svetлая » Вт дек 28, 2021 2:19 pm

Несколько сумбурно получилось, но с временем как всегда, очень плохо ))

видео как создать на сцене кнопки 2 и 3 режима, просто и расширенное условие.
За это сообщение автора Svetлая поблагодарил:
Валера (Вт дек 28, 2021 6:32 pm)
Рейтинг: 1.16%
Аватара пользователя
Svetлая
Сообщения: 238
Зарегистрирован: Вс май 06, 2018 11:36 pm
Благодарил (а): 80 раз
Поблагодарили: 75 раз
Контактная информация:

Re: Как поменять иконку лампочки?

Сообщение Svetлая » Ср дек 29, 2021 2:53 pm

Сегодня было пол дня свободного времени))
Решила выделить в отдельную рубрику про управление со сцены
и сделала первое видео.
Прошу посмотреть и высказать мнение, что лишнее, чего не хватает.
Спасибо.
За это сообщение автора Svetлая поблагодарили (всего 3):
tarasfrompir (Ср дек 29, 2021 3:38 pm) • homester (Чт дек 30, 2021 3:05 am) • Nail (Чт дек 30, 2021 10:54 am)
Рейтинг: 3.49%
Ответить