# GUI Design PNG formats



## derstefmitf (Mar 25, 2014)

Hey,

does anyone know the exact export preferences I should use when I'm creating my own GUI elements? 
Some of my buttons work fine, some don't. It seems to have something to do with the ppi, but I always use 72ppi (Monitor) and somehow still some of my controls get cropped or shifted. Does it make a difference if I use PNG-8 or PNG-24?
Is there a limitation of height/width when it comes to custom elements? I work with Illustrator. Maybe I need to transform my texts to paths or create separate layers for each state of my button?

I have done everything right in the script and my text file (in the /resources/pictures-folder) is also correct. 

By the way, is there already a dedicated topic in this forum concerning all the GUI design issues? Would be nice to have something like that, so that we can collect all the important information about that topic.

Best regards,
Stefan


----------



## Lindon (Mar 25, 2014)

There's an (occasional) bug in KSP that (slightly) crops your image, - to resolve it make your KSP code define your graphic as 2 px higher and wider than the actual png image..


----------



## derstefmitf (Mar 25, 2014)

Hey Lindon,

thanks. Seems to be working now. So should I do that for all my custom controls, just to be safe? Or did you make the experience that once a control works, it keeps working?

Thanks again. Pretty annoying bug. I think they really should improve the whole GUI design thing with Kontakt 6. The possibility to load GIFs for example would be so cool. 

Cheers,
Stefan


----------



## Lindon (Mar 25, 2014)

I do it EVERY time for EVERY control.... yeah its a PITA.


----------



## mk282 (Mar 25, 2014)

Lindon @ 25.3.2014 said:


> There's an (occasional) bug in KSP that (slightly) crops your image, - to resolve it make your KSP code define your graphic as 2 px higher and wider than the actual png image..



It's not occasional. It's happening only for ui_button, ui_switch and ui_menu.


----------



## kotori (Mar 25, 2014)

derstefmitf @ Tue Mar 25 said:


> The possibility to load GIFs for example would be so cool.


Why use an inferior format like GIF when there's PNG support?


----------



## derstefmitf (Mar 26, 2014)

kotori @ Tue Mar 25 said:


> derstefmitf @ Tue Mar 25 said:
> 
> 
> > The possibility to load GIFs for example would be so cool.
> ...



Okay, that's true. I just meant the option to embed animations into the GUI. APNG would be even better than GIF, but in general you're right. PNG is a great format, but animations would be great


----------



## mk282 (Mar 26, 2014)

You can already embed animations by using PNG, ui_label, and a bit of scripting.


----------



## derstefmitf (Mar 26, 2014)

mk282 @ Wed Mar 26 said:


> You can already embed animations by using PNG, ui_label, and a bit of scripting.



True, but isn't this a CPU heavy process? I'm not an expert but I think with APNG it would be easier and not that resources demanding, right? 

By the way, if I script an animation how fast/often would I need to update the picture (probably via Control_par_pos_X/Y, right?) to get a smooth animation? 24 frames per second? 

Cheers


----------



## nosfoe (Mar 26, 2014)

> By the way, if I script an animation how fast/often would I need to update the picture (probably via Control_par_pos_X/Y, right?) to get a smooth animation? 24 frames per second?



Depends a bit on what you're animating. 24 frames per second give you a smooth animation for sure, unless you're planning to include some fast pans and run your kontakt instruments in an IMAX Cinema  
you'll probably be okay with less than that, just test it...


----------



## mk282 (Mar 26, 2014)

derstefmitf @ 26.3.2014 said:


> mk282 @ Wed Mar 26 said:
> 
> 
> > You can already embed animations by using PNG, ui_label, and a bit of scripting.
> ...



Not really THAT CPUs heavy, really... APNG wouldn't make any difference I'm pretty sure, since it's the same thing that is being done there - swapping frames.


----------



## derstefmitf (Mar 27, 2014)

Thanks for all the advice. I'll give it a try. :D


----------



## Mike Greene (Mar 27, 2014)

You don't need 24 frames per second. The interface is tiny, so it's unnecessary. Also, with most cartoons (excluding Disney movies), the frames only change every _other_ frame, not every frame.

With RealiBanjo, I have animation and depending on tempo, it's typically 10 frames per second. It's not exactly "Snow White," but you can se for yourself how it looks in this video. (You see dancing at the beginning, but near the end, you'll see the dog walking):


----------



## derstefmitf (Mar 28, 2014)

Haha, that's awesome. I love the dog. 
I would like to create something like a glowing button which gets brighter and darker, speeding up and slowing down with the bpm. So that should quit easy when working with opacity, I'll post my result.

Cheers,
Stefan :wink:


----------



## Jonas.Ingebretsen (Mar 28, 2014)

12 fps should work ok for something like a glowing button. Just remember that you need to optimize your image sequence, especially if it's PNG as PNG are 24/32 bit uncompressed image holders, if you try using 8 bit PNG on something that's glowing it'll look nasty. Lower framerate + smaller filesize = less cpu-usage. 

8 bit PNG images look terrible when you use gradients or any filter where the color fades over to another color. If you want to maintain a good image quality and a low file size then I'd suggest you try out something like a PNG optimization tool. There's plenty of them online. They work by converting a 24 bit png down to 8 bit. And instead of using a default set of colors and forcing the image to use those, it instead creates a library of colors from what the image actually uses. This works best on graphics and not so good on more advanced images such as pictures of cute cats. It will look 99.7% as the unoptimized version and it will cut of around 40-90% of the filesize, varying. 


Offline for mac:
http://pngmini.com/
http://pngquant.org/ (library and command-tool)
http://imageoptim.com/

Online:
https://tinypng.com/


----------



## derstefmitf (Mar 31, 2014)

Thanks Jonas,

great advise and I will definitely check these tools out. 

Cheers :D


----------



## FrankTheSmith (Apr 15, 2014)

I'm trying to get the png image I have to loop over and over when a key is pushed and stop when you release it like RealiBanjo.
This is the script I have so far. It's a 10 frame image.

on init
make_perfview
set_ui_height( 8 )
declare ui_label $Image (1,1)

declare $id1
$id1 := get_ui_id($Image)

set_control_par_str(get_ui_id($Image),$CONTROL_PAR_TEXT,"") 
set_control_par($id1,$CONTROL_PAR_DEFAULT_VALUE,0)
set_control_par_str($id1,$CONTROL_PAR_PICTURE,"Test")
end on

on note
set_control_par(get_ui_id($Image), $CONTROL_PAR_PICTURE_STATE,9 )
end on

on release
set_control_par (get_ui_id($Image), $CONTROL_PAR_PICTURE_STATE, 0)
end on


All this does is when I press a key it skips to frame 10 and when I release it goes to frame 1

Help a brotha out


----------



## mk282 (Apr 16, 2014)

It skips to frame 10 because you don't have a loop that would play continuously as you hold a note in the note callback.


----------



## FrankTheSmith (Apr 16, 2014)

I've been reading I need to loop something on forums and other posts.
What has to loop? Like in the Wave Editor section? or is there some script lines I need to add?


----------



## d.healey (Apr 16, 2014)

I haven't tested this but it should work.


```
on init

	make_perfview
	set_ui_height_px(350)

	declare $i
	declare const $NUM_FRAMES := 10
	declare const $WAIT_TIME := 500000

	declare ui_label $lbl_image(1, 1)
	set_text($lbl_image, "")
	set_control_par_str(get_ui_id($lbl_image), $CONTROL_PAR_PICTURE, "Test")

end on


on note 

	while ($NOTE_HELD = 1) {While the key is held}
		set_control_par(get_ui_id($lbl_image), $CONTROL_PAR_PICTURE_STATE, $i) {Go through each frame of animation}
		wait($WAIT_TIME)
		$i := ($i + 1) mod $NUM_FRAMES
	end while

end on
```


----------



## FrankTheSmith (Apr 16, 2014)

Thanks man!
I just had to adjust the wait time so it was a little faster. 
You guys are gonna laugh when I finish this up.


----------



## FrankTheSmith (Apr 16, 2014)

It's waaaaayy smoother in person. The screen recorder just makes the cpu go all crazy. If you don't have subs or nice headphones you won't hear the bass.
http://www.mediafire.com/download/ot1k7 ... y+Bass.zip


----------



## d.healey (Apr 16, 2014)

Well, that was unexpected


----------



## jespana (Jun 22, 2014)

LMFAO that was good.


----------



## JPQ (Jun 29, 2014)

This kind animations are silly thing for serious music products.


----------

