LiveEditing DEMO 1

[Youlean]

Hi guys, here is my live editing DEMO. This will make making GUI layout much more easier. Currently it doesn't support automatics code update, but it is not that hard to update it manually. For automatic update there will be a lot of work, and there should be some kind of standard of declaring controls...

Anyways, this live mode currently works like:

Just clicking with mouse - everything is normal.
Ctrl + LMouse move controls snapped to grid.
+ Shift enables snap feature.
+ Alt disables the grid.
+ RMouse enables slow moving.

[unevens]

wow!
that's gorgeous, man.

[stw]

Cool

[Youlean]

Thanks. Here is the update.

Now it works like this:

Click on "E" key to toggle between edit and normal mode.
Click on CTRL to enable snap to other controls.
Click on ALT to disable grid snapping.
Click on Shift and then left mouse on control to get it's info.

[random_id]

I just wanted to say - this is really a cool idea!
If this could be paired with users loading their own knob images, it would allow people to totally customize the GUI.

Are you currently serializing the positions so that it is saved between states?

[Youlean]

Originally Posted by random_id

I just wanted to say - this is really a cool idea!
If this could be paired with users loading their own knob images, it would allow people to totally customize the GUI.

Are you currently serializing the positions so that it is saved between states?

Thanks. I think that I don't understand what you mean by "serializing" part...
Anyways, for now this doesn't do anything to code automatically. It is intended to move and resize controls and get it's position and size and then you can manually type in the values inside you project. Making this automatically is not impossible but it will be a huge work and it will require some standardization how control position and size is declared.

For now it will stay like this (I won't work any more on it), but in the future I have idea to make GUI fully editable with adding/removing controls etc. (This will be way better implemented than JUCE imo...)

[Youlean]

I did this mainly because making GUI layout was really pain in the ass because you needed to set position, then compile, then if it is not OK do it again.....

[earlevel]

Yes, a very cool thing. So far I've been lucky that my first plugin had a simple interface. The next two are recreations of (my own) existing plugins, so the GUI was copied. I was thinking I'd want to be able to do something like you've done, so thanks.

("Serializing"—google "serialization". "Chunks" are a way of serializing a plugin's parameters and saving it as a preset, for instance, and restoring.))

[random_id]

Originally Posted by earlevel

("Serializing"—google "serialization". "Chunks" are a way of serializing a plugin's parameters and saving it as a preset, for instance, and restoring.))

Yeah, I was just thinking that a loop could be setup to serialize all of the control positions and save them, then it could be recreated on load.

The truth is, your modifications to the GUI make a lot of things possible - which is really cool.

[Youlean]

serialize all of the control positions and save them, then it could be recreated on load.

Thanks guys.

This could be actually easy to do, BUT, in that way we will have two sets of controls sizes and positions, one will be hidden in edit file and one will be in constructor which might confuse some people, and it will get in conflict with my GUI resize... I will think what can I done...

[Youlean]

Here is the update. This is a prototype of what you where asking for...

[Youlean]

Another update. Now class automatically generates another class that will hold all edited values. In this way all values are updated at compile time. No need for external files to store and load the values...

[Youlean]

New update. Added changing control layers position + other improvements.
This is now working nicely, I just need to connect it with my GUIResize class...
Anyways, if someone have some wish, now is the time...

[MidiN]

Absolutely stunning work, purely amazing!

Please keep us updated on when and how this will be available

[Youlean]

Originally Posted by MidiN

Absolutely stunning work, purely amazing!

Please keep us updated on when and how this will be available

Thanks. I am currently working on undo/redo function, when I finish that I think that it will be ready (for testing)..

[Mimo]

Thanks for this!!!

(I hope to know enough to contribute )

[Youlean]

Here is another demo. Now there is undo/redo and selection. That is it, I think that I will not add anything more...

[Youlean]

Lol, I forgot that there could be situations where draw rect and target rect is not the same...
Here is the updated version that will handle this...

USE:

Press E key to activate;
Press B to change editing mode to include both draw and terget rect;
Press D to change editing mode to include both draw;
Press T to change editing mode to include terget rect;
Press ALT while moving control to unsnap from grid;
Press SHIFT while moving control to snap to other controls;
Press SHIFT + B to force snapping to controls that have same draw and target rect;
Press SHIFT + D to force snapping to controls to draw rect;
Press SHIFT + T to force snapping to controls to target rect;
Press CTRL + LEFT MOUSE BUTTON and drag to make a selection;

[Youlean]

And for people that don't understand what is going on here is example how to use it on IPlugMultiTargets.

You need to add this code after last include in your plugin cpp file:

#include "LiveEditLayout.h"

LiveEditLayout liveLayout;

Then you need to add after "AttachGraphics(pGraphics);"

  liveLayout.SetDefaultViewLayout(pGraphics);
  pGraphics->LiveEditing(16);

Then you need to create LiveEditLayout.h, or copy it from somewhere to your plugin folder. Here is a blank example.

// Do not edit. All of this is generated automatically 
// Copyright Youlean 2016 

#ifndef _LIVEEDITLAYOUT_
#define _LIVEEDITLAYOUT_

#include <vector>
#include "IGraphics.h" 
#include "IPlugGUIResize.h" 

class LiveEditLayout 
{ 
public: 
	LiveEditLayout() {} 
 
	~LiveEditLayout() {} 
 
	void SetDefaultViewLayout(IGraphics* pGraphics) 
	{ 
	}

	void SetGUIResizeLayout(IGraphics* pGraphics, IPlugGUIResize* pGUIResize)
	{
    }

private:
	std::vector <IControl*> originalPointers;
};
 #endif

And that's it! Enjoy GUI live edit!

NOTE: The only API difference from my branch to WDL-OL is that you are loading bitmap pointer instead of bitmap. This is because of bitmap GUI resizing...

Here is the example how you should load the bitmap:

IBitmap *tube = pGraphics->LoadPointerToBitmap(BACKGROUND_ID, BACKGROUND_FN);

[snooks]

Cool, I noticed a small crash bug caused by 32 vs 64 bit stuff in RetrieveOldLayoutChanges. I've change the unsigned variables to size_t...

size_t start_index = oldCode.find(findStart.Get());
size_t next_start_index = oldCode.find("        // class", start_index);
size_t end_index = oldCode.find(findEnd.Get());

... because unsigned was storing a different value for not found than oldCode.npos on 64 bit which made oldCode.substr go way out of range because of the difference, causing the crash. 32 bit was the same value so didn't go out of range.

Thanks for all the work here!

[Youlean]

Originally Posted by snooks

Cool, I noticed a small crash bug caused by 32 vs 64 bit stuff in RetrieveOldLayoutChanges. I've change the unsigned variables to size_t...

size_t start_index = oldCode.find(findStart.Get());
size_t next_start_index = oldCode.find("        // class", start_index);
size_t end_index = oldCode.find(findEnd.Get());

... because unsigned was storing a different value for not found than oldCode.npos on 64 bit which made oldCode.substr go way out of range because of the difference, causing the crash. 32 bit was the same value so didn't go out of range.

Thanks for all the work here!

Thanks for the bug fix! This is still working version of the code. Currently if is full of mess, and I plan to make it more readable soon... The most important thing is that it works..

[snooks]

When I try to use IPlugGUIResize with one of my own plugins I get a knob that isn't displayed correctly.


When I use the knob in IPlugGUILiveEdit I get a similar result. I've uploaded it to the Stash....

https://stash.reaper.fm/v/28118/main-...115x115x51.png

.... in case you have any ideas. It works in wdl-ol.

Oh and I attach a background image the size of the GUI (1200x800 in this case). Resizing isn't perfect when running standalone until you wiggle the resize control.

[Youlean]

This graphical glitch is probably caused by LICE_MemBitmap line align. Did you put some custom value here?

I will take look at this. What did you mean by "Resizing isn't perfect"?

[Youlean]

OK, I can reproduce graphical glitch. I will take care of it...

[snooks]

Thanks, maybe the resize glitch is related.

The resize issue I am seeing is that the window is opened at default size with the controls at default positions, but the images are all scaled to the last scale. Wiggling the resize control gets everything to the right scale again.

This does not happen with your test plugin.

[Youlean]

Can you post a screenshot, or better video? Mac/PC? For now render your knob to 116 pixel to play with the GUI resize if you want...

[Youlean]

OK, I think I know. For graphical glitch at start copy app_wrapper folder from my test plugin to your plugin...

[snooks]

Woot!! Yup, the app folder fixed the resize on start issue and rendering to 116 fixed the knob rendering. Thanks!

[Youlean]

I have pushed a bugfix for this. Now it should work perfectly...