Implementing Custom widgets

Cargo.toml

@@ -32,7 +32,7 @@ gui = ["iced", "tokio", "serde"]
 rppal = { version = "0.17.1", optional = true }
 
 # for GUI
-iced = { version = "0.12.1", features = ["tokio", "debug"], optional = true }
+iced = { version = "0.12.1", features = ["tokio", "debug", "canvas", "advanced"], optional = true }
 iced_aw = { version = "0.9.3", default-features = false, features = ["tabs", "card", "modal",] , optional = true }
 iced_native = { version = "0.10.3", optional = true }
 tokio = { version = "1", features = ["sync"], optional = true }

src/custom_widgets/circle/mod.rs

@@ -0,0 +1,72 @@
+use iced::advanced::layout::{self, Layout};
+use iced::advanced::renderer;
+use iced::advanced::widget::{self, Widget};
+use iced::mouse;
+use iced::{Color, Element, Length, Rectangle, Size};
+
+pub struct Circle {
+    radius: f32,
+}
+
+impl Circle {
+    pub fn new(radius: f32) -> Self {
+        Self { radius }
+    }
+}
+
+pub fn circle(radius: f32) -> Circle {
+    Circle::new(radius)
+}
+
+impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer> for Circle
+where
+    Renderer: renderer::Renderer,
+{
+    fn size(&self) -> Size<Length> {
+        Size {
+            width: Length::Shrink,
+            height: Length::Shrink,
+        }
+    }
+
+    fn layout(
+        &self,
+        _tree: &mut widget::Tree,
+        _renderer: &Renderer,
+        _limits: &layout::Limits,
+    ) -> layout::Node {
+        layout::Node::new(Size::new(self.radius * 2.0, self.radius * 2.0))
+    }
+
+    fn draw(
+        &self,
+        _state: &widget::Tree,
+        renderer: &mut Renderer,
+        _theme: &Theme,
+        _style: &renderer::Style,
+        layout: Layout<'_>,
+        _cursor: mouse::Cursor,
+        _viewport: &Rectangle,
+    ) {
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds: layout.bounds(),
+                border: iced::border::Border {
+                    radius: self.radius.into(),
+                    ..Default::default()
+                },
+                ..renderer::Quad::default()
+            },
+            Color::WHITE,
+        );
+    }
+}
+
+impl<'a, Message, Theme, Renderer> From<Circle> for Element<'a, Message, Theme, Renderer>
+where
+    Renderer: renderer::Renderer,
+{
+    fn from(circle: Circle) -> Self {
+        Self::new(circle)
+    }
+}

src/custom_widgets/line/mod.rs

@@ -0,0 +1,69 @@
+use iced::advanced::layout::{self, Layout};
+use iced::advanced::renderer;
+use iced::advanced::widget::{self, Widget};
+use iced::mouse;
+use iced::Element;
+use iced::{Color, Length, Rectangle, Size};
+
+pub struct Line {
+    length: f32,
+}
+
+impl Line {
+    pub fn new(length: f32) -> Self {
+        Self { length }
+    }
+}
+
+pub fn line(length: f32) -> Line {
+    Line::new(length)
+}
+
+impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer> for Line
+where
+    Renderer: renderer::Renderer,
+{
+    fn size(&self) -> Size<Length> {
+        Size {
+            width: Length::Shrink,
+            height: Length::Fixed(1f32),
+        }
+    }
+
+    fn layout(
+        &self,
+        _tree: &mut widget::Tree,
+        _renderer: &Renderer,
+        _limits: &layout::Limits,
+    ) -> layout::Node {
+        layout::Node::new(Size::new(self.length, 1.0))
+    }
+
+    fn draw(
+        &self,
+        _state: &widget::Tree,
+        renderer: &mut Renderer,
+        _theme: &Theme,
+        _style: &renderer::Style,
+        layout: Layout<'_>,
+        _cursor: mouse::Cursor,
+        _viewport: &Rectangle,
+    ) {
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds: layout.bounds(),
+                ..renderer::Quad::default()
+            },
+            Color::WHITE,
+        );
+    }
+}
+
+impl<'a, Message, Theme, Renderer> From<Line> for Element<'a, Message, Theme, Renderer>
+where
+    Renderer: renderer::Renderer,
+{
+    fn from(line: Line) -> Self {
+        Self::new(line)
+    }
+}

src/piggui.rs

@@ -1,11 +1,17 @@
 mod gpio;
 mod hw;
+mod custom_widgets {
+    pub mod circle;
+    pub mod line;
+}
 
 // This binary will only be built with the "iced" feature enabled, by use of "required-features"
 // in Cargo.toml so no need for the feature to be used here for conditional compiling
-use iced::widget::{button, container, row, Column, Text};
-use iced::{alignment, window, Element, Length, Sandbox, Settings};
-use crate::gpio::{GPIO_DESCRIPTION, PinDescription};
+use crate::gpio::{PinDescription, GPIO_DESCRIPTION};
+// Using Custom Widgets
+use custom_widgets::{circle::circle, line::line};
+use iced::widget::{button, container, Column, Row, Text};
+use iced::{alignment, window, Alignment, Element, Length, Sandbox, Settings};
 // Use Hardware via trait
 //use hw::Hardware;
 
@@ -66,7 +72,7 @@
     }
 
     fn scale_factor(&self) -> f64 {
-        0.75
+        0.54
     }
 
     fn theme(&self) -> iced::Theme {
@@ -75,26 +81,46 @@
 }
 
 fn pin_view(pin_descriptions: &[PinDescription; 40]) -> Element<'static, Message> {
+
+    // TODO: Align Layout
     let mut column = Column::new()
         .spacing(20)
         .align_items(iced::Alignment::Center)
         .width(Length::Fill)
         .height(Length::Fill);
 
     for pair in pin_descriptions.chunks(2) {
-        let row = row!(
-            Text::new(pair[0].name).size(20),
+        let mut row = Row::new()
+            .padding(10)
+            .spacing(10)
+            .align_items(Alignment::Center);
+
+        row = row.push(Text::new(pair[0].name).size(20));
+
+        let mut r1 = Row::new().align_items(Alignment::Center);
+        r1 = r1.push(circle(5.0));
+        r1 = r1.push(line(50.0));
+        row = row.push(r1);
+
+        row = row.push(
             button(Text::new(pair[0].board_pin_number.to_string()))
                 .on_press(Message::Activate)
-                .width(Length::Fixed( 50f32 )),
+                .width(Length::Fixed(50f32)),
+        );
+        row = row.push(
             button(Text::new(pair[1].board_pin_number.to_string()))
                 .on_press(Message::Activate)
-                .width(Length::Fixed( 50f32 )),
-            Text::new(pair[1].name).size(20),
-        )
-        .spacing(10)
-        .align_items(iced::Alignment::Center);
+                .width(Length::Fixed(50f32)),
+        );
+        let mut r2 = Row::new().align_items(Alignment::Center);
+        r2 = r2.push(line(50.0));
+        r2 = r2.push(circle(5.0));
+        row = row.push(r2);
+
+        row = row.push(Text::new(pair[1].name).size(20));
+
         column = column.push(row);
     }
-    container(column).height(2000).width(2000).into()
+
+    container(column).into()
 }