Слайдер для сцен

Всё, что не подходит под вышеперечисленные разделы

Модератор: immortal

Ответить
devoff
Сообщения: 181
Зарегистрирован: Пт апр 04, 2014 10:17 pm
Благодарил (а): 37 раз
Поблагодарили: 54 раза

Re: Слайдер для сцен

Сообщение devoff » Вт апр 19, 2016 9:17 am

foxvlad - если сможете реализовать сцену как на картинках, я думаю, многие будут очень благодарны, если выложить в общий доступ.
если нужно чем то помочь, буду рад.
За это сообщение автора devoff поблагодарил:
foxvlad (Чт апр 21, 2016 9:20 pm)
Рейтинг: 1.16%
Вернуться к началу
Smolalex
Сообщения: 110
Зарегистрирован: Вт апр 29, 2014 9:16 pm
Благодарил (а): 7 раз
Поблагодарили: 13 раз

Re: Слайдер для сцен

Сообщение Smolalex » Чт апр 21, 2016 7:27 pm

devoff писал(а):foxvlad - если сможете реализовать сцену как на картинках, я думаю, многие будут очень благодарны, если выложить в общий доступ.
если нужно чем то помочь, буду рад.
Попробуйте такой вариант
СпойлерПоказать
<style>

/* линия-индикатор */

#rangeP { /* контейнер */
-webkit-appearance: none;
appearance: none;
padding: 0;
border: 10px solid #ccc;
border-radius: 5px;
box-shadow: inset 0 1px #ccc, inset 0 1px 1px #575555, inset 0 -2px #ccc;
background: #fff linear-gradient(#BCBCBC, #fff0f5);
overflow: hidden;
}
#rangeP::-moz-range-thumb { /* ползунок в Firefox */
border-radius: 2px;
box-shadow: -13px 0 #40310a, -26px 0 #40310a, -39px 0 #40310a, -52px 0 #40310a, -65px 0 #40310a, -78px 0 #40310a, -91px 0 #40310a, -104px 0 #40310a, -117px 0 #40310a, -130px 0 #40310a, -143px 0 #40310a, -156px 0 #40310a;
}
#rangeP::-moz-range-track { /* линия, по которой он ездит в Firefox */
background: none;
border: none;
}
#rangeP::-webkit-slider-thumb { /* ползунок в Хроме */
-webkit-appearance: none;
width:15px;
height:15px;
border: 1px solid #818181;
border-radius: 2px;
background-image: linear-gradient(#dedede, #f2f2f2);
box-shadow: -13px 0 #40310a, -26px 0 #40310a, -39px 0 #40310a, -52px 0 #40310a, -65px 0 #40310a, -78px 0 #40310a, -91px 0 #40310a, -104px 0 #40310a, -117px 0 #40310a, -130px 0 #40310a, -143px 0 #40310a, -156px 0 #40310a;
}

#rangeP1 { /* контейнер */
-webkit-appearance: none;
appearance: none;
padding: 0;
border: 10px solid #ccc;
border-radius: 5px;
box-shadow: inset 0 1px #ccc, inset 0 1px 1px #575555, inset 0 -2px #ccc;
background: #fff linear-gradient(#BCBCBC, #fff0f5);
overflow: hidden;
}
#rangeP1::-moz-range-thumb { /* ползунок в Firefox */
border-radius: 2px;
box-shadow: -13px 0 #40310a, -26px 0 #40310a, -39px 0 #40310a, -52px 0 #40310a, -65px 0 #40310a, -78px 0 #40310a, -91px 0 #40310a, -104px 0 #40310a, -117px 0 #40310a, -130px 0 #40310a, -143px 0 #40310a, -156px 0 #40310a;
}
#rangeP1::-moz-range-track { /* линия, по которой он ездит в Firefox */
background: none;
border: none;
}
#rangeP1::-webkit-slider-thumb { /* ползунок в Хроме */
-webkit-appearance: none;
width:15px;
height:15px;
border: 1px solid #818181;
border-radius: 2px;
background-image: linear-gradient(#dedede, #f2f2f2);
box-shadow: -13px 0 #40310a, -26px 0 #40310a, -39px 0 #40310a, -52px 0 #40310a, -65px 0 #40310a, -78px 0 #40310a, -91px 0 #40310a, -104px 0 #40310a, -117px 0 #40310a, -130px 0 #40310a, -143px 0 #40310a, -156px 0 #40310a;
}
#rangeP2 { /* контейнер */
-webkit-appearance: none;
appearance: none;
padding: 0;
border: 10px solid #ccc;
border-radius: 5px;
box-shadow: inset 0 1px #ccc, inset 0 1px 1px #575555, inset 0 -2px #ccc;
background: #fff linear-gradient(#BCBCBC, #fff0f5);
overflow: hidden;
}
#rangeP2::-moz-range-thumb { /* ползунок в Firefox */
border-radius: 2px;
box-shadow: -13px 0 #40310a, -26px 0 #40310a, -39px 0 #40310a, -52px 0 #40310a, -65px 0 #40310a, -78px 0 #40310a, -91px 0 #40310a, -104px 0 #40310a, -117px 0 #40310a, -130px 0 #40310a, -143px 0 #40310a, -156px 0 #40310a;
}
#rangeP2::-moz-range-track { /* линия, по которой он ездит в Firefox */
background: none;
border: none;
}
#rangeP2::-webkit-slider-thumb { /* ползунок в Хроме */
-webkit-appearance: none;
width:15px;
height:15px;
border: 1px solid #818181;
border-radius: 2px;
background-image: linear-gradient(#dedede, #f2f2f2);
box-shadow: -13px 0 #40310a, -26px 0 #40310a, -39px 0 #40310a, -52px 0 #40310a, -65px 0 #40310a, -78px 0 #40310a, -91px 0 #40310a, -104px 0 #40310a, -117px 0 #40310a, -130px 0 #40310a, -143px 0 #40310a, -156px 0 #40310a;
}

#rangeP3 { /* контейнер */
-webkit-appearance: none;
appearance: none;
padding: 0;
border: 10px solid #ccc;
border-radius: 5px;
box-shadow: inset 0 1px #ccc, inset 0 1px 1px #575555, inset 0 -2px #ccc;
background: #fff linear-gradient(#BCBCBC, #fff0f5);
overflow: hidden;
}
#rangeP3::-moz-range-thumb { /* ползунок в Firefox */
border-radius: 2px;
box-shadow: -13px 0 #40310a, -26px 0 #40310a, -39px 0 #40310a, -52px 0 #40310a, -65px 0 #40310a, -78px 0 #40310a, -91px 0 #40310a, -104px 0 #40310a, -117px 0 #40310a, -130px 0 #40310a, -143px 0 #40310a, -156px 0 #40310a;
}
#rangeP3::-moz-range-track { /* линия, по которой он ездит в Firefox */
background: none;
border: none;
}
#rangeP3::-webkit-slider-thumb { /* ползунок в Хроме */
-webkit-appearance: none;
width:15px;
height:15px;
border: 1px solid #818181;
border-radius: 2px;
background-image: linear-gradient(#dedede, #f2f2f2);
box-shadow: -13px 0 #40310a, -26px 0 #40310a, -39px 0 #40310a, -52px 0 #40310a, -65px 0 #40310a, -78px 0 #40310a, -91px 0 #40310a, -104px 0 #40310a, -117px 0 #40310a, -130px 0 #40310a, -143px 0 #40310a, -156px 0 #40310a;
}

#rangeP4 { /* контейнер */
-webkit-appearance: none;
appearance: none;
padding: 0;
border: 10px solid #ccc;
border-radius: 5px;
box-shadow: inset 0 1px #ccc, inset 0 1px 1px #575555, inset 0 -2px #ccc;
background: #fff linear-gradient(#BCBCBC, #fff0f5);
overflow: hidden;
}
#rangeP4::-moz-range-thumb { /* ползунок в Firefox */
border-radius: 2px;
box-shadow: -13px 0 #40310a, -26px 0 #40310a, -39px 0 #40310a, -52px 0 #40310a, -65px 0 #40310a, -78px 0 #40310a, -91px 0 #40310a, -104px 0 #40310a, -117px 0 #40310a, -130px 0 #40310a, -143px 0 #40310a, -156px 0 #40310a;
}
#rangeP4::-moz-range-track { /* линия, по которой он ездит в Firefox */
background: none;
border: none;
}
#rangeP4::-webkit-slider-thumb { /* ползунок в Хроме */
-webkit-appearance: none;
width:15px;
height:15px;
border: 1px solid #818181;
border-radius: 2px;
background-image: linear-gradient(#dedede, #f2f2f2);
box-shadow: -13px 0 #40310a, -26px 0 #40310a, -39px 0 #40310a, -52px 0 #40310a, -65px 0 #40310a, -78px 0 #40310a, -91px 0 #40310a, -104px 0 #40310a, -117px 0 #40310a, -130px 0 #40310a, -143px 0 #40310a, -156px 0 #40310a;
}
/* банка CSS */

#banka {
position: relative;
width: 50%;
margin: 0 auto;
padding-top: 60%;
border: 5px solid rgba(221,221,221,.9);
border-radius: 40%/70%;
background: linear-gradient(to right, rgba(221,221,221,.5), rgba(150,150,150,.5)), linear-gradient(#ff0000, #ffff00);
background-repeat: no-repeat;
background-position: 50% 100%;
background-size: auto, 100% 0;
}

#banka:after {
content: "";
position: absolute;
top: -3%;
left: 22%;
width: 55%;
padding-top: 10%;
border-radius: 60%;
background: rgba(238,238,238,.6);
box-shadow: 0 0 15px rgba(238,238,238,.9);
}

#banka:before {
content: "";
position: absolute;
top: -10%;
left: 15%;
width: 70%;
padding-top: 25%;
border-radius: 40%;
background: linear-gradient(rgba(150,150,150,.8), rgba(221,221,221,.3) 75%, rgba(221,221,221,.1) 75%);
}
</style>

<TABLE BORDER>

<TR>
<TD><font size="3" color="yellow" face="Arial">Кухня</TD>
<TD><font size="3" color="%Kitchenroom.tempHEX%" face="Arial">%Kitchenroom.tempTarget%</TD>
<TD><input type="range" oninput="onchangeWidth()" id="rangeP" value="%Kitchenroom.tempTarget%" min="0" max="30" step="1"/></TD>
<TD><div class="pie-wrapper">

<div class="arc" data-value="%Kitchenroom.tempRound%"></div>

<span class="score">%Kitchenroom.Temperature%°C</span></TD>

</TR>

<TR>
<TD><font size="3" color="yellow" face="Arial">Ванна</TD>
<TD><font size="3" color="%WashRoom.tempHEX%" face="Arial">%WashRoom.tempTarget%</TD>
<TD><input type="range" oninput="onchangeWidth1()" id="rangeP1" value="%WashRoom.tempTarget%" min="0" max="30" step="1"/></TD>
<TD><div class="pie-wrapper">

<div class="arc" data-value="%WashRoom.tempRound%"></div>

<span class="score">%WashRoom.Temperature%°C</span></TD>

</TR>

<TR>
<TD><font size="3" color="yellow" face="Arial">Спальня</TD>
<TD><font size="2" color="%BedRooms.tempHEX%" face="Arial">%BedRooms.tempTarget%</TD>
<TD><input type="range" oninput="onchangeWidth2()" id="rangeP2" value="%BedRooms.tempTarget%" min="0" max="30" step="1"/></TD>
<TD><div class="pie-wrapper">

<div class="arc" data-value="%BedRooms.tempRound%"></div>

<span class="score">%BedRooms.Temperature%°C</span></TD>

</TR>
<TR>
<TD><font size="3" color="yellow" face="Arial">Гостиная</TD>
<TD><font size="3" color="%Livingroom.tempHEX%" face="Arial">%Livingroom.tempTarget%</TD>
<TD><input type="range" oninput="onchangeWidth3()" id="rangeP3" value="%Livingroom.tempTarget%" min="0" max="30" step="1"/></TD>
<TD><div class="pie-wrapper">

<div class="arc" data-value="%Livingroom.TempRound%"></div>

<span class="score">%Livingroom.Temperature%°C</span></TD>

</TR>
<TR>
<TD><font size="3" color="yellow" face="Arial">Подвал</TD>
<TD><font size="3" color="%Podval.tempHEX%" face="Arial">%Podval.tempTarget%</TD>
<TD><input type="range" oninput="onchangeWidth4()" id="rangeP4" value="%Podval.tempTarget%" min="0" max="30" step="1"/></TD>
<TD><div class="pie-wrapper">

<div class="arc" data-value="%Podval.TempRound%"></div>

<span class="score">%Podval.Temperature%°C</span></TD>

</TR>

</TABLE>

<script>
function onchangeWidth() {
url_string ='/objects/?object=Kitchenroom&op=set&p=tempTarget&v='+ document.getElementById('rangeP').value;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url_string, true);
xmlhttp.send(null);

}
function onchangeWidth1() {
url_string ='/objects/?object=WashRoom&op=set&p=tempTarget&v='+ document.getElementById('rangeP1').value;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url_string, true);
xmlhttp.send(null);
}
function onchangeWidth2() {
url_string ='/objects/?object=BedRooms&op=set&p=tempTarget&v='+ document.getElementById('rangeP2').value;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url_string, true);
xmlhttp.send(null);
}
function onchangeWidth3() {
url_string ='/objects/?object=Livingroom&op=set&p=tempTarget&v='+ document.getElementById('rangeP3').value;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url_string, true);
xmlhttp.send(null);
}
function onchangeWidth4() {
url_string ='/objects/?object=Podval&op=set&p=tempTarget&v='+ document.getElementById('rangeP4').value;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url_string, true);
xmlhttp.send(null);
}

</script>
За это сообщение автора Smolalex поблагодарил:
foxvlad (Чт апр 21, 2016 9:19 pm)
Рейтинг: 1.16%
Вернуться к началу
Аватара пользователя
foxvlad
Сообщения: 287
Зарегистрирован: Пн сен 22, 2014 3:18 pm
Откуда: Сочи
Благодарил (а): 78 раз
Поблагодарили: 78 раз
Контактная информация:
Контактная информация пользователя foxvlad

Re: Слайдер для сцен

Сообщение foxvlad » Чт апр 21, 2016 9:32 pm

devoff писал(а):foxvlad - если сможете реализовать сцену как на картинках, я думаю, многие будут очень благодарны, если выложить в общий доступ.
если нужно чем то помочь, буду рад.
Я просто думаю, его легко перенести не получиться, все равно каждому по своему придется долго возиться индивидуально.
Вернуться к началу
Аватара пользователя
foxvlad
Сообщения: 287
Зарегистрирован: Пн сен 22, 2014 3:18 pm
Откуда: Сочи
Благодарил (а): 78 раз
Поблагодарили: 78 раз
Контактная информация:
Контактная информация пользователя foxvlad

Re: Слайдер для сцен

Сообщение foxvlad » Сб окт 01, 2016 10:48 am

ну вроде получается, ну все приходится ручками делать.

Спасибо Smolalex
2016-10-01_10-42-56.png
2016-10-01_10-42-56.png (581.41 КБ) 7625 просмотров
2016-10-01_10-43-20.png
2016-10-01_10-43-20.png (88.05 КБ) 7625 просмотров
2016-10-01_10-43-46.png
2016-10-01_10-43-46.png (86.6 КБ) 7625 просмотров
За это сообщение автора foxvlad поблагодарил:
skysilver (Вс окт 02, 2016 12:28 am)
Рейтинг: 1.16%
Вернуться к началу
Vit
Сообщения: 867
Зарегистрирован: Вт янв 17, 2012 12:31 pm
Благодарил (а): 121 раз
Поблагодарили: 78 раз

Re: Слайдер для сцен

Сообщение Vit » Сб окт 01, 2016 2:34 pm

красивые сцены.....можно примеры выложить, думаю многим будет интересно для себя реализовать...спасибо
Вернуться к началу
Аватара пользователя
foxvlad
Сообщения: 287
Зарегистрирован: Пн сен 22, 2014 3:18 pm
Откуда: Сочи
Благодарил (а): 78 раз
Поблагодарили: 78 раз
Контактная информация:
Контактная информация пользователя foxvlad

Re: Слайдер для сцен

Сообщение foxvlad » Сб окт 01, 2016 2:52 pm

Еще не все элементы доделал, не могу ума дать форме select

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

 
 
 <select class="target" onChange="test()" id="rangeT" value="85">

   <option value="100">100</option>

   <option value="85" >85</option>
  
  <option value="75">75</option>

 </select>  

 

При таком коде значение после выбора сбрасывается на первое например выбираем "75" значение меняется на 75, а выпадающем списке опять стоит 100

как это все дело подвязать к например к %ThisComputer.volumeLevel%

Нужны знатоки Javascript
Вернуться к началу
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

Re: Слайдер для сцен

Сообщение nick7zmail » Вс окт 02, 2016 2:09 am

В сценах есть штука - элементы меню...в меню создаете слайдер, и тащите его на сцену...думаю можно и стили применить к нему...
Зачем изобретать велосипед?
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Вернуться к началу
Аватара пользователя
foxvlad
Сообщения: 287
Зарегистрирован: Пн сен 22, 2014 3:18 pm
Откуда: Сочи
Благодарил (а): 78 раз
Поблагодарили: 78 раз
Контактная информация:
Контактная информация пользователя foxvlad

Re: Слайдер для сцен

Сообщение foxvlad » Вс окт 02, 2016 8:56 pm

nick7zmail писал(а):В сценах есть штука - элементы меню...в меню создаете слайдер, и тащите его на сцену...думаю можно и стили применить к нему...
Зачем изобретать велосипед?
А зачем базарить если сами не пробовали, и в верстке не шарите. Просто написать что то?

Попробуйте сделать слайдеры как у меня, вставив просто из меню элемент изменить стиль.
Вернуться к началу
Smolalex
Сообщения: 110
Зарегистрирован: Вт апр 29, 2014 9:16 pm
Благодарил (а): 7 раз
Поблагодарили: 13 раз

Re: Слайдер для сцен

Сообщение Smolalex » Пн окт 03, 2016 12:22 am

foxvlad писал(а):
nick7zmail писал(а):В сценах есть штука - элементы меню...в меню создаете слайдер, и тащите его на сцену...думаю можно и стили применить к нему...
Зачем изобретать велосипед?
А зачем базарить если сами не пробовали, и в верстке не шарите. Просто написать что то?

Попробуйте сделать слайдеры как у меня, вставив просто из меню элемент изменить стиль.
Вернуться к началу
Smolalex
Сообщения: 110
Зарегистрирован: Вт апр 29, 2014 9:16 pm
Благодарил (а): 7 раз
Поблагодарили: 13 раз

Re: Слайдер для сцен

Сообщение Smolalex » Пн окт 03, 2016 12:30 am

foxvlad, Вы молодец.
Вернуться к началу
Ответить

Вернуться в «Общее обсуждение»