управление RGB лентами
Модератор: immortal
-
- Сообщения: 2801
- Зарегистрирован: Пн дек 26, 2016 9:51 am
- Откуда: Екатеринбург
- Благодарил (а): 380 раз
- Поблагодарили: 693 раза
- Контактная информация:
Re: управление RGB лентами
Вроде выглядит не так плохо
Отправлено с моего Redmi Note 3 через Tapatalk
Отправлено с моего Redmi Note 3 через Tapatalk
Если вам помогло данное сообщение, не поленитесь нажать кнопку "спасибо".
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
-
- Сообщения: 2801
- Зарегистрирован: Пн дек 26, 2016 9:51 am
- Откуда: Екатеринбург
- Благодарил (а): 380 раз
- Поблагодарили: 693 раза
- Контактная информация:
Re: управление RGB лентами
Вроде выглядит неплохо
Отправлено с моего Redmi Note 3 через Tapatalk
СпойлерПоказать
Если вам помогло данное сообщение, не поленитесь нажать кнопку "спасибо".
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
- lanket
- Сообщения: 1168
- Зарегистрирован: Вт окт 14, 2014 11:27 pm
- Откуда: Санкт-Петербург
- Благодарил (а): 260 раз
- Поблагодарили: 163 раза
Re: управление RGB лентами
А белым светом не пользуетесь?directman66 писал(а):Вроде выглядит неплохоОтправлено с моего Redmi Note 3 через TapatalkСпойлерПоказать
Отправлено с моего Redmi Note 3 через Tapatalk
Разработка голосового асистента для Мажордомо по любому ключевому слову.
Обсужение
gitHub 2й версии терминала
GitHub модуля для МД
gitHub сырого модуля 2й версии
Connect
Rasberry Pi 2, MDM, MySensors. И говорящий апельсин.
Обсужение
gitHub 2й версии терминала
GitHub модуля для МД
gitHub сырого модуля 2й версии
Connect
Rasberry Pi 2, MDM, MySensors. И говорящий апельсин.
-
- Сообщения: 2801
- Зарегистрирован: Пн дек 26, 2016 9:51 am
- Откуда: Екатеринбург
- Благодарил (а): 380 раз
- Поблагодарили: 693 раза
- Контактная информация:
Re: управление RGB лентами
Это как пример,белый добавить не проблема. Я еще не разобрался как реагировать на нажатия.
Если вам помогло данное сообщение, не поленитесь нажать кнопку "спасибо".
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
-
- Сообщения: 2801
- Зарегистрирован: Пн дек 26, 2016 9:51 am
- Откуда: Екатеринбург
- Благодарил (а): 380 раз
- Поблагодарили: 693 раза
- Контактная информация:
Re: управление RGB лентами
Установил на стандартной прошивке. Функционала хватает. При корректной настройке сети работает без проблем.
Если вам помогло данное сообщение, не поленитесь нажать кнопку "спасибо".
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
- Kutuzoff
- Сообщения: 14
- Зарегистрирован: Пт ноя 20, 2015 1:43 pm
- Благодарил (а): 3 раза
- Поблагодарили: 0
Re: управление RGB лентами
Подскажите пожалуйста, как такой колорпикер добавить на сцену? Не могу понять, куда какой код вставлять. И как его привязать к свойству color?
СпойлерПоказать
-
- Сообщения: 2801
- Зарегистрирован: Пн дек 26, 2016 9:51 am
- Откуда: Екатеринбург
- Благодарил (а): 380 раз
- Поблагодарили: 693 раза
- Контактная информация:
Re: управление RGB лентами
Дополнтельный код css
основной код
тип html на сцене
Код: Выделить всё
* {
box-sizing: border-box;
}
html {
height: 100%;
background-image: -webkit-radial-gradient(#ffffff, #708090);
background-image: radial-gradient(#ffffff, #708090);
}
#button {
font-family: sans-serif;
position: absolute;
width: 65px;
height: 65px;
left: 70;
top: -17;
background-color: black;
border-radius: 50%;
color: white;
text-align: center;
cursor: pointer;
}
#button:before {
content: "\2630";
font-size: 40px;
}
.drop-down,
.drop-down + ul {
-webkit-animation: drop 100ms forwards cubic-bezier(1, 0, 0.755, 1.47);
animation: drop 100ms forwards cubic-bezier(1, 0, 0.755, 1.47);
}
.rise-up,
.rise-up + ul {
-webkit-animation: rise 400ms forwards cubic-bezier(1, 0, 0.755, 1.47);
animation: rise 400ms forwards cubic-bezier(1, 0, 0.755, 1.47);
}
.rise-up + ul li {
pointer-events: none;
}
.rise-up {
z-index: 1;
}
li {
z-index: -1;
position: absolute;
width: 75px;
height: 75px;
left: 50%;
margin: -37.5px;
list-style: none;
border-radius: 50%;
-webkit-transition: -webkit-transform 300ms cubic-bezier(1, 0, 0.755, 1.47);
transition: -webkit-transform 300ms cubic-bezier(1, 0, 0.755, 1.47);
transition: transform 300ms cubic-bezier(1, 0, 0.755, 1.47);
transition: transform 300ms cubic-bezier(1, 0, 0.755, 1.47), -webkit-transform 300ms cubic-bezier(1, 0, 0.755, 1.47);
}
li:nth-child(1) {
background-color: red;
}
.drop-down + ul li:nth-child(1) {
-webkit-transform: translateX(0px) translateY(-100px);
transform: translateX(0px) translateY(-100px);
}
li:nth-child(2) {
background-color: #ffbf00;
}
.drop-down + ul li:nth-child(2) {
-webkit-transform: translateX(70.71068px) translateY(-70.71068px);
transform: translateX(70.71068px) translateY(-70.71068px);
}
li:nth-child(3) {
background-color: #80ff00;
}
.drop-down + ul li:nth-child(3) {
-webkit-transform: translateX(100px) translateY(0px);
transform: translateX(100px) translateY(0px);
}
li:nth-child(4) {
background-color: #00ff40;
}
.drop-down + ul li:nth-child(4) {
-webkit-transform: translateX(70.71068px) translateY(70.71068px);
transform: translateX(70.71068px) translateY(70.71068px);
}
li:nth-child(5) {
background-color: cyan;
}
.drop-down + ul li:nth-child(5) {
-webkit-transform: translateX(0px) translateY(100px);
transform: translateX(0px) translateY(100px);
}
li:nth-child(6) {
background-color: #0040ff;
}
.drop-down + ul li:nth-child(6) {
-webkit-transform: translateX(-70.71068px) translateY(70.71068px);
transform: translateX(-70.71068px) translateY(70.71068px);
}
li:nth-child(7) {
background-color: #8000ff;
}
.drop-down + ul li:nth-child(7) {
-webkit-transform: translateX(-100px) translateY(0px);
transform: translateX(-100px) translateY(0px);
}
li:nth-child(8) {
background-color: #ff00bf;
}
.drop-down + ul li:nth-child(8) {
-webkit-transform: translateX(-70.71068px) translateY(-70.71068px);
transform: translateX(-70.71068px) translateY(-70.71068px);
}
.selected {
z-index: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
@-webkit-keyframes rise {
from {
-webkit-transform: translateY(00px);
transform: translateY(00px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes rise {
from {
-webkit-transform: translateY(00px);
transform: translateY(00px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes drop {
to {
-webkit-transform: translateY(00px);
transform: translateY(00px);
}
}
@keyframes drop {
to {
-webkit-transform: translateY(00px);
transform: translateY(00px);
}
}
Код: Выделить всё
<div id='button'></div>
<ul id='swatches'> <li><a href='1'></a></li>
<li><a href='1'></a></li>
<li><a href='2'></a></li>
<li><a href='3'></a></li>
<li><a href='4'></a></li>
<li><a href='5'></a></li>
<li><a href='6'></a></li>
<li><a href='7'></a></li></ul>
<script>
var button = document.getElementById('button'),
drop = document.getElementsByClassName('drop-down')[0],
rise = document.getElementsByClassName('rise-up')[0];
button.addEventListener('click', menuClick, false);
function menuClick(){
if (button.classList.contains('drop-down')){
button.classList.remove('drop-down');
button.classList.add('rise-up');
} else {
button.classList.remove('rise-up');
button.classList.add('drop-down');
}
}
var swatch = document.getElementById('swatches');
swatch.addEventListener('click', swatchMenu, false);
function swatchMenu(e){
var target = e.target,
selected = swatch.querySelector("li.selected");
if(selected){
selected.classList.remove('selected');
}
if(target.nodeName.toLowerCase() === 'li'){
target.classList.toggle('selected');
button.classList.remove('drop-down');
button.classList.add('rise-up');
}
}
//alarm(swatch.firstChild.nodeValue);
alarm("123");
</script>
- За это сообщение автора directman66 поблагодарил:
- Kutuzoff (Ср апр 04, 2018 9:08 pm)
- Рейтинг: 1.16%
Если вам помогло данное сообщение, не поленитесь нажать кнопку "спасибо".
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
- nick7zmail
- Сообщения: 7573
- Зарегистрирован: Пн окт 28, 2013 8:14 am
- Откуда: Екатеринбург
- Благодарил (а): 121 раз
- Поблагодарили: 2010 раз
Re: управление RGB лентами
Как добавить подсказали.
А действия проще всего привесить на OnClick к <a href>. Там прописать гет-запрос к апи-функциям.
А действия проще всего привесить на OnClick к <a href>. Там прописать гет-запрос к апи-функциям.
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
-
- Сообщения: 2801
- Зарегистрирован: Пн дек 26, 2016 9:51 am
- Откуда: Екатеринбург
- Благодарил (а): 380 раз
- Поблагодарили: 693 раза
- Контактная информация:
Re: управление RGB лентами
Ждем маркет сцен и элементов. Потом видимо будем допиливать.
Если вам помогло данное сообщение, не поленитесь нажать кнопку "спасибо".
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram