Eventually we will need the ability for these elements to scale to screen size

[Cdetviler]

Right now, on mobile platforms especially, elements get smashed together and do not retain the original size and position that they were saved at. This has become a major use-case for the product and will need to be addressed.

[Cdetviler]

I looked into meta-tag scaling to see if it would be possible.

The solution I am thinking of at this point would be to scale items as they are loaded. I have a page-settings object that currently keeps track of things like the background color of the page and the size of the gridlines. I could also have that object keep track of the viewport width which would then be saved along with a configuration.

When that configuration is loaded, wsWebDisplay would first check the current viewport width, and calculate a percentage of the saved viewport width.

so if we are saved on a screen that is 1080 pixels wide, and then load on a screen that is 640 pixels wide the percentage would end up being

640/1080 = 0.5926

Every element that is loaded onto the page would then have their x-coordinate and width adjusted to 6/10 of what it was saved at.

so an element at 100px width would be brought down to 59px. If we saved that same layout again, the page settings object would hold a value of 640. On load, it would perform the calculation:

1080/640 = 1.6875

out 59px element would now be back to ~100px (obviously I can use methods to round and bring them back to their original size) . This is just an end-of-the-day thought, so maybe it isn't the best solution. This is more for my reference tomorrow morning.

[Cdetviler]

I implemented the above. It works pretty well with the exception of loading a layout in portrait mode on a tablet. I am not quite sure how to fix that. I will look into it.

There are also issues with cropping afterwards. I managed to create the algorithm that adjusts background size and position in order to recreate the crop as best as possible, but it is still a little flakey.

In order for the resizing to work with an existing layout, that layout will need to be re-saved. This grants the page-settings with the width and height property used to scale everything on load.

Loading may be somewhat slower now due to everything being shifted and resized. I tried to keep it compact and efficient. If it becomes a problem, I will revisit the issue.

[Cdetviler]

I have been testing a bit this afternoon and everything seems to be coming together with scaling. One thing that I have found to not work correctly is cropped images that come in on a loaded configuration. Cropping itself should still work, but when loading a cropped image, some strange behavior might occur due to the way background-positiong and background-size css properties are calculated within the function. I will look into it tomorrow.

[Cdetviler]

4:3 screens cause issues with cameras with these changes. I will have to adjust how the camera objects and other image objects react to screen size. Currently it causes cameras to appear like they shifted downwards. In reality the container div gets warped and keeps the image centered as it grows in length.