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.