дальномер в majordomo

[blacbag]

прикрутил ардуиновский ультазвуковой дальномер для контроля уровня воды в подвале к мд. вопрос в том как на сцене сделать визаулизацию при помощи вертикального статус бара. пока осилил только в виде цифрового значения на сцене. буду благодарен за подсказки более опытных товарищей.

ИзображениеSPOILER_SHOW

20180613_143909.jpg (3.99 МБ) 3581 просмотр

[Aven]

Нормальное с водой работает УЗ датчик?
Вот пример прогресс бара на html/css
https://codepen.io/vishalkardode/pen/jEPPKa

[blacbag]

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

[xor]

Хе, на нём видел датчик высоты снежного покрова. Готовые дорогущие.

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

[Vit]

прикрутил ардуиновский ультазвуковой дальномер для контроля уровня воды в подвале к мд. вопрос в том как на сцене сделать визаулизацию при помощи вертикального статус бара. пока осилил только в виде цифрового значения на сцене. буду благодарен за подсказки более опытных товарищей.

Вот пример горизонтального прогресс бара:

ИзображениеSPOILER_SHOW

123.PNG (997 байт) 3483 просмотра

Код для примера:SPOILER_SHOW

<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:SPOILER_SHOW

.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;
}