Considering using LVGL for Citrine

My projects
1

Hi,

My name is Gabor de Mooij (from the Netherlands) and I am developing the Citrine programming language (https://citrine-lang.org/).
Citrine is a localized programming language, to make it simpler for people to write code in their native language. While the language is good to make simple games, its capabilities for GUIs are really limited. So, I was thinking of using LVGL and its upcoming GUI builder (maybe EEZ Studio as well) to add GUI support.

The idea is that users can use these GUI builders to export GUIs. They can import them into the language, through one simple command and then start interacting with the GUIs. They can also use template GUIs (predefined). The reason for this approach is the fact that Citrine is localized and it would be very complex and time consuming to translate all GUI operations in all 110+ languages. So, by importing the GUI file and just handling custom named events and set custom named properties, the language issue is circumvented.

Citrine allows users to export apps and games to Windows, Linux, MacOS, Android, iOS, Web and Steamdeck. Support for HaikuOS and QNX might also be included.

Any thoughts? Do you think this is a somewhat useful decision? Any tips or recommendations maybe? Maybe this is just a very bad idea, but it looks nice. LVGL really looks awesome, and I love the generated c-code. Also, I currently use SDL2 as a backbone, and LVGL seems to have SDL2 drivers as well, which is another match. Please give me some feedback.

cheers,
Gabor de Mooij

2

Hoi,

Citrine seems interesting. Care to explain how you enivision importing the GUIs into citrine? A GUI written with LVGL is just C code.

Groetjes,
Tinus

3

Hai,

Dankje! I added a small diagram to illustrate my current plan. Maybe I am approaching this from the wrong angle, but this is my initial idea. The user can just create a nice GUI with EEZ Studio or the upcoming LVGL editor. After that, the resulting folder passed to an adapter (I might also offer this as a web service like I do with the editor, for convenience). The adapter modifies the code (if needed) and compiles it a DLL, Dylib or SO. The resulting dynamic library is then imported through the ‘link:’ command (koppel: in Dutch). After that, the user obtains a GUI object. Events from the GUI are passed through as events while messages to the GUI are passed to the c-code. I probably miss a few steps (I always do), but we’ll see how far we can get. :wink:

guibuilderflow
guibuilderflow1056×816 168 KB

Of course, one issue I can spot right away is that by creating an .so I tie the component to a single platform. So instead I might defer this stage till later and keep it in C. Or make a bundle with several dynamic libraries all-in-one. But this is the general idea, I still need to figure out the details. :grinning:

groetjes,
Gabor

4

Hi Gabor,

Do you maybe have Hungarian roots? I’m also Gabor but never heard this name in other countries. :slightly_smiling_face:

To answer your technical questions: if you are aiming for multiple human languages wouldn’t the English interface of the editor’s be an issue? In our new editor we are planning to add localisation support, but it’s a longer term plan. (Fyi, preview video is available here)

Anyway, I think integrating lvgl in the way you described is absolutely doable.

5

Hi Gabor,

Thanks for your reply. The name “Gabor” (it’s my first name) is not very common in the Netherlands and I have no Hungarian roots as far as I know. I think my mother just thought it was a pretty name. :grinning:

I already watched the preview video, it looks great. I don’t think it’s much of a problem that the interface of the GUI builders is in English. I probably make a basic GUI template for the beginners anyway. I will keep you updated on my progress.

cheers,
Gabor

6

I also think that it’s a pretty name :smile:

Thank you for keeping us updated! I’d be happy to help if you face any LVGL related issues.

7

Hi Gabor,

Your idea of using LVGL with Citrine looks really cool! I like how you plan to make it easy for users to create GUIs with templates and keep things simple across different languages. Using dynamic libraries for different platforms sounds good, but I agree, it might get a bit tricky. I’m excited to see how it turns out!

Good luck.

1 Like
8

Thanks, yes everything about Citrine is tricky. And it’s my main income for the coming years so wish me luck (oh, you did that already lol). It will be quite a rollercoaster ride haha… I plan to start this project in January, currently finishing the features that promised my community earlier. Anyway, it has been really fun working on Citrine in general. LVGL will make it more interesting for a larger community.

9

You’re welcome, Gabor, It sounds like you have an exciting journey ahead with Citrine. Good luck finishing the features for your community—they’ll surely love them. I’m excited to see how Citrine and LVGL come together next year

10

You might have seen that LVGL already has a MicroPython binding. It means the users can use LVGL directly from MicroPython:

btn = lv.button(lv.screen_active())
btn.set_x(100)
lv.label(btn)

Can something like this be interesting for you?

11

Yes, I have seen this. In my case this scenario might not work because I have to implement the bindings in 110 languages. So I was considering something that resembles a template, with slots and events that can be named by the user. But if that does not work I could always try this approach as well. Thanks for the tip anyway!

1 Like
12

Update:

  • Currently using a modified makefile to compile LVGL as a DLL/SO. Works great!
  • Created wrapper for EEZ Studio output files to connect the GUI events and getters/setters of variables to Citrine, also works great!

So I am now building an ‘adapter’ that automates the things listed above. So you’ll just feed it the output of EEZ and it will generate a ready-to-use plugin for Citrine.

I will also look into the new LVGL editor (looks great!), runtime loading of XML is a very interesting feature, but I might make a similar adapter for raw LVGL-editor output anyway if possible. Have to do some research…

I will keep you guys updated on my progress, thanks for this wonderful project, LVGL is great!

cheers,
Gabor

1 Like
13

Congrats for the great progress!

If you need any questions about XML loading, please let me know.

14

XML loading is really great, I decided to change my approach because it makes the implementation so simple!

If you’re curious here is a demo video of my current proof of concept

xmlguidemo

Please, keep in mind that my programming language is localized, so here you see the Spanish version for instance.

Instead of raw xml I use a localized XML-object that allows me to write xml as if it were just code. So no special tags/markup needed. I have also created one in English and Dutch.

Thanks for this wonderful feature!

cheers,
Gabor

15

Looks very interesting! Can you share some code as text too? It’s a little bit hard to read in the video.

16

Here is the text from the video. This is a demo for a Spanish user that is interested in this feature. I am also working on a version in my own native language (Dutch) and English.

>> a := 
xml claro
componente
elementos
	vista
	extiende: ['objeto'],
	id: 100,
	burbuja-evento: ['verdadero'],
	altura: ['400px'],
	ancho: ['800px'],
	elementos
		objeto
		burbuja-evento: ['verdadero'],
		ancho: ['100%'],
		altura: ['100%'],
		elementos
			boton
			burbuja-evento: ['verdadero'],
			id: 123,
			elementos
				etiqueta
				texto: ['HAZ CLIC'],
				cerca
			cerca
		cerca
	cerca
cerca
texto.

Citrine is a very simple language, it’s just classless smalltalk with c style braces. Basically the only thing you do is either assign a variable or send a message to an object. The language does not have if-statements, while-statements, functions (only tasks) or classes etc. The example above uses an XML-object that supports generic messages, so whatever you send to it, it converts it to a part of an XML string.

Hope this makes it a bit more clear. If you have any questions let me know! I really like the XML-feature. This week I will try to finish the GUI-plugin. Maybe I can also help implement XML for some of the other elements (textarea). I have my own LVGL branch so I can just try. I plan to create a password app for Linux and Android as a demo later this year.

cheers,
Gabor

17

Here is an example of the English version:

>> a := 
LVGLEN new
component
elements
	view
	extends: ['object'],
	id: 100,
	events: True,
	height: ['400px'],
	width: ['800px'],
	elements
		object
		events: ['verdadero'],
		width: ['100%'],
		height: ['100%'],
		elements
			button
			events: True,
			id: 123,
			elements
				label
				text: ['CLICK ME!'],
				close
			close
		close
	close
close
text.

Full examples and preview of Windows/Linux plugin are available here: Download Citrine

Source code: citrine/plugins/gui at master ¡ gabordemooij/citrine ¡ GitHub