Go to File > Scan for DICOM files ... (Ctrl + Shift + O)
Navigate to the folder with your dicom (.dcm) files
Apply your desired window (create a custom one with Center Level at 0, and Width at 2000 if using windowing in the web ct viewer)
Scroll through every slice (otherwise, windowing isn't applied to every slice when you export)
Go to File > Export > To a picture file
Select a folder for your destination
As mentioned above, select PNG
Make sure there isn't any meta data set to burn into your images.
If you didn't presort your dicoms, you may have to order them by hand now.
Tile your images
Again, the exact process will depend on what software you use. I am sure there are many options. I will cover 2 free ones here.
Windows Tutorial Video:
Be aware the the gimp solution in this video is very slow, if you have a large slice count (depends on your computer, but probably greater than 150), set this to run overnight.
Linux Tutorial Video:
First, know that the end products should be as square as possible eg:
7 x 7 if there are between 43 - 49 slices
7 x 8 if there are between 50 - 56 slices
8 x 8 if there are between 57 - 64 slices
It doesn't have to be perfect, but load time is shortened if we can chunk the whole image
into the GPU and square collages will help with that.
Software for combining images:
Option 1: Imagemagick
Install Imagemagick (on Ubuntu, just $ sudo apt-get install imagemagick), other platforms might require you to build this from scratch.
Go to the folder with your pngs
Open a terminal there and run: $ montage -mode concatenate -tile 8x *.png out.png
The 8x means: Tile the new image 8 by whatever, so the second dimension will be whatever it needs to be
to fit all of the slices. Change the 8 to be the floor of the square root of your image count.
Input Total Slices:
The first number is the index for the set of slides (think: a specific trial), no other rows can have this same index. This stays 1
The next number is the file number, we used file01 in assets.txt so we'll keep this 1. Trials can use the same file if
desired, this decreases download and image processing time (currently the reward trial is at index 4, and uses the same image as trial 3.
This gives us a separate place to use click states for the fireworks, while leaving the user's clicks untouched).
The next number is the width, in slides, our image is, let's say this was 8, so change this number.
The next number is the height, in slides, our image is, let's say this was 7, so change this number.
The next number is the total slides, our image is, let's say this was 53, so change this number (Note this would mean we would have some
empty spaces in our image since 7*8 is 56, this is fine though, make sure to enter the actual number of slides 53, and NOT total
possible slices 56).
The next item is a boolean value indicating whether you wish to record clicks on that trial, change this to t and we can now
see clicks show up on our new image.
Lastly, we have the file extension, if the image was jpg, leave it as .jpg, if it was png, change it to .png. Case matters.
Add your actual image
Go into the slides folder
Rename or remove file01.jpg
Paste in your new image
Name it file01.jpg, case probably matters (even if you are using Windows now, your final server will probably be Linux)
You can have a total of 20 images with this naming scheme
Don't spend too much effort here. The viewer, and its loading bar, should be hidden while the user
reads consent / instructions, and fills out demographics info. If everything goes correctly,
the viewer should be finished loading before it has a chance to be seen.
In the root of the build folder there is a file called styles.css
In this file, there is a section called Loading Bar
There are five groups of values
…outer… is the outline of the loading bar
…inner… is the loading bar itself
…panel is the entire surrounding panel the loading bar and image are in.
…panel > … > img is the format of the image.
waitSpinner is the spinner that appears when the user input blocks while
the viewer loads as well as when the user's data is submitted.
Add whatever values / change whatever colors you want here.
The CT viewer image is specified in html/logo.png You can change this to be whatever you want.
You can completely overwrite the loading screen by implementing two functions (check scripts/viewerEvents.js for skeleton code):
window.viewerCustomLoadingBar(panel) is called when the loading bar is first created.
The parameter panel is the root panel to build everything inside of.
If you do not create an element here with the id viewer-meter-inner-bar you must create the function mentioned below as well.
Otherwise, the viewer tries to advance a loading bar which doesn't exist (and crashes the loader, so no ct viewer will appear ever).
window.viewerLoadingBarAdvance(percent) is called when the loading bar advances.
The parameter percent is a number between 0 and 1 indicating how much data is loaded.