Is it possible to correlate the position of a medical image segment with the position of a mouse click event in JavaScript?

Greetings and thank you for taking the time to read this!

This query is closely linked to the following library: https://github.com/FNNDSC/ami

I am interested in developing a function that can detect when a user clicks on a segment within an image, triggering a dialog box with relevant information.

After searching on my own and consulting examples on StackOverflow, I have managed to establish a rudimentary method to detect the location of a click and determine if it falls within a specific segment:

window.addEventListener('click', onWindowClick, false);

    function onWindowClick(event) {
        if (event.clientX > 200 && event.clientX < 300) {
            alert('You have clicked: ' + event.clientX + " " + event.clientY + ' within the segment');
        } else {
            alert('You have clicked: ' + event.clientX + " " + event.clientY + ' outside the segment');
        }

For instance, clicking near the green area would yield the following output: https://i.sstatic.net/1yFSb.png

Clicking outside would result in: https://i.sstatic.net/dBg22.png

The main dilemma is: what specific data or positional resources are needed to accurately determine if a click falls within the segment?

Upon closer inspection, it seems that there are two viable options within the data structure. Firstly, we could utilize the frame's position, which appears to represent the spatial location of the segmentation in the form of: https://i.sstatic.net/5W7Xw.png

Specifying the clicked position as: 277 294 and the _imagePosition from the data structure as: -201 -59

Alternatively, another feasible option is the stack's origin: https://i.sstatic.net/f1WdL.png

With the clicked position as: 278 301 and the origin denoted as: -201 -59

Evidently, whether opting for _imagePosition or the stack's origin, some form of conversion would be required.

Having conducted further research, it is apparent that ijk and lps coordinate systems are employed, often necessitating the usage of a matrix for seamless conversion between the two.

If you have any recommendations or assistance to offer, they would be greatly appreciated! Thank you!

Answer №1

Unclear about what you mean by "image segment," but I assume you're referring to checking if the user clicked on the image.

To achieve this, you can utilize the Raycaster feature in THREEJS () and check for intersections with the "slice mesh."

This approach is demonstrated in the quadview example, where a double-click in one of the 2D viewers triggers the desired action:

Key portion of the code:

function onDoubleClick(event) {
  const canvas = event.target.parentElement;
  const mouse = {
    x: ((event.clientX - canvas.offsetLeft) / canvas.clientWidth) * 2 - 1,
    y: - ((event.clientY - canvas.offsetTop) / canvas.clientHeight) * 2 + 1,
  };
  ...
  const raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children, true);
  if (intersects.length > 0) {
    const lpsCoordinates = intersects[0].point;
    const ijkCoordinates = CoreUtils.worldToData(lps);
  }

View the source code:https://github.com/FNNDSC/ami/blob/dev/examples/viewers_quadview/viewers_quadview.js#L564-L617

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS meta tags featuring dynamic asynchronous content

I am currently facing a challenge with my angular application that is running within a .net application. My main goal is to implement meta tags for SEO and other purposes. However, the issue I'm encountering is that I cannot determine the page title u ...

Filtering Key Presses in Quasar: A Comprehensive Guide

Seeking Assistance I am looking to integrate an "Arabic keyboard input filtering" using the onkeyup and onkeypress events similar to the example provided in this link. <input type="text" name="searchBox" value="" placeholder="ب ...

Testing the updated version 18 of Create React APP index.js using Jest

Previously, I had this index.js file created for React version <= 17. import React from 'react'; import ReactDOM from 'react-dom'; import App from './views/App'; import reportWebVitals from './reportWebVitals'; im ...

What is the formula for determining the size of an image using JavaScript, jQuery, or Java?

I'm looking to determine the dimensions of an image. I have both the image src and base64 data available. My goal is to display the current size of the image. I am working with Java and JavaScript. Is there a way for me to calculate the image size usi ...

How can you determine if all specified events have been triggered in jQuery?

I am implementing custom triggered events following asynchronous calls, and I'm in need of a method to determine when all the events have been triggered. For instance: var ajaxCall1 = function(){ $.ajax({ url: "someUrl.html", com ...

Using moment.js to perform addition of time does not yield the desired outcome

Every time I try to ---- make changes ---- var someMoment = moment('6:30 PM', ["h:mm A"]); ---- end changes ---- someMoment.add(30, 'minutes') I am not getting any desired outcome. console.log(start); -- Moment {_isAMomentObject: ...

Assurance-driven number tally

I'm diving into JavaScript and recently started exploring promises. I've put together a code snippet that logs the value passed to the promise function as a parameter after the setTimeout function is triggered. Now, I'm wondering if there&ap ...

The CSS3 slideshow is displaying distorted and unfocused images

I have a CSS code that controls the timing of my slideshow with 3 images: .slideshow li:child(1) span { background-image: url(../../pic/bg1.jpg); } .slideshow li:child(2) span { background-image: url(../../pic/bg2.jpg); -webkit-animation-de ...

What is the best way to add a "Save to Favorites" link within a modal window

I have integrated the NASA API to showcase images, where clicking on an image reveals a modal containing additional details. There is also a save to favorites functionality in the tutorial that allows users to save images and details to a local storage sec ...

Using a JavaScript variable in conjunction with an AJAX-PHP variable

When using an ajax call to refresh an external php file "commentS.php" every 3 seconds, I encountered a problem. Despite expecting the variable in the hidden input field (name="idd") to be reflected on the "commentS.php", it did not happen as anticipated. ...

Does the Mirage addon work effectively in the ember.js tutorial?

Following the ember.js tutorial, I'm facing a roadblock at this particular stage: (especially when implementing the Mirage add-on). I've made changes to the mirage/config.js file as advised but still unable to display the Mirage data. Despite ...

What steps should I take to successfully install using npm if I keep encountering the same error?

Every time I attempt to install a package using npm, I encounter the following warning: npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7b3aeaba2b3be ...

In Express.js, what is the best way to redirect to a specific route after sending a response to the client side?

As a beginner learning Express.JS, I am facing an issue with redirecting routes. My goal is to display a message to the user saying "Your data has been registered successfully." and then redirect them back to the form page after a certain time period. Howe ...

Ways to extract a number that comes after a specific word in a URL

I have a URL and need to extract a specific value from it by removing a certain step. I am looking for a regex solution to accomplish this task For example, if I have the window.location.href, the URL might look like this: https://mypage/route/step-1/mor ...

Can a constant value be dynamically defined in Typescript?

Trying to dynamically define a constant in Typescript has proven to be more challenging than I anticipated. Here's what I attempted: define(name: string, value: any): boolean { var undef; const name = value; return name == undef; } ...

Why isn't my React image updating its source right away? What are some solutions to this issue?

I currently have a basic <img> tag with a specified src attribute. <img src={src} /> When I update the src attribute from, let's say /1.jpg to /2.jpg, there is a delay in loading the new image. React still displays the old image (/1.jpg) ...

Encountering a "DOM Exception 11: InvalidStateError" when attempting to use websocket.send

I encountered the following error message: DOM Invalidate exception 11 This error is coming from the code snippet below, but I'm having trouble identifying the root cause. /*The coding style may appear pseudo-stylish with potential syntax errors*/ ...

Issues with updating data using PUT routes in Slim Framework v3

After upgrading to Slim v3, all my GET and POST routes are functioning correctly, but the PUT routes are encountering issues. I have a class where I have implemented this: $this->slimObj->put('/path/{ID}', array($this, 'method')) ...

I'm curious why my background generator is only altering a portion of the background instead of the entire thing

I've been attempting to create a JavaScript random background changer, but I'm encountering some challenges. The main issue is that instead of changing the entire page's background, it only alters a strip of it. Additionally, I'm curiou ...

Understanding JSON Arrays using jQuery

I've been attempting to display JSON objects in the console, but unfortunately, I'm facing some issues. The JSON data is obtained from a small API that I crafted using PHP. Here's a snippet of my JSON: { TotalResults: 2, Results: [ ...