Skip to content

Commit 612d33c

Browse files
koosolikoosoli
committed
0.8.6
1 parent d928f59 commit 612d33c

File tree

11 files changed

+558
-37
lines changed

11 files changed

+558
-37
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,7 @@ For stable results, stick to **Native Mode** (standard widgets without LVGL pref
204204
- **Modern Canvas Interaction** - Zoom with the mouse wheel and pan with the middle mouse button
205205
- **Drag & Drop Workflow** - Drag widgets directly from the sidebar onto the canvas
206206
- **Modular Hardware Profiles** - Support for loading hardware profiles from external YAML packages ([Learn how to write your own](hardware_recipes_guide.md))
207+
- **[New] Experimental: Custom Hardware Profiles** - Create and save your own hardware definitions (Chip, LCD/E-Ink, Pins) directly in the UI. No coding required to support new displays!
207208
- **Experimental LVGL Support** - (Beta) Support for interactive LVGL widgets on capable devices
208209
- **Mobile Support** - Responsive UI designed to work on smaller screens and touch devices
209210

‎custom_components/reterminal_dashboard/frontend/editor.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -724,6 +724,27 @@ textarea:focus {
724724
box-shadow: 0 0 0 2px var(--accent-soft);
725725
}
726726

727+
.prop-input-sm {
728+
width: 100%;
729+
padding: 4px 8px;
730+
font-size: 11px;
731+
border-radius: 4px;
732+
border: 1px solid var(--border-subtle);
733+
background: var(--bg);
734+
color: var(--text);
735+
outline: none;
736+
}
737+
738+
.prop-input-sm:focus {
739+
border-color: var(--accent);
740+
}
741+
742+
.hardware-group {
743+
border-top: 1px solid var(--border-subtle);
744+
padding-top: 8px;
745+
margin-top: 8px;
746+
}
747+
727748
.snippet-area {
728749
flex: 1 1 auto;
729750
min-height: 180px;

‎custom_components/reterminal_dashboard/frontend/editor.html‎

Lines changed: 141 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<header class="main-header">
2222
<div class="main-header-title">
2323
<h2><span class="logo-dot"></span> ESPHome Designer</h2>
24-
<span>Visual YAML Editor <small style="opacity: 0.5; margin-left: 8px;">v0.8.5.1</small> <span
24+
<span>Visual YAML Editor <small style="opacity: 0.5; margin-left: 8px;">v0.8.6</small> <span
2525
id="currentLayoutDevice" style="margin-left:8px; color:var(--accent);"></span></span>
2626
</div>
2727
<div class="main-header-actions desktop-only">
@@ -747,9 +747,147 @@ <h2><span class="logo-dot"></span> ESPHome Designer</h2>
747747
<button id="importHardwareBtn" class="btn btn-secondary btn-xs"
748748
style="font-size: 10px; padding: 2px 6px;">Import Recipe</button>
749749
</div>
750-
<select id="deviceModel" class="prop-input"></select>
750+
<select id="deviceModel" class="prop-input">
751+
<option value="custom">Custom Profile...</option>
752+
</select>
751753
<input type="file" id="hardwareFileInput" accept=".yaml" style="display:none;" />
752754
</div>
755+
756+
<!-- Custom Hardware Section (Hidden by default) -->
757+
<div id="customHardwareSection"
758+
style="display:none; border:1px solid var(--accent); border-radius:8px; padding:12px; margin-top:12px; background: rgba(82, 199, 234, 0.03);">
759+
<div
760+
style="font-size:12px; font-weight:bold; color:var(--accent); margin-bottom:12px; display:flex; align-items:center; gap:8px;">
761+
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
762+
<path
763+
d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z">
764+
</path>
765+
</svg>
766+
Custom Hardware Configuration
767+
</div>
768+
769+
<div class="hardware-group">
770+
<div class="prop-label">General</div>
771+
<div style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
772+
<div class="field">
773+
<div class="prop-label" style="font-size:10px;">Chip Type</div>
774+
<select id="customChip" class="prop-input-sm">
775+
<option value="esp32-s3">ESP32-S3</option>
776+
<option value="esp32">ESP32</option>
777+
<option value="esp32-c3">ESP32-C3</option>
778+
<option value="esp32-c6">ESP32-C6</option>
779+
</select>
780+
</div>
781+
<div class="field">
782+
<div class="prop-label" style="font-size:10px;">Tech</div>
783+
<select id="customTech" class="prop-input-sm">
784+
<option value="lcd">LCD / OLED</option>
785+
<option value="epaper">E-Paper</option>
786+
</select>
787+
</div>
788+
</div>
789+
<div style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
790+
<div class="field">
791+
<div class="prop-label" style="font-size:10px;">Resolution</div>
792+
<input id="customRes" class="prop-input-sm" type="text" placeholder="800x480" value="800x480" />
793+
</div>
794+
<div class="field">
795+
<div class="prop-label" style="font-size:10px;">Shape</div>
796+
<select id="customShape" class="prop-input-sm">
797+
<option value="rect">Rectangle</option>
798+
<option value="round">Round</option>
799+
</select>
800+
</div>
801+
</div>
802+
<label style="display:flex; align-items:center; gap:6px; cursor:pointer; margin-top:4px;">
803+
<input id="customPsram" type="checkbox" checked />
804+
<span style="font-size:10px;">Enable PSRAM</span>
805+
</label>
806+
</div>
807+
808+
<div class="hardware-group" style="margin-top:12px;">
809+
<div class="prop-label">Display (SPI)</div>
810+
<div class="field">
811+
<div class="prop-label" style="font-size:10px;">Driver / Platform</div>
812+
<select id="customDisplayDriver" class="prop-input-sm">
813+
<option value="st7789v">ST7789 (LCD)</option>
814+
<option value="ili9341">ILI9341 (LCD)</option>
815+
<option value="waveshare_epaper">Waveshare E-Paper</option>
816+
<option value="epaper_spi">Generic SPI E-Paper</option>
817+
<option value="custom">Other (Custom YAML)</option>
818+
</select>
819+
</div>
820+
<div id="spiPinsGrid" style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:8px;">
821+
<div class="field">
822+
<div class="prop-label" style="font-size:9px;">CS</div>
823+
<input id="pin_cs" class="prop-input-sm" type="text" placeholder="GPIO10" value="GPIO10" />
824+
</div>
825+
<div class="field">
826+
<div class="prop-label" style="font-size:9px;">DC</div>
827+
<input id="pin_dc" class="prop-input-sm" type="text" placeholder="GPIO11" value="GPIO11" />
828+
</div>
829+
<div class="field">
830+
<div class="prop-label" style="font-size:9px;">RST</div>
831+
<input id="pin_rst" class="prop-input-sm" type="text" placeholder="GPIO12" value="GPIO12" />
832+
</div>
833+
<div class="field">
834+
<div class="prop-label" style="font-size:9px;">BUSY</div>
835+
<input id="pin_busy" class="prop-input-sm" type="text" placeholder="GPIO13" />
836+
</div>
837+
<div class="field">
838+
<div class="prop-label" style="font-size:9px;">CLK</div>
839+
<input id="pin_clk" class="prop-input-sm" type="text" placeholder="GPIO7" value="GPIO7" />
840+
</div>
841+
<div class="field">
842+
<div class="prop-label" style="font-size:9px;">MOSI</div>
843+
<input id="pin_mosi" class="prop-input-sm" type="text" placeholder="GPIO9" value="GPIO9" />
844+
</div>
845+
</div>
846+
</div>
847+
848+
<div class="hardware-group" style="margin-top:12px;">
849+
<div class="prop-label">Backlight & Touch</div>
850+
<div style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
851+
<div class="field">
852+
<div class="prop-label" style="font-size:10px;">Backlight Pin</div>
853+
<input id="pin_backlight" class="prop-input-sm" type="text" placeholder="GPIO45" />
854+
</div>
855+
<div class="field">
856+
<div class="prop-label" style="font-size:10px;">Touch Tech</div>
857+
<select id="customTouchTech" class="prop-input-sm">
858+
<option value="none">None</option>
859+
<option value="gt911">GT911 (I2C)</option>
860+
<option value="ft6x36">FT6x36 (I2C)</option>
861+
<option value="cst816">CST816 (I2C)</option>
862+
</select>
863+
</div>
864+
</div>
865+
<div id="touchPinsGrid"
866+
style="display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; display:none;">
867+
<div class="field">
868+
<div class="prop-label" style="font-size:9px;">SDA</div>
869+
<input id="pin_sda" class="prop-input-sm" type="text" placeholder="GPIO17" />
870+
</div>
871+
<div class="field">
872+
<div class="prop-label" style="font-size:9px;">SCL</div>
873+
<input id="pin_scl" class="prop-input-sm" type="text" placeholder="GPIO18" />
874+
</div>
875+
<div class="field">
876+
<div class="prop-label" style="font-size:9px;">INT</div>
877+
<input id="pin_touch_int" class="prop-input-sm" type="text" placeholder="GPIO16" />
878+
</div>
879+
<div class="field">
880+
<div class="prop-label" style="font-size:9px;">RST</div>
881+
<input id="pin_touch_rst" class="prop-input-sm" type="text" placeholder="GPIO15" />
882+
</div>
883+
</div>
884+
</div>
885+
886+
<button id="saveCustomProfileBtn" class="btn btn-secondary btn-full"
887+
style="margin-top:16px; background:var(--accent); color:white; border:none;">
888+
🚀 Create & Save Profile
889+
</button>
890+
</div>
753891
<div class="field">
754892
<div class="prop-label">Screen Orientation</div>
755893
<select id="deviceOrientation" class="prop-input">
@@ -1286,6 +1424,7 @@ <h2><span class="logo-dot"></span> ESPHome Designer</h2>
12861424
<script src="js/io/ai_service.js"></script>
12871425
<script src="js/io/devices.js"></script>
12881426
<script src="js/io/hardware_generators.js"></script>
1427+
<script src="js/io/hardware_generator.js"></script>
12891428
<script src="js/io/yaml_export.js"></script>
12901429
<script src="js/io/yaml_export_lvgl.js"></script>
12911430
<script src="js/ui/device_settings.js"></script>

0 commit comments

Comments
 (0)