Wind icon animation and non 1:1 aspect ratios

[darkskyapp]

Wind icon animation and non 1:1 aspect ratios

In general, Skycons assumes that you've created your <canvas> objects with a square aspect ratio. (Usually one does this with the width and height properties of the canvas!)

How are you creating your canvas such that this is not the case? (Is its size set externally somehow?)

[peternewman]

Hi @ironwallaby ,

Yeah they're just sized to fit within a div so the whole thing just scales dynamically depending on the page size (and ultimately the number of columns):
https://github.com/peternewman/casparcg-html-templates/blob/gh-pages/templates/fetch-weather-example/index.html#L27

https://peternewman.github.io/casparcg-html-templates/templates/fetch-weather-example/index.html

I can't see a way to set one off the other using CSS and given the horizontal and vertical movements require a 1:1 aspect ratio, it seems either it should be fixed in the Skycons, or the generating code should be tweaked to deal with non-square aspect ratios, which would be cool but I suspect a lot harder, especially to get that wind path looking nice.

Sounds like you're mixing two different things! There's the canvas width and height (which is controlled by the HTML and/or JavaScript), and also it's display size (which is controlled by CSS). The way the canvas is displayed can be controlled automatically in CSS, but note that that doesn't control the canvas size itself! You will either need to set it manually in the HTML or else you will need to use JavaScript to fix the canvas element's size to match whatever the CSS says every time the window is resized.

This is kinda like how a PNG image has a width and height, but you are welcome to display that image on a webpage at any size you like using CSS.

My recommendation is to just set a width and height on the canvas tag that is large enough to account for what you want to do! (Using JS to reset the resolution of the canvases seems like overkill to me.)

As for supporting non-square aspect ratios... Skycons isn't really actively maintained any more, since we at The Dark Sky Company no longer use it for our own webpages. Consequently, we won't be making such a patch in the official version. That said, if anyone wishes to fork the library and implement that kind of a feature, they should do so!

[peternewman]

Sounds like you're mixing two different things! There's the canvas width and height (which is controlled by the HTML and/or JavaScript), and also it's display size (which is controlled by CSS). The way the canvas is displayed can be controlled automatically in CSS, but note that that doesn't control the canvas size itself! You will either need to set it manually in the HTML or else you will need to use JavaScript to fix the canvas element's size to match whatever the CSS says every time the window is resized.

I'm very new to canvas, so that's quite likely.

My recommendation is to just set a width and height on the canvas tag that is large enough to account for what you want to do! (Using JS to reset the resolution of the canvases seems like overkill to me.)

Will that not risk anti-aliasing if you're trying to scale down every 2.5 canvas pixels to one screen pixel for example (a quick test seems to suggest it does)? In my use case I'm not actually interested in being dynamically responsive.

As for supporting non-square aspect ratios... Skycons isn't really actively maintained any more, since we at The Dark Sky Company no longer use it for our own webpages. Consequently, we won't be making such a patch in the official version. That said, if anyone wishes to fork the library and implement that kind of a feature, they should do so!

Would you accept a pull request to either handle non-square (by doing all the complicated maths), or a slightly tweaked version of my current code so the numbers used for calculations are the smaller of the two to keep the correct aspect ratio?

It does risk anti-aliasing, yes. In our own usage, if we wanted the icon to show up as 32px by 32px on screen, we'd usually do something like this:

<canvas width="64" height="64" style="width:32px; height:32px"></canvas>

And then we'd attach Skycons to the canvas. (This was some years ago, when there were usually 2 physical pixels per CSS pixel. I'm personally honestly unsure if screens are higher resolution these days!)

As for accepting pull-requests, if the changes are not especially invasive, we may accept them, but since we can't test and vouch for and support them ourselves any more we tend to recommend people fork the repository. (If you would like us to officially link to your fork, we're happy to do so!) For Skycons generally, we'd probably opt for the "complicated maths" solution—it would be a large (and breaking) change of interface to modify the sizes of the canvases passed to the library, and it's much easier and safer to apply such a hack on your end rather than in Skycons proper!

Skycons is no longer maintained; please fork to do any further work on it!