Add silent mode for sensor detection and moisture measurement
- Introduced the `silent` parameter to prevent UI progress updates during automatic operations. - Enhanced CAN robustness with improved bus-off management, retransmission settings, and jitter tolerance. - Added auto-refresh functionality for plant moisture and sensor detection with configurable enablement.
This commit is contained in:
@@ -1,195 +1,202 @@
|
||||
<style>
|
||||
.progressPane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: grey;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 2.5em;
|
||||
width: 100%;
|
||||
background-color: #555;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progressSpacer{
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.progress:after {
|
||||
content: attr(data-label);
|
||||
font-size: 0.8em;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.progress .value {
|
||||
background-color: darkcyan;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.progress .valueIndeterminate {
|
||||
background-color: darkcyan;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
animation: indeterminateAnimation 1s infinite linear;
|
||||
transform-origin: 0 50%;
|
||||
}
|
||||
|
||||
|
||||
@keyframes indeterminateAnimation {
|
||||
0% {
|
||||
transform: translateX(0%) scaleX(0.5);
|
||||
.progressPane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: grey;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(50%) scaleX(0.5);
|
||||
.progress {
|
||||
height: 2.5em;
|
||||
width: 100%;
|
||||
background-color: #555;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0%) scaleX(0.5);
|
||||
.progressSpacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.flexcontainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.flexcontainer-rev{
|
||||
display: flex;
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
.subcontainer {
|
||||
min-width: 300px;
|
||||
max-width: 900px;
|
||||
flex-grow: 1;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding: 8px;
|
||||
}
|
||||
.subcontainercontainer{
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.plantcontainer {
|
||||
flex-grow: 1;
|
||||
min-width: 100%;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding: 8px;
|
||||
.progress:after {
|
||||
content: attr(data-label);
|
||||
font-size: 0.8em;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
@media (min-width: 350px) {
|
||||
|
||||
.progress .value {
|
||||
background-color: darkcyan;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.progress .valueIndeterminate {
|
||||
background-color: darkcyan;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
animation: indeterminateAnimation 1s infinite linear;
|
||||
transform-origin: 0 50%;
|
||||
}
|
||||
|
||||
|
||||
@keyframes indeterminateAnimation {
|
||||
0% {
|
||||
transform: translateX(0%) scaleX(0.5);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(50%) scaleX(0.5);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0%) scaleX(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.flexcontainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flexcontainer-rev {
|
||||
display: flex;
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.subcontainer {
|
||||
min-width: 300px;
|
||||
max-width: 900px;
|
||||
flex-grow: 1;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.subcontainercontainer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.plantcontainer {
|
||||
flex-grow: 1;
|
||||
min-width: 40%;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding: 8px;
|
||||
flex-grow: 1;
|
||||
min-width: 100%;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1100px) {
|
||||
.plantcontainer {
|
||||
flex-grow: 1;
|
||||
min-width: 20%;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding: 8px;
|
||||
|
||||
@media (min-width: 350px) {
|
||||
.plantcontainer {
|
||||
flex-grow: 1;
|
||||
min-width: 40%;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 2150px) {
|
||||
.plantcontainer {
|
||||
flex-grow: 1;
|
||||
min-width: 200px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding: 8px;
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
.plantcontainer {
|
||||
flex-grow: 1;
|
||||
min-width: 20%;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2150px) {
|
||||
.plantcontainer {
|
||||
flex-grow: 1;
|
||||
min-width: 200px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.plantlist {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.plantlist {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<div class="container-xl">
|
||||
<div style="display:flex; flex-wrap: wrap;">
|
||||
<div id="hardwareview" class="subcontainer"></div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex; flex-wrap: wrap;">
|
||||
<div id="firmwareview" class="subcontainer">
|
||||
<div style="display:flex; flex-wrap: wrap;">
|
||||
<div id="hardwareview" class="subcontainer"></div>
|
||||
</div>
|
||||
<div id="timeview" class="subcontainer">
|
||||
|
||||
<div style="display:flex; flex-wrap: wrap;">
|
||||
<div id="firmwareview" class="subcontainer">
|
||||
</div>
|
||||
<div id="timeview" class="subcontainer">
|
||||
</div>
|
||||
<div id="batteryview" class="subcontainer">
|
||||
</div>
|
||||
<div id="solarview" class="subcontainer">
|
||||
</div>
|
||||
</div>
|
||||
<div id="batteryview" class="subcontainer">
|
||||
|
||||
<div class="flexcontainer">
|
||||
<div id="network_view" class="subcontainercontainer"></div>
|
||||
<div id="lightview" class="subcontainer">
|
||||
</div>
|
||||
<div id="tankview" class="subcontainer">
|
||||
</div>
|
||||
</div>
|
||||
<div id="solarview" class="subcontainer">
|
||||
|
||||
<h3>Plants:</h3>
|
||||
<button id="measure_moisture">Measure Moisture</button>
|
||||
<button id="detect_sensors" style="display:none">Detect/Test Sensors</button>
|
||||
<input id="can_power" type="checkbox"><label for="can_power">Power CAN</label>
|
||||
<input id="auto_refresh_moisture_sensors" type="checkbox"><label for="auto_refresh_moisture_sensors">Auto Refresh
|
||||
Moisture/Sensors</label>
|
||||
<div id="plants" class="plantlist"></div>
|
||||
|
||||
<div class="flexcontainer-rev">
|
||||
<div id="submitview" class="subcontainer">
|
||||
</div>
|
||||
<div id="fileview" class="subcontainer">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flexcontainer">
|
||||
<div id="network_view" class="subcontainercontainer"></div>
|
||||
<div id="lightview" class="subcontainer">
|
||||
|
||||
<button id="exit">Exit</button>
|
||||
<button id="reboot">Reboot</button>
|
||||
|
||||
<div class="flexcontainer">
|
||||
<div id="logview" class="subcontainercontainer"></div>
|
||||
</div>
|
||||
<div id="tankview" class="subcontainer">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Plants:</h3>
|
||||
<button id="measure_moisture">Measure Moisture</button>
|
||||
<button id="detect_sensors" style="display:none">Detect/Test Sensors</button>
|
||||
<input id="can_power" type="checkbox">Power CAN</input>
|
||||
<div id="plants" class="plantlist"></div>
|
||||
|
||||
<div class="flexcontainer-rev">
|
||||
<div id = "submitview" class="subcontainer">
|
||||
</div>
|
||||
<div id="fileview" class="subcontainer">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<button id="exit">Exit</button>
|
||||
<button id="reboot">Reboot</button>
|
||||
|
||||
<div class="flexcontainer">
|
||||
<div id="logview" class="subcontainercontainer"></div>
|
||||
</div>
|
||||
|
||||
<script src="bundle.js"></script>
|
||||
<script src="bundle.js"></script>
|
||||
</div>
|
||||
|
||||
<div id="progressPane" class="progressPane">
|
||||
<div class="progressSpacer"></div>>
|
||||
<div id="progressPaneBar" class="progress" data-label="50% Complete">
|
||||
<span id="progressPaneSpan" class="value" style="width:100%;"></span>
|
||||
</div>
|
||||
<div class="progressSpacer"></div>>
|
||||
<div class="progressSpacer"></div>
|
||||
>
|
||||
<div id="progressPaneBar" class="progress" data-label="50% Complete">
|
||||
<span id="progressPaneSpan" class="value" style="width:100%;"></span>
|
||||
</div>
|
||||
<div class="progressSpacer"></div>
|
||||
>
|
||||
</div>
|
||||
Reference in New Issue
Block a user