ctubio / tribeca

Self-hosted crypto trading bot (automated high frequency market making) in node.js, angular, typescript and c++
https://127.0.0.1:3000
Other
95 stars 26 forks source link

Improve labels #56

Closed ekienmeier closed 7 years ago

ekienmeier commented 7 years ago

Now that other trading pairs are possible (woohoo!), I think adding some info to the labels in the "Settings" section could help a lot:

  1. Remove misleading tooltips. For example, tbp, pDiv, and others have a tooltip telling you to enter a valid value, if you enter floating point values. However, the floating point values are perfectly valid and work just fine.

  2. Add the currency to the label, so it becomes clear which currency is used for this particular setting. For example, width, pingWidth, and pongWidth values refer to the first currency of a pair (so for EUR/BTC it's EUR), however tbp and pDiv refer to the second currency (in this case BTC). I had a hard time wrapping my brain around these values when setting up ETH/BTC and LTC/BTC on GDAX. So what I am proposing is adding the actual currency to the label: width (EUR), tbp (BTC), etc.

ctubio commented 7 years ago

agree with 2nd point'¡

about 1st point, what tooltips you mean? im not sure that i ever saw any tooltip in my form; maybe can you make a screenshot for reference?

many thanks'¡

ekienmeier commented 7 years ago

Here you go:

image

Mouse is hovering over the input field of bidSize in this case.

ctubio commented 7 years ago

oh, that may be some funky html5 feature of number inputs, can you please let me know what SO, browser name and version are you using? (here i dont see any tooltip in Chrome 57 under winy 7)

thanks'¡

ekienmeier commented 7 years ago

You are correct - these inputs have their type set to "number" without specifying a "step" attribute. Found more info here. Maybe we should use a step value of 0.00001? Also, setting a "min" value could also prove useful. What do you think?

ctubio commented 7 years ago

will try to make use of min and max attributes and display the currency symbols of each numeric input, many thanks for the research'¡

ctubio commented 7 years ago

i still cannot see any tooltip, but in theory... we may had improved something? (still missing the currency symbols somewhere)

let me know in case it was better before, so we can rollback please xD

ekienmeier commented 7 years ago

Much better now, the increment/decrement using arrow up/down work fine now too. Thanks for that!

The only field missing is the trades/sec field: image

As you can see, any floating point number is still marked as invalid - however, Tribeca works just fine with, for example, 1.5 trades per x seconds.

I do like the highlighted border pointing out invalid values. 👍

ekienmeier commented 7 years ago

Another thing I came across when setting up ETH/BTC and LTC/BTC: The value information does not display the currencies, so I have to guess which currency is associated with which value:

image

For EUR/BTC the distiction is quite easy, but for LTC/BTC and ETH/BTC it's not - well, at least not at first. :)

I still run an older version of Tribeca for the EUR/BTC pair (commit ea83226) which still has the Bitcoin and Euros symbols. The symbols make the info really easy to read, just one glance gives you everything you need to know from that box. Maybe use that kind of layout as a template?

ctubio commented 7 years ago

Hello ekienmeier'¡ im afraid to put the symbol near the waller values because there isnt much free space horizontaly (before we had less decimals but now we have up to 8), hope you agree with the solution in the latest commit'¡

(also note, when hover the mouse on wallet values, it should show a tooltip with the currency symbol and the total/available/held)

((still missing the currency symbols somewhere near the inputs))

ekienmeier commented 7 years ago

I like the tooltips Just had an idea - the headline of the wallet info with the exchange name states, for example, LTC/BTC. Underneath it we see the values for the 2nd currency (BTC), then the values for the 1st (LTC). And then there's the total value information: 1st currency on top (LTC), underneath the 2nd currency (BTC).

We could try to swap the currencies in the middle (so, LTC and BTC, instead of BTC and LTC), something like that (mock-up): image

What do you think?

ctubio commented 7 years ago

neat! you read my mind! (or i read your comment, not sure xD)

ekienmeier commented 7 years ago

The wallet looks very good now IMHO, it's well structured. I would like to hear feedback from others on this.

While we're at it: the "Market Width" and "Quote Width" numbers could use a few more decimal places (5 instead of 2) ;)

image

ctubio commented 7 years ago

sorry again! i added the currency unit to the numeric inputs, but i still cannot see nothing yet (no arrows no tooltip, and also no unit for me); do you see the unit in the numeric inputs? if so, is OK? many thanks'¡

the plan was to do something like http://stackoverflow.com/questions/28605416/display-of-units-in-html-stepper-input-type-number, but in this page i can see all OK but not in tribeca :( donno why you can; are you using chrome?

if you think that the last commit is useless, maybe we can implement http://jqueryui.com/spinner/#currency to fix this, as you consider

ekienmeier commented 7 years ago

You are right, the unit attribute is ignored and no symbols are shown in the input fields. Looking at this article, this behaviour is to be expected as "unit" doesn't seem to be a valid attribute for input.

Replacing the "unit" attribute with the "title" attribute would give us a tooltip with the currency used, which would be OK for desktop browsers (not sure about mobile browsers with touch interface). I think this is worth a try.

I also thought about the "placeholder" attribute, but this only shows information when the input field is empty, which in Tribeca is hardly ever the case. So this isn't really practical.

The arrows in the number input fields don't appear for me either. I tried it in Chrome (57) and Edge, both on Windows 10 (version 1703). But I don't really miss them because it's faster to just type the numbers anyway.

Another thing I noticed: since both "Market Width" and "Quote Width" now show more decimal places (excellent, thanks for that!), there's a line break with the "Wallet TBP" and its value: image

This could be fixed by using abbreviations for Market (Mkt), Quote (Qte), and Width (W): image (see market, quote, and width)

What do you think?

ekienmeier commented 7 years ago

if you think that the last commit is useless, maybe we can implement http://jqueryui.com/spinner/#currency to fix this, as you consider

While this solution seems quite elegant, I'm not sure if it's worth the effort. I'd be quite happy with a tooltip on the input fields showing the currency. :)

ctubio commented 7 years ago

im sorry i failed with the position/white-space/overflow of the TBP, will fix without abbrebviations'¡ :D

cool! lets go for the title attribute then'¡! i didnt wanted to use it in first place to not replace the title of the html5 saying the min/max values, but is more important to see the unit than the html5 tooltip so lets replace the titles'¡

thanks for your time'¡!

ctubio commented 7 years ago

btw i was finally able to see in tribeca this html5 funky features (using Firefox), and they look quite horrible this gray buttons everywhere xD

ekienmeier commented 7 years ago

Cool, line break is fixed now, thanks a lot! 🖖