Electrum lite GUI

[genjix]

Current version:




========

Hi,

Electrum has a new lite-mode GUI. The normal expert-mode is available when clicking the expand button in the bottom right.

I'm interested in feedback people have:



* Entering a number in the amount field will show the conversion amount.
* Clicking the balance label changes the currency between USD/GBP/EUR.
* Click the bottom left button to show the normal 'expert-mode' GUI.
* Address box has text completion for address book entries.

Currently only 1 account exists (top left button) called "Checking". Multiple accounts will be added in the next release.

-----------

Looking for feedback. Lots of design work went into this. My old design notes are pasted below (much of it is on paper). I eventually dropped the system tray concept as it's rapidly falling out of favour in desktops. If you look at the dock concept being adopted by Mac, Windows 7 and Ubuntu, then there is this movement towards having a single place where a program runs. Clicking an app to restore it (from minimised state) or start it up (from closed state) has no big distinction. Electrum with its quick startup times fits this kind of model for users. There should be little functional difference between closing or minimising Electrum to your dock.

Hi,

We met at the metalab hackerspace where I was discussing plans for a
Bitcoin UI.

Based on the design notes of that session, I have gone and written a
mockup in Qt.

My guess for users is that they typically send more frequently than they
receive. You maybe purchase a number of Bitcoins in bulk from an exchange
and then spend them on smaller sites/donations.

Rated in order of importance:
- Send bitcoins
- Check balance
- Get your address to receive donations
- Manage your addresses (not very important)

Based on this, we have functionality which is important and then less
important. Each one of these 'actions' is highly separate from the others
and so it makes sense to split them into separate dialogs:
http://i46.tinypic.com/jj1v2x.png

Main / most important action here = Send

Send - send bitcoins and quick glance of the user's balance:
http://i45.tinypic.com/168y2ir.png

I made two mockups here. I'm just unsure how to nicely show the balance
without it looking forced or out of place. Also I feel like the balance
should maybe get more emphasis to encourage the behaviour of the user to
use this as a place to check their balance. Maybe it is not obvious to the
first time user that this is a place they can check their balance?

"Copy Address" opens no dialogs. It silently copies your bitcoin address
to your clipboard.

"History" shows the list of transactions like:
https://en.bitcoin.it/w/images/en/d/df/Spesmilo_esperanto.png
(old app I made)

"Settings" is the usual things.

Now it is possible to have multiple "accounts" (wallets in bitcoin speak)
for people to logically separate their funds. I was thinking to either
make a new entry on the right click system tray menu called "Manage
Accounts" or throw it inside Settings. I'm erring towards the latter right
now.

Any thoughts?

Thanks

Old screenshots:

[1715050962]

1715050962

[1715050962]

1715050962

[1715050962]

1715050962

[jim618]

Looks very nice.

When Electrum responds to bitcoin URI requests, does it show the 'lite' mode ?

[genjix]

Looks very nice.

When Electrum responds to bitcoin URI requests, does it show the 'lite' mode ?

yes, unless you specify otherwise.

[flatfly]

Nice job, genjix!

Here's some quick feedback from me (as a Win XP user):

- I like the size of this GUI. Very nice for casual/mainstream users.

I do have a couple of bug reports & suggestions:

 1. Not sure if this is a Windows-only problem, but when launching Electrum for the 1st time after a cold boot, the balance in the lite GUI stays stuck on 0
     (not on subsequent runs, though.)

 2. The Copy Address button seems to copy a random address if clicked right after launching the app
     Do we really need that button anyway? IMHO, it's taking valuable space and doesn't seem that useful to me.

 3. Is it critical to use HTTPS to get the exchange rate? The reason I'm asking is that the resulting Windows
    stand-alone executable would get significantly bigger if I have to include ssl.py and its dependencies.
    It would be around 7+ MB rather than 5.9MB without it. This kind of thing could matter when targeting
    the Windows audience.
 
 4. Hopefully the theme/icons/colors are not final as they could be a lot more polished IMHO.

[bitcats]

Great job! Donation (Bacon) will come ;-)

How can i import an address in the lite Client?

[genjix]

Great job! Donation (Bacon) will come ;-)

How can i import an address in the lite Client?

Thanks 1LDjY9hJs7eFaL8z9vGVXD2spDEPb5oeX3

You cannot import an address. You must do it in expert mode by clicking the bottom left arrow.

[genjix]

Nice job, genjix!

Here's some quick feedback from me (as a Win XP user):

- I like the size of this GUI. Very nice for casual/mainstream users.

I do have a couple of bug reports & suggestions:

 1. Not sure if this is a Windows-only problem, but when launching Electrum for the 1st time after a cold boot, the balance in the lite GUI stays stuck on 0
     (not on subsequent runs, though.)

 2. The Copy Address button seems to copy a random address if clicked right after launching the app
     Do we really need that button anyway? IMHO, it's taking valuable space and doesn't seem that useful to me.

 3. Is it critical to use HTTPS to get the exchange rate? The reason I'm asking is that the resulting Windows
    stand-alone executable would get significantly bigger if I have to include ssl.py and its dependencies.
    It would be around 7+ MB rather than 5.9MB without it. This kind of thing could matter when targeting
    the Windows audience.
 
 4. Hopefully the theme/icons/colors are not final as they could be a lot more polished IMHO.

1. yeah I noticed this. Will have to fix it. (edit: fixed this)
2. But then how will you get your receiving address?
3. I see. Let me investigate this. Thanks for letting me know.
4. Software always looks pretty crude initially. We'll have to fine-tune it as we go along. Perfection is a journey. But I definitely want to have it be eye-candy.

[Deafboy]

Code:

[deafboy@Planetexpress ~]$ sudo pip install http://ecdsa.org/electrum/Electrum-0.61.tar.gz#md5=9b87fd3fa4c4dae5efa896e9b0d6d51c
[sudo] password for deafboy: 
Downloading/unpacking http://ecdsa.org/electrum/Electrum-0.61.tar.gz#md5=9b87fd3fa4c4dae5efa896e9b0d6d51c
  Downloading Electrum-0.61.tar.gz (227Kb): 227Kb downloaded
  Running setup.py egg_info for package from http://ecdsa.org/electrum/Electrum-0.61.tar.gz#md5=9b87fd3fa4c4dae5efa896e9b0d6d51c
    
Requirement already satisfied (use --upgrade to upgrade): slowaes in /usr/local/lib/python2.7/dist-packages (from Electrum==0.61)
Requirement already satisfied (use --upgrade to upgrade): ecdsa in /usr/local/lib/python2.7/dist-packages (from Electrum==0.61)
Installing collected packages: Electrum
  Found existing installation: Electrum 0.60
    Uninstalling Electrum:
      Successfully uninstalled Electrum
  Running setup.py install for Electrum
    changing mode of build/scripts-2.7/electrum from 644 to 755
    
    changing mode of /usr/local/bin/electrum to 755
Successfully installed Electrum
Cleaning up...
[deafboy@Planetexpress ~]$ electrum 
Traceback (most recent call last):
  File "/usr/local/bin/electrum", line 143, in <module>
    import electrum.gui_lite as gui
ImportError: No module named gui_lite
[deafboy@Planetexpress ~]$

[flatfly]

Nice job, genjix!

Here's some quick feedback from me (as a Win XP user):

- I like the size of this GUI. Very nice for casual/mainstream users.

I do have a couple of bug reports & suggestions:

 1. Not sure if this is a Windows-only problem, but when launching Electrum for the 1st time after a cold boot, the balance in the lite GUI stays stuck on 0
     (not on subsequent runs, though.)

 2. The Copy Address button seems to copy a random address if clicked right after launching the app
     Do we really need that button anyway? IMHO, it's taking valuable space and doesn't seem that useful to me.

 3. Is it critical to use HTTPS to get the exchange rate? The reason I'm asking is that the resulting Windows
    stand-alone executable would get significantly bigger if I have to include ssl.py and its dependencies.
    It would be around 7+ MB rather than 5.9MB without it. This kind of thing could matter when targeting
    the Windows audience.
 
 4. Hopefully the theme/icons/colors are not final as they could be a lot more polished IMHO.

1. yeah I noticed this. Will have to fix it. (edit: fixed this)
2. But then how will you get your receiving address?
3. I see. Let me investigate this. Thanks for letting me know.
4. Software always looks pretty crude initially. We'll have to fine-tune it as we go along. Perfection is a journey. But I definitely want to have it be eye-candy.

1. Thanks!

2. OK, it wasn't immediately clear to me that the "Copy Address" button was copying
one of the user's *receive addresses* to the clipboard. (Should've read your OP more
carefully!) Perhaps I was misled because the only other reference to the word "address" in the GUI is very near that button, in the input field for *destination* address. Perhaps the button should be renamed to something clearer (such as "Copy My Address" but that might be too long), or have a little  explanation in a tooltip, or provide some feedback after it has been clicked?

3. I've tested an alternate (7z-based) compression method in the meantime, which will
only add 150K or so to the download size, so I guess this is not really an issue anymore
(Although I wish the PyQt libraries were not as big, as they currently account for about 85% of the Electrum executable size on Windows, but that's another story...)

4. OK, great!

[genjix]

Interesting. I guess 2. is a problem then.

A tooltip might not be immediately obvious. I changed it to "Copy My Address" but that seems a bit wordy. Try it out and tell me what you think.

I'm thinking maybe a small popup should appear over the button with the address and some text saying "Your bitcoin address for receiving funds has been copied to your clipboard!". I'm wondering if a minimal/small popup that closes by itself might still be sacrificing usability and quickness by increasing the number of clicks. But certainly now there isn't enough "feedback" as to the action that's just happened.

I'm glad the SSL thing isn't a bother. Saves me a tiny bit of effort

[genjix]

Code:

[deafboy@Planetexpress ~]$ sudo pip install http://ecdsa.org/electrum/Electrum-0.61.tar.gz#md5=9b87fd3fa4c4dae5efa896e9b0d6d51c
[sudo] password for deafboy: 
Downloading/unpacking http://ecdsa.org/electrum/Electrum-0.61.tar.gz#md5=9b87fd3fa4c4dae5efa896e9b0d6d51c
  Downloading Electrum-0.61.tar.gz (227Kb): 227Kb downloaded
  Running setup.py egg_info for package from http://ecdsa.org/electrum/Electrum-0.61.tar.gz#md5=9b87fd3fa4c4dae5efa896e9b0d6d51c
    
Requirement already satisfied (use --upgrade to upgrade): slowaes in /usr/local/lib/python2.7/dist-packages (from Electrum==0.61)
Requirement already satisfied (use --upgrade to upgrade): ecdsa in /usr/local/lib/python2.7/dist-packages (from Electrum==0.61)
Installing collected packages: Electrum
  Found existing installation: Electrum 0.60
    Uninstalling Electrum:
      Successfully uninstalled Electrum
  Running setup.py install for Electrum
    changing mode of build/scripts-2.7/electrum from 644 to 755
    
    changing mode of /usr/local/bin/electrum to 755
Successfully installed Electrum
Cleaning up...
[deafboy@Planetexpress ~]$ electrum 
Traceback (most recent call last):
  File "/usr/local/bin/electrum", line 143, in <module>
    import electrum.gui_lite as gui
ImportError: No module named gui_lite
[deafboy@Planetexpress ~]$

OK this should be fixed now if you wanna test.

[flatfly]

Interesting. I guess 2. is a problem then.

A tooltip might not be immediately obvious. I changed it to "Copy My Address" but that seems a bit wordy. Try it out and tell me what you think.

I'm thinking maybe a small popup should appear over the button with the address and some text saying "Your bitcoin address for receiving funds has been copied to your clipboard!". I'm wondering if a minimal/small popup that closes by itself might still be sacrificing usability and quickness by increasing the number of clicks. But certainly now there isn't enough "feedback" as to the action that's just happened.

I'm glad the SSL thing isn't a bother. Saves me a tiny bit of effort

To me the meaning of that button does look clearer / more intuitive now.  Thanks!
(Of course, that's just my opinion)

Also, how about only showing the BTC balance in the title bar?
The EUR value doesn't show anyway due to the small width of the window (see screenshot)

[bitcats]

I dont like that large Copy button, the GUI looks crammed.

Also, how about only showing the BTC balance in the title bar?
The EUR value doesn't show anyway due to the small width of the window (see screenshot)

Thats right

[genjix]

The problem with moving the balance:

- Click the label
- Type stuff inside the amount field

See what happens. You lose that functionality with it in the titlebar.

[flatfly]

The problem with moving the balance:

- Click the label
- Type stuff inside the amount field

See what happens. You lose that functionality with it in the titlebar.

Actually, I didn't mean to move the balance to the title bar,
but to only show the BTC value (not the EUR) in the title bar, because
it is not wide enough to contain both the BTC value and another currency.

Sorry if I wasn't clear. Let me know if my explanation is still confusing.

[bitcats]

Sent you some bacon 1LDjY9 

[genjix]

How about this?



flatfly, fixed.

[bitcats]

That looks better 

[flatfly]

Yeah, much better, good job!

Thanks for the latest commits. There's still some "ugly flashing" at startup though (noticeable at least on my slow netbook)

[flatfly]

Sent you some bacon 1LDjY9 

Bitcats is becoming one of Electrum's biggest sponsors!

[genjix]

Yeah, much better, good job!

Thanks for the latest commits. There's still some "ugly flashing" at startup though (noticeable at least on my slow netbook)

I just fixed that if you see my last commit. Does it still show for you?

bitcats: nice, tyty that made me really happy.

[flatfly]

Yeah, much better, good job!

Thanks for the latest commits. There's still some "ugly flashing" at startup though (noticeable at least on my slow netbook)

I just fixed that if you see my last commit. Does it still show for you?

bitcats: nice, tyty that made me really happy.

Yes, my previous post was with the latest commit.
There's less flashing than before the commit, but there's still something unfortunately.
Anyway, I think it can only be noticed on slower computers, so probably not too urgent
to fix. I might even try to take a shot at it later.

[bitcats]

Bitcats is becoming one of Electrum's biggest sponsors!

Thanks  
Not as much as you guys deserve. Great job - respectable!

[flatfly]

About the paths to resources... ("background.png", "style.css" and the icons folder):

I think it's not ideal yet. Right now, on Windows, gui_lite appears to be looking for them in %AppData%\Electrum  (which, until now, only ever contained the wallet file).

I'm afraid this will cause a problem when I make my portable builds (the ones that can be run off a USB stick).

If that's no issue to you, please could you consider changing that path to a subfolder (for instance "lite_data") in what I call the "Electrum root directory" - you know, where directories "ecdsa", "lib", "aes", etc are located?

I think it could be more robust and consistent that way. What do you think?

[ThomasV]

About the paths to resources... ("background.png", "style.css" and the icons folder):

I think it's not ideal yet. Right now, on Windows, gui_lite appears to be looking for them in %AppData%\Electrum  (which, until now, only ever contained the wallet file).

I'm afraid this will cause a problem when I make my portable builds (the ones that can be run off a USB stick).

If that's no issue to you, please could you consider changing that path to a subfolder (for instance "lite_data") in what I call the "Electrum root directory" - you know, where directories "ecdsa", "lib", "aes", etc are located?

I think it could be more robust and consistent that way. What do you think?

indeed, the resource files (png, css) should be included in the qrc file

[genjix]

I fixed the paths problem. You can now run it from the local directory.

[flatfly]

I fixed the paths problem. You can now run it from the local directory.

Thanks! Just tested it and it works fine

[flatfly]

Yeah, much better, good job!

Thanks for the latest commits. There's still some "ugly flashing" at startup though (noticeable at least on my slow netbook)

I just fixed that if you see my last commit. Does it still show for you?

bitcats: nice, tyty that made me really happy.

Yes, my previous post was with the latest commit.
There's less flashing than before the commit, but there's still something unfortunately.
Anyway, I think it can only be noticed on slower computers, so probably not too urgent
to fix. I might even try to take a shot at it later.

It wasn't easy, but I finally found the cause of the flicker...
It's actually an issue with gui_qt.py, not gui_lite.py:

by moving the w.show() statement as shown below, the flashing is completely solved.
 

Code:

         QShortcut(QKeySequence("Up"), w, w.focusPreviousChild)
        QShortcut(QKeySequence("Down"), w, w.focusNextChild)
        w.setLayout(grid) 
                                           #   <------ was here

        w2 = QWidget()
        vbox = QVBoxLayout()
        vbox.addWidget(w)
        vbox.addStretch(1)
        w2.setLayout(vbox)
        w.show()                           #   <------ move it here
        
        def entry_changed( is_fee ):
            self.funds_error = False
 

[genjix]

Ah you probably weren't using the latest git version:

"* dcff721 (tag: 0.61b-r1) stop ugly flash because qt gui is trying to show itself."

https://gitorious.org/electrum/electrum/commit/76474c7eed6bf2ed2cedbdacd0161de333d122c7/diffs/dcff721aa9e52298ce58a494a239db237804f2fa

That line was deleted. Hopefully it should also work if you pull.

btw if you're on IRC, we have a channel #electrum on Freenode.

[flatfly]

Ah you probably weren't using the latest git version:

"* dcff721 (tag: 0.61b-r1) stop ugly flash because qt gui is trying to show itself."

https://gitorious.org/electrum/electrum/commit/76474c7eed6bf2ed2cedbdacd0161de333d122c7/diffs/dcff721aa9e52298ce58a494a239db237804f2fa

That line was deleted. Hopefully it should also work if you pull.

btw if you're on IRC, we have a channel #electrum on Freenode.

Yup that was it, not sure how I missed that... thanks!

Sure, next time I'm on IRC, I'll pay a visit to #electrum  

[Lumpy]

Just tried this out from git. Some comments:

1) The Receive button does indeed select a random address. Wouldn't it make more sense for it to select the next unused address? My wallet already has addresses labeled for specific people and selecting one of those would confuse things quite a bit.
2) Could there be settings to choose whether to default to the lite vs. full GUI and default fiat currency?
3) How is the fiat value calculated? I can go to Clark Moody and have it calculate my USD value based on the MtGox order book and it is hundreds of dollars higher than what Electrum is giving me. Which exchange is the price coming from?
4) Is there a way to get back to the lite GUI from the full GUI other than closing the client?

[ThomasV]

2) Could there be settings to choose whether to default to the lite vs. full GUI and default fiat currency?
4) Is there a way to get back to the lite GUI from the full GUI other than closing the client?

I agree with this.
It makes sense to start the lite gui when Electrum is launched by a web browser, in order not to interfere with browsing.
However, when a user starts Electrum from the command line, I think it is more sensible to give direct access to the the full gui

[ThomasV]

1) The Receive button does indeed select a random address. Wouldn't it make more sense for it to select the next unused address? My wallet already has addresses labeled for specific people and selecting one of those would confuse things quite a bit.

please clarify. an address can be unused and have a label, or it can be used and have no label.

[Lumpy]

1) The Receive button does indeed select a random address. Wouldn't it make more sense for it to select the next unused address? My wallet already has addresses labeled for specific people and selecting one of those would confuse things quite a bit.

please clarify. an address can be unused and have a label, or it can be used and have no label.

Unused as in no TXs.

[ThomasV]

1) The Receive button does indeed select a random address. Wouldn't it make more sense for it to select the next unused address? My wallet already has addresses labeled for specific people and selecting one of those would confuse things quite a bit.

please clarify. an address can be unused and have a label, or it can be used and have no label.

Unused as in no TXs.

yes, I agree, it is the most sensible thing to do.  we don't want to manage labels in the lite gui

[genjix]

Just tried this out from git. Some comments:

1) The Receive button does indeed select a random address. Wouldn't it make more sense for it to select the next unused address? My wallet already has addresses labeled for specific people and selecting one of those would confuse things quite a bit.
2) Could there be settings to choose whether to default to the lite vs. full GUI and default fiat currency?
3) How is the fiat value calculated? I can go to Clark Moody and have it calculate my USD value based on the MtGox order book and it is hundreds of dollars higher than what Electrum is giving me. Which exchange is the price coming from?
4) Is there a way to get back to the lite GUI from the full GUI other than closing the client?

1. Fixed
2. Won't fix (for now). Default fiat currency setting - fixed.
3. It's a simple rate * amount.
4. Not for now. Needs some thought how to do this nicely.

Good suggestions. Added them here: https://en.bitcoin.it/wiki/Electrum/TODO

[Lumpy]

Just tried this out from git. Some comments:

1) The Receive button does indeed select a random address. Wouldn't it make more sense for it to select the next unused address? My wallet already has addresses labeled for specific people and selecting one of those would confuse things quite a bit.
2) Could there be settings to choose whether to default to the lite vs. full GUI and default fiat currency?
3) How is the fiat value calculated? I can go to Clark Moody and have it calculate my USD value based on the MtGox order book and it is hundreds of dollars higher than what Electrum is giving me. Which exchange is the price coming from?
4) Is there a way to get back to the lite GUI from the full GUI other than closing the client?

1. Fixed
2. Won't fix (for now). Default fiat currency setting - fixed.
3. It's a simple rate * amount.
4. Not for now. Needs some thought how to do this nicely.

Good suggestions. Added them here: https://en.bitcoin.it/wiki/Electrum/TODO

1. It's working better, but still not ideal for me. Now it alternates between two addresses. One is the most recent address from the gap limit and the other is my... imported address? The imported address does have transactions. I realize that the target userbase isn't likely to have imported addresses, but why is it doing this?
3. I see from the code that it is from Intersango. Now the discrepancy makes sense.

[Andreas Schildbach]

The first row column of image buttons looks like it meant as icons for the text fields to the right. That's irritating IMHO.

I'd try to get rid of them:
- Expanding the UI should go into the window title. Actually is there any difference to the maximize window button?
- Options should either go away or can also go into the window title.
- Fetching addresses from the address book (that's what the upper left image button is meant for?) could perhaps be moved next to "copy address" (which should also be an image button).

Contrasts are much to harsh. Get rid of the black background as long as your text fields have white background.

That coin in the background does not work. It just distracts from the UI.

For mockups, try to insert actual values. For example, how does the interface look like if your balance is BTC 12.50034563?

That said, it's good to have non-intrusive UI on Desktop PCs as well. Spending is mostly an implicit activity and I'd like to not be distracted from what I am actually doing.

[Andreas Schildbach]

More comments:

What's the diagonal cross right to the address field supposed to do? If it's a shortcut for clearing the field (to enter a fresh address), move it to inside the field like all modern UIs do.

For generic operations like "clear field", use standard icons of each platform. Don't invent your own icons. If you need to (for example because it is Bitcoin specific), follow the style guide of each platform. On Windows though, probably all hope is lost :-)

IMHO, the ellipsises ("Enter a Bitcoin address..." + "...and amount") do not work well, because it adds an unnecessary textual reference. I'd try "enter Bitcoin address" and "enter amount".

[jim618]

IMHO, the ellipsises ("Enter a Bitcoin address..." + "...and amount") do not work well, because it adds an unnecessary textual reference. I'd try "enter Bitcoin address" and "enter amount".

I think postfix ellipsises typically indicate 'click on this to open a dialog box' as in 'Save As...'  . I presume this is not the case here and hence will cause a small amount of dissonance.

[ThomasV]

Electrum 0.61 packages with light gui are now available on ecdsa.org

[unclemantis]

Electrum 0.61 packages with light gui are now available on ecdsa.org

IS DOWN!
http://dre.tx0.org/elecwin.htm

[genjix]

We now have a mailing list:

https://lists.sourceforge.net/lists/listinfo/electrum-discuss

[unclemantis]

We now have a mailing list:

https://lists.sourceforge.net/lists/listinfo/electrum-discuss

Subscribed

Switching over to Linux. More stable than windows.