JavaFX Pannable Scope/Magnifying Glass | Smarter Dev | Page 1

iron fieldBOT Jun 7, 2023, 6:33 AM

#

@sacred jackal

Yakuza Friend Uploaded Some Code

Okay so I have this game thingy I'm messing around with for a comp sci final, and I can't for the life of me figure out how to implement a scope for it, everything I have tried leaves the game/application buggy in fullscreen. I'll send a video of what it should look like.

The basic requirements are as follows:
Must be able to move by just moving the mouse, no click to drag.
Not affect the scope image.
Be able to be used in full screen and not exceeded the set borders (1920 X1080).

Uploaded these files to a Gist

message.txt

View The Gist

sacred jackal Jun 7, 2023, 6:34 AM

#

Video Example (made in adobe premiere)

#

Complied Screenshot

sharp dock Jun 7, 2023, 6:36 AM

#

looks like you got a scope, you trying to figure out the zoom?

sacred jackal Jun 7, 2023, 6:37 AM

#

Yeah, the zoom and panning/movement

sharp dock Jun 7, 2023, 6:37 AM

#

you wanna mouse listener for the movement, and have the scope move with the panel based on the mouse position

#

what do you use for your scope? Is it on a panel?

sacred jackal Jun 7, 2023, 6:38 AM

#

Its just a image thats added to the scene atm, I should move it to a panel though eh?

sharp dock Jun 7, 2023, 6:38 AM

#

oh you use javafx

sacred jackal Jun 7, 2023, 6:38 AM

#

Mhm

sharp dock Jun 7, 2023, 6:39 AM

#

i just notice that.. uhmm.. i don't know the javafx lib

#

but I do know if you move it to a panel

#

you can add a mouse listener and have it move with it

#

but with javafx i don't know that part.. but I can try my best to figure out and help you

#

just tight right now cause I got other things i just wanted to give you small amount of help

sacred jackal Jun 7, 2023, 6:40 AM

#

Okay one of the big things ive run into

#

upon using a listener, it will move the ENTIRE frame, leading to this ugly white space on all sides

#

somethin' like this

sharp dock Jun 7, 2023, 6:42 AM

#

okay, so you will want the panel to be bigger than the window, just add half if 1920x1080 and that should help that..

#

that black needs to get bigger

sacred jackal Jun 7, 2023, 6:43 AM

#

thats a manageable fix

#

altough

#

the scope image also gets zoomed in/zoomed out on

sharp dock Jun 7, 2023, 6:44 AM

#

so when the action between zoomedin and out, you will want something that adjusts the size of everything back and forth

sacred jackal Jun 7, 2023, 6:44 AM

#

sacred jackal the scope image also gets zoomed in/zoomed out on

ill see if i have this in my notes, i've gone through like 5 guides and 3 chatGPT writes 😵‍💫

sharp dock Jun 7, 2023, 6:44 AM

#

damn, yeah its a lot of work lol

sacred jackal Jun 7, 2023, 6:45 AM

#

sharp dock so when the action between zoomedin and out, you will want something that adjust...

Sorta? basically the video is the only thing that should really be zoomed in on, honeslty the zoom is somewhat easy, its the panning the frame with out it buggin the hell out of the full screen application

sharp dock Jun 7, 2023, 6:47 AM

#

okay so yeah then a mouse listener would be great, I would just toss the scope onto a label or something and have amouse listener that listens to the position of the mouse and moves the container object around creating the moving effect

#

Do you need example code of what it would look like???

sacred jackal Jun 7, 2023, 6:48 AM

#

one sec just gonna clip somethin for you

sharp dock Jun 7, 2023, 6:49 AM

#

ok

sacred jackal Jun 7, 2023, 6:49 AM

#

this was REALLY close but theres a few issues

#

scope image is locked, and moves with the video

you have to click and drag, you can't mouse the mouse freely, it SHOULD be locked to the midde of the dot, like a FPS game

#

heres all the code that goes with that

iron fieldBOT Jun 7, 2023, 6:52 AM

#

@sacred jackal

Yakuza Friend Uploaded Some Code

Uploaded these files to a Gist

message.txt

View The Gist

sharp dock Jun 7, 2023, 6:52 AM

#

Okay, so you will need a mouse button listener that listens for the mouse clicks, and have a boolean flag that holds if the button is being held or not, and if it is, the window will move, but it wont when it's not bneing held

sacred jackal Jun 7, 2023, 6:53 AM

#

I should disclamier, this was written by chatgpt as I am insaley new to visual based coding

sharp dock Jun 7, 2023, 6:53 AM

#

oh so you hardly know what you're doing?

sacred jackal Jun 7, 2023, 6:54 AM

#

visual coding yes, ui is really new to me, I understand the math and functions but I am 100% new to JavaFX

sharp dock Jun 7, 2023, 6:54 AM

#

Yeah I hardly worked with javaFX as well, its next to none lol

sacred jackal Jun 7, 2023, 6:55 AM

#

lol a duel learning experience

sharp dock Jun 7, 2023, 6:55 AM

#

yup except i don't have the libs for it lmao

sacred jackal Jun 7, 2023, 6:55 AM

#

drats!

#

anyway anyway

#

so mouse listener

sharp dock Jun 7, 2023, 6:55 AM

#

where did you get the libs? i will download them and import your code and help you figure it out

sacred jackal Jun 7, 2023, 6:55 AM

#

scene.setOnMouseDragged(event -> {
double deltaX = event.getSceneX() - mouseX;
double deltaY = event.getSceneY() - mouseY;

        // Update the translation values based on mouse movements
        translateX += deltaX;
        translateY += deltaY;

        // Apply the translation to the root group
        root.setTranslateX(translateX);
        root.setTranslateY(translateY);

        // Update the mouse position
        mouseX = event.getSceneX();
        mouseY = event.getSceneY();
    });

Problem no.1, tips?

sacred jackal Jun 7, 2023, 6:56 AM

#

sharp dock where did you get the libs? i will download them and import your code and help y...

its a process mane..

#

you use eclipse?

sharp dock Jun 7, 2023, 6:56 AM

#

yus

sacred jackal Jun 7, 2023, 6:56 AM

#

okay one sec

sharp dock Jun 7, 2023, 6:56 AM

#

okay

sacred jackal Jun 7, 2023, 6:56 AM

#

https://www.youtube.com/watch?v=_7OM-cMYWbQ

YouTube

Bro Code

JavaFX install & setup (Eclipse) 🌘

Setting up JavaFX for Eclipse is a pain in the ass

https://openjfx.io/

(00:00:35) Download JavaFX SDK
(00:01:59) Install JavaFX plugin
(00:02:31) Create a new JavaFX project
(00:03:47) Create user library
(00:04:40) Set user library
(00:05:02) Configure build path
(00:05:36) Add VM arguments

Linux/Mac: --module-path /pat...

▶ Play video

#

--module-path "PUT YOUR PATH HERE" --add-modules javafx.controls,javafx.fxml,javafx.media

#

thats for the vm agruements

sharp dock Jun 7, 2023, 6:57 AM

#

Alright, I need to finish up this one thing I got right now and then I will be able to get rolling fully with you..

#

okay

sacred jackal Jun 7, 2023, 6:58 AM

#

Im using javaFX 17.0.7 as my SDK

sharp dock Jun 7, 2023, 6:58 AM

#

Do you run java 8 or 17 or sooner as your vm?

sacred jackal Jun 7, 2023, 6:58 AM

#

im using javaSE-11 atm

sharp dock Jun 7, 2023, 6:59 AM

#

Okay well i use java 20 lol. I will get a java 11 something rolling up in eclipse lol

#

i just didn't want there to be any capatibility issues lol

sacred jackal Jun 7, 2023, 6:59 AM

#

School pc's use such backwards setups its not you fault LOL

#

and for the sake of capatibility

#

I have to use their settings and configs (ugh.)

sharp dock Jun 7, 2023, 7:00 AM

#

LOL my school ran on 8 for the longest time, and I had to tell IT how to update it to at least java 17

#

like I emailed and walked the IT guy through everything

sacred jackal Jun 7, 2023, 7:00 AM

#

bro

#

I tried installing the plugin so I could code

#

it broke eclipse on that pc

#

https://tenor.com/view/facepalm-picard-star-trek-the-next-generation-disappointed-gif-23456183

Tenor

sharp dock Jun 7, 2023, 7:01 AM

#

damn

sacred jackal Jun 7, 2023, 7:01 AM

#

its fine on my personal PC, but ooooh no how dare a school pc be useable.

sharp dock Jun 7, 2023, 7:02 AM

#

man I tell my school to screw off and Im doing code on my pc whether they like it or not. Still get 100% every time lmao

sacred jackal Jun 7, 2023, 7:02 AM

#

sharp dock man I tell my school to screw off and Im doing code on my pc whether they like i...

bro i wish, my laptop is so ass, i have to buy one this summer before collage LOL

#

framework laptop here I come tho kek

sharp dock Jun 7, 2023, 7:03 AM

#

My pc is good, its lenovo t480 but I want a framework so bad

sacred jackal Jun 7, 2023, 7:03 AM

#

there so, ugh mane god bless frame work

#

such a simple idea yet so amazing

sharp dock Jun 7, 2023, 7:04 AM

#

yes

#

so good

#

but also spendy

#

most laptops are spendy but its worth it

sacred jackal Jun 7, 2023, 7:05 AM

#

to be fair, its cheap over time

sharp dock Jun 7, 2023, 7:05 AM

#

right

sacred jackal Jun 7, 2023, 7:05 AM

#

intial investment is rough tho

sharp dock Jun 7, 2023, 7:05 AM

#

it reduces ewaste too

sacred jackal Jun 7, 2023, 7:05 AM

#

sharp dock it reduces ewaste too

my hippie ass approves deeply, its my second reason i want one ngl LOL

sharp dock Jun 7, 2023, 7:06 AM

#

lmao you aint the only one. I hate wasting computer parts

#

It's how I got my laptop

#

The company that use to own it had gotten bought out so my mom kept it and I sat there and reset it and reinstalled windows and got everything working again on it. I also then removed any tracing software and everything... So now its ours and the IT didn't care cause they were just gonna throw it out

sacred jackal Jun 7, 2023, 7:09 AM

#

so i tired making the drag a listener..

sharp dock Jun 7, 2023, 7:09 AM

#

didn't work out?

#

bruh discord just said nah and crashed lmao

sacred jackal Jun 7, 2023, 7:10 AM

#

no..but i can so you that full screen bug!

sharp dock Jun 7, 2023, 7:11 AM

#

you're adusting the window it'self.. i think

#

what did you write down for it?

#

ss it

sacred jackal Jun 7, 2023, 7:11 AM

#

#

wait I noticed its using root

#

root is the main scene so yeah you are right

sharp dock Jun 7, 2023, 7:15 AM

#

okay lol

#

well fix it, and see what it does lol

#

Alright, i just got finsihed with what I was doin

sacred jackal Jun 7, 2023, 7:18 AM

#

these lines of code control the scope, removing them allows me to move around the video as wanted, so if I could get these to ALWAYS be on top without being part of the root group then half the problem should be fixed

sharp dock Jun 7, 2023, 7:19 AM

#

is there no .setAlwaysOnTop()?

#

like in a jframe

#

uhh don't know how itll be able to

sacred jackal Jun 7, 2023, 7:19 AM

#

I am uhh not sure

sharp dock Jun 7, 2023, 7:19 AM

#

i dont know

#

what is the root for? the frame? Or the event

sacred jackal Jun 7, 2023, 7:21 AM

#

Im pretty sure the entire scene based off these lines

sharp dock Jun 7, 2023, 7:22 AM

#

okay the root is the scene

#

didn't know if it was the root of the jframe lol

sacred jackal Jun 7, 2023, 7:27 AM

#

Alright well cya you back at some other time I gotta dip

sharp dock Jun 7, 2023, 7:30 AM

#

alright cya

#

good luck

sacred jackal Jun 8, 2023, 1:28 AM

#

Hey @sharp dock ! How are ya?

sharp dock Jun 8, 2023, 2:19 AM

#

I'm good, just got done pressure washing my car

#

What about you?

sacred jackal Jun 8, 2023, 2:26 AM

#

good good!

sacred jackal Jun 8, 2023, 3:16 AM

#

So @sharp dock , ive decided to just make it drag for the time being, however I still need that scope to be on the top though, no luck so far

sacred jackal Jun 8, 2023, 5:14 AM

#

Okay so scope is good but

#

the image dosent stay with the mouse when zoomed in

#

tips?

iron fieldBOT Jun 8, 2023, 5:15 AM

#

@sacred jackal

Yakuza Friend Uploaded Some Code

Uploaded these files to a Gist

message.txt

View The Gist

sacred jackal Jun 8, 2023, 5:15 AM

#

code used for mouse movement

#

these lines spefically though

scene.setOnMouseMoved(event -> {
mouseX = event.getSceneX();
mouseY = event.getSceneY();

            // Calculate the scaled mouse position based on the scale factor and translation
            double scaledMouseX = (mouseX - translateX - (WINDOW_WIDTH / 2)) / scale + (WINDOW_WIDTH / 2);
            double scaledMouseY = (mouseY - translateY - (WINDOW_HEIGHT / 2)) / scale + (WINDOW_HEIGHT / 2);

            // Update the image position to center it on the cursor, taking into account the scale factor and translation
            double imageScaledX = (scaledMouseX - (imageView.getFitWidth() / 2));
            double imageScaledY = (scaledMouseY - (imageView.getFitHeight() / 2));
            imageView.setTranslateX(imageScaledX);
            imageView.setTranslateY(imageScaledY);
    });

sharp dock Jun 8, 2023, 6:07 AM

#

so you want to get the screen size, and have a border where the mouse can't move into

#

and for the zoom thing, youll want to use some math that determins the size of the scope from the zoom

sacred jackal Jun 11, 2023, 5:01 AM

#

Hey @sharp dock! Quick question thats pretty simple, can you change the Eclipse Workspace name?

I need it to be EclipseWorkspace not Eclipse Workspace as the space causes errors when importing video

#JavaFX Pannable Scope/Magnifying Glass