Hi,
First of all, i give you a short instruction of what my program should do at the end. Its important that you can imagine what I exactly want do do.
Im working on an visualization tool. It should generate interessting light-effects in combination with a video projector (Like Lasers)
It can be used privat, at events, partys, nightclubs. It replaces a Laser, which is very dangerous and where many safety guidelines must be observed.
I already made a program like this some years before (Visual Basic 6.0) - Image of my old tool with german captions:
http://klomeister.eimer-24.de/Daten/SoftwareABC.jpg
And here a video of what it produces with a video projector and some fog in a room:
https://youtu.be/UL7ojzXzCew?t=22s
I have decided to rewrite my tool, because it is not up to date anymore, the GUI isnt good looking and beginner friendly. Furthermore it also runs only on Windowx XP without issues. My old tool uses flash, my new tool should use HTML-5 in combination with javascript to apply some modifieres on different animations.
There are 3 main things which this tool should have:
-
A good working FFT analysis of the current audio, to realize a working intelligent beat detection (I already done this with Xojo)
-
A live control User Interface - to load and modify light effects manually (Add modifiers to different hotkeys etc…) - I will do this later, but thats not my problem
3. A good looking Playlist Editor, where you can load and modify different animations, displayed in a timeline.
And thats the point where I need some help. The aim is to realize a good looking and easy to use interface.
In my old tool I simply used a Listbox, but, thats not up to date.
So i made a reference gui (Its not a real working guy, just an example):
My imagination:
There are different effects available where you can apply different Modifieres: Color Modifiers, Transform Modifiers and maybe some other things too.
On the left side there are some listboxes where the different effects are displayed (Later with better images). These effects you can easily drag into the Timeline. Than a block will be created with the according effect. You can also stretch blocks to set different times, or just delete delete them by pressing “del”. It also need a grid (maybe 0.1 second).
It should look similar to a video editor.
And here is my problem, I dont know how i should realize a GUI element like that. How you would implement this?
Maybe drawing in a canvas or something like this? I also need some informations about the effects later, so I will need some arrays where the informations (effect-type, effect start time, effect end time) are saved. This informations need to be refreshed, if a effect will be scaled, deleted or something else.
But maybe there are already controls avaiable, which can realize my aims. Maybe I can simply use a Listbox with different rows and lines or something like this.
I dont know. Im here to ask you, how you would realize something like that?
Thank you