dwv demo site can load my dicom file, but dwv api can't

[taehun1214]

I really need dwv api.. but it said my dicom file is invalid.. (no magic word?? sorry I'm new here)

however, dwv demo site can load my dicom image perfectly..

I got the file using dcm4che query from pacs.. and it has Prefix- "DICM"

It is absolutely perfect dicom file. I got confirmation that from my hospital.

And also, its information has full values tested by DICOM Validation Toolkit.

I tested another dicom file from on the web,

but the result is the same.. "Error: Not a valid DICOM file (no magic DICM word found)."

please tell me what should I do??.. how to make my dicom file valid?

[ivmartel]

Can you share your code to see how you are loading the data?

[taehun1214]

I just copy and paste your example except url.. I change it to my dicom file path which is from my web server.

app.loadURLs(["https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm"]); <---- ok

app.loadURLs(["/backend/pacsOne/0EC19DC9-0228-7258-A574-0983945CF193.dcm"]); <-- invaild

[ivmartel]

Does /backend/pacsOne/0EC19DC9-0228-7258-A574-0983945CF193.dcm resolve to something (if you put it in your browsers' url, does it download the file)? It looks like it is missing protocol (http) and root (127.0.0.1).

[taehun1214]

In other server, I let me try "http://video.softnet.co.kr:8000/data/files/check/B9E8DDA0-6E35-CCDB-CA04-61B573990217.dcm"........

question 1 : Why your dicom path ("https://raw.githubusercon............ta/bbmri-53323851.dcm") don't show cross origin error??

question 2 : Do I have to do other process?? I just use "dwv.min.js" and my goal is showing the dicom image from the path simply...

[taehun1214]

I did test....
"http://video.softnet.co.kr:8000/data/files/check/B9E8DDA0-6E35-CCDB-CA04-61B573990217.dcm" It said : Error: No JPEG 2000 decoder provided.

I can change my dicom from JPEG2000 to JPEGBaseline1. if I do this, would it work?

[ivmartel]

1. content from raw.githubusercontent is provided with CORS enabled, so no cross origin error
2. you should be able to view the image without any process
3. the viewer supports JPEG2000 encoded DICOM data, you need to provide the decoders in the applauncher (see mobile/applauncher.js#L55)

[taehun1214]

Thank you, I tried, but... following errorr.. please help me..

---error1 on console... I have to include js files following error.. right?---

dwv.min.js:14 Uncaught TypeError: a.use is not a function
    at Object.g.i18nInitialise (dwv.min.js:14)
    at applauncher.js:64
g.i18nInitialise @ dwv.min.js:14
(anonymous) @ applauncher.js:64
register:699    <---this is my jsp file name.
pace.min.js:8 
a.open @ pace.min.js:8
send @ jquery.min.js:4
ajax @ jquery.min.js:4
getMenuHtml @ register:391
(anonymous) @ register:381
j @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
I @ jquery.min.js:2

------error2 on console------

dwv.min.js:11 Uncaught Error: Cannot append a slice with different number of columns
    at g.image.Image.appendSlice (dwv.min.js:11)
    at g.image.View.append (dwv.min.js:12)
    at g.io.Url.c.onload (dwv.min.js:3)
    at d (dwv.min.js:12)
    at l (dwv.min.js:12)
    at g.utils.WorkerTask.callback (dwv.min.js:12)
    at Worker.b (dwv.min.js:14)

[taehun1214]

why your dicom is no need decoder in example? If there is default dicom image format, please let me know... I think I can change its format to another..

[ivmartel]

Because it loads the decoders as I point out in '3.'. You can use the non minified dwv (dwv.js), it will give you more detailed error logs.

It would be easier for me to help you if you could share your code.

[taehun1214]

I solve the problem.. deleted duplicate loadULRs method..

Thank you... really appreciate your help and your API!!

now I can see my dicom image on my web. but one more question,...

I'm South Korean. I don't need multi-language support in my dicom.. let me know how to solve this error..

----------my code--------------

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!-- Support for mobile touch devices -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
<script
    src="<c:url value='/resources/backend/js/ReferApp/pacsService.js'/>"></script>

<script
    src="<c:url value='/resources/dicom/js/dwv.js'/>"></script>
<script
    src="<c:url value='/resources/dicom/js/applauncher.js'/>"></script> 
........
<!-- Main container div -->
<div id="dwv">
    <div class="layerContainer">
        <canvas class="imageLayer"></canvas>
    </div>
</div>
<!-- Another container div -->
<div id="dwv2">
    <div class="layerContainer">
        <canvas class="imageLayer"></canvas>
    </div>
</div>
<div id="meta"></div>
.....
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script>

dwv.gui.getElement = dwv.gui.base.getElement;
dwv.gui.displayProgress = function (percent) {};
var app = new dwv.App();

app.init({
    "containerDivId": "dwv"
});
app.loadURLs(["http://video.softnet.co.kr:8000/data/files/check/B9E8DDA0-6E35-CCDB-CA04-61B573990217.dcm"]);

----------console error----------

dwv.js:22204 Uncaught TypeError: i18next.use is not a function
    at Object.dwv.i18nInitialise (dwv.js:22204)
    at applauncher.js:64

--------------------dws.js:22204-------------------------

    // use the XHR backend to get translation files
    var i18n =  i18next.use(i18nextXHRBackend);       <------ error point
    // use browser language or the specified one
    if (lng === "auto") {
        i18n.use(i18nextBrowserLanguageDetector);
    }

[ivmartel]

You are missing the i18next includes (adapt to your paths):

<script type="text/javascript" src="i18next.min.js"></script>
<script type="text/javascript" src="i18nextXHRBackend.min.js"></script>
<script type="text/javascript" src="i18nextBrowserLanguageDetector.min.js"></script>

Unfortunately there is no South Korean translation available. If you are willing to create it, we can add it to the languages in transifex. Available languages are in the locales folder. Check the English one for an example.

[ivmartel]

Ok, I hope I answered all the questions. Closing for now, feel free to reopen if needed!

[ShahnewazSarker]

Hello @ivmartel ,

I tried to load one dicom image but not working. Error message: No JPEG Baseline decoder provided

Here is my code:

    <!DOCTYPE html>
    <html>
        <head>
            <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
            <script type="text/javascript" src="dist/dwv.min.js"></script>
            <script type="text/javascript" src="src/utils/i18next.min.js"></script>
            <script type="text/javascript" src="src/utils/i18nextXHRBackend.min.js"></script>
            <script type="text/javascript" src="src/utils/i18nextBrowserLanguageDetector.min.js"></script>

            <script type="text/javascript" src="src/dicom/dicomParser.js"></script>
            <script type="text/javascript" src="src/dicom/dicomWriter.js"></script>
            <script type="text/javascript" src="src/dicom/dictionary.js"></script>
            <script type="text/javascript" src="src/dicom/dicomElementsWrapper.js"></script>
            <script type="text/javascript" src="src/image/decoder.js"></script>
            <script type="text/javascript" src="src/image/domReader.js"></script>
            <script type="text/javascript" src="src/image/image.js"></script>

            <script type="text/javascript" src="src/app/application.js"></script>
            <script type="text/javascript" src="src/app/drawController.js"></script>
            <script type="text/javascript" src="src/app/infoController.js"></script>
            <script type="text/javascript" src="src/app/state.js"></script>
            <script type="text/javascript" src="src/app/toolboxController.js"></script>
            <script type="text/javascript" src="src/app/viewController.js"></script>
            <style type="text/css" >
                body { background: #252525; color: #fff; }
                button {
                    margin: 5px; padding: 10px 10px;
                    border: 0 none; border-radius: 4px;
                    font-size: 14px; font-weight: 600;
                    color: #fff; background-color: #444; }
                button:hover { background-color: #555; }
                button:disabled { background-color: #08b; }
                .toolbar { font: 14px arial, sans-serif; margin-bottom: 5px; text-align: center; }
                .wl-button, .reset-button { margin-right: 5px; }
                .layerContainer { margin: auto; text-align: center; }
                .imageLayer { left: 0px; }     
            </style>

            <script type="text/javascript">
                window.onload = function() {
                    var imgUrl = document.getElementById("imageHidden").src; 
                    dwv.gui.getElement = dwv.gui.base.getElement;
                    dwv.gui.displayProgress = function(percent) {
                    };

                    // create the dwv app
                    var app = new dwv.App();
                    // initialise with the id of the container div
                    app.init({
                        "containerDivId": "dwv",
                        "tools": ["WindowLevel"], // or try "ZoomAndPan"
                    });
                    // load dicom data
                    app.loadURLs([imgUrl]);
                    var range = document.getElementById("sliceRange");
                    range.min = 0;
                    app.addEventListener("load-end", function() {
                        range.max = app.getImage().getGeometry().getSize().getNumberOfSlices() - 1;
                    });
                    app.addEventListener("slice-change", function() {
                        range.value = app.getViewController().getCurrentPosition().k;
                    });
                    range.oninput = function() {
                        var pos = app.getViewController().getCurrentPosition();
                        pos.k = this.value;
                        app.getViewController().setCurrentPosition(pos);
                    }

                };
                $(document).ready(function() {
                    // base function to get elements

                });
            </script>

        </head>
        <body>
 <img id="imageHidden" src="http://localhost/dicom/test.dcm" hidden="true">
            <div id="dwv">

                <!-- Layer Container -->
                <div class="layerContainer">
                    <canvas class="imageLayer">Only for HTML5 compatible browsers...</canvas>
                </div><!-- /layerContainer -->

            </div><!-- /dwv -->
            <input type="range" id="sliceRange" value="0">
        </body>
    </html>

Can you please give me some idea whats wrong here. Its bit emergency for me.

[ivmartel]

Check out my answer in the #596 issue.