Skip to content
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

Remove React (to jquery) #73

Closed
wants to merge 1 commit into from
Closed

Remove React (to jquery) #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
153 changes: 153 additions & 0 deletions index-jquery.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="src/app/icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Update your comma device to the latest software" />
<title>flash.comma.ai</title>

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400&display=swap" rel="stylesheet">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- Configuration -->
<script src="src/config-jquery.js"></script>

<!-- Utilities -->
<script src="src/utils/blob-jquery.js"></script>
<script src="src/utils/manifest-jquery.js"></script>

<!-- QDL Dependencies -->
<script src="src/QDL/utils-jquery.js"></script>
<script src="src/QDL/usblib-jquery.js"></script>
<script src="src/QDL/sahara-jquery.js"></script>
<script src="src/QDL/saharaDefs-jquery.js"></script>
<script src="src/QDL/firehose-jquery.js"></script>
<script src="src/QDL/gpt-jquery.js"></script>
<script src="src/QDL/qdl-jquery.js"></script>
<script src="src/QDL/sparse-jquery.js"></script>
<script src="src/QDL/xmlParser-jquery.js"></script>

<!-- Tailwind CSS -->
<link rel="stylesheet" href="public/index-jquery.css">
</head>
<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<div class="flex flex-col lg:flex-row">
<main class="p-12 md:p-16 lg:p-20 xl:p-24 w-screen max-w-none lg:max-w-prose lg:w-auto h-auto lg:h-screen lg:overflow-y-auto prose dark:prose-invert prose-green">
<section>
<img src="src/assets/comma.svg" alt="comma" width="128" height="128" class="dark-invert">
<h1>flash.comma.ai</h1>
<p>This tool allows you to flash AGNOS onto your comma device.</p>
<p>AGNOS is the Ubuntu-based operating system for your <a href="https://comma.ai/shop/comma-3x" target="_blank">comma 3/3X</a>.</p>
</section>
<hr>

<section>
<h2>Requirements</h2>
<ul>
<li>A web browser which supports WebUSB (such as Google Chrome, Microsoft Edge, Opera), running on Windows, macOS, Linux, or Android.</li>
<li>A USB-C cable to power your device outside the car.</li>
<li>Another USB-C cable to connect the device to your computer.</li>
</ul>
<h3>USB Driver</h3>
<p>You need additional driver software for Windows before you connect your device.</p>
<ol>
<li>Download and install <a href="https://zadig.akeo.ie/">Zadig</a>.</li>
<li>
Under <code>Device</code> in the menu bar, select <code>Create New Device</code>.
<img src="src/assets/zadig_create_new_device.png" alt="Zadig Create New Device" width="575" height="254">
</li>
<li>
Fill in three fields. The first field is just a description and you can fill in anything.
The next two fields are very important. Fill them in with <code>05C6</code> and <code>9008</code> respectively.
Press "Install Driver" and give it a few minutes to install.
<img src="src/assets/zadig_form.png" alt="Zadig Form" width="575" height="254">
</li>
</ol>
<p>No additional software is required for macOS or Linux.</p>
</section>
<hr>

<section>
<h2>QDL Mode</h2>
<p>Follow these steps to put your device into QDL mode:</p>
<ol>
<li>Power off the device and wait for the LEDs to switch off.</li>
<li>Connect the device to your computer using the USB-C port <strong>(port 2)</strong>.</li>
<li>Connect power to the OBD-C port <strong>(port 1)</strong>.</li>
<li>The device then should be visible as an option when choosing the device to flash</li>
</ol>
<img src="src/assets/fastboot-ports.svg" alt="image showing comma three and two ports" width="450" height="300">
</section>
<hr>

<section>
<h2>Flashing</h2>
<p>After your device is in QDL mode, you can click the button to start flashing. A prompt may appear to select a device; choose the device starts with <code>QUSB_BULK</code>.</p>
<p>The process can take 30+ minutes depending on your internet connection and system performance. Do not unplug the device until all steps are complete.</p>
</section>
<hr>

<section>
<h2>Troubleshooting</h2>
<h3>Too slow</h3>
<p>It is recommended that you use a USB 3.0 cable when flashing since it will speed up the flashing time by a lot.</p>

<h3>Cannot enter QDL</h3>
<p>Try using a different USB cable or USB port. Sometimes USB 2.0 ports work better than USB 3.0 (blue) ports. If you're using a USB hub, try connecting the device directly to your computer, or alternatively use a USB hub between your computer and the device.</p>

<h3>My device's screen is blank</h3>
<p>The device screen will be blank in QDL mode, but you can verify that it is in QDL if the device shows up when you press the Flash icon.</p>

<h3>After flashing, device says unable to mount data partition</h3>
<p>This is expected after the filesystem is erased. Press confirm to finish resetting your device.</p>

<h3>General Tips</h3>
<ul>
<li>Try another computer or OS</li>
<li>Try different USB ports on your computer</li>
<li>Try different USB-C cables, including the OBD-C cable that came with the device</li>
</ul>

<h3>Other questions</h3>
<p>If you need help, join our <a href="https://discord.comma.ai" target="_blank">Discord server</a> and go to the <strong>#hw-three-3x</strong> channel.</p>
</section>
</main>

<div class="lg:flex-1 h-[700px] lg:h-screen bg-gray-100 dark:bg-gray-800">
<div id="flash" class="relative flex flex-col gap-8 justify-center items-center h-full">
<div class="status-icon p-8 rounded-full cursor-pointer">
<img src="src/assets/cloud.svg" alt="status" width="128" height="128" class="dark:invert">
</div>
<div class="progress-container w-full max-w-3xl px-8 opacity-0 transition-opacity duration-300">
<div class="relative w-full h-2 bg-gray-200 rounded-full overflow-hidden">
<div class="progress-bar absolute top-0 bottom-0 left-0 w-full transition-all bg-gray-400"></div>
</div>
</div>
<span class="status-text text-3xl font-mono font-light">Initializing...</span>
<span class="status-description text-xl px-8 max-w-xl"></span>
<button class="retry-button hidden px-4 py-2 rounded-md bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 transition-colors">Retry</button>

<div class="device-state hidden absolute bottom-4 m-0 lg:m-4 p-4 w-full sm:w-auto sm:min-w-[350px] sm:border sm:border-gray-200 dark:sm:border-gray-600 bg-white dark:bg-gray-700 text-black dark:text-white rounded-md flex flex-row gap-2" style="left: 50%; transform: translate(-50%, 0);">
<div class="usb-indicator flex flex-row gap-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960" class="text-green-500 dark:text-[#51ff00]" height="24" width="24">
<path fill="currentColor" d="M480 976q-32 0-52-20t-20-52q0-22 11-40t31-29V724H302q-24 0-42-18t-18-42V555q-20-9-31-26.609-11-17.608-11-40.108Q200 456 220 436t52-20q32 0 52 20t20 52.411Q344 511 333 528.5T302 555v109h148V324h-80l110-149 110 149h-80v340h148V560h-42V416h144v144h-42v104q0 24-18 42t-42 18H510v111q19.95 10.652 30.975 29.826Q552 884 552 904q0 32-20 52t-52 20Z"/>
</svg>
Device connected
</div>
<span class="text-gray-400">|</span>
<div class="serial-indicator">
Serial: <span class="serial-number font-mono">unknown</span>
</div>
</div>
</div>
</div>
</div>

<!-- Application Script -->
<script src="src/main-jquery.js"></script>
</body>
</html>
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@
"build": "vite build",
"start": "vite preview",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives",
"test": "vitest"
"test": "vitest",
"build:jquery-css": "tailwindcss -i src/index-jquery.css -o public/index-jquery.css",
"watch:jquery-css": "tailwindcss -i src/index-jquery.css -o public/index-jquery.css --watch"
},
"engines": {
"node": ">=20.11.0"
Expand Down
Loading
Loading