I've made a graphics editor for TFT_eSPI, U8g2, AdafruitGFX, Esphome

Community Products and Services
1

Hi,
I’ve made an open-source graphics editor designed to help create visuals for TFT_eSPI, U8g2, AdafruitGFX, and ESPHome.

Pick the GUI library or platform you're using, choose your display size, and start building with visual tools — draw shapes, add text, and more. As you work, a code window below will auto-generate the source code you can copy into your project to reproduce the design.

You can import your own images and convert them into data arrays. There's also a built-in icon library to help you get started quickly.

It’s open source and community-supported: https://github.com/sbrin/lopaka
The cloud version is live at https://lopaka.app

There’s even a gallery of editable screens and UI designs created by others, so you don’t have to start from scratch.

I'd love to hear your thoughts:
– What do you think of the idea?
– What features do you wish it had?

Your feedback is the best motivation to keep building!

3 Likes
2

Hello @ilin_pt :slight_smile:

  • The idea is more than interesting.
  • Linux version, French translation, Object libraries (buttons, menu, ...).

Questions:

  • What are the differences with the GUI Builder library?
  • Is there a complete documentation?
  • Is the current version stable to use it in a project?
3

I prefer an application that can be installed on your PC. An ondine application is a hindrance for me... and installing a server only for one application is too heavy for my taste. GUIslice builder works perfectly for me but I am on Linux. If you use TFT-eSPI, you can install the fonts you want in GUISlice builder. Apart from the fact that you cannot install it locally, your application has advantages.

4

Thank you for your questions!
I'm sorry, I can't figure out which "GUI Builder" do you mean. Could you please share a link to it?

  1. There's not much documentation yet. This is to be implemented
  2. it's quite stable, many people use it already
5

Nice Project. Possible Improvements:

  • change values in the Sourcecode
  • real text alignment for TFTe_Spi with tft.setTextDatum(TL_DATUM); etc.
  • support for printing variables instead of fixed texts (input variable name and type, maybe just a template with sprintf ( cString, "%type", variable) , tft.drawText( cString...) )

thank you for your effort
Bernhard

6
  • What are the differences with the GUI Builder library?

A LOT. Seriously.

Here's why I prefer Lopaka:

  • many fonts included out of the box
  • you can draw your own icons or images
  • you can copy and paste objects
  • you can select multiple objects
  • generates code on the fly
  • you can quickly share your project
  • you don't need to download anything
  • overall UX is a way much better IMO
  • works well on any system (I didn't manage to save or export anything with GuiSliceBuilder on MacOS)
7

Thanks! That's a very useful suggestion. I've just added variable fields for layers. Is that what you mean?

1 Like
8

Can it handle button presses too? Touchscreen buttons.

9

Layers are very good. Much better orientation in the generated code.
I just cant figure out, what the checkbox "Declare Variable" does...
In my example https://lopaka.app/gallery/7584/15707
i added texts as placeholders for variables e.g.

    tft.drawString("1000.00", 20, 17);

later, in my program there are float variables for the axis-values and in the final program there will be something like

char Text[10]; sprintf( Text ,"%7.2f", fXCoordinate); tft.drawString( Text , 20, 17);
It would be cool to be able to enter a variable name (fXCoordinate) and select the data type and have the addidional code added (luxury-problem, with the layers in the comment, it is very easy to find the lines in the code).
best regards
Bernhard

10

Aah, i just figured out, what you generate with "Declare Variables" ... That [~] Icon right of the differnet entry-boxes is hard to recognize when it is not selected! Now, as i figured it out, my code looks as follows:

    // fXCoorinate
    tft.setFreeFont(&FreeMonoBold24pt7b);
    tft.drawString(fXCoorinate_text, 20, 17);

    // fYCoordinate
    tft.drawString(fYCoordinate_text, 20, 77);

    // fZCoordinate
    tft.drawString(fZCoordinate_text, 20, 137);

NICE! :smiley:

Just one more thing... i just added a second layer to the project. Many objects are the same so i tried copy-past between layers, which did not work. So i copied the code, clicked the second layer, clicked import code, generated a temporary text-file, paste&save, import.
With the imported code, some texts were offset by a few pixels (maybe those were marked with different alignements in the source screen).

Next tiny improval would be to set the name of the wrapper-funtion to the name of the screen. :slight_smile:
And next for the wish-list: import code from clipboard :+1:

regards
Bernhard

11

Website is great and useful, but why the hell did you implemented this stupid login system where I always have to enter my email address in order to login to your website? Can’t you code a normal username/password system? This is really stupid idea

12

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.