Adapt the printer demo to work on the 2.8'' display

Part of #1015

examples/printerdemo_mcu/ui/common.slint

@@ -49,7 +49,7 @@ export global DemoPalette := {
 
     property <color> push-button-text-color: white;
 
-    property <length> base-font-size: 16px;
+    property <length> base-font-size: 12px;
 
     property <bool> night-mode: false;
 }
@@ -67,20 +67,24 @@ export Page := Rectangle {
         image-fit: contain;
         colorize: DemoPalette.control-secondary;
         y: h.y + (h.height - height) / 2;
+        x: 5px;
         width: 14px;
         height: 24px;
         TouchArea {
             clicked => { back() }
-            width: 150%;
+            width: 200%;
+            height: 200%;
+            x: (parent.width - width) / 2;
+            y: (parent.height - height) / 2;
         }
     }
 
     h := Text {
         font-weight: 900;
-        font-size: DemoPalette.base-font-size * 2;
+        font-size: DemoPalette.base-font-size * 1.75;
         color: DemoPalette.text-foreground-color;
-        y: 46px - font-size;
+        y: 23px - font-size;
-        x: has-back-button ? 24px + 16px : 0px;
+        x: has-back-button ? 30px + 16px : 0px;
         // Allow clicking on the title as well to get back easier when just
         // using fingers on a small screen.
         if (has-back-button) : TouchArea {
@@ -102,6 +106,10 @@ SquareButton := Rectangle {
     border-width: 2px;
     border-color: DemoPalette.control-outline-color;
     touch := TouchArea {
+        x: -4px;
+        y: -4px;
+        width: parent.width + 8px;
+        height: parent.height + 8px;
         clicked => {
             root.clicked();
         }
@@ -241,7 +249,7 @@ export CheckBox := Rectangle {
             clicked => { checked = !checked; }
         }
 
-        Text {
+        if text != "" : Text {
             text <=> root.text;
             vertical-alignment: center;
             horizontal-alignment: center;
@@ -270,12 +278,11 @@ export PushButton := Rectangle {
 
     background: pressed ? colors.pressed : (touch-area.has-hover ? colors.hovered : colors.base);
 
-    height: 27px; // line-height in the design
     horizontal-stretch: 1;
 
     HorizontalLayout {
-        padding-top: 0px;
+        padding-top: 5px;
-        padding-bottom: 0px;
+        padding-bottom: 5px;
         padding-left: parent.border-radius;
         padding-right: parent.border-radius;
 

examples/printerdemo_mcu/ui/copy_page.slint

@@ -10,9 +10,9 @@ export CopyPage := Page {
     header: "Copy";
 
     GridLayout {
-        padding-top: 46px /* header line height in design */
+        padding-top: 23px /* header line height in design */
-                     + /* extra top-padding in design */ 27px;
+                     + /* extra top-padding in design */ 13px;
-        spacing: 24px;
+        spacing: 5px;
         Row {
             Text {
                 text: "Choose Settings";
@@ -27,64 +27,33 @@ export CopyPage := Page {
                 value: 1;
                 minimum: 1;
             }
-
-            Rectangle {}
-
-            Label { text: "Size"; }
-            ComboBox {
-                value: "DIN A4";
-                choices: ["DIN A4", "DIN A3", "Letter"];
-            }
         }
-        Row {
+        /*Row {
-            Label { text: "Layout"; }
-            ComboBox {
-                value: "Portrait";
-                choices: ["Portrait", "Landscape"];
-            }
-
-            Rectangle {}
-
-            Label { text: "Paper Tray"; }
-            ComboBox {
-                value: "Special Tray";
-                choices: ["Special Tray", "Normal Tray"];
-            }
-        }
-        Row {
             Label { text: "Quality"; }
             ComboBox {
                 value: "Best";
                 choices: ["Best", "Medium", "Draft"];
             }
-
+        }*/
-            Rectangle {}
-
-            Label { text: "Paper Type"; }
-            ComboBox {
-                value: "Standard";
-                choices: ["Standard", "Non-standard"];
-            }
-        }
         Row {
             Label { text: "Color"; }
             ComboBox {
                 value: "Grayscale";
                 choices: ["Grayscale", "Color"];
             }
-
+        }
-            Rectangle {}
+        Row {
-
             Label { text: "Paper Handling"; }
             CheckBox {
                 checked: true;
                 text: "sort page";
             }
         }
+
         Row {
             HorizontalLayout {
-                col: 3;
+                col: 0;
-                colspan: 2;
+                colspan: 3;
 
                 Rectangle {
                     horizontal-stretch: 0;

examples/printerdemo_mcu/ui/home_page.slint

@@ -4,9 +4,7 @@
 import { DemoPalette, Page, PushButton } from "./common.slint";
 import { CopyPage } from "./copy_page.slint";
 import { ScanPage } from "./scan_page.slint";
-import { PrintPage } from "./print_page.slint";
 import { PrinterQueueView } from "./printer_queue.slint";
-import { UsbPage } from "./usb_page.slint";
 
 ActionButton := Rectangle {
 
@@ -18,20 +16,22 @@ ActionButton := Rectangle {
         spacing: 4px;
 
         Rectangle {
-            border-radius: 25px;
+            border-radius: 12px;
-            border-width: 5px;
+            border-width: 3px;
             border-color: DemoPalette.control-outline-color;
             background: DemoPalette.printer-action-background-color;
 
             img := Image {
                 x: (parent.width / 2) - (self.width / 2);
                 y: (parent.height / 2) - (self.height / 2);
+                width: self.source.width * 1px / 2;
+                height: self.source.height * 1px / 2;
                 colorize: DemoPalette.text-foreground-color;
             }
         }
 
         label := Text {
-            font-size: DemoPalette.base-font-size * 1.375;
+            font-size: DemoPalette.base-font-size * 1.2;
             font-weight: 800;
             horizontal-alignment: center;
             color: DemoPalette.text-foreground-color;
@@ -42,27 +42,26 @@ ActionButton := Rectangle {
 }
 
 export HomePage := Page {
-    property <length> header-row-height: 40px;
+    property <length> header-row-height: 40px / 2;
 
-    property <length> button-spacing: 28px;
+    property <length> button-spacing: 8px;
-    property <length> button-width: 127px;
+    property <length> button-width: 127px / 2;
-    property <length> button-height: button-width + 37px;
+    property <length> button-height: button-width + 20px;
 
-    header: "Xerol 1347 hdp";
+    header: "Printer";
 
     property <int> current-subpage: 0;
 
 
     for action[idx] in [
-        { name: "Print", icon: @image-url("images/print.svg") },
-        { name: "Scan", icon: @image-url("images/scan.svg") },
         { name: "Copy", icon: @image-url("images/copy.svg") },
-        { name: "USB", icon: @image-url("images/usb.svg") },
+        { name: "Scan", icon: @image-url("images/scan.svg") },
+
     ]: ActionButton {
-        x: mod(idx, 2) * (button-width + button-spacing);
+        x: mod(idx, 1) * (button-width + button-spacing) + button-spacing;
-        y: floor(idx / 2) * (button-height + button-spacing)
+        y: floor(idx / 1) * (button-height + button-spacing)
-           + /* header row height */ 46px
+           + header-row-height
-           + /* top-padding of printer queue */ 27px; // align with the first item of the printer queue
+           + /* top-padding of printer queue */ 18px; // align with the first item of the printer queue
         width: button-width;
         height: button-height;
         icon: action.icon;
@@ -71,32 +70,18 @@ export HomePage := Page {
     }
 
     queue-view := PrinterQueueView {
-        x: button-width*2 +button-spacing;
+
+        x: button-width + button-spacing * 2;
         width: parent.width - x;
-        show-job-details(idx) => {
-            current-subpage = 1; // Not nice to hard-code the index here...
-        }
     }
 
-    /* FIXME: these make us run out of memory/stack on the pico
+    ScanPage {
-    PrintPage {
-        x: current-subpage == 1 ? 0 : parent.width + parent.x + 2px;
-        animate x { duration: 125ms; easing: ease; }
-        back => { current-subpage = 0 }
-    }
-    */
-   /* ScanPage {
         x: current-subpage == 2 ? 0 : parent.width + parent.x + 2px;
         animate x { duration: 125ms; easing: ease; }
         back => { current-subpage = 0 }
     }
     CopyPage {
-        x: current-subpage == 3 ? 0 : parent.width + parent.x + 2px;
+        x: current-subpage == 1 ? 0 : parent.width + parent.x + 2px;
-        animate x { duration: 125ms; easing: ease; }
-        back => { current-subpage = 0 }
-    }*/
-    UsbPage {
-        x: current-subpage == 4 ? 0 : parent.width + parent.x + 2px;
         animate x { duration: 125ms; easing: ease; }
         back => { current-subpage = 0 }
     }

examples/printerdemo_mcu/ui/ink_page.slint

@@ -17,9 +17,9 @@ export InkPage := Page {
 
     Rectangle {
         x: (parent.width - width) / 2;
-        y: (parent.height - height) / 2;
+        y: (parent.height - height);
-        height: 75%;
+        height: 82%;
-        width: 50%;
+        width: 60%;
 
         HorizontalLayout {
             spacing: root.width * 5%;
@@ -43,7 +43,11 @@ export InkPage := Page {
                     ]
                     transitions [
                         out innactive : {
-                            animate height { duration: 750ms; easing: ease-in-out; }
+                            animate height {
+                                duration: 750ms;
+                                delay: 100ms;
+                                easing: ease-in-out;
+                            }
                         }
                         in innactive : {
                             animate height { duration: 200ms; easing: ease-in; }

examples/printerdemo_mcu/ui/print_page.slint

@@ -1,31 +0,0 @@
-// Copyright © SixtyFPS GmbH <info@slint-ui.com>
-// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
-
-import { DemoPalette, Page, SpinBox, Label, PushButton } from "./common.slint";
-import { WidePrinterQueueList } from "./printer_queue.slint";
-
-
-export PrintPage := Page {
-    has-back-button: true;
-    header: "Print";
-
-    GridLayout {
-        padding-top: 46px /* header line height in design */
-                     + /* extra top-padding in design */ 27px;
-        spacing: 24px;
-        Row {
-            Text {
-                text: "Printing-Queue";
-                color: DemoPalette.secondary-foreground-color;
-                font-size: DemoPalette.base-font-size * 1.125;
-                font-weight: 800;
-            }
-        }
-
-        Row {
-            queue := WidePrinterQueueList {
-                viewport-width: width;
-            }
-        }
-    }
-}

examples/printerdemo_mcu/ui/printer_queue.slint

@@ -19,9 +19,9 @@ export global PrinterQueue := {
     callback pause-job(int);
 
     property <[PrinterQueueItem]> printer-queue: [
-        { status: "PRINTING", progress: 63, title: "210106-FinalPresentation.pdf", owner: "simon.hausmann@slint-ui.com", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" },
+        { status: "PRINTING", progress: 63, title: "Slint-Demo.jpeg", owner: "info@slint-ui.com", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" },
-        { status: "WAITING...", title: "Adressliste.docx", owner: "simon.hausmann@slint-ui.com", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" },
+        { status: "WAITING...", title: "Adressliste.docx", owner: "info@slint-ui.com", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" },
-        { status: "WAITING...", title: "210106-FinalPresentation.pdf", owner: "simon.hausmann@slint-ui.com", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" },
+        { status: "WAITING...", title: "210106-FinalPresentation.pdf", owner: "info@slint-ui.com", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" },
     ];
 }
 
@@ -111,11 +111,11 @@ PrintDetails := GridLayout {
 
 NarrowPrintQueueElement := Rectangle {
     property <PrinterQueueItem> queue-item;
-    callback show-job-details();
+    callback cancel-job();
 
     border-color: DemoPalette.control-outline-color;
-    border-radius: 14px;
+    border-radius: 6px;
-    border-width: 2px;
+    border-width: 1px;
     background: DemoPalette.printer-queue-item-background-color;
     clip: true;
 
@@ -169,7 +169,7 @@ NarrowPrintQueueElement := Rectangle {
                     color: DemoPalette.status-label-text-color;
                     font-size: DemoPalette.base-font-size * 0.75;
                     font-weight: 800;
-                    letter-spacing: 1.56px;
+                    letter-spacing: 1.26px;
                 }
 
                 Text {
@@ -195,10 +195,9 @@ NarrowPrintQueueElement := Rectangle {
                 }
                 PushButton {
                     opacity: expanded-opacity;
-                    text: "More   ";
+                    text: "Delete";
-                    clicked => {
+                    icon: @image-url("images/delete.svg");
-                        root.show-job-details();
+                    clicked => { cancel-job(); }
-                    }
                 }
                 Rectangle {
                     horizontal-stretch: 0;
@@ -210,167 +209,30 @@ NarrowPrintQueueElement := Rectangle {
 }
 
 NarrowPrinterQueueList := Flickable {
-    callback show-job-details(int);
     VerticalLayout {
         alignment: start;
         padding: 0px;
-        spacing: 13.5px;
+        spacing: 6px;
 
         for queue-item[idx] in PrinterQueue.printer-queue: NarrowPrintQueueElement {
             width: root.width;
             queue-item: queue-item;
-            show-job-details => {
+            cancel-job => {
-                root.show-job-details(idx)
+                PrinterQueue.cancel-job(idx)
             }
         }
     }
 }
 
-ProgressBar := Rectangle {
-    property <int> progress;
-
-    // FIXME: The intermediate rectangle is needed to allow the surrounding
-    // layout to freely resize the progress bar without affecting the design-intended
-    // height of 6px. The alternative of specifying a `max-height: 6px` will unfortunately
-    // also affect the width calculation and make it vanish altogether.
-    Rectangle {
-        y: parent.height / 2 - 3px;
-        height: 6px;
-
-        border-radius: 3px;
-        background: DemoPalette.neutral-box;
-
-        Rectangle {
-            width: max(6px, progress * parent.width / 100);
-            border-radius: parent.border-radius;
-            background: DemoPalette.control-foreground;
-        }
-    }
-}
-
-WidePrintQueueElement := Rectangle {
-    callback cancel-job();
-    callback pause-job();
-
-    property <PrinterQueueItem> queue-item;
-
-    border-color: DemoPalette.neutral-box;
-    border-radius: 14px;
-    border-width: 2px;
-    background: DemoPalette.printer-queue-item-background-color;
-
-    GridLayout {
-        padding: parent.border-radius;
-        spacing: 3px;
-
-        HorizontalLayout {
-            width: 48%;
-            Text {
-                // TODO: text-transform: uppercase
-                text: {
-                    if (queue-item.status == "PRINTING") {
-                    "\{queue-item.progress}% - \{queue-item.status}"
-                    } else {
-                        queue-item.status
-                    }
-                }
-                color: DemoPalette.status-label-text-color;
-                font-size: DemoPalette.base-font-size * 0.75;
-                font-weight: 700;
-                letter-spacing: 1.56px;
-                horizontal-stretch: 1;
-            }
-            ProgressBar {
-                // Each progress bar should have the same size
-                // In principle it should be the smaller size which would fit next to the text foe each entry
-                // But since it is too hard to compute, just hardcode that for now
-                width: 50%; // 164px;
-                progress: queue-item.progress;
-            }
-        }
-
-        Text {
-            col: 0;
-            row: 1;
-            text: queue-item.title;
-            color: DemoPalette.text-foreground-color;
-            overflow: elide;
-            font-weight: 700;
-            font-size: DemoPalette.base-font-size * 1.125;
-            horizontal-stretch: 1;
-        }
-
-        HorizontalLayout {
-            col: 0;
-            row: 3;
-            spacing: 14px;
-            horizontal-stretch: 1;
-            vertical-stretch: 0;
-
-            PushButton {
-                text: "Pause";
-                icon: @image-url("images/pause.svg");
-                clicked => { pause-job(); }
-            }
-            PushButton {
-                primary: false;
-                text: "Delete";
-                icon: @image-url("images/delete.svg");
-                clicked => { cancel-job(); }
-            }
-        }
-
-        PrintDetails {
-            row: 0;
-            col: 2;
-            rowspan: 4;
-            width: 40%;
-            padding: 0px;
-            padding-bottom: root.border-radius / 2;
-            queue-item: root.queue-item;
-            horizontal-stretch: 1;
-        }
-    }
-}
-
-
-export WidePrinterQueueList := Flickable {
-
-    VerticalLayout {
-        alignment: start;
-        padding: 0px;
-        spacing: 13.5px;
-
-        for queue-item[idx] in PrinterQueue.printer-queue: WidePrintQueueElement {
-            queue-item: queue-item;
-            cancel-job => { PrinterQueue.cancel-job(idx) }
-            pause-job => { PrinterQueue.pause-job(idx) }
-        }
-    }
-}
-
 export PrinterQueueView := Rectangle {
-    callback show-job-details(int);
 
-    border-radius: 27px;
+    border-radius: 18px;
     background: DemoPalette.night-mode ? DemoPalette.printer-action-background-color : #F4F6FF;
 
     VerticalLayout {
-        padding: 16px;
+        padding: 6px;
-        spacing: 16px;
+        spacing: 6px;
 
-        Text {
+        queue-list := NarrowPrinterQueueList { }
-            text: "Printing-Queue";
-            color: DemoPalette.text-foreground-color;
-            font-size: DemoPalette.base-font-size * 1.5;
-            font-weight: 700;
-        }
-
-        queue-list := NarrowPrinterQueueList {
-            width: root.width - 2*parent.padding; // FIXME why do we need this? bug in layout?
-            show-job-details(idx) => {
-                root.show-job-details(idx)
-            }
-        }
     }
 }

examples/printerdemo_mcu/ui/printerdemo.slint

@@ -16,12 +16,6 @@ import "./fonts/NotoSans-Bold.ttf";
 SideBarIcon := Rectangle {
     property <bool> active;
     callback activate;
-
-    GridLayout {
-        padding: 0px;
-        @children
-    }
-
     TouchArea {
         clicked => { root.activate(); }
     }
@@ -30,8 +24,8 @@ SideBarIcon := Rectangle {
 MainWindow := Window {
     callback quit();
 
-    width: 772px;
+    width: 320px;
-    height: 504px;
+    height: 240px;
     title: "Slint printer demo";
     background: DemoPalette.main-background;
     default-font-family: "Noto Sans";
@@ -48,57 +42,57 @@ MainWindow := Window {
 
     property<int> active-page: 0;
 
-    HorizontalLayout {
+    main-view := Rectangle {
-        padding: 10px;
+        property <length> margin: 5px;
-        padding-left: 67px;
+        x: sidebar.x + sidebar.width;
+        y: margin;
+        height: parent.height - margin * 2;
+        width: parent.width - x - margin;
+        border-radius: 15px;
+        background: DemoPalette.page-background-color;
 
-        main-view := Rectangle {
+        Rectangle {
-            height: 100%;
+            clip: true;
-            border-radius: 30px;
+            x: main-view.border-radius / 2;
-            background: DemoPalette.page-background-color;
+            y: main-view.border-radius / 2;
+            width: main-view.width - main-view.border-radius;
+            height: main-view.height - main-view.border-radius;
 
-            Rectangle {
+            home-page := HomePage {
-                clip: true;
+                y: active-page == 0 ? 0 : active-page > 0 ? - height - 1px : parent.height + 1px;
-                x: main-view.border-radius / 2;
+                //animate y { duration: 125ms; easing: ease; }
-                y: main-view.border-radius / 2;
+            }
-                width: main-view.width - main-view.border-radius;
+            SettingsPage {
-                height: main-view.height - main-view.border-radius;
+                y: active-page == 1 ? 0 : active-page > 1 ? - height - 1px : parent.height + 1px;
-
+                //animate y { duration: 125ms; easing: ease; }
-                home-page := HomePage {
+            }
-                    y: active-page == 0 ? 0 : active-page < 0 ? - height - 1px : parent.height + 1px;
+            InkPage {
-                    animate y { duration: 125ms; easing: ease; }
+                y: active-page == 2 ? 0 : active-page > 2 ? - height - 1px : parent.height + 1px;
-                }
+                //animate y { duration: 125ms; easing: ease; }
-                SettingsPage {
+                ink-levels <=> root.ink-levels;
-                    y: active-page == 1 ? 0 : active-page < 1 ? - height - 1px : parent.height + 1px;
+                page-visible: active-page == 2;
-                    animate y { duration: 125ms; easing: ease; }
-                }
-                InkPage {
-                    y: active-page == 2 ? 0 : active-page < 2 ? - height - 1px : parent.height + 1px;
-                    animate y { duration: 125ms; easing: ease; }
-                    ink-levels <=> root.ink-levels;
-                    page-visible: active-page == 2;
-                }
             }
         }
     }
 
+
     sidebar := Rectangle {
-        width: 57px;
+        width: 48px;
-        x: 10px;
+        x: 5px;
 
         callback icon-y(int) -> length;
         icon-y(index) => {
-            return 100px // top padding
+            return 34px // top padding
-                + index * 72px;
+                + index * 50px;
         }
 
         Image {
             source: @image-url("images/page_selection.svg");
-            y: sidebar.icon-y(root.active-page) - self.width / 2;
+            y: sidebar.icon-y(root.active-page) - 25px;
             animate y {
                 duration: 125ms;
             }
-            width: main-view.x - sidebar.x + 1px;
+            width: parent.width + 1px;
             height: 1.77 * self.width;
             colorize: DemoPalette.page-background-color;
         }
@@ -109,8 +103,8 @@ MainWindow := Window {
             @image-url("images/ink.svg"),
         ] : SideBarIcon {
             y: sidebar.icon-y(idx);
-            x: 16px;
+            x: (parent.width - width) / 2;
-            height: 35px;
+            height: 30px;
             width: 30px;
 
             icon := Image {
@@ -125,23 +119,25 @@ MainWindow := Window {
             }
 
             activate => {
+                home-page.current-subpage = 0;
                 root.active-page = idx;
             }
         }
 
         Rectangle {
-            y: sidebar.icon-y(3) + 17px;
+            y: sidebar.icon-y(3) ;
-            x: 12px;
+            x: (parent.width - width) / 2;
             background: #6284FF;
             height: 2px;
             width: 37px;
         }
 
         SideBarIcon {
-            y: sidebar.icon-y(4);
+            //y: sidebar.icon-y(3) + 10px;
-            x: 16px;
+            y: parent.height - height - main-view.margin * 2;
-            height: 35px;
+            x: (parent.width - width) / 2;
-            width: 30px;
+            height: 27px;
+            width: 27px;
 
             Image {
                 colorize: DemoPalette.night-mode ? #F1FF98 : DemoPalette.inactive-page-icon-color;

examples/printerdemo_mcu/ui/scan_page.slint

@@ -9,9 +9,9 @@ export ScanPage := Page {
     header: "Scan";
 
     GridLayout {
-        padding-top: 46px /* header line height in design */
+        padding-top: 23px /* header line height in design */
-                     + /* extra top-padding in design */ 27px;
+                     + /* extra top-padding in design */ 13px;
-        spacing: 24px;
+        spacing: 5px;
         Row {
             Text {
                 text: "Choose Settings";
@@ -20,61 +20,44 @@ export ScanPage := Page {
                 font-weight: 800;
             }
         }
-        /*
+
-        FIXME: these make us run out of memory/stack on the pico
         Row {
             Label { text: "Copies"; }
             SpinBox {
                 value: 1;
                 minimum: 1;
             }
-
-            Rectangle {}
-
-            Label { text: "Size"; }
-            ComboBox {
-                value: "Original";
-                choices: ["Original", "A4"];
-            }
         }
-        Row {
+        /*Row {
             Label { text: "Quality"; }
             ComboBox {
                 value: "Best";
                 choices: ["Best", "Medium", "Draft"];
             }
-
             Rectangle {}
-
+        }*/
-            Label { text: "Format"; }
-            ComboBox {
-                value: "PDF";
-                choices: ["PDF", "JPEG", "PNG"];
-            }
-        }
         Row {
             Label { text: "Color"; }
             ComboBox {
                 value: "Grayscale";
                 choices: ["Grayscale", "RGB", "YCMB"];
             }
+        }
 
-            Rectangle {}
+        Row {
-
+         Label { text: "Format"; }
-            Label { text: "Save to"; }
             ComboBox {
-                value: "Desktop";
+                value: "PDF";
-                choices: ["Desktop"];
+                choices: ["PDF", "JPEG", "PNG"];
             }
         }
+
          Row {
-            Rectangle {
-                colspan: 3;
-            }
             HorizontalLayout {
-                col: 3;
+                col: 0;
                 colspan: 2;
 
+
                 Rectangle {
                     horizontal-stretch: 0;
                     width: 10%;
@@ -93,6 +76,6 @@ export ScanPage := Page {
             }
         }
         Row { Rectangle {} }
-        */
+
     }
 }

examples/printerdemo_mcu/ui/settings_page.slint

@@ -7,36 +7,26 @@ export SettingsPage := Page {
     header: "Settings";
 
     GridLayout {
-        padding-top: 46px /* header line height in design */
+        padding-top: 23px /* header line height in design */
-                     + /* extra top-padding in design */ 27px;
+                     + /* extra top-padding in design */ 13px;
-        spacing: 24px;
+        spacing: 5px;
-        Row {
-            Text {
-                text: "General";
-                color: DemoPalette.secondary-foreground-color;
-                font-size: DemoPalette.base-font-size * 1.125;
-                font-weight: 800;
-            }
-        }
-        Row {
-            Label { text: "TURBO mode"; }
-            CheckBox { checked: true; }
-
-            Rectangle {}
-
-            Label { text: "Power Management"; }
-            CheckBox {
-                checked: false;
-                text: "Eco Mode";
-            }
-        }
-
         Row {
             Text {
                 text: "Defaults";
                 color: DemoPalette.secondary-foreground-color;
                 font-size: DemoPalette.base-font-size * 1.125;
                 font-weight: 800;
+                colspan: 2;
+                horizontal-stretch: 2;
+            }
+            Rectangle {}
+            Text {
+                col: 2;
+                colspan: 2;
+                text: "General";
+                color: DemoPalette.secondary-foreground-color;
+                font-size: DemoPalette.base-font-size * 1.125;
+                font-weight: 800;
             }
         }
         Row {
@@ -44,47 +34,34 @@ export SettingsPage := Page {
             ComboBox {
                 value: "Portrait";
                 choices: ["Portrait", "Landscape"];
+                horizontal-stretch: 2;
             }
-
             Rectangle {}
-
+            Label { text: "EcoMode"; }
-            Label { text: "Paper Tray"; }
+            CheckBox { checked: false; }
-            ComboBox {
-                value: "Special Tray";
-                choices: ["Special Tray", "Normal Tray"];
-            }
         }
         Row {
             Label { text: "Quality"; }
             ComboBox {
                 value: "Best";
                 choices: ["Best", "Medium", "Draft"];
+                horizontal-stretch: 2;
             }
-
             Rectangle {}
-
+            Label { text: "TURBO "; }
-            Label { text: "Paper Type"; }
+            CheckBox { checked: true; }
-            ComboBox {
-                value: "Standard";
-                choices: ["Standard", "Non-standard"];
-            }
         }
         Row {
-            Label { text: "Color Mode"; }
+            Label { text: "Color"; }
             ComboBox {
                 value: "Grayscale";
                 choices: ["Grayscale", "RGB", "YCMB"];
-            }
+                horizontal-stretch: 2;
-
-            Rectangle {}
-
-            Label { text: "Paper Handling"; }
-            CheckBox {
-                checked: true;
-                text: "sort page";
             }
         }
-        Row { Rectangle {} }
+
+        Rectangle {}
+
     }
 
 }

examples/printerdemo_mcu/ui/usb_page.slint

@@ -1,107 +0,0 @@
-// Copyright © SixtyFPS GmbH <info@slint-ui.com>
-// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
-
-import { DemoPalette, Page, SpinBox, Label, ComboBox, PushButton, CheckBox } from "./common.slint";
-import { StandardListView } from "std-widgets.slint";
-import { PrinterQueue } from "./printer_queue.slint";
-
-struct File := { name: string, preview: image }
-
-export UsbPage := Page {
-    has-back-button: true;
-    header: "USB";
-
-    property <[File]> files: [
-        { name: ".." },
-        /*
-        { name: "cat.jpg", preview: @image-url("images/cat.jpg") },
-        { name: "dog.jpg", preview: @image-url("images/dog.jpg") },
-        { name: "elephant.jpg",preview: @image-url("images/elephant.jpg") },
-        { name: "snake.jpg", preview: @image-url("images/snake.jpg") },
-        */
-    ];
-
-    GridLayout {
-        padding-top: 46px /* header line height in design */
-                     + /* extra top-padding in design */ 27px;
-        spacing: 24px;
-
-        /*
-        FIXME: this makes us exceed flash space on the pico
-        Rectangle {
-            width: 50%;
-            rowspan: 5;
-            border-radius: 30px;
-            clip: true;
-            Image {
-                height: 100%;
-                width: 100%;
-                source: files[list-view.current-item].preview;
-                image-fit: cover;
-            }
-
-        }
-        */
-
-        Label {
-            col: 1;
-            row: 0;
-            text: "Select File:";
-            vertical-stretch: 0;
-            max-height: 32px;
-        }
-
-        list-view := StandardListView {
-            current-item: 1;
-            col: 1;
-            row: 1;
-            colspan: 2;
-            horizontal-stretch: 1;
-            vertical-stretch: 1;
-            // TODO: maybe we want something like `model: files.map(item => { text: item.preview })`
-            model: [
-                { text: ".." },
-                { text: "cat.jpg" },
-                { text: "dog.jpg" },
-                { text: "elephant.jpg" },
-                { text: "snake.jpg" },
-            ];
-        }
-
-        Row {
-            Label { col: 1; text: "Copies"; }
-            SpinBox {
-                value: 1;
-                minimum: 1;
-            }
-        }
-        Row {
-            Label { col: 1; text: "Color"; }
-            ComboBox {
-                value: "Grayscale";
-                choices: ["Grayscale", "Color"];
-            }
-        }
-        HorizontalLayout {
-            row: 4;
-            col: 1;
-            colspan: 2;
-
-            Rectangle {
-                horizontal-stretch: 0;
-                width: 10%;
-            }
-            PushButton {
-                icon: @image-url("images/print.svg");
-                text: "Start printing";
-                clicked => {
-                    PrinterQueue.start-job(files[list-view.current-item].name);
-                }
-            }
-            Rectangle {
-                horizontal-stretch: 0;
-                width: 10%;
-            }
-        }
-    }
-}