Skip to content

[dash-apps] Turn the ADAS wheel with the steering angle in custom dash app #245

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wpmed92 merged 2 commits into from
Oct 2, 2026
Merged

[dash-apps] Turn the ADAS wheel with the steering angle in custom dash app #245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
70e0932
feat(dash-apps): turn the adas wheel with the steering angle
palgabor94 Oct 2, 2026
c8f1421
Fixes
wpmed92 Oct 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions dash-apps/web-compose/core/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
fusedSpeedLimit: t % 30 < 15 ? 90 : 130,
gear: 4,
adasOn: t > 6,
egoSteeringAngle: Math.sin(t * 0.5) * 45,
leftBlinker: blinkPhase > 4 && blinkPhase < 7 ? 1 : 0,
rightBlinker: blinkPhase > 12 && blinkPhase < 15 ? 1 : 0,
leftBlindSpot: blinkPhase > 4.5 && blinkPhase < 6 ? 1 : 0,
Expand Down
5 changes: 3 additions & 2 deletions dash-apps/web-compose/core/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -465,9 +465,10 @@

body.appendChild(field(t("editor.type"), typeControl(item)));

if ((descriptor.binds || []).length) {
const binds = (descriptor.binds || []).filter((bind) => !bind.hidden);
if (binds.length) {
body.appendChild(el("h3", "sheet__section", t("editor.shows")));
for (const bind of descriptor.binds) {
for (const bind of binds) {
const label = bind.name ? DC.i18n.localized(bind.name) : t("editor.shows");
body.appendChild(field(label, bindControl(item, bind, refresh)));
}
Expand Down
4 changes: 3 additions & 1 deletion dash-apps/web-compose/widgets/_generated.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
width: clamp(16px, 48cqmin, 120px);
height: clamp(16px, 48cqmin, 120px);
fill: var(--track);
transition: fill 120ms linear, filter 120ms linear;
transition: fill 120ms linear, filter 120ms linear, transform 80ms linear;
}
.lamp__label {
color: var(--text-dim);
Expand All @@ -91,6 +91,8 @@
fill: var(--lamp-on);
filter: drop-shadow(0 0 6px var(--lamp-on));
}
.w-lamp[data-steer="1"] .lamp__icon { will-change: transform; }
.w-lamp[data-steer="1"][data-on="1"] .lamp__icon { filter: none; }
.w-lamp[data-on="1"] .lamp__label { color: var(--text); }
.w-lamp[data-on="1"][data-blink="1"] .lamp__icon { animation: lamp-blink 0.8s steps(1) infinite; }
.w-lamp[data-hide-off="1"][data-on="0"] { visibility: hidden; }
Expand Down
20 changes: 16 additions & 4 deletions dash-apps/web-compose/widgets/_generated.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
return create;
})());
// --- lamp
register({"type":"lamp","version":1,"renderer":"dom","name":{"en":"Indicator","hu":"Jelzőfény","de":"Kontrollleuchte"},"defaultSize":{"w":2,"h":2},"minSize":{"w":1,"h":1},"binds":[{"key":"value","kinds":["bool"],"name":{"en":"Condition","hu":"Feltétel","de":"Bedingung"},"default":"adasOn"}],"props":[{"key":"label","type":"string","default":"","name":{"en":"Label","hu":"Felirat","de":"Beschriftung"}},{"key":"icon","type":"enum","default":"dot","options":["dot","arrow-left","arrow-right","warning","wheel"],"name":{"en":"Icon","hu":"Ikon","de":"Symbol"}},{"key":"color","type":"color","default":"#22c55e","name":{"en":"Active color","hu":"Aktív szín","de":"Aktive Farbe"}},{"key":"blink","type":"bool","default":false,"name":{"en":"Blink when active","hu":"Villogjon aktívan","de":"Blinken wenn aktiv"}},{"key":"hideWhenOff","type":"bool","default":false,"name":{"en":"Hide when off","hu":"Rejtve, ha nem aktív","de":"Ausblenden wenn aus"}},{"key":"showLabel","type":"bool","default":false,"name":{"en":"Show label","hu":"Felirat mutatása","de":"Beschriftung anzeigen"}}]}, (function () {
register({"type":"lamp","version":1,"renderer":"dom","name":{"en":"Indicator","hu":"Jelzőfény","de":"Kontrollleuchte"},"defaultSize":{"w":2,"h":2},"minSize":{"w":1,"h":1},"binds":[{"key":"value","kinds":["bool"],"name":{"en":"Condition","hu":"Feltétel","de":"Bedingung"},"default":"adasOn"},{"key":"steering","kinds":["number"],"default":"egoSteeringAngle","hidden":true}],"props":[{"key":"label","type":"string","default":"","name":{"en":"Label","hu":"Felirat","de":"Beschriftung"}},{"key":"icon","type":"enum","default":"dot","options":["dot","arrow-left","arrow-right","warning","wheel"],"name":{"en":"Icon","hu":"Ikon","de":"Symbol"}},{"key":"color","type":"color","default":"#22c55e","name":{"en":"Active color","hu":"Aktív szín","de":"Aktive Farbe"}},{"key":"blink","type":"bool","default":false,"name":{"en":"Blink when active","hu":"Villogjon aktívan","de":"Blinken wenn aktiv"}},{"key":"hideWhenOff","type":"bool","default":false,"name":{"en":"Hide when off","hu":"Rejtve, ha nem aktív","de":"Ausblenden wenn aus"}},{"key":"showLabel","type":"bool","default":false,"name":{"en":"Show label","hu":"Felirat mutatása","de":"Beschriftung anzeigen"}}]}, (function () {
// On/off indicator for any bool signal. The whole visual state is one
// data-on attribute on the cell body; colors and blinking live in CSS.
function create(ctx) {
Expand Down Expand Up @@ -118,13 +118,25 @@
el.appendChild(label);
}

const steers = props.icon === "wheel";
if (steers) {
el.dataset.steer = "1";
icon.style.transform = "rotate(0deg)";
}
let last = "0";
let lastAngle = 0;
return {
update(values) {
const next = values.value ? "1" : "0";
if (next === last) return;
last = next;
el.dataset.on = next;
if (next !== last) {
last = next;
el.dataset.on = next;
}
if (!steers) return;
const angle = values.steering === undefined ? 0 : Math.round(values.steering);
if (angle === lastAngle) return;
lastAngle = angle;
icon.style.transform = "rotate(" + angle + "deg)";
},
};
}
Expand Down
8 changes: 8 additions & 0 deletions dash-apps/web-compose/widgets/lamp/descriptor.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,14 @@
"de": "Bedingung"
},
"default": "adasOn"
},
{
"key": "steering",
"kinds": [
"number"
],
"default": "egoSteeringAngle",
"hidden": true
}
],
"props": [
Expand Down
4 changes: 3 additions & 1 deletion dash-apps/web-compose/widgets/lamp/widget.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
width: clamp(16px, 48cqmin, 120px);
height: clamp(16px, 48cqmin, 120px);
fill: var(--track);
transition: fill 120ms linear, filter 120ms linear;
transition: fill 120ms linear, filter 120ms linear, transform 80ms linear;
}
.lamp__label {
color: var(--text-dim);
Expand All @@ -26,6 +26,8 @@
fill: var(--lamp-on);
filter: drop-shadow(0 0 6px var(--lamp-on));
}
.w-lamp[data-steer="1"] .lamp__icon { will-change: transform; }
.w-lamp[data-steer="1"][data-on="1"] .lamp__icon { filter: none; }
.w-lamp[data-on="1"] .lamp__label { color: var(--text); }
.w-lamp[data-on="1"][data-blink="1"] .lamp__icon { animation: lamp-blink 0.8s steps(1) infinite; }
.w-lamp[data-hide-off="1"][data-on="0"] { visibility: hidden; }
Expand Down
18 changes: 15 additions & 3 deletions dash-apps/web-compose/widgets/lamp/widget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,25 @@ function create(ctx) {
el.appendChild(label);
}

const steers = props.icon === "wheel";
if (steers) {
el.dataset.steer = "1";
icon.style.transform = "rotate(0deg)";
}
let last = "0";
let lastAngle = 0;
return {
update(values) {
const next = values.value ? "1" : "0";
if (next === last) return;
last = next;
el.dataset.on = next;
if (next !== last) {
last = next;
el.dataset.on = next;
}
if (!steers) return;
const angle = values.steering === undefined ? 0 : Math.round(values.steering);
if (angle === lastAngle) return;
lastAngle = angle;
icon.style.transform = "rotate(" + angle + "deg)";
},
};
}
20 changes: 2 additions & 18 deletions dashpilot-ios/dashpilot/DataSource/DemoDataSource.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,6 @@ final class DemoDataSource: IDataSource {
private static let goEnd: TimeInterval = 78
// cycleLength is the end of the accelerate-back-to-cruise phase.

#if DEBUG
private static let parked = true
#else
private static let parked = false
#endif

/// Slowly drifting base speed, continuous across cycle boundaries so
/// cruise phases never jump.
private static func cruiseSpeed(at t: TimeInterval) -> Float {
Expand Down Expand Up @@ -86,7 +80,7 @@ final class DemoDataSource: IDataSource {
case ..<turnStart:
// Cruise.
s.egoSpeed = cruiseSpeed(at: t)
s.egoSteeringAngle = Float(sin(t * 0.3) * 3) // gentle lane-keeping wiggle
s.egoSteeringAngle = Float(sin(t * 0.3) * 15) // lane-keeping wiggle, big enough to see
s.trafficLightColor = 0
s.stopLineDist = 0

Expand All @@ -106,7 +100,7 @@ final class DemoDataSource: IDataSource {

case ..<cruise2End:
s.egoSpeed = cruiseSpeed(at: t)
s.egoSteeringAngle = Float(sin(t * 0.3) * 3)
s.egoSteeringAngle = Float(sin(t * 0.3) * 15)
s.trafficLightColor = 0
s.stopLineDist = 0

Expand Down Expand Up @@ -145,16 +139,6 @@ final class DemoDataSource: IDataSource {
s.stopLineDist = 0
}

if parked {
s.gear = 1 // Park
s.egoSpeed = 0
s.egoSteeringAngle = 0
s.leftBlinker = 0
s.rightBlinker = 0
s.trafficLightColor = 0
s.stopLineDist = 0
}

s.accSetSpeed = cruiseSpeed(at: t) + 5

s.leftBlindSpot = t.truncatingRemainder(dividingBy: 23) < 3 ? 1 : 0
Expand Down
Loading