feat: centered fixed sized rect, new images, update layout

src/components/slides.rs

@@ -15,7 +15,7 @@ use super::{Component, Frame};
 use crate::{
     action::Action,
     enums::{ContentJson, ReturnSlideWidget, SlideContentType, SlideJson, SlidesJson},
-    layout::{get_slides_layout, CONTENT_PERCENT_HEIGHT, CONTENT_PERCENT_WIDTH},
+    layout::{get_slides_layout, CONTENT_HEIGHT, CONTENT_WIDTH},
     slide_builder::{get_slide_content_string, make_slide_content, make_slide_image},
 };
 
@@ -201,11 +201,11 @@ impl Component for Slides {
     }
 
     fn draw(&mut self, f: &mut Frame<'_>, area: Rect) -> Result<()> {
-        let mut box_width = CONTENT_PERCENT_WIDTH;
-        let mut box_height = CONTENT_PERCENT_HEIGHT;
+        let mut box_width = CONTENT_WIDTH;
+        let mut box_height = CONTENT_HEIGHT;
         if let Some(slides) = &self.slides {
-            box_width = slides.box_size.percent_width;
-            box_height = slides.box_size.percent_height;
+            box_width = slides.box_size.width;
+            box_height = slides.box_size.height;
         }
 
         let rect = get_slides_layout(area, box_width, box_height);

src/enums.rs

@@ -38,8 +38,8 @@ pub struct SlideJson {
 
 #[derive(Debug, Serialize, Deserialize, PartialEq)]
 pub struct BoxSizeJson {
-    pub percent_width: u16,
-    pub percent_height: u16,
+    pub width: u16,
+    pub height: u16,
 }
 
 #[derive(Debug, Serialize, Deserialize, PartialEq)]

src/layout.rs

@@ -3,8 +3,8 @@ use ratatui::{prelude::*, widgets::*};
 const TITLE_HEIGHT: u16 = 2;
 const MIN_CONTENT_HEIGHT: u16 = 20;
 
-pub const CONTENT_PERCENT_WIDTH: u16 = 75;
-pub const CONTENT_PERCENT_HEIGHT: u16 = 65;
+pub const CONTENT_WIDTH: u16 = 50;
+pub const CONTENT_HEIGHT: u16 = 30;
 
 const VERTICAL_CONSTRAINS: [Constraint; 2] = [
     Constraint::Length(TITLE_HEIGHT),
@@ -17,7 +17,7 @@ pub struct SlidesLayout {
     pub content: Rect,
 }
 
-fn centered_rect(percent_x: u16, percent_y: u16, r: Rect) -> Rect {
+fn get_centered_rect_percent(percent_x: u16, percent_y: u16, r: Rect) -> Rect {
     let popup_layout = Layout::vertical([
         Constraint::Percentage((100 - percent_y) / 2),
         Constraint::Percentage(percent_y),
@@ -33,20 +33,30 @@ fn centered_rect(percent_x: u16, percent_y: u16, r: Rect) -> Rect {
     .split(popup_layout[1])[1]
 }
 
+fn get_centered_rect(width: u16, height: u16, area: Rect) -> Rect {
+    let x_axis = Layout::horizontal([Constraint::Percentage(50), Constraint::Percentage(50)]).split(area);
+    let y_axis = Layout::vertical([Constraint::Percentage(50), Constraint::Percentage(50)]).split(area);
+    Rect {
+        x: x_axis[1].x - (width / 2),
+        y: y_axis[1].y - (height / 2),
+        width,
+        height,
+    }
+}
+
 pub fn get_title_layout(area: Rect) -> Rect {
     let layout = Layout::vertical(VERTICAL_CONSTRAINS).split(area);
-    return layout[0];
+    layout[0]
 }
 
 pub fn get_slides_layout(area: Rect, box_width: u16, box_height: u16) -> SlidesLayout {
     let layout = Layout::vertical(VERTICAL_CONSTRAINS).split(area);
-    // let center_rect = centered_rect(CONTENT_PERCENT_WIDTH, CONTENT_PERCENT_HEIGHT, layout[1]); 
-    let center_rect = centered_rect(box_width, box_height, layout[1]); 
+    // let center_rect = get_centered_rect_percent(CONTENT_PERCENT_WIDTH, CONTENT_PERCENT_HEIGHT, layout[1]);
+    let center_rect = get_centered_rect(box_width, box_height, layout[1]);
 
     SlidesLayout {
         title: layout[0],
         slides: layout[1],
         content: center_rect,
     }
 }
-

src/slide_builder.rs

@@ -32,8 +32,9 @@ fn get_slide_content_color(slide: ContentJson) -> String {
 }
 
 fn make_slide_paragraph<'a>(slide: ContentJson) -> ReturnSlideWidget<'a> {
-    let content = get_slide_content_string(slide);
-    ReturnSlideWidget::Paragraph(Paragraph::new(content))
+    let content = get_slide_content_string(slide.clone());
+    let color = get_slide_content_color(slide);
+    ReturnSlideWidget::Paragraph(Paragraph::new(content).style(Style::default().fg(Color::from_str(&color).unwrap())))
 }
 
 fn make_slide_line<'a>(slide: ContentJson) -> ReturnSlideWidget<'a> {
@@ -73,11 +74,13 @@ pub fn make_slide_image<'a>(slide: ContentJson, slide_path: String) -> ReturnSli
 }
 
 fn make_slide_block<'a>(slide: ContentJson) -> ReturnSlideWidget<'a> {
-    let content = get_slide_content_string(slide);
+    let content = get_slide_content_string(slide.clone());
+    let color = get_slide_content_color(slide);
     ReturnSlideWidget::Block(
         Block::default()
             .borders(Borders::ALL)
-            .border_style(Style::default().fg(Color::Rgb(100, 100, 100)))
+            // .border_style(Style::default().fg(Color::Rgb(100, 100, 100)))
+            .border_style(Style::default().fg(Color::from_str(&color).unwrap()))
             .title(
                 Title::from(Line::from(vec![content.yellow()]))
                     .alignment(Alignment::Right)

talk_example/slides.json

@@ -1,7 +1,7 @@
 {
   "box_size": {
-    "percent_width": 75,
-    "percent_height": 65
+    "width": 50,
+    "height": 30
   },
 
   "slides" : [
@@ -11,18 +11,18 @@
         {
           "type": "Image",
           "content": "./images/ratatui.png",
-          "rect": { "x": 21, "y": 6, "width": 20, "height": 20 }
+          "rect": { "x": 15, "y": 6, "width": 20, "height": 20 }
         },
         {
           "type": "Line",
           "content": "A Rust library for creating",
-          "rect": { "x": 18, "y": 17, "width": 40, "height": 1 },
+          "rect": { "x": 12, "y": 17, "width": 30, "height": 1 },
           "color": "#FFFFee" 
         },
         {
           "type": "Line",
           "content": "TERMINAL USER INTERFACES",
-          "rect": { "x": 19, "y": 18, "width": 40, "height": 1 },
+          "rect": { "x": 14, "y": 18, "width": 30, "height": 1 },
           "color": "#FFFF00"
         }
       ]
@@ -31,10 +31,36 @@
     {
       "title": "whoami",
       "content": [
+        {
+          "type": "Line",
+          "content": "Lukas Chleba",
+          "rect": { "x": 5, "y": 6, "width": 40, "height": 1 },
+          "color": "#FFFF00"
+        },
         {
           "type": "Paragraph",
-          "content": "Lukas Chleba Franek\n\n- https://github.com/Chleba\n- web, embedded, games, tools",
-          "rect": { "x": 5, "y": 6, "width": 40, "height": 9 }
+          "content": "- https://github.com/Chleba\n- web, embedded, games, tools",
+          "rect": { "x": 5, "y": 8, "width": 40, "height": 9 }
+        },
+        {
+          "type": "Image",
+          "content": "./images/szn.jpg",
+          "rect": { "x": 10, "y": 12, "width": 10, "height": 10 }
+        },
+        {
+          "type": "Image",
+          "content": "./images/geewa.jpg",
+          "rect": { "x": 21, "y": 12, "width": 10, "height": 10 }
+        },
+        {
+          "type": "Image",
+          "content": "./images/prusa.jpg",
+          "rect": { "x": 10, "y": 18, "width": 10, "height": 10 }
+        },
+        {
+          "type": "Image",
+          "content": "./images/ubi.jpg",
+          "rect": { "x": 21, "y": 18, "width": 10, "height": 10 }
         }
       ]
     }