ability to customize default <picture> styling

jsnkuhn commented 6 years ago

Currently if you link a single image in a picture tag you get a default binary styling of: State 0 being the image with a transparent black image on top of it and state 1 being the untouched image file. This is working well in cases where the icons are on a black background. No so much elsewhere.

Existing trackers seem to use filters like brightness and opacity for their 0 state. Would it be possible to apply these kind of filters? In a perfect world customization of filter levels would be great.

examples:

windfish.io uses css opacity: .3; to opacity: 1;
on dwr i used something like filter: brightness(.3); to filter: brightness(1);

In the case of the windfish tracker something along these lines is necessary so that the animation of the instruments does not get out of sync by reloading an image for the second state.

Datyedyeguy commented 6 years ago

So instead of flipping between images it's rather adding/removing effects to the image? Hmm, interesting...

jsnkuhn commented 6 years ago

Yeah it seems to me what gameboy was really trying to accomplish originally with the overlay-ed translucent black gif was to just change the image brightness. I don't know how feasible this kind of thing is as a desktop app but I use it all the time on the web to not need two or more "versions" of a single image. This could greatly reduce the amount of images that we need to store in the program.

jsnkuhn commented 6 years ago

Don't know if this helps at all but here's Mozilla developers network page on css filters: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

also occurs to me that this might be able to help us with folks wanting different colored versions of the mic and speaker icons??

gameboy9 / randoTracker

ability to customize default <picture> styling #29