Pimp my web interface


#1

Hi, with the plugin Themeify you can do a lot of things with the web interface.
Maybe we can collect some CSS selectors for practical use.

Changing the width of the web interface (by @roland, https://discourse.octoprint.org/t/webpage-too-narrow-solved-by-roland/2333/3):

Selector         CSS-Rule
.span8           width
.container       width

Changing the size of the GCODE viewer (the canvas is inside the wrapper, both have the same value. Also width and height need to have the same value, else you get distortions)

Selector                CSS-Rule
.gcode_canvas_wrapper   width
.gcode_canvas_wrapper   height
#gcode_canvas           width
#gcode_canvas           height

But as always: all at your own risk...
Have fun with it.


#2

Nice, I very much welcome this effort! :+1: :smiley:


#3

I have lots of these on mine and I love the control it gives me for the interface. I go with the default Discorded theme and then make a few changes from there.

33%20AM

(Scroll right for more information)

Advanced:

Selector CSS-Rule Value Notes
#temp_link background-color Included with Themeify
.accordion background-color #2f3136 Included with Themeify
#temperature-graph background url(http://picam1.local:8080/?action=stream) no-repeat center Use external Raspberry Pi webcam as background for temp graph
.nav .navbar-text color #ffffff
.span8 width 880px Less left/right margin on wide screen
.container width 1200px Less left/right margin on wide screen
form.custom_control display inline-block Custom buttons inline horizontally
form.custom_control padding-right 10px Custom buttons inline horizontally
div#sidebar_plugin_bedlevelingwizard_wrapper>div.accordion-heading>a:before color #dadadc Icon color correction for BedLevlingWizard
#term .terminal #terminal-output, #term .terminal #terminal-output-lowfi min-height 440px Taller Terminal box
#temperature-graph background url(/plugin/themeify/static/img/graph-davy-jones.png) no-repeat center Use DavyJones graphic for background, as part of forked Themeify

Custom Tabs:

Selector FontAwesome class Notes
#temp_link fa fa-line-chart Included with Themeify
#control_link fa fa-gamepad Included with Themeify
#gcode_link fa fa-object-ungroup Included with Themeify
#term_link fa fa-termina Included with Themeify
#timelapse_link fa fa-camera Included with Themeify
#tab_plugin_bedlevelvisualizer_link fa fa-balance-scale BedLevelVisualizer plugin

Zoom button for usbwebcam
#4

Well if it isn't my old pal OutsourcedGuru.

JK, sorry if I was a little "testy" over our last exchange on OctoPrint's forum. Work stress driving me into the ground, what else can I say. Adding a boosted WiFi/BT HAT to the Zero in an attempt to alleviate some of the queue for a single-core would have never worked anyways due to pin conflicts. However, I am now curious and looking into the new BananaPi Zero clone, at least it's a quad-core... but the SW/FW compatibility is probably a disaster.

Themeify is great, btw. Always a good feeling to have even just the "little stuff" like a web interface match perfectly with all your HEDT hardware, workstation furniture, 3D printer, etc. I'm still getting used to all the caveats, sorry if any of these things are painfully obvious that I missed. My question is... (and due to the aforementioned work conditions, I just don't have the time to really dig into this so as to not bother anyone else with this)... but is there a way with Themeify, or any other plugin that exists, where the user can modify more than just primarily CSS content to customize the theme?

For instance: no offense, I'd just rather not have an Emoji up at the title block of my control panel, I'd like to change the actual page title too, and I believe there is a plugin that actually actively refreshes the HTML , etc. according to the current print status, so I'll at least look into that... but still.

And the "cephalopod" motif isn't really a favorite of mine (I know there's a plugin that can also address this to a degree, and there's other HTML tricks/browser add-ons that can solve some of this in an indirect way). Not just being snobbish, but the "green tentacle" favicon for the web browser just isn't easy for me to locate when I have a significant amount of tabs active. Haha that's my personal problem I guess, but I'm just using it as an example for now.

But overall, awesome job, much thanks to the dev for making this plugin.

  • David

#5

I honestly don't even remember whatever that must have been about. I self-actualized a long time ago so I don't let too many things get under my skin, to be honest.

Bingo. We've totally thought about that. How cool would it be to just jQuery anything you wanted to in the interface? Granted, you'd probably end up eventually with spaghetti code like the Robo 3D GUI to the point where nobody no longer understands it. But their plugin does just what you're describing. More

Been there, done that. That mod is the line in the post above (search for "#temperature-graph"). Note the tentacle change-out as well.


#6

Added fa-lg after the fontawesome names, like it :slight_smile:

Also found a cheat sheet for fontawesome 4
https://fontawesome.bootstrapcheatsheets.com


#7

Is the overflow moving items to the dropdown to the right supposed to do like this even when lots of free space? I guess it's counting letters or number of tabs and not knowing about the narrow icons?

EDIT:

Ah! You already posted a solution to that! Nice!

It still doesn't show the icon for that last one though.... poking around now..


#8

added

#gcode-canvas width 820px

:slight_smile:


#9

Check out the Black Pearl theme that I have on mine. I upgraded the octopus and tentacle. There are times when I run a dedicated webcam server and just drop the output of that behind the temperature graph; that also works out nicely.


#10

having the cam there sounds brilliant!


#11

Solved in the new RC ! Super!


#12

So I'll post here my GUI modificacions and improvements. Thanks for all your work.

Selector                   CSS-Rule          Value      Info
.container                 width             100%       Adapt to any screen size
.span8                     width             72%        Approx. to fit the remaining space

*Corrected Dropdown to stay in the nav bar
#navbar_plugin_m33fio      position          inherit
#navbar_plugin_m33fio      height            20px
#navbar_plugin_m33fio      margin-left       30px

*Reduce space below navbar (I dunno if that space is reserved for something)
#navbar                    margin-bottom     0px

pd: One day I'll learn how to do all that fancy tables and formatting.


#13

Try:

| Selector | CSS-Rule | Value | Info |
|---|---|---|---|
| .container | width | 100% | Adapt to any screen |

etc