управление RGB лентами

Подключение исполнительных устройств, датчиков, контроллеров.

Модератор: immortal

directman66
Сообщения: 2801
Зарегистрирован: Пн дек 26, 2016 9:51 am
Откуда: Екатеринбург
Благодарил (а): 380 раз
Поблагодарили: 693 раза
Контактная информация:

Re: управление RGB лентами

Сообщение directman66 » Пн апр 24, 2017 10:04 pm

Вроде выглядит не так плохо

Отправлено с моего Redmi Note 3 через Tapatalk
Если вам помогло данное сообщение, не поленитесь нажать кнопку "спасибо".
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
directman66
Сообщения: 2801
Зарегистрирован: Пн дек 26, 2016 9:51 am
Откуда: Екатеринбург
Благодарил (а): 380 раз
Поблагодарили: 693 раза
Контактная информация:

Re: управление RGB лентами

Сообщение directman66 » Пн апр 24, 2017 10:05 pm

Вроде выглядит неплохо
СпойлерПоказать
Изображение
Отправлено с моего Redmi Note 3 через Tapatalk
Если вам помогло данное сообщение, не поленитесь нажать кнопку "спасибо".
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
Аватара пользователя
lanket
Сообщения: 1168
Зарегистрирован: Вт окт 14, 2014 11:27 pm
Откуда: Санкт-Петербург
Благодарил (а): 260 раз
Поблагодарили: 163 раза

Re: управление RGB лентами

Сообщение lanket » Ср апр 26, 2017 9:31 am

directman66 писал(а):Вроде выглядит неплохо
СпойлерПоказать
Изображение
Отправлено с моего Redmi Note 3 через Tapatalk
А белым светом не пользуетесь? Изображение

Отправлено с моего Redmi Note 3 через Tapatalk
Разработка голосового асистента для Мажордомо по любому ключевому слову.
:arrow: Обсужение
:arrow: gitHub 2й версии терминала
:arrow: GitHub модуля для МД
gitHub сырого модуля 2й версии
:arrow: Connect
Rasberry Pi 2, MDM, MySensors. И говорящий апельсин.
directman66
Сообщения: 2801
Зарегистрирован: Пн дек 26, 2016 9:51 am
Откуда: Екатеринбург
Благодарил (а): 380 раз
Поблагодарили: 693 раза
Контактная информация:

Re: управление RGB лентами

Сообщение directman66 » Ср апр 26, 2017 9:34 am

Это как пример,белый добавить не проблема. Я еще не разобрался как реагировать на нажатия.
Если вам помогло данное сообщение, не поленитесь нажать кнопку "спасибо".
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
DadyNik
Сообщения: 3
Зарегистрирован: Вт апр 18, 2017 12:24 am
Благодарил (а): 0
Поблагодарили: 0

Re: управление RGB лентами

Сообщение DadyNik » Сб май 13, 2017 12:51 am

Получилось победить? или перепрошили?
directman66
Сообщения: 2801
Зарегистрирован: Пн дек 26, 2016 9:51 am
Откуда: Екатеринбург
Благодарил (а): 380 раз
Поблагодарили: 693 раза
Контактная информация:

Re: управление RGB лентами

Сообщение directman66 » Пн май 15, 2017 6:46 am

Установил на стандартной прошивке. Функционала хватает. При корректной настройке сети работает без проблем.
Если вам помогло данное сообщение, не поленитесь нажать кнопку "спасибо".
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
Аватара пользователя
Kutuzoff
Сообщения: 14
Зарегистрирован: Пт ноя 20, 2015 1:43 pm
Благодарил (а): 3 раза
Поблагодарили: 0

Re: управление RGB лентами

Сообщение Kutuzoff » Пт окт 27, 2017 12:00 pm

Подскажите пожалуйста, как такой колорпикер добавить на сцену? Не могу понять, куда какой код вставлять. И как его привязать к свойству color?
СпойлерПоказать
Изображение
directman66
Сообщения: 2801
Зарегистрирован: Пн дек 26, 2016 9:51 am
Откуда: Екатеринбург
Благодарил (а): 380 раз
Поблагодарили: 693 раза
Контактная информация:

Re: управление RGB лентами

Сообщение directman66 » Ср апр 04, 2018 1:18 am

Дополнтельный код css

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

* {
  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>
    
 
тип html на сцене
За это сообщение автора directman66 поблагодарил:
Kutuzoff (Ср апр 04, 2018 9:08 pm)
Рейтинг: 1.16%
Если вам помогло данное сообщение, не поленитесь нажать кнопку "спасибо".
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

Re: управление RGB лентами

Сообщение nick7zmail » Ср апр 04, 2018 6:28 am

Как добавить подсказали.
А действия проще всего привесить на OnClick к <a href>. Там прописать гет-запрос к апи-функциям.
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
directman66
Сообщения: 2801
Зарегистрирован: Пн дек 26, 2016 9:51 am
Откуда: Екатеринбург
Благодарил (а): 380 раз
Поблагодарили: 693 раза
Контактная информация:

Re: управление RGB лентами

Сообщение directman66 » Ср апр 04, 2018 6:34 am

Ждем маркет сцен и элементов. Потом видимо будем допиливать.
Если вам помогло данное сообщение, не поленитесь нажать кнопку "спасибо".
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
Ответить