Support pre-view of palette

src/Tools/tim_tool/src/gui/file_tab.rs

@@ -21,10 +21,19 @@ impl FileTab {
         main_window.set_file_tab_enable(false);
     }
 
-    pub fn update_new_load(&self, file_name: Option<String>, image: Image) {
+    pub fn update_new_load(&self, file_name: Option<String>, image: Image, palette: Option<Image>) {
         let main_window = self.main_window.borrow();
 
         main_window.set_file_tab_image_data(image);
+        if let Some(palette) = palette {
+            main_window.set_file_tab_palette_data(palette);
+            main_window.set_file_tab_palette_visible(true);
+        }
+
+        else {
+            main_window.set_file_tab_palette_visible(false);
+        }
+
         if let Some(file_name) = file_name {
             main_window.set_file_tab_image_name(file_name.into());
         }

src/Tools/tim_tool/src/main.rs

@@ -58,13 +58,13 @@ fn setup_file_tab(gui_elements_ref: Rc<RefCell<GUIElements>>, logic_ref: Rc<RefC
             let file_tab  = &gui_elements.file_tab;
             let file_name = if let Some(name) = file.file_name() {Some(name.to_string_lossy().to_string())} else {None};
             
-            let (image, _palette_image) = logic.borrow_mut().set_unadded_tim(&file)?;
+            let (image, palette) = logic.borrow_mut().set_unadded_tim(&file)?;
         
             let img_size = image.size();
             if img_size.width > VRAM_WIDTH as u32 || img_size.height > VRAM_HEIGHT as u32 {
                 return Err(Error::from_text(format!("Image size ({}; {}) is to big for VRAM ({}, {})", img_size.width, img_size.height, VRAM_WIDTH, VRAM_HEIGHT)));
             }
-            file_tab.update_new_load(file_name, image);
+            file_tab.update_new_load(file_name, image, palette);
         }
 
         Ok(())

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

@@ -15,6 +15,8 @@ export component MainWindow inherits Window {
     // Convert Image values
     in-out property file_tab_browse_path          <=> file_tab.conv_image_path;
     in-out property file_tab_image_data           <=> file_tab.conv_image_data;
+    in-out property file_tab_palette_data         <=> file_tab.conv_palette_data;
+    in-out property file_tab_palette_visible      <=> file_tab.conv_palette_enable;
     in-out property file_tab_image_name           <=> file_tab.conv_image_name;
     in-out property file_tab_enable               <=> file_tab.conv_image_enable;
     callback        file_tab_browse_convert_image <=> file_tab.conv_image_browse_clicked;

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

@@ -14,8 +14,10 @@ component ProjectWidget inherits Rectangle {
 component ConvertImageWidget inherits Rectangle {
     in-out property <string> image_path;
     in-out property <image>  image_data;
+    in-out property <image>  palette_data;
     in-out property <string> image_name;
     in-out property <bool>   enable_button: false;
+    in-out property <bool>   palette_visible: false;
 
     callback browse_clicked();
     callback add_clicked();
@@ -48,21 +50,44 @@ component ConvertImageWidget inherits Rectangle {
         }
     
         GroupBox {
-            title: "Loaded image";
+            title: "Loaded image and palette";
             VerticalLayout {
                 alignment: start;
                 padding:   4px;
                 HorizontalLayout {
                     alignment: center;
                     Rectangle {
-                        width:  256px;
+                        width:  256px + 2*4px; // < Because of border
-                        height: 256px;
+                        height: 256px + 2*4px; // < Because of border
-                        background: #000000;
+                        background: #404040;
+                        border-color: #808080;
+                        border-width: 4px;
                         Image {
-                            width:     256px;
+                            width:           256px;
-                            height:    256px;
+                            height:          256px;
-                            source:    root.image_data;
+                            source:          root.image_data;
-                            image-fit: contain;
+                            image-fit:       contain;
+                            image-rendering: pixelated;
+                        }
+                    }
+                    Rectangle {
+                        // Fake padding because the padding setting for the HorizontalLayout would not work
+                        width:  4px;
+                        height: 1px;
+                    }
+                    Rectangle {
+                        width:  256px + 2*4px; // < Because of border
+                        height: 256px + 2*4px; // < Because of border
+                        background: #404040;
+                        border-color: #808080;
+                        border-width: 4px;
+                        palette_image := Image {
+                            width:           256px;
+                            height:          256px;
+                            source:          root.palette_data;
+                            visible:         root.palette_visible;
+                            image-fit:       contain;
+                            image-rendering: pixelated;
                         }
                     }
                 }
@@ -91,11 +116,22 @@ component ConvertImageWidget inherits Rectangle {
             }
         }
     }
+
+    public function set_palette_image(image: image) {
+        palette_image.source  = image;
+        palette_image.visible = true;
+    }
+
+    public function clear_palette_image() {
+        palette_image.visible = false;
+    }
 }
 
 export component FileTab inherits Rectangle {
     in-out property <string> conv_image_path;
     in-out property <image>  conv_image_data;
+    in-out property <image>  conv_palette_data;
+    in-out property <bool>   conv_palette_enable;
     in-out property <string> conv_image_name;
     in-out property <bool>   conv_image_enable;
     in-out property <State>  state;
@@ -132,10 +168,12 @@ export component FileTab inherits Rectangle {
             if root.state == State.Project : ProjectWidget {
             }
             if root.state == State.ConvertImage : ConvertImageWidget {
-                image_path    <=> root.conv_image_path;
+                image_path      <=> root.conv_image_path;
-                image_data    <=> root.conv_image_data;
+                image_data      <=> root.conv_image_data;
-                image_name    <=> root.conv_image_name;
+                palette_data    <=> root.conv_palette_data;
-                enable_button <=> root.conv_image_enable;
+                palette_visible <=> root.conv_palette_enable;
+                image_name      <=> root.conv_image_name;
+                enable_button   <=> root.conv_image_enable;
                 
                 browse_clicked => {
                     root.conv_image_browse_clicked();

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

@@ -184,9 +184,10 @@ export component MainTab inherits Rectangle {
                             height: 128px;
                             background: #A0A0A0;
                             cur_sel_img := Image {
-                                width:     128px;
+                                width:           128px;
-                                height:    128px;
+                                height:          128px;
-                                image-fit: contain;
+                                image-fit:       contain;
+                                image-rendering: pixelated;
                             }
                         }
                         HorizontalLayout {