OctoPrint for the Seeed Studio reTerminal – Live Blog – Day 10

This post is a series of posts in which I detail my journey to bring OctoPrint to the Seeed Studio reTerminal.

Day 10

In today’s post we’ll be looking in some more detail at the TouchUI plugin to see what we might need to change to suit how I want the Interface to look on the reTerminal.

I’ve also spent some time splitting the single long post up into separate days, as my WordPress Installation on CloudWays was struggling to cope! I do wonder if maybe I need to vertically scale my hosting at that stage?


Digging into the TouchUI Plugin – 15-09-2022

So, after rejigging this whole post into a series of posts (You’re looking at the result of course!), I’m free to carry on!

Today I’m going to take a look at the TouchUI plugin in a bit more detail to see what I might need to do to change the interface to work with the reTerminal.

I also want to make use of the user buttons on the reTerminal too, so I need to figure out how I interface to them.

I’ll definitely need a plugin of some sort, I don’t know at the minute whether I would need to fork the TouchUI plugin, or somehow override parts of it.

We saw in the Hello World Plugin Tutorial, that we were able to add extra tabs, and inject our content, so it’s possible we can use that approach to add or modify tabs in the TouchUI interface.

The first thing I’m going to do is navigate to the TouchUI GitHub repo and clone the code to my local machine;

TouchUI Github Repo
Cloned TouchUI Repo

Next up actually, I’ll install the plugin on my local Dev OctoPrint instance.

Navigating to the Settings and then to the Plugin Manager, we can click the + Get More button and search for touchui;

TouchUI Plugin Install

Clicking the Install button begins the installation;

Touch Ui Plugin installing

Interestingly, it does some building as it installs, which I guess makes sense. Shortly afterwards, TouchUI is installed successfully;

TouchUI Plugin Installed

Closing all the open dialogs, I can now restart the server and see if it automatically switches to TouchUI mode;

OctoPrint – TouchUI Plugin – Temperature

We can see that it does indeed switch to the TouchUI Plugin mode, which is handy.

I remember seeing a setting in the TouchUI Plugin options where we can have it detect the screen res to determine if it starts in TouchUI mode or not. I may activate this later so I can switch between the two modes using the Edge dev tools.

I see there’s a set of tabs at the top of the interface… I wonder if any of them are my Hello World Plugin?

TouchUI – Hello World Plugin Tab

Indeed one is! Well, this is good news indeed… Means I may have a chance of modifying the interface this way.

Looking through the other tabs we have the Files Tab;

TouchUI – Files Tab

We saw the Temperature Tab a few paragraphs above…

The Control Tab;

TouchUI – Control Tab

The GCode Tab;

TouchUI – GCode Tab

The Terminal Tab (Which I think looks mega retro and cool!);

TouchUI – Terminal Tab

The TimeLapse Tab;

TouchUI – Timelapse Tab

The next tab is our Hello World Plugin Tab, which we saw a screenshot of a few paragraphs ago too.

The next tab is the Firmware Check Warning tab, which appears to be blank;

TouchUI – Firmware Check Warning Tab

Next is the Firmware Check Info tab, which also appears to be blank;

TouchUI – Firmware Check Info Tab

Finally we have the Side Plugin Action Command Notification Tab, which appears to show any Printer Notifcations;

Touch UI – Sidebar Action Tab

Clicking the hamburger menu, we get a menu flyout;

TouchUI Hamburger Menu

Here we have items for Connection, Hello World! (again?), Settings, TouchUI settings, User Serrings and Logout.

I wonder why there’s another Hello World! item here… Clicking it;

Touch UI – Second Hello World Item

We seem to be taken to the Files tab, so I’m not sure what that’s supposed to be doing? Perhaps it’s a carry over from the fact that our Hello World Plugin tab was showing in the Burger Menu in the regular OctoPrint UI?

Hello World Plugin Showing in Burger Menu

The first item in the Burger Menu is the Connection Flyout;

TouchUI – Connection FlyOut

We then have the Settings FlyOut;

TouchUI – Settings FlyOut

We then have the TouchUI Settings FlyOut;

TouchUI – Touch UI Settings FlyOut

Ooo… We have a Virtual Keyboard here! That’s mega… Let’s click that;

Touch UI – Virtual Keyboard Settings

Closing the Dialog, we’re just returned to the interface. I guess I’ll have to click into a text box to make it show?

We know we have one with the Hello World Plugin, so let’s try that;

How awesome is that! A virtual Keyboard immediately appears… Love it! That will come in mega handy.

Next up in the burger menu, we have the User Settings FlyOut;

TouchUI – User Settings FlyOut

Clearly, I don’t want to be clicking the Logout Item!

Thinking about the Design

We really need to start thinking about the design of the interface now really.

Obviously, we have a great starting point here with the TouchUI Plugin, and to be fair, I don’t think this is very far off what we need at all.

So, in my mind, the first thing I need to be looking at actually, is integrating the user buttons.

The first place to start is the GitHub repo for the Seed Studio reTerminal Python Library.

This repo is described as;

This is a Python library which enables you to use the onboard hardware on the reTerminal and reTerminal Bridge.

Currently the accelerometer, user LEDs, user buttons and buzzer can be accessed using this Python library on reTerminal, and the fan, RS232, RS485, CAN can be accessed by using this Python library on reTerminal Bridge.

It’s handy that both OctoPrint and this library are written in Python… That will certainly make integration easier…

Of course, the issues will be that, we want to switch tabs in the UI, but this library is designed for backend applications I’d say. So how will we integrate it?

We also can’t test and debug this part on my PC here, as it doesn’t have the buttons. I wonder is there some way to test this with shims or something?

Let’s see tomorrow eh!

Leave a Reply