search

brownhci / WebGazer

WebGazer.js: Scalable Webcam EyeTracking Using User Interactions
https://webgazer.cs.brown.edu
Other
3.51k stars 527 forks source link

fix(bug): `plotting-canvas` not spanning the entire screen #326

Closed TungVietLe closed 10 months ago

TungVietLe commented 10 months ago

Sometimes, plotting-canvas does not cover the entire screen. I my case, when I use npm run serve it will spans, but if I use npx lite-server, which is a local server, it somehow doesn't work. This is a fix on the CSS of setup() to guarantee it will span whole screen on every server

TungVietLe commented 10 months ago

This is the updated PR to #325 I closed earlier

jeffhuang commented 10 months ago

Thanks. Is the actual substantive change these 4 lines?

        canvas.style.pointerEvents = 'none'
        canvas.style.top = '50vh'
        canvas.style.left = '50vw'
        canvas.style.transform = 'translate(-50%, -50%)'
TungVietLe commented 10 months ago

yeah just that!

jeffhuang commented 10 months ago

hmmm can you say a bit about why this fix works? like it seems to shift and unshift the canvas

TungVietLe commented 10 months ago

You're right. Turn out it was the body padding of the CSS of my website. But I would suggest adding:

canvas.style.pointerEvents = 'none'
canvas.style.top = '0px'
canvas.style.left = '0px'

so that the plotting-canvas would always span independently regardless of the client's CSS files.

Also, you are absolutely correct that it shifts and unshifts the canvas. Therefore, top and left equal to 0px would be sufficient.

TungVietLe commented 10 months ago

Also my code editor auto formatted the code, so I'll try to write it in the format of the original