Change GUI Design on PanelDue

Area51

Hello guys, you have a great forum here! Very polite and active: that's awesome. I have simple question: Can i change the GUI (Graphical User Interface) on the PanelDue!? I would like to pick other colors and so.. it shouldn't be a big deal I think?! Maybe someone could give me a hint where to begin. Thx a lot. Cheers

Veti

you can find the firmware files here
https://github.com/Duet3D/PanelDueFirmware

Area51

@Veti : thx a lot! your link helped me to understand..
Okey I think I got it: the webinterface can be changed with CSS .. but does that also change the look on the paneldue?! Does the PanelDue has a browser built in!?

Veti

no you will need to change the sources yourself and compile it.

Area51

@Veti :Do you mean I have to change the files with "..cpp"(C++?!) and then compile them!? So it is a big deal!?

A Former User

@Area51 said in Change GUI Design on PanelDue:

CSS

no css, just c++ https://github.com/Duet3D/PanelDueFirmware/blob/master/src/ColourSchemes.cpp

then to build https://github.com/Duet3D/PanelDueFirmware/blob/master/BuildInstructions.md

Veti

@Area51 said in Change GUI Design on PanelDue:

Do you mean I have to change the files with "..cpp"(C++?!) and then compile them!? So it is a big deal!

yes. remember that these are embedded devices. every bit counts. so not every feature has space on the device

Area51

Okey thx a lot. I'll try to change the looks. Wish me luck.. ^^

Area51

@bearer: hmm wait a sec. I have already changed the looks of the webinterface. And I only did it with HTML/CSS. Is there a benefit if I do everything in cpp?

bot

@Area51 The looks of the web interface are not C++, it's HTML/CSS/etc. like you discovered. The PanelDue is much different.

Veti

@Area51
the paneldue does not work with css. its not a web browser

Area51

@bot: Is there a hint in the forum where to begin with the paneldue?! Or which files to change in git?
@Veti: thx for you answer.

wilriker

@Area51 @bearer linked to the file that holds the color schemes. You can edit one of the three schemes to your liking and then select this one on the Setup tab after compiling and flashing.

EDIT: The available color names you will find in the corresponding .hpp header file.

EDIT 2: but you are not limited to these. PanelDue uses 16-bit color (5-6-5). You can select any color you want and convert it to 16-bit representation and use that.

Area51

@wilriker: okey thx. That should be easy. Even for me ^^ what if I want to change buttondesign!? or if I want to add a picture of my dog in the background?! Where should I start, which file in git?

wilriker

@Area51 Changing button layout completely will lead you into the rabbit hole of framebuffer painting.
It's all in Display.cpp and starts with ButtonBase::DrawOutline() and continues with the various button related Refresh() methods.

To get the picture of your dog in the background you need to convert this into one of two formats. Either a 4-bit palletted byte representation or a (run length encoding compressed) 16-bit color representation. I will release a small tool soon to do at least the former but I currently fail to create valid output for the latter.

Area51

Is it possible to update the Duet via Wifi?!

Veti

@Area51
please read the documentation
https://duet3d.dozuki.com/Wiki/Installing_and_Updating_Firmware

wilriker

@wilriker said in Change GUI Design on PanelDue:

To get the picture of your dog in the background you need to convert this into one of two formats. Either a 4-bit palletted byte representation or a (run length encoding compressed) 16-bit color representation. I will release a small tool soon to do at least the former but I currently fail to create valid output for the latter.

And now I managed to get this fixed. It's a new implemention of bmp2c written in Go and pre-compiled for the three major OS's. You can find it in the dev branch of PanelDueFirmware in the directory Tools/gobmp2c/(linux|macos|win). It's a command line tool

It can be used to either convert Icons into paletted byte representation (check bmp2c.go function getPaletteIndex() for available colors and source colors that convert to that). That will output contents for a C++ header file.

The other mode is adding the -binary parameter and that is supposed to be used when you convert a splash screen into a RLE compressed 16-bit color representation.

I will add a README the coming days but wanted to just put a short notice into this thread already.

zapta

@Area51 said in Change GUI Design on PanelDue:

Does the PanelDue has a browser built in!?

That would be a great idea.

M7460

Hi did anyone manage to make changes? If there is anyone that knows how I have a paid project if anyone is interested.

Martin