Add image viewer widget #565

alanpoon · 2025-08-06T09:48:25Z

Fixes #327

in replacement of #443

Waiting for this PR to be merged: makepad/makepad#788.

alanpoon · 2025-08-11T04:45:09Z

Intention of adding an image magnifier and the ability to pan image.

The image's image_scale, image_pan will always be set to default in draw_walk. Hence unable to dynamically scale and pan image.
makepad/makepad#785

kevinaboos · 2025-10-17T09:08:38Z

Intention of adding an image magnifier and the ability to pan image.

The image's image_scale, image_pan will always be set to default in draw_walk. Hence unable to dynamically scale and pan image. makepad/makepad#785

@alanpoon I just checked with Rik, and this line should not be present in the Image widget. It's some errant code left over from dealing with animations in a strange way.

You can submit a PR to makepad that removes that line, and then continue with this issue here.

alanpoon · 2025-10-18T02:58:24Z

Sure, the makepad PR is here: makepad/makepad#788

alanpoon · 2025-10-19T03:01:23Z

kevinaboos

Thanks Alan, nice work here.

My main comment is that we should decouple the ImageViewer widget from the RoomScreen. It doesn't need to know anything about the RoomScreen except for being able to access the RoomScreen's MediaCache instance (technically even that is not required, see Aarav's PR for an example of just passing the image data directly from the media fetch background task to the ImageViewer via an action).

Also, Aarav and I had a lot of discussions about using actions to communicate with the ImageViewer widget in PR#443. I think you can combine your approach (of storing images in the RoomScreen's MediaCache) with the action-based design from #443 (in which you emit an action including the image data/status instead of directly accessing the widget and calling a function on it). Actions are more idiomatic and also allow easy communication from any context, both in a background task and in a RoomScreen TimelineUpdate handler.

src/home/room_screen.rs

src/app.rs

src/shared/styles.rs

src/shared/text_or_image.rs

src/shared/image_viewer_modal.rs

src/app.rs

kevinaboos

The code looks pretty good, I left mostly nitpick comments but a few are more significant in nature.

src/home/room_image_viewer.rs

kevinaboos · 2025-11-13T19:22:11Z

src/home/room_image_viewer.rs

+/// Extracts image name and size from an event timeline item.
+pub fn extract_image_info(event_tl_item: &EventTimelineItem) -> (String, i32) {


"Extract" makes it sound like you're unarchiving/decompressing a file. I would just call it something like get_image_name_and_filesize or something similar.

The image "size" sounds like a dimension, i'd recommend saying "size in bytes" or something just to be very clear.

How can an image size value be a signed integer? Answer: it cannot, and in the SDK it's a UInt, so you can either use that directly or convert it to a u64.

kevinaboos · 2025-11-13T19:23:03Z

src/home/room_image_viewer.rs

+        } else {
+            ("Unknown Image".to_string(), 0)
+        }
+    } else {
+        ("Unknown Image".to_string(), 0)
+    }


dedup these, e.g., by returning early from within the if conditional and then having this as a default return value.

kevinaboos · 2025-11-13T19:27:29Z

src/home/room_image_viewer.rs

+/// Condensed message does not have a profile, so we need to find the previous portal list item.
+/// Searches backwards for a non-empty display name and avatar in previous portal list items.
+/// Mutates display_name and avatar_ref.
+/// Returns when first non-empty display name is found.
+pub fn find_previous_profile_in_condensed_message(


Reading widget values from the UI is an odd way to try to obtain content for a timeline event. I'm not sure what context you have when calling this, but why not just get this info from the event timeline item itself?

Using this style of output parameters is strange and not very rusty. I'd recommend you just return the display_name and the AvatarRef directly instead of mutating them, because that would clearly convey when you were unable to obtain them. Currently, with this function signature, there's no way to know if you successfully obtained those two bits of data, which is a form of silencing errors.

Nit: doc comments are rendered using markdown, so the line separation here gets lost. Generally, you should start the doc comment with a short one-line summary, then a blank line, and then the details in any format you wish.

1-2: Removed this function, and use avatar.set_avatar_and_get_username after retrieving timeline event.
3: Doc fixed.

kevinaboos · 2025-11-13T19:46:00Z

src/home/room_screen.rs

+        index: usize,
+        widget_ref: WidgetRef,


can you give these more specific names? I assume index is the index into the portallist of ... something? and what is widget_ref? That could be anything.

Changed index to item_id. Removed widget_ref.

kevinaboos · 2025-11-13T20:36:40Z

src/shared/image_viewer.rs

+/// The error type is matched against a string which describes the error in a way that is visible to the user.
+///
+/// The strings returned by this function will be appropriate for display in a label or similar widget.
+pub fn image_viewer_error_to_string(error: &ImageViewerError) -> &str {


check out the thiserror crate, that's exactly what it's for. You're re-creating a less featureful version of proper error conversion/display.

Fix by using thiserror crate.

kevinaboos · 2025-11-13T20:38:29Z

src/shared/image_viewer.rs

+            }
+        }
+    }
+    pub Rotation_Button = <RobrixIconButton> {


nit: this doesn't follow typical code style, you're combining camel case and snake case. It should be something like RotateButton.

kevinaboos · 2025-11-13T20:46:39Z

src/shared/image_viewer.rs

+            flow: Right
+
+            top_left_container = <View> {
+                width: 150, height: Fit,


how does this size choice look with longer usernames? 150 pixels seems way too small to fit an avatar, a username, and a timestamp

and what about mobile devices with skinnier screens? Don't forget to test things on a wide variety of view sizes.

Honestly it seems like you might need to rethink this layout. Perhaps something like image name on the top, and then the avatar+username+timestamp on the line beneath that.

Changed top_left_container's width to be 200. Added the logic to empty_right_container's width to 0 when display_context is mobile.

kevinaboos · 2025-11-13T21:04:46Z

src/shared/image_viewer.rs

+    /// A lock to prevent multiple rotation animations from running at the same time
+    #[rust]
+    is_animating_rotation: bool,
+    #[animator]
+    animator: Animator,
+    /// Timer for rotation animation, prevents clicking the rotation buttons too often
+    /// to start the animation
+    #[rust]
+    timer: Timer,


using a "lock" (which is just a bool, not really a lock) plus a timer to prevent multiple simultaneous animations is a very fragile way to achieve this.

Luckily, you don't need any of this. All you have to do is check the state of the animator, and if it is playing an animator, simply ignore additional button presses on the rotate buttons.

Alternatively, if the user clicks the rotate button while the image is already being rotated, you could just cut the animation short and then jump to the next rotation state immediately, and then start another rotation animation again. That is probably a way better UX than some kind of hidden timeout thing.

In general, timers in makepad aren't great and we definitely should not use them for anything related to animations, ever.

Changed to use is_animating.

kevinaboos · 2025-11-13T21:15:23Z

src/shared/image_viewer.rs

+        // Clear the rotated image texture with a white background
+        if let Ok(image_buffer) = ImageBuffer::new(&[255], 1, 1) {
+            let texture = image_buffer.into_new_texture(cx);
+            self.view
+                .rotated_image(ids!(rotated_image))
+                .set_texture(cx, Some(texture.clone()));
+            self.view.rotated_image(ids!(rotated_image)).redraw(cx);
+            self.view
+                .image(ids!(metadata_view.top_left_container.avatar.img_view.img))
+                .set_texture(cx, Some(texture));
+        }


is it actually necessary to clear the image texture? seems like wasted effort because the image texture will be set/replaced later anyway.

if you need to free the texture's memory, just do that. No need to create a new one and actually draw it.

Co-authored-by: Kevin Boos <[email protected]>

…into image_viewer#327

alanpoon added 4 commits July 10, 2025 11:45

move MEDIA_CACHE to global

e51b874

Merge branch 'main' into image_viewer#327

f323303

some testing

e1d2aaf

Merge branch 'main' into image_viewer#327

e4fe2c8

alanpoon self-assigned this Aug 6, 2025

changed default image

440bde3

alanpoon force-pushed the image_viewer#327 branch from 91bf416 to 440bde3 Compare August 11, 2025 01:10

alanpoon added the blocked-on-makepad Blocked on a Makepad bug or missing Makepad feature label Aug 11, 2025

alanpoon added 2 commits August 27, 2025 14:54

Merge branch 'main' into image_viewer#327

d029bbc

Image Viewer with zoom and pann

ddd04b9

alanpoon force-pushed the image_viewer#327 branch from 1b7875f to ddd04b9 Compare September 1, 2025 23:49

alanpoon added 6 commits September 2, 2025 07:54

fix spelling

d641657

simplify code for populate_image_modal

9fe9ddc

Deallocate image buffer

27ebbd7

Merge branch 'main' into image_viewer#327

92d78b3

remove default_image

de263cc

Merge branch 'main' into image_viewer#327

43137a1

kevinaboos added waiting-on-author This issue is waiting on the original author for a response and removed blocked-on-makepad Blocked on a Makepad bug or missing Makepad feature labels Oct 17, 2025

alanpoon added 4 commits October 18, 2025 21:54

Merge branch 'main' into image_viewer#327

03e4120

code improvement image_viewer

c9f2484

Merge branch 'main' into image_viewer#327

81cf00a

update makepad

ec774a0

alanpoon added waiting-on-review This issue is waiting to be reviewed and removed waiting-on-author This issue is waiting on the original author for a response labels Oct 19, 2025

kevinaboos requested changes Oct 19, 2025

View reviewed changes

alanpoon added the waiting-on-review This issue is waiting to be reviewed label Nov 13, 2025

code improvment

348b6c5

kevinaboos requested changes Nov 13, 2025

View reviewed changes

kevinaboos added waiting-on-author This issue is waiting on the original author for a response and removed waiting-on-review This issue is waiting to be reviewed labels Nov 13, 2025

alanpoon and others added 10 commits November 15, 2025 13:27

doc improvement

8ae8291

Co-authored-by: Kevin Boos <[email protected]>

improve doc in find_previous_profile_in_condensed_message

75a7ce1

avatar_ref

932036c

change to using avatar_placeholder

b24a3d1

doc fixed

1c66b16

media fetch param improvement

baf936a

Update src/shared/image_viewer.rs

69a2a7f

Co-authored-by: Kevin Boos <[email protected]>

added thiserror

e4f53c0

added this error

5648d1e

Merge branch 'image_viewer#327' of https://github.com/alanpoon/robrix …

378760a

…into image_viewer#327

alanpoon force-pushed the image_viewer#327 branch from 238c3e2 to 249a384 Compare November 17, 2025 12:58

removed rotation_animation duration

0c1fb66

alanpoon force-pushed the image_viewer#327 branch from 3f5eaca to 0c1fb66 Compare November 24, 2025 03:58

alanpoon added 2 commits November 24, 2025 15:09

empty_right_container_fixed.

555e883

Merge branch 'main' into image_viewer#327

7e4f899

alanpoon added waiting-on-review This issue is waiting to be reviewed and removed waiting-on-author This issue is waiting on the original author for a response labels Nov 25, 2025

		/// Extracts image name and size from an event timeline item.
		pub fn extract_image_info(event_tl_item: &EventTimelineItem) -> (String, i32) {

Add image viewer widget #565

Are you sure you want to change the base?

Add image viewer widget #565

Uh oh!

Conversation

alanpoon commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alanpoon commented Aug 11, 2025

Uh oh!

kevinaboos commented Oct 17, 2025

Uh oh!

alanpoon commented Oct 18, 2025

Uh oh!

alanpoon commented Oct 19, 2025

Uh oh!

kevinaboos left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kevinaboos left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

alanpoon commented Aug 6, 2025 •

edited

Loading