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!!
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);}
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+] [MK3S+BEAR]
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!
Image
Here's the image I'm trying to convert, in case you want to fiddle with it.
Are you asking about the 3.5inch display splash image?
Are you asking about this?
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
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!!
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.
Are you asking about this?
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!!
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+] [MK3S+BEAR]
RE: Changing the OctoPrint Splash Screen
Having Problems Finding the Firmware folder. I am also trying to change the logo but I can't find the firmware folder. I only have an overlays folder and that's it. (Btw Im looking into the MicroSD card that I put in my raspberry pi so octoprint can do its work).
I also attached the file of the image that I converted. I didn't understand what were the headers cause I didn't notice any headers.
RE: Changing the OctoPrint Splash Screen
UPDATE: I have figured out where is the firmware folder. I though that Octoprint holds the png file but nope it's inside the actual Prusa firmware so to update the logo you will need to reinstall the firmware for Prusa. Though now the only problem left is the header thingy.
RE: Changing the OctoPrint Splash Screen
UPDATE: Fixed! Figured everything out.
I might make a updated version of your Summary
RE: Changing the OctoPrint Splash Screen
UPDATED VERSION (2.4.0)
from personal experience
Summary
For anyone looking to customize their serial connect screen......
1.) Create an image sized 172 x 138 and save it as a .png
2.) Convert it to binary here: https://lvgl.io/tools/imageconverter Use "Raw" and "C-Array" settings
3.) open up png_serial_printing.c in the firmware folder and replace the old hex values with the new (Prusa-Firmware-Buddy/src/gui/res/cc/png_serial_printing.c)
4.) Save the file.
5.) If you haven't already installed Python then install it.
6.) Open up Command Prompt and locate your Prusa-Firmware-Buddy folder (cd Prusa-Firmware-Buddy)
7.) run the following command: python utils/build.py --generate-bbf
If you have an error while exporting try these following steps:
1.) Allow Python through the firewall
2.) Install pip for Python
If you are still having problems dm me (Foxytisy#2325) or reply here with a screenshot ;D
Enjoy!!
RE: Changing the OctoPrint Splash Screen
Hello, I've been trying to change the screen to my custom preference, but I'm not very good at coding so I can't figure it out
Do I need to break off the tab on the buddy-board and break the warranty to do this?It's not on the octoprint/raspberry pi i do this? I need to connect to the prusa mini with cable right?
RE: Changing the OctoPrint Splash Screen
Yea, I think so. It’s located in the black box that houses all of the electronics. I can’t really guide to where and what to do cause I haven’t yet done it myself. I bet that there are plenty of tutorials out there on how to do it or a forum post here. Sorry.
RE: Changing the OctoPrint Splash Screen
I am a bit late 🙃, and I am not sure what you mean by "open up png_serial_printing.c in the firmware folder", where is the firmware folder? All help is appreciated!