Modern theme to bring Grumpyscreen in line with new MMU panel stylings - #293
Conversation
shawn-makes-stuff
changed the title
|
@pellcorp for your eyes, I apologize in advance for the chore I am leaving you (in draft for now) |
|
It sexy af honestly very very nice! |
|
EXCEPT Console allows input, that needs to be removed from this PR, I have no in principle issues with it, but I dont want it in a PR for UI style improvements. |
|
I love this but I also worry how many chances for crashes have we just added, but I can't dismiss this, the changes honestly are imho breathtaking, and a single UI that scales with resolution is going to simplify so many things. |
|
|
||
| lv_obj_add_flag(delete_btn.get_container(), LV_OBJ_FLAG_FLOATING); | ||
| lv_obj_align(delete_btn.get_container(), LV_ALIGN_BOTTOM_RIGHT, 10, 10); | ||
| // a gcode entry line under the log; the keyboard slides over the log while |
There was a problem hiding this comment.
Adding GCODE input to this does not belong in this PR, open a new PR for this if you want it.
| return out; | ||
| } | ||
|
|
||
| // Seed the log the way mainsail does: moonraker's recent gcode store, which has |
There was a problem hiding this comment.
lets not change the behaviour of components as part of this, it should be purely UI changes please.
|
I'll strip out the console panel input later, I suspected I would need to do so anyway. I'll open it as a separate PR if you want the feature - I like it for the pure fact that I'm lazy and don't always want to run to my computer when I want to send commands manually, but its not strictly necessary. There are a few things in the UI itself that need a few tweaks as well, and the printing screen feels a bit cluttered to me right now. If you have any complaints then do share, wont hurt my feelings! (much) |
|
I love it! I also love the idea of the Console input, I'm just not a fan of PRs that mix concerns and this is big enough as it is. |
|
I think the fans / leds scroll bar is an existing issue |
|
I am curious if the theme config exposed would let me flatten the UI so that the coloured borders disappear so if someone wanted the older cleaner UI, they could hide those new fancy borders which I think are formed by having a different backend colour for certain sections? If that were possible then there might make people who prefer the less busy layout |
|
It wont be 1:1 reproduction, but it can definitely get close with just a couple variables. surface_colour 0x282B30 
Scrollbars dont look great with this flat theme- I wonder if we need them at all? or maybe just some tuning to disable them (visually)? |
|
Disabling the borders makes scrollbars look bad, and I found a few places where we needed some separators even with borders disabled. Probably more to do but with these two commits we can make a flat theme still look pretty good, and not too far off from OG grumpy. 
|
|
I this is great cos then any cosmos reluctance about new theme disappears if it's configurable |
|
Marking ready for review. At least from the UI side, I think its ready for merging. I also added a variable in grumpyscreen.cfg - style: classic |
|
Cheeky bugger, please remove the input field from the Console :-) |
|
So far there is one significant issue but not really related to your changes, config overrides expect to override an existing variable in the main file, but you have introduced a lot of optional cfg file settings, so I cant set style: classic in the override file for example. Also I am just letting you know, I actually do not like the borders at all, I prefer the clean look, so we would need to make that behave as well as before, and honestly we might even drop the borders altogether, im not sure. I need feedback from Cosmos devs |
|
Also I don't like the starting klipper in middle of screen, I really hate having Spoolman in the extruder screen too (that is an existing issue), but I need to go back to old UI to see some of the other things I think I don't really like either. This is all personal preference of course so don't take this too seriously as yet, I am just pondering. |
|
So classic UI the main screen the target field for extruder / bed looks super weird, should try and restore that to OG look. |
|
Ok I am back on OG GrumpyScreen for comparison, so I will be blunt, proper style: classic mode is going to be a hard requirement to merge this, cos I love all the alignment fixes but I actually don't like the new style at all, but for other users who want to be able to style the UI I think this should go forward despite me :-) So the icons on the main screen for extruder and bed need to be much smaller, back to the original size please The Fan and LED screens I much prefer in your new code so that can stay as is, what I had was ugly af For classic mode where the mmu: none I would prefer spoolman gets its icon back if possible, but otherwise I've no particular issues with the layout of that screen. In the extruder screen the temp / speed / length buttons look weird, I prefer the old style more square AND rounded than tall rectangle, with the original small border around. The distance section on the homing screen same thing rounded please but size is fine In the Info screen a bit more spacing between lines please, its too squashed The icons on the vertical tab are too small, need original sizing. |
|
Ok Ive thought about this, I have decided I am not willing to release this theming to the wild. I want to split this PR, all the layout changes, scaling UI, various fixes to alignment, etc can remain. All the theme customisations should be removed and we will consider them in a separate PR, I am uncomfortable with the additional complexity this introduces after its released in terms of testing. So style: classic becomes the objective of this PR, but its not a configuration option it is what the UI looks like. I think we can probably just remove the code that uses the config file to load stuff, just hard code whatever is required to make style: classic work. In addition the MMU screen should be modified to respect the classic look so clean buttons no background, etc. We can then consider adding this theme support separately, but I am not convinced yet its a good idea. |
|
All good! It will take some work to try and split this, but I think it still has some utility anyway. The latest version here has a "flat" ui for mmu if you want to look at that. I will pick this up sometime later, but I am away for a few days. :) |
You understate it, the work you have done is freaking awesome I just want to delay the theming a bit to ponder it but the fixes to layouts are excellent and I just want to focus on this initially. As for splitting it, just remove the stuff from grumpyscreen.cfg, make |
|
So make the Theme object have whatever defaults it has when style: classic is in effect and remove any calls to config object to change that, maybe that might even do it for the split and then fix the various classic mode issues I have noted. |
|
For the MMU style: classic is too flat, the lanes should still have a thin I am going to say subtle border around them like other buttons do on OG Grumpyscreen. I need to look at LED again too cos that looks a bit weird now I am looking at it again in classic mode, need to go back and compare again. So yes for classic mode there is a thin line between each row for LEDs and Fans, I think that should be restored. |
|
For MMU some tweaks to colours: 
The classic UI has this background colour thing too so the initial MMU page, I think tweak the colours make the border the same colour as other borders around other buttons, make the lane buttons the same colour as other buttons, so just tweaks to the colours I think, and of course when clicking a lane it should be going blue not whatever colour this is: 
The old classic style buttons and colours: 
I really wan't the classic UI to be restored as close to what it was for this at least in terms of style, just fix all the structural weirdness as you have already done. I love the idea of the Theme class btw, so that should stay put. |
|
Ok so now I am paying some close attention to consistency in the MMU screen, probably should have done that originally, but with this theming stuff, now is the time to lock it down. The classic mode mmu: 
The buttons should not be blue by default. Blue is for when a button is activated, and is usually only temporarily switched, so we should be consistent with button colour across the app. A separate PR might be required to revisit whether some buttons should even be enabled in certain situations, should eject be available if the spool is not loaded? Should save be available if no changes are outstanding, these can be tacked in another PR. The filament buttons should be rounded, have the little border around them like the rest of the UI button sets. I am not sure but I think maybe the colours should have the same button style, but maybe we need to play with that and see what it looks like. |
|
@shawn-makes-stuff let me know if you want me to put together a single document with all my review comments cos I am finding lots of things and noting them down but it might be a bit hard to follow, although likely Claude can figure out my ramblings if you point it at this issue :-) |
|
@shawn-makes-stuff sorry to do this to you, but I decided to replace wayland with SDL and I think I caused some conflicts for you, but hopefully made you local dev a bit easier, you might need to add back your WIN32 specific fixes though not sure, if you need WIN32 specific for SDL please do this as a separate PR first. |
|
In hindsite and for future PRs I would have much preferred this be delivered in stages, so for instance the code to remove the guppy small screen variant, so the relative scaling would have been a separate commit. Commits like this are a maintainers worst nightmare honestly, and if not for the benefits they quite obviously bring I would normally be saying no. |
One place defines the UI's look: src/theme.h names the colours, radii and spacing, and every panel builds itself from those instead of writing greys and pixel sizes inline. Sizes are given at a 480x272 baseline and scaled to whatever display is attached, which is what replaced the GUPPY_SMALL_SCREEN branches in panel code -- the define now only picks a directory of icon bitmaps and the desktop window size. The look that ships is the one grumpyscreen has always worn: panels and tiles are the page itself, list rows are separated by a rule, and the only outlined things are the controls. A second look with surfaces -- outlined panels, card tiles, rounder corners -- is compiled in behind Theme::modern(), which returns false. It is deliberately not a config key; only primary_colour and secondary_colour remain user-settable, as before. docs/theming.md explains both looks and what differs between them. Layout fixes that came out of building the above: - fine tune / homing: Back stands as tall as the selector beside it, so it lands in the same place in either look, and the captions clear the panel edge - exclude objects: the plate fills the content height, so its margins are the screen's own on three sides; the legend names the colours that actually get drawn; the numbered marker is a tap target in its own right, so a ring-shaped object can be hit on its number - print status: slimmer progress bar; the readouts keep their hairline frame - MMU: one rim width for a spool's disc and its hole; a chosen material wears the accent fill every other control uses; the header and the lane tiles take their fill from one place, so they cannot drift apart - extruder: the keys shrink into a short cell rather than overflowing it - scrollbars are gone; lists swipe, and manage_scroll only keeps the scroll flag in step with the content so a short list does not bounce Makefile: SDL_RES=<w>x<h> sizes the desktop window, which build_sim.sh already advertised but nothing implemented.
0382214 to
291eb97
Compare
|
Classic now replicates OG grumpy much more closely, except where the layout was intentionally modified. "Modern" theme is still included, but not exposed like it was previously. Actual custom coloring/theming work can be added later using the base thats already here. Spoolman is still a shortcut/button instead of an icon. I felt sharing an icon with mmu would be confusing, and because mmu lives in the nav sidebar it got priority. The mmu panel feels like it fits a bit more than it did originally, using the button shade as the color instead of the darker panel color I had before. The "active" spool gets a blue border similar to the active buttons, pressing turns it the dark grey that pressed buttons use. |
|
I will build the latest code and get back to you with any further issues, I actually will likely write a doc this time and share it here so you can see at a glance all the things https://docs.google.com/document/d/1rX4cJr1fBRz7ey90vippmsLXMK2DUm4gY0ffEwcit0k/edit?usp=sharing |
|
The doc now has all my comments, there are not that many, its very close :-) |
|
Oh I finally got to see it loaded, the blue outline is different than what I expected and makes sense, but the buttons and lane needs to flash blue when tapped still. |
finally got my virtual-klipper-printer to handle loading :-) |
|
Old Grumpyscreen: New Grumpyscreen: |
|
So it looks like ram increased by 0.1%, but cpu usage dropped so thats a win from me :-) |
|
You are so close, the rest of the buttons in the MMU also need to flash blue too like the rest of the UI |
|
Maybe im misunderstanding so forgive me if I seem a bit dense, but only the standalone icons flash blue when pressed. The buttons (like the ones for extruder speed, length etc) turn the same dark grey as the background when pressed. It is slightly different I guess, in the sense that the back button, for example, is a button rather than an icon- so it follows button styles. 
|
|
As discussed |
The right-hand tiles get a column of their own spanning every row, which is where they used to live. That frees the header to be the readout's height again rather than a quarter of the screen, so the three selector rows get their room back -- they had been squeezed from 78px to 60px, which is what put the empty band above the speed section. Spoolman goes in that column as the fourth tile, so it lands in a full tile's slot rather than in the header cell. All seven tiles are styled in one loop now rather than six in a loop and Spoolman on its own, so a change to how a tile looks reaches every one of them. Tiles lose their vertical padding, which they never had before the theme work. An icon is fitted to whatever its cell leaves, so that padding was taken straight off the icon and every tile in the UI read smaller than it used to. Icons come out 32-36px against the 33-38px they were.
Load/Swap and Eject Spool take the accent under a finger the way a lane tile does. LVGL's own theme darkens a pressed button with a colour filter, so that filter is switched off for the pressed state or it would shade the accent rather than show it. Backup, Save and Back are icon tiles sharing a row, built through ButtonContainer like the tiles on the extruder panel, so a tap turns the icon the accent colour without that having to be wired up here. Back gains its label. Collapsing the old full-width backup button and the save/back row into one row is what freed the height the trays below need. An icon tile has no "on" fill, so an assigned backup now says so by tinting its glyph the accent, where the old button said it in its text. The colour presets and the materials each pick one out of a set, which is what a selector is, so both wear the selector's tray: the hairline goes round the group, never round each swatch or chip. Swatches are squares -- the row is given the width a swatch works out to as its height, measured after layout rather than assumed, so they stay square at any resolution. With the swatches sized by their own content the colour section no longer needs to stretch, so the slack it used to swallow below the grid goes to the action row instead: the material set moves up and the icons get the room.
Backup, Save and Back sit in the right-hand panel, and a set of controls gets one box round it rather than a box each -- the panel is that box. use_plain instead of use_card drops the card and leaves everything else: the icon still takes the accent under a finger, which comes with the tile rather than with the card. Classic is untouched either way, since use_card is exactly use_plain there.
The more I thought about it, the more I became convinced that backup, save, and back should just be icons instead. Fits better with existing conventions. Later we should probably remove the save button and update on selection, but that requires logic change that shouldn't live in this PR. Swap/load/eject now have blue tap effects, the new icons all follow the blue tap effect convention. Backup will stay blue when enabled. I also added the faint border to color and material selections that the buttons in other panels get. |
|
Ah I just noticed the dialog buttons are not flashing blue like they used to, sorry missed that before, I reckon thats the only remaining issue. |
|
I can probably fix that myself though |
2 participants
Main screen
Main screen, printing
Printing
Fine tuning panel, refactored
Homing
Extrude
Fans
LED (shows sliders when configured in klipper)
Console
(now has input)(input removed from this pr)Settings
Status/info
Along with an updated default theme, this PR introduces several tunable variables in grumpyscreen.cfg to allow for quick adjustments.
Notes:
Size now scales to screen, you dont need to hand configure for two (or more) screen sizes
MMU panel is mostly untouched, few tweaks to attach the new style handles but visually the same
Fan and LED have a new "feature" addition - all on, all off buttons. Done mostly to fill empty space...
Console has a real feature addition, with input. Users can type and send gcode/macros direct from the printer.-technically should have been a different pr, but this theme pr assumes it exists so I've kept it here for now
Couple small visual bugs:
This PR touches a lot of files and, as always, would benefit from a thorough review.
I've also had to take some liberties with the theme itself so if anything screams "wrong" to you, call it out. :)