Constellation Overlay fixed for mobile/tablet devices

[32BOBO32]

Hi everyone, I am attaching a package of three modified files that should solve the problems currently present with the display of the constellation layer on our allskycameras based on TJ software (Allsky Version: v2023.05.01_04 - Website Version: v2023.05.01.) The three files to replace those already present on your allsky website are:

➡️controller.js
➡️allsky.css
➡️virtualsky.js

controller.js and allsky.css are both to be load in the main root, virtualsky.js has to be loaded inside the virtualsky folder.

This package fixes the following problems:

▪️ the constellations layer is now correctly scaled also on mobile and tablet devices
▪️ the constellations layer is recalculated every time pages are resized in real time
▪️ the offsets are now recalculated correctly also on mobile and tablet devices
▪️ the "mouse: false" setting is now applied correctly also on mobile/tablet devices, therefore not allowing the rotation of the constellation layer on mobile phones and tablets

Please, before overwrite your files, make a backup copy of them and give me a feedback.

Preview: www.samuelepinna.com/test/

Package Download: www.samuelepinna.com/download/fixed_constellation_TJallsky.zip

[Alex-developer]

Thanks for these and the work to fix them

Since Virtualsky appears to be abandoned I will look at forking it into our project and adding these files.

Thanks for the hard work

Alex

[32BOBO32]

Thank you Alex!

I suppose that the starmap.css modification about #starmap_container position from absolute to fixed may cause some weird effect in case of a index.php personalization. In that case just come back to "absolute" but you'll lose the "live resize" function.

I hope this work may help you for do a better one! I'm not a programmer but I enjoyed did some sort of JS codes reverse engineering

Best regards
Samuele

[32BOBO32]

I suppose that the starmap.css modification about #starmap_container position from absolute to fixed may cause some weird effect in case of a index.php personalization. In that case just come back to "absolute" but you'll lose the "live resize" function.

Just fixed this one too. It was enough to define an overflow-y: scroll on body section of allsky.css and restore the position: absolute on #starmap_container section. I have updated the package available on the first post. Starting tomorrow I'll get to work implementing the changes to new_controller.js as required by @EricClaeys

you want to test the entire package on PC, laptop, tablet and smartphone, checking live resize and all other implementations (correct scale and no rotation on mobile devices) you can do it here: www.samuelepinna.com/test/

[EricClaeys]

@32BOBO32, Samuele,
Thanks a lot for doing this.
We are ready to test a new Allsky release and controller.js in that release is slightly different. Would you mind making your changes into the attached new file?
Most of the changes are my poor attempt to fix things, so if they don't make sense, feel free to change or delete them.

I'll then incorporate all your changes into the new release.
Thanks!!

NEW_controller.js.txt

[32BOBO32]

@EricClaeys here the pack to test: www.samuelepinna.com/download/newcontrollerpack.zip

It includes:

➡️new_controller.js
➡️allsky.css
➡️virtualsky.js

[EricClaeys]

Thanks @32BOBO32.
On a PC when I resize the screen and the image gets smaller, the constellation overlay shrinks at a different rate. That's what I tried to fix with the "fudge" factor.
Here's the image full size. Note where the Moon is in the image versus where the constellation overlay has it (I know my overlay isn't perfect):

This is with the browser window shrunk a lot. Note the Moon in the image is now a fair amount higher than the overlay Moon. It's as if the overlay didn't shrink enough:

If I leave the browser window small and refresh it, I get this:

The Moon is in yet another location. And the "?" box isn't in the upper right corner.

If I then enlarge the browser window so the image is as large as it gets, I get this:

Do you see the same thing?

[32BOBO32]

🤔 never had these issues.. which browser and OS are you on? I check everything on W11 with Edge/Firefox and Chrome. Do you have same issues on mobile device? Did you overwrite also allsky.css ? Because I see your left panel has different color palette of default one.
Same issues also here? https://samuelepinna.com/test/

Delete all cache from browser after the overwrite.

[EricClaeys]

Please disable showOverlayAtStartup and enable keyboard in configuration.json, then change line 175 in controller.js to

$(".starmap_btn_help").css("right", -c.overlayOffsetLeft + "px");

You should notice that resizing the screen clears the overlay due to line 54 in controller.js. Can the "if" statement (which is always true) and the reload be removed? IMHO it doesn't look good to always see the "Loading" image anytime the screen is resized.
The "starmap_btn_help" change above should put the "?" button on the top-right of the image.

There's no good way to resize a mobile device's screen, so what I had in the screenshots doesn't appear.

[32BOBO32]

Thanks for the suggestions!
I disable showOverlayAtStartup and enable keyboard in configuration.json in test page

I have implemented your code relating to help_bt in the two possible conditions (rezize and non-resize) so that it is always correctly displayed on the screen at the top right.

If resize exists then
$(".starmap_btn_help")
.css("right", (-c.overlayOffsetLeft+18)*scalemargins + "px")
.css("top", -c.overlayOffsetTop*scalemargins + "px");

If not
$(".starmap_btn_help")
.css("right", (-c.overlayOffsetLeft+18) + "px")
.css("top", -c.overlayOffsetTop + "px");

"18" is the empirical width in terms of pixels of the "?" button.

Regarding the refresh condition location.reload(); unfortunately it is a necessary condition that allows the code to correctly apply the recalculated sizes of the constellation layer after a resize event. If I commented out the code by eliminating the refresh, the heights would be incorrect, generating a layer that would not comply with what was requested. I know it would be better to don't have the location.reload(); event but it is required only once per widows resize

I upload the update pack of file here

Best Regards

[EricClaeys]

@Alex-developer, Virtual sky is already in v2024.xx.xx, so no need to do anything.