From c2d82833a0d56660b66bb06a9fb6360f425416af Mon Sep 17 00:00:00 2001 From: Clark Moody Date: Thu, 1 Feb 2024 16:23:41 -0600 Subject: [PATCH 1/5] Styling for QR Code using theme framework --- style/src/lib.rs | 1 + style/src/qr_code.rs | 20 +++++++++++++++++ style/src/theme.rs | 41 ++++++++++++++++++++++++++++++++++ widget/src/qr_code.rs | 52 ++++++++++++++++++++++++++----------------- 4 files changed, 94 insertions(+), 20 deletions(-) create mode 100644 style/src/qr_code.rs diff --git a/style/src/lib.rs b/style/src/lib.rs index e4097434c1..3c2865ebeb 100644 --- a/style/src/lib.rs +++ b/style/src/lib.rs @@ -24,6 +24,7 @@ pub mod menu; pub mod pane_grid; pub mod pick_list; pub mod progress_bar; +pub mod qr_code; pub mod radio; pub mod rule; pub mod scrollable; diff --git a/style/src/qr_code.rs b/style/src/qr_code.rs new file mode 100644 index 0000000000..a024506ca7 --- /dev/null +++ b/style/src/qr_code.rs @@ -0,0 +1,20 @@ +//! Change the appearance of a QR code. +use crate::core::Color; + +/// The appearance of a QR code. +#[derive(Debug, Clone, Copy)] +pub struct Appearance { + /// The color of the QR code data cells + pub cell: Color, + /// The color of the QR code background + pub background: Color, +} + +/// A set of rules that dictate the style of a QR code. +pub trait StyleSheet { + /// The supported style of the [`StyleSheet`]. + type Style: Default; + + /// Produces the style of a QR code. + fn appearance(&self, style: &Self::Style) -> Appearance; +} diff --git a/style/src/theme.rs b/style/src/theme.rs index e579a1c20d..afb4d02768 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -12,6 +12,7 @@ use crate::menu; use crate::pane_grid; use crate::pick_list; use crate::progress_bar; +use crate::qr_code; use crate::radio; use crate::rule; use crate::scrollable; @@ -956,6 +957,46 @@ impl progress_bar::Appearance> progress_bar::StyleSheet for T { } } +/// The style of a QR Code. +#[derive(Default)] +pub enum QRCode { + /// The default style. + #[default] + Default, + /// A custom style. + Custom(Box>), +} + +impl qr_code::Appearance + 'static> From for QRCode { + fn from(f: T) -> Self { + Self::Custom(Box::new(f)) + } +} + +impl qr_code::StyleSheet for Theme { + type Style = QRCode; + + fn appearance(&self, style: &Self::Style) -> qr_code::Appearance { + let palette = self.palette(); + + match style { + QRCode::Default => qr_code::Appearance { + cell: palette.text, + background: palette.background, + }, + QRCode::Custom(custom) => custom.appearance(self), + } + } +} + +impl qr_code::Appearance> qr_code::StyleSheet for T { + type Style = Theme; + + fn appearance(&self, style: &Self::Style) -> qr_code::Appearance { + (self)(style) + } +} + /// The style of a rule. #[derive(Default)] pub enum Rule { diff --git a/widget/src/qr_code.rs b/widget/src/qr_code.rs index 6a748e6396..b6c60bf6a1 100644 --- a/widget/src/qr_code.rs +++ b/widget/src/qr_code.rs @@ -5,51 +5,59 @@ use crate::core::mouse; use crate::core::renderer::{self, Renderer as _}; use crate::core::widget::Tree; use crate::core::{ - Color, Element, Layout, Length, Point, Rectangle, Size, Vector, Widget, + Element, Layout, Length, Point, Rectangle, Size, Vector, Widget, }; use crate::graphics::geometry::Renderer as _; use crate::Renderer; use thiserror::Error; +pub use crate::style::qr_code::StyleSheet; + const DEFAULT_CELL_SIZE: u16 = 4; const QUIET_ZONE: usize = 2; /// A type of matrix barcode consisting of squares arranged in a grid which /// can be read by an imaging device, such as a camera. #[derive(Debug)] -pub struct QRCode<'a> { +pub struct QRCode<'a, Theme = crate::Theme> +where + Theme: StyleSheet, +{ state: &'a State, - dark: Color, - light: Color, cell_size: u16, + style: Theme::Style, } -impl<'a> QRCode<'a> { +impl<'a, Theme> QRCode<'a, Theme> +where + Theme: StyleSheet, +{ /// Creates a new [`QRCode`] with the provided [`State`]. pub fn new(state: &'a State) -> Self { Self { cell_size: DEFAULT_CELL_SIZE, - dark: Color::BLACK, - light: Color::WHITE, state, + style: Default::default(), } } - /// Sets both the dark and light [`Color`]s of the [`QRCode`]. - pub fn color(mut self, dark: Color, light: Color) -> Self { - self.dark = dark; - self.light = light; - self - } - /// Sets the size of the squares of the grid cell of the [`QRCode`]. pub fn cell_size(mut self, cell_size: u16) -> Self { self.cell_size = cell_size; self } + + /// Sets the style of the [`QRCode`]. + pub fn style(mut self, style: impl Into) -> Self { + self.style = style.into(); + self + } } -impl<'a, Message, Theme> Widget for QRCode<'a> { +impl<'a, Message, Theme> Widget for QRCode<'a, Theme> +where + Theme: StyleSheet, +{ fn size(&self) -> Size { Size { width: Length::Shrink, @@ -73,7 +81,7 @@ impl<'a, Message, Theme> Widget for QRCode<'a> { &self, _state: &Tree, renderer: &mut Renderer, - _theme: &Theme, + theme: &Theme, _style: &renderer::Style, layout: Layout<'_>, _cursor: mouse::Cursor, @@ -82,6 +90,8 @@ impl<'a, Message, Theme> Widget for QRCode<'a> { let bounds = layout.bounds(); let side_length = self.state.width + 2 * QUIET_ZONE; + let style = theme.appearance(&self.style); + // Reuse cache if possible let geometry = self.state.cache.draw(renderer, bounds.size(), |frame| { @@ -92,7 +102,7 @@ impl<'a, Message, Theme> Widget for QRCode<'a> { frame.fill_rectangle( Point::ORIGIN, Size::new(side_length as f32, side_length as f32), - self.light, + style.background, ); // Avoid drawing on the quiet zone @@ -114,7 +124,7 @@ impl<'a, Message, Theme> Widget for QRCode<'a> { frame.fill_rectangle( Point::new(column as f32, row as f32), Size::UNIT, - self.dark, + style.cell, ); }); }); @@ -128,10 +138,12 @@ impl<'a, Message, Theme> Widget for QRCode<'a> { } } -impl<'a, Message, Theme> From> +impl<'a, Message, Theme> From> for Element<'a, Message, Theme, Renderer> +where + Theme: StyleSheet + 'a, { - fn from(qr_code: QRCode<'a>) -> Self { + fn from(qr_code: QRCode<'a, Theme>) -> Self { Self::new(qr_code) } } From 4c6ea3cfe2f6023a2f92d8ebfc227f0381c8ac78 Mon Sep 17 00:00:00 2001 From: Clark Moody Date: Fri, 2 Feb 2024 10:45:37 -0600 Subject: [PATCH 2/5] Update `qr_code` example with theme selector --- examples/qr_code/src/main.rs | 34 ++++++++++++++++++++++++++++------ 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/examples/qr_code/src/main.rs b/examples/qr_code/src/main.rs index 867ebfa415..68bbf2605b 100644 --- a/examples/qr_code/src/main.rs +++ b/examples/qr_code/src/main.rs @@ -1,6 +1,6 @@ use iced::widget::qr_code::{self, QRCode}; -use iced::widget::{column, container, text, text_input}; -use iced::{Alignment, Color, Element, Length, Sandbox, Settings}; +use iced::widget::{column, container, pick_list, row, text, text_input}; +use iced::{Alignment, Element, Length, Sandbox, Settings, Theme}; pub fn main() -> iced::Result { QRGenerator::run(Settings::default()) @@ -10,11 +10,13 @@ pub fn main() -> iced::Result { struct QRGenerator { data: String, qr_code: Option, + theme: Theme, } #[derive(Debug, Clone)] enum Message { DataChanged(String), + ThemeChanged(Theme), } impl Sandbox for QRGenerator { @@ -41,13 +43,18 @@ impl Sandbox for QRGenerator { self.data = data; } + Message::ThemeChanged(theme) => { + self.theme = theme; + + if self.qr_code.is_some() { + self.qr_code = qr_code::State::new(&self.data).ok(); + } + } } } fn view(&self) -> Element { - let title = text("QR Code Generator") - .size(70) - .style(Color::from([0.5, 0.5, 0.5])); + let title = text("QR Code Generator").size(70); let input = text_input("Type the data of your QR code here...", &self.data) @@ -55,7 +62,18 @@ impl Sandbox for QRGenerator { .size(30) .padding(15); - let mut content = column![title, input] + let choose_theme = row![ + text("Theme:"), + pick_list( + Theme::ALL, + Some(self.theme.clone()), + Message::ThemeChanged, + ) + ] + .spacing(10) + .align_items(Alignment::Center); + + let mut content = column![title, input, choose_theme] .width(700) .spacing(20) .align_items(Alignment::Center); @@ -72,4 +90,8 @@ impl Sandbox for QRGenerator { .center_y() .into() } + + fn theme(&self) -> Theme { + self.theme.clone() + } } From b535f7ae385658829f57f742eb1cc6f2f40cddf5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ram=C3=B3n=20Jim=C3=A9nez?= Date: Fri, 9 Feb 2024 23:57:11 +0100 Subject: [PATCH 3/5] Invalidate `QRCode` cache on `Appearance` change --- examples/qr_code/src/main.rs | 8 +-- style/src/qr_code.rs | 2 +- widget/src/qr_code.rs | 118 ++++++++++++++++++++--------------- 3 files changed, 72 insertions(+), 56 deletions(-) diff --git a/examples/qr_code/src/main.rs b/examples/qr_code/src/main.rs index 68bbf2605b..8b2e950020 100644 --- a/examples/qr_code/src/main.rs +++ b/examples/qr_code/src/main.rs @@ -9,7 +9,7 @@ pub fn main() -> iced::Result { #[derive(Default)] struct QRGenerator { data: String, - qr_code: Option, + qr_code: Option, theme: Theme, } @@ -38,17 +38,13 @@ impl Sandbox for QRGenerator { self.qr_code = if data.is_empty() { None } else { - qr_code::State::new(&data).ok() + qr_code::Data::new(&data).ok() }; self.data = data; } Message::ThemeChanged(theme) => { self.theme = theme; - - if self.qr_code.is_some() { - self.qr_code = qr_code::State::new(&self.data).ok(); - } } } } diff --git a/style/src/qr_code.rs b/style/src/qr_code.rs index a024506ca7..02c4709a5f 100644 --- a/style/src/qr_code.rs +++ b/style/src/qr_code.rs @@ -2,7 +2,7 @@ use crate::core::Color; /// The appearance of a QR code. -#[derive(Debug, Clone, Copy)] +#[derive(Debug, Clone, Copy, PartialEq)] pub struct Appearance { /// The color of the QR code data cells pub cell: Color, diff --git a/widget/src/qr_code.rs b/widget/src/qr_code.rs index b6c60bf6a1..ece9b9e104 100644 --- a/widget/src/qr_code.rs +++ b/widget/src/qr_code.rs @@ -3,15 +3,17 @@ use crate::canvas; use crate::core::layout; use crate::core::mouse; use crate::core::renderer::{self, Renderer as _}; -use crate::core::widget::Tree; +use crate::core::widget::tree::{self, Tree}; use crate::core::{ Element, Layout, Length, Point, Rectangle, Size, Vector, Widget, }; use crate::graphics::geometry::Renderer as _; use crate::Renderer; + +use std::cell::RefCell; use thiserror::Error; -pub use crate::style::qr_code::StyleSheet; +pub use crate::style::qr_code::{Appearance, StyleSheet}; const DEFAULT_CELL_SIZE: u16 = 4; const QUIET_ZONE: usize = 2; @@ -23,7 +25,7 @@ pub struct QRCode<'a, Theme = crate::Theme> where Theme: StyleSheet, { - state: &'a State, + data: &'a Data, cell_size: u16, style: Theme::Style, } @@ -32,11 +34,11 @@ impl<'a, Theme> QRCode<'a, Theme> where Theme: StyleSheet, { - /// Creates a new [`QRCode`] with the provided [`State`]. - pub fn new(state: &'a State) -> Self { + /// Creates a new [`QRCode`] with the provided [`Data`]. + pub fn new(data: &'a Data) -> Self { Self { + data, cell_size: DEFAULT_CELL_SIZE, - state, style: Default::default(), } } @@ -58,6 +60,14 @@ impl<'a, Message, Theme> Widget for QRCode<'a, Theme> where Theme: StyleSheet, { + fn tag(&self) -> tree::Tag { + tree::Tag::of::() + } + + fn state(&self) -> tree::State { + tree::State::new(State::default()) + } + fn size(&self) -> Size { Size { width: Length::Shrink, @@ -71,7 +81,7 @@ where _renderer: &Renderer, _limits: &layout::Limits, ) -> layout::Node { - let side_length = (self.state.width + 2 * QUIET_ZONE) as f32 + let side_length = (self.data.width + 2 * QUIET_ZONE) as f32 * f32::from(self.cell_size); layout::Node::new(Size::new(side_length, side_length)) @@ -79,7 +89,7 @@ where fn draw( &self, - _state: &Tree, + tree: &Tree, renderer: &mut Renderer, theme: &Theme, _style: &renderer::Style, @@ -87,47 +97,52 @@ where _cursor: mouse::Cursor, _viewport: &Rectangle, ) { + let state = tree.state.downcast_ref::(); + let bounds = layout.bounds(); - let side_length = self.state.width + 2 * QUIET_ZONE; + let side_length = self.data.width + 2 * QUIET_ZONE; + + let appearance = theme.appearance(&self.style); + let mut last_appearance = state.last_appearance.borrow_mut(); + + if Some(appearance) != *last_appearance { + self.data.cache.clear(); - let style = theme.appearance(&self.style); + *last_appearance = Some(appearance); + } // Reuse cache if possible - let geometry = - self.state.cache.draw(renderer, bounds.size(), |frame| { - // Scale units to cell size - frame.scale(self.cell_size); - - // Draw background - frame.fill_rectangle( - Point::ORIGIN, - Size::new(side_length as f32, side_length as f32), - style.background, - ); - - // Avoid drawing on the quiet zone - frame.translate(Vector::new( - QUIET_ZONE as f32, - QUIET_ZONE as f32, - )); - - // Draw contents - self.state - .contents - .iter() - .enumerate() - .filter(|(_, value)| **value == qrcode::Color::Dark) - .for_each(|(index, _)| { - let row = index / self.state.width; - let column = index % self.state.width; - - frame.fill_rectangle( - Point::new(column as f32, row as f32), - Size::UNIT, - style.cell, - ); - }); - }); + let geometry = self.data.cache.draw(renderer, bounds.size(), |frame| { + // Scale units to cell size + frame.scale(self.cell_size); + + // Draw background + frame.fill_rectangle( + Point::ORIGIN, + Size::new(side_length as f32, side_length as f32), + appearance.background, + ); + + // Avoid drawing on the quiet zone + frame.translate(Vector::new(QUIET_ZONE as f32, QUIET_ZONE as f32)); + + // Draw contents + self.data + .contents + .iter() + .enumerate() + .filter(|(_, value)| **value == qrcode::Color::Dark) + .for_each(|(index, _)| { + let row = index / self.data.width; + let column = index % self.data.width; + + frame.fill_rectangle( + Point::new(column as f32, row as f32), + Size::UNIT, + appearance.cell, + ); + }); + }); renderer.with_translation( bounds.position() - Point::ORIGIN, @@ -148,17 +163,17 @@ where } } -/// The state of a [`QRCode`]. +/// The data of a [`QRCode`]. /// -/// It stores the data that will be displayed. +/// It stores the contents that will be displayed. #[derive(Debug)] -pub struct State { +pub struct Data { contents: Vec, width: usize, cache: canvas::Cache, } -impl State { +impl Data { /// Creates a new [`State`] with the provided data. /// /// This method uses an [`ErrorCorrection::Medium`] and chooses the smallest @@ -310,3 +325,8 @@ impl From for Error { } } } + +#[derive(Default)] +struct State { + last_appearance: RefCell>, +} From 8b14f88f5ffa2125908fa53a4fa955ac7818e12e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ram=C3=B3n=20Jim=C3=A9nez?= Date: Fri, 9 Feb 2024 23:59:43 +0100 Subject: [PATCH 4/5] Update `CHANGELOG` --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8660cc5a01..8f0f96a39a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - `hovered` styling for `Svg` widget. [#2163](https://github.com/iced-rs/iced/pull/2163) - `height` method for `TextEditor`. [#2221](https://github.com/iced-rs/iced/pull/2221) - Customizable style for `TextEditor`. [#2159](https://github.com/iced-rs/iced/pull/2159) +- Customizable style for `QRCode`. [#2229](https://github.com/iced-rs/iced/pull/2229) - Border width styling for `Toggler`. [#2219](https://github.com/iced-rs/iced/pull/2219) - `RawText` variant for `Primitive` in `iced_graphics`. [#2158](https://github.com/iced-rs/iced/pull/2158) - `Stream` support for `Command`. [#2150](https://github.com/iced-rs/iced/pull/2150) @@ -116,6 +117,7 @@ Many thanks to... - @Calastrophe - @casperstorm - @cfrenette +- @clarkmoody - @Davidster - @Decodetalkers - @derezzedex From 564ad95806efd1259a2244a685b648346b460abf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ram=C3=B3n=20Jim=C3=A9nez?= Date: Sat, 10 Feb 2024 00:02:17 +0100 Subject: [PATCH 5/5] Fix leftover mentions of `State` in `QRCode` docs --- widget/src/qr_code.rs | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/widget/src/qr_code.rs b/widget/src/qr_code.rs index ece9b9e104..eeb1526f9c 100644 --- a/widget/src/qr_code.rs +++ b/widget/src/qr_code.rs @@ -174,7 +174,7 @@ pub struct Data { } impl Data { - /// Creates a new [`State`] with the provided data. + /// Creates a new [`Data`] with the provided data. /// /// This method uses an [`ErrorCorrection::Medium`] and chooses the smallest /// size to display the data. @@ -184,7 +184,7 @@ impl Data { Ok(Self::build(encoded)) } - /// Creates a new [`State`] with the provided [`ErrorCorrection`]. + /// Creates a new [`Data`] with the provided [`ErrorCorrection`]. pub fn with_error_correction( data: impl AsRef<[u8]>, error_correction: ErrorCorrection, @@ -197,7 +197,7 @@ impl Data { Ok(Self::build(encoded)) } - /// Creates a new [`State`] with the provided [`Version`] and + /// Creates a new [`Data`] with the provided [`Version`] and /// [`ErrorCorrection`]. pub fn with_version( data: impl AsRef<[u8]>, @@ -276,7 +276,7 @@ impl From for qrcode::EcLevel { } } -/// An error that occurred when building a [`State`] for a [`QRCode`]. +/// An error that occurred when building a [`Data`] for a [`QRCode`]. #[derive(Debug, Clone, Copy, PartialEq, Eq, Error)] pub enum Error { /// The data is too long to encode in a QR code for the chosen [`Version`].