Something strange about x, y positioning for certain screens

[pikurasa]

I've run into this a few times.

Today, I ran into it with a classroom smart board. x and y were offset enough to cause issues for any projects that used "set x/y".

I've also seen something similar on laptops, which becomes evident for our projects that set the height based on pitch.

In terms of reproducibility, if you use dev tools, and short code that prints Cartesian and sets x/y to zero, you can get results like this:

[walterbender]

Did you try refreshing your screen after switching over to the smart board? I can only reproduce the error if I change the size of my browser window and run the code w/o a refresh in between. If I refresh, the grid is properly configured.

[pikurasa]

I did not think to refresh...

[suryaanshah]

Hi!
I have looked into reproducing this issue and confirm that this is indeed present. I do not have a smart-board. I tested it with resizing the window a bit.

For convenience I am attaching a video file to this comment explaining my observations. As it may assist other "first time contributors" like myself while testing this and other issues on this repo.

I understand that this issue is old but indeed quite important for user-experience.

The first video is on the bug mentioned in this issue
https://github.com/user-attachments/assets/9c30660b-3f13-4bee-afe5-75f958cc0667

I'd now study this repo to figure out exactly where the bug is and provide updates on what I find and work on accordingly.

[walterbender]

Hmm. Maybe we should refresh the grid on resize? Or at least when Play is hit?

[suryaanshah]

The refresh-when-play option seems better.
I have been playing around in my fork. Just need a small help, is there a pre-built update function in the project or should I add it in the project.

My plan is to update the graph after the main logic of the doFastButton method completes.

js/activity.js file:

if (this.graph) {
    this.graph.update(); //assuming an update function exists
}

if the update function does not exist, then it would look something like:

/**
 * Updates the graph dimensions or re-renders it.
 */
this.update = () => {
    // Logic to refresh or re-render the graph
    this.clear();
    this.render();
};

do let me know if my approach has issues in any way. I would appreciate any guidance.

[suryaanshah]

A follow-up of my last comment.

I studied the code more and realized a few things.

Firstly I break down the problem and its potential solution(s):

• Root cause: The issue is that when we use the blocks set x, y = (0,0) then the mouse is supposed to be at the origin on the graph. but when we resize the window then we hit play the mouse or turtle is on the center of the screen but it is supposed to be on the center of the graph in the background.
• Potential solution: Perhaps we should also update the graph's position to match 0,0 on the resized screen.

[walterbender]

Yes. The mouse is set to the new 0,0 but not the grid.