disneyresearch / jeri Goto Github PK

Attached is a zip file with an EXR that has a crop-window specified (the image is roughly 300x300 pixels out of an overall 4000x5600 image. When displayed with jeri, no warnings are issued but the result is black. If I remove the pixelBounds metadata from the EXR, it displays fine.

(It's easy enough to do that to work around it for now, but it'd be nice if this worked.)

box.zip

It would be nice to be able to provide a scale factor for the visualization of the error loss function in the configuration provided to Jeri.

(I have a use case that has no visible L2 error without adjusting the image exposure; it would be nice if the user saw something immediately when they selected the error tab. Further, if the user has to scale up the exposure manually to see the error, then if they switch back to the source image, they've become all white.)

I think I'm just doing what the docs tell me to do, but I'm seeing strange behavior.

Repro steps:

1. Check out and build jeri
2. Copy bug.html.txt to the build_web/examples directory (renaming it to bug.html)
3. Start a webserver and open the file.

The image starts zooming automatically as the canvas size grows rapidly, finally stopping when it's around 33M pixels (you can watch its size zoom up in the Chrome element inspector, for example). This happens on both Chrome and Safari on OSX.

The test case shows another issue as well (commented out): if I instead try to render an EXR to a div, then the rest of the contents of the webpage are obliterated.

(Note that I'm not very experienced with modern web/JS stuff, so I imagine this is user error, but I haven't been able to figure it out and am pretty sure I'm following the directions.)

If given a 4-channel EXR, jeri doesn't display the image; the following is reported:

Error: Don't know what to do with 4 image channels. ImageLayer.ts:521:14
ImageLayer</ImageLayer.prototype.createTexture
ImageLayer.ts:521:14
<anonymous> self-hosted:986:17 cachedFunction/<
cached-function.ts:11:22
ImageLayer</ImageLayer.prototype.draw
ImageLayer.ts:365:46
ImageLayer</ImageLayer.prototype.checkRender
ImageLayer.ts:304:6
<anonymous> self-hosted:986:17 

at minimum it would be nice if they worked (though it's easy enough to work-around by creating an RGB version of the EXR). (Ideally, it'd be nice if alpha was used when rendering the EXR.)

High-res EXRs can take a lot of bandwidth (and take a while to load, for users on slow connections). Yet, sometimes people will visit a page without interacting with the jeri-powered images. (I know, can you believe it?)

It would be nice if there was an option to provide a JPEG or EXR for the initial image displayed in the jeri browser and then only fetch an EXR to replace it when/if the user starts interacting with it (zooming in, going full screen, etc.)

Hi,

I have some multi-layer EXR images without a default layer (i.e., an image could contain color, normal, albedo layers but no <default>). When I try to load one of these images with Jeri, I got an error message: Error: EXR image not supported. I wondered for some time why it doesn't support my EXR images but the example ones. Then I realized that my images have no default layer, which confused Jeri as it didn't know which layer to load and thus gave this general error.

Is my conjecture correct? If so, is there a way to specify the layer to load in Jeri (like layer: normal)?

Thanks a lot!

As far as I can tell, most of Jeri's functionality isn't available on touch-screen devices (other than switching between images by tapping on the selector at the top.) It doesn't seem to be possible to pan or zoom the image, for example; those events seem to just apply to the entire webpage, even if I tap on a jeri-rendered image.

It would be great if more of that functionality was available on touch-screen devices.

Hi,

I just followed the instructions to run JERI locally and have some problem with displaying EXR. The JPG image from the examples is displayed.

My Chrome version is 69.0.3497.100

Not a huge deal, but it would be nice if, when the user hits "?", the shortcuts window didn't talk about switching images (the first 4 entries) in the case where only a single image is being displayed.

This project requires a fixed version of react and react-dom (of all dependencies, in fact). This leads to warnings when using JERI in a project that features a more recent version of the framework.

[3/4] Linking dependencies...
warning " > [email protected]" has incorrect peer dependency "[email protected]".
warning " > [email protected]" has incorrect peer dependency "[email protected]".

Hi,

I'm unable to use the NPM version of JERI as expected. See this test case (run ./run_test.sh) (requires Docker).

RUN npx create-react-app test
WORKDIR test

# try "npm install --save" as well
ARG INSALLER="yarn add"

RUN ${INSALLER} jeri
RUN ${INSALLER} worker-loader

COPY App.js src/App.js
COPY graphs.png public/
COPY matrix_avg.exr public/

EXPOSE 3000

CMD [ "npm", "run", "start" ]

When using npm install --save, the script doesn't run, and errors Cannot read property 'context' of undefined. When using yarn add, the viewer loads and can display PNGs but is stuck on 'Downloading ...' in a tab featuring an EXR image.

For example I want to only view the R channel of a RGBA png image. Is this posssible?

First of all, thank you for maintaining this repository.

While I'm making a third-party app using Jeri, I found that it cannot load the HDR image in URI format, that is in data:image/x-exr;base64,~, whereas other types of LDR images (tested jpg, png) are loaded successfully.

Here is a sample code that reproduces the problem. Run the HTML then press the Choose File button to select any images like the image images/test_image.exr or images/test_image.jpg given in this repository

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Example: Basic</title>
  <style>
    .stretch {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  </style>
</head>

<body>
  <div style="width:100%; height: 80vh; position: relative;">
    <canvas id="image-layer" class="stretch"></canvas>
    <div id="mouse-layer" class="stretch"></div>
  </div>

  <input type="file" onchange="encodeImageFileAsURL(this)" />

  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.development.js"></script>
  <script src="./jeri.js"></script>
  </script>
  <script>
    const ImageLayer = Jeri.ImageLayer;
    const MouseLayer = Jeri.MouseLayer;

    const cache = new Jeri.ImageCache();

    function encodeImageFileAsURL(element) {
      var file = element.files[0];
      var reader = new FileReader();
      reader.onloadend = function () {
        cache.get(reader.result)
          .then((image) => {
            const imageLayer = new ImageLayer(document.getElementById('image-layer'), image);
            const mouseLayer = new MouseLayer(document.getElementById('mouse-layer'), image);
            mouseLayer.setEnableMouseEvents(true);
            mouseLayer.onTransformationChange(function (transformation) {
              imageLayer.setTransformation(transformation);
            });
          })
          .catch((error) => console.error(error));
      }
      reader.readAsDataURL(file);
    }
  </script>
</body>

</html>

• Text overlay HUD (zoom in)
• Basic image canvas with zoom and panning

These examples display an image, but don't seem to allow for interaction properly

Hello!

The extension OES_texture_float is not supported in many Samsung devices which support WebGL2, where its functionality is enabled by default. Because of this JERI is not working on them while it could.

Add WebGL2 fallback when OES_texture_float is not supported, please.

I'd like to be able to do things like change the background color of the title of the selected and unselected images and change the background color of the image area.

It isn't evident to me how to do this; if it's possible, it'd be nice to have the styling for that stuff documented.

If it's not possible, it would be nice to if it was. :-)

(For now I'm hacking away in navigation.tsx and the like, but that seems a little unsatisfying.)

When I try add the jeri package via npm to an existing react project and try to run it, I get the following error:

./node_modules/jeri/build_npm/utils/image-loading.js
Module not found: Can't resolve 'worker-loader' in '/Users/anf/code/jeri-cra/node_modules/jeri/build_npm/utils'

It looks like this is due to worker-loader being a devDependency (which seems correct given that it's a webpack plugin?) but being used directly in non-dev code.