diff --git a/FlipViewer/src/FlipBook.tsx b/FlipViewer/src/FlipBook.tsx
index 18ee920..9afe9a9 100644
--- a/FlipViewer/src/FlipBook.tsx
+++ b/FlipViewer/src/FlipBook.tsx
@@ -2,7 +2,7 @@ import { createRoot } from 'react-dom/client';
 import styles from './styles.module.css';
 import React, { createRef } from 'react';
 import { renderImage } from "./Render";
-import { ImageContainer, OnClickHandler } from './ImageContainer';
+import { ImageContainer, OnClickHandler, OnWheelHandler, OnMouseOverHandler, ImageContainerState, OnKeyHandler, setKeyPressed } from './ImageContainer';
 import { ToneMapControls } from './ToneMapControls';
 import { MethodList } from './MethodList';
 import { Tools } from './Tools';
@@ -11,9 +11,35 @@ import { ToneMapSettings, ZoomLevel } from './flipviewer';
 
 const UPDATE_INTERVAL_MS = 100;
 
+// Registry to update flipbooks -------------
+export type BookRef = React.RefObject<FlipBook>;
+const registry = new Map<string, Set<BookRef>>();
+
+export function getBooks(key: string): BookRef[] {
+    return Array.from(registry.get(key) ?? new Set());
+}
+export function registerBook(key: string, ref: BookRef) {
+    if (!key) return;
+    const set = registry.get(key) ?? new Set<BookRef>();
+    set.add(ref);
+    registry.set(key, set);
+}
+export function unregisterBook(key: string, ref: BookRef) {
+    const set = registry.get(key);
+    if (!set) return;
+    set.delete(ref);
+    if (set.size === 0) registry.delete(key);
+}
+// ---------------------------------------------------------------
+
+// to get only key presses and not is down state
+// Idea is to only fire events if state of key changes
+const keyPressed = new Set<string>();
+
 export class ToneMappingImage {
     currentTMO: string;
     dirty: boolean;
+    isPixelUpdate: boolean;
     canvas: HTMLCanvasElement;
     pixels: Float32Array | ImageData;
 
@@ -25,9 +51,10 @@ export class ToneMappingImage {
 
         let hdrImg = this;
         setInterval(function() {
-            if (!hdrImg.dirty) return;
-            hdrImg.dirty = false;
+            if (!hdrImg.dirty || hdrImg.isPixelUpdate)
+                return;
             renderImage(hdrImg.canvas, hdrImg.pixels, hdrImg.currentTMO);
+            hdrImg.dirty = false;
             onAfterRender();
         }, UPDATE_INTERVAL_MS)
     }
@@ -35,16 +62,46 @@ export class ToneMappingImage {
         this.currentTMO = tmo;
         this.dirty = true;
     }
+    setPixels(p: Float32Array | ImageData) {
+        this.isPixelUpdate = true;
+        this.pixels = p;
+        this.dirty = false;
+        renderImage(this.canvas, this.pixels, this.currentTMO);
+        this.isPixelUpdate = false;
+    }
 }
 
+
 type SelectUpdateFn = (groupName: string, newIdx: number) => void;
 var selectUpdateListeners: SelectUpdateFn[] = [];
 
+
+type TMOUpdateFn = (groupName: string, newTMOSettings: ToneMapSettings) => void;
+var tmoUpdateListeners: TMOUpdateFn[] = [];
+
+type imageConStateUpdateFn = (groupName: string, newImgConState: ImageContainerState) => void;
+var imgConStateUpdateListeners: imageConStateUpdateFn[] = [];
+
 export function SetGroupIndex(groupName: string, newIdx: number) {
     for (let fn of selectUpdateListeners)
         fn(groupName, newIdx);
 }
 
+
+export function SetGroupTMOSettings(groupName: string, newTMOSettings: ToneMapSettings)
+{
+    for (let fn of tmoUpdateListeners)
+        fn(groupName, newTMOSettings);
+}
+
+
+export function SetGroupImageContainerSettings(groupName: string, newImgConState: ImageContainerState)
+{
+    for (let fn of imgConStateUpdateListeners)
+        fn(groupName, newImgConState);
+}
+
+
 export interface FlipProps {
     names: string[];
     width: number;
@@ -57,11 +114,15 @@ export interface FlipProps {
     initialTMOOverrides: ToneMapSettings[];
     style?: React.CSSProperties;
     onClick?: OnClickHandler;
+    onWheel?: OnWheelHandler;
+    onMouseOver?: OnMouseOverHandler;
+    onKeyIC?: OnKeyHandler;
     groupName?: string;
     hideTools: boolean;
+    keyStr: string;
 }
 
-interface FlipState {
+export interface FlipState {
     selectedIdx: number;
     popupContent?: React.ReactNode;
     popupDurationMs?: number;
@@ -75,6 +136,7 @@ export class FlipBook extends React.Component<FlipProps, FlipState> {
 
     constructor(props : FlipProps) {
         super(props);
+
         this.state = {
             selectedIdx: 0,
             hideTools: props.hideTools
@@ -85,10 +147,35 @@ export class FlipBook extends React.Component<FlipProps, FlipState> {
         this.tools = createRef();
 
         this.onKeyDown = this.onKeyDown.bind(this);
+        this.onKeyUp = this.onKeyUp.bind(this);
         this.onSelectUpdate = this.onSelectUpdate.bind(this);
+        this.onTMOUpdate = this.onTMOUpdate.bind(this);
+    }
+
+    onKeyUp(evt: React.KeyboardEvent<HTMLDivElement>) {
+        // c# listener
+        if(this.props.onKeyIC && keyPressed.has(evt.key))
+        {            
+            keyPressed.delete(evt.key);
+            evt.preventDefault();
+            
+            if(keyPressed.size == 0)
+                setKeyPressed(false);
+
+            this.props.onKeyIC(this.state.selectedIdx, this.props.keyStr, evt.key, false);
+        }
     }
 
     onKeyDown(evt: React.KeyboardEvent<HTMLDivElement>) {
+        // c# listener
+        if(this.props.onKeyIC && !keyPressed.has(evt.key))
+        {
+            keyPressed.add(evt.key);
+            evt.preventDefault();
+            setKeyPressed(true);
+            this.props.onKeyIC(this.state.selectedIdx, this.props.keyStr, evt.key, true);
+        }
+
         let newIdx = this.state.selectedIdx;
         if (evt.key === "ArrowLeft" || evt.key === "ArrowDown") {
             newIdx = this.state.selectedIdx - 1;
@@ -138,7 +225,13 @@ export class FlipBook extends React.Component<FlipProps, FlipState> {
             evt.stopPropagation();
         }
 
-        if (evt.key === "r") {
+        if (evt.ctrlKey && evt.key === 'r') {
+            this.tmoCtrls.current.state.globalSettings.exposure = 0;
+            evt.stopPropagation();
+            evt.preventDefault();
+        }
+
+        if (!evt.ctrlKey && evt.key === "r") {
             this.reset();
             evt.stopPropagation();
         }
@@ -147,6 +240,9 @@ export class FlipBook extends React.Component<FlipProps, FlipState> {
             this.setState({hideTools: !this.state.hideTools});
             evt.stopPropagation();
         }
+
+        
+        this.updateTMOSettings(this.tmoCtrls.current.state.globalSettings);
     }
 
     reset() {
@@ -236,6 +332,13 @@ export class FlipBook extends React.Component<FlipProps, FlipState> {
         else this.setState({selectedIdx: newIdx});
     }
 
+    
+    updateTMOSettings(newTMOSettings: ToneMapSettings){
+        if (this.props.groupName) SetGroupTMOSettings(this.props.groupName, newTMOSettings);
+        else this.tmoCtrls.current.applySettings(newTMOSettings);
+
+    }
+
     render(): React.ReactNode {
         let popup = null;
         if (this.state.popupContent) {
@@ -249,7 +352,7 @@ export class FlipBook extends React.Component<FlipProps, FlipState> {
         }
 
         return (
-            <div className={styles['flipbook']} style={this.props.style} onKeyDown={this.onKeyDown}>
+            <div className={styles['flipbook']} style={this.props.style} onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp}>
                 <div style={{display: "contents"}}>
                     <MethodList
                         names={this.props.names}
@@ -265,6 +368,9 @@ export class FlipBook extends React.Component<FlipProps, FlipState> {
                         selectedIdx={this.state.selectedIdx}
                         onZoom={(zoom) => this.tools.current.onZoom(zoom)}
                         onClick={this.props.onClick}
+                        onWheel={this.props.onWheel}
+                        onMouseOver={this.props.onMouseOver}
+                        onStateChange={(st) => this.onImageContainerUpdate(st)}
                     >
                         {popup}
                         <button className={styles.toolsBtn}
@@ -302,16 +408,69 @@ export class FlipBook extends React.Component<FlipProps, FlipState> {
         }
     }
 
+    
+    onTMOUpdate(groupName: string, newTMOSettings: ToneMapSettings) {
+        if (groupName == this.props.groupName) {
+            this.tmoCtrls.current.applySettings(newTMOSettings);
+        }
+    }
+
+    
+    // is called when onStateIsChanged in ImageContainer is called
+    // everytime when the ImageContainerState changes (pos, zoom, etc.)
+    // calls onImageContainerGroupUpdate = ()
+    onImageContainerUpdate(newImageContainerState: ImageContainerState) {
+        if (this.props.groupName) {
+            SetGroupImageContainerSettings(this.props.groupName, newImageContainerState); 
+        }
+    }
+
+    
+    // is called when other flipbook's ImageContainerStates changes
+    onImageContainerGroupUpdate = (groupName: string, newImageContainerState: ImageContainerState) => {
+        if (groupName === this.props.groupName && this.imageContainer.current) {
+            this.imageContainer.current.setState({
+                posX: newImageContainerState.posX,
+                posY: newImageContainerState.posY,
+                scale: newImageContainerState.scale,
+
+                magnifierX: newImageContainerState.magnifierX,
+                magnifierY: newImageContainerState.magnifierY,
+                magnifierVisible: newImageContainerState.magnifierVisible,
+                magnifierRow: newImageContainerState.magnifierRow,
+                magnifierCol: newImageContainerState.magnifierCol,
+
+                cropX: newImageContainerState.cropX,
+                cropY: newImageContainerState.cropY,
+                cropWidth: newImageContainerState.cropWidth,
+                cropHeight: newImageContainerState.cropHeight,
+                cropActive: newImageContainerState.cropActive,
+                cropDragging: newImageContainerState.cropDragging,
+                cropMeans: newImageContainerState.cropMeans
+            });
+        }
+    }
+
     componentDidMount(): void {
         if (this.props.initialZoom)
             this.imageContainer.current.setZoom(this.props.initialZoom);
 
         selectUpdateListeners.push(this.onSelectUpdate);
+        tmoUpdateListeners.push(this.onTMOUpdate);
+        imgConStateUpdateListeners.push(this.onImageContainerGroupUpdate);
     }
 
     componentWillUnmount(): void {
         let idx = selectUpdateListeners.findIndex(v => v === this.onSelectUpdate);
         selectUpdateListeners.splice(idx, 1);
+
+        
+        idx = tmoUpdateListeners.findIndex(v => v === this.onTMOUpdate);
+        tmoUpdateListeners.splice(idx, 1);
+
+        
+        idx = imgConStateUpdateListeners.findIndex(v => v === this.onImageContainerGroupUpdate);
+        imgConStateUpdateListeners.splice(idx, 1);
     }
 
     connect(other: React.RefObject<FlipBook>) {
@@ -381,8 +540,14 @@ export type FlipBookParams = {
     initialTMO: ToneMapSettings,
     initialTMOOverrides: ToneMapSettings[],
     onClick?: OnClickHandler,
+    onWheel?: OnWheelHandler, 
+    onMouseOver?: OnMouseOverHandler, 
+    onKeyIC?: OnKeyHandler, 
+    // onKeyUpIC?: OnKeyUpHandler, 
     colorTheme?: string,
     hideTools: boolean,
+    containerId: string,
+    key: string,
 }
 
 export function AddFlipBook(params: FlipBookParams, groupName?: string) {
@@ -415,8 +580,10 @@ export function AddFlipBook(params: FlipBookParams, groupName?: string) {
     let themeStyle = colorThemes[params.colorTheme ?? "dark"];
 
     const root = createRoot(params.parentElement);
+    const bookRef = createRef<FlipBook>();
     root.render(
         <FlipBook
+            ref={bookRef}
             names={params.names}
             width={params.width}
             height={params.height}
@@ -427,14 +594,23 @@ export function AddFlipBook(params: FlipBookParams, groupName?: string) {
             initialTMO={params.initialTMO}
             initialTMOOverrides={params.initialTMOOverrides}
             onClick={params.onClick}
+            onWheel={params.onWheel} 
+            onMouseOver={params.onMouseOver} 
+            onKeyIC={params.onKeyIC} 
+            // onKeyUpIC={params.onKeyUpIC} 
             style={themeStyle}
             groupName={groupName}
             hideTools={params.hideTools}
+            keyStr={params.key}
         />
     );
 
+    if(params.key)
+        registerBook(params.key, bookRef);
+
     new MutationObserver(_ => {
         if (!document.body.contains(params.parentElement)) {
+            unregisterBook(params.key, bookRef);
             root.unmount();
         }
     }).observe(document.body, {childList: true, subtree: true});
diff --git a/FlipViewer/src/ImageContainer.tsx b/FlipViewer/src/ImageContainer.tsx
index bcb7503..7da32ba 100644
--- a/FlipViewer/src/ImageContainer.tsx
+++ b/FlipViewer/src/ImageContainer.tsx
@@ -5,7 +5,16 @@ import { Magnifier, formatNumber } from './Magnifier';
 import { ZoomLevel } from './flipviewer';
 import { JSX } from 'react/jsx-runtime';
 
-export type OnClickHandler = (col: number, row: number, event: MouseEvent) => void
+export type OnClickHandler = (buttom: number) => void
+export type OnWheelHandler = (deltaY: number) => void
+export type OnMouseOverHandler = (col: number, row: number) => void
+export type OnKeyHandler = (selectedIdx: number, keyStr: string, keyPressed: string, isPressedDown: boolean) => void
+// export type OnKeyUpHandler = (selectedIdx: number, keyStr: string, keyReleased: string, isPressedDown: boolean) => void
+
+let isAnyKeyPressed = false;
+export function setKeyPressed(value: boolean): void {
+    isAnyKeyPressed = value;
+}
 
 export interface ImageContainerProps {
     width: number;
@@ -15,11 +24,14 @@ export interface ImageContainerProps {
     selectedIdx: number;
     onZoom: (zoom: number) => void;
     onClick?: OnClickHandler;
+    onWheel?: OnWheelHandler;
+    onMouseOver?: OnMouseOverHandler;
     children: React.ReactNode;
     means: number[];
+    onStateChange?: (state: ImageContainerState) => void;
 }
 
-interface ImageContainerState {
+export interface ImageContainerState { 
     posX: number;
     posY: number;
     scale: number;
@@ -71,16 +83,20 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
         this.onMouseOutOverImage = this.onMouseOutOverImage.bind(this);
         this.onWheel = this.onWheel.bind(this);
         this.onClick = this.onClick.bind(this);
+
+        this.props.onStateChange?.(this.state); 
     }
 
     shiftImage(dx: number, dy: number) {
         this.setState({
             posX: this.state.posX + dx,
             posY: this.state.posY + dy
+        }, () => { 
+            this.props.onStateChange?.(this.state); // callback
         });
     }
 
-    offset(event: React.MouseEvent) {
+    offset(event: React.MouseEvent | WheelEvent) {
         let bounds = this.imgPlacer.current.getBoundingClientRect();
         let x = event.clientX - bounds.left;
         let y = event.clientY - bounds.top;
@@ -95,7 +111,9 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
 
         if ((event.buttons & 2) == 0)
         {
-            this.setState({magnifierVisible: false});
+            this.setState({magnifierVisible: false}, () => { 
+            this.props.onStateChange?.(this.state); // callback
+        });
             return;
         }
 
@@ -105,11 +123,17 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
             magnifierY: xy.y + magnifierPadding,
             magnifierCol: curPixelCol,
             magnifierRow: curPixelRow
+        }, () => { 
+            this.props.onStateChange?.(this.state); // callback
         });
     }
 
     onMouseOutOverImage(event: React.MouseEvent<HTMLDivElement>) {
-        this.setState({magnifierVisible: false});
+        this.setState({magnifierVisible: false}, 
+            () => { 
+                this.props.onStateChange?.(this.state); // callback
+            }
+        );
     }
 
     computeCropMeans() {
@@ -159,7 +183,9 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
             means.push(m);
         }
 
-        this.setState({cropMeans: means});
+        this.setState({cropMeans: means}, () => { 
+            this.props.onStateChange?.(this.state); // callback
+        });
     }
 
     onClick(event: React.MouseEvent<HTMLDivElement>) {
@@ -171,19 +197,23 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
 
         if (this.props.onClick)
         {
-            this.props.onClick(curPixelCol, curPixelRow, event.nativeEvent);
+            this.props.onClick(event.button);
         }
 
         // Confirm or remove the crop box
-        if (event.ctrlKey && this.state.cropActive) {
+        if (event.shiftKey && this.state.cropActive) {
             if (this.state.cropWidth === 0 || this.state.cropHeight === 0 || !this.state.cropDragging) {
                 this.setState({
                     cropActive: false,
                     cropDragging: false,
+                }, () => { 
+                    this.props.onStateChange?.(this.state); // callback
                 });
             } else {
                 this.setState({
                     cropDragging: false
+                }, () => { 
+                    this.props.onStateChange?.(this.state); // callback
                 });
                 this.computeCropMeans();
             }
@@ -191,9 +221,20 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
     }
 
     onMouseMove(event: React.MouseEvent<HTMLDivElement>) {
+        // Mouse event listener for c# side
+        let xy = this.offset(event);
+        let curPixelCol = Math.floor(xy.x / this.state.scale);
+        let curPixelRow = Math.floor(xy.y / this.state.scale);
+        curPixelCol = Math.min(Math.max(curPixelCol, 0), this.props.width - 1);
+        curPixelRow = Math.min(Math.max(curPixelRow, 0), this.props.height - 1);
+        if (this.props.onMouseOver)
+        {
+            this.props.onMouseOver(curPixelCol, curPixelRow);
+        }
+
         // If left mouse button down
         if ((event.buttons & 1) == 1) {
-            if (event.ctrlKey) {
+            if (event.shiftKey) {
                 let xy = this.offset(event);
                 let curPixelCol = Math.floor(xy.x / this.state.scale);
                 let curPixelRow = Math.floor(xy.y / this.state.scale);
@@ -204,6 +245,8 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
                     this.setState({
                         cropHeight: curPixelRow - this.state.cropY,
                         cropWidth: curPixelCol - this.state.cropX,
+                    }, () => { 
+                        this.props.onStateChange?.(this.state); // callback
                     });
                 } else {
                     this.setState({
@@ -213,6 +256,8 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
                         cropY: curPixelRow,
                         cropHeight: 0,
                         cropWidth: 0,
+                    }, () => { 
+                        this.props.onStateChange?.(this.state); // callback
                     });
                 }
             } else {
@@ -221,55 +266,72 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
         }
     }
 
-    onWheel(event: WheelEvent) {
-        if (event.altKey) return; // holding alt allows to scroll over the image
-
-        const ScrollSpeed = 0.25;
-        const MaxScale = 100;
-        const MinScale = 0.05;
-
-        const oldScale = this.state.scale;
-        const scale = oldScale * (1 - Math.sign(event.deltaY) * ScrollSpeed);
-        const factor = scale / oldScale;
-
-        if (scale > MaxScale || scale < MinScale) return;
-
-        // Adjust the position of the top left corner, so we get a scale pivot at the mouse cursor.
-        var relX = event.offsetX;
-        var relY = event.offsetY;
+    // Native Browser WheelEvent
+    // while wheeling over flipbook, website scroll is disabled
+    onWheelNative(event: WheelEvent)
+    {
+        if(event.ctrlKey || isAnyKeyPressed)
+            event.preventDefault();
+    }
 
-        if (event.target === this.container.current) {
-            // Map position outside the image to a hypothetical pixel position
-            relX -= this.state.posX;
-            relY -= this.state.posY;
-        } else if (event.target === this.cropMarker.current) {
-            // Map position wihtin the crop marker to the image position
-            relX += this.state.cropX * oldScale;
-            relY += this.state.cropY * oldScale;
+    onWheel(event: React.WheelEvent<HTMLDivElement>) {
+        if(event.ctrlKey)
+        {
+            const ScrollSpeed = 0.25;
+            const MaxScale = 100;
+            const MinScale = 0.05;
+            
+            const oldScale = this.state.scale;
+            const scale = oldScale * (1 - Math.sign(event.deltaY) * ScrollSpeed);
+            const factor = scale / oldScale;
+            
+            if (scale > MaxScale || scale < MinScale) return;
+            
+            // Adjust the position of the top left corner, so we get a scale pivot at the mouse cursor.
+            var relX = event.nativeEvent.offsetX;
+            var relY = event.nativeEvent.offsetY;
+            
+            if (event.target === this.container.current) {
+                // Map position outside the image to a hypothetical pixel position
+                relX -= this.state.posX;
+                relY -= this.state.posY;
+            } else if (event.target === this.cropMarker.current) {
+                // Map position wihtin the crop marker to the image position
+                relX += this.state.cropX * oldScale;
+                relY += this.state.cropY * oldScale;
+            }
+        
+            var deltaX = (1 - factor) * relX;
+            var deltaY = (1 - factor) * relY;
+        
+            let bounds = this.imgPlacer.current.getBoundingClientRect();
+            let x = event.clientX - bounds.left;
+            let y = event.clientY - bounds.top;
+        
+            this.shiftImage(deltaX, deltaY);
+            this.setState({
+                scale: scale,
+                magnifierX: x + magnifierPadding - deltaX,
+                magnifierY: y + magnifierPadding - deltaY,
+            }, () => { 
+                this.props.onStateChange?.(this.state); // callback
+            });
+        
+            // event.stopPropagation();
+        
+            // keep the manual input in sync
+            this.props.onZoom(this.state.scale * window.devicePixelRatio);
+        }
+        else if (this.props.onWheel)
+        {
+            this.props.onWheel(event.deltaY);
         }
-
-        var deltaX = (1 - factor) * relX;
-        var deltaY = (1 - factor) * relY;
-
-        let bounds = this.imgPlacer.current.getBoundingClientRect();
-        let x = event.clientX - bounds.left;
-        let y = event.clientY - bounds.top;
-
-        this.shiftImage(deltaX, deltaY);
-        this.setState({
-            scale: scale,
-            magnifierX: x + magnifierPadding - deltaX,
-            magnifierY: y + magnifierPadding - deltaY,
-        });
-
-        event.preventDefault();
-
-        // keep the manual input in sync
-        this.props.onZoom(this.state.scale * window.devicePixelRatio);
     }
 
     centerView() {
-        this.setState({posX: 0, posY: 0});
+        this.setState({posX: 0, posY: 0}, () => { 
+            this.props.onStateChange?.(this.state); // callback
+        });
     }
 
     setZoom(zoom: ZoomLevel) {
@@ -285,7 +347,9 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
                 // number of _device_ pixels used as the image contains
                 scale = (zoom as number) / window.devicePixelRatio;
         }
-        this.setState({scale: scale});
+        this.setState({scale: scale}, () => { 
+            this.props.onStateChange?.(this.state); // callback
+        });
         this.centerView();
         this.props.onZoom(scale * window.devicePixelRatio);
     }
@@ -372,6 +436,7 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
                     onMouseOut={this.onMouseOutOverImage}
                     onMouseDown={this.onMouseMoveOverImage}
                     onClick={this.onClick}
+                    onWheel={this.onWheel}
                 >
                     {canvases}
                     {magnifier}
@@ -394,10 +459,10 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
             this.props.toneMappers[i] = new ToneMappingImage(img, canvas, () => { });
         }
 
-        this.container.current.addEventListener('wheel', this.onWheel, { passive: false })
+        this.container.current.addEventListener('wheel', this.onWheelNative, { passive: false })
     }
 
     componentWillUnmount(): void {
-        this.container.current.removeEventListener('wheel', this.onWheel)
+        this.container.current.removeEventListener('wheel', this.onWheelNative)
     }
 }
diff --git a/FlipViewer/src/Popup.tsx b/FlipViewer/src/Popup.tsx
index 75eb439..8d53ea2 100644
--- a/FlipViewer/src/Popup.tsx
+++ b/FlipViewer/src/Popup.tsx
@@ -17,7 +17,7 @@ export class Popup extends React.Component<PopupProps, PopupState> {
 
     render(): React.ReactNode {
         return (
-            <div className={styles.popup} onClick={this.props.unmount}>
+            <div className={styles.popup} onClick={this.props.unmount} onWheel={this.props.unmount}>
                 {this.props.children}
             </div>
         );
diff --git a/FlipViewer/src/ToneMapControls.tsx b/FlipViewer/src/ToneMapControls.tsx
index a86a3d6..5acee2a 100644
--- a/FlipViewer/src/ToneMapControls.tsx
+++ b/FlipViewer/src/ToneMapControls.tsx
@@ -92,6 +92,10 @@ export class ToneMapControls extends React.Component<ToneMapControlsProps, ToneM
         }
     }
 
+    public applySettings(settings: ToneMapSettings) {
+        this.setState({ globalSettings: settings }, () => this.apply());
+    } 
+
     stepExposure(reduce: boolean) {
         let state = this.state.globalSettings;
         if (this.state.soloMode[this.props.selectedIdx])
diff --git a/FlipViewer/src/flipviewer.ts b/FlipViewer/src/flipviewer.ts
index 77f2912..670f64e 100644
--- a/FlipViewer/src/flipviewer.ts
+++ b/FlipViewer/src/flipviewer.ts
@@ -1,5 +1,5 @@
-import { AddFlipBook, SetGroupIndex } from "./FlipBook";
-import { OnClickHandler } from "./ImageContainer";
+import { AddFlipBook, getBooks, SetGroupIndex } from "./FlipBook";
+import { OnClickHandler, OnKeyHandler, OnMouseOverHandler, OnWheelHandler } from "./ImageContainer";
 
 async function readRGBE(url: string) {
     const response = await fetch(url);
@@ -78,6 +78,7 @@ export type FlipData = {
     initialTMO: ToneMapSettings;
     initialTMOOverrides: ToneMapSettings[]
     containerId: string;
+    key: string;
     colorTheme?: string;
     groupName?: string;
     hideTools: boolean;
@@ -105,7 +106,7 @@ function AsFlipData(data: FlipData | string): FlipData {
         return data;
 }
 
-export async function MakeFlipBook(data: FlipData | string, onClick?: OnClickHandler) {
+export async function MakeFlipBook(data: FlipData | string, onClick?: OnClickHandler, onWheel?: OnWheelHandler, onMouseOver?: OnMouseOverHandler, onKey?: OnKeyHandler/*, onKeyUp?: OnKeyUpHandler*/) {
     data = AsFlipData(data);
 
     let work: Promise<Float32Array | HTMLImageElement>[] = [];
@@ -121,7 +122,7 @@ export async function MakeFlipBook(data: FlipData | string, onClick?: OnClickHan
         }
         work.push(loadFn(data.dataUrls[i]));
     }
-
+    
     let values = await Promise.all(work);
     return AddFlipBook({
         parentElement: document.getElementById(data.containerId),
@@ -133,11 +134,48 @@ export async function MakeFlipBook(data: FlipData | string, onClick?: OnClickHan
         initialTMO: data.initialTMO,
         initialTMOOverrides: data.initialTMOOverrides,
         onClick: onClick,
+        onWheel: onWheel,
+        onMouseOver: onMouseOver,
+        onKeyIC: onKey,
         colorTheme: data.colorTheme,
         hideTools: data.hideTools,
+        containerId: data.containerId,
+        key: data.key,
     }, data.groupName);
 }
 
+export async function UpdateImage(data: FlipData | string) {
+    data = AsFlipData(data);
+
+    // get updated Image
+    let work: Promise<Float32Array | HTMLImageElement>[] = [];
+    for (let i = 0; i < data.dataUrls.length; ++i) {
+        let loadFn;
+        switch (data.types[i]) {
+            case ImageType.Single: loadFn = readFloat; break;
+            case ImageType.Half: loadFn = readHalf; break;
+            case ImageType.Rgbe: loadFn = readRGBE; break;
+            case ImageType.Ldr: loadFn = readLDR; break;
+            case ImageType.Float32Array: loadFn = (data: Float32Array) => data; break;
+            default: console.error(`unsupported type: ${data.types[i]}`);
+        }
+        work.push(loadFn(data.dataUrls[i]));
+    }
+    let images = await Promise.all(work);
+
+    // iterate over all registered flipbooks
+    // update image of flipbooks with groupname data.groupname
+    for(const ref of getBooks(data.key)) {
+        const book = ref.current;
+        
+        if(!book)
+            continue;
+
+        const tms = book.props.toneMappers;
+        tms[book.state.selectedIdx].setPixels(images[0] as (Float32Array<ArrayBufferLike>));
+    }
+}
+
 export function UpdateFlipGroupSelection(groupName: string, newIdx: number) {
     SetGroupIndex(groupName, newIdx);
 }
\ No newline at end of file
diff --git a/SimpleImageIO/FlipBook.cs b/SimpleImageIO/FlipBook.cs
index 426beeb..4270a33 100644
--- a/SimpleImageIO/FlipBook.cs
+++ b/SimpleImageIO/FlipBook.cs
@@ -210,6 +210,17 @@ public static string HeaderScript
     string theme;
     string groupName;
     bool hideTools;
+    string containerId = null;
+    string key = null;
+
+    /// <summary>
+    /// Returns a image from the list images
+    /// </summary>
+    /// <param name="index"></param>
+    /// <returns></returns>
+    public Image GetImage(int index) {
+        return images[index].Image;
+    }
 
     /// <summary>
     /// Syntactic sugar to create a new object of this class. Makes the fluent API more readable.
@@ -281,6 +292,24 @@ public FlipBook SetToolVisibility(bool visible) {
         return this;
     }
 
+    /// <summary>
+    /// Sets the key of this flipbook to keep track on the react side of all flipbooks
+    /// Same thing as a group name but this key can decide which flipbook of a group fired a listener to the c# side
+    /// </summary>
+    /// <param name="key">Key for the dictionary on React side</param>
+    public FlipBook SetKey(string key) {
+        this.key = key;
+        return this;
+    }
+
+    /// <summary>
+    /// Returns the key. 
+    /// </summary>
+    /// <returns></returns>
+    public string GetKey() {
+        return this.key;
+    }
+
     /// <summary>
     /// Adds a new image to this flip book.
     /// </summary>
@@ -289,8 +318,7 @@ public FlipBook SetToolVisibility(bool visible) {
     /// <param name="targetType">Data type to use for this image's pixels</param>
     /// <param name="tmoOverride">If not null, this image will use its own tone mapping settings</param>
     /// <returns>This object (fluent API)</returns>
-    public FlipBook Add(string name, Image image, DataType targetType = DataType.RGBE, InitialTMO tmoOverride = null)
-    {
+    public FlipBook Add(string name, Image image, DataType targetType = DataType.RGBE, InitialTMO tmoOverride = null) {
         if (images.Count > 0 && (images[0].Image.Width != image.Width || images[0].Image.Height != image.Height))
             throw new ArgumentException("Image resolution does not match", nameof(image));
         images.Add((name, image, targetType, tmoOverride));
@@ -366,8 +394,10 @@ public override string ToString() {
 
     /// <summary>
     /// Generates the HTML and JS for the flip book and returns them separately.
+    /// If index == -1 -> generates all images of current flipbook
+    /// If index != -1 -> generates only updated image from experiment
     /// </summary>
-    public GeneratedCode Generate() {
+    public GeneratedCode Generate(int index = -1) {
         if (images.Count == 0)
             throw new InvalidOperationException("No images in the flip book");
 
@@ -376,8 +406,13 @@ public GeneratedCode Generate() {
         List<string> nameStrs = new();
         int width = images[0].Image.Width;
         int height = images[0].Image.Height;
-        foreach (var img in images)
+        for (int i = 0; i < images.Count; i++)
         {
+            if(index != -1 && index != i)
+                continue;
+
+            var img = images[i];
+
             if (width != img.Image.Width || height != img.Image.Height)
                 throw new InvalidOperationException("Image resolutions differ");
 
@@ -404,8 +439,10 @@ public GeneratedCode Generate() {
             nameStrs.Add(img.Name);
         }
 
-        string id = "flipbook-" + Guid.NewGuid().ToString();
-        string html = $"<div id='{id}' style='width:{htmlWidth}px; height:{htmlHeight}px; resize: both; overflow: auto;'></div>";
+        if (String.IsNullOrEmpty(this.containerId))
+            this.containerId = "flipbook-" + Guid.NewGuid().ToString();
+        
+        string html = $"<div id='{this.containerId}' style='width:{htmlWidth}px; height:{htmlHeight}px; resize: both; overflow: auto;'></div>";
 
         string initialTMOStr = "null";
         if (initialTMO != null) {
@@ -424,7 +461,8 @@ public GeneratedCode Generate() {
         {
             "width": {{width}},
             "height": {{height}},
-            "containerId": "{{id}}",
+            "containerId": "{{this.containerId}}",
+            "key": {{JsonSerializer.Serialize(key)}},
             "initialZoom": {{initialZoom.ToString()}},
             "initialTMO": {{initialTMOStr}},
             "initialTMOOverrides": [
@@ -439,7 +477,22 @@ public GeneratedCode Generate() {
         }
         """;
 
-        return new(html, json, "flipbook.MakeFlipBook", id);
+        return new(html, json, "flipbook.MakeFlipBook", this.containerId);
+    }
+
+    /// <summary>
+    /// Updates selected image and generate update hmtl code
+    /// </summary>
+    /// <returns></returns>
+    public GeneratedCode UpdateImage(Image updateImage, int index)
+    {
+        // Update image list in flipbook
+        var image = images[index];
+        image.Image = updateImage;
+        images[index] = image;
+
+        // Returns HTML code for the updated image
+        return Generate(index);
     }
 
     /// <summary>
diff --git a/SimpleImageIO/Image.cs b/SimpleImageIO/Image.cs
index 6495b7c..a287d08 100644
--- a/SimpleImageIO/Image.cs
+++ b/SimpleImageIO/Image.cs
@@ -541,6 +541,11 @@ public Image ApplyOpInPlace(Image other, Func<float, float, float> op) {
         return this;
     }
 
+    /// <summary>
+    /// Calculates the absolute Difference from two equal-sized images with equal channel count
+    /// </summary>
+    public static Image AbsDiff(Image a, Image b) => ApplyOp(a, b, (x, y) => Math.Abs(x - y));
+
     /// <summary>
     /// Adds two equal-sized images with equal channel count
     /// </summary>