Combined Temperature and Control Tab

Plugins
21

Once upon a time, there was a GUI framework tool called Struts and Springs which made you think about placing things based upon rigid-versus-relative margins/padding. It's still kind of a useful concept.

Anytime you see a spring, it's got a percentage sign somewhere in a stylesheet. A strut is represented by something else more static.

In the past, I would make tables like this:

<html><body>
<table width="100%" height="600px" border="1">
  <tr><td width="100" height="100">Strut/strut</td><td width="400">Strut/strut</td><td width="99%">Spring/strut</td><td width="100">Strut/strut</td></tr>
  <tr><td height="99%">Spring/strut</td><td>Spring/strut</td><td>Spring/spring</td><td>Spring/strut</td></tr>
  <tr><td height="100">Strut/strut</td><td>Strut/strut</td><td>Spring/strut</td><td>Strut/strut</td></tr>
</table>
</body></html>

51%20PM
Screen Shot 2018-09-22 at 4.43.51 PM.png764×628 13.1 KB

22

I would love this!!! Much better use of screen space.

23

You can install using the following url in plugin manager. Please give feedback to make it as good as possible before releasing to the community.

https://github.com/jneilliii/OctoPrint-ConsolidateTempControl/archive/dev.zip

24

OK I love this layout! Only one thing on the main page that needs fixing for me and that is the width of the left cell.

See Image:

Capture
Capture.PNG449×844 15.7 KB

You widen it by 50-100 pixels and that should fix everything on this page.

I wish the rest of the tabs used the extra width as well but they aren't that important to me.

25

I had originally wrapped the other tabs that made the contents of them stretch to the extra width, but was causing issues with the gcode viewer so took it out. The problem you might be experiencing with the sidebar though might be related to either your browser or Themeify plugin styling. Originally I was seeing the issue that you are showing there, but after tweaking it locks in the width of the page so the elements don't resize lower than a specific width.

image
image.png458×900 33.8 KB

Which theme are you using and I'll see what tweak you need to make in Themeify to resolve.

26

So I just tested a couple of the Themeify plugin options and there were no issues with scaling. What browser are you using? Also what's your screen resolution?

27

This might be my doing... :confused:

I am using Discorded. See the image for my settings.

Capture
Capture.PNG967×774 42 KB

28

Yep I fixed it. The container style was the issue. I just disabled it and all is good.

Thank you!

Tony

29

Cool. Let me know your thoughts after using it for a bit. I did notice some of the themes caused button alignment issues on the control buttons.

30

I've been using it all day and especially now that I've fixed the themeify issue I love it.
I've tested all of the buttons and have had no issues what so ever. If it were up to me, this would be the default experience for Octoprint.

Great work!

31

It was all @foosel, I just tweaked a couple of settings.

32

Awaiting a print to finish to try this out.

I asume TouchUI functionality remains the same with this enabled?

33

I'm unsure of the compatibility with touch ui.

34

Am I supposed to disable tab order to get his to work right?

35

Screenshot%20(38)
Screenshot (38).png1920×1080 186 KB

Not sure what I did wrong.....
No Custom back ground, no webcam, lol no graph......

36

Not sure what I just did, but it is working now.....

Screenshot%20(39)
Screenshot (39).jpg1920×1080 414 KB

Doh!, I removed the settings I had in tab order and saved it.....

37

@Warchildz, I mentioned the tab ordering issue in my original post and just haven't had a chance to go back and figure out why there is an issue. I'll add this to the issue tracker on the repository, thanks for reminding me.

1 Like
38

No problem and thank you for your efforts in programing!

39

There is no issue with my RPI 7 in touch screen with TouchUi...…

40

Where is tab order I have the same display issue? I have uninstalled alot of plugins and still no go.