Now added live value editing! Double click (certain elements) to edit its value, and you can use your normal keyboard editing shortcuts. Yes, Home, End, Shift+arrow, Ctrl+A, etc, are supported! Hands off the mouse now!

Being honest, this feature is mostly implemented by AI. Text logic and selection is a finicky subject to pick up, given the sheer complexity. But I want to make the value editing UX just like at home, like you would on Figma, and many more!

Also, some quality of life updates: re-renders are now automatically scheduled based on your device’s refresh rate. You don’t need to wait for user input now, it happens automatically in the background.

(And yes, free(s) are excluded as usual. Double free() is usually the culprit and yeah, I’m bad at memory management)

Release 1.0 has been out now! MotifDesigner is usable for the general public now! You know what that means? Shipping time!

Oh yeah, don’t forget to report bugs or issues here. Don’t be hesitant. It can be either via your AppImage or your local debug build

Made file specifications in Markdown, as well as a Claude skill (for you, vibecoders /j) so that Claude can generate proper visual files. No code changes, tho. Attached is an example where I instructed Claude to make a simple supermarket POS interface.

Now the hardest part has been done: importing and parsing visual files!

Here’s what I accomplished:

• Parsing of visual files
• Syntax errors and redundancy checks to ensure it is indeed the visual file you are opening
• Auto writing on save whenever you’ve opened something or has saved a new file!

How does the MotifDesigner Visual File format work (.vfl)? (for self programming the visual file)

It’s like XML or HTML (whatever that correlates with both) except the tags don’t end in slashes.
All visual files must have both [MotifDesignerVisualFile] and [EndMotifDesignerVisualFile]. This will contain two critical pieces of information:

• the Version parameter, which you must append (e.g. Version=0.5). It must be inside the VisualFile tag.
• the Widgets tag. Same, enclosed with EndWidgets. This will be the place where you will put your elements here.

I’ll write more of the file specifications if I have more time

Anyway, here’s a video to demonstrate!

Real thing now! You can now export visual files made by MotifDesigner! It will come in a user-friendly syntax, which is human and machine readable, which is much closer to something like XML!

All that’s left is to:

• implement a parser to parse these visual files
• something to make the visual file editing complete before moving in to the IDE side of things

This one, by far the hardest feature to implement: the save dialog. It took me lots of work to do (most was AI assisted) that double frees were actually fired (despite deleting all free methods).

Here’s what’s fully implemented:

• Autotemplating with a default filename
• Sticky file names, so your typed filename never gets lost (e.g. when changing directories)
• And lots of UX improvements for the save dialogs

The rest are relatively easy to implement, as they require little work, such as the open file dialog, etc.

Next steps

Next, I hope that

• There will be basic visual file saving/exporting (*.vfl)
• Parser for those visual files (to open it)
• Lots of filesystem-related operations as well as a robust project management system

Oh yeah, I forgot to log this one, but it adds few QoL improvements. Now, it should feel more modern, hence to the Figma-style handle and nets, as well as adding the bottom blue badge to visualize the exact width without looking at the inspector ever again!

Some features for 0.8 will be on the works by now. This includes:

• Snap to Grid toggle
• Added toggle as a new component
• Overall bug fixes ;)

There will be more during the actual 0.8 release so stay tuned

A lot screwed up, so I decided to fix a lot of them. These are just mostly bug fixes and only a few QoL changes.

For those who are afraid of change:

• Labels should be more legible now (same background as the overall canvas)
• Forced .hpp file generation (because the header implementation is C++, we don’t want it to mix with C only code
• A lot of stubborness during code generation ;)

Hotfix 1 of v0.7 (0.71) is here. Nothing much here, just like the old 0.7 version, except this update are just bug fixes and few QoL improvements.

If you are terrified of change, I’ll wrap up what’s changed in this hotfix:

• The handles and selection frames should no longer offset by now, it is near one-to-one on what you’ll be building at the end (including the header files :D)
• And yeah, the grid should be more visible now.
• At TextDialog.cpp, few improvements were made. The text field will focus first rather than the OK button, so you can type your header class right away, and press Enter when you’re all set!

Quality of life fixes, nothing big, just minor fixes before getting ready to ship at the first phase!

Finally, added one feature that is extremely important or else render MotifDesigner out of its core goals! Now, header (*.h) export is available, which means you can start using it as part of your project! Zero warnings, zero errors, it’s stable now (if there are errors or warnings in .h, it’s either your fault or just file a bug report)

Added a dialog later on for you to answer the questions it prompted you, as well as regex checking (this will be fixed into a more modular approach later on). Regexes still apply!

I’ll probably finish a lot later on (including adding a new visual file, opening a visual file, etc). Right now, this could be the roadmap for future development from now:

Current Goals:

• Implement exporting visual as .h file to be used
• Creating a new visual file, opening/parsing, and saving

Future Goals:

• Fully implemented C++ editor inside of the designer
• Project system (a folder containing the visual file, C++ file and the automatically generated header file)
• Automatic X11/Xm/Xt download if you don’t have one (includes and libraries)
• In-IDE building with g++ and having the ability to run the result binary
• Packaging to AppImage with linuxdeploy and appimagetool
• Add Wakatime/Hackatime support /j (that will/won’t happen)

Lots of bug fixes (I forgot what I did for the past 2 hours logged T_T) but at least, most bugs were shot down and caught. Especially quick mouse kids, who just mess and drag widgets fast, now it’s “throttled” to a fixed 60fps. And also added status bar to highlight the user on what’s going on and what to do with the tool. Oh yeah, also added where you can use arrow keys to snappingly move between 10 units, just for convenience!

(Excuse me, the cursor there is highly offset, I truly apologize for that TwT)

Finally, the feature we all be waiting for! The canvas! This took me a horrendous amount of time, but it sure was worth the experience

It can now drag, scale, and do many transformations like a usual GUI builder would do! And yeah, there were a lot of hiccups (yeah, segfaults and coredump abortions) and managed to fix a lot of them if it weren’t for Claude!

Yeah, basically, it looks like a functioning editor by now! Sure it was interesting!

Now added a check for illegal names using regex! This is done so that you won’t get programmatic errors later on when coding your app in C++ (everyone doesn’t want that!) so it’s better to stay off at the normal naming convention of C

Added new properties panel! This is to ensure precise modifications were being made so that you still have lots of control with the UI building process

A lot of things were done. First off, the menubar for your stuffs later on! You’ll do it there! Second, now there’s a toolbar (still WIP)! As well as a lot of segfaults along the way, we managed to get that working for the start of this!