I am trying to show a DICOM Series as a 3D representation. It worked with a different set of data but with the current one, the 3D image does not show up. The output values in the datastack of windowCenter and windowWidth are -964 and -664. I am using the latest version of AMI.js but still cannot display the DICOMs as 3D.
Do I have to convert the negativ values somehow, so that they turn out as positive values? Or do you have any other idea why I cannot display the Data?
I am loading the Data with the AMI.VolumeLoader, here is the important bit of code:
let loader = new AMI.VolumeLoader();
loader.load(files)
.then(() => {
let series = loader.data[0].mergeSeries(loader.data)[0];
loader.free();
loader = null;
let stack = series.stack[0];
//stack Helper
vrHelper = new AMI.VolumeRenderingHelper(stack);
scene.add(vrHelper);
//LUT
lut = new AMI.LutHelper('lut-canvases');
lut.luts = AMI.LutHelper.presetLuts();
lut.lutsO = AMI.LutHelper.presetLutsO();
//update related uniforms
vrHelper.uniforms.uTextureLUT.value = lut.texture;
vrHelper.uniforms.uLut.value = 1;
// camera
let centerLPS = stack.worldCenter();
camera.lookAt(centerLPS.x, centerLPS.y, centerLPS.z);
camera.updateProjectionMatrix();
controls.target.set(centerLPS.x, centerLPS.y, centerLPS.z);
})
.catch((error) => window.console.log(error));
A different set of Data is showing as it should be:
The other set of data is just not showing up and I don't even get an error message.
Related
I have a PowerPoint template with placeholder data. I need to swap out the placeholder text with some numbers using Node, but I'm having trouble finding a package that supports this. Has anyone seen anything along these lines?
Have you looked into the PowerPoint JavaScript API?
For example:
Call the ShapeCollection.getItem(key) method to get your Shape object
Update the text value via Shape.textFrame.textRange.text
Related example from Microsoft's docs:
// This sample creates a light blue rectangle with braces ("{}") on the left and right ends
// and adds the purple text "Shape text" to the center.
await PowerPoint.run(async (context) => {
const shapes = context.presentation.slides.getItemAt(0).shapes;
const braces = shapes.addGeometricShape(PowerPoint.GeometricShapeType.bracePair);
braces.left = 100;
braces.top = 400;
braces.height = 50;
braces.width = 150;
braces.name = "Braces";
braces.fill.setSolidColor("lightblue");
braces.textFrame.textRange.text = "Shape text";
braces.textFrame.textRange.font.color = "purple";
braces.textFrame.verticalAlignment = PowerPoint.TextVerticalAlignment.middleCentered;
await context.sync();
});
I am able to open a 3DS file in MeshLab and when I export to Collada DAE format the textures are visible but they are not being projected onto the mesh in the same way as the preview in MeshLab. For example, the front/back faces of a cube would have the proper texture (suppose it's a polka dot) but the top and bottom have a striped look. How can I apply a single texture and have it appear as intended on all faces, like the imported model before I convert it?
This problem is a result of the end software being used to view the DAE file. It's not a problem with MeshLab.
For example, if loading the file into Away3D be sure to handle the texture materials using the TextureMaterial class instead of the simpler SinglePassMaterialBase such as what you might find in their example code. Here is what I use now, and it displays texture properly:
var material:TextureMaterial = cast(asset, TextureMaterial);
material.ambientColor = 0xffffff;
material.lightPicker = _lightPicker;
material.shadowMethod = new FilteredShadowMapMethod(_light);
material.lightPicker = _lightPicker;
material.gloss = 30;
material.specular = 1;
material.ambient = 1;
material.repeat = true;
I want to open a blank catalog image and apply on top of it some skewed (distorted) text.
I have this typoscript snippet:
/**
* Catalog image
*/
lib.catalogImage = IMAGE
lib.catalogImage {
file = GIFBUILDER
file {
XY = 242,270
format = png
quality = 80
10 = IMAGE
10 {
file = EXT:theme/Resources/Public/Images/catalog_blank.jpg
}
15 = IMAGE
15 {
offset = 20,20
file = GIFBUILDER
file {
XY = 150,50
10 = TEXT
10 {
text = Datenblatt
fontSize = 12
offset = 28,110
fontColor = black
niceText = 1
}
20 = SCALE
20 {
params = -matte -virtual-pixel transparent -distort Perspective '0,0,0,0 0,90,0,90 90,0,90,25 90,90,90,65'
}
}
}
}
}
The problem is, I always get the text box white, with no text in it.
What am I doing wrong?
Blank catalog image:
Result image:
EDIT:
I've also tried adding:
niceText.after = -matte -virtual-pixel transparent -distort Perspective '0,0,0,0 0,90,0,90 90,0,90,25 90,90,90,65'
to the TEXT object, according to the docs (https://docs.typo3.org/typo3cms/TyposcriptReference/Gifbuilder/ObjectNames/Index.html), but it doesn't seem to be considered at all.
The result is this:
It looks like niceText doesn't get along with SCALE.
I removed niceText and the text is now displayed correctly.
I have a question/problem with fabric.js - in my code the user can upload a picture, with filters he can convert it to a black/white image. When I export the picture with canvas.toSVG(); it exports a svg image, but it is no real vector graphic - it loses quality when scaling up.
function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event) {
var img = new Image();
img.onload = function () {
var imgInstance = new fabric.Image(img, {
scaleX: 0.7,
scaleY: 0.7
})
canvas.add(imgInstance);
}
img.src = event.target.result;
} reader.readAsDataURL(e.target.files[0]);}
$('saveBtn').onclick = function() {
var filedata= canvas.toSVG(); // the SVG file is now in filedata
var locfile = new Blob([filedata], {type: "image/svg+xml;charset=utf-8"});
var locfilesrc = URL.createObjectURL(locfile);//mylocfile);
var dwn = document.getElementById('dwn');
dwn.innerHTML = "<a href=" + locfilesrc + " download='mysvg.svg'>Download</a>";}
What am I doing wrong?
There is no easy way to "parse" raster graphics to a vector image. Vector graphics include information for how to draw an image, while raster images only include the pixel data for how an image appears at a given size and resolution. That's enough for many purposes, but it means that while it's easy to go from vector to raster (just execute the instructions), it's not easy to go from raster to vector.
It is possible to "trace" the edges of a raster image to obtain vectors that can approximate the raster: in other words, a set of vector instructions that, for that particular resolution and depth, yields an image that is the same as the original raster (or something very like it). But there is no guarantee that these actually correspond in any way to the original vectors (if there are any original vectors at all). Usually there is no correspondence, in fact, unless your tracing algorithm is very specialized: for example, tracing images of a font to make a vector copy of that font. Because they don't correspond, there's no guarantee that the image will scale up the way you want it to: it'll scale, but things may enlarge in strange ways.
It is possible to implement tracing algorithms in JavaScript, by drawing the image into a <canvas> element, using getImageData() to grab the pixel information from that, and performing your operations on the pixel information. Doing this, though, is beyond the scope of this question.
Can someone tell me how can I view an RGBA image? I just want a tool that I can display an RGBA image with!
I have written a code, which outputs only RGBA format. I just want to verify if my code worked, and just want to find a simple tool to view this image.
I wasn't able to come across a software to be able to display a RGBA image.
Thanks in advance.
RGBA files only contain raw channel data. The binary data will not have enough information to display an image (ie. width,height,depth, &tc).
If you know the image dimensions of each .rgba file, you should be able to work with the data. Here's an example of viewing raw date in javascript.
var fr = new FileReader(),
myWidth = 200,
myHeight = 200;
fr.onload = function(frEvent) {
var canvasElement = document.getElementById("myCanvas"),
ctx = canvasElement.getContext("2d"),
blob = ctx.createImageData(myWidth,myHeight),
index = 0;
while(index < frEvent.target.result.length)
blob.data[index] = frEvent.target.result.charCodeAt(index++);
ctx.putImageData(blob,0,0);
}
Imagemagick will be able to display raw RGBA data. Assuming that each color sample is 8 bits.
display -size 200x200 -depth 8 mySimpleData.rgba