Using PNG Filmstrips for sliders, knobs and animations

General JUCE discussion
1

screenshot
I want to use loop-Animations in my GUI & GUI Controllers (like Gif’s, videos for logos, knobs, buttons etc.) I want loop-animated buttons, loop animated knobs etc…

So I’ve done these (both knobs and moving animation) using filmstrip PNG images. I also replaced vertical sliders thumb image with an animation which made with filmstrip png image.

Is it the way ? Is there anyway better than PNG filmstrips ?

1 Like
2

Are you having a specific problem with the approach you are using? When you ask if there is something “better”, do you have any particular things that you think would be better?

Using image based controls can result in issues in regards to changing the size of the control.

2 Likes
3

I have compiled the application for windows and there is no problem. But in future, I want to develop cross platform applications for IOS and Android platforms too. I wonder about if this approach causes any issues on other platforms.
The screen resolution will be different on Android or IOS devices. Is using image based controls (such as using stictched images) an applicable method while working on mobile platforms, or should I use a different approach?

4

Render the UI at the largest UI size, then add that component to another Component.

Resize to the current layout size using a component listener and a AffineTransform::scale in the callback once you get the current UI size etc. This probably means using 3x or larger versions and rendering down smaller for the different sized devices.

2 Likes
5

I was searching for the same solution. Filmstrip PNG’s for loop-animation knobs

6

Works pretty good working at the max res you want to support then scaling down just the once in the parent with the affine transform. Im building desktop stuff but the res is pretty high, works nicely.

7

Every resizing introduces artefacts, which is usually remedied with smoothing. So hard edges in your PNG will get blurry with every resizing.
For many renderings it doesn’t matter, it is a compromise you have to decide on.
If you have text in your rendering, it will become to the user very obvious, which is for me the criterion if I would accept it or not.
Also resizing means CPU and memory overhead that you might want to avoid. Again it is your choice, in many cases that argument doesn’t matter in practice.

Those are technical considerations that are the same on any of those platforms.

My personal opinion:

  • A background with little hard contours is totally fine to use a pre-rendered image for.
  • The text annotations on top and possible controls I would try to code from graphical primitives that are rendered directly in the correct size to avoid the blur.

Those two techniques can be perfectly used together.