Merge pull request 'Support loading and displaying of image palette' (#16) from topic/jb/tim_tool/PaletteSupport into main

Reviewed-on: #16
Reviewed-by: cody <william@werl.me>

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

@@ -21,7 +21,9 @@ 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_loaded_file(&self, file_name: Option<String>, image: Image, palette: Option<Image>) {
+        self.update_palette(palette);
+        
         let main_window = self.main_window.borrow();
 
         main_window.set_file_tab_image_data(image);
@@ -35,6 +37,25 @@ impl FileTab {
         main_window.set_file_tab_enable(true);
     }
 
+    pub fn update_palette(&self, palette: Option<Image>) {
+        let main_window = self.main_window.borrow();
+
+        if let Some(palette) = palette {
+            let size = palette.size();
+
+            main_window.set_file_tab_palette_data(palette);
+            main_window.set_file_tab_palette_width(size.width as i32);
+            main_window.set_file_tab_palette_height(size.height as i32);
+            main_window.set_file_tab_palette_visible(true);
+        }
+
+        else {
+            main_window.set_file_tab_palette_width(0);
+            main_window.set_file_tab_palette_height(0);
+            main_window.set_file_tab_palette_visible(false);
+        }
+    }
+
     pub fn get_file_name(&self) -> String {
         self.main_window.borrow().get_file_tab_image_name().to_string()
     }
@@ -50,6 +71,17 @@ impl FileTab {
         });
     }
 
+    pub fn on_update_palette_size(&self, gui_elements: GUIElementsRef, mut function: impl FnMut(&mut GUIElements, &MainWindow, u32, u32) -> Result<(), Error> + 'static) {
+        let main_window_cloned = self.main_window.clone();
+        let gui_cloned         = gui_elements.clone();
+
+        self.main_window.borrow().on_file_tab_update_palette_size(move |width, height| {
+            if let Err(error) = function(&mut gui_cloned.borrow_mut(), &main_window_cloned.borrow(), width as u32, height as u32) {
+                display_error("Loadind file failed", &error.to_string());
+            }
+        });
+    }
+
     pub fn on_add_image(&self, gui_elements: GUIElementsRef, mut function: impl FnMut(&mut GUIElements, &MainWindow) -> Result<(), Error> + 'static) {
         let main_window_cloned = self.main_window.clone();
         let gui_cloned         = gui_elements.clone();

src/Tools/tim_tool/src/gui/main_tab.rs

@@ -4,11 +4,14 @@ use super::{GUIElementsRef, MainWindowRef};
 use slint::Model;
 use std::{rc::Rc, sync::{Arc, Mutex}};
 
+struct VRAM {
+    pub file_list:  Rc<slint::VecModel<slint::StandardListViewItem>>,
+    pub image_list: Rc<slint::VecModel<VRAMImage>>
+}
+
 pub struct MainTab {
     main_window:     MainWindowRef,
-    mtx:             Arc<Mutex<i32>>,
+    vram:            Arc<Mutex<VRAM>>,
-    vram_file_list:  Rc<slint::VecModel<slint::StandardListViewItem>>,
-    vram_image_list: Rc<slint::VecModel<VRAMImage>>,
 }
 
 impl MainTab {
@@ -20,43 +23,63 @@ impl MainTab {
         main_window.borrow().set_main_tab_vram_file_list(vram_file_list.clone().into());
         main_window.borrow().set_main_tab_vram_images(vram_image_list.clone().into());
 
-        MainTab{main_window, mtx: Arc::new(Mutex::new(0)), vram_file_list, vram_image_list}
+        MainTab{main_window, vram: Arc::new(Mutex::new(VRAM{file_list: vram_file_list, image_list: vram_image_list}))}
     }
 
     pub fn add_new_vram_file(&mut self, file_name: &String, image: slint::Image, image_palette: Option<slint::Image>) {
-        let add_new_image = |file_name: &String, image: slint::Image| {
+        let vram_data = self.vram.lock().expect("VRAM already locked");
+        let add_new_image = |file_name: &String, image: slint::Image, palette_count: i32, is_palette: bool| {
             let vram_image = VRAMImage{
                 img:           image,
                 x:             0,
                 y:             0,
-                palette_count: 0,
+                palette_count,
-                is_palette:    false,
+                is_palette,
             };
 
-            self.vram_file_list.push(slint::StandardListViewItem::from(file_name.as_str()));
+            vram_data.file_list.push(slint::StandardListViewItem::from(file_name.as_str()));
-            self.vram_image_list.push(vram_image);
+            vram_data.image_list.push(vram_image);
         };
 
-        let _lock = self.mtx.lock().unwrap();
+        add_new_image(file_name, image, if image_palette.is_some() {1} else {0}, false);
-        add_new_image(file_name, image);
+        if let Some(image_palette) = image_palette {
+            let file_name = "  => ".to_owned() + file_name.as_str() + " (Palette)";
+            add_new_image(&file_name, image_palette, 0, true);
+        }
     }
 
     pub fn remove_vram_file(&mut self, idx: usize) -> bool {
-        let _lock = self.mtx.lock().unwrap();
+        let vram_data = self.vram.lock().expect("VRAM already locked");
+        let remove_image = |idx: usize| {
+            vram_data.file_list.remove(idx);
+            vram_data.image_list.remove(idx);
+        };
 
-        if let Some(element) = self.vram_image_list.iter().skip(idx).next() {
+        let extras = {
+            if let Some(element) = vram_data.image_list.iter().skip(idx).next() {
                 if element.is_palette {
                     return false;
                 }
+
+                else {
+                    element.palette_count as usize
+                }
             }
 
-        self.vram_file_list.remove(idx);
+            else {
-        self.vram_image_list.remove(idx);
+                0
+            }
+        };
+
+        for _ in idx..=idx+extras {
+            remove_image(idx);
+        }
         return true;
     }
 
     pub fn move_vram_image(&mut self, idx: usize, dx: i32, dy: i32) {
-        if let Some(mut vram_info) = self.vram_image_list.row_data(idx) {
+        let vram_data = self.vram.lock().expect("VRAM already locked");
+        if let Some(mut vram_info) = vram_data.image_list.row_data(idx) {
             vram_info.x += dx;
             vram_info.y += dy;
 
@@ -77,7 +100,7 @@ impl MainTab {
                 vram_info.y = VRAM_HEIGHT as i32 - vram_img_height;
             }
 
-            self.vram_image_list.set_row_data(idx, vram_info);
+            vram_data.image_list.set_row_data(idx, vram_info);
         }
     }
 

src/Tools/tim_tool/src/logic/mod.rs

@@ -34,4 +34,14 @@ impl Logic {
             Err(Error::from_str("No data found for loaded image"))
         }
     }
+
+    pub fn change_unadded_tim_palette_size(&mut self, width: u32, height: u32) -> Result<Option<Image>, Error> {
+        if let Some(unadded_tim) = &mut self.unadded_tim {
+            unadded_tim.change_palette_size(width, height)
+        }
+
+        else {
+            Ok(None)
+        }
+    }
 }

src/Tools/tim_tool/src/logic/tim.rs

@@ -4,7 +4,7 @@ use tool_helper::Error;
 
 pub struct TIMInfo {
     image_data: SharedPixelBuffer<Rgba8Pixel>,
-    palette:    Option<Vec<Rgba8Pixel>>,
+    palette:    Option<PaletteInfo>,
 }
 
 impl TIMInfo {
@@ -48,7 +48,7 @@ impl TIMInfo {
                     _                    => {return Err(Error::from_str("Only 4 and 8bit color depth are supported for indexed color images"));}
                 }
             }
-            Ok(TIMInfo{image_data, palette: Some(palette_colors)})
+            Ok(TIMInfo{image_data, palette: Some(PaletteInfo::new(palette_colors))})
         }
 
         else {
@@ -70,7 +70,51 @@ impl TIMInfo {
         }
     }
 
+    pub fn change_palette_size(&mut self, width: u32, height: u32) -> Result<Option<slint::Image>, Error> {
+        if let Some(palette) = &mut self.palette {
+            if width == 0 || height == 0 {
+                return Err(Error::from_text(format!("{}px x {}px is not a valid size for palette", width, height)));
+            }
+
+            palette.width  = width;
+            palette.height = height;
+            Ok(Some(palette.get_image()))
+        }
+
+        else {
+            Ok(None)
+        }
+    }
+
     pub fn get_slint_images(&self) -> (slint::Image, Option<slint::Image>) {
-        (slint::Image::from_rgba8_premultiplied(self.image_data.clone()), None)
+        (slint::Image::from_rgba8_premultiplied(self.image_data.clone()), if let Some(palette) = &self.palette {
+            Some(palette.get_image())
+        } else {
+            None
+        })
+    }
+}
+
+struct PaletteInfo {
+    data:   Vec<Rgba8Pixel>,
+    width:  u32,
+    height: u32,
+}
+
+impl PaletteInfo {
+    pub fn new(data: Vec<Rgba8Pixel>) -> PaletteInfo {
+        let width = if data.len() <= 16 {16} else {256};
+        PaletteInfo{data, width, height: 1}
+    }
+
+    pub fn get_image(&self) -> slint::Image {
+        let mut image_data = SharedPixelBuffer::new(self.width, self.height);
+        let     dst_pixels = image_data.make_mut_slice();
+
+        for (idx, byte) in dst_pixels.iter_mut().enumerate() {
+            *byte = if idx < self.data.len() {self.data[idx]} else {Rgba8Pixel::new(0, 0, 0, 0xFF)};
+        }
+
+        slint::Image::from_rgba8_premultiplied(image_data.clone())
     }
 }

src/Tools/tim_tool/src/main.rs

@@ -43,6 +43,14 @@ fn setup_main_tab(gui_elements_ref: Rc<RefCell<GUIElements>>) {
 fn setup_file_tab(gui_elements_ref: Rc<RefCell<GUIElements>>, logic_ref: Rc<RefCell<Logic>>) {
     let gui_elements = gui_elements_ref.borrow();
 
+    let logic = logic_ref.clone();
+    gui_elements.file_tab.on_update_palette_size(gui_elements_ref.clone(), move |gui_elements, _main_window, width, height| -> Result<(), Error> {
+        let file_tab  = &gui_elements.file_tab;
+
+        file_tab.update_palette(logic.borrow_mut().change_unadded_tim_palette_size(width, height)?);
+        Ok(())
+    });
+
     let logic = logic_ref.clone();
     gui_elements.file_tab.on_browse_file(gui_elements_ref.clone(), move |gui_elements, main_window| -> Result<(), Error> {
         let file = FileDialog::new()
@@ -58,13 +66,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_loaded_file(file_name, image, palette);
         }
 
         Ok(())

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

@@ -13,12 +13,17 @@ export component MainWindow inherits Window {
     callback move_vram_image              <=> main_tab.move_vram_image;
 
     // Convert Image values
-    in-out property file_tab_browse_path          <=> file_tab.conv_image_path;
+    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-image_data           <=> file_tab.conv-image_data;
-    in-out property file_tab_image_name           <=> file_tab.conv_image_name;
+    in-out property file_tab-palette_data         <=> file_tab.conv-palette_data;
-    in-out property file_tab_enable               <=> file_tab.conv_image_enable;
+    in-out property file_tab-palette_width        <=> file_tab.conv-palette_width;
-    callback        file_tab_browse_convert_image <=> file_tab.conv_image_browse_clicked;
+    in-out property file_tab-palette_height       <=> file_tab.conv-palette_height;
-    callback        file_tab_add_convert_image    <=> file_tab.conv_image_add_clicked;
+    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-enable_view;
+    callback        file_tab-update_palette_size  <=> file_tab.conv-image_update_palette_size;
+    callback        file_tab-browse_convert_image <=> file_tab.conv-image_browse_clicked;
+    callback        file_tab-add_convert_image    <=> file_tab.conv-image_add_clicked;
 
     title: "TIM Tool 0.1.0";
     width:  tab_widget.width;

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

@@ -13,12 +13,17 @@ component ProjectWidget inherits Rectangle {
 
 component ConvertImageWidget inherits Rectangle {
     in-out property <string> image_path;
-    in-out property <image>  image_data;
     in-out property <string> image_name;
-    in-out property <bool>   enable_button: false;
+    in-out property <image>  image_data;
+    in-out property <image>  palette_data;
+    in-out property <int>    palette_width:  0;
+    in-out property <int>    palette_height: 0;
+    in-out property <bool>   enable_view:     false;
+    in-out property <bool>   palette_visible: false;
 
     callback browse_clicked();
     callback add_clicked();
+    callback update_palette_size(int, int);
 
     background: #D0D0D0;
 
@@ -48,21 +53,85 @@ 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;
                             height:          256px;
                             source:          root.image_data;
                             image-fit:       contain;
+                            image-rendering: pixelated;
+                        }
+                    }
+                    Rectangle {
+                        // Fake padding because the padding setting for the HorizontalLayout would not work
+                        width:  4px;
+                        height: 1px;
+                    }
+                    VerticalLayout {
+                        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;
+                            }
+                        }
+                        HorizontalLayout {
+                            alignment: start;
+                            VerticalLayout {
+                                VerticalLayout {
+                                    alignment: center;
+                                    Text {
+                                        text: "Width: ";
+                                    }
+                                }
+                                VerticalLayout {
+                                    alignment: center;
+                                    Text {
+                                        text: "Height: ";
+                                    }
+                                }
+                            }
+                            VerticalLayout {
+                                palette_width_edit := LineEdit {
+                                    width:      40pt;
+                                    input-type: number;
+                                    enabled:    root.palette_visible;
+                                    text:       root.palette_width;
+
+                                    accepted(text) => {
+                                        update_palette_size(palette_width_edit.text.to-float(), palette_height_edit.text.to-float());
+                                    }
+                                }
+                                palette_height_edit := LineEdit {
+                                    width:      40pt;
+                                    input-type: number;
+                                    enabled:    root.palette_visible;
+                                    text:       root.palette_height;
+
+                                    accepted(text) => {
+                                        update_palette_size(palette_width_edit.text.to-float(), palette_height_edit.text.to-float());
+                                    }
+                                }
+                            }
                         }
                     }
                 }
@@ -84,23 +153,40 @@ component ConvertImageWidget inherits Rectangle {
                     padding:   4px;
                     Button {
                         text:    "Add Image";
-                        enabled: root.enable_button;
+                        enabled: root.enable_view;
                         clicked => {root.add_clicked();}
                     }
                 }
             }
         }
     }
+
+    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;
+    // TODO: Names are messed up here!
-    in-out property <image>  conv_image_data;
+    in-out property <string> conv-image_path;
-    in-out property <string> conv_image_name;
+    in-out property <string> conv-image_name;
-    in-out property <bool>   conv_image_enable;
+    in-out property <image>  conv-image_data;
+    in-out property <image>  conv-palette_data;
+    in-out property <int>    conv-palette_width;
+    in-out property <int>    conv-palette_height;
+    in-out property <bool>   conv-palette_enable;
+    in-out property <bool>   conv-enable_view;
+
+
     in-out property <State>  state;
-    callback                 conv_image_browse_clicked;
+    callback                 conv-image_update_palette_size(int, int);
-    callback                 conv_image_add_clicked;
+    callback                 conv-image_browse_clicked;
+    callback                 conv-image_add_clicked;
 
     x: 0px;
     y: 0px;
@@ -132,17 +218,25 @@ 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_width   <=> root.conv-palette_width;
+                palette_height  <=> root.conv-palette_height;
+                palette_visible <=> root.conv-palette_enable;
+                image_name      <=> root.conv-image_name;
+                enable_view     <=> root.conv-enable_view;
+                
+                update_palette_size(width, height) => {
+                    root.conv-image_update_palette_size(width, height);
+                }
 
                 browse_clicked => {
-                    root.conv_image_browse_clicked();
+                    root.conv-image_browse_clicked();
                 }
 
                 add_clicked => {
-                    root.conv_image_add_clicked();
+                    root.conv-image_add_clicked();
                 }
             }
         }

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

@@ -1,5 +1,5 @@
 import { VRAMArea } from "../vram-components.slint";
-import { Button, ComboBox, GroupBox, StandardListView } from "std-widgets.slint";
+import { Button, ComboBox, GroupBox, StandardListView, LineEdit, ScrollView, Slider } from "std-widgets.slint";
 
 struct VRAMImage {
     img:           image,
@@ -10,6 +10,7 @@ struct VRAMImage {
 }
 
 export component MainTab inherits Rectangle {
+    property        <float>                  scale: 1.0;
     in-out property <image>                  vram_bg;
     in-out property <[StandardListViewItem]> vram_files:  [];
     in-out property <[VRAMImage]>            vram_images: [];
@@ -25,9 +26,18 @@ export component MainTab inherits Rectangle {
         title: "VRAM Layout";
         x:      4px;
         y:      4px;
+        width:  main_view.width  + 2*main_view.x;
         
         VerticalLayout {
-            background_rect := Rectangle {
+            main_view := ScrollView {
+                width:           rect.width/root.scale;
+                height:          rect.height/root.scale;
+                viewport-x:      0;
+                viewport-y:      0;
+                viewport-width:  rect.width;
+                viewport-height: rect.height;
+
+                rect := Rectangle {
                     width:  background_image.width  + root.get_border_width()*2px;
                     height: background_image.height + root.get_border_width()*2px;
                     border-width: root.get_border_width()*1px;
@@ -39,25 +49,28 @@ export component MainTab inherits Rectangle {
                         img:   vram_bg;
                         img_x: 0;
                         img_y: 0;
+                        scale: scale;
                     }
     
                     for vram_image[i] in root.vram_images: VRAMArea {
                         x:     root.get_border_width()*1px;
                         y:     root.get_border_width()*1px;
-                    img:   vram-image.img;
+                        img:   vram_image.img;
-                    img_x: vram-image.x;
+                        img_x: vram_image.x;
-                    img_y: vram-image.y;
+                        img_y: vram_image.y;
+                        scale: scale;
+    
                         TouchArea {
-                        x:      (parent.img_x + self.lines_crossed_x())*1px;
+                            x:      ((parent.img_x + self.lines_crossed_x())*1px)*scale;
-                        y:      (parent.img_y + self.lines_crossed_y())*1px;
+                            y:      ((parent.img_y + self.lines_crossed_y())*1px)*scale;
-                        width:  (parent.img.width  + self.lines_crossed_width())*1px;
+                            width:  ((parent.img.width  + self.lines_crossed_width())*1px)*scale;
-                        height: (parent.img.height + self.lines_crossed_height())*1px;
+                            height: ((parent.img.height + self.lines_crossed_height())*1px)*scale;
                             mouse-cursor: grab;
                             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);
+                                root.move_vram_image(i, ((self.mouse-x - self.pressed-x)/scale)/1px, ((self.mouse-y - self.pressed-y)/scale)/1px);
-                            cur_sel_x.display_value = parent.img_x;
+                                cur_sel_x.text = parent.img_x;
-                            cur_sel_y.display_value = parent.img_y;
+                                cur_sel_y.text = parent.img_y;
                             }
                             pointer-event(event) => {
                                 if event.kind == PointerEventKind.up {
@@ -65,9 +78,11 @@ export component MainTab inherits Rectangle {
                                 }
     
                                 if event.kind == PointerEventKind.down {
-                                cur_sel_x.display_value = parent.img_x;
+                                    cur_sel_x.text               = parent.img_x;
-                                cur_sel_y.display_value = parent.img_y;
+                                    cur_sel_y.text               = parent.img_y;
                                     cur_sel_img.source           = parent.img;
+                                    cur_sel_img.visible          = true;
+                                    vram_files_list.current-item = i;
                                 }
                             }
     
@@ -90,6 +105,38 @@ export component MainTab inherits Rectangle {
                         }
                     }
                 }
+
+                function update_viewport() {
+                    if abs(self.viewport-x) + self.width > self.viewport-width {
+                        self.viewport-x = 0;
+                    }
+
+                    if abs(self.viewport-y) + self.height > self.viewport-height {
+                        self.viewport-y = 0;
+                    }
+                }
+            }
+            HorizontalLayout {
+                padding: 4px;
+                VerticalLayout {
+                    alignment:     center;
+                    padding-right: 4px;
+                    Text {
+                        text: "Scale: " + round(slider.value) + "%";
+                    }    
+                }
+                slider := Slider {
+                    minimum: 100.0;
+                    maximum: 400.0;
+                    step:    1.0;
+                    value:   100.0;
+
+                    changed(value) => {
+                        root.scale = round(value)/100.0;
+                        main_view.update_viewport();
+                    }
+                }
+            }
             HorizontalLayout {
                 padding: 4px;
                 GroupBox {
@@ -98,9 +145,16 @@ export component MainTab inherits Rectangle {
                         alignment: start;
                         padding: 4px;
                         vram_files_list := StandardListView {
-                            width:  background_image.width/2;
+                            width:  background_image.width/root.scale/2;
                             height: 128px;
                             model:  root.vram_files;
+
+                            current-item-changed(current-item) => {
+                                cur_sel_x.text      = root.vram_images[current-item].x;
+                                cur_sel_y.text      = root.vram_images[current-item].y;
+                                cur_sel_img.source  = root.vram_images[current-item].img;
+                                cur_sel_img.visible = true;
+                            }
                         }
                         HorizontalLayout {
                             padding: 4px;
@@ -113,6 +167,9 @@ export component MainTab inherits Rectangle {
                                 clicked => {
                                     root.remove_file_clicked(vram_files_list.current_item);
                                     vram_files_list.current-item = -1;
+                                    cur_sel_x.text               = 0;
+                                    cur_sel_y.text               = 0;
+                                    cur_sel_img.visible          = false;
                                 }
                             }
                         }
@@ -130,15 +187,50 @@ export component MainTab inherits Rectangle {
                                 width:           128px;
                                 height:          128px;
                                 image-fit:       contain;
+                                image-rendering: pixelated;
+                            }
+                        }
+                        HorizontalLayout {
+                            alignment: start;
+                            VerticalLayout {
+                                alignment: center;
+                                Text {
+                                    text: "X: ";
+                                }
+                            }
+                            cur_sel_x := LineEdit {
+                                input-type: number;
+                                text:       0;
+                                width:      64pt;
+
+                                accepted(text) => {
+                                    if(vram_files_list.current-item != -1) {
+                                        root.move_vram_image(vram_files_list.current-item, text.to-float() - vram_images[vram_files_list.current-item].x, 0);
+                                        self.text = vram_images[vram_files_list.current-item].x;
+                                    }
+                                }
+                            }
+                        }
+                        HorizontalLayout {
+                            alignment: start;
+                            VerticalLayout {
+                                alignment: center;
+                                Text {
+                                    text: "Y: ";
+                                }
+                            }
+                            cur_sel_y := LineEdit {
+                                input-type: number;
+                                text:       0;
+                                width:      64pt;
+
+                                accepted(text) => {
+                                    if(vram_files_list.current-item != -1) {
+                                        root.move_vram_image(vram_files_list.current-item, 0, text.to-float() - vram_images[vram_files_list.current-item].y);
+                                        self.text = vram_images[vram_files_list.current-item].y;
                                     }
                                 }
-                        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"];
@@ -150,6 +242,33 @@ export component MainTab inherits Rectangle {
         }
     }
 
+    FocusScope {
+        key-pressed(event) => {
+            if(vram_files_list.current-item != -1) {
+                if(event.text == Key.LeftArrow) {
+                    root.move_vram_image(vram_files_list.current-item, -1, 0);
+                    cur_sel_x.text = vram_images[vram_files_list.current-item].x;
+                }
+
+                if(event.text == Key.RightArrow) {
+                    root.move_vram_image(vram_files_list.current-item, 1, 0);
+                    cur_sel_x.text = vram_images[vram_files_list.current-item].x;
+                }
+
+                if(event.text == Key.UpArrow) {
+                    root.move_vram_image(vram_files_list.current-item, 0, -1);
+                    cur_sel_y.text = vram_images[vram_files_list.current-item].y;
+                }
+
+                if(event.text == Key.DownArrow) {
+                    root.move_vram_image(vram_files_list.current-item, 0, 1);
+                    cur_sel_y.text = vram_images[vram_files_list.current-item].y;
+                }
+            }
+            accept
+        }
+    }
+
     function get_border_width() -> int {
         return 4;
     }

src/Tools/tim_tool/ui/vram-components.slint

@@ -3,14 +3,18 @@ component VRAMSegment inherits Rectangle {
     in property <image> img;
     in property <int>   clip_x;
     in property <int>   clip_y;
+    in property <float> scale: 1.0;
 
-    width:  64px;
+    width:  64px*scale;
-    height: 256px;
+    height: 256px*scale;
     clip:   true;
     Image {
         source:          img;
-        x:      -root.clip_x*1px;
+        x:               -root.clip_x*1px*scale;
-        y:      -root.clip_y*1px;
+        y:               -root.clip_y*1px*scale;
+        width:           img.width*1px*scale;
+        height:          img.height*1px*scale;
+        image-rendering: pixelated;
     }
 }
 
@@ -18,17 +22,19 @@ export component VRAMArea inherits Rectangle {
     in property <image> img;
     in property <int>   img_x;
     in property <int>   img_y;
+    in property <float> scale: 1.0;
 
-    width:  (64*16+15)*1px;
+    width:  ((64*16+15)*1px)*scale;
-    height: (256*2+1)*1px;
+    height: ((256*2+1)*1px)*scale;
 
     for idx in 32 : VRAMSegment {
-        x: root.get_x(idx)*(64px  + 1px);
+        x: (root.get_x(idx)*(64px  + 1px))*scale;
-        y: root.get_y(idx)*(256px + 1px);
+        y: (root.get_y(idx)*(256px + 1px))*scale;
 
         img: img;
         clip_x: (root.get_x(idx)*64)  - root.img_x;
         clip_y: (root.get_y(idx)*256) - root.img_y;
+        scale:  root.scale;
     }
 
     function get_x(idx: int) -> int {