Announcing GUI-O design tool

kl3m3n

Build a prototype graphical user interface using your PC and Android smart phone or tablet. Then, simply include the generated ASCII commands into your project.

See https://www.gui-o.com/design-tool

kl3m3n

GUI-O design tool updated to v0.0.1-beta.1:

added "File -> Exit" option
added color picker context window with live preview when selecting color property (mouse move outside the color picker closes the context window)

bmillier

@kl3m3n
The GUI-O Live Designer works well in allowing the user to add/customize widgets and

see them on the Android target device
observe the Initialization string that must be sent to the target Android device

However, it would be very useful if the developer could take the Initialization strings shown in the right hand window
and directly incorporate them into their MCU's C code. If you look at GUI-O's demo programs, they send the necessary initialization strings to the target as follows:

sendMsg("|LB UID:title X:50 Y:15 TXT:"Simple light switch" FFA:"font8" FSZ:3.5\r\n");

void sendMsg(const String &msg) {
btSerial.write((const uint8_t*) msg.c_str(), msg.length());
}

As you can see, they are using the String variable type to define and send out an initialization string. If you were to copy an initialization string from the right-hand window of Live Designer, for some commands you could merely paste this (copied) string after the
SendMsg("
and then add \r\n"); at the end.

However, any initialization strings which have the " character embedded in them, will have to ESCAPE the " using a preceding \ character. (As in the LB command shown above).
An experienced "C" programmer will be aware of the need to ESCAPE the " , but it is still a bother to have to do this editing.

I would suggest that it would be a useful addition to GUI-O Live Editor, if there could be an option button which would change the right-hand window's display to a "C" code format. That is:

Add a " at the start of the init. string
ESCAPE any " characters
Add a \n\r" at the end of the init. string.
optionally add a SendMsg( at the beginning and a ); at the end.

Realistically, anyone using the Live Designer app will be inserting the initialization strings into "C" code for the target MCU, and this would be the quickest way to accomplish this.
Thank you.

bmillier

This post is deleted!

kl3m3n

@bmillier
Welcome to the forum!

Regarding the "black area" - no problem, I have fixed this for better readability.

Now back to your original (and more important) topic... You have a valid point. In addition to what you've mentioned, implementing this feature would certainly also reduce potential user errors (due to unnecessary manipulation of the initialization string).

I will implement this ASAP, although it might take a couple of days (kindly bear in mind that I also develop the GUI-O app and take care of the web page and examples - demo programs).

Hope you don't mind waiting a couple of days...

Thanks for your feedback!

Best regards,
kl3m3n

bmillier

@kl3m3n
Hi kl3m3n. Thanks a lot for your fast response and news that you think my suggestion is useful. I am new to GUI-O (started it only last week) and I will have some other questions/comments, I’m sure.
I must say that GUI-O is very much like I would have designed myself- if I had any experience with programming on Android ( I use iPhone/iPad personally but revived an old Samsung Galaxy Note 10.1 by rooting it and putting Lineage 16 OS on it, when I discovered GUI-O).
As I mentioned to Matjaz, I write for Svet Elektronika and Circuit Cellar (here in N.A.) and want to write some articles featuring GUI-O.
Best Regards