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

kl3m3n

@bmillier Hello,

you will need to give me a couple of more days to implement the features into the GUI-O designer. I am currently working on adding IoT push notifications to the GUI-O app (so you can receive "alarm" messages, even if the app is not running)...

BR,
kl3m3n

kl3m3n

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

fixed some serial port related bugs
proper formatting of initialization string

bmillier

@kl3m3n Thanks! I tried out the beta. .2 and I see that the double quotes are ESCed as I asked. This will save some time and confusion, I think.
I see the serial port changes but not sure what this corrects for. I had reported to Matjaz that if you leave your target MCU plugged into the PC, and select (in my case) the USB-com port that my HC05 is connected to, and which is needed for the live designer to work, that live designer would immediately jump to the comm port that the target MCU was connected to. No problem unplugging the target MCU, but was confusing at first.
I didn’t have time to try this with beta .2
BR

kl3m3n

@bmillier Thanks for the response!

I have not encapsulated the resulting string with "sendMsg". I am presuming not all users will name their function in this manner
The serial port was refreshing in the background, I believe this was the cause of the error. It should be fixed now.

If you have any questions, please feel free to ask.

BR,
kl3m3n

bmillier

@kl3m3n
Hi- Yes, I agree that adding the sendMsg is not necessary- the programmer will know what their specific routine is named.
I just tested to see if Live Designer would work properly with my HC05 Bluetooth port when I still had my ESP32 target MCU plugged in and showing up as a Com port on my PC. It didn't work before the beta 0.2 but it does now.

bmillier

@kl3m3n On another, unrelated topic- I use the ESP32 arduino core version 2.0.3-RC1, since it adds support for the newer ESP32C2, C3 etc. This version works fine with the BasicBluetooth demo you provide, and I am using straight Bluetooth for my current project.
However, out of curiosity, I tried to compile the GUI-O_BasicBLE demo. It wouldn't compile. It turns out that I had to remove the existing,older ESP32_BLE_Arduino-master folder from my Library folder. After that ,it will link with the proper BLE library that comes with the ESP32 vers. 2.0.3-RC1 core. Other GUI-O users, who have also upgraded to the latest ESP32 core library, may have the same issue if they have that other, older library installed.
BR

kl3m3n

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

added image stream widget
added active property (ACT) to enable / disable widget interaction
added tooltips for description of properties (on mouse hover)

kl3m3n

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

ability to copy widgets
minor fixes