Страница 1 из 1

дальномер в majordomo

Добавлено: Ср июн 13, 2018 4:29 pm
blacbag
прикрутил ардуиновский ультазвуковой дальномер для контроля уровня воды в подвале к мд. вопрос в том как на сцене сделать визаулизацию при помощи вертикального статус бара. пока осилил только в виде цифрового значения на сцене. буду благодарен за подсказки более опытных товарищей.
ИзображениеПоказать
20180613_143909.jpg
20180613_143909.jpg (3.99 МБ) 839 просмотров

Re: дальномер в majordomo

Добавлено: Ср июн 13, 2018 5:03 pm
Aven
Нормальное с водой работает УЗ датчик?
Вот пример прогресс бара на html/css
https://codepen.io/vishalkardode/pen/jEPPKa

Re: дальномер в majordomo

Добавлено: Пт июн 15, 2018 1:11 pm
blacbag
плату дальномера полностью залил эбаксидкой, только сенсоры торчат. пол года работает. если интересно завтра фото могу выложить. огромное спасибо за пример. Но в програмировании я пока не очень силен потому есть ряд вопросов: куда в мд код вставить? надо ли его править? пустой подвал у меня значене датчика 1681 полный 500. возможно более подробные пояснения по теме и ссылки на мунулы не только мне помогут.

Re: дальномер в majordomo

Добавлено: Пт июн 15, 2018 3:45 pm
xor
Хе, на нём видел датчик высоты снежного покрова. Готовые дорогущие.

Отправлено с моего Redmi 4X через Tapatalk


Re: дальномер в majordomo

Добавлено: Пт июн 15, 2018 6:19 pm
Vit
blacbag писал(а):
Ср июн 13, 2018 4:29 pm
прикрутил ардуиновский ультазвуковой дальномер для контроля уровня воды в подвале к мд. вопрос в том как на сцене сделать визаулизацию при помощи вертикального статус бара. пока осилил только в виде цифрового значения на сцене. буду благодарен за подсказки более опытных товарищей.
Вот пример горизонтального прогресс бара:
ИзображениеПоказать
123.PNG
123.PNG (997 байт) 741 просмотр
Код для примера:Показать
<div class="wrapper">
<div class="progress-bar">
<span class="progress-bar-fill" style="width: %ThisComputer.volumeLevel%%"></span>
<span class="progressbar-value">%ThisComputer.volumeLevel%%</span>
</div>
</div>
Стили css:Показать
.wrapper {
width: 200px;
}

.progress-bar {
width: 100%;
background-color: #e0e0e0;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}

.progress-bar-fill {
display: block;
height: 22px;
background-color: #659cef;
border-radius: 3px;
transition: width 500ms ease-in-out;
}
.progressbar-value{
position:absolute;
left:1px;
top:-2px;
color:#fff;
font-weight: bold;

padding:10px 15px;
border-radius:5px;
}