FlipBook: Image replacement and event handlers #15

OpaKnoppi · 2025-10-06T19:47:55Z

No description provided.

pgrit · 2025-10-22T07:52:49Z

SimpleImageIO/Image.cs

    }

+    /// <summary>
+    /// Calculates the absolute Difference from two equal-sized images with equal channel count


Suggested change

/// Calculates the absolute Difference from two equal-sized images with equal channel count

/// Calculates the absolute difference |a - b| of two equal-sized images with equal channel count

SimpleImageIO/FlipBook.cs

pgrit · 2025-10-22T08:09:06Z

SimpleImageIO/FlipBook.cs

+        if (String.IsNullOrEmpty(this.containerId))
+            this.containerId = id;


Why do you only store it the first time?

Seems like this could yield confusing behavior if the same flip book is generated multiple times.

pgrit · 2025-10-22T08:10:15Z

SimpleImageIO/FlipBook.cs

+
+        // string json = $$"""
+        // {
+        //     "width": {},
+        //     "height": {},
+        //     "containerId": "{}",
+        //     "initialZoom": {},
+        //     "initialTMO": {},
+        //     "initialTMOOverrides": [
+        //         {}
+        //     ],
+        //     "names": [{{string.Join(',', nameStrs.Select(n => $"\"{n}\""))}}],
+        //     "dataUrls": [{{string.Join(',', dataStrs.Select(n => $"\"{n}\""))}}],
+        //     "types": [{{string.Join(',', typeStrs.Select(n => $"\"{n}\""))}}],
+        //     "colorTheme": "{}",
+        //     "groupName": "{{groupName}}",
+        //     "hideTools": {}
+        // }
+        // """;


Suggested change

// string json = $$"""

// {

// "width": {},

// "height": {},

// "containerId": "{}",

// "initialZoom": {},

// "initialTMO": {},

// "initialTMOOverrides": [

// {}

// ],

// "names": [{{string.Join(',', nameStrs.Select(n => $"\"{n}\""))}}],

// "dataUrls": [{{string.Join(',', dataStrs.Select(n => $"\"{n}\""))}}],

// "types": [{{string.Join(',', typeStrs.Select(n => $"\"{n}\""))}}],

// "colorTheme": "{}",

// "groupName": "{{groupName}}",

// "hideTools": {}

// }

// """;

pgrit · 2025-10-22T08:47:00Z

FlipViewer/src/ImageContainer.tsx

+        var relX = event.nativeEvent.offsetX;: nativeEvent.
+        var relY = event.nativeEvent.offsetY;: nativeEvent.


what happened here?

pgrit · 2025-10-22T08:48:24Z

FlipViewer/src/ImageContainer.tsx

+            if (this.props.onWheel)
+            {
+                this.props.onWheel(event.deltaY);
+            }
+
+            return;


Not tested, but sounds like quite awkward UX to have ALT as a means to override the zoom behavior but also then forward this wheel event in the flip book context?

FlipViewer/src/flipviewer.ts

pgrit · 2025-10-22T08:53:03Z

FlipViewer/src/flipviewer.ts

+        tms[book.state.selectedIdx].setPixels(images[0] as (Float32Array<ArrayBufferLike>));
+    }
+
+    // flipBook.imageContainer.current.props.rawPixels[flipBook.state.selectedIdx] = images[0] as (Float32Array<ArrayBufferLike>); //TODO: maybe it doesnt work like that


…eImage() only really take Images instead of whole Tuple

…l scrolling so that user can add various number of custom actions keys on c# side

pgrit · 2025-12-23T12:08:54Z

FlipViewer/src/ImageContainer.tsx

 import { JSX } from 'react/jsx-runtime';

-export type OnClickHandler = (col: number, row: number, event: MouseEvent) => void
+export type OnClickHandler = (buttom: number) => void


Why is the OnClickHandler now only reporting the button, not the clicked pixel?

Because OnMouseOverHandler does that. C# stores the current pixel. In some situations, the mouse is not pressed (but only keys) and when I press keys for some actions on the c# side, I still have the current pixel coords.

This reverts commit 662d44d.

This reverts commit 7aa32e5.

…tself

…place magnifier around mouse (prettier)

…te Flipbooks

…state also on the js side)

FlipViewer/src/ImageContainer.tsx

pgrit · 2026-02-02T14:46:49Z

FlipViewer/src/ImageContainer.tsx

+export interface ListenerState {
+    /// Mouse state
+    mouseButtom: number;
+    mouseX: number;


Should document the coordinate system here: Relative to image? Screen space coordinates wrt the Container?

"top left of image" / "relative to image" still does not specify the units ;) Is it pixels of the image? Browser pixels? Sth else?

pgrit · 2026-02-04T12:33:15Z

FlipViewer/src/ImageContainer.tsx

+let magnifierResolution = 1;
+let flagXSwapped = false;
+let flagYSwapped = false;


This should be tracked in each container's individual state rather than globally.
Also, the swapping behaviour should probably reset to the default position when the mouse is clicked and only remain in the current state during move events.

pgrit · 2026-02-04T12:33:39Z

FlipViewer/src/ImageContainer.tsx

+let isAnyKeyPressed = false;
+export function setKeyPressed(value: boolean): void {
+    isAnyKeyPressed = value;
+}


Is it a good idea to track this as global state across all flip books?

pgrit · 2026-02-04T12:34:21Z

FlipViewer/src/ImageContainer.tsx

+export type OnClickHandler = (mouseButton: number, mouseX: number, mouseY: number, deltaY: number, ID: string, selectedIdx: number, keyPressed: string, isPressed: boolean) => void
+export type OnWheelHandler = (mouseButton: number, mouseX: number, mouseY: number, deltaY: number, ID: string, selectedIdx: number, keyPressed: string, isPressed: boolean) => void
+export type OnMouseOverHandler = (mouseButton: number, mouseX: number, mouseY: number, deltaY: number, ID: string, selectedIdx: number, keyPressed: string, isPressed: boolean) => void
+export type OnKeyHandler = (mouseButton: number, mouseX: number, mouseY: number, deltaY: number, ID: string, selectedIdx: number, keyPressed: string, isPressed: boolean) => void


Does it make sense to send deltaY (I assume that is the mouse wheel motion?) for non-wheel events?

And why do the click handlers now also report key event data?

pgrit · 2026-02-04T12:36:23Z

FlipViewer/src/ImageContainer.tsx

+
+// Listener state that is forwared
+export interface ListenerState {
+    /// Mouse state


Not really an informative comment. State of what exactly? What is the meaning of the value? How does a single number describe the state of your mouse?

pgrit · 2026-02-04T12:37:29Z

FlipViewer/src/ImageContainer.tsx

+    /// Key state (Handled by the Flipbook.tsx)
+    // ID of the Flipbook
+    ID: string;
+    // Which image is selected in a Flipbook
+    selectedIdx: number;
+    // Key pressed
+    keyPressed: string;
+    isPressed: boolean;


Logic here is unclear to me. Do you only track a single key at a time? What happens if multiple keys are pressed simultaneously?

template changes

28aa481

pgrit requested changes Oct 22, 2025

View reviewed changes

OpaKnoppi added 8 commits November 23, 2025 14:41

Flipbook key is now a string instead of a int[], getImage() and Updat…

47f2992

…eImage() only really take Images instead of whole Tuple

changed key from int[] to string in flipviewer ts files

0a4bc3c

combine new UpdateImage() with Generate() method

d281ab9

set zoom on Alt, set crop on shift, any keyPress disables default htm…

7eb0b83

…l scrolling so that user can add various number of custom actions keys on c# side

reset update interval, fixed image update w/o awaits

a92eab2

added comments, clean up

7927409

removed old comments, set zoom to be ctrl+wheel

cc9b9fd

fixed magifier disappearing, but not sure for jupyter

7aa32e5

pgrit reviewed Dec 23, 2025

View reviewed changes

pgrit and others added 7 commits December 23, 2025 13:11

tweak script for dev build

393c52f

fixed magnifier while zooming

662d44d

merge error - hope everthing is fine...

c7771ba

move abs error computation to where it belongs

a62e699

clean up

3b4fd9a

Revert "fixed magnifier while zooming"

d88ba8e

This reverts commit 662d44d.

Revert "fixed magifier disappearing, but not sure for jupyter"

984aac2

This reverts commit 7aa32e5.

pgrit changed the title ~~template changes~~ FlipBook: Image replacement and event handlers Jan 15, 2026

pgrit and others added 11 commits January 15, 2026 16:44

cleaning

6c27dd1

changed Magnifier to find best position within Flipbook borders for i…

ead8988

…tself

renamed Key to ID for the dictionaries

162f0e2

changed resolution of magnifier, changed decision making of where to …

e2d4d49

…place magnifier around mouse (prettier)

changed onKeyIC to onKeyImageContainer

4060249

changed comment to trigger callbacks. Other languages also can genera…

b86c0b2

…te Flipbooks

change comment. Not only c# will be supported

8e75dd4

removed code duplication

60970f2

simplified code

ea81e0b

changed listeners to send complete listener state (and keep track of …

b10bb6c

…state also on the js side)

clean up Flipbook.tsx

bb7b419

OpaKnoppi added 2 commits January 31, 2026 23:50

clean up Flipviewer.ts

6e59f30

clean up

c442afb

pgrit reviewed Feb 2, 2026

View reviewed changes

FlipViewer/src/ImageContainer.tsx Outdated Show resolved Hide resolved

pgrit reviewed Feb 2, 2026

View reviewed changes

removed typo, added comment for XY Coords of Mouse in StateListener

d4484e5

pgrit reviewed Feb 4, 2026

View reviewed changes

	/// Calculates the absolute Difference from two equal-sized images with equal channel count
	/// Calculates the absolute difference \|a - b\| of two equal-sized images with equal channel count

		if (String.IsNullOrEmpty(this.containerId))
		this.containerId = id;

		var relX = event.nativeEvent.offsetX;: nativeEvent.
		var relY = event.nativeEvent.offsetY;: nativeEvent.

FlipBook: Image replacement and event handlers #15

Are you sure you want to change the base?

FlipBook: Image replacement and event handlers #15

Uh oh!

Conversation

OpaKnoppi commented Oct 6, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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!

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!

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