UI Improvements and CSS Framework

[thunderbiscuit]

Hello everyone,

I'm wondering if there is a group of people who are currently thinking about slash working on UI/UX improvements for the project. If there is such a group, I'd love to be connected to them!

I have a few thoughts I'd love to discuss with core and UI keen devs.

One of these is the fact that myNode currently does not use a CSS framework, making the UI very "custom" and brittle (the UI currently uses mainly two I assume custom made CSS files—please correct me if I'm wrong—one for the light mode and one for the dark mode). I have started working on a "Bulma" (a CSS framework) version of myNode, and within a few days I have something that is already working not too bad (see screenshots) and easily adapts to mobile.

I am not married to Bulma as a framework per se, but I think opting for a solid framework would lay the foundation for more UI improvements, and would make scaling easier. For example there is a potential need to make myNode mobile friendly, and writing all of that custom css is not likely to be easy to maintain, let alone incentivizing devs to make improvement proposals. A good css framework will come with solid docs and good defaults, helping future contributors understand the playing field and make more solid and easy to test contributions.

You can check out my branch of the repo here to try my UI in your own myNode. Right now I have it set up so that everything stays the same except for an extra button on the main page that says "Try the Alternative Interface". This button leads you to a not-quite-yet-fully-fuctionning new UI. It's easy to work on that without creating any problems to the main page. I basically add the bulma.css file after the mynode.css and add a slight customization (~20 lines) one called alternative-custom.css. One of the advantages of bulma is that it is pure css; it does not require any JS at all. Just one css file to import. You can find their docs here. I can provide more info on the architecture if I turn this into a full PR if there is interest.

The goal of this issue is basically to ask whether there is appetite for me (and others who might want to join) to work on a more robust UI-improvement PR. The current work in progress is definitely not ready for prime time but I wanted to first get a sense of whether other people are currently working on this or whether this was even something that the core devs on the project were interested in pursuing. Let me know! I am obviously new to the project and keen to work within the style and the direction that is most useful for the long term.

Core Services Tab

Apps Tab

Info Tab

Dark Mode

Mobile

[Amiga500]

Hi @thunderBiscuit, I have installed your build but i'm not able to see the new UI:

However seeing the pics.. i like it a lot!

The only two people that put hands on UI are @tehelsper (the main dev) and @abhiShandy (for the dark theme).

[thunderbiscuit]

Darn. Ok let me see. This is the page (your second screenshot) you get when you click on the "Try the Alternative Interface" button? I wonder if it has to do with the new 0.2.0 version (am I right in assuming that's what you're running?). I think mine was developed on the 0.1.98; I should have pulled the latest changes before opening the issue. I'll update and see if that breaks is for me too and I'll commit the fix real quick.

[Amiga500]

Yes.. i pressed on the blue button, and then Internal Server Error. Tested with white theme too.. same behavior. I have installed build from https://github.com/thunderBiscuit/mynode (Latest commit 3b696de 3 days ago). I was on myNode v0.2.00 and then installed your.. tried two times.

[thunderbiscuit]

Ah that's really too bad. I just tried updating my fork and yeah it worked flawlessly for me. It might have something to do with the fact that I don't really know if I'm really doing the right procedure for local development.

Can you tell me if this is the proper way to update local UI into myNode?

# inside repo, first terminal
./make_rootfs_auto.sh

# inside repo, second terminal
make start_file_server

# ssh into node, and run this command every time you make an upgrade
sudo mynode-local-upgrade [my-local-ip] www

Getting my fork to work on other people's machines is going to be quite important haha. I really want to fix this; I'll keep searching for what could be wrong on my end. Sorry for being a bit of a newb here.

[thunderbiscuit]

EDIT: I think I got it (see bottom comment). Let me know if the latest commits on my fork fix it for ya.

Ok I managed to "break" it the way it does for you. Just not sure how to fix yet, and not sure what exactly caused it. Maybe Taylor can help.

Here is how I broke it: I updated my node through the UI button upgrade available from 0.1.98 to 0.2.00, and from then on my changes to the pages other than main.html are not reflected even when I do the whole process above (previous post) and it returns no error. I can make changes to the main.html pages and those will get updated, but everything else is stuck in time from when I first made the changes a few days ago as part of v0.1.98.

Two things might be of help here:

1. If I update the new alternative html pages those changes are not reflected even though the pages load (the pages basically seem "stuck in time" from when I last updated the node from 1.98 to 2.0. I can even delete the pages and mynode-local-upgrade without error and the old page will still load perfectly;
2. If I go to a random non-existent url I get the normal Page not Found error, but if I create a new route (to a real new html page) in mynode.py and go to that url, I get the same error as @Amiga500 (Internal Server Error).

EDIT: Think I fixed it. Somehow the Flask routes were pointing to the root templates/ directory instead of the templates/alternative-pages/ sub-directory. Not sure why it wasn't throwing an error for me honestly and instead was just loading an old version of the pages, but in the end I did manage to reproduce the same error as you, and then fixing the flask routes did it for me. See if my new commits will do the trick on your end.

[Amiga500]

Tested your new build.. now it works. What to say? Fantastic work (even if in beta and there are a lot of thing to adjust). Tested on smartphone.. 10/10 fantastic interface on smartphone too (very usable now!)

Congratulation for the work you have done until now

I suggest to @tehelsper and @abhiShandy to try it!

[thunderbiscuit]

Cheers! Well I've been digging into the issues and PRs and found this #207 PR which is very much related; I should have searched harder before opening this issue.

I see @abhiShandy has done great work already on the settings page using Bootstrap 4, which Taylor also uses for the myNode website. Is that something you guys were looking at implementing across the board maybe? Obv. a very solid choice if so, also because it has broad adoption between devs who do frontend. Anyway happy to direct my efforts in the direction that makes the most sense if there is interest. I am very familiar with both Bootstrap 4 and Bulma and I see both as being easy and powerful.

[sahilc0]

Hey @thunderBiscuit love this! Do you have a Figma doc or something where we can collaborate? Will help with quicker designing before spending too much time in code

[thunderbiscuit]

Cheers @sahilc0 ! No actually I have not worked with Figma in the past. Would be happy to if you can help me out a bit with setting it up and using it! Do they have a free tier I can join to get access without paying for an account?

Also, the truth is this has the potential to be a big task, so I do think that before too much time/work is put into it we want to get feedback from Taylor, the main dev on the project. Still not sure what CSS library he'd like to use, or even if a rewrite of the UI like this is something he thinks is worth putting time and effort in.

@tehelsper have you had time to take a look at this? Do you have any opinions/feedback for us? My main concern would be creating the proper setup to ensure good testing and transition. Because developing this would take at least a few weeks and myNode is a constantly moving target, a good plan on the architecture needed to pull this off gracefully is important.

As for the exact design of the UI, we should maybe create a working group telegram or keybase chat with some people Taylor could recommend would be good to brainstorm with (everyone on this thread I assume would be a good start). This way we'd get feedback early on what could be done better in terms of UX and UI.

[sahilc0]

@thunderBiscuit Absolutely man, lemme look into it - I’ll set it up for us.

100% agree with everything you said! Figma May be able to help with more rapid experimentation (design tool) before building - so it should be independent of whatever the front end architecture is

[abhiShandy]

I would be happy to get involved in UI/UX design. I agree that using a well-established CSS framework would improve the user experience and make future development easier. I have been working on introducing Bootstrap in the settings page but couldn't complete my PR #207. I am not aware of the other popular frameworks since I'm not a full-time web-developer, but I would be happy to learn something new.

Inspired by the "alternative UI button", I was thinking if we could setup the backend to add different themes in myNode. That way, the current UI (majorly designed by Taylor) will still be available and part-time developers like us can add new themes as we like.

[sahilc0]

@thunderBiscuit put together something inspired by your design, definitely not suggesting this as a direction but just want to illustrate that something like this could help with rapid experimentation and user testing, if there are things we need to test

https://www.figma.com/file/EFP1tbIGMw6RAVbXdqcDRB/MyNode-Design?node-id=0%3A1

if you share your email with me I can invite you to edit, or you can just copy and fork off into your own figma doc -- still not totally sure how Figma's free version works (even though they tout collaboration and "open source design"

[sahilc0]

Just my guess, but I'm guessing the community will prefer having all the cards on the same page rather than the tabbed ui.

I think if we make the first goal just to update the fundamental UI components, that itself could be a big lift (rather than a bigger flow change)

[xFvl]

Throwing my hat into the UI design ring, taking this into account.

[thunderbiscuit]

That is some slick work man! I like the lower "density" of apps per square inch. If they all stay on the same page, at least they need more room to breathe. I don't mind the fact that you'd need to scroll to access the full range of apps. Clean work. What's your framework?

I think one of the important design choices is around choosing something that a range of devs are comfortable with, and that new contributors will be able to pick up fairly quickly. The very fact that myNode is not currently using a CSS framework is in my opinion one of the reasons why we don't see much PRs made to improve UI; it's currently all "artisanal" css, making it brittle and hard to maintain (and not mobile friendly). To me, this thread/discussion is first and foremost about the choice of how to proceed forward in order to help the long-term maintaining of the project and its ability to scale over the next few years. Curious to hear everyone's thoughts!

[sahilc0]

Angular material?

[sixside]

The best part IMHO about myNode is that it can serve both new node-owners and advanced bitcoin users equally. For this reason, I think for long term growth/flexibility and ease of on-boarding new node owners, the default view should be as minimal as possible. "Congratulations, you're running Bitcoin Core" and gives you 3 icons/apps:

• Bitcoin Core
• BTC RPC Explorer
• Mempool Viewer

EVERYTHING else should be tucked away underneath an "Add-Ons" section. Almost like it's own AppStore.

Let new users get comfortable with the core first. Help them to understand the benefits and techniques for running your own node before distracting them with all the other bells and whistles.

Advanced users can easily & quickly dive in and install other apps they want.

Anything installed, would show up on the home screen. Everything else, is hidden away in the AppStore tab, ready for if/when the user is ready to move on to that part of their journey.

This approach means that each user upon logging in only sees the tools they actually use, and nothing else.

Less is more.

Furthermore, Lightning-related apps, should appear within a designated Lightning section. Similarly Dojo/Whirlpool in their own section. Visually group items within their logical groupings.

[sixside]

Throwing my hat into the UI design ring, taking this into account.

The 4 System items at the bottom take up too much real estate. None of those are actionable/clickable. It's just passive information. They have too much visual-weight relative to the users needs. Maybe small icons in that top blue toolbar, kind of like OSX:

Replacing the time with the current blockheight ;)

[mattems]

Hey all, i am also looking at a UI theme. Here is what i have so far.

[aussiehash]

@thunderBiscuit Amazing work !!

[mattems]

@thunderBiscuit thanks. Only a small POC. Im trying to figure out what the best way to actually run the node software locally for testing (without syncing the entire blockchain) to do development on a theme.

[thunderbiscuit]

@mattems that's the stuff! Love your dark theme.

[thunderbiscuit]

As for the way to develop on it without syncing the whole chain... I'm not sure. I feel like you should definitely be able to fire up the Flask server without the rest, but you might need a bit of tweaking to make it run without all the stuff it is expecting to find in the right places. I'd suggest you open an issue for this very problem, because I can see how being able to work on it without the weight of the whole node could be very interesting. I'm just not sure how easy it would be. Might actually be a super quick fix/tweak, and Taylor is usually fairly quick to respond to those issues.

Do you have the hardware for the node? Because once you have the full node running it's actually quite easy to change the UI. I can provide help on that if you need. Keep it up, we need to keep this issue alive and continue the conversation with more developers interested in UI/UX and myNode!

[sixside]

@thunderBiscuit thanks. Only a small POC. Im trying to figure out what the best way to actually run the node software locally for testing (without syncing the entire blockchain) to do development on a theme.

Perhaps you could just pull all the HTML/CSS files off the repo, and work with those? rootfs/standard/var/www/mynode/templates/

[abhiShandy]

Let's touch base

• Has anyone figured out how to run the Flask app locally for developing/testing?
• Has anyone designed a new theme for myNode?
• I feel the settings page is too long, do you guys have any suggestions on its design?

[thunderbiscuit]

Happy to keep this conversation going!

1. There were some really good comments in this thread. Some relate purely to the look, some to the underlying architecture of how things are laid out. @sixside sounded like he had good experience with building user experiences.

2. As for developing without syncing the chain, I have not tried to find a solution myself, as my own node is synced and it's easy to develop directly on it. Eventually though the ability to do it and it's description in the docs would be a great add-on for promoting contributions to the UI.

3. The migration from one UI to another can be quite daunting. I think we need more direction from @tehelsper as to whether that's something he's interested in, and if so how he would like to go about it. This will also give you an idea as to how to approach the settings page. For example, the first step might be to just include a CSS framework in there. Then starting to style certain elements, then making bigger refactoring moves between pages and layouts. (For example a lot of things in the settings page are not settings at all, and so actually belong in a different place).

Also, congrats everyone on this thread for being the most commented issue in the repo!

[Bosch-0]

If you guys want to have some further design discussions with others working on FOSS Bitcoin projects be sure to join the Bitcoin Design slack that Square Crypto has started - great community and plenty of people to give feedback on designs, really like the UI you shared @thunderbiscuit, keep it up!

Invite link to slack - https://join.slack.com/t/bitcoindesign/shared_invite/zt-fv00xzev-mfHaAsexPsu~QBlufPxL~g

[AllienWorks]

Hey all! That's funny, I wanted to lend a hand as well with the design-side of myNode (as a happy and loyal user :)

I started some mock-ups 9 months ago, however I haven't had time to finish/tweak them up. Here's what I have currently - I aimed to keep it more or less the same as the current look. CSS meant to be custom (think customized micro-framework) which is IMO better as we won't need to include all the ordinary-framework-bloat. But that's all up for discussion.

[sixside]

Looks clean @AllienWorks

The current home page of myNode is way too cluttered IMO. For a product that's supposed to be for relative noobs, it's an overwhelming first touch point. On that note what seems to make sense is one screen that shows what is installed/running and then another page that 'hides' all the additional apps you can install -- once you've advanced to that stage in your learning journey.

So in your design, I could see adding a link/button/menu to navigate to an "App Library" or "Other Apps" or "App Store" or whatever people think it should be called. But a directory of Apps that lists everything that is available to install, along with descriptions about what the app does.

[thunderbiscuit]

Great work @AllienWorks! Keeping it clean!

I also agree with @sixside; having all apps on the landing page might have made sense back when there were only a few, but it's becoming more and more important to have them tucked away in a place where people can just go and pick what they want. Once enabled, it makes sense to then have those displayed maybe on the landing page.

As for the CSS framework, myNode having some few own custom css stylesheets makes sense, but IMO writing everything from scratch does not as much, for 3 reasons:

1. That's as brittle as it gets, plus no docs are produced for those, which leads to 2 ->
2. Very hard to onboard new devs or incentivize people to come and make small yet meaningful contributions.
3. That's a lot of work/time for someone to spend building the css if you want it to be mobile friendly and well thought out. Grabbing a well-known framework leverages the work done and iterated on by lots of other people!

[sixside]

Regarding CSS, it's worth pointing out a recent change Umbrel made to protect user privacy -- hosting fonts locally instead of pulling them from a font-server. Any CSS/JS frameworks used on the myNody UI should take this into consideration IMO so it's not leaking data unnecessarily.

[abhiShandy]

if you guys haven't, you should check out this simple yet elegant PR to improve UI #416