Creating a PNG Knob Sequence for User Interface Design

How can I create a PNG knob sequence for my user interface design in Tumult Hype? I have tried using WEBNOBMAN as an available source, but it is too slow. I am designing the UI for NI Kontakt and Decentsampler and wondering if it is possible to achieve this using Tumult Hype. Thank you.

https://www.g200kg.com/en/webknobman/

Have you searched the forum, sure there are plenty of examples of knobs :wink:

While I'm familiar with creating custom knobs in Tumult Hype, I'm not sure how to produce a PNG sequence with customised numbers. Can anyone in the community provide guidance or point me to helpful resources? See pics

Screenshot 2023-03-02 at 14.43.15

Sorry, not sure I fully understand,
Are you looking to create a single knob which can be exported as a png sequence and each frame when exported will have a different number set up ?

Can you explain further.

I apologise for not being clear earlier. What I actually want to do is create a custom knob using Tumult Hype, and then animate its rotation. Once I've created the knob, I plan on exporting it as a PNG sequence. I created a demonstration of this process on WEBNOBMAN and would like to achieve a similar result. Please refer to the uploaded videofor more information. Thank you Mark.

An example of a PNG sequence from WEBNOBMAN

seems like create the knob and its animation and then export to png-sequence ...

this is builtin :slight_smile:

1 Like

(I think the WEBNOBMAN image is not helping under standing as each knob looks the same ? )

As @h_classen says.

The extra trick is if you animation normally works by user interaction. Then set an on scene load to run the animation timeline for the export.

This will get things going for the exported sequence.

Using Menu.

File > Export as Movie > PNG Sequence

See export-as-movie docs Section :

knob.hype.zip (15.2 KB)
I have created a custom knob using Hype, and I have attached the zip file for your reference. However, I noticed that the background is not transparent, and the resulting PNG sequence is all different pages.

WEBNOBMAN creates an animated knob as PNG sequencer on a single page. The video shows how custom created knob works on a UI. I also include how WEBNOBMAN functions.

You will need to set the Scene Background as Transparent

Yes that how a PNG sequence export works , an image per frame setup.

Sounds like you mean Sprite.

You could try

File > Export as Movie > Animated PNG which gives a sing file.

Screenshot 2023-03-02 at 4.14.36 PM

Checking the above option will make the export transparent

What do you mean by all different pages? Do you want the export to be a stacked vertical image containing all frames like the example shown?

The convert command can help you do this if you export transparent PNGs: convert -append *.png output.png

Thank you for letting me know about the transparent background setting. I would like to create a vertical PNG sequence in a single file.

Very doable in Figma with Auto layouts

1 Like

You cannot do this directly in hype. @Daniel mentions what looks like a command line that you may be able to use.

Also you may be able to export the pngs as discussed above and the re import them as a Sprite sheet ( see insert menu )

This will create a new png in the resource library with all the images in a single file.
You can then open the projects Package file and dig it out.

Not sure if you can get them in a single line though.

I just wanted to thank you for your help. I really appreciate your time and effort. However, I managed to find a better solution for my project. I came across Strip Generator (Strip Generator | Blog | Wavesfactory) which allows me to export PNG and JPG files easily.

What I did was create knobs and sliders using Hype and export them as a PNG sequence. Then I used StripGenerator (FREE) to create image strips. It worked perfectly for my needs. Also, just to let you know, StripeGenerator is a free tool that you can use to create image strips from your PNG sequence. So, it's a great solution if you don't want to spend any money on this. Thank you again for your help!
knob Project.zip (751.3 KB)

1 Like