Сцены и оформление (сборка)

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

Модератор: immortal

immortal
Сообщения: 1138
Зарегистрирован: Вт янв 29, 2013 9:16 am
Откуда: Белозерск
Благодарил (а): 16 раз
Поблагодарили: 400 раз
Контактная информация:

Re: Сцены и оформление (сборка)

Сообщение immortal » Вт дек 05, 2017 3:07 pm

Индикаторы gauge.min.js
добавил в шапку
Изображение
Lubuntu на cubieboard2 + ds9490R
DietPi на Orange Pi PC + 1wire на esp8266 с прошивкой Homes-smart.ru
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

Re: Сцены и оформление (сборка)

Сообщение nick7zmail » Вт дек 05, 2017 3:49 pm

Большие сильно...покомпактнее бы что нить...не встрачали?))
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
immortal
Сообщения: 1138
Зарегистрирован: Вт янв 29, 2013 9:16 am
Откуда: Белозерск
Благодарил (а): 16 раз
Поблагодарили: 400 раз
Контактная информация:

Re: Сцены и оформление (сборка)

Сообщение immortal » Вт дек 05, 2017 5:18 pm

nick7zmail писал(а):Большие сильно...покомпактнее бы что нить...не встрачали?))
Вот можно небольшие делать , только как вставлять их не разобрался, тут типа конструктора
Lubuntu на cubieboard2 + ds9490R
DietPi на Orange Pi PC + 1wire на esp8266 с прошивкой Homes-smart.ru
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

Re: Сцены и оформление (сборка)

Сообщение nick7zmail » Ср дек 06, 2017 6:03 am

Я на них натыкался...сильно они какие-то...блин...как это назвать...стремноватые чтоль)) да и опять стрелочные...что нить найти бы типа того, что я выкладывал...или уже свою либу накатать =DD.
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
serghei
Сообщения: 2575
Зарегистрирован: Пт ноя 06, 2015 10:22 am
Откуда: Кишинёв
Благодарил (а): 303 раза
Поблагодарили: 282 раза

Re: Сцены и оформление (сборка)

Сообщение serghei » Ср дек 06, 2017 9:02 am

Записался на прием к профессору.по чистой жаве (НЕ шучу).Покажет как скомпилировать " Медузу" .Только еще бы к цифрам привязать через ажакс.....
AMS : ESP32 + NRF24 + 1Wire-I2C мост DS2482 + счетчик DS2423 + сеть MySensors + редактирование страниц в браузере + Upload по воздуху + SPIFFS
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

Re: Сцены и оформление (сборка)

Сообщение nick7zmail » Ср дек 06, 2017 11:57 am

Медуза не чистая Ява же. Она под какой-то дашборд заточена вроде...
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

Re: Сцены и оформление (сборка)

Сообщение nick7zmail » Вт дек 19, 2017 10:02 pm

Прикольные часики на css и html без ява скрипта)) понятия не имею как это работает, но работает =D.
clock.jpg
clock.jpg (26.28 КБ) 4447 просмотров
cssПоказать

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

<!-- Copyright 2013 Nick Rassadin <nick.rassadin@gmail.com>
Content is licensed under CC BY-NC-SA 3.0 -->

/*** Clock rules. Pure CSS ***/
#clock {
}
#a {
    width:10.0em;
    height:10.0em;
    position:relative;
    border-radius:5.0em;
    background:#ccc;/*ccc*/
    box-shadow:
        inset 0.05em -0.05em 0 #333, /*ccc*/
        inset 0.17em -0.17em 0 #555,
        inset -0.03em -0.04em 0 #333, /*999*/
        inset -0.03em 0.02em 0 #333, /*ccc*/
        inset -0.1em -0.1em 0 #555,
        0.1em 0.3em 0.2em rgba(0,0,0,0.3);
}
#b {
    width:9.4em;
    height:9.4em;
    top:0.3em;
    left:0.3em;
    position:relative;
    border-radius:4.7em;
    background:#fff;
    box-shadow:
        inset 0.04em 0 0 #fff,
        inset 0 -0.06em 0 #ddd,
        inset 0.16em -0.08em 0 #222,
        inset -0.16em 0.08em 0 #222,
        inset 0.2em 0.2em 0 #222,
        0.06em -0.03em 0 #999, 
        -0.1em 0.1em 0 #777,
        -0.13em -0.2em 0 #fff,
        0.13em 0.2em 0 #222,
        0.13em 0.3em 0 #333; /*ccc*/
}
#c {
    width:8.9em;
    height:8.9em;
    top:0.25em;
    left:0.25em; 
    position:relative;
    border-radius:4.45em;
    background:#eed;/*f4f5f6;*/
    box-shadow:
        inset 0.15em 0.2em 0.05em rgba(0,0,0,0.4),
        inset 0.2em 0.4em 0.2em rgba(0,0,0,0.3),
        inset 0 0.05em 0.3em rgba(0,0,0,0.1),
        -0.16em 0.08em 0 #444,
        0.16em -0.08em 0 #444;
}
#d { width:8.8em;
     height:8.8em;
     top:0.05em;
     left:0.05em;
     position:relative;
     border-radius:4.4em;
}
#e { width:8.18em;
     height:8.18em;
     padding-top:4.09em;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     left:0.29em;
     top:0.29em;
     position:absolute;
     border:solid 0.04em rgba(0,0,0,0.5);
     border-radius:4.09em;  
}
#ii {
    padding-left:4.34em;
    position:absolute;
}
b, i {
    height:8.2em; 
    position:absolute;
    display:block;
}
b {
    border:solid 0 #222;
    border-width:0.3em 0;
    width:0.12em;
}
i {
    border:solid 0 rgba(0,0,0,0.5);
    border-width:0.3em 0;
    width:0.04em;
}
b>i,i>i {
    transform:rotate(6deg) ;
    margin-top:-0.3em;
}
b>b  {
    transform:rotate(30deg);
    margin-top:-0.3em; }
b>i {
    left:0.03em;
}
#f,#g {
    font:1.2em/1.0em WallClock, sans-serif;
    text-align:center;
    width:6.8em;
    color:#222;
}
#g>u>u {    
    letter-spacing:0.1em;
}
#g>u>u>u {
    letter-spacing:0;
}
u {
    display:block;
    line-height:1em;
    text-decoration: none;
}
u>u>u>u {
    margin:0.5em -0.55em;
    padding: 0 0.05em;
}
u>u>u {
    margin:0.0em -1.75em;
    padding: 0 0.7em;
}
u>u {
    margin:-0.55em 0;
    text-align:right;
    padding: 0 1.65em;
}
#f {
    margin-top:-3.37em;
}
#g {
    margin-top:-6em;
}
#g u>u {
    text-align:left;
}
#q { 
    font:0.22em/1em Segoe UI,Helvetica,sans-serif;
    text-align:center;
    margin-top:-11.5em;
    color:#555;
}
.ss, .mm, .hh {
    width:8.0em;
    height:8.0em;
    top:0.4em;
    left:0.4em;
    position:absolute;
}
.hh {
    transform:rotate(-55deg);
}
.mm {
    transform:rotate(60deg);
}
.ss {
    animation: tick 1s normal infinite steps(25,end);
 }
@keyframes tick {
    0% { transform: rotate(0deg); }
    12% { transform:rotate(6deg); }
    100% { transform: rotate(6deg); }        
}
.s {
    width:0.1em;
    height:4.8em; 
    top:0.6em;
    left:3.95em;
    position:relative; 
    background:#a00;
    outline: 1px solid transparent; 
    animation: a360_10 60s normal infinite steps(60,end); 
}
.sr {
    width:0.3em;
    height:0.3em;
    background:#a00;
    margin:-0.95em 0 0 3.84em;
    border-radius:0.15em;
}
@keyframes a360_10  {
    0% { transform: translate(0, 1.0em) rotate(0deg) translate(0,-1.0em) }
    100% { transform: translate(0, 1.0em) rotate(360deg) translate(0,-1.0em) }
}

.m {
    height:4.8em;
    left:3.89em;
    width:0.22em;
    position:relative;
    background:#222;
    border:0 0 3.2em 0;
    animation: a36016 3600s normal infinite linear;
    outline: 1px solid transparent;
}
@keyframes a36016 {
    0% { transform: translate(0, 1.6em) rotate(0deg) translate(0,-1.6em); }
    100% { transform: translate(0, 1.6em) rotate(360deg) translate(0,-1.6em); }
}

.mr {
    width:0.5em;
    height:0.5em;
    background:#222;
    margin:-1.05em 0 0 3.74em;
    border-radius:0.25em;
}
.h { 
    width:0.3em;
    height:3.4em;
    left:3.85em;
    position:relative; 
    background:#222;
    margin-top:1.3em; 
    outline: 1px solid transparent;
    animation: a36010 43200s normal infinite linear;
}
#sh {
    width:8.0em;
    height:8.0em;
    top:0.2em;
    left:0.1em;
    position:absolute;
    /*display:none;*/
}
#sh .s, #sh .m, #sh .h, #sh .mr  {
    background:#ddc;
    box-shadow:0 0 0.05em #ddc, 0 0 0.025em #ddc;
}
#k {
    width:8.8em;
    height:8.8em;
    position:absolute;
    border-radius:4.4em;
    box-shadow:inset 0.45em 0.9em 0.05em rgba(250,252,253,0.2);
}
/* Vendor CSS prefixes */
#clock {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
#clock b>i,
#clock i>i {
    -ms-transform:rotate(6deg);
    -webkit-transform:rotate(6deg);
}
#clock b>b {
    -ms-transform:rotate(30deg);
    -webkit-transform:rotate(30deg);
}
#clock .hh {
    -webkit-transform:rotate(%forclock.hh%deg);
}
#clock .mm {
    -webkit-transform:rotate(%forclock.mm%deg);
}
#clock .ss {
    -webkit-animation: tick 1s normal infinite steps(25,end);
}
@-webkit-keyframes tick {
    0% { -webkit-transform: rotate(0deg); }
    12% { -webkit-transform:rotate(6deg); }
    100% { -webkit-transform: rotate(6deg); }        
}
#clock .s {
    -webkit-animation: a360_10 60s normal infinite steps(60,end); 
}
@-webkit-keyframes a360_10 {
    0% { -webkit-transform: translate(0, 1.0em) rotate(0deg) translate(0,-1.0em) }
    100% { -webkit-transform: translate(0, 1.0em) rotate(360deg) translate(0,-1.0em) }
}
#clock .m {
    -webkit-animation: a36016 3600s normal infinite linear;
}
@-webkit-keyframes a36016 {
    0% { -webkit-transform: translate(0, 1.6em) rotate(0deg) translate(0,-1.6em); }
    50% { -webkit-transform: translate(0, 1.6em) rotate(180deg) translate(0,-1.6em); }
    100% { -webkit-transform: translate(0, 1.6em) rotate(360deg) translate(0,-1.6em); }
}
#clock .h,
#css3fixed:checked ~ #clock .hh {
    -webkit-animation: a36010 43200s normal infinite linear;
}

/* Fixes */

#clock {
    transition:none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
}


#clock b:nth-child(2) {
    transform:rotate(30deg);
    -ms-transform:rotate(30deg);
    -webkit-transform:rotate(30deg);
}
#clock b:nth-child(3) {
    transform:rotate(60deg);
    -ms-transform:rotate(60deg);
    -webkit-transform:rotate(60deg);
}
#clock b:nth-child(4) {
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}
#clock b:nth-child(5) {
    transform:rotate(120deg);
    -ms-transform:rotate(120deg);
    -webkit-transform:rotate(120deg);
}
#clock b:nth-child(6) {
    transform:rotate(150deg);
    -ms-transform:rotate(150deg);
    -webkit-transform:rotate(150deg);
}
#clock i:nth-child(1) {
    transform:rotate(12deg);
    -ms-transform:rotate(12deg);
    -webkit-transform:rotate(12deg);
}
#clock i:nth-child(2) {
    transform:rotate(18deg);
    -ms-transform:rotate(18deg);
    -webkit-transform:rotate(18deg);
}
#clock i:nth-child(3) {
    transform:rotate(24deg);
    -ms-transform:rotate(24deg);
    -webkit-transform:rotate(24deg);    
}
#clock #f {
    -webkit-transform:translate(0,0.05em);                
}
/* IE10 fix */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #css3fixed:checked ~  #clock i, #css3fixed:checked ~  #clock b {
        border-left:solid 0px #fff;
        border-right:solid 0px #fff;
    }
}
/* Opera rotation fix */
#clock .s {
    animation: a360_10of 60s normal infinite steps(60,end); 
}
@keyframes a360_10of {
    0% {  transform: translate(0, 1.0em) rotate(0deg) translate(0,-1.0em);
        -o-transform: translate(0, 2em) rotate(0deg) translate(0,-2em) }
    100% { transform: translate(0, 1.0em) rotate(360deg) translate(0,-1.0em);
        -o-transform: translate(0, 2em) rotate(360deg) translate(0,-2em) }
}

/*** Font for numbers ***/
@font-face {
    font-family: 'WallClock';
    asrc: url('wallclock.eot');
    }

@font-face {
    font-family: 'WallClock';
    src: 
url(data:font/otf;charset=utf-8;base64,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) format('opentype');
    font-weight: normal;
    font-style: normal;
}
#clock {
    position:relative;
  left:50%;
  margin-left:-5em;
}
 
htmlПоказать

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


<style>
/* For showing in codepen */
body {
 background: #27292A;
 padding-top:1em;
 font-size:2em;
 text-align:center;
}
</style>

<!-- Load GMT time with external CSS -->
<link href="http://tezla.ru/rassadin/wall-clock-demo/" rel="stylesheet" type="text/css" />

<div id="clock">
    <div id="a">
        <div id="b">
            <div id="c">
                <div id="d">
                    <div id="sh">
                        <div class="hh">
                            <div class="h"></div>
                        </div>
                        <div class="mm">
                            <div class="m"></div>
                            <div class="mr"></div>
                        </div>
                        <div class="ss">
                            <div class="s"></div>
                        </div>
                    </div>
                    <div id="ii">
                    <b><i></i><i></i><i></i><i></i></b>
                    <b><i></i><i></i><i></i><i></i></b>
                    <b><i></i><i></i><i></i><i></i></b>
                    <b><i></i><i></i><i></i><i></i></b>
                    <b><i></i><i></i><i></i><i></i></b>
                    <b><i></i><i></i><i></i><i></i></b>
                    </div>
                    <div id="e">
                        <div id="f">
                            <u>12<u>1<u>2<u>3</u>4</u>5</u></u>
                        </div>
                        <div id="g">
                            <u><u>11<u>10<u>9</u>8</u>7</u>6</u>
                        </div>
                        <div id="q"><a href="" style="position:relative;z-index:1000;color:#222;text-decoration:none;">quartz</a></div>
                    </div>
                    <div class="hh">
                        <div class="h"></div>
                    </div>
                    <div class="mm">
                        <div class="m"></div>
                        <div class="mr"></div>
                    </div>
                    <div class="ss">
                        <div class="s"></div>
                        <div class="sr"></div>
                    </div>
                    <div id="k"></div>
                </div>
            </div>
        </div>
    </div>
</div> 
Оригинал https://codepen.io/rassadin/pen/cvJmb
За это сообщение автора nick7zmail поблагодарил:
antpino (Пн июн 04, 2018 12:54 pm)
Рейтинг: 1.16%
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
serghei
Сообщения: 2575
Зарегистрирован: Пт ноя 06, 2015 10:22 am
Откуда: Кишинёв
Благодарил (а): 303 раза
Поблагодарили: 282 раза

Re: Сцены и оформление (сборка)

Сообщение serghei » Вт дек 19, 2017 11:02 pm

Подключал подобные на CSS. Очень просто сделать любой дизайн. Вот только когда открываешь страницу - они стоят на 12 часов. Через секунду устанавливается правильное время , но это сильно бесило ))
AMS : ESP32 + NRF24 + 1Wire-I2C мост DS2482 + счетчик DS2423 + сеть MySensors + редактирование страниц в браузере + Upload по воздуху + SPIFFS
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

Re: Сцены и оформление (сборка)

Сообщение nick7zmail » Ср дек 20, 2017 6:30 am

serghei писал(а):Подключал подобные на CSS. Очень просто сделать любой дизайн. Вот только когда открываешь страницу - они стоят на 12 часов. Через секунду устанавливается правильное время , но это сильно бесило ))
Эти сразу на нормальное время ставятся. А вот "любой дизайн" сложновато делать...там столько css напихано))) разбираться тяжело...еле нашел куда текущее положение стрелок втыкать. Есть более простые примеры...там проще...эти часики просто красивее показались, вот и поделился =)
За это сообщение автора nick7zmail поблагодарил:
Берендей (Ср дек 20, 2017 10:36 am)
Рейтинг: 1.16%
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Берендей
Сообщения: 125
Зарегистрирован: Ср окт 18, 2017 9:44 am
Благодарил (а): 24 раза
Поблагодарили: 18 раз

Re: Сцены и оформление (сборка)

Сообщение Берендей » Ср дек 20, 2017 10:41 am

Не подскажете, как задать им текущее время ?
OrangePI PC/ARMBIAN 5.36 + DS3231+433Mhz. Esp8266(ArduinoIDE). Arduino MEGA2560 + Oregon THGN132N.
Sonoff RF Bridge + sensors
Ответить