JERI

Toggling between Images

JERI provides a multi-level menu for organizing large sets of images. Once the image is loaded, you can pan, zoom, change exposure ([e] / [E]), or switch to another image using keyboard shortcuts.

For help: [?]

• Code
• Result

const config = {
  title: 'root',
  children: [
    {
      title: 'Glass of water',
      children: [
        { title: 'Input image', image: 'glass-input.exr' },
        { title: 'Improved', image: 'glass-denoised.exr' },
        { title: 'Reference', image: 'glass-ref.exr' }
      ]
    },
    {
      title: 'Living room',
      children: [
        { title: 'Input image', image: 'living-room-input.exr' },
        { title: 'Improved', image: 'living-room-denoised.exr' },
        { title: 'Reference', image: 'living-room-ref.exr' }
      ]
    }
  ]
};
Jeri.renderViewer(document.getElementById('root'), config);

Automatic Error Maps

When a reference image is available, JERI can compute false-color error maps between two images. The viewer supports L1, L2 (MSE), MAPE, MRSE, SMAPE and SSIM.

• Code
• Result

const config = {
  title: 'root',
  children: [
    { title: 'Improved', image: 'glass.exr' },
    { title: 'Reference', image: 'glass-ref.exr' },
    {
      title: 'SSIM',
      lossMap: {
        'function': 'SSIM',
        imageA: 'glass.exr',
        imageB: 'glass-ref.exr'
      }
    },
  ]
};
Jeri.renderViewer(document.getElementById('root'), config);

Use as a React Component

JERI is written in React and built with Webpack. If this matches your setup, you can simply install JERI with npm install jeri, and use it like so:

• Code
• Result

import { ImageViewer } from 'jeri';
import * as ReactDOM from 'react-dom';

function configForImage(imageName) {
    return {
    title: 'root',
    children: [
        { title: 'Image', image: `/img/${imageName}.exr` },
        { title: 'Reference', image: `/img/${imageName}-ref.exr` },
    ]
    };
}

const MyApp = ({ imageName }) => (
    <div>
        <p>Inspecting {imageName}</p>
        <div style={{position: 'relative', height: '300px'}}>
            <ImageViewer data={configForImage(imageName)} />
        </div>
    </div>
);

ReactDOM.render(
    <MyApp imageName="glass" />,
    document.getElementById('root')
);

No Funky UI, Please

By default, JERI comes with multi-image viewing, keyboard shortcuts, etc. If you just need to show a simple EXR image, you can choose to just use JERI's EXR parsing and basic display.

• Code
• Result

// See Github: build_web/examples/example_basic.html
const cache = new Jeri.ImageCache();
const imgUrl = "./img/glass.exr";

cache.get(imgUrl)
  .then((image) => {
    // ImageLayer displays an image
    const imageLayer = new Jeri.ImageLayer(document.getElementById('image-layer'), image);
    // MouseLayer detects and reports mouse and zoom events
    const mouseLayer = new Jeri.MouseLayer(document.getElementById('mouse-layer'), image);
    mouseLayer.setEnableMouseEvents(true);
    // They can be connected as follows:
    mouseLayer.onTransformationChange(function (transformation) {
      imageLayer.setTransformation(transformation);
    });
  })
  .catch((error) => console.error(error));