language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-10-02 14:51:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

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

Browse source 
Part of #1015
This commit is contained in:
Olivier Goffart 2022-03-17 14:13:22 +01:00 • committed by GitHub
parent fd2d82e0a3
commit 512b3decc7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 157 additions and 512 deletions
Download patch file Download diff file Expand all files Collapse all files

25
examples/printerdemo_mcu/ui/common.slint
View file

@ -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;
x: has-back-button ? 24px + 16px : 0px;
y: 23px - font-size;
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-bottom: 0px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: parent.border-radius;
padding-right: parent.border-radius;

51
examples/printerdemo_mcu/ui/copy_page.slint
View file

@ -10,9 +10,9 @@ export CopyPage := Page {
header: "Copy";
GridLayout {
padding-top: 46px /* header line height in design */
+ /* extra top-padding in design */ 27px;
spacing: 24px;
padding-top: 23px /* header line height in design */
+ /* extra top-padding in design */ 13px;
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 {
Label { text: "Layout"; }
ComboBox {
value: "Portrait";
choices: ["Portrait", "Landscape"];
}
Rectangle {}
Label { text: "Paper Tray"; }
ComboBox {
value: "Special Tray";
choices: ["Special Tray", "Normal Tray"];
}
}
Row {
/*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;
colspan: 2;
col: 0;
colspan: 3;
Rectangle {
horizontal-stretch: 0;

55
examples/printerdemo_mcu/ui/home_page.slint
View file

@ -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-width: 5px;
border-radius: 12px;
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-width: 127px;
property <length> button-height: button-width + 37px;
property <length> button-spacing: 8px;
property <length> button-width: 127px / 2;
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);
y: floor(idx / 2) * (button-height + button-spacing)
+ /* header row height */ 46px
+ /* top-padding of printer queue */ 27px; // align with the first item of the printer queue
x: mod(idx, 1) * (button-width + button-spacing) + button-spacing;
y: floor(idx / 1) * (button-height + button-spacing)
+ header-row-height
+ /* 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
PrintPage {
x: current-subpage == 1 ? 0 : parent.width + parent.x + 2px;
animate x { duration: 125ms; easing: ease; }
back => { current-subpage = 0 }
}
*/
/* ScanPage {
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;
animate x { duration: 125ms; easing: ease; }
back => { current-subpage = 0 }
}*/
UsbPage {
x: current-subpage == 4 ? 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 }
}

12
examples/printerdemo_mcu/ui/ink_page.slint
View file

@ -17,9 +17,9 @@ export InkPage := Page {
Rectangle {
x: (parent.width - width) / 2;
y: (parent.height - height) / 2;
height: 75%;
width: 50%;
y: (parent.height - height);
height: 82%;
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; }

31
examples/printerdemo_mcu/ui/print_page.slint
View file

@ -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;
}
}
}
}

172
examples/printerdemo_mcu/ui/printer_queue.slint
View file

@ -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: "WAITING...", title: "Adressliste.docx", owner: "simon.hausmann@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: "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: "info@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-width: 2px;
border-radius: 6px;
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 ";
clicked => {
root.show-job-details();
}
text: "Delete";
icon: @image-url("images/delete.svg");
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 => {
root.show-job-details(idx)
cancel-job => {
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;
spacing: 16px;
padding: 6px;
spacing: 6px;
Text {
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)
}
}
queue-list := NarrowPrinterQueueList { }
}
}

96
examples/printerdemo_mcu/ui/printerdemo.slint
View file

@ -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;
height: 504px;
width: 320px;
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 {
padding: 10px;
padding-left: 67px;
main-view := Rectangle {
property <length> margin: 5px;
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 {
height: 100%;
border-radius: 30px;
background: DemoPalette.page-background-color;
Rectangle {
clip: true;
x: main-view.border-radius / 2;
y: main-view.border-radius / 2;
width: main-view.width - main-view.border-radius;
height: main-view.height - main-view.border-radius;
Rectangle {
clip: true;
x: main-view.border-radius / 2;
y: main-view.border-radius / 2;
width: main-view.width - main-view.border-radius;
height: main-view.height - main-view.border-radius;
home-page := HomePage {
y: active-page == 0 ? 0 : active-page < 0 ? - height - 1px : parent.height + 1px;
animate y { duration: 125ms; easing: ease; }
}
SettingsPage {
y: active-page == 1 ? 0 : active-page < 1 ? - height - 1px : parent.height + 1px;
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;
}
home-page := HomePage {
y: active-page == 0 ? 0 : active-page > 0 ? - height - 1px : parent.height + 1px;
//animate y { duration: 125ms; easing: ease; }
}
SettingsPage {
y: active-page == 1 ? 0 : active-page > 1 ? - height - 1px : parent.height + 1px;
//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;
x: 10px;
width: 48px;
x: 5px;
callback icon-y(int) -> length;
icon-y(index) => {
return 100px // top padding
+ index * 72px;
return 34px // top padding
+ 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;
height: 35px;
x: (parent.width - width) / 2;
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;
x: 12px;
y: sidebar.icon-y(3) ;
x: (parent.width - width) / 2;
background: #6284FF;
height: 2px;
width: 37px;
}
SideBarIcon {
y: sidebar.icon-y(4);
x: 16px;
height: 35px;
width: 30px;
//y: sidebar.icon-y(3) + 10px;
y: parent.height - height - main-view.margin * 2;
x: (parent.width - width) / 2;
height: 27px;
width: 27px;
Image {
colorize: DemoPalette.night-mode ? #F1FF98 : DemoPalette.inactive-page-icon-color;

47
examples/printerdemo_mcu/ui/scan_page.slint
View file

@ -9,9 +9,9 @@ export ScanPage := Page {
header: "Scan";
GridLayout {
padding-top: 46px /* header line height in design */
+ /* extra top-padding in design */ 27px;
spacing: 24px;
padding-top: 23px /* header line height in design */
+ /* extra top-padding in design */ 13px;
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 {}
Label { text: "Save to"; }
Row {
Label { text: "Format"; }
ComboBox {
value: "Desktop";
choices: ["Desktop"];
value: "PDF";
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 {} }
*/
}
}

73
examples/printerdemo_mcu/ui/settings_page.slint
View file

@ -7,36 +7,26 @@ export SettingsPage := Page {
header: "Settings";
GridLayout {
padding-top: 46px /* header line height in design */
+ /* extra top-padding in design */ 27px;
spacing: 24px;
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";
}
}
padding-top: 23px /* header line height in design */
+ /* extra top-padding in design */ 13px;
spacing: 5px;
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: "Paper Tray"; }
ComboBox {
value: "Special Tray";
choices: ["Special Tray", "Normal Tray"];
}
Label { text: "EcoMode"; }
CheckBox { checked: false; }
}
Row {
Label { text: "Quality"; }
ComboBox {
value: "Best";
choices: ["Best", "Medium", "Draft"];
horizontal-stretch: 2;
}
Rectangle {}
Label { text: "Paper Type"; }
ComboBox {
value: "Standard";
choices: ["Standard", "Non-standard"];
}
Label { text: "TURBO "; }
CheckBox { checked: true; }
}
Row {
Label { text: "Color Mode"; }
Label { text: "Color"; }
ComboBox {
value: "Grayscale";
choices: ["Grayscale", "RGB", "YCMB"];
}
Rectangle {}
Label { text: "Paper Handling"; }
CheckBox {
checked: true;
text: "sort page";
horizontal-stretch: 2;
}
}
Row { Rectangle {} }
Rectangle {}
}
}

107
examples/printerdemo_mcu/ui/usb_page.slint
View file

@ -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%;
}
}
}
}