docs: add screenshot of generated KDL UI screen to README and codegen guide

Author: leftger

README.md

@@ -32,16 +32,22 @@ Heavily inspired by modern wearable and smartwatch UI frameworks—its animation
 Author your UI screen in declarative KDL (`ui/dashboard.kdl`):
 ```kdl
 screen id="Dashboard" width=320 height=240 theme="dark" {
-    grid cols="140px 1fr" rows="24px 1fr 40px" gap=6 padding=8 {
-        status_bar id="Header" col=0 row=0 col_span=2 time="10:42"
-        scale id="Tach" col=0 row=1 mode="radial" min=0.0 max=120.0 value=65.0
-        spinbox id="TargetTemp" col=1 row=1 min=150 max=350 value=225
-        button id="ApplyBtn" col=0 row=2 text="APPLY"
-        toggle id="EcoMode" col=1 row=2 label="ECO" checked=true
+    grid cols="140px 1fr" rows="24px 1fr 48px" gap=6 padding=8 {
+        banner col=0 row=0 col_span=2 text="Living Room Climate"
+        spinbox id="TempSetpoint" col=0 row=1 min=100 max=350 value=225 digits=4 decimals=1
+        scale id="RoomGauge" col=1 row=1 mode="radial" min=10.0 max=40.0 value=22.5
+        button id="FanBtn" col=0 row=2 text="FAN HIGH"
+        toggle id="EcoMode" col=1 row=2 checked=true
     }
 }
 ```
 
+<div align="center">
+  <img src="docs/screenshots/kdl_generated_screen.png" width="420" alt="Generated KDL Screen Render"><br/>
+  <sub><b>Zero-Allocation Result:</b> 2D Grid Layout, decimal spinbox, tachometer scale, button, and toggle compiled directly into pure <code>no_std</code> Rust.</sub>
+</div>
+<br/>
+
 Include and compile directly into zero-allocation `#![no_std]` Rust code:
 ```rust
 use embedded_gui::prelude::*;
@@ -54,9 +60,9 @@ fn main() {
     let app = DashboardApp::build(&mut gui).expect("failed to build UI");
 
     // Strongly-typed widget IDs generated automatically:
-    // app.widgets.tach
-    // app.widgets.target_temp
-    // app.widgets.apply_btn
+    // app.widgets.room_gauge
+    // app.widgets.temp_setpoint
+    // app.widgets.fan_btn
     // app.widgets.eco_mode
 }
 ```

crates/embedded-gui/Cargo.toml

@@ -143,3 +143,8 @@ required-features = ["std"]
 name = "cinematic_transitions_showcase"
 path = "examples/basics/cinematic_transitions_showcase.rs"
 required-features = ["std"]
+
+[[example]]
+name = "generate_readme_screenshots"
+path = "examples/integrations/generate_readme_screenshots.rs"
+required-features = ["std", "macros"]

crates/embedded-gui/examples/integrations/generate_readme_screenshots.rs

@@ -5,6 +5,8 @@ use embedded_graphics_core::{
 use embedded_graphics_simulator::{OutputSettingsBuilder, SimulatorDisplay};
 use embedded_gui::prelude::*;
 
+embedded_gui::include_gui!("examples/ui/smart_thermostat.kdl");
+
 const DASHBOARD_W: u32 = 192;
 const DASHBOARD_H: u32 = 120;
 const FONT_W: u32 = 240;
@@ -70,10 +72,23 @@ fn run() -> Result<(), Box<dyn std::error::Error>> {
             .save_png(path)?;
     }
 
-    println!("wrote dashboard/fonts/motion/flipcard PNGs to docs/screenshots");
+    let mut kdl_display = SimulatorDisplay::<Rgb565>::new(Size::new(320, 240));
+    draw_kdl_screen_showcase(&mut kdl_display);
+    let kdl_settings = OutputSettingsBuilder::new().scale(2).build();
+    kdl_display
+        .to_rgb_output_image(&kdl_settings)
+        .save_png("docs/screenshots/kdl_generated_screen.png")?;
+
+    println!("wrote dashboard/fonts/motion/flipcard/kdl PNGs to docs/screenshots");
     Ok(())
 }
 
+fn draw_kdl_screen_showcase(display: &mut SimulatorDisplay<Rgb565>) {
+    let mut gui = GuiContext::<32, 16, 16>::new(Rect::new(0, 0, 320, 240));
+    let _app = SmartThermostatApp::build(&mut gui).expect("build kdl app");
+    gui.render(display).expect("render");
+}
+
 fn draw_dashboard_showcase(display: &mut SimulatorDisplay<Rgb565>) {
     let mut gui = GuiContext::<32, 32, 24>::new(Rect::new(0, 0, DASHBOARD_W, DASHBOARD_H));
     gui.add_themed_panel(Rect::new(4, 4, 184, 112))

docs/kdl-gui-codegen-guide.md

@@ -49,7 +49,17 @@ screen id="ClimateControl" width=320 height=240 theme="dark" {
 }
 ```
 
-### 3. Include and Instantiate in Rust
+### 3. Generated Visual UI Output
+
+<div align="center">
+  <img src="../docs/screenshots/kdl_generated_screen.png" width="480" alt="Generated KDL Screen Render">
+  <br/>
+  <sub><b>Compiled KDL UI:</b> 2D Grid Layout, precision numeric spinbox, radial scale tachometer, action button, and stateful toggle.</sub>
+</div>
+
+<br/>
+
+### 4. Include and Instantiate in Rust
 ```rust
 use embedded_gui::prelude::*;