Support proper background and coordinates now

src/Tools/tim_tool/Cargo.toml

@@ -7,7 +7,8 @@ edition = "2021"
 panic = "abort"
 
 [dependencies]
-slint = "1.9.2"
+tiny-skia = "0.11.4"
+slint     = "1.9.2"
 
 [build-dependencies]
 slint-build = "1.9.2"

src/Tools/tim_tool/src/gui/mod.rs

@@ -0,0 +1,28 @@
+use slint::{Rgba8Pixel, SharedPixelBuffer};
+use tiny_skia::{Rect, Transform};
+
+pub fn create_vram_bg(rect_width: u32, rect_height: u32) -> Option<SharedPixelBuffer<Rgba8Pixel>> {
+    let mut pixel_buffer = SharedPixelBuffer::<Rgba8Pixel>::new(1024, 512);
+    let     width        = pixel_buffer.width();
+    let     height       = pixel_buffer.height();
+
+    if let Some(mut pixmap) = tiny_skia::PixmapMut::from_bytes(pixel_buffer.make_mut_bytes(), width, height) {
+        let vram_color           = tiny_skia::Color::from_rgba8(0x0,  0x80, 0x80, 0xFF); 
+        let display_buffer_color = tiny_skia::Color::from_rgba8(0x0,  0x80,  0x0, 0xFF);
+        let draw_area_color      = tiny_skia::Color::from_rgba8(0x80, 0x80,  0x0, 0xFF);
+
+        let mut paint = tiny_skia::Paint::default();
+
+        pixmap.fill(vram_color);
+        
+        paint.set_color(display_buffer_color);
+        pixmap.fill_rect(Rect::from_xywh(0.0, 0.0,                rect_width as f32, rect_height as f32).unwrap(), &paint, Transform::identity(), None);
+        paint.set_color(draw_area_color);
+        pixmap.fill_rect(Rect::from_xywh(0.0, rect_height as f32, rect_width as f32, rect_height as f32).unwrap(), &paint, Transform::identity(), None);
+        Some(pixel_buffer)
+    }
+    
+    else {
+        None
+    }
+}

src/Tools/tim_tool/src/main.rs

@@ -1,6 +1,7 @@
 // Prevent console window in addition to Slint window in Windows release builds when, e.g., starting the app via file manager. Ignored on other platforms.
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
+mod gui;
 use slint::Model;
 use std::{cell::RefCell, path::Path, rc::Rc};
 
@@ -64,12 +65,18 @@ impl GUIElements {
             self.vram_image_list.set_row_data(idx, vram_info);
         }
     }
+
+    pub fn create_bg() -> Result<slint::Image, slint::PlatformError> {
+        Ok(slint::Image::from_rgba8_premultiplied(gui::create_vram_bg(320, 256).ok_or(slint::PlatformError::Other("Failed creating VRAM background image".to_string()))?))
+    }
 }
 
 fn main() -> Result<(), slint::PlatformError> {
     let main_window  = MainWindow::new()?;
     let gui_elements = Rc::new(RefCell::new(GUIElements::new(&main_window)));
 
+    main_window.set_main_tab_vram_bg(GUIElements::create_bg()?);
+
     let gui_elements_cloned = gui_elements.clone();
     main_window.on_main_tab_add_file_clicked(move || {
         gui_elements_cloned.borrow_mut().add_new_vram_file("Planschi");

src/Tools/tim_tool/ui/app-window.slint

@@ -4,12 +4,14 @@ import { MainTab }   from "./tab/main-tab.slint";
 import { TabWidget } from "std-widgets.slint";
 
 export component MainWindow inherits Window {
-    in-out property main_tab_vram_file_list <=> tab.vram_files;
+    // Main Tab values
-    in-out property main_tab_vram_images    <=> tab.vram_images;
+    in-out property main_tab_vram_bg        <=> main_tab.vram_bg;
+    in-out property main_tab_vram_file_list <=> main_tab.vram_files;
+    in-out property main_tab_vram_images    <=> main_tab.vram_images;
 
-    callback main_tab_add_file_clicked    <=> tab.add_file_clicked;
+    callback main_tab_add_file_clicked    <=> main_tab.add_file_clicked;
-    callback main_tab_remove_file_clicked <=> tab.remove_file_clicked;
+    callback main_tab_remove_file_clicked <=> main_tab.remove_file_clicked;
-    callback move_vram_image              <=> tab.move_vram_image;
+    callback move_vram_image              <=> main_tab.move_vram_image;
 
     title: "TIM Tool 0.1.0";
     width:  tab_widget.width;
@@ -18,8 +20,8 @@ export component MainWindow inherits Window {
     tab_widget := TabWidget {
         x: 0px;
         y: 0px;
-        width: tab.width;
+        width:  main_tab.width;
-        height: tab.height;
+        height: main_tab.height;
 
         current-index: 1;
         Tab {
@@ -31,7 +33,7 @@ export component MainWindow inherits Window {
         }
         Tab {
             title: "VRAM Layout";
-            tab := MainTab {
+            main_tab := MainTab {
                 x: 0px;
                 y: 0px;
             }

src/Tools/tim_tool/ui/tab/main-tab.slint

@@ -8,6 +8,7 @@ struct VRAMImage {
 }
 
 export component MainTab inherits Rectangle {
+    in-out property <image>                  vram_bg;
     in-out property <[StandardListViewItem]> vram_files:  [];
     in-out property <[VRAMImage]>            vram_images: [];
 
@@ -31,16 +32,16 @@ export component MainTab inherits Rectangle {
                 border-color: #404040;
                 background: #A0A0A0;
                 background_image := VRAMArea {
-                    x: root.get_border_width()*1px;
+                    x:     root.get_border_width()*1px;
-                    y: root.get_border_width()*1px;
+                    y:     root.get_border_width()*1px;
-                    img: @image-url("../../../../../examples/PoolBox/assets/AllTheJaby.png");
+                    img:   vram_bg;
                     img_x: 0;
                     img_y: 0;
                 }
 
                 for vram_image[i] in root.vram_images: VRAMArea {
-                    x: root.get_border_width()*1px;
+                    x:     root.get_border_width()*1px;
-                    y: root.get_border_width()*1px;
+                    y:     root.get_border_width()*1px;
                     img:   vram-image.img;
                     img_x: vram-image.x;
                     img_y: vram-image.y;
@@ -53,12 +54,18 @@ export component MainTab inherits Rectangle {
                         moved => {
                             self.mouse-cursor = MouseCursor.grabbing;
                             root.move_vram_image(i, (self.mouse-x - self.pressed-x)/1px, (self.mouse-y - self.pressed-y)/1px);
-                            
+                            cur_sel_x.display_value = parent.img_x;
+                            cur_sel_y.display_value = parent.img_y;
                         }
                         pointer-event(event) => {
                             if event.kind == PointerEventKind.up {
                                 self.mouse-cursor = MouseCursor.grab;
                             }
+
+                            if event.kind == PointerEventKind.down {
+                                cur_sel_x.display_value = parent.img_x;
+                                cur_sel_y.display_value = parent.img_y;
+                            }
                         }
 
                         // Thanks to Cody the white tiger
@@ -117,6 +124,14 @@ export component MainTab inherits Rectangle {
                             height: 128px;
                             background: #A0A0A0;
                         }
+                        cur_sel_x := Text {
+                            in-out property <int> display_value;
+                            text: "X: " + display_value;
+                        }
+                        cur_sel_y :=Text {
+                            in-out property <int> display_value;
+                            text: "Y: " + display_value;
+                        }
                         ComboBox {
                             model: ["4-bit", "16-bit", "24-bit"];
                             current-value: "4-bit";