Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GUIslice Builder - tool for GUI code generation #79

Closed
ImpulseAdventure opened this issue Nov 8, 2018 · 20 comments
Closed

GUIslice Builder - tool for GUI code generation #79

ImpulseAdventure opened this issue Nov 8, 2018 · 20 comments
Labels
Builder Relating to GUIslice Builder tool feedback requested Looking for input from users on idea

Comments

@ImpulseAdventure
Copy link
Owner

ImpulseAdventure commented Nov 8, 2018

I am pleased to announce that @Pconti31 has managed to create a front-end GUIslice Builder desktop application that can help generate GUIslice layouts!

The cross-platform program includes a graphical editor that enables drag & drop placement of UI elements. Once a GUI has been laid out, the Builder can then generate the functional GUIslice skeleton framework code, for both Arduino and LINUX targets.

The generated output code (.c, .ino) includes all of the necessary defines, UI storage elements and initialization in addition to the placement of the UI elements. This should greatly improve the ease in creating a new GUI.

image

One nice feature is that the user is then able to add their custom application code to the framework and then continue to make UI revisions within the Builder.

Status: The GUIslice Builder tool is in very early beta testing at the moment. Initial beta release will include a java archive (.jar), with full source to follow later. Further updates will be posted to this issue.

Documentation: GUIslice Builder wiki (in progress)

Acknowledgements: A huge thanks again to Paul for taking the initiative on this!

@ImpulseAdventure ImpulseAdventure added the feedback requested Looking for input from users on idea label Nov 8, 2018
@espHorst
Copy link
Contributor

espHorst commented Nov 8, 2018

This is really cool!
Very useful!

Some thoughts on this:

  • is there a chance that the generated code is placed in a automatic_generated.h header file? In the main program you just include the .h file and in the setup() of the main file you just call a setup_function() of the .h file. Then it would be possible to redo the gui without the need to retouch the application code.
  • in this .h file there could be a section /* config info of the gui builder with all the config information in gui builder language */ that you do just need to read the .h file into the gui builder to rework the gui? Thus you don't need to keep an extra gui builder file.
  • And if it is java - is there the chance that this gets a pure web application? No need to install it, just design the gui online on your web site? Thus no need to install the java ...

@ImpulseAdventure
Copy link
Owner Author

Good feedback... I think Paul might be able to offer a more informed perspective (at least based on what exists today and with knowledge of the implementation), but in the interim, here are some of my thoughts. Keep in mind that I'm not yet familiar at depth with the design nor the potential challenges.

  • Separating out the auto-generated initialization is an interesting idea. As a proof of concept, I tried pulling out all of the init/config from an existing example into a standalone file. The result was a functional GUI with just the following left in the main sketch... so it does seem like there may be potential for a future option along those lines. Still need to think about the best way to handle the auto-generated callback function placeholders, as these would typically be altered by the user.
#include ...
#include "GUIslice_gen.h" // Import the auto-generated GUI Builder layout
void setup()
{
  Serial.begin(9600);
  InitGUIslice_gen();
}
void loop()
{
  gslc_Update(&m_gui);
}
  • Assuming the above approach, conceptually the project config could be serialized & embedded within the same GUIslice_gen.h file, as you point out. A positive side effect is that it may reduce the potential for coherency mismatches between a Builder project and its associated generated/modified sketch.
  • Today, the GUIslice Builder supports round-trip editing by embedding comment tags surrounding the generated enumerations and elements. So long as the user doesn't touch content between these tags, the Builder can identify and regenerate these sections.
//<ElementDefines !Start!>
#define MAX_PAGE                1
#define MAX_FONT                2
#define MAX_ELEM_PG_MAIN        15
//<ElementDefines !End!>
...
bool InitGUI()
{
  gslc_tsElemRef* pElemRef = NULL;
//<InitGUI !Start!>
gslc_PageAdd(&m_gui,E_PG_MAIN,m_asMainElem,MAX_ELEM_PG_MAIN,m_asMainElemRef,MAX_ELEM_PG_MAIN);
...
//<InitGUI !End!>
  return true;
}
  • As for a web-based Builder, I would be happy to host such an interface on my website for users, but I don't know enough about Java to comment on the feasibility/effort of a port (from some very limited reading on the web, it appears that the IcedTea-Web plugin might have been intended to serve this purpose).

@ImpulseAdventure
Copy link
Owner Author

For reference, a wiki page has been created that will address the usage of the Builder in greater detail. More documentation will be appearing soon.
GUIslice Builder wiki

@Pconti31
Copy link
Contributor

Pconti31 commented Nov 12, 2018

  • generated code is placed in a automatic_generated.h header file?

I had discounted this early on because of the need to add various callbacks on a round trip basis.
It would be easy if I only allowed you one shot to get your UI correct.😊

There is a great deal that goes on behind the scenes that could break.

Right now the builder knows if you added code to the button callback or not. If not it adds a new callback for example. It can add a next page api call to the button callback if you check the box on the button's property list. It also adds new call-backs as you add UI widgets that need them.

I'm hopeful, even more automatic code generation could take place in the future.

Of course, It might still be possible and I'm open to ideas but I really suggest you try and use the builder as is first before any changes. I suspect there will be more than enough work keeping up with bug fixers at first.

By the way, another thought I had at the beginning of this project was to take the opposite approach and construct applications as include files and having the .ino or .c something you don't need to edit. For example:

[Ed: applied code format markdown]
appl.cpp

#include <appl.h>
void blink(){
  static byte lastState ;
  pinMode ( 13, OUTPUT );
  if (lastState != HIGH){
    digitalWrite ( 13, HIGH ); 
    lastState = HIGH;
  }
  else {
    digitalWrite ( 13, LOW ); 
    lastState = LOW;
  }
}  

void app_setup() {
  pinMode(13, OUTPUT);
}

void app_loop() {
  blink();
  delay(500);
}

appl.h

#ifndef _APP_H
#define _APP_H
#include <Arduino.h>

extern void blink();
extern void app_setup();
extern void app_loop();
#endif

test1.ino

#include <appl.h>

void setup() {
  app_setup();
}

void loop() {
  app_loop();
}

Of course, A GUIslice builder would have added the various guislice includes and api calls to the .ino file.

  • web-based builder.
    A Web based builder that's a very good idea.

Sorry, but the java based builder as a web based application seems like a very bad idea.
Running java based applications on the web? Oracle and Openjdk have as of java 11 killed tools for such apps. Google chrome, and Microsoft Edge both prevent running java from their browers because of all of the security hacks that have taken place over the years. If everyone was nice it would a great idea. Even if you could get around the blocks within the browsers users would be opened up to to some very serious danger.

IMHO, The correct way to do the Web based implementation is the same as I have done for commercial clients, using Javascript, HTML5 and Ajax. That's a major undertaking, from past experience I would guess it would take 3 or 4 developers 9 months to a year.
The Java version took one person (me) working part time from March 2018, so you can see effort required.

However, other languages could be used that could greatly speed up a web based builder creation, like ruby or python that might make it a much faster implementation. I'm no longer an expert in web based design so take anything I said here with a grain of salt. 😊

@ImpulseAdventure
Copy link
Owner Author

ImpulseAdventure commented Nov 13, 2018

First public beta release of the GUIslice Builder binaries (0.10.4-beta4) has been uploaded to the repository: /builder/ (UPDATE 2018/11/18: now attached to release notes)

Documentation at GUIslice Builder wiki includes installation and link to user-guide.

Please file any bug reports during the beta release in #80
thanks

@espHorst
Copy link
Contributor

@Pconti31: Thanks for the feedback on the feedback!

generated code is placed in a automatic_generated.h header file?

I see the issues with the callbacks - I did not consider this. But I'm happy that you have had the same idea at the beginning ;-)

java based builder as a web based application

As I never did any web applications I was not aware, that there is such a big difference in doing java for the web applications and for direct applications. I thought it is all the same. Now I see, that there is a big difference. But as the GUI builder is available for Linux, I will definitely use it for my next GUI project.

Thanks for this great tool!

@ImpulseAdventure
Copy link
Owner Author

ImpulseAdventure commented Nov 17, 2018

GUIslice binary release (0.10.4-beta5) has been attached to the latest Release Notes:

Major changes:

  • This version was backported to work with Java 8
  • The good news for Arduino IDE users is that this means that no additional Java install is required. The JAVA_HOME environment variable can point towards the existing Java installation within the IDE folder.

Documentation at GUIslice Builder wiki includes installation and link to user-guide.

@espHorst
Copy link
Contributor

This makes the installation much more convenient! Thanks!

@ImpulseAdventure
Copy link
Owner Author

A visual GUIslice Builder walkthrough tutorial has been now been posted to demonstrate how the builder can be used to create a basic GUI application. A second part, demonstrating round-trip edits, will follow later.

NOTE to those who have tried out the Builder beta: please feel free to send an email to guislice @ impulseadventure.com (no spaces) with any comments, questions or suggestions you might have -- I'd be most interested in hearing any feedback so that we can make the GUIslice + Builder process as easy as possible for users. Thanks!

@ImpulseAdventure ImpulseAdventure pinned this issue Dec 21, 2018
@ImpulseAdventure
Copy link
Owner Author

GUIslice Builder binary release (0.10.4-beta7) has been attached to the latest Release Notes:

Major changes:

  • Windows installer included
  • Builder project folder now defaults to Arduino IDE project folder, making interaction between the two environments much easier. Code generation defaults to the same project folder
  • Support renaming of ElementRef field
  • Fix: external string default and clipping
  • Fix: support for extra pages
  • Fix: image button callbacks
  • Other stability & visual fixes

Documentation at GUIslice Builder wiki includes installation and link to user-guide. The installation guide and walkthrough have both been updated for this release.

@ImpulseAdventure
Copy link
Owner Author

Builder source code has now been uploaded to the repository at /builder

@ImpulseAdventure ImpulseAdventure added the Builder Relating to GUIslice Builder tool label Jan 9, 2019
@ImpulseAdventure ImpulseAdventure added this to the 0.11.0 milestone Feb 12, 2019
@ImpulseAdventure ImpulseAdventure removed this from the 0.11.0 milestone Feb 16, 2019
@ImpulseAdventure
Copy link
Owner Author

GUIslice Builder binary release (0.11.0-rc2) has been attached to the latest Release Notes:

Special thanks to VitorH, TonyP, DonK, RonB and AndersG for all the testing and feedback, and PaulC for the release!

Major changes since 0.10.4-beta7:
The following lists the major feature additions and bugfixes in this release.

  • b38: Dragging item in treeview past end of branch crashes (#92)
  • b39: Add scrollbar to design canvas (#93)
  • b40: Renaming first page can cause generate to fail (#95)
  • b41: Ability to specify subfolder in Create Project Folder dialog
  • b42: don't overwrite .bak file during code gen
  • b43: Add Color Wheel and Eye Dropper to Color Chooser
  • b44: Confirm Exit Dialog when user presses windows X button
  • b46: Code gen macro expansions fails certain constructs. This causes duplicate storage names for Page$3 and beyond
  • b47: Ability to import existing .ino or .c GUIslice file
  • b50: Delete not active on new blank page
  • b51: Ability to specify FLASH-based images instead of SD card
  • b52: Selecting TextBox element causes crash
  • b53: Yield can hang if serial monitor not connected
  • b54: Create ElemRef for Image
  • b55: Don't allow 'New Folder' as project folder (protects Arduino IDE)
  • b56: Create install for Mac OS
  • b57: fast clicking on color within property tables causes crashes on mac/os
  • b58: Support modify of text for TxtButtons, fill en, frame en, pElemRef naming, also add frame en to Text Widget
  • b59: TextBox columns and rows not correctly calculated, col always 0
  • b60: TextBox code gen causes crash
  • b61: TextBox Code gen incorrectly outputs "&m_sXGauge[0]" instead of "&m_sXSlider[0]"
  • b63: Text Height and Width not correctly set

Documentation at GUIslice Builder wiki includes installation and link to user-guide.

@ImpulseAdventure
Copy link
Owner Author

GUIslice Builder binary release (0.11.0-rc3) has been attached to the latest Release Notes:

Major changes since 0.11.0-rc2:
The following lists the major feature additions and bugfixes in this release.

  • b67: Fixed LINUX installer
  • b63: Fix XTextbox: Rows&Cols wrong because Text Height and Width not correctly set
  • b66: Fix XTextbox: XTextBox bad values sent to the gslc_ElemXSliderCreate()

Documentation at GUIslice Builder wiki includes installation and link to user-guide.

@Pconti31
Copy link
Contributor

GUIslice Builder binary release (0.11.0-rc4)

  • builder-win-0.11.0.rc4.zip
  • builder-linux-0.11.0-rc4.tar.gz
  • builder-osx-0.11.0-rc4.zip

Major changes since 0.11.0-rc3:
The following lists the major feature additions and bug fixes in this release.

  • b66: Additional Fixes to XTextbox: XTextBox for bad values sent to the gslc_ElemXSliderCreate()
  • b68: Regenerating code increments m_sX* array indices in ElemX*Create() for sliders,progress bars, radio buttons and check boxes.

@rotdrop
Copy link

rotdrop commented Aug 15, 2019

Now that the builder source code has been removed from the GUISlice source tree, are there plans to keep the builder source code available? Thanks!

@ImpulseAdventure
Copy link
Owner Author

ImpulseAdventure commented Aug 15, 2019

Absolutely! We are in the last stages of making GUIslice release 0.13.0 which includes a major update of the Builder. The Builder source was removed from the core library repo (and instead relocated to the following new repo) to reduce the size of the core library tree. The new repo containing the Builder source will be online as soon as we have completed the release:

https://github.com/ImpulseAdventure/GUIslice-Builder-source

@pierbout
Copy link
Contributor

pierbout commented Sep 3, 2020

Wonderful tool! I love it.
Is there any chance I could adapt it to a 2.2' 176x220 TFT screen (ILI9225 library)?

Thanks in advance for your help, and sorry if I didn't post in the best discussion...

@ImpulseAdventure
Copy link
Owner Author

Closing the original status issue as the Builder is now tracked in a separate repository.

@ImpulseAdventure ImpulseAdventure unpinned this issue Sep 4, 2020
@he77PC011
Copy link

Now the interface is English, I want to translate into Chinese

@Pconti31
Copy link
Contributor

Pconti31 commented Apr 1, 2024

@he77PC011 Sounds good to me.
Anything I can help you with let me know...
Paul--

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Builder Relating to GUIslice Builder tool feedback requested Looking for input from users on idea
Projects
None yet
Development

No branches or pull requests

6 participants