BitShares Forum

Main => General Discussion => Topic started by: svk on March 16, 2015, 10:41:01 am

Title: Reworking the wallet trading interface
Post by: svk on March 16, 2015, 10:41:01 am
I've made some initial progress on reworking the trading interface of the wallet, I would like to get some feedback and for us to do some brainstorming on features. I've used the coinbase interface as inspiration, but due to the complexity of Bitshares trading with shorts/margin calls etc you end up having to display more info resulting in a more cramped interface, so it's hard to get it as nice as theirs.

The biggest changes so far are:
Improvements I'd like to make still:
- Ideally I'd prefer to use standard tables instead of ui-grid but they do offer speed compared to standard angular.
- Put daily range, volume etc on top of orderbook chart like on bitsharesblocks
- Unify open order tables to contain buy, sell and shorts
- Split order history and price history chart into separate tab

You can check this out by using the web_wallet in a browser, simply checkout the branch newlayout_market, then follow the standard procedure for running the web wallet.

Here are some screenshots:

(http://i.imgur.com/sWdHfawh.png) (http://imgur.com/sWdHfaw)

(http://i.imgur.com/TND3sTQh.png) (http://imgur.com/TND3sTQ)
Title: Re: Reworking the wallet trading interface
Post by: xeroc on March 16, 2015, 10:52:49 am
Nice work so far!  +5% +5%

Some suggestions:

- right align all numbers (price and volume) such that in the table all comma separators are aligned
- why is the price history gone? can't you add a button/switch above the plot to switch between orderbook/price history? I think cryptsy is doing it that way
- can I have a zoom function for all plots? You know, the second graph from highchartsJS
- If you are also pimping the JS part: make a double click of an order in the order book an instant "execute+confirm"

Also, what happens on a 4:3 screen?

edit: have you contacted @cass? He had some nice thoughts and templates for a feature reach and nicely looking trading page ..
Title: Re: Reworking the wallet trading interface
Post by: cass on March 16, 2015, 11:08:21 am
 +5%  +5% Yesss Sir :)

I'll will ping you for more suggestion later this day
Title: Re: Reworking the wallet trading interface
Post by: svk on March 16, 2015, 01:37:16 pm
Nice work so far!  +5% +5%

Some suggestions:

- right align all numbers (price and volume) such that in the table all comma separators are aligned
- why is the price history gone? can't you add a button/switch above the plot to switch between orderbook/price history? I think cryptsy is doing it that way
- can I have a zoom function for all plots? You know, the second graph from highchartsJS
- If you are also pimping the JS part: make a double click of an order in the order book an instant "execute+confirm"

Also, what happens on a 4:3 screen?

edit: have you contacted @cass? He had some nice thoughts and templates for a feature reach and nicely looking trading page ..

Not sure right aligning will work but I agree something needs to be done, also need to make the decimals more uniform.

Price history charts are pretty ugly due to a bug in the client giving too big ranges, that should get fixed in 0.7 I believe though. But I just feel it gets too messy with that plot on the same page, I'll try to bring it back through a switch or tab.

Not sure which second graph you mean, I could put in a zoom similar to what you have on bitsharesblocks here: http://bitsharesblocks.com/charts/prices

Currently clicking on a row fills out the bid/ask part, insta-confirm is dangerous imo, I prefer to keep it as is.

On smaller screens things move down etc, it works ok but not as nice of course.

Title: Re: Reworking the wallet trading interface
Post by: xeroc on March 16, 2015, 01:50:15 pm
Cool .. thanks for the feedback .. much appreciated.

This is the second graph I am talking about:
(http://i.imgur.com/exe5Q8G.png)
It allows to define the 'borders' of the bigger plot
Title: Re: Reworking the wallet trading interface
Post by: svk on March 16, 2015, 01:56:06 pm
Cool .. thanks for the feedback .. much appreciated.

This is the second graph I am talking about:
(http://i.imgur.com/exe5Q8G.png)
It allows to define the 'borders' of the bigger plot

Right, that's called the "navigator" in highcharts terminology. Not a fan of that myself really, adds clutter. You can get the same effect through x-axis zooming directly on the plot, like I have on the price chart that I linked above.
Title: Re: Reworking the wallet trading interface
Post by: valzav on March 16, 2015, 01:58:15 pm
 +5%
It would be great to combine open orders into a single table before putting this into production - due to fixed order form tabs this layout has more tight requirements to screen real estate. Probably each order in combined orders table would need to take two lines because not all orders types have the same set of fields and this table wouldn't have header. Different orders can be shown in different colors - the same colors used for table headers now.
Also I would suggest you to show charts in tabs, so users would be able to select what they want to see - either price chart or order book chart.
BTW right align numbers is already on my to do list, I think I'm going to address it this week.
Title: Re: Reworking the wallet trading interface
Post by: valzav on March 16, 2015, 01:59:40 pm
- Ideally I'd prefer to use standard tables instead of ui-grid but they do offer speed compared to standard angular.
Another reason to use ui-grid is fixed table headers.
Title: Re: Reworking the wallet trading interface
Post by: xeroc on March 16, 2015, 02:03:32 pm
Right, that's called the "navigator" in highcharts terminology. Not a fan of that myself really, adds clutter. You can get the same effect through x-axis zooming directly on the plot, like I have on the price chart that I linked above.
Awesome! Thanks .. can you make it work with mouse wheel scrolling?
Title: Re: Reworking the wallet trading interface
Post by: svk on March 16, 2015, 02:05:05 pm
+5%
It would be great to combine open orders into a single table before putting this into production - due to fixed order form tabs this layout has more tight requirements to screen real estate. Probably each order in combined orders table would need to take two lines because not all orders types have the same set of fields and this table wouldn't have header. Different orders can be shown in different colors - the same colors used for table headers now.
Also I would suggest you to show charts in tabs, so users would be able to select what they want to see - either price chart or order book chart.
BTW right align numbers is already on my to do list, I think I'm going to address it this week.

Yea agreed on the charts and the combined orders, the shorts complicate things with extra columns but at least the buys/sells should be doable.

What do you think about removing one of the quantity columns, i.e only showing USD quantity plus price or BTS quantity plus price? (removing Total column)
Title: Re: Reworking the wallet trading interface
Post by: valzav on March 16, 2015, 04:22:26 pm
+5%
It would be great to combine open orders into a single table before putting this into production - due to fixed order form tabs this layout has more tight requirements to screen real estate. Probably each order in combined orders table would need to take two lines because not all orders types have the same set of fields and this table wouldn't have header. Different orders can be shown in different colors - the same colors used for table headers now.
Also I would suggest you to show charts in tabs, so users would be able to select what they want to see - either price chart or order book chart.
BTW right align numbers is already on my to do list, I think I'm going to address it this week.

Yea agreed on the charts and the combined orders, the shorts complicate things with extra columns but at least the buys/sells should be doable.

What do you think about removing one of the quantity columns, i.e only showing USD quantity plus price or BTS quantity plus price? (removing Total column)
I think it's fine to get rid of total column
Title: Re: Reworking the wallet trading interface
Post by: Xeldal on March 16, 2015, 04:52:18 pm
+5%
It would be great to combine open orders into a single table before putting this into production - due to fixed order form tabs this layout has more tight requirements to screen real estate. Probably each order in combined orders table would need to take two lines because not all orders types have the same set of fields and this table wouldn't have header. Different orders can be shown in different colors - the same colors used for table headers now.
Also I would suggest you to show charts in tabs, so users would be able to select what they want to see - either price chart or order book chart.
BTW right align numbers is already on my to do list, I think I'm going to address it this week.

Yea agreed on the charts and the combined orders, the shorts complicate things with extra columns but at least the buys/sells should be doable.

What do you think about removing one of the quantity columns, i.e only showing USD quantity plus price or BTS quantity plus price? (removing Total column)
I think it's fine to get rid of total column
Great stuff  +5% 

some suggestions:
[/list]
Title: Re: Reworking the wallet trading interface
Post by: kaibakker on March 16, 2015, 07:00:36 pm
Great work, looks already a 100 times better.

- Have you thought about flipping the sell orders book in reversed order, like how they do it on the Coinbase exchange. This gives a good perspective on the spread.
- What I also really like about Coinbase is that they don't let you scroll through all the tables, just showing the most relevant ones that fit into you screen. I often get tangled up by all the scrolling views in the Bitshares client.
- I don't know the exact consequences of this, but have you thought about the idea to integrate shorts into the sell view. Give the shorts a different color that the sell orders, don't show the intrest rate or collateral. They aren't interesting for a buyer of the asset. And show the price as the max(minimum_price, price_feed).
Only the moment someone clicks the short tab, a user is interested in the intrest rate and collateral. So I think it would be good to only show it than.

Keep up the great work!

Title: Re: Reworking the wallet trading interface
Post by: arhag on March 17, 2015, 01:12:12 am
My preference would be something like the following:
Code: [Select]
BitUSD : BTS [flip]      Call price       Last price       Spread   Total BitUSD Supply   Total BTS Supply
                         100 BTS/BitUSD   105 BTS/BitUSD   0.905%    433,000.00 BitUSD     2,503,706,843 BTS
------------- -----------
| Orderbook | | History |
| --------- | |         |
----------------------------------------------------------------------------------------------------------------------------------
|   |                         
|   |                                                   [Orderbook Chart]
|   |
|   | Show quantity in: (*) BitUSD  ( ) BTS
|   |
|   | Bids                                                           Asks
|   | ----------------------------------------------------------     ----------------------------------------------------------
| l | | Type          | Quantity (BitUSD) | Price (BTS/BitUSD) |     | Price (BTS/BitUSD) | Quantity (BitUSD) | Type          |
| e | ------------------------------------------------------------   ------------------------------------------------------------
| f | | Margin Call   |         12,000.00 |           111.1111 |^|   |           112.0000 |          1,215.00 | Short Sell    |^|
| t | | Buy BitAsset  |            600.00 |           101.2500 |||   |           120.0000 |            750.00 | Sell BitAsset |||
|   | | Expired Cover |          1,601.32 |           100.0000 |||   |           120.0000 |          5,000.00 | Short Sell    |||
| c | | Buy BitAsset  |            512.34 |            99.9091 | |   |                    |                   |               |||
| o | | Buy BitAsset  |            200.00 |            99.0000 |v|   |                    |                   |               |v|
| l | ------------------------------------------------------------   ------------------------------------------------------------
| u |
| m | [*] Display detailed short information
| n | ------------------------------------------------------------------------------------------------------------------
|   |
|   | Margin Call Orders                                                       
|   | ---------------------------------------------------------------------------------------------------------------
|   | | Call Price (BTS/BitUSD) ^2 | Interest Rate (APR) -- | Owed (BitUSD) -- | Expiration      ^3 | Condition  v1 | 
|   | -----------------------------------------------------------------------------------------------------------------
|   | |                   110.0000 |                   0.00 |        12,000.00 | 6 Days             | Margin Called |^|
|   | |                   130.0000 |                   2.00 |         1,501.32 | 2 Days Ago         | Expired       |||
|   | |                   135.0000 |                   0.00 |           100.00 | 1 Day Ago          | Expired       |||
|   | |                   130.0000 |                   0.00 |        10,000.00 | 10/25/2015 9:18 AM | Active        |||
|   | |                   165.0000 |                   1.10 |         3,000.00 | 30 Days            | Active        |v|       
|   | -----------------------------------------------------------------------------------------------------------------
|   |
|   | Short Sell Orders
|   | -------------------------------------------------------------------------------
|   | | Price Limit (BTS/BitUSD) ^1 | Interest Rate (APR) v2 | Quantity (BitUSD) -- |     
|   | ---------------------------------------------------------------------------------
|   | |                    112.0000 |                   1.00 |             1,100.00 |^|   
|   | |                    112.0000 |                   0.50 |               115.00 |||   
|   | |                    120.0000 |                   0.00 |             5,000.00 |||   
|   | |                             |                        |                      |||
|   | |                             |                        |                      |v|   
|   | ---------------------------------------------------------------------------------
|   |
|   | ------------------------------------------------------------------------------------------------------------------
|   |
----------------------------------------------------------------------------------------------------------------------------------
The left column under the "Orderbook" tab would be similar to what you have in the left column in your layout (the box with tabs to Buy, Sell, and Short and the respective open orders tables underneath), however there would be an addition Cover tab which would include the "Open Margin Orders" table (renamed "Open Margin Call Orders"). Later I can imagine the Cover tab supporting functionality like partial covers and adding collateral. Also the BitUSD balances and BTS balances would be shown in the left column (on top of the buy/sell/short box) and not in the right column (because they are user-specific information not market-specific).

There are two main tabs in my proposed interface: "Orderbook" and "History". The "History" would show the price history chart and the "Blockchain Orders History" table underneath it in the right column, and it would put the "Account Orders History" table into the left column. The "Orderbook" tab looks as I have laid out in ASCII above. I will explain it in more shortly. Despite this tabbed interface, if the screen is large enough, I think it makes sense to instead pull out the history tab contents and put it on the right side next to the orderbook tab contents. In this case I think the "Account Orders History" table should not be in a column by itself but rather underneath the "Blockchain Orders History" table. So the layout for large screens would be a three column layout in which the left column is the same as the left column described above, the middle column is the contents of the right column in the mockup above, and the right column is the price history chart followed by the "Blockchain Orders History" table followed by the "Account Orders History" table.

The tables have removed the two quantities (Quantity and Total) and kept only one. The asset that is used to display the quantity is the one that is selected in the "Show quantity in:" option box. The user change that selection at any time and it will update the Quantity columns of all of the tables appropriately. The market can be flipped as usual using the [flip] button. If the [flip] button is pressed in a "BitUSD : BTS" market, it will replace it with a "BTS : BitUSD" market and make appropriate changes in the rest of the interface. In general, the market is "Quote : Base". The prices will be given in Quote/Base. So if the market was flipped to "BTS : BitUSD" all the prices in BTS/BitUSD would be replaced with prices in BitUSD/BTS (also the ascending/descending sort of a price column would be flipped). By default the quantity to show is selected as the Quote asset, but of course it can be changed with the "Show quantity in:" option box.

The "Display detailed short information" checkbox toggles whether the "Margin Call Orders" table and "Short Sell Orders" table will appear underneath it. By default this checkbox can be unchecked (meaning not showing the tables).

When looking at a "Quote : Base" market in which neither Quote nor Base is BTS or alternatively one of Quote or Base is BTS and the other is not a BitAsset, the layout would look the same except there would be no "Display detailed short information" checkbox (and no "Margin Call Orders" table or "Short Sell Orders" table), and the Type columns from the "Bids" and "Asks" table would be removed.

When looking at a "Quote : Base" market in which Base is BTS and Quote is a BitAsset, the "Margin Call" type and "Expired Cover" type would be under the "Bids" table and the "Short Sell" type would be under the "Asks" table (as demonstrated in the example above). On the other hand, when looking at a "Quote : Base" market in which Quote is BTS and Base is a BitAsset, the "Margin Call" type and "Expired Cover" type would be under the "Asks" table and the "Short Sell" type would be under the "Bids" table.

The orderbook chart should always show the order types that fall into the "Asks" table on the right side and show the order types that fall into the "Bids" table on the left side. They should also be color coded to match the color of the titles of the "Asks" and "Bids" tables appropriately. The orderbook chart should allow one to zoom in/out and define the domain to be smaller than [lowest bid price, highest ask price]. Also the quantity shown in the orderbook chart should be of the asset selected from the "Show quantity in:" option box. The orderbook chart should of course visualize the feed price as a line as it currently does.

As can be seen by my mockup, the short sell orders are combined with the sell orders into one table. The "Short Sell Orders" table would include detailed information about the short sell orders that are not included in the combined table (such as interest rate offered), but would also differ from the combined order in that the price limit column would be the price limit set by the short (even if it is less, in BTS/BitAsset price, than the current price feed). The number shown for short sell orders in the price column of the combined table is instead max(price limit in BTS/BitAsset, feed price in BTS/BitAsset) if the Base asset is BTS or min(price limit in BitAsset/BTS, feed price in BitAsset/BTS) if the Quote asset is BTS. Also, short sell orders and sell orders at the same price are not coalesced together in the combined table to show that there are two different types of orders offered at the same price (my hope is that the market engine would actually match sell orders before short sell orders at the same price so that this visual distinction actually has important meaning, but until then it is just an aesthetic choice). However, multiple short sells orders at the same price are coalesced together and multiple sell orders at the same price are coalesced together. Similarly, expired cover orders, margin call orders, and buy orders are not coalesced together in a way that mixes types in the combined table (again it would be nice if the market engine guaranteed that given three orders of different types at the exact same price, the margin call order was matched before the expired cover order which was matched before the BitAsset buy order). However, orders of the same type and at the same price are coalesced together.

The collateral column is removed from the tables because it is redundant information (it can be calculated from the given columns and knowledge about the initial collateral requirements, margin call requirements, and expiration period of the BitAsset system). However, this information and any other detailed information (such as the precise time that a short position expires or the principal BitAsset owed not counting the interest) can be included in tooltips when hovering over a specific order in any of the "Margin Call Orders", "Short Sell Orders", "Blockchain Orders History", "Account Orders History", and "Open * Orders" tables. The tooltip over orders in the "Bids" and "Asks" tables could not provide the same level of information because in general orders can be coalesced together in those tables. However, the tooltip could still provide a calculation of the Quantity in units of the other asset type that is not already displayed as a column in the table.

The "Bids" and "Asks" tables should highlight orders for which one of the user's orders are coalesced into. Also, orders exactly at the price feed should also be highlighted in a different color.

The "Margin Call Orders" table adds a Condition column to show whether the short position is Active, Expired, or Margin Called. The expiration column also shows the expiration date even if the short position has already expired ("1 Day Ago" to "30 Days Ago" to a timestamp if older than 30 days). An "Expired" short position can become "Margin Called" but a "Margin Called" position can never become "Expired". The Expired and Margin Called items in this table are not removed until their BitAsset debt with interest (which is the Owed column) is fully paid off. Margin Called orders might have a Call Price larger than the current feed price, as shown in the mockup example. This can happen since the Margin Call would have been triggered when the call price was lower, but partially covering the short through the margin call could increase the call price. For example, if the short in that example originally owed 15,000 BitUSD and had a call price of 99 BTS/BitUSD, then the price feed updating to 100 BTS/BitUSD would trigger a margin call on that short which would cause it to purchase asks up to a price of 111.1111 BTS/BitUSD. Let us pretend there was only one ask order below that price: a short sell order for 3,000 BitUSD at 0% interest and a price limit at 110 BTS/BitUSD. Then the margin call would match against that order (fully matching the short sell order), pay 330,000 BTS from its collateral of 2,970,000 BTS, and reduce its debt owed from 15,000 BitUSD to 12,000 BitUSD. Thus the new collateral would be 2,640,000 BTS and the new debt owed would be 12,000 BTS, which correspond to a call price of 110 BTS/BitUSD. But just because the new call price is higher than the feed price doesn't mean the order is no longer margin called; the margin call order stays (and in fact moves with the price feed maintaining its 10% difference) until the remaining 12,000 BitUSD is fully matched.

Finally, the ^N and vN indicators on the "Margin Call Orders" and "Short Sell Orders" table indicate table sorting rules. The arrow direction indicates whether the column is sort in ascending or descending order. The number is a priority in sorting. The items in the table are sorted according to the column that has the first priority in sorting order, then any items with the same value are sorted according to the column that has the second priority in sorting order, and so on. Clicking on the sorting indicator toggles between ascending, descending, and neutral. Whenever a sorting indicator that had priority N is toggled to neutral, any existing columns with non-neutral sorting indicators that have priority greater than N in the table have their sorting priority decremented by one automatically. Whenever a sorting indicator that was neutral is toggled to a non-neutral setting, it gets a sorting priority that is one larger than the current largest sorting indicator priority of the table.
Title: Re: Reworking the wallet trading interface
Post by: CLains on March 17, 2015, 01:25:38 am
Great work svk!  +5%

I played around with the screenshot in paint for a bit, maybe some ideas http://i59.tinypic.com/10okydj.png

random ideas:

collapsable open orders (they pop up when they are relevant)
collapsable sell/buy/short/margin/blockchain orders history
markets with search and tab,
have relevant user listed as a heading with balances under, and direct tab to select other users.
use pop-ups after clicking buy/sell/short
use strong colors for the button we want people to click on (buy/sell/short)
have a price chart with mutiple time-scales to chose from
have an option to select background colors (themes).

too much! I know. great job so far, everything you're doing is top notch :)

Title: Re: Reworking the wallet trading interface
Post by: arhag on March 17, 2015, 04:31:19 am
I have an alternative view which is nicer for larger screens:
Code: [Select]
|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|^|
| BitUSD : BTS [flip]      Total BitUSD Supply: 433,000.00 BitUSD   Total BTS Supply: 2,503,706,843     Show Quantity in:  (*) BitUSD  ( ) BTS                                                |||
|                                                                                                                                                                                             |||
| ------- -------- --------- --------- -----------                  ||  24h Volume   High         Low          Change    Latest Price   Highest Bid   Lowest Ask   Spread   Call Price        |||
| | Buy | | Sell | | Short | | Cover | | History |                  ||  7,000.00     111.0000     90.0000      -12.05%   105.0000       111.1111      112.0000     0.797%   100.0000          |||
| |     | |      | | ----- | |       | |         |                  ||  BitUSD       BTS/BitUSD   BTS/BitUSD             BTS/BitUSD     BTS/BitUSD    BTS/BitUSD            BTS/BitUSD        |||
|-------------------------------------------------------------------|| ------------------------------------------------------- | ------------------------------------------------------------ |||
| ----------------------------------------------|                   || |                                                     | | |                                                          | |||
| | Balance       0.00 BTS (account-name)       |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| | Collateral    |            0.0 | BTS        |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| | Interest Rate |            0.0 | APR        |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | ||| 
| | Price Limit   | (optional) 0.0 | BTS/BitUSD |                   || |                                                     | | |                                                          | |||
| |               Call Price 100 BTS/BitUSD     |                   || |                Price History Chart                  | | |                    Market Depth Chart                    | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| | Quantity      |            0.0 | BitUSD     |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| |               [Short BitUSD]                |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| -----------------------------------------------                   || |                                                     | | |                                                          | |||
|                                                                   || |                                                     | | |                                                          | |||
| Open Short Sell Orders                                            || |                                                     | | |                                                          | |||
| ---------------------------------------------------------------   || |                                                     | | |                                                          | |||
| | Price Limit  ^1 | Interest Rate -- | Quantity -- | Action   |   || ------------------------------------------------------- | ------------------------------------------------------------ |||
| | (BTS/BitUSD)    | (APR)            | (BitUSD)    |          |   ||                                                         |                                                              |||
| ----------------------------------------------------------------- || Order History ([longer detailed history])               | Bids ([margin call details])   Asks ([short sell details])   |||
| |        112.0000 |             1.00 |    1,100.00 | [Cancel] |^| || ------------------------------------------------------- | -----------------------------  ----------------------------- |||
| |                 |                  |             |          ||| || | Timestamp | Match Type    | Price        | Quantity | | | Quantity   | Price        |  | Price        | Quantity   | |||
| |                 |                  |             |          |v| || |           |               | (BTS/BitUSD) | (BitUSD) | | | (BitUSD)   | (BTS/BitUSD) |  | (BTS/BitUSD) | (BitUSD)   | | |
| ----------------------------------------------------------------- || ------------------------------------------------------| | -----------------------------  ----------------------------- | |
|                                                                   || | 22:16:30  | Call  - Short |     110.0000 | 3,000.00 | | |  12,000.00 |     111.1111 |  |     112.0000 |   1,215.00 | | |
|                                                                   || | 22:00:00  | Sell  - Buy   |     101.0000 |    40.00 | | |     600.00 |     101.2500 |  |     120.0000 |     750.00 | | |
|                                                                   || | 21:30:00  | Short - Buy   |     101.0000 |    50.00 | | |   1,601.32 |     100.0000 |  |     120.0000 |   5,000.00 | | |
|                                                                   || | 21:00:00  | Cover - Sell  |      98.0000 |   100.00 | | |     512.34 |      99.9091 |  ----------------------------- | |
|                                                                   || | 20:30:00  | Buy   - Short |      97.0000 |   500.00 | | |     200.00 |      99.0000 |                                | |
|                                                                   || | 20:00:00  | Buy   - Sell  |      96.0000 |   100.00 | | |     100.00 |      98.0000 |                                |v|
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

This is a two column layout even though it looks like a three column layout. To simplify the description I will refer to it as if it is a three column layout. The left column sticks to the window (meaning it doesn't scroll with the page). The middle+right columns are separated in the vertical orientation by the bottom of the headers of the "Order History", "Bids", and "Asks" tables (which are all flushed). The top half of middle+right column sticks to the page (meaning the two charts and the headers of the tables are always visible no matter how much the user scrolls). The bottom half of the middle+right columns (which consist of the entries of the tables) scroll with the page. The middle+right column is as long as is necessary to fit all of the items that go in the "Bids" and "Asks" tables. The order history can have max(5, max(number of items in Bids table, number of items in Asks table)) number of items (so that bottom of the "Order History" table is flushed with either the "Bids" table or the "Asks" table). To see more of the order history, the user must click on the [longer detailed history] link which will load up a more detailed version of the table in a new page.

The "Bids" and "Asks" tables in the right column are condensed forms of the "Bids" and "Asks" tables I discussed in my previous post. The Type column has been removed and is instead encoded through the color of the Price text. The color of the Price text only applies to the part of the text that includes the digits to the left of the decimal place; the color of digits to the right of the decimal place, and the decimal character as well, are always the same grey color. There are 5 distinct colors for the Price labeled as follows: BID_COLOR, ASK_COLOR, EXPIRED_COLOR (for table items with the "Expired Cover" type), CALL_COLOR (for table items with the "Margin Call" type), and SHORT_COLOR (for table items with the "Short Sell" type). For any items in the "Bids" table that are not one of ("Expired Cover", "Margin Call", "Short Sell"), the Price field of that item will be colored BID_COLOR (which I suggest be a green color).  For any items in the "Asks" table that are not one of ("Expired Cover", "Margin Call", "Short Sell"), the Price field of that item will be colored ASK_COLOR (which I suggest be a red color). And again any items in the table that contain the user's open orders should be highlighted in some way. In addition, the "Bids" label will be colored BID_COLOR and the "Asks" label will be colored ASK_COLOR. Also, the Quantity field should also be colored grey for part to the right of the decimal (including the decimal) and NEUTRAL_COLOR (which is probably best to use white if the background is dark or black if the background is light) for the part to the left of the decimal. This applies to all quantity-like fields in other tables as well (as well as "Price Limit" and "Interest Rate" in "Short Sell Orders" and "Open Short Sell Orders" and "Call Price", "Interest Rate", and "Owed" in "Margin Call Orders" and "Open Margin Call Orders").

The "Order History" table shown above in the middle column is a simplified version of the normal "Order History" table found in BitShares. The timestamp only shows the time in the day but not the date. The price column refers to the price of the matched driving order (the submitted order that caused the match to occur as soon as it was included in the blockchain) not driven order (the latent order sitting in the order book waiting to get matched). The quantity column also refers to the quantity of the matched driving order. The "Match Type" column is of the form "<Driving Type> - <Driven Type>" where <Driving Type> is the type of the driving order and <Driven Order> is the type of the driven order (both types can be one of "Call", "Cover", "Short", "Sell", or "Buy"). The Quantity field should be colored as described in the previous paragraph. Also, the Price field should be colored in a similar way where the choice of color comes from the <Driving Type>: "Call" -> CALL_COLOR, "Cover" -> EXPIRED_COLOR, "Short" -> SHORT_COLOR, "Buy" -> BID_COLOR, "Sell" -> ASK_COLOR.

The "History" tab in the left column shows the "Account Orders History" table. Each of the tables under the tabs in the left column are of limited height, however, unlike the "Order History" table, they are scrollable (if necessary).

Clicking on the [margin call details] link or the [short sell details] link will create a hovering overlay centered horizontally and vertically over the region of space encompassing the Price History Chart (with some margin on all sides). This overlay will contain a scrollable table of either "Margin Call Orders" if [margin call details] was clicked or "Short Sell Orders" if [short sell details] was clicked. The overlay can be closed by clicking on an X on the corner of the overlay window. Note that the two links may be swapped (meaning [margin call details] would be next to "Bids" and [short sell details] would be next to "Asks") if the market was flipped to be "BTS : BitAsset". The [margin call details] link will be colored CALL_COLOR and the [short sell details] link will be colored SHORT_COLOR. Also, within the "Margin Call Orders" table, the "Margin Called" condition will be colored CALL_COLOR, "Expired" condition will be colored EXPIRED_COLOR, and "Active" condition will be colored NEUTRAL_COLOR.
Title: Re: Reworking the wallet trading interface
Post by: svk on March 17, 2015, 09:16:45 am
I have an alternative view which is nicer for larger screens:
Code: [Select]
|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|^|
| BitUSD : BTS [flip]      Total BitUSD Supply: 433,000.00 BitUSD   Total BTS Supply: 2,503,706,843     Show Quantity in:  (*) BitUSD  ( ) BTS                                                |||
|                                                                                                                                                                                             |||
| ------- -------- --------- --------- -----------                  ||  24h Volume   High         Low          Change    Latest Price   Highest Bid   Lowest Ask   Spread   Call Price        |||
| | Buy | | Sell | | Short | | Cover | | History |                  ||  7,000.00     111.0000     90.0000      -12.05%   105.0000       111.1111      112.0000     0.797%   100.0000          |||
| |     | |      | | ----- | |       | |         |                  ||  BitUSD       BTS/BitUSD   BTS/BitUSD             BTS/BitUSD     BTS/BitUSD    BTS/BitUSD            BTS/BitUSD        |||
|-------------------------------------------------------------------|| ------------------------------------------------------- | ------------------------------------------------------------ |||
| ----------------------------------------------|                   || |                                                     | | |                                                          | |||
| | Balance       0.00 BTS (account-name)       |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| | Collateral    |            0.0 | BTS        |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| | Interest Rate |            0.0 | APR        |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | ||| 
| | Price Limit   | (optional) 0.0 | BTS/BitUSD |                   || |                                                     | | |                                                          | |||
| |               Call Price 100 BTS/BitUSD     |                   || |                Price History Chart                  | | |                    Market Depth Chart                    | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| | Quantity      |            0.0 | BitUSD     |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| |               [Short BitUSD]                |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| -----------------------------------------------                   || |                                                     | | |                                                          | |||
|                                                                   || |                                                     | | |                                                          | |||
| Open Short Sell Orders                                            || |                                                     | | |                                                          | |||
| ---------------------------------------------------------------   || |                                                     | | |                                                          | |||
| | Price Limit  ^1 | Interest Rate -- | Quantity -- | Action   |   || ------------------------------------------------------- | ------------------------------------------------------------ |||
| | (BTS/BitUSD)    | (APR)            | (BitUSD)    |          |   ||                                                         |                                                              |||
| ----------------------------------------------------------------- || Order History ([longer detailed history])               | Bids ([margin call details])   Asks ([short sell details])   |||
| |        112.0000 |             1.00 |    1,100.00 | [Cancel] |^| || ------------------------------------------------------- | -----------------------------  ----------------------------- |||
| |                 |                  |             |          ||| || | Timestamp | Match Type    | Price        | Quantity | | | Quantity   | Price        |  | Price        | Quantity   | |||
| |                 |                  |             |          |v| || |           |               | (BTS/BitUSD) | (BitUSD) | | | (BitUSD)   | (BTS/BitUSD) |  | (BTS/BitUSD) | (BitUSD)   | | |
| ----------------------------------------------------------------- || ------------------------------------------------------| | -----------------------------  ----------------------------- | |
|                                                                   || | 22:16:30  | Call  - Short |     110.0000 | 3,000.00 | | |  12,000.00 |     111.1111 |  |     112.0000 |   1,215.00 | | |
|                                                                   || | 22:00:00  | Sell  - Buy   |     101.0000 |    40.00 | | |     600.00 |     101.2500 |  |     120.0000 |     750.00 | | |
|                                                                   || | 21:30:00  | Short - Buy   |     101.0000 |    50.00 | | |   1,601.32 |     100.0000 |  |     120.0000 |   5,000.00 | | |
|                                                                   || | 21:00:00  | Cover - Sell  |      98.0000 |   100.00 | | |     512.34 |      99.9091 |  ----------------------------- | |
|                                                                   || | 20:30:00  | Buy   - Short |      97.0000 |   500.00 | | |     200.00 |      99.0000 |                                | |
|                                                                   || | 20:00:00  | Buy   - Sell  |      96.0000 |   100.00 | | |     100.00 |      98.0000 |                                |v|
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

This is a two column layout even though it looks like a three column layout. To simplify the description I will refer to it as if it is a three column layout. The left column sticks to the window (meaning it doesn't scroll with the page). The middle+right columns are separated in the vertical orientation by the bottom of the headers of the "Order History", "Bids", and "Asks" tables (which are all flushed). The top half of middle+right column sticks to the page (meaning the two charts and the headers of the tables are always visible no matter how much the user scrolls). The bottom half of the middle+right columns (which consist of the entries of the tables) scroll with the page. The middle+right column is as long as is necessary to fit all of the items that go in the "Bids" and "Asks" tables. The order history can have max(5, max(number of items in Bids table, number of items in Asks table)) number of items (so that bottom of the "Order History" table is flushed with either the "Bids" table or the "Asks" table). To see more of the order history, the user must click on the [longer detailed history] link which will load up a more detailed version of the table in a new page.

The "Bids" and "Asks" tables in the right column are condensed forms of the "Bids" and "Asks" tables I discussed in my previous post. The Type column has been removed and is instead encoded through the color of the Price text. The color of the Price text only applies to the part of the text that includes the digits to the left of the decimal place; the color of digits to the right of the decimal place, and the decimal character as well, are always the same grey color. There are 5 distinct colors for the Price labeled as follows: BID_COLOR, ASK_COLOR, EXPIRED_COLOR (for table items with the "Expired Cover" type), CALL_COLOR (for table items with the "Margin Call" type), and SHORT_COLOR (for table items with the "Short Sell" type). For any items in the "Bids" table that are not one of ("Expired Cover", "Margin Call", "Short Sell"), the Price field of that item will be colored BID_COLOR (which I suggest be a green color).  For any items in the "Asks" table that are not one of ("Expired Cover", "Margin Call", "Short Sell"), the Price field of that item will be colored ASK_COLOR (which I suggest be a red color). And again any items in the table that contain the user's open orders should be highlighted in some way. In addition, the "Bids" label will be colored BID_COLOR and the "Asks" label will be colored ASK_COLOR. Also, the Quantity field should also be colored grey for part to the right of the decimal (including the decimal) and NEUTRAL_COLOR (which is probably best to use white if the background is dark or black if the background is light) for the part to the left of the decimal. This applies to all quantity-like fields in other tables as well (as well as "Price Limit" and "Interest Rate" in "Short Sell Orders" and "Open Short Sell Orders" and "Call Price", "Interest Rate", and "Owed" in "Margin Call Orders" and "Open Margin Call Orders").

The "Order History" table shown above in the middle column is a simplified version of the normal "Order History" table found in BitShares. The timestamp only shows the time in the day but not the date. The price column refers to the price of the matched driving order (the submitted order that caused the match to occur as soon as it was included in the blockchain) not driven order (the latent order sitting in the order book waiting to get matched). The quantity column also refers to the quantity of the matched driving order. The "Match Type" column is of the form "<Driving Type> - <Driven Type>" where <Driving Type> is the type of the driving order and <Driven Order> is the type of the driven order (both types can be one of "Call", "Cover", "Short", "Sell", or "Buy"). The Quantity field should be colored as described in the previous paragraph. Also, the Price field should be colored in a similar way where the choice of color comes from the <Driving Type>: "Call" -> CALL_COLOR, "Cover" -> EXPIRED_COLOR, "Short" -> SHORT_COLOR, "Buy" -> BID_COLOR, "Sell" -> ASK_COLOR.

The "History" tab in the left column shows the "Account Orders History" table. Each of the tables under the tabs in the left column are of limited height, however, unlike the "Order History" table, they are scrollable (if necessary).

Clicking on the [margin call details] link or the [short sell details] link will create a hovering overlay centered horizontally and vertically over the region of space encompassing the Price History Chart (with some margin on all sides). This overlay will contain a scrollable table of either "Margin Call Orders" if [margin call details] was clicked or "Short Sell Orders" if [short sell details] was clicked. The overlay can be closed by clicking on an X on the corner of the overlay window. Note that the two links may be swapped (meaning [margin call details] would be next to "Bids" and [short sell details] would be next to "Asks") if the market was flipped to be "BTS : BitAsset". The [margin call details] link will be colored CALL_COLOR and the [short sell details] link will be colored SHORT_COLOR. Also, within the "Margin Call Orders" table, the "Margin Called" condition will be colored CALL_COLOR, "Expired" condition will be colored EXPIRED_COLOR, and "Active" condition will be colored NEUTRAL_COLOR.

Thanks, kudos on the text layout! :)

That actually looks very close to how I imagine having it in a perfect world where all that would fit. I definitely want to make it look more like this, we'll see what's actually possible though.

Title: Re: Reworking the wallet trading interface
Post by: cass on March 17, 2015, 01:00:06 pm
I have an alternative view which is nicer for larger screens:
Code: [Select]
|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|^|
| BitUSD : BTS [flip]      Total BitUSD Supply: 433,000.00 BitUSD   Total BTS Supply: 2,503,706,843     Show Quantity in:  (*) BitUSD  ( ) BTS                                                |||
|                                                                                                                                                                                             |||
| ------- -------- --------- --------- -----------                  ||  24h Volume   High         Low          Change    Latest Price   Highest Bid   Lowest Ask   Spread   Call Price        |||
| | Buy | | Sell | | Short | | Cover | | History |                  ||  7,000.00     111.0000     90.0000      -12.05%   105.0000       111.1111      112.0000     0.797%   100.0000          |||
| |     | |      | | ----- | |       | |         |                  ||  BitUSD       BTS/BitUSD   BTS/BitUSD             BTS/BitUSD     BTS/BitUSD    BTS/BitUSD            BTS/BitUSD        |||
|-------------------------------------------------------------------|| ------------------------------------------------------- | ------------------------------------------------------------ |||
| ----------------------------------------------|                   || |                                                     | | |                                                          | |||
| | Balance       0.00 BTS (account-name)       |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| | Collateral    |            0.0 | BTS        |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| | Interest Rate |            0.0 | APR        |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | ||| 
| | Price Limit   | (optional) 0.0 | BTS/BitUSD |                   || |                                                     | | |                                                          | |||
| |               Call Price 100 BTS/BitUSD     |                   || |                Price History Chart                  | | |                    Market Depth Chart                    | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| | Quantity      |            0.0 | BitUSD     |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| |               [Short BitUSD]                |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| -----------------------------------------------                   || |                                                     | | |                                                          | |||
|                                                                   || |                                                     | | |                                                          | |||
| Open Short Sell Orders                                            || |                                                     | | |                                                          | |||
| ---------------------------------------------------------------   || |                                                     | | |                                                          | |||
| | Price Limit  ^1 | Interest Rate -- | Quantity -- | Action   |   || ------------------------------------------------------- | ------------------------------------------------------------ |||
| | (BTS/BitUSD)    | (APR)            | (BitUSD)    |          |   ||                                                         |                                                              |||
| ----------------------------------------------------------------- || Order History ([longer detailed history])               | Bids ([margin call details])   Asks ([short sell details])   |||
| |        112.0000 |             1.00 |    1,100.00 | [Cancel] |^| || ------------------------------------------------------- | -----------------------------  ----------------------------- |||
| |                 |                  |             |          ||| || | Timestamp | Match Type    | Price        | Quantity | | | Quantity   | Price        |  | Price        | Quantity   | |||
| |                 |                  |             |          |v| || |           |               | (BTS/BitUSD) | (BitUSD) | | | (BitUSD)   | (BTS/BitUSD) |  | (BTS/BitUSD) | (BitUSD)   | | |
| ----------------------------------------------------------------- || ------------------------------------------------------| | -----------------------------  ----------------------------- | |
|                                                                   || | 22:16:30  | Call  - Short |     110.0000 | 3,000.00 | | |  12,000.00 |     111.1111 |  |     112.0000 |   1,215.00 | | |
|                                                                   || | 22:00:00  | Sell  - Buy   |     101.0000 |    40.00 | | |     600.00 |     101.2500 |  |     120.0000 |     750.00 | | |
|                                                                   || | 21:30:00  | Short - Buy   |     101.0000 |    50.00 | | |   1,601.32 |     100.0000 |  |     120.0000 |   5,000.00 | | |
|                                                                   || | 21:00:00  | Cover - Sell  |      98.0000 |   100.00 | | |     512.34 |      99.9091 |  ----------------------------- | |
|                                                                   || | 20:30:00  | Buy   - Short |      97.0000 |   500.00 | | |     200.00 |      99.0000 |                                | |
|                                                                   || | 20:00:00  | Buy   - Sell  |      96.0000 |   100.00 | | |     100.00 |      98.0000 |                                |v|
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

This is a two column layout even though it looks like a three column layout. To simplify the description I will refer to it as if it is a three column layout. The left column sticks to the window (meaning it doesn't scroll with the page). The middle+right columns are separated in the vertical orientation by the bottom of the headers of the "Order History", "Bids", and "Asks" tables (which are all flushed). The top half of middle+right column sticks to the page (meaning the two charts and the headers of the tables are always visible no matter how much the user scrolls). The bottom half of the middle+right columns (which consist of the entries of the tables) scroll with the page. The middle+right column is as long as is necessary to fit all of the items that go in the "Bids" and "Asks" tables. The order history can have max(5, max(number of items in Bids table, number of items in Asks table)) number of items (so that bottom of the "Order History" table is flushed with either the "Bids" table or the "Asks" table). To see more of the order history, the user must click on the [longer detailed history] link which will load up a more detailed version of the table in a new page.

The "Bids" and "Asks" tables in the right column are condensed forms of the "Bids" and "Asks" tables I discussed in my previous post. The Type column has been removed and is instead encoded through the color of the Price text. The color of the Price text only applies to the part of the text that includes the digits to the left of the decimal place; the color of digits to the right of the decimal place, and the decimal character as well, are always the same grey color. There are 5 distinct colors for the Price labeled as follows: BID_COLOR, ASK_COLOR, EXPIRED_COLOR (for table items with the "Expired Cover" type), CALL_COLOR (for table items with the "Margin Call" type), and SHORT_COLOR (for table items with the "Short Sell" type). For any items in the "Bids" table that are not one of ("Expired Cover", "Margin Call", "Short Sell"), the Price field of that item will be colored BID_COLOR (which I suggest be a green color).  For any items in the "Asks" table that are not one of ("Expired Cover", "Margin Call", "Short Sell"), the Price field of that item will be colored ASK_COLOR (which I suggest be a red color). And again any items in the table that contain the user's open orders should be highlighted in some way. In addition, the "Bids" label will be colored BID_COLOR and the "Asks" label will be colored ASK_COLOR. Also, the Quantity field should also be colored grey for part to the right of the decimal (including the decimal) and NEUTRAL_COLOR (which is probably best to use white if the background is dark or black if the background is light) for the part to the left of the decimal. This applies to all quantity-like fields in other tables as well (as well as "Price Limit" and "Interest Rate" in "Short Sell Orders" and "Open Short Sell Orders" and "Call Price", "Interest Rate", and "Owed" in "Margin Call Orders" and "Open Margin Call Orders").

The "Order History" table shown above in the middle column is a simplified version of the normal "Order History" table found in BitShares. The timestamp only shows the time in the day but not the date. The price column refers to the price of the matched driving order (the submitted order that caused the match to occur as soon as it was included in the blockchain) not driven order (the latent order sitting in the order book waiting to get matched). The quantity column also refers to the quantity of the matched driving order. The "Match Type" column is of the form "<Driving Type> - <Driven Type>" where <Driving Type> is the type of the driving order and <Driven Order> is the type of the driven order (both types can be one of "Call", "Cover", "Short", "Sell", or "Buy"). The Quantity field should be colored as described in the previous paragraph. Also, the Price field should be colored in a similar way where the choice of color comes from the <Driving Type>: "Call" -> CALL_COLOR, "Cover" -> EXPIRED_COLOR, "Short" -> SHORT_COLOR, "Buy" -> BID_COLOR, "Sell" -> ASK_COLOR.

The "History" tab in the left column shows the "Account Orders History" table. Each of the tables under the tabs in the left column are of limited height, however, unlike the "Order History" table, they are scrollable (if necessary).

Clicking on the [margin call details] link or the [short sell details] link will create a hovering overlay centered horizontally and vertically over the region of space encompassing the Price History Chart (with some margin on all sides). This overlay will contain a scrollable table of either "Margin Call Orders" if [margin call details] was clicked or "Short Sell Orders" if [short sell details] was clicked. The overlay can be closed by clicking on an X on the corner of the overlay window. Note that the two links may be swapped (meaning [margin call details] would be next to "Bids" and [short sell details] would be next to "Asks") if the market was flipped to be "BTS : BitAsset". The [margin call details] link will be colored CALL_COLOR and the [short sell details] link will be colored SHORT_COLOR. Also, within the "Margin Call Orders" table, the "Margin Called" condition will be colored CALL_COLOR, "Expired" condition will be colored EXPIRED_COLOR, and "Active" condition will be colored NEUTRAL_COLOR.

Thanks, kudos on the text layout! :)

That actually looks very close to how I imagine having it in a perfect world where all that would fit. I definitely want to make it look more like this, we'll see what's actually possible though.

@svk: i could assist you on css design if you'll need help on!
Title: Re: Reworking the wallet trading interface
Post by: svk on March 20, 2015, 05:35:44 pm
Thanks for all the feedback everyone! I've kept working on this yesterday and today, and now have a workable version combining what I had with some of your ideas. I hope you'll recognize it Arhag ;)

(http://i.imgur.com/8WztAbyh.png) (http://imgur.com/8WztAby)

All orders are now grouped together, shorts with sells and buys with covers (covers not yet implemented). Shorts are color-coded blue, buys green, sells red.

Clicking on "Account orders history" replaces the blockchain orders with your personal orders.

Volume, high, low and change are for the current day.

Clicking on the "Margin calls" or "Shorts" button makes the respective tables visible one level below the current tables. Inverting the market switches the buttons correctly.

Clicking on the "Cover" tab replaces the orders history table with the open margin orders table, I had to put it there due to space issues.

For the courageous you can check it out by pulling the branch from github as always.
Title: Re: Reworking the wallet trading interface
Post by: Xeldal on March 20, 2015, 05:50:29 pm
Great work svk.  Its looking great!  +5%
Title: Re: Reworking the wallet trading interface
Post by: Shentist on March 20, 2015, 06:02:10 pm
good work !

why did you choose to put the Trading History on the left? I would prefer to have it on the right side, because it is not so important then sell and buy orders.
Title: Re: Reworking the wallet trading interface
Post by: jsidhu on March 20, 2015, 08:24:28 pm
- Ideally I'd prefer to use standard tables instead of ui-grid but they do offer speed compared to standard angular.
Another reason to use ui-grid is fixed table headers.
Another one is sorting and filtering...

However, I found ui-grid doesn't offer flexibility that you need to render big tables effectively... maybe it has changed but last year i tried to use it however when your scope variable changes it will tear down the dom and rebuild the whole table... causing lags and delays between refreshes... if you dont have live updates its ok i guess... so with my appraoch i simply dont replace my scope variable i have to go into each cell and check if its changed, if it has then update it.. and that seemed to be 50x faster and now i can have 2k-3k table cells without noticing anything on the standard pc.

I believe it is because you have to pass in the variable that holds your table data (scope var) and it will rely on angular to check against it (which simply checks that the memory address has changed) and doesn't do the dirty checking like I do above. The memory address changes when you overwrite your scope variable if it is an object.
Title: Re: Reworking the wallet trading interface
Post by: svk on March 20, 2015, 08:30:05 pm
- Ideally I'd prefer to use standard tables instead of ui-grid but they do offer speed compared to standard angular.
Another reason to use ui-grid is fixed table headers.

I found ui-grid doesn't offer flexibility that you need to render big tables effectively... maybe it has changed but last year i tried to use it however when your scope variable changes it will tear down the dom and rebuild the whole table... causing lags and delays between refreshes... if you dont have live updates its ok i guess... so with my appraoch i simply dont replace my scope variable i have to go into each cell and check if its changed, if it has then update it.. and that seemed to be 50x faster and now i can have 2k-3k table cells without noticing anything on the standard pc.

I believe it is because you have to pass in the variable that holds your table data (scope var) and it will rely on angular to check against it (which simply checks that the memory address has changed) and doesn't do the dirty checking like I do above. The memory address changes when you overwrite your scope variable if it is an object.
Yea I'm not a fan either, I've replaced most of them with standard tables in the new layout. I also found a great directive for fixed headers so that's no longer an issue.
Title: Re: Reworking the wallet trading interface
Post by: jsidhu on March 20, 2015, 08:39:50 pm
- Ideally I'd prefer to use standard tables instead of ui-grid but they do offer speed compared to standard angular.
Another reason to use ui-grid is fixed table headers.

I found ui-grid doesn't offer flexibility that you need to render big tables effectively... maybe it has changed but last year i tried to use it however when your scope variable changes it will tear down the dom and rebuild the whole table... causing lags and delays between refreshes... if you dont have live updates its ok i guess... so with my appraoch i simply dont replace my scope variable i have to go into each cell and check if its changed, if it has then update it.. and that seemed to be 50x faster and now i can have 2k-3k table cells without noticing anything on the standard pc.

I believe it is because you have to pass in the variable that holds your table data (scope var) and it will rely on angular to check against it (which simply checks that the memory address has changed) and doesn't do the dirty checking like I do above. The memory address changes when you overwrite your scope variable if it is an object.
Yea I'm not a fan either, I've replaced most of them with standard tables in the new layout. I also found a great directive for fixed headers so that's no longer an issue.

Yea I think thats what I was saying earlier too in the other thread... id like to try ui-grid again one day and with angular 2.0 i believe alot will be fixed and optimized.
Title: Re: Reworking the wallet trading interface
Post by: arhag on March 21, 2015, 12:17:47 am
Thanks for all the feedback everyone! I've kept working on this yesterday and today, and now have a workable version combining what I had with some of your ideas. I hope you'll recognize it Arhag ;)

(http://i.imgur.com/8WztAbyh.png) (http://imgur.com/8WztAby)

All orders are now grouped together, shorts with sells and buys with covers (covers not yet implemented). Shorts are color-coded blue, buys green, sells red.

Clicking on "Account orders history" replaces the blockchain orders with your personal orders.

Volume, high, low and change are for the current day.

Clicking on the "Margin calls" or "Shorts" button makes the respective tables visible one level below the current tables. Inverting the market switches the buttons correctly.

Clicking on the "Cover" tab replaces the orders history table with the open margin orders table, I had to put it there due to space issues.

For the courageous you can check it out by pulling the branch from github as always.

Nice job!

Can you include other screenshots like what it looks like when you flip the market or when you press the "Margin calls" or "Shorts" buttons.

Also, I think you should allow the left column to change width as necessary to fit the tables (so that the open margin orders table can appear under the Cover tab), and  just push the other columns to the right (meaning allow for horizontal scroll on smaller screens). In that case, I think it would be better to switch the middle (price history) column with the right (market depth) column, because as Shentist said it is the more important information especially when you are ready to buy and sell. And, it would be nice if the left column could be a drawer that you could hide and pull out as desired. On smaller screens you could see the market depth and price history columns, and then when you are ready to place or cancel orders, you can pull out the drawer which might push the price history column slightly off-screen (it could be reached via horizontal scrolling though). When you are done you can again hide the drawer and see the full market depth and price history columns in the browser window. And on larger screens, the drawer could be left open and all three columns would be visible at all times.

Edit:
Also, I would really like to see the following under the "BitUSD : BTS" label:
Code: [Select]
Show quantity in [ BitUSD |v]  Show price in [ BTS/BitUSD |v]
Where the [ ... |v] are drop down boxes.

The first drop down box would have two classes of items. The first class is the Base class, which in this case would include BTS as well potentially other SI variations of BTS units such as kBTS (these other options other than the base unit would have to be manually specified per asset type). The second class is the Quote class, which in this case would include BitUSD as well as its other potential (manually specified) SI variations. Changing the quantity selection would make replacements everywhere a quantity field is shown in the page which includes the boxes in the Buy, Sell, Short, Cover tabs, the Buy and Sell tables, "Blockchain Orders History" table, "Account Orders History" table, "Open * Orders" tables, "Margin Orders" table, "Short Orders" table, the vertical axis of the volume bar charts under the price history chart, the vertical axis of the market depth chart, and the Volume label.

Each class of items would have a default unit choice. The default selection to display the quantity fields would be the default unit choice within the Base class. So in a "BitUSD : BTS" market the default quantity display selection would be the default choice in the BTS class (perhaps kBTS would be a good default in this class). In the "BTS : BitUSD" marekt the default quantity display selection would be the default choice in the BitUSD class (perhaps just sticking with BitUSD would be a good default in this class).

The second drop down box would have various items for different units of a Base/Quote price (thus BTS/BitUSD in the "BitUSD : BTS" market). Inverting the prices would require flipping the market. However, the drop down would allow displaying the price in different units within this Base/Quote price class. There would always be the typical option (in this case BTS/BitUSD or BitUSD/BTS), but other options could be manually added for each market. For example, in the "BTS : BitUSD" market one might add BitUSD/kBTS unit as an option. And in fact, that might be chosen as the default price unit in the "BTS : BitUSD" market since the prices (currently) look nicer in BitUSD/kBTS (for example the price feed right now in the "BTS : BitUSD" market is around 8.08 BitUSD/kBTS). Changing the price selection would make replacements everywhere a price field is shown in the page which includes the boxes in the Buy, Sell, Short, Cover tabs, the Buy and Sell tables, "Blockchain Orders History" table, "Account Orders History" table, "Open * Orders" tables, "Margin Orders" table, "Short Orders" table,  the vertical axis of the price history chart, the horizontal axis of the market depth chart, and the High, Low, Latest Price, and Call Price labels.

A few other things.

All non-editable quantity fields should show the same number of decimal places everywhere (with proper rounding) and all non-editable price fields should show the same number of decimal places everywhere (with proper rounding). Right now the prices in the tables have 3 decimal places while the prices in the labels at the top have 4 decimal places. Even worse, the volume label is displayed in BTS (and so is the market depth chart vertical axis) while all other quantity fields are in BitUSD. In my opinion these should all be the same unit (as described above) and also the number of decimal places in the Volume label at the top should be the same as the decimal places in quantity fields in the tables. However, clicking on a particular order from the Buy and Sell tables may fill in prices and quantities at a higher level of precision (perhaps in the maximum precision of the asset) in the fields of the Buy/Sell/Short box. Also the detailed information shown in the tooltip when hovering over any table item (or even the labels at the top) can show the quantities and prices with higher precision (perhaps in the maximum precision of the asset for quantity values)

I think the market label at the top ("BitUSD : BTS") should make both the Quote and Base asset hyperlinks that send the user to the page specific about the asset. This would be something like the "Asset Info" tab of the asset on bitsharesblocks.com.

Finally, you should change the color of the "Shorts" button to blue to match with color of the prices of short orders in the table below it. And you should change the color of the "Margin calls" button to something other than green, red, or blue so that it is not confused with regular buy or sell orders or with short orders. This should be the same color as the color of the prices of margin cover orders (and optionally expired cover orders) in the table below it. In fact, I would rename the "Margin calls" button to just "Calls" (and rename the "Margin Call Orders" table to "Call Orders") so that it encompasses both (potential) margin calls and (potential) expired calls. Then the "Call Orders" tables could further disambiguate between an order that is "Not Called" (a short position that has not yet been margin called and has not yet expired), "Expired Call" (a short position that has expired but not yet been margin called), or "Margin Call" (a short position that has been margin called regardless of whether it has expired yet or not).
Title: Re: Reworking the wallet trading interface
Post by: abit on March 21, 2015, 03:04:03 am
Thanks for all the feedback everyone! I've kept working on this yesterday and today, and now have a workable version combining what I had with some of your ideas. I hope you'll recognize it Arhag ;)

(http://i.imgur.com/8WztAbyh.png) (http://imgur.com/8WztAby)

All orders are now grouped together, shorts with sells and buys with covers (covers not yet implemented). Shorts are color-coded blue, buys green, sells red.

Clicking on "Account orders history" replaces the blockchain orders with your personal orders.

Volume, high, low and change are for the current day.

Clicking on the "Margin calls" or "Shorts" button makes the respective tables visible one level below the current tables. Inverting the market switches the buttons correctly.

Clicking on the "Cover" tab replaces the orders history table with the open margin orders table, I had to put it there due to space issues.

For the courageous you can check it out by pulling the branch from github as always.
I think it could be better if the 'order books' field and 'new orders' field are closer, so people don't need to move eyes/mouse across the screen, it's useful especially when you implemented the 'click and fill order form' feature (another click needed for submit) in the future.
Title: Re: Reworking the wallet trading interface
Post by: xeroc on March 21, 2015, 12:52:12 pm
Can you feel the spirit of decentralized development and coders being #paidbyprotocol?

My eyes get wet by looking at this thread .. +5%!
Title: Re: Reworking the wallet trading interface
Post by: kaibakker on March 21, 2015, 03:31:49 pm
Love it!! I also would like to see the transaction-history to be flipped with the open orders. :)
Title: Re: Reworking the wallet trading interface
Post by: speedy on March 21, 2015, 03:36:20 pm
Can it show the entire chart history, along with async loading to zoom in via dragging the mouse?

Highcharts supports this: http://www.highcharts.com/stock/demo/lazy-loading
Title: Re: Reworking the wallet trading interface
Post by: Xeldal on March 21, 2015, 04:33:28 pm
I played around a bit with the layout . 
Got rid of alot of dead space,
put trade interface next to bid/ask,
made chart bigger,
got rid of extra information from history that could be a tool tip pop up if necessary. 
made bid/ask on a single scroller,
moved the buy/sell button and active account name in trading tab. 
removed repetitive section titles,
stacked column heading to conserve space.    What do you think?
(https://i.imgur.com/x2si4N8.png)
Title: Re: Reworking the wallet trading interface
Post by: svk on March 30, 2015, 09:36:04 am
Another day, another iteration! I'm quite happy with this version, it looks nice and clean and is much more usable than the original, so I hope we can merge this to develop soon. I'm not sure the combined bids and asks arrays are getting updated properly however, maybe @valzav can have a look at that. Here are some more screenshots:

(http://i.imgur.com/lYD2xljh.png) (http://imgur.com/lYD2xlj)

(http://i.imgur.com/lhUJfm0h.png) (http://imgur.com/lhUJfm0)

(http://i.imgur.com/0Z2vIKBh.png) (http://imgur.com/0Z2vIKB)
Title: Re: Reworking the wallet trading interface
Post by: cass on March 30, 2015, 10:00:36 am
Yes :) looks really cleaned up and well structured!  +5%
BTW - pinged you via skype!
Title: Re: Reworking the wallet trading interface
Post by: Xeldal on March 30, 2015, 05:30:10 pm
A good improvement.  I'd personally prefer a different layout though.

I think the depth graph and trade history sections are too big and/or too prominent.

The chart, although in its current form is pretty useless, once redone/upgraded, should be front and center and should occupy as much screen real-estate as possible.

Heres another idea.
(https://i.imgur.com/Np2qHlo.jpg)

Also,  although not in the above pic,  the last traded price should be set apart made bigger more featured and highlighted in some way. 
Consider that most mainstream trading clients often don't have lvl2 data or depth graph.  They just have a chart, the last traded price and the most relevant bid and ask.  I'm not saying we don't need/want them.  Just saying that they are not as important as the chart and last price etc.
Title: Re: Reworking the wallet trading interface
Post by: svk on March 30, 2015, 06:41:43 pm
Thanks for the input Xeldal. I've been thinking of replacing the price history chart with this: http://techanjs.org/

I guess that's more like what you'd want? I'm not really a trader, what kind of indicators would you like to see added? MACD? Moving averages? Interactive trendlines? Percentage axis?

Here's an example of what that library can do:

http://bl.ocks.org/andredumas/edf630690c10b89be390
Title: Re: Reworking the wallet trading interface
Post by: yellowecho on March 30, 2015, 07:52:39 pm
Quote from: Xeldal
A good improvement.  I'd personally prefer a different layout though.

I think the depth graph and trade history sections are too big and/or too prominent.

The chart, although in its current form is pretty useless, once redone/upgraded, should be front and center and should occupy as much screen real-estate as possible.

Heres another idea.
(https://i.imgur.com/Np2qHlo.jpg)

Also,  although not in the above pic,  the last traded price should be set apart made bigger more featured and highlighted in some way. 
Consider that most mainstream trading clients often don't have lvl2 data or depth graph.  They just have a chart, the last traded price and the most relevant bid and ask.  I'm not saying we don't need/want them.  Just saying that they are not as important as the chart and last price etc.

 +5% on all the suggestions.  It's similar to the layout on Bitstamp which I also prefer:  https://www.bitstamp.net/market/tradeview/
My only alteration would be to put the OPEN orders in a tab next to COVER.  Then I'd probably move the depth graph to the left and put a shorting-specific graph (depth, margins, etc) to the right to maximize real estate.


Quote from: svk
Thanks for the input Xeldal. I've been thinking of replacing the price history chart with this: http://techanjs.org/

I guess that's more like what you'd want? I'm not really a trader, what kind of indicators would you like to see added? MACD? Moving averages? Interactive trendlines? Percentage axis?

Here's an example of what that library can do:

http://bl.ocks.org/andredumas/edf630690c10b89be390

Yeah, that's a much better chart!!
Title: Re: Reworking the wallet trading interface
Post by: Xeldal on March 30, 2015, 08:24:12 pm
Thanks for the input Xeldal. I've been thinking of replacing the price history chart with this: http://techanjs.org/

I guess that's more like what you'd want? I'm not really a trader, what kind of indicators would you like to see added? MACD? Moving averages? Interactive trendlines? Percentage axis?

Here's an example of what that library can do:

http://bl.ocks.org/andredumas/edf630690c10b89be390

Yeah that package seems better at a glance. Though I'm not seeing any way to change the period / interval ..   (the time period each candle represents)  which is one of my biggest gripes. 
Our current package only has zoom, where you set the entire viewable range, which is not ideal for technical traders because many rely on a specific known candle period.  You can figure it out by counting the viewable candles but that's annoying.   So scrolling and zoom are nice features but if you can't set the period (interval) there not so great.

My biggest issue with the current chart is that it only has like 7 days of history.

Bitcoinwisdom.com is a good example of getting it right.  They have a very nice charting package.  Looks a lot like  http://www.modulusglobal.com/products/trading-platforms/m4-html5/     but IDK

As far as  indicators anything beyond the standard Simple moving average,  MACD, volume, stochastics and maybe bollinger bands....  and you start appealing to a much smaller crowd and may not be worth the effort at this point.  Its great if they have other indicators but not entirely necessary.  Being able to draw simple lines and perhaps Fibonacci elements are a great plus as well.
   
Title: Re: Reworking the wallet trading interface
Post by: mdj on March 30, 2015, 08:34:40 pm
Thanks for the input Xeldal. I've been thinking of replacing the price history chart with this: http://techanjs.org/

I guess that's more like what you'd want? I'm not really a trader, what kind of indicators would you like to see added? MACD? Moving averages? Interactive trendlines? Percentage axis?

Here's an example of what that library can do:

http://bl.ocks.org/andredumas/edf630690c10b89be390

Oh yes yes please that chart is sooo much nicer than the current one :)
Candles are nice but I like the ability to turn them off too.
Title: Re: Reworking the wallet trading interface
Post by: Xeldal on March 30, 2015, 08:59:32 pm
Heres another rough layout.

(https://i.imgur.com/NfXwnMN.jpg)

with this layout you could potentially make the right column and the left column popout drawers that you could push out of the way to really maximize the viewable chart.

The "order history" on the right could also be tabbed with "Your Order history"

The tabs on the top left are getting kind of cramped, there's probably a better way to do that. 
Title: Re: Reworking the wallet trading interface
Post by: yellowecho on March 30, 2015, 09:21:51 pm
Heres another rough layout.

(https://i.imgur.com/NfXwnMN.jpg)

with this layout you could potentially make the right column and the left column popout drawers that you could push out of the way to really maximize the viewable chart.

The "order history" on the right could also be tabbed with "Your Order history"

The tabs on the top left are getting kind of cramped, there's probably a better way to do that.

Good suggestions and I really like this layout.  I was going to suggest the depth chart in that location but was worried about it looking too cramped but it looks good! 

Title: Re: Reworking the wallet trading interface
Post by: yellowecho on March 30, 2015, 09:40:25 pm
While we're making suggestions, could the GUI implement a modal popup for confirming/canceling new orders instead of having to do it in the OPEN BUY ORDERS section?  The current layout is less intuitive and occasionally I forget to confirm.

Also, I'd prefer if the order numbers were right-aligned with fixed decimals to better compare orders.
Title: Re: Reworking the wallet trading interface
Post by: svk on March 31, 2015, 07:40:44 am
While we're making suggestions, could the GUI implement a modal popup for confirming/canceling new orders instead of having to do it in the OPEN BUY ORDERS section?  The current layout is less intuitive and occasionally I forget to confirm.

Also, I'd prefer if the order numbers were right-aligned with fixed decimals to better compare orders.

I moved the open orders to below the "Place order" box for that exact reason actually, I often did not see the confirm button because the open orders were hidden further down on the screen. A modal could indeed be another option to save some space.

The numbers are right aligned with fixed decimals already in my new layout, or is that not how you want it?
Title: Re: Reworking the wallet trading interface
Post by: cass on March 31, 2015, 12:33:46 pm
(http://i.imgur.com/9iWGWdX.jpg)
Title: Re: Reworking the wallet trading interface
Post by: Troglodactyl on March 31, 2015, 12:59:11 pm
I like non-modal confirmation because I short to myself and want to confirm both orders at once, but that's an edge use case.
Title: Re: Reworking the wallet trading interface
Post by: svk on March 31, 2015, 01:02:10 pm
I like non-modal confirmation because I short to myself and want to confirm both orders at once, but that's an edge use case.

That's a good point though, and it's something that would be hard to do currently with the new interface. I'll have to keep that in mind.
Title: Re: Reworking the wallet trading interface
Post by: Stan on March 31, 2015, 01:03:35 pm
What's in your wallet?

The BitShares Decentralized Exchange
Smart currencies are just it's product,
A safe place to trade is its business.


(http://3.bp.blogspot.com/-dNl6GA7j_Jk/VMt1YBOx4WI/AAAAAAAADUE/ZCH3dWGU0wI/s1600/bitassets.png)

(http://i.gyazo.com/e57d78ea2984414a026e0e5e3d173d3c.png)
Title: Re: Reworking the wallet trading interface
Post by: Xeldal on March 31, 2015, 02:10:10 pm
Another idea.

Perhaps a popup from the exchange button could list the major currencies.  Or just list the big buttons at the top of featured markets
When clicked it takes you to the featured markets page where the featured markets would all be pairs of the asset you chose. 
Currently it is far too difficult to find the market your looking for.   

Or similar to how BTER does it, from this menu hovering over or clicking the base market, it list all the relevant markets in another popup menu.

(https://i.imgur.com/bfaYaY4.jpg)
Title: Re: Reworking the wallet trading interface
Post by: speedy on March 31, 2015, 04:11:30 pm
It just keeps getting better and better +5%

Not sure about those fat buttons though.
Title: Re: Reworking the wallet trading interface
Post by: xeroc on March 31, 2015, 04:28:26 pm
Cool thing would be if someone would just fork the webwallet and focus on traders instead of an all-rounder ...

@cass: someone using your trading interface already? The one you design back then for Brian youknowhow??
Title: Re: Reworking the wallet trading interface
Post by: yellowecho on March 31, 2015, 04:42:15 pm
Cool thing would be if someone would just fork the webwallet and focus on traders instead of an all-rounder ...

@cass: someone using your trading interface already? The one you design back then for Brian youknowhow??

Moonstone seems like its targeting the average user so I was thinking the internal exchange would be more focused on traders.  This should probably be discussed more often.  Who is the target user for the main client?
Title: Re: Reworking the wallet trading interface
Post by: liondani on March 31, 2015, 04:43:27 pm
+5 @xeroc  ... It will be released after v1.0 so the big marketing push can start  :)

Sent from my ALCATEL ONE TOUCH 997D

Title: Re: Reworking the wallet trading interface
Post by: cass on March 31, 2015, 05:50:48 pm
Cool thing would be if someone would just fork the webwallet and focus on traders instead of an all-rounder ...

@cass: someone using your trading interface already? The one you design back then for Brian youknowhow??

Moonstone seems like its targeting the average user so I was thinking the internal exchange would be more focused on traders.  This should probably be discussed more often.  Who is the target user for the main client?

yup was thinking same! IMO Core wallet should be traders wallet …
Title: Re: Reworking the wallet trading interface
Post by: cass on March 31, 2015, 05:53:30 pm
:)

(http://i.imgur.com/RyFY780.png)

Title: Re: Reworking the wallet trading interface
Post by: Xeldal on March 31, 2015, 06:39:01 pm
:)

(http://i.imgur.com/RyFY780.png)

Yes please!! Love the black background. !!  +5%
I don't care for the layout though , as i mentioned in earlier posts.  But its still very good like you have it.
https://bitsharestalk.org/index.php?topic=14974.msg198033#msg198033
https://bitsharestalk.org/index.php?topic=14974.msg198099#msg198099
Title: Re: Reworking the wallet trading interface
Post by: mdj on March 31, 2015, 09:03:04 pm
:)

(http://i.imgur.com/RyFY780.png)

Damn that is sexy! Please make this theme an option :D
Title: Re: Reworking the wallet trading interface
Post by: Xeldal on March 31, 2015, 09:38:50 pm
Here we go.  this is my preferred.

(https://i.imgur.com/9tuT5bN.jpg)

Title: Re: Reworking the wallet trading interface
Post by: liondani on March 31, 2015, 10:12:14 pm
Here we go.  this is my preferred.

(https://i.imgur.com/9tuT5bN.jpg)

Please implement this, before we get crazy looking at it !!!

 +5% +5% +5%
Title: Re: Reworking the wallet trading interface
Post by: yellowecho on April 01, 2015, 12:26:03 am
I really like where this is going!    Here's my brief stab at it:

(http://i.imgur.com/X1KGVju.png)
Title: Re: Reworking the wallet trading interface
Post by: Bitcoinfan on April 01, 2015, 12:31:54 am
Very nice yellowecho.  Particularly like the mid-chart.  Cass should add that in. 
Title: Re: Reworking the wallet trading interface
Post by: mdj on April 01, 2015, 07:04:36 am
oh man this thread is getting me excited! So many awesome choices that we could end up with themes to choose :D
Title: Re: Reworking the wallet trading interface
Post by: xeroc on April 01, 2015, 07:21:08 am
For those in here wanting to run the wallet in the browser .. here is how to:
http://wiki.bitshares.org/index.php/BitShares/Clients#Web-Frontend
Title: Re: Reworking the wallet trading interface
Post by: svk on April 01, 2015, 07:36:48 am
So it's starting to sink in for me that traders like their interface crowded! ;)

I originally wanted to put the order history on the right like Xeldal and yellowecho have done, but felt there was not enough space. Are we really ok with only providing the quantity and price for the order history?

If the depth chart really isn't that important we can probably either provide a switch between it and the price chart, with the price chart as default, or make a small one like xeldal did.

One thing you guys are forgetting about is the list of open orders, which is below the buy/sell/short/cover tabs. Don't you want that visible at all times? If not we could make a modal for confirmation, but like troglodactyl said that will remove the possibility to short and buy to yourself at the same time.
Title: Re: Reworking the wallet trading interface
Post by: cass on April 01, 2015, 08:07:19 am
So it's starting to sink in for me that traders like their interface crowded! ;)

I originally wanted to put the order history on the right like Xeldal and yellowecho have done, but felt there was not enough space. Are we really ok with only providing the quantity and price for the order history?

If the depth chart really isn't that important we can probably either provide a switch between it and the price chart, with the price chart as default, or make a small one like xeldal did.

One thing you guys are forgetting about is the list of open orders, which is below the buy/sell/short/cover tabs. Don't you want that visible at all times? If not we could make a modal for confirmation, but like troglodactyl said that will remove the possibility to short and buy to yourself at the same time.

just an idea .. wouldn't it possible to add drag & drop functionality for each widget ..

Lets say ... for example

we have 4 places

left mid-top-mid mid-bottom right ... and in this areas each user can move their widgets like he likes best!? Just thinking loud …

https://github.com/DataTorrent/malhar-angular-dashboard
https://github.com/petrkotek/angular-widgetarea-directive
http://angular-js.in/angular-gridster/

Title: Re: Reworking the wallet trading interface
Post by: xeroc on April 01, 2015, 08:11:26 am
Hehe .. let's do https://cryptrader.com ... just better :)
Title: Re: Reworking the wallet trading interface
Post by: cass on April 01, 2015, 08:12:36 am
and did i say how i'm impressed i'm how we're are working together to solve the current main running point out of BTS!!!? :)  +5%
Really awesome …
Title: Re: Reworking the wallet trading interface
Post by: cass on April 01, 2015, 08:12:59 am
Hehe .. let's do https://cryptrader.com ... just better :)

doesn't work for me
Title: Re: Reworking the wallet trading interface
Post by: xeroc on April 01, 2015, 08:26:02 am
Seems offline atm .. its a page with drag&drop windows for different markets and with different contents ..
Title: Re: Reworking the wallet trading interface
Post by: cass on April 01, 2015, 08:27:15 am
http://gridster.net/?utm_source=angular-js.in&utm_medium=website&utm_campaign=content-curation
http://gridster.net/demos/resize-limits.html

wow wow wow :)


BTW .. this was my original intend on august last year when i prepared the GUI screendesign for 2.0 wallet interface...
Title: Re: Reworking the wallet trading interface
Post by: xeroc on April 01, 2015, 08:36:36 am
http://gridster.net/?utm_source=angular-js.in&utm_medium=website&utm_campaign=content-curation
http://gridster.net/demos/resize-limits.html

wow wow wow :)


BTW .. this was my original intend on august last year when i prepared the GUI screendesign for 2.0 wallet interface...

/me wants this .. please do this!!

Can we have the wallet redesign already?
Can we have 10 people work on the web_wallet?

Damnit .. I need to read into web design again .. want to help you with this ..
Title: Re: Reworking the wallet trading interface
Post by: abit on April 01, 2015, 01:09:33 pm
Best if people can drag and drop the elements/panels to anywhere and any size as she/he want, and save as her/his favorite theme, and can switch among themes easily  :D
Title: Re: Reworking the wallet trading interface
Post by: ssjpts on April 01, 2015, 01:22:42 pm
great jobs!!!
Title: Re: Reworking the wallet trading interface
Post by: yellowecho on April 01, 2015, 02:40:52 pm
http://gridster.net/?utm_source=angular-js.in&utm_medium=website&utm_campaign=content-curation
http://gridster.net/demos/resize-limits.html

wow wow wow :)


BTW .. this was my original intend on august last year when i prepared the GUI screendesign for 2.0 wallet interface...

How difficult would this be to implement on the current client?
Title: Re: Reworking the wallet trading interface
Post by: cass on April 01, 2015, 02:55:08 pm
Best if people can drag and drop the elements/panels to anywhere and any size as she/he want, and save as her/his favorite theme, and can switch among themes easily  :D

this would be awesome yes!!!
Title: Re: Reworking the wallet trading interface
Post by: Xeldal on April 01, 2015, 03:07:12 pm
So it's starting to sink in for me that traders like their interface crowded! ;)

I originally wanted to put the order history on the right like Xeldal and yellowecho have done, but felt there was not enough space. Are we really ok with only providing the quantity and price for the order history?

Empty space is wasted space that could have been given to the chart.

I think the best approach here is to make every effort to condense the data, provide as much of the important data as possible and leave the rest either to a popup tool tip or an entirely different page.

For all data sets, including history, the most relevant data is price and volume, and maybe time.  if your going to show time. use simple format like 14:23 , not "it happened roughly 2 hours ago" .  the latter is way too wordy and takes up too much space.   If I really want to see all the extra info related to history or whatever I can hover over the entry or view another page with all available data. 

I'd prefer the trading page feel like a HUD,  packed full of data but ultra streamlined and condensed.  The focus is the chart, everything else should be out of the way.  And on that note please please please, do not make a hover tool tip popup for the chart.  Those pop-up HLOC things drive me crazy.   HLOC data is important but it should not cover the viewable chart.  It should be static and off chart.  bitcoinwisdom.com does this well.

If the depth chart really isn't that important we can probably either provide a switch between it and the price chart, with the price chart as default, or make a small one like xeldal did.

One thing you guys are forgetting about is the list of open orders, which is below the buy/sell/short/cover tabs. Don't you want that visible at all times? If not we could make a modal for confirmation, but like troglodactyl said that will remove the possibility to short and buy to yourself at the same time.

It should definitively be viewable at all times, or at least a drawer or popup.... i guess it doesn't matter  so long as its small.  Its in all my drawups.  The problem with the current setup and why the popup was desirable imo is that the open orders were off screen, so for some time I wasn't even aware I was creating orders, I just thought the button was broken.  The open orders section doesn't need to be all that big either but you've got some extra room in most of these layouts so may as well use it. Change open sell orders / open buy orders ... to just Open Orders.    For a detailed breakdown the user can either hover over the order or go to another page with all available data listed if it doesn't all fit in the layout.

Yunbi has an example short compact open orders window.  https://yunbi.com/markets/btsbtc

The moveable grids etc are awesome, no matter what design we make its not going to please everyone.  Grids are great so long as we get the data column inclusion right.  Perhaps there could also be some way to define what data columns are included in each element.   and allow adjusting column width...  sounds like a lot of extra work though.
Title: Re: Reworking the wallet trading interface
Post by: xiahui135 on April 02, 2015, 01:02:45 am
A question: do we consider integrate some bridges or gateway to the client? Just a little work, and we will get a much smooth withdraw and deposit experience.
Title: Re: Reworking the wallet trading interface
Post by: cass on April 02, 2015, 12:22:28 pm
from the design point of view i'll completely revamp GUI ... started with splash ... jsut playing for now ... but will polish all pages within the GUI over the next time!

https://bitshares.org/labs/ui/ui-splash-revamp-with-animate.mp4
Title: Re: Reworking the wallet trading interface
Post by: mdj on April 02, 2015, 02:52:56 pm
from the design point of view i'll completely revamp GUI ... started with splash ... jsut playing for now ... but will polish all pages within the GUI over the next time!

https://bitshares.org/labs/ui/ui-splash-revamp-with-animate.mp4
Love it, nice work cass!
Title: Re: Reworking the wallet trading interface
Post by: svk on April 02, 2015, 03:06:30 pm
OK I've got some more work in on this today, here's what I've got so far:

(http://i.imgur.com/P0W0sfPh.png) (http://imgur.com/P0W0sfP)

I've kept the open orders on the left, but they're now combined meaning you get asks, bids and shorts in the same table, colorcoded using the same colors as always. Interest rates and collateral for shorts are shown in a tooltip.

Covers are now shown inside the tab on the left, with collateral and interest columns removed and placed in a tooltip instead.

The upper bar with the latest price etc is now fixed and always visible even if you need to scroll.

As you can see the price history has more than 10 days now, I changed that early on but forgot to tell you.

Next step now is to try to replace the highcharts chart with techan.js
Title: Re: Reworking the wallet trading interface
Post by: yellowecho on April 02, 2015, 03:40:59 pm
I'd prefer the layout proposed by Xeldal.. I like the depth chart aligning with the buy and sell orders (more intuitive), a smaller open orders section, and larger graph.

Here we go.  this is my preferred.

(https://i.imgur.com/9tuT5bN.jpg)
Title: Re: Reworking the wallet trading interface
Post by: cass on April 02, 2015, 03:44:25 pm
I'd prefer the layout proposed by Xeldal.. I like the depth chart aligning with the buy and sell orders (more intuitive), a smaller open orders section, and larger graph.

Here we go.  this is my preferred.

(https://i.imgur.com/9tuT5bN.jpg)

i'll working on that!
Title: Re: Reworking the wallet trading interface
Post by: yellowecho on April 02, 2015, 04:06:59 pm
i'll working on that!

Cool- and the new flash screen you're working on looks stellar !
Title: Re: Reworking the wallet trading interface
Post by: Xeldal on April 02, 2015, 04:20:46 pm
Perhaps an accordion style expanding sections for the left side depth graph, open orders, and order book,  if you feel like its getting too cramped.

That way under the Buy/Sell/Short section  if you only want to look at your open orders and don't care about the depth graph and order book you can collapse the ones you don't need and the whole side would be devoted to whatever you do want to see. 

They could all be open, or all be closed and any combination in between.

(https://i.imgur.com/9ZdJI1A.jpg)
Title: Re: Reworking the wallet trading interface
Post by: svk on April 02, 2015, 04:28:07 pm
The reason I'm trying to keep that left side relatively unoccupied is that I need to take into account smaller screens and the possibility of many open orders. Because the left side is fixed, you don't get scrolling if something overflows so it really needs to stay compact.
Title: Re: Reworking the wallet trading interface
Post by: Xeldal on April 02, 2015, 04:48:19 pm
The reason I'm trying to keep that left side relatively unoccupied is that I need to take into account smaller screens and the possibility of many open orders. Because the left side is fixed, you don't get scrolling if something overflows so it really needs to stay compact.

I think those are valid concerns. 
If the open orders table is scrollable it shouldn't matter to much how many there are, right?
with those accordion type drawers on a small screen you could close them all if you wanted or only open the one you needed.

I would shoot for not having any scrolling for the full page, just individual table scrolls.   

Here's another idea.  how about a very thin long button across the bottom, when clicked pulls the screen down to reveal all the big clunky tables with all columns included.  When the user scrolls back up to the main graph it re locks the screen and prevents scrolling until that long thin button is clicked again.  It could be some kind of overlay popup drawer also if thats easier .  Just brainstorming.
Title: Re: Reworking the wallet trading interface
Post by: cass on April 02, 2015, 05:13:21 pm
without orders for now.. .will think more over eastern about .. bye ...
(http://i.imgur.com/FnkClky.png)
Title: Re: Reworking the wallet trading interface
Post by: cass on April 02, 2015, 05:17:41 pm
The reason I'm trying to keep that left side relatively unoccupied is that I need to take into account smaller screens and the possibility of many open orders. Because the left side is fixed, you don't get scrolling if something overflows so it really needs to stay compact.

Here's another idea.  how about a very thin long button across the bottom, when clicked pulls the screen down to reveal all the big clunky tables with all columns included.  When the user scrolls back up to the main graph it re locks the screen and prevents scrolling until that long thin button is clicked again.  It could be some kind of overlay popup drawer also if thats easier .  Just brainstorming.

THISSSS  +5% i'll give it a try after eastern ^^
Title: Re: Reworking the wallet trading interface
Post by: yellowecho on April 02, 2015, 08:04:05 pm
The reason I'm trying to keep that left side relatively unoccupied is that I need to take into account smaller screens and the possibility of many open orders. Because the left side is fixed, you don't get scrolling if something overflows so it really needs to stay compact.

Here's another idea.  how about a very thin long button across the bottom, when clicked pulls the screen down to reveal all the big clunky tables with all columns included.  When the user scrolls back up to the main graph it re locks the screen and prevents scrolling until that long thin button is clicked again.  It could be some kind of overlay popup drawer also if thats easier .  Just brainstorming.

THISSSS  +5% i'll give it a try after eastern ^^

Good ideas.  Brainstorming on this idea:  The left side could remain static while the right side could work on a slider/carousel with arrows to navigate between charts and/or data tables.
Title: Re: Reworking the wallet trading interface
Post by: cass on April 03, 2015, 12:20:34 pm
https://bitshares.org/labs/ui/ui-brown-market.mp4
Title: Re: Reworking the wallet trading interface
Post by: Shentist on April 03, 2015, 04:04:55 pm
https://bitshares.org/labs/ui/ui-brown-market.mp4

sweet!

is the timeframe on the chart everytime fixed to 7days or does the chart remember how i wanted to display it?
Title: Re: Reworking the wallet trading interface
Post by: monsterer on April 03, 2015, 04:07:00 pm
https://bitshares.org/labs/ui/ui-brown-market.mp4

Wow, sooo much better looking! Good job guys :)
Title: Re: Reworking the wallet trading interface
Post by: svk on April 03, 2015, 04:37:12 pm
https://bitshares.org/labs/ui/ui-brown-market.mp4

sweet!

is the timeframe on the chart everytime fixed to 7days or does the chart remember how i wanted to display it?
It's on 7 days by default yea, is that so bad? Do you want us to remember the setting for each market or do you have a specific range you want to use instead?
Title: Re: Reworking the wallet trading interface
Post by: yellowecho on April 03, 2015, 04:50:39 pm
https://bitshares.org/labs/ui/ui-brown-market.mp4

It's looking good!  Could there be an option to switch between light and dark themes?
Also, I'd prefer slightly rounded corners on tabs and panels.
Title: Re: Reworking the wallet trading interface
Post by: Pheonike on April 03, 2015, 10:41:26 pm
Instead of choosing one interface or the other, Can it just be a drop down that lets you choose between advanced and normal trade view?
Title: Reworking the wallet trading interface
Post by: xiahui135 on April 03, 2015, 11:35:40 pm
Stability is much more important than UI. I suggest you guys not spend too much time on UI.
People do not use it is because of its UI, but basically because they lack trust in the software, and feel trouble to use it (i mean such as resigner, deposit, withdraw )
Title: Re: Reworking the wallet trading interface
Post by: sudo on April 04, 2015, 12:04:52 am
+5%

来自我的 M812C 上的 Tapatalk

Title: Re: Reworking the wallet trading interface
Post by: yellowecho on April 04, 2015, 02:43:16 am

Stability is much more important than UI. I suggest you guys not spend too much time on UI.
People do not use it is because of its UI, but basically because they lack trust in the software, and feel trouble to use it (i mean such as resigner, deposit, withdraw )
The stability has nothing to do with the UI.  Two completely different things that are being implemented in parallel. 
I don't share your concern with stability at all as I have used it everyday since the first release with little problems.  Back up your wallet and there's nothing to fear. 


Sent from my iPhone using Tapatalk
Title: Re: Reworking the wallet trading interface
Post by: cass on April 05, 2015, 09:41:39 am
(http://i.imgur.com/eC0UVnx.png)
Title: Re: Reworking the wallet trading interface
Post by: mdj on April 05, 2015, 11:05:30 am
(http://i.imgur.com/eC0UVnx.png)

Wow! I want this now! :O
Title: Re: Reworking the wallet trading interface
Post by: liondani on April 05, 2015, 02:26:35 pm
(http://i.imgur.com/eC0UVnx.png)

Wow! I want this now! :O

Me too !!!!!!
 +5% +5% +5% +5%

Please add the option to use fx indicators also on the charts....
That would drive investors like crazy on our platform !!!!

http://forex-indicators.net/list
Title: Re: Reworking the wallet trading interface
Post by: abit on April 05, 2015, 02:43:36 pm
This one looks like Yunbi's UI, check here https://yunbi.com/markets/btscny
Like it.
Title: Re: Reworking the wallet trading interface
Post by: speedy on April 05, 2015, 03:18:28 pm
That dark theme looks great!

Suggestion: In the menu bar at the top how about a "Deposit" tab that shows a page where people can deposit BTC into BitBTC via Metaexchange for example. Is that in the works?
Title: Re: Reworking the wallet trading interface
Post by: yellowecho on April 06, 2015, 01:57:13 am
That dark theme looks great!

Suggestion: In the menu bar at the top how about a "Deposit" tab that shows a page where people can deposit BTC into BitBTC via Metaexchange for example. Is that in the works?

My understanding is that it will not be implemented in the official client; however, Moonstone will offer direct access to external exchanges using Shapeshift and Metaechange.
Title: Re: Reworking the wallet trading interface
Post by: yellowecho on April 06, 2015, 02:15:11 am
I like the layout but I think I'd prefer if the colors or background were the same as found in the Bitshares brand from the website and this login:  https://bitshares.org/labs/ui/ui-splash-revamp-with-animate.mp4

IMO it'd make it look and feel like a cohesive ecosystem.
Title: Re: Reworking the wallet trading interface
Post by: cass on April 06, 2015, 09:01:33 am
I like the layout but I think I'd prefer if the colors or background were the same as found in the Bitshares brand from the website and this login:  https://bitshares.org/labs/ui/ui-splash-revamp-with-animate.mp4

IMO it'd make it look and feel like a cohesive ecosystem.

you can't make a dark theme skin with these colors
Title: Re: Reworking the wallet trading interface
Post by: svk on April 06, 2015, 10:36:59 am
Here's my latest iteration, I've fixed a few bugs and made some minor changes, but I'm still sticking to this layout which keeps everything visible. You now get red flashes whenever a value at the top changes, and similarly for new orders in the order book. I also added some up/down arrows indicating the direction of the changes.

I've also added a MACD indicator to the price plot, made the tooltip fixed with simple text values, and made the chart slightly larger. Please also keep in mind that once 0.9.0 comes out the pricechart will look better, at the moment the high low values are bugged and can be very high or very low and this makes the scale wrong and the candles very small.

(http://i.imgur.com/SvvV1TNh.png) (http://imgur.com/SvvV1TN)
Title: Re: Reworking the wallet trading interface
Post by: speedy on April 06, 2015, 08:12:37 pm
Looks great, but that buy & sell wall feels squashed (and too tall) being beside the buy & sell orderbook lists. Bter put the wall graphic underneath the lists and it feels more natural: https://bter.com/trade/bts_btc
Title: Re: Reworking the wallet trading interface
Post by: yellowecho on April 06, 2015, 08:20:19 pm
Looks great, but that buy & sell wall feels squashed (and too tall) being beside the buy & sell orderbook lists. Bter put the wall graphic underneath the lists and it feels more natural: https://bter.com/trade/bts_btc

I agree.  I much prefer the layout from the dark theme.
Title: Re: Reworking the wallet trading interface
Post by: svk on April 06, 2015, 09:03:07 pm
Looks great, but that buy & sell wall feels squashed (and too tall) being beside the buy & sell orderbook lists. Bter put the wall graphic underneath the lists and it feels more natural: https://bter.com/trade/bts_btc

I agree.  I much prefer the layout from the dark theme.

The problem with the dark theme layout is it's missing the open orders, but I agree it looks better. In my layout everything fits on screen with a screen height of ~1000 pixels, which most people should have by now. The orderbook chart is suffering from too little space though I agree.

I could make the order history the same height as the price history chart and let the orderbook chart be twice as large.
Title: Re: Reworking the wallet trading interface
Post by: Shentist on April 06, 2015, 09:18:55 pm
you are trying to put to much information without the need to scroll!

you should set the pricewalls under buy orders and sell orders

it is just nice to have, but not really needed. Would be ideal if we could resize and rearrange it by ourselfs, so you would not to think about this anymore.
Title: Re: Reworking the wallet trading interface
Post by: arhag on April 06, 2015, 09:34:31 pm
you are trying to put to much information without the need to scroll!

I agree.

@svk, please don't try to cram everything into a space that can't handle that much information unless you have a large resolution screen. Allow for two-dimensional scrolling, but preferably avoid nested scrolling. So since these tables will naturally have large variable number of rows but a fixed number of columns, we expect vertical scrolling on the tables. This means vertical scrolling should be avoid on the main page. But horizontal scrolling is still available and should be used if necessary. Don't try to force too much information vertically. Spread it out horizontally. Those with large resolutions will be able to see everything within a single window (assuming they don't resize the window to be too small). Those with smaller windows (either by choice or because of screen resolution limits) will have to scroll horizontally to get to all of the presented information. Obviously there is a minimum limit to the vertical size you can support while avoiding vertical scroll, but this should be a pretty small number. People with larger vertical space will just get to see more rows of the bottom tables rather than a new table, graph, label, or input widget. Also, if it really makes sense to keep widget or UI elements as part of the same column, then at least allow accordion-style collapsible panels so that vertical scrolling is not needed even in very small vertical space. Or it should adapt and move some of the panels to a new adjacent panel when it detects there is not enough vertical space in the window.
Title: Re: Reworking the wallet trading interface
Post by: liondani on April 18, 2015, 02:57:08 pm
(http://i.imgur.com/eC0UVnx.png)

when will this theme  be supported from the client? Any estimation?
Title: Re: Reworking the wallet trading interface
Post by: svk on April 18, 2015, 05:13:13 pm
(http://i.imgur.com/eC0UVnx.png)

when will this theme  be supported from the client? Any estimation?
The one in your photo? No idea.. My reworked interface however should be included in the next release which should be out next week.
Title: Re: Reworking the wallet trading interface
Post by: clayop on April 21, 2015, 04:25:11 am
IMHO, market depth graph should be separate from buy/sell order book. What about having order depth switch in the market graph section?

FYI the best trade experience was given by mcxnow. Here's a video https://www.youtube.com/watch?v=KgHQ_6TitJY
Title: Re: Reworking the wallet trading interface
Post by: bitmeat on April 21, 2015, 11:17:46 pm
My favorite depth of market view is on bitcoinwisdom 15M chart.