How can I re-size the Temperature graph?

Get Help
1

What is the problem?

There is really no problem, but please consider this to be a feature request.Am I in the right place?
I have been using Themify and the UI Customizer to give me the Octoprint front end that I really enjoy using. However, nothing I can find from either of these plugins allows me to change the size of the Temperature graph. As a main screen, it sits right in the middle of my view but once up to speed I don't really need it to be there any more. TYes, I can switch to Dashboard, or the gcode viewer, but I have custom controls all set up as main screens and they currently sit underneath the Temp graph. I've seen a plugin for having the temp graph in the sidebar, but from the screenshots it leaves the main screen alone.
How can I either re-size or remove the main temperature graph. Once my temps are OK I don't need it to be there any more.
Thank you for any advice/assistance.

2

You may have seen Consolidated Tabs, which allows you to move around and resize the tabs onto one. Other than that, some custom CSS could probably be used to change the sizing a bit if you wanted to.

1 Like
3

Hi Charlie,
I have that plug-in but I can't find a way to use it to re-size the main temp display.
Unfortunately I'm not so good at web page programming to custom CSS is beyond my abilities.

4

CSS-wise, you can resize the graph like this;

#temperature-graph {
    width: 100px;
    height: 100px;
}

This will make it 100x100 px. You can also use percentage like; width: 50%;. If you wanna play around with it, you can try reading a little bit about CSS here; CSS Tutorial

If you don't want the graph to show at all, do;

#temperature-graph {
    display: none;
}

You can do this programmatically as well, e.g.; $("#temperature-graph").hide(); via JavaScript.

You can use the OctoPrint-CustomCSS plugin to implement the CSS (I have no idea if it works, haven't tested it).

1 Like
5

That’s great – really helpful.

I’ll have a play.

6

It worked great!

My problem had been that I was using the OctoPrint-TempsGraph plugin, which wasn’t changing with the CSS changes. After uninstalling this plugin (shame – it’s nice) I was able to resize the default temps graph as required.

Thanks again.

1 Like
7

If you use my UI Customizer plugin it will work together with the TempsGraph plugin - and allow the custom css to be applied. In theory at least

8

Actually, I did try to use them both at the same time but the custom CSS entered in the UI Customiser didn’t change the appearance of the TempsGraph plugin. I only got it to work how I wanted when I uninstalled TempGraph.

I assumed that, also being a plugin, it isn’t affected by CSS in the way the default graph UI is. Maybe TempsGraph is only displayed in the GUI after the other GUI elements have loaded and so isn’t affected by the CSS. Don’t really know, but I’m happy with what I have now.