A web interface

Archive - Mycroft Project Archive - Former Random Mycroft Category
1

What do you think of this interface?

20210804_210207
20210804_2102071600×900 129 KB

Features:

  1. Network Attached Storage
  2. Notes Functionality
  3. Live feed from camera (With IP mode as well)
  4. Fullscreen Mode (Looks sick on tablets)
  5. Fully functional chat.
  6. TODO manager
  7. Volume Control
  8. Authentication
  9. Live System info
  10. All links automatically converted to anchor tags.
  11. Shows the upcoming 5 events (and their description on click) from Google Calendar.
  12. Show the remember list from Mycroft’s Remember skill in the as a note for quick access.
    14.Notes Function have all the basic features like bold, list, change size, change font etc.
  13. Very cool looking

Context:
I had spent months working on a personal assistant and a web UI for it. I switched to Mycroft a few months back. And since then I have been working to make the web UI compatible with Mycroft as well. What you see is months of work (I am not a frontend end guy but did it in this case). I have tried my best to pay attention to every detail.

I hope you like it.

3 Likes
2

Nice! It looks really professional and that’s hard to do :slight_smile:

From a ‘user experience’ point of view you may want to allocate less space to the technical details on the left and more to the life information.

3

Nice start. Here are my two cents:

  • Left side - CPU, memory, etc.: sysadmins care, but not users IMHO. This is an appliance. Maybe a drill down to get to this info.
  • Center - What is the circle showing? There is no heading.
  • Right - Calendar, Shopping list, TODO - this is good
  • Bottom - Most outside scope. Chat should be voice input. Survelence (misspelled?) might be good.

The main screen should be tied to the function of the voice assistant. What skills does it have? What data is established such as alerts, etc.

Hope this helps.

-Mike M
4

Thanks for the feedback.
Voice input is only allowed for https or localhost. I do not have a https connection as this is a flask app. Thus voice input is not allowed by the browser.
I am trying to make a video walkthrough but can’t find a quite place and time.

5

That looks great! I do kinda disagree with one of the other posters about having CPU, etc on there. I am a sysadmin and yes I prefer to have that information at my fingertips at all times, however if CPU is pegged and things act goofy regular users would gain value in seeing that as well.

Additionally if we are specifically talking about end users, things that are dynamic and useful give the whole web interface more “life”.

As for it being a Flask application, drop haproxy on the same host (or container if this is in docker) and add a lets encrypt cert to it so you do not have to worry about SSL. Let haproxy do the SSL, and keep your flask app completely unchanged.

6

@Hanzala_Ibn_Zahid welcome to the forums and thank you for your post. The UI looks great! Is it configurable? Just to be clear about the use case, all the information here on the screen if for a Mycroft instance, like a Picroft? So I could hook up a monitor to my Picroft and show this on a web browser?

7

Yes the system info is the info of the computer it’s running. In my case it shows the info of a raspberry pi 4b. Other info such as the notes, todo are those that I saved from the web interface.
I made it for myself and thus not very much configurable or documented. But you could get it running if you know python.