Hide some servos
9962a6dc13bff699353ebf715cf304777564361d
6 files changed
RobotSharp/Models/RobotSerialSettings.csRobotSharp/appsettings.jsonRobotSharp/wwwroot/css/site.cssRobotSharp/wwwroot/js/servos.jsRobotSharp/wwwroot/js/settings.jsRobotSharp/wwwroot/settings.html
diff --git a/RobotSharp/Models/RobotSerialSettings.cs b/RobotSharp/Models/RobotSerialSettings.cs
index ffa5d93..e4a2d80 100644
--- a/RobotSharp/Models/RobotSerialSettings.cs
+++ b/RobotSharp/Models/RobotSerialSettings.cs
@@ -9,4 +9,5 @@ public class RobotSerialSettings
public int SpeedMs { get; set; } = 500;
public int DelayMs { get; set; } = 500;
public int ServoCount { get; set; } = 32;
+ public List<int> HiddenServos { get; set; } = new();
}
diff --git a/RobotSharp/appsettings.json b/RobotSharp/appsettings.json
index ee44619..3ccdfc7 100644
--- a/RobotSharp/appsettings.json
+++ b/RobotSharp/appsettings.json
@@ -11,6 +11,32 @@
"BaudRate": 115200,
"SpeedMs": 100,
"DelayMs": 200,
- "ServoCount": 32
+ "ServoCount": 32,
+ "HiddenServos": [
+ 9,
+ 10,
+ 11,
+ 12,
+ 13,
+ 14,
+ 15,
+ 16,
+ 17,
+ 18,
+ 19,
+ 20,
+ 21,
+ 22,
+ 23,
+ 24,
+ 25,
+ 26,
+ 27,
+ 28,
+ 29,
+ 30,
+ 31,
+ 32
+ ]
}
}
\ No newline at end of file
diff --git a/RobotSharp/wwwroot/css/site.css b/RobotSharp/wwwroot/css/site.css
index 4da656d..dc83f0a 100644
--- a/RobotSharp/wwwroot/css/site.css
+++ b/RobotSharp/wwwroot/css/site.css
@@ -105,3 +105,22 @@ button:disabled { opacity: .5; cursor: not-allowed; }
#log .sys { color: #ffb454; }
.actions { display: flex; gap: 10px; align-items: center; margin: 10px 0; }
+
+.visible-servo-grid {
+ display: grid;
+ grid-template-columns: repeat(8, 1fr);
+ gap: 6px;
+}
+@media (max-width: 1100px) { .visible-servo-grid { grid-template-columns: repeat(4, 1fr); } }
+@media (max-width: 600px) { .visible-servo-grid { grid-template-columns: repeat(2, 1fr); } }
+.visible-servo-item {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ color: #eee;
+ background: #14141f;
+ border: 1px solid #3a3a52;
+ border-radius: 6px;
+ padding: 6px 8px;
+}
+.visible-servo-item input[type=checkbox] { width: auto; margin-right: 6px; }
diff --git a/RobotSharp/wwwroot/js/servos.js b/RobotSharp/wwwroot/js/servos.js
index 36a7390..3f3afb2 100644
--- a/RobotSharp/wwwroot/js/servos.js
+++ b/RobotSharp/wwwroot/js/servos.js
@@ -7,6 +7,7 @@ const delayInput = document.getElementById('delayMs');
const MIN = 500, MAX = 2500, DEFAULT = 1500;
let servoCount = 32;
+let hiddenServos = [];
function setMsg(text, isError)
{
@@ -19,6 +20,7 @@ function buildGrid()
grid.innerHTML = '';
for (let ch = 1; ch <= servoCount; ch++)
{
+ if (hiddenServos.includes(ch)) continue;
const groupClass = 'g' + (Math.floor((ch - 1) / 8) % 4);
const div = document.createElement('div');
div.className = `servo ${groupClass}`;
@@ -63,6 +65,7 @@ function collectTargets(onlySelected)
for (let ch = 1; ch <= servoCount; ch++)
{
const sel = grid.querySelector(`input[data-role=sel][data-ch="${ch}"]`);
+ if (!sel) continue;
if (onlySelected && !sel.checked) continue;
const num = grid.querySelector(`input[data-role=num][data-ch="${ch}"]`);
targets.push({ channel: ch, position: Number(num.value) });
@@ -122,7 +125,7 @@ function demoTick()
for (let ch = 1; ch <= servoCount; ch++)
{
const sel = grid.querySelector(`input[data-role=sel][data-ch="${ch}"]`);
- if (sel.checked) selected.push(ch);
+ if (sel && sel.checked) selected.push(ch);
}
for (const ch of selected)
@@ -172,6 +175,7 @@ demoBtn.addEventListener('click', () =>
{
const s = await api('/settings');
servoCount = s.servoCount || 32;
+ hiddenServos = s.hiddenServos || [];
speedInput.value = s.speedMs;
delayInput.value = s.delayMs;
} catch { }
diff --git a/RobotSharp/wwwroot/js/settings.js b/RobotSharp/wwwroot/js/settings.js
index 6a35154..3329c2f 100644
--- a/RobotSharp/wwwroot/js/settings.js
+++ b/RobotSharp/wwwroot/js/settings.js
@@ -7,6 +7,7 @@ const speedInput = document.getElementById('speedMs');
const delayInput = document.getElementById('delayMs');
const countInput = document.getElementById('servoCount');
const ackMarginInput = document.getElementById('ackTimeoutMarginMs');
+const visibleServoGrid = document.getElementById('visibleServoGrid');
const connectBtn = document.getElementById('connectBtn');
const disconnectBtn = document.getElementById('disconnectBtn');
@@ -43,6 +44,28 @@ async function loadPorts(selected)
}
}
+function buildVisibleServoGrid(servoCount, hiddenServos)
+{
+ visibleServoGrid.innerHTML = '';
+ for (let ch = 1; ch <= servoCount; ch++)
+ {
+ const label = document.createElement('label');
+ label.className = 'visible-servo-item';
+ label.innerHTML = `<input type="checkbox" data-role="visible" data-ch="${ch}" ${hiddenServos.includes(ch) ? '' : 'checked'} /> S${ch}`;
+ visibleServoGrid.appendChild(label);
+ }
+}
+
+function collectHiddenServos()
+{
+ const hidden = [];
+ visibleServoGrid.querySelectorAll('input[data-role=visible]').forEach(c =>
+ {
+ if (!c.checked) hidden.push(Number(c.dataset.ch));
+ });
+ return hidden;
+}
+
async function loadSettings()
{
const s = await api('/settings');
@@ -52,8 +75,11 @@ async function loadSettings()
delayInput.value = s.delayMs;
countInput.value = s.servoCount;
ackMarginInput.value = s.ackTimeoutMarginMs;
+ buildVisibleServoGrid(s.servoCount, s.hiddenServos || []);
}
+countInput.addEventListener('change', () => buildVisibleServoGrid(Number(countInput.value), collectHiddenServos()));
+
async function saveSettings()
{
return api('/settings', {
@@ -65,6 +91,7 @@ async function saveSettings()
delayMs: Number(delayInput.value),
servoCount: Number(countInput.value),
ackTimeoutMarginMs: Number(ackMarginInput.value),
+ hiddenServos: collectHiddenServos(),
}),
});
}
diff --git a/RobotSharp/wwwroot/settings.html b/RobotSharp/wwwroot/settings.html
index b62fab5..4a61350 100644
--- a/RobotSharp/wwwroot/settings.html
+++ b/RobotSharp/wwwroot/settings.html
@@ -50,6 +50,13 @@
</div>
</div>
+ <div class="row" style="margin-top:12px">
+ <div style="width:100%">
+ <label>Zichtbare servo's op Servo pagina</label>
+ <div id="visibleServoGrid" class="visible-servo-grid"></div>
+ </div>
+ </div>
+
<div class="actions">
<button id="saveBtn">Opslaan</button>
<button id="connectBtn" class="secondary">Verbinden</button>