Run this demo in Electron, but failed

ernestzhang-11 commented 4 years ago

Hello, I want to run this demo in Electron, but it failed. Could you tell me how to run it in Electron? Thanks !!!

This is my code.

This is the result. @dannyrb @swederik

eolasd commented 4 years ago

Hi @zhangluwei1997 You might just need a route in electron to either /viewer or /local

eolasd commented 4 years ago

I just did a quick test with a clean electron project and got it working. If you create a new viewer.html file, and paste in all the OHIF code that you have in Index.js it should work. You can also just change the mainWindow.loadFile to point straight to your viewer.html file if you don't need and index page.

The routes used in OHIF react are defined here... https://github.com/OHIF/Viewers/blob/f9fe4232e755d2478dae4c70dac90a7b42e34846/platform/viewer/src/routes/routesUtil.js#L34

I can't guarantee this is the best way to do this, but at least it should get you to a working viewer. I think within electron you might need to use hash routing - but I am not an electron expert.

ernestzhang-11 commented 4 years ago

Thanks @eolasd Could you show me your code in CodeSandbox ?

eolasd commented 4 years ago

Sorry, cant get electron in codesandbox right now.

But this is what I did:

Install Electron quick start demo

git clone https://github.com/electron/electron-quick-start 
cd electron-quick-start
npm install

Add OHIF Viewer file / route

Create new file called viewer.html with code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />

    <meta name="description" content="Open Health Imaging Foundation DICOM Viewer" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="theme-color" content="#000000" />
    <meta http-equiv="cleartype" content="on" />
    <meta name="MobileOptimized" content="320" />
    <meta name="HandheldFriendly" content="True" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <!-- WEB FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Sanchez" rel="stylesheet" />

    <title>OHIF Standalone Viewer</title>
</head>

<body>
    <noscript> You need to enable JavaScript to run this app. </noscript>

    <div id="root"></div>

  <script src="https://unpkg.com/@ohif/viewer@1.0.3/dist/index.umd.js" crossorigin></script>
  <script>
    var containerId = "root";
    var componentRenderedOrUpdatedCallback = function(){
      console.log('OHIF Viewer rendered/updated');
    }
    window.OHIFViewer.installViewer(
      {
      // routerBasename: '/',
      servers: {
        dicomWeb: [
          {
            name: 'DCM4CHEE',
            wadoUriRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/wado',
            qidoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
            wadoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
            qidoSupportsIncludeField: true,
            imageRendering: 'wadors',
            thumbnailRendering: 'wadors',
          },
        ],
      },
    }, containerId, componentRenderedOrUpdatedCallback);
  </script>

</body>

Update app entry point to new viewer.html file

Change to this line in the main.js file, line 16:

  // and load the index.html of the app.
  mainWindow.loadFile('viewer.html')

npm start to test application.

You still get the "sorry page does not exist" on first load, but if you click the link it will go to the study list screen and should display the sample study list. Not perfect, but should be a starting point.

ernestzhang-11 commented 4 years ago

Thanks for you help !

I'm in the same situation as you. I thought you didn't get the "sorry page does not exist" on first load. so I want to see your code.

Thank you very much !

eolasd commented 4 years ago

No problem. I just realised that it doesn't matter what the viewer.html file is called, it actually loads regardless. I thought it needed a hosted /viewer route - which is what happens when you try run it on a web server. So I think what is happening is that React has to load everything first before the route exists, so then the link works. It shouldn't be too hard to get working - but it probably needs hash routing or to embed react more granular in electron using proper react install as opposed to the UMD package.

Best of luck!

OHIF / Viewers