Need help - creating a gui element (TimeLine Block Editor)

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:

  1. A good working FFT analysis of the current audio, to realize a working intelligent beat detection (I already done this with Xojo)

  2. 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

Your best option would be to draw this in a canvas. It allows you to have full control over your objects.

Or perhaps with a listbox and use the cellbackgroundpaint event to draw your objects (visual items).

Another thing I played with is using a Canvas Control to do the basic drawing of the background of a timeline. I use different sub-classes of a Canvas Control as individual clips. I add these sub-classes to the main Canvas (Timeline) Control dynamically at run-time.

A canvas is scroll-able. So, I take advantage of the scroll functionality of the main Canvas Control.
Paul explained about scrolling in a webinar.

[quote=303104:@Edwin van den Akker]Another thing I played with is using a Canvas Control to do the basic drawing of the background of a timeline. I use different sub-classes of a Canvas Control as individual clips. I add these sub-classes to the main Canvas (Timeline) Control dynamically at run-time.

A canvas is scroll-able. So, I take advantage of the scroll functionality of the main Canvas Control.
Paul explained about scrolling in a webinar.[/quote]
Using overlaid canvases is going to be trouble if you’re building for Windows. It would be much better to use a single canvas.

So weird to see this thread resurface from two years ago :slight_smile:

I looked in the thread and was surprised the wonderful tutorials from @Alain Bailleul hadn’t been mentioned. I literally finally understood and the canvas “clicked” in my head following them. I’ll leave them here in case someone wants to take a look:

https://alwaysbusycorner.com/category/canvas/

The first post there also links to @Eugene Dakin 's excellent ebook on canvas.

Anyone using “canvas on canvas” REALLY should read the SuperDraw article in xDev 12.5 … because basically you are doing it all wrong.

It can be purchased and downloaded instantly via GumRoad (http://gum.co/DXbT ).

Here is the simplified code for SuperDraw https://www.dropbox.com/s/r0mltxqqd4nas3a/SuperDraw%20simple.zip?dl=0

Basically what you do:

One canvas with an array of drawingObjects
Each drawingObject knows how to draw itself and reacts to events like drag
A draw mehod that calls each drawingObjects paint method so that they draw to the canvas

[quote=407655:@Markus Winter]Anyone using “canvas on canvas” REALLY should read the SuperDraw article in xDev 12.5 … because basically you are doing it all wrong.

It can be purchased and downloaded instantly via GumRoad (http://gum.co/DXbT ).

Here is the simplified code for SuperDraw https://www.dropbox.com/s/r0mltxqqd4nas3a/SuperDraw%20simple.zip?dl=0

Basically what you do:

One canvas with an array of drawingObjects
Each drawingObject knows how to draw itself and reacts to events like drag
A draw mehod that calls each drawingObjects paint method so that they draw to the canvas[/quote]

Yeah, I moved away from the canvas-on-a-canvas method a long time ago. I actually made an array of “drawable” object classes. That seems to work well. Also, I store a rendered image of this object inside the class. Whenever I change a property I clear the rendered image.
I have a method in this class called “image”. It returns a Picture. Whenever this method is called, it checks if the stored picture is nil. If it is, it will render the picture, stores it and returns the picture. If it is not nil, it will simply return the picture. Works like a charm. And it saves a lot of processing time. My canvas-timeline responds and scrolls very fast.