Notifications
Clear all

[Solved] Changing the OctoPrint Splash Screen  

  RSS
djkirkendall
(@djkirkendall)
Trusted Member
Changing the OctoPrint Splash Screen

I spent an hour or so working through the firmware looking for the handles to change the OctoPrint logo with no luck. Here's what I've found so far:

/src/gui/screen_printing_serial.cpp     makes reference to the class to draw the octo Icon screen and references octo_icon

/src/gui/res/cc/png_serial_printing.c appears to be a C array that defines the screen, but all of the typical header info is missing (H,W, bit depth, etc). It has 22638 elements, which don't appear to conform to what I would have expected to be a 79 x 61 bit array. 

The PNG library has every button and icon except the Octo icon/graphic, it appears as if they released with just a C array to side step the trademark (?)

 

Does anyone have any experience fiddling with the background graphics? I only have an hour or so rooting around, but it feels like I'm overthinking it. 

Can anyone help? 

Best Answer by djkirkendall:

For anyone looking to customize their serial connect screen......

1.) Create an image sized 172 x 138 and save as a .png

2.) Convert it to binary here: https://lvgl.io/tools/imageconverter    Use "Raw" and "C-Array" settings

3.) Strip off the headers and leave only the curly braces with the hex values

4.) open up png_serial_printing.c in the firmware folder and replace the old hex values with the new

5.) Reformat the array to be /n delimited (I'm not sure this is actually necessary, it's just what I did and it works). You can do this with a find/replace ", " to '/n' in notepad++. Delete any extra newlines, and make sure the header format is preserved

6.) You can change the window title by opening up "screen_printing_serial.cpp" and look for "SERIAL CONNECTION" text and replace it with whatever you choose.

7.) Save the file and compile. If it crashes out you did something wrong, probably the header syntax if this is the only thing that changed

 

Enjoy!!

...
Posted : 24/07/2021 9:39 pm
djkirkendall
(@djkirkendall)
Trusted Member
Topic starter answered:
Code Snippet

It looks like this is where the screen is called:

 

//octo iconstatic point_ui16_t pt_ico() { return icon_meas(resource_ptr(IDR_PNG_serial_printing)); }

screen_printing_serial_data_t::screen_printing_serial_data_t() : AddSuperWindow<ScreenPrintingModel>(_(caption)) , octo_icon(this, Rect16((240 - pt_ico().x) / 2, GuiDefaults::RectScreenBody.Top(), pt_ico().x, pt_ico().y), IDR_PNG_serial_printing) , last_tick(0) , connection(connection_state_t::connected) { ClrMenuTimeoutClose(); ClrOnSerialClose(); // don't close on Serial print

octo_icon.SetIdRes(IDR_PNG_serial_printing); octo_icon.Disable(); octo_icon.Unshadow();

initAndSetIconAndLabel(btn_tune, res_tune); initAndSetIconAndLabel(btn_pause, res_pause); initAndSetIconAndLabel(btn_stop, res_disconnect);}

...
Posted : 24/07/2021 9:57 pm
BogdanH
(@bogdanh)
Reputable Member
Octoprint logo

As you probably assumed, it's about image in PNG format... Hex values "89 50 4E 47" at beginning represent ".PNG" characters and are standard signature for PNG images.
To be sure that there's no "secret encoding", I converted your png_serial_printing.c file into binary file png_serial_printing.png (attached below) and it opens normally in image viewer or editor (btw. it's size is 172x138 pixels, using standard 8bit/channel).
Knowing that, it is easy to modify it in image editor or making entirely new image.

To be able to use modified/new image in Octoprint source, you need to convert (binary) PNG file to text file, which has the same (hex) format as c file you provided (that can be easily done in any programming language). And finally, you replace existing content with your resulting c file.
I hope that's what you were asking about.

Mini+ with Bondtech upgrade & modified firmware...
Posted : 25/07/2021 7:57 am
djkirkendall
(@djkirkendall)
Trusted Member
Topic starter answered:
Progress

Thanks for the insights, I really appreciate it!

I tried an online PNG to HEX converter (172 x 138, 8 Bit) and the resulting array came out to 9351 elements. On compilation (this was the only change made since last clean compile) the compiler crashed out. I've attached my resultant file.

While unsuccessful, thanks for the time you took to reply!

 

...
Posted : 25/07/2021 7:07 pm
djkirkendall
(@djkirkendall)
Trusted Member
Topic starter answered:
Image

Here's the image I'm trying to convert, in case you want to fiddle with it. 

...
Posted : 25/07/2021 7:09 pm
bobstro
(@bobstro)
Illustrious Member
Are you asking about the 3.5inch display splash image?

Are you asking about this?

 
My notes and disclaimers on 3D printing and miscellaneous other tech projects
He is intelligent, but not experienced. His pattern indicates two dimensional thinking. -- Spock in Star Trek: The Wrath of Khan...
Posted : 25/07/2021 7:31 pm
djkirkendall
(@djkirkendall)
Trusted Member
Topic starter answered:
It Works!!

I figured it out..... I accidentally removed the spaces in the header when I did a Find/Replace to reformat the CSV to a /n delimeter in the file. I added the spaces back into the const call and viola! It compiles cleanly, and the splash screen has been replaced with the logo. Apparently the sizing is robust enough in the code it will scale.

Thank you so much for the point in the right direction!! 

...
Posted : 25/07/2021 7:34 pm
djkirkendall
(@djkirkendall)
Trusted Member
Topic starter answered:
Mini

No, I wanted (and suceeded) to replace the splash screen on the Mini itself whenever connected by serial. Bogdan's advice was right on point.

Posted by: @bobstro

Are you asking about this?

 

 

...
Posted : 25/07/2021 7:35 pm
djkirkendall
(@djkirkendall)
Trusted Member
Topic starter answered:
End result

Here's the new screen!

...
Posted : 25/07/2021 8:15 pm
djkirkendall
(@djkirkendall)
Trusted Member
Topic starter answered:
Summary

For anyone looking to customize their serial connect screen......

1.) Create an image sized 172 x 138 and save as a .png

2.) Convert it to binary here: https://lvgl.io/tools/imageconverter    Use "Raw" and "C-Array" settings

3.) Strip off the headers and leave only the curly braces with the hex values

4.) open up png_serial_printing.c in the firmware folder and replace the old hex values with the new

5.) Reformat the array to be /n delimited (I'm not sure this is actually necessary, it's just what I did and it works). You can do this with a find/replace ", " to '/n' in notepad++. Delete any extra newlines, and make sure the header format is preserved

6.) You can change the window title by opening up "screen_printing_serial.cpp" and look for "SERIAL CONNECTION" text and replace it with whatever you choose.

7.) Save the file and compile. If it crashes out you did something wrong, probably the header syntax if this is the only thing that changed

 

Enjoy!!

...
Posted : 25/07/2021 8:36 pm
BogdanH
(@bogdanh)
Reputable Member
creating logo

I'm glad you managed it 😀 . But being a bit picky in this regard, I just wish to point on something...

When creating logo, which doesn't fully cover available area, it's a good practice that transparency (alpha) is used for background. Because for whatever reason, it can happen that screen background color changes in future. In such case, it can happen that logo doesn't appear as it was planned and we need to make new logo with according background. If transparency is used, that's not a problem at all: logo will always appear as intended -regardless of background (see attached image).
Yes, chances are small that background color on printer display will change... but trust me, I've learned in past.

Mini+ with Bondtech upgrade & modified firmware...
Posted : 26/07/2021 9:35 am
Share: