mirror of
https://github.com/usetrmnl/tailor.git
synced 2026-04-29 13:44:32 -07:00
Update the README and user Instructions
This commit is contained in:
Ronak Gothi
@@ -1,12 +1,17 @@
|
||||
### TRMNL FLASH LOGO
|
||||
### Tailor your TRMNL
|
||||
|
||||
This repository lets you upload custom brand information onto your TRMNL. Supported Brand attributes are
|
||||
1. Logo
|
||||
2. Loading Icon
|
||||
This repository contains the source code that lets you tailor your TRMNL. This works by creating a brand binary on your browser and updating the brand binary on the device directly without downloading / installing / modifying the [firmware](https://github.com/usetrmnl/trmnl-firmware) source code.
|
||||
|
||||
## Supported Changes
|
||||
You can make customizations to the following brand attributes
|
||||
1. API Base URL (coming soon)
|
||||
2. Logo
|
||||
3. Loading Icon
|
||||
|
||||
### How to get started?
|
||||
1. Clone this repository
|
||||
2. `git submodule init`
|
||||
3. `git submodule update`
|
||||
4. Install emscripten eg: `brew install emscripten`
|
||||
4. Compile the binary to wasm file `bash build.sh`
|
||||
5. Compile and create a wasm file `bash build.sh`
|
||||
6. open `index.html` on your browser.
|
||||
|
||||
+33
-24
@@ -74,7 +74,7 @@
|
||||
.card h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.upload-zone {
|
||||
@@ -215,8 +215,7 @@
|
||||
}
|
||||
|
||||
.instructions {
|
||||
margin-top: 32px;
|
||||
padding: 24px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
@@ -236,7 +235,7 @@
|
||||
}
|
||||
|
||||
.instructions li {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
footer {
|
||||
@@ -410,15 +409,15 @@
|
||||
|
||||
btn.textContent = 'Ready to Flash!';
|
||||
setTimeout(() => {
|
||||
btn.textContent = 'Generate Firmware';
|
||||
btn.disabled = false;
|
||||
btn.textContent = '';
|
||||
btn.disabled = true;
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
btn.textContent = 'Error - Try Again';
|
||||
setTimeout(() => {
|
||||
btn.textContent = 'Generate Firmware';
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Generate Binary';
|
||||
btn.disabled = true;
|
||||
}, 2000);
|
||||
}
|
||||
};
|
||||
@@ -430,13 +429,13 @@
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<div class="logo">
|
||||
<a class="logo" href="https://trmnl.com/">
|
||||
<svg viewBox="0 0 200 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<text x="0" y="45" font-family="Inter, system-ui, sans-serif" font-size="48" font-weight="700" fill="#000" letter-spacing="-0.02em">TRMNL</text>
|
||||
</svg>
|
||||
</div>
|
||||
<h1>Custom Logo Uploader</h1>
|
||||
<p class="subtitle">Upload custom logo and loader images for your TRMNL. Maximum 800×480 pixels.</p>
|
||||
</a>
|
||||
<h1>Tailor your TRMNL</h1>
|
||||
<p class="subtitle">Upload custom logo and loader images to your TRMNL. Maximum 800×480 pixels.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid">
|
||||
@@ -471,7 +470,7 @@
|
||||
</div>
|
||||
|
||||
<div class="card flash-card">
|
||||
<h2>Flash Firmware</h2>
|
||||
<h2>Upload Firmware</h2>
|
||||
|
||||
<div class="status">
|
||||
<div class="status-item">
|
||||
@@ -487,25 +486,35 @@
|
||||
<button class="btn" id="generate-btn" disabled>Generate Binary</button>
|
||||
|
||||
<div class="install-section">
|
||||
<esp-web-install-button>Connect and upload custom Logo</esp-web-install-button>
|
||||
<esp-web-install-button></esp-web-install-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="card flash-card">
|
||||
<h2>Instructions</h2>
|
||||
<div class="instructions">
|
||||
<h3>Instructions</h3>
|
||||
<ol>
|
||||
<li>Upload logo and loader images (max 800×480 pixels)</li>
|
||||
<li>Click "Generate Binary"</li>
|
||||
<li>Connect TRMNL via USB</li>
|
||||
<li>Click "Connect" and select device</li>
|
||||
<li>Upload the Logo Binary to TRMNL.</li>
|
||||
</ol>
|
||||
<li>Click 'Generate Binary'</li>
|
||||
<li>Plug in your device via USB</li>
|
||||
<li>Enter Flashing mode</li>
|
||||
<ol>1. Turn off the device by flipping the power switch to 'OFF'</ol>
|
||||
<ol>2. While pressing down on the circular button, flip the power switch to 'ON'</ol>
|
||||
<ol>3. Let go of the circular button</ol>
|
||||
<li>Upload Brand Binary to device</li>
|
||||
<ol>1. Click the 'Connect' button below</ol>
|
||||
<ol>2. Select 'USB JTAG/serial...' from the list</ol>
|
||||
<ol>3. Select 'Install' from the popup menu and confirm</ol>
|
||||
<ol>4. Wait for the device to write brand binary (this may take upto a minute)</ol>
|
||||
<ol>5. You should see a confirmation message within the popup menu</ol>
|
||||
<li>Step 5 - Restart your device </li>
|
||||
<ol>1. Turn the device off by flipping the power switch to 'OFF'</ol>
|
||||
<ol>2. Wait approximately 15 seconds</ol>
|
||||
<ol>3. Flip the power switch to 'ON'</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
TRMNL Custom Logo Uploader
|
||||
</footer>
|
||||
<footer>Tailor your TRMNL</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user