Дизайн сцен 2

Использование системы в различных ситуациях, вопросы программирования сценариев.

Модератор: immortal

TransMatrix
Сообщения: 186
Зарегистрирован: Вс май 28, 2017 9:24 am
Благодарил (а): 8 раз
Поблагодарили: 22 раза

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

Сообщение TransMatrix » Сб июн 17, 2017 1:27 pm

Сижу, потихоньку курочу под себя сцены...
Проблема в том, что то, что хорошо на ноуте или планшете - отвратно выглядит на смартфоне с МажорДроидом...
К примеру, если даже повернуть смартфон на бок - кнопки приложения сдвигают интерфейс вниз и часть оказывается за прокруткой.
В вертикальном - или прокрутка вправо-влево, или маааахонькое окошко вверху...

Сейчас сижу, прикидываю как бороться: то-ли разные сцены для разных устройств, то-ли в сцене динамически подстраиваться под размер экрана...
Аватара пользователя
nick7zmail
Сообщения: 7325
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 1934 раза

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

Сообщение nick7zmail » Сб июн 17, 2017 4:51 pm

Для телефона использую интерфейс только /menu.html, сцены - для всего остального...можете попробовать на основе дашборда интерфейс набросать...он по идее автоматически перестраиваться должен...
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
profx5016
Сообщения: 21
Зарегистрирован: Вт май 23, 2017 12:08 pm
Откуда: Беларусь
Благодарил (а): 13 раз
Поблагодарили: 0

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

Сообщение profx5016 » Сб июн 24, 2017 2:01 am

Приветствую всех участников! Помогите разобраться, что не так. На главной сцене сделал кнопки.
https://www.dropbox.com/s/haitixi4s4litoc/1.JPG?dl=0
По задумке, каждая кнопка должна подсвечиваться, когда активная.

В элемнте general css добавил стили для кнопок:

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

.button-style{
    display:inline-block;
    box-sizing:border-box;
    text-align:center;
    width:93px;
    height:93px;
    color:#fff;
    padding:2px;
    margin:2px 0px 0px 0px;
    cursor:pointer;
    border:3px solid rgba(138,43,226,1);
    -webkit-transform:translateZ(0);
    -webkit-backface-visibility:hidden;
    -moz-border-radius:10px 10px 10px 10px;
    -webkit-border-radius:10px;
    border-radius:10px 10px 10px 10px;
    background-color:rgba(0,0,0,0.4);
  }

  .button-style.s2{
    background-color:rgba(138,43,226,0.5);
  }

.button-style:hover {
  background-color: rgba(138, 43, 226, 0.5);
}

.button-style a {
text-decoration: none;
margin: 0;
padding: 0;
text-transform: uppercase;
font-family:italic;
font-weight: 600;
font-size:14px;
}

.button-style a:hover {
color: #fff;
}
 
Cоздал элемент panel-newmenu, в нем прописал кнопки:

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

<div class="button-style"><a href="#tab1"><i class="fa fa-list fa-4x" aria-hidden="true"></i>заметки</a></div>
<div class="button-style"><a href="#tab2"><i class="fa fa-android fa-4x" aria-hidden="true"></i>Алиса</a></div>
<div class="button-style"><a href="#tab3"><i class="fa fa-question fa-4x" aria-hidden="true"></i>UNKNOWN</a></div>
<div class="button-style"><a href="#tab4"><i class="fa fa-tint fa-4x" aria-hidden="true"></i>Погода</a></div>
<div class="button-style"><a href="#tab5"><i class="fa fa-laptop fa-4x" aria-hidden="true"></i>система</a></div>
 
В "дополнительный код JavaScript", добавил код (его написал уважаемый Рони с форума javascript.ru, за что ему отдельное спасибо!):

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

window.addEventListener('DOMContentLoaded', function() {
         var button = document.querySelectorAll('.button-style');
         [].forEach.call(button, function(but) {
               but.addEventListener('click', function() {
                   [].forEach.call( button, function(el) {
                          el == but ? el.classList.add("s2"):
                          el.classList.remove('s2');
                   });

               });
           });
         });
 
Но ничего не происходит... Если создать отдельный html документ и открыть в браузере - все работает. В сцене - не работает. Помогите разобраться, в чем затык, что не так? Спасибо!
Kas-11
Сообщения: 32
Зарегистрирован: Ср апр 26, 2017 11:52 am
Благодарил (а): 2 раза
Поблагодарили: 1 раз

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

Сообщение Kas-11 » Вт июн 27, 2017 10:17 am

Подскажите пожалуйста.
Как убрать фон у лампочки на сцене?

Сделал кнопку с лампочкой на планировке. При выключенном состоянии лампочка белая при включенном желтая, а как фон подсветки убрать?
Аватара пользователя
nick7zmail
Сообщения: 7325
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 1934 раза

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

Сообщение nick7zmail » Вт июн 27, 2017 11:11 am

В этой теме есть ответ...но я хз где он...

UPD: А, вот он viewtopic.php?t=2588&p=31207#p31207 ...еле нашел)) Пора начинать собирать полезные ссылки.
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
lanket
Сообщения: 1161
Зарегистрирован: Вт окт 14, 2014 11:27 pm
Откуда: Санкт-Петербург
Благодарил (а): 256 раз
Поблагодарили: 163 раза

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

Сообщение lanket » Вт июн 27, 2017 11:41 am

Kas-11 писал(а):Подскажите пожалуйста.
Как убрать фон у лампочки на сцене?

Сделал кнопку с лампочкой на планировке. При выключенном состоянии лампочка белая при включенном желтая, а как фон подсветки убрать?
Может костыльно, но я конвертил в gif с альфаканалом.

Отправлено с моего Redmi Note 3 через Tapatalk
Разработка голосового асистента для Мажордомо по любому ключевому слову.
:arrow: Обсужение
:arrow: gitHub 2й версии терминала
:arrow: GitHub модуля для МД
gitHub сырого модуля 2й версии
:arrow: Connect
Rasberry Pi 2, MDM, MySensors. И говорящий апельсин.
Kas-11
Сообщения: 32
Зарегистрирован: Ср апр 26, 2017 11:52 am
Благодарил (а): 2 раза
Поблагодарили: 1 раз

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

Сообщение Kas-11 » Вт июн 27, 2017 12:54 pm

lanket писал(а):
Может костыльно, но я конвертил в gif с альфаканалом.
Я скачал две иконки лампочки, которые мне понравились, одна белого цвета вторая желтого. (размером в 2 раз меньше чем стандартные).
Установил их на сцену. При включенном состоянии у меня показывает желтая картинка с лампочкой при выключенном состоянии белая.
Фон остался прежнего размера и тоже цвет меняет. Как убрать его не пойму.
Аватара пользователя
nick7zmail
Сообщения: 7325
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 1934 раза

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

Сообщение nick7zmail » Вт июн 27, 2017 1:22 pm

Блин...я ж вам 2 сообщения назад написал, как сделать.

Отправлено с моего Xperia Z через Tapatalk
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
vshuka911
Сообщения: 76
Зарегистрирован: Пт июн 02, 2017 11:02 am
Благодарил (а): 10 раз
Поблагодарили: 1 раз

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

Сообщение vshuka911 » Вс июл 02, 2017 9:45 pm

а кто подскажет иконку для батарейки?
Аватара пользователя
nick7zmail
Сообщения: 7325
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 1934 раза

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

Сообщение nick7zmail » Вс июл 02, 2017 10:19 pm

http://www.iconarchive.com/tag/battery
Ещё можно при помощи шрифта font-awesome сделать...были примеры уже.
За это сообщение автора nick7zmail поблагодарили (всего 2):
vshuka911 (Вс июл 02, 2017 10:46 pm) • wozowik (Чт фев 15, 2018 1:16 pm)
Рейтинг: 2.47%
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Ответить