Как поменять иконку лампочки?
Модератор: immortal
- Валера
- Сообщения: 35
- Зарегистрирован: Чт апр 16, 2020 6:03 am
- Благодарил (а): 20 раз
- Поблагодарили: 5 раз
Как поменять иконку лампочки?
Друзья, подскажите как поменять отображение лампочки, глаз режет желтый квадрат ,когда лампа включена.
Понимать меня необязательно. Обязательно любить и кормить вовремя.
-
- Сообщения: 1462
- Зарегистрирован: Вс янв 10, 2016 11:05 am
- Благодарил (а): 260 раз
- Поблагодарили: 454 раза
Re: Как поменять иконку лампочки?
Вместо штатных элементов типа "выключатель" можете использовать тип "изображение" или 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>
- Рейтинг: 1.16%
- Валера
- Сообщения: 35
- Зарегистрирован: Чт апр 16, 2020 6:03 am
- Благодарил (а): 20 раз
- Поблагодарили: 5 раз
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
У меня ubuntu server 20.04
Понимать меня необязательно. Обязательно любить и кормить вовремя.
-
- Сообщения: 1462
- Зарегистрирован: Вс янв 10, 2016 11:05 am
- Благодарил (а): 260 раз
- Поблагодарили: 454 раза
Re: Как поменять иконку лампочки?
Берете две картинки (иконки). Одна для включенного состояния, другая -- для выключенного. Можно взять и одну иконку, как в моем примере, но с прозрачным фоном, который для включенного состояния будет заливаться цветом (в моем примере зеленым). Кладете картинку(ки) по какому-нибудь пути в Мажордомо (в моем примере "\cms\scenes\").
Теперь по коду. Стиль CSS "gorizontalno" отвечает за горизонтальное расположение элемента в html-блоке относительно предыдущего. Для единственного элемента в блоке это не особо актуально, а для нескольких (например, для расположения нескольких подобных выключателей в строке меню) будет необходимо.
Стиль CSS "button" отвечает за имитацию нажатия на иконку, когда мы на нее кликаем.
Затем в коде идут две главные строчки, отвечающие за условие отображения картинки, действие при нажатии и внешний вид самой картики.
Вот тут задано условие отображения, при котором картинка будет отображаться, когда значение свойства "Status" объекта "Lamp_0380_SP05_205z" равно "0". Картинка из следующей строки будет отображаться при "1".
Тут прописано действие при клике на элемент. В данном случае будет запущен метод "turnOn". В самом методе "turnOn" происходит присвоение свойству "Status" значения "1" (помимо команды на включение реле/светильника). После этого картинка из данной строки отображаться перестанет и будет отображаться картинка из второй строки (залитая цветом).
Тут идет ссылка на картинку иконки.
Во второй строке наша картинка с прозрачным фоном заливается цветом:
Можете использовать любой цвет, который нравится: https://colorscheme.ru/html-colors.html
Теперь по коду. Стиль CSS "gorizontalno" отвечает за горизонтальное расположение элемента в html-блоке относительно предыдущего. Для единственного элемента в блоке это не особо актуально, а для нескольких (например, для расположения нескольких подобных выключателей в строке меню) будет необходимо.
Стиль CSS "button" отвечает за имитацию нажатия на иконку, когда мы на нее кликаем.
Затем в коде идут две главные строчки, отвечающие за условие отображения картинки, действие при нажатии и внешний вид самой картики.
Код: Выделить всё
style='display:%Lamp_0380_SP05_205z.Status|"block;none"%'
Код: Выделить всё
onClick='callMethod("%Lamp_0380_SP05_205z.turnOn");'
Код: Выделить всё
img src="\cms\scenes\LampSP03.png"
Во второй строке наша картинка с прозрачным фоном заливается цветом:
Код: Выделить всё
style="background-color: green;
- Рейтинг: 2.33%
- Svetлая
- Сообщения: 238
- Зарегистрирован: Вс май 06, 2018 11:36 pm
- Благодарил (а): 80 раз
- Поблагодарили: 75 раз
- Контактная информация:
Re: Как поменять иконку лампочки?
Можно ещё проще сделать.
Для красоты - gif. Если красота не нужна, только функциональность - png картинки.
Создаете в сцене элемент с типом - изображение.
Под каждое состояние - своя картинка. Можно украсить чуть чуть html-ом стандартным
Для красоты - gif. Если красота не нужна, только функциональность - png картинки.
Создаете в сцене элемент с типом - изображение.
Под каждое состояние - своя картинка. Можно украсить чуть чуть html-ом стандартным
- Рейтинг: 1.16%
- Svetлая
- Сообщения: 238
- Зарегистрирован: Вс май 06, 2018 11:36 pm
- Благодарил (а): 80 раз
- Поблагодарили: 75 раз
- Контактная информация:
Re: Как поменять иконку лампочки?
Несколько сумбурно получилось, но с временем как всегда, очень плохо ))
видео как создать на сцене кнопки 2 и 3 режима, просто и расширенное условие.
видео как создать на сцене кнопки 2 и 3 режима, просто и расширенное условие.
- Рейтинг: 1.16%
- Svetлая
- Сообщения: 238
- Зарегистрирован: Вс май 06, 2018 11:36 pm
- Благодарил (а): 80 раз
- Поблагодарили: 75 раз
- Контактная информация:
Re: Как поменять иконку лампочки?
Сегодня было пол дня свободного времени))
Решила выделить в отдельную рубрику про управление со сцены
и сделала первое видео.
Прошу посмотреть и высказать мнение, что лишнее, чего не хватает.
Спасибо.
Решила выделить в отдельную рубрику про управление со сцены
и сделала первое видео.
Прошу посмотреть и высказать мнение, что лишнее, чего не хватает.
Спасибо.
- За это сообщение автора Svetлая поблагодарили (всего 3):
- tarasfrompir (Ср дек 29, 2021 3:38 pm) • homester (Чт дек 30, 2021 3:05 am) • Nail (Чт дек 30, 2021 10:54 am)
- Рейтинг: 3.49%