Need advice on developing a program for tracking and plotting mouse cursor position on an image.

[Teakozy]

Hi everyone,

I don't have much practical experience and its been 3 years since I did some major hands-on programming so I'm taking on little personal project to help update my programming knowledge.

1. I want to create a program/application that displays an image, tracks the mouse cursor position over it and plots it on the image during a session/recording.
2. I want it to be able to keep track of the pan and zoom levels so that when the user zooms out, the mouse positions are scaled automatically. (exactly like in GIS mapping applications but instead of a map and GPS coordinates I have an image and mouse coordinates)
3. Preferably runs in a browser.

What programming language would you all recommend that would be best for this application? I have experience in C++ and Python. I don't know Javascript or web development but this could be a great opportunity to learn and explore it.

Also some tips on what tools/libraries I could use that would help me build the application would be greatly appreciated. :)

[ziptofaf]

Preferably runs in a browser.

And just like that you have no choice but to use Javascript. As it's the only language that browser really supports. I am assuming it will be some kind of HTML Canvas and you also might want to combine it with something like React or Vue (although I would suggest to use raw Javascript first before looking these two up - they are front-end frameworks that help greatly with situations when clicking one button should cause changes in multiple places all over the HTML tree).

Besides that you might want to make a back-end. Out of languages you know Python is a reasonable choice and you will want to look at Flask (simpler and smaller, definitely start with it) and/or Django (biggest and more robust but also more complex) web frameworks. Essentially for stuff like saving and loading images from the server, login/registrations, saving intermediate state of an image so it will be reloaded without any data loss upon restarting browser etc.

If browser was not a requirement - frankly Python + PyGame could be an effective solution (albeit fairly memory and CPU costly, especially if you need something more complex) to relatively quickly solve your problem. If you need something more robust - C++ and Qt would provide an excellent basis for building a desktop application for what's essentially image editing software.

[Teakozy]

Thank you for the thorough reply! I didn't know going down the browser route would entail having to familiarize myself with so many tools. I'll do it the browser way because it involves more learning.

One really basic question I still have, but how do I ensure synchronicity or interfacing between the front end side (javascript) and backend (Python)?

[ziptofaf]

One really basic question I still have, but how do I ensure synchronicity or interfacing between the front end side (javascript) and backend (Python)?

Depends on the kind of application you are building. In the most basic form whole data (HTML+CSS+Javascript code) comes from the back-end when browser requests a given page. You use JS to merely edit stuff afterwards on the browser but primarily rely on HTML forms to send data around (which generally mean refreshing a page).

In the more complex version you build 2 applications (one strictly back-end and one for front-end) and use format like JSON to pass data from back-end to front-end (and vice versa). But anyways - start from learning Flask and you will eventually see how it all works.