User Interface/Dashboard Redesign

[thorrak]

One of the things that people have asked for is a redesign of the device dashboard. Unfortunately, I'm not the best when it comes to user interface design, so this is a bit beyond my level of skill.

From the discussion with @Mikmonken : On restructuring the dashboard - I would suggest making a separate issue for it (since I’m reusing this issue for the ABV tracking) but here’s what you need to know:

Django uses its own template language which is HTML mixed with custom tags that use curly braces. If you’re comfortable with HTML and the concept of if statements and loops from any other programming language then it’s incredibly easy to understand Django templates (in my opinion). If you want to see one in action, this is the template you want (Temperature Controller Dashboard):

https://github.com/thorrak/fermentrack/blob/master/app/templates/device_dashboard.html

{# #} is a comment and is ignored when generating the HTML to output

{% %} is used for control statements, function calls, etc. You’ll see these for things like if statements and basically anything else that is programmatic.

{{ }} is used for directly adding the contents of a variable that is being passed to the template from Python.

Otherwise, it’s all HTML.

If you want to play by editing this file on your Raspberry Pi, give it a shot!

3 things to know:

1. After making any changes, you may have to relaunch circus to get them to show. See below for instructions
2. If things don’t work out and you want to revert to what’s on GitHub, just do git reset —hard while in the Fermentrack directory
3. Once you’re done and like what you see, submit a pull request or otherwise save the data out somewhere - and then do a git reset —hard . If you don’t, you may not be able to update from GitHub until you do.

To relaunch circus: sudo su fermentrack cd ~/fermentrack source ~/venv/bin/activate circusctl restart

If you don’t close the shell, you only need to run the last command each time to restart circus

[thorrak]

Also tagging @snoop6060 as I'm deleting his comment from the other thread

[snoop6060]

Im happy to help here. I’m away till next week but can take a look at this then. To be honest I’ve been meaning to learn django for a few years. Think I’ve even got a text book somewhere. I’m not a designer either ( Linux Sysadmin by trade ) but have done lots of python in my time and a few web projects with flask which uses the same html templating framework I think. There are lots of dashboard type layouts available that could be adapted and could improve Fermentrack a fair bit. My own personal requirements would be improving the UI when viewed on a phone (possibly via an app with react native?) and making the graph and headline dashboard data a bit tidier. Adding abv would be cool.

If anyone has ideas/suggestions/requirements add them here I guess :)

[zacharybussey]

Are there any specific points feedback that should be addressed with a re-design?

Personally, I'm not much of a designer, but the current layout seems pretty reasonable for a large screen. The only thing that I would want to change is having it re-arrange to a single column layout in order to fit a phone screen.

I'm going to try putting something together using CSS Grid to achieve a flexible layout, but if there are any other ideas, let me know.

[zacharybussey]

I've mocked up a different layout, here are some of the thoughts I had about the current display, and why I changed what I did.

On the existing interface, most of the information and actions are duplicated. All of the temps are in the LCD styled display, and their own boxes. If I have room and fridge temps, I can only see one of them at a time, why not both? Each box has an action, but I have the same actions at the bottom of the page also, as separate buttons.

What if it was something like this?

• Removed the LCD display. It looks kind of neat, but, I would say, either show all of the data in that format, or in this grid layout style, but not both at the same time.
• Show all three temps. Moved the targets under, and removed the actions from the temp boxes.
• Moved all of the commands to a sidebar. Now everything I can do is right together and I don't need to hunt around the page.
• Chart is unchanged

Other thoughts:

• Is log interval important? To me, seems like it could be removed.
• Some wasted space under the actions menu.
• The orange nav section is a bit wide.
• The actions section needs something more to draw the eye towards it. Hard to compete with the bright colors of the temp readings.
• The icons aren't loaded in the screenshot, but they would still be there.
• I didn't do the layout with a gravity sensor, which would add a bit more to the display.
• The 6 status boxes could be replaced with a bigger LCD display with more data, and then have the nav to the side of it. It would make the page much more of a control panel feel, retro console display style than a boxes with rounded corners style. I know it is probably replicating the LCD that you would see on the actual devices, but, we have a little more freedom here.

So, any feedback you have is welcome. I'm just trying some ideas out to see if this a good general direction to go or not.

[zacharybussey]

Rough idea of the LCD table display. Or, just having a more tabular data layout, it dosen't have to be LCD themed. Certainly much denser information in this layout.

[goose-ws]

Sorry to revive an old issue, but it feels more relevant to ask/mention here, than opening a new one.

I've noticed that the measurements on the Y axis of the graph for gravity don't seen to neatly align with the measurements in the legend box. Where we would typically measure gravity to the 3rd decimal place, 1.###, my graph is displaying units in 4th and even 5th decimal places. Would it be possible to round these values to the 3rd decimal place, and/or pad with 0's up to 3 decimal places if necessary?