Skip to content

Setup Guide: Make it clear when comma power is required #322

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

Open
ugtthis wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Setup Guide: Make it clear when comma power is required #322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
02354c5
data
ugtthis Jun 21, 2026
a57a80e
ui/ux
ugtthis Jun 21, 2026
aa56577
change id decoupled from step number
ugtthis Jun 21, 2026
2a978ce
not needed
ugtthis Jun 21, 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
2 changes: 1 addition & 1 deletion src/lib/compatibility-meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"last_updated": "June 13, 2026"
"last_updated": "June 21, 2026"
}
1 change: 1 addition & 0 deletions src/lib/utils/harnesses.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ async function initializeHarnesses() {
backordered: harness?.backordered, // these overrides are only shown if the harness is out of stock in Shopify
setupNotes: model.setup_notes,
setupVideo: model.setup_video,
requiresCommaPower: model.requires_comma_power === true,
};
}).filter(Boolean);
});
Expand Down
8 changes: 6 additions & 2 deletions src/lib/vehicles.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3336,7 +3336,9 @@
"footnotes": [
],
"setup_notes": [
]
"Mazda vehicles \u003cb\u003erequire\u003c/b\u003e comma power installation."
],
"requires_comma_power": true
},
{
"name": "Mazda CX-9 2021-23",
Expand All @@ -3351,7 +3353,9 @@
"footnotes": [
],
"setup_notes": [
]
"Mazda vehicles \u003cb\u003erequire\u003c/b\u003e comma power installation."
],
"requires_comma_power": true
}
],
"Nissan": [
Expand Down
64 changes: 38 additions & 26 deletions src/routes/setup/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@
const handleHarnessSelection = (value) => {
selectedVehicle = value;
}
$: requiresCommaPower = selectedVehicle?.requiresCommaPower === true;
$: totalSteps = requiresCommaPower ? 6 : 5;

function getVideoEmbedSrc(videoLink) {
const url = new URL(videoLink);
Expand Down Expand Up @@ -71,7 +73,7 @@
<div class="overview">
<div>
{@html RecordingsIcon}
<span>5 steps</span>
<span>{totalSteps} steps</span>
</div>
<div class="divider" />
<div>
Expand Down Expand Up @@ -173,7 +175,7 @@
</div>

<div class="step" id="step-1">
<Badge style="dark">Step 1 <span class="muted">of 5</span></Badge>
<Badge style="dark">Step 1 <span class="muted">of {totalSteps}</span></Badge>
<h2>Remove the rearview mirror cover trim</h2>
<Grid templateColumns="0.875fr 0.75fr">
<div class="image-grid">
Expand All @@ -192,7 +194,7 @@
</div>
<hr />
<div class="step" id="step-2">
<Badge style="dark">Step 2 <span class="muted">of 5</span></Badge>
<Badge style="dark">Step 2 <span class="muted">of {totalSteps}</span></Badge>
<h2>Connect car harness into the camera</h2>
<Grid templateColumns="0.875fr 0.75fr">
<div class="image-grid">
Expand All @@ -213,7 +215,7 @@
</div>
<hr />
<div class="step" id="step-3">
<Badge style="dark">Step 3 <span class="muted">of 5</span></Badge>
<Badge style="dark">Step 3 <span class="muted">of {totalSteps}</span></Badge>
<h2>Place mount high and centered on the windshield</h2>
<Grid templateColumns="0.875fr 0.75fr">
<div class="image-grid">
Expand All @@ -235,7 +237,7 @@
</div>
<hr />
<div class="step" id="step-4">
<Badge style="dark">Step 4 <span class="muted">of 5</span></Badge>
<Badge style="dark">Step 4 <span class="muted">of {totalSteps}</span></Badge>
<h2>Plug in OBD-C and mount the device</h2>
<Grid templateColumns="0.875fr 0.75fr">
<div class="image-grid">
Expand All @@ -252,7 +254,7 @@
</div>
<hr />
<div class="step" id="step-5">
<Badge style="dark">Step 5 <span class="muted">of 5</span></Badge>
<Badge style="dark">Step 5 <span class="muted">of {totalSteps}</span></Badge>
<h2>Reinstall the rearview mirror cover trim</h2>
<Grid templateColumns="0.875fr 0.75fr">
<div class="image-grid">
Expand All @@ -269,44 +271,54 @@
</div>

<hr />
<div class="step">
<Badge style="dark">OPTIONAL STEP</Badge>
<h2>Pair your device with comma connect</h2>
<div class="step" id="comma-power-step">
<Badge style="dark">
{#if requiresCommaPower}
Step 6 <span class="muted">of {totalSteps}</span>
{:else}
OPTIONAL STEP
{/if}
</Badge>
<h2>Add the comma power</h2>
<Grid templateColumns="0.875fr 0.75fr">
<div>
<img src={StepSixImage} loading="lazy" alt="comma connect application logo" />
<img src={CommaPowerImage} loading="lazy" alt="comma power" />
</div>
<div>
<p>
Pair your comma four with <a href="https://connect.comma.ai/" target="_blank" class="highlight">connect.comma.ai</a> on your phone to see your recorded drives.
{#if requiresCommaPower}
Installing comma power is required for this vehicle.
{:else}
Installing the comma power is entirely optional and can be done at any time.
{/if}
Simply connect one end to your car's OBD-II port and the other to the harness box.
</p>
<br />
<LinkButton href="https://connect.comma.ai/" target="_blank" style="primary" fullWidth={true}>comma Connect</LinkButton>
<p>
With a comma power:
</p>
<ul>
<li>The start and end of every drive are recorded.</li>
<li>Your comma four remains powered and online while the car is off.</li>
<li>Your comma four downloads updates while the car is off.</li>
</ul>
</div>
</Grid>
</div>

<hr />
<div class="step">
<div class="step" id="comma-connect-step">
<Badge style="dark">OPTIONAL STEP</Badge>
<h2>Add the comma power</h2>
<h2>Pair your device with comma connect</h2>
<Grid templateColumns="0.875fr 0.75fr">
<div>
<img src={CommaPowerImage} loading="lazy" alt="comma power" />
<img src={StepSixImage} loading="lazy" alt="comma connect application logo" />
</div>
<div>
<p>
Installing the comma power is entirely optional and can be done at any time.
Simply connect one end to your car's OBD-II port and the other to the harness box.
</p>
<p>
With a comma power:
Pair your comma four with <a href="https://connect.comma.ai/" target="_blank" class="highlight">connect.comma.ai</a> on your phone to see your recorded drives.
</p>
<ul>
<li>The start and end of every drive are recorded.</li>
<li>Your comma four remains powered and online while the car is off.</li>
<li>Your comma four downloads updates while the car is off.</li>
</ul>
<br />
<LinkButton href="https://connect.comma.ai/" target="_blank" style="primary" fullWidth={true}>comma Connect</LinkButton>
</div>
</Grid>
</div>
Expand Down
3 changes: 2 additions & 1 deletion templates/vehicles_template.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@
{% for footnote in car.footnotes if footnote.value.setup_note %}
{{ footnote.value.text | tojson }}{{ "" if loop.last else "," }}
{% endfor %}
]
]{% if car.requires_comma_power %},
"requires_comma_power": true{% endif +%}
}{{ "" if loop.last else "," }}
{% endfor %}
]{{ "" if loop.last else "," }}
Expand Down
Loading