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 ..
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
- 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.
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?
+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.
I think it's fine to get rid of total column+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)
Great stuff +5%I think it's fine to get rid of total column+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)
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).|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|^|
| 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|
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
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.
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.
Another one is sorting and filtering...- 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.
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.- 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.- 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.
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.
Show quantity in [ BitUSD |v] Show price in [ BTS/BitUSD |v]
Where the [ ... |v] are drop down boxes. 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 ;)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.
(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.
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.
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
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
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
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.
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 like non-modal confirmation because I short to myself and want to confirm both orders at once, but that's an edge use case.
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??
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?
:)
(http://i.imgur.com/RyFY780.png)
:)
(http://i.imgur.com/RyFY780.png)
Here we go. this is my preferred.
(https://i.imgur.com/9tuT5bN.jpg)
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.
Hehe .. let's do https://cryptrader.com ... just better :)
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...
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...
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
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.
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!Love it, nice work cass!
https://bitshares.org/labs/ui/ui-splash-revamp-with-animate.mp4
Here we go. this is my preferred.
(https://i.imgur.com/9tuT5bN.jpg)
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!
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.
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.
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 ^^
https://bitshares.org/labs/ui/ui-brown-market.mp4
https://bitshares.org/labs/ui/ui-brown-market.mp4
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?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?
https://bitshares.org/labs/ui/ui-brown-market.mp4
Stability is much more important than UI. I suggest you guys not spend too much time on UI.The stability has nothing to do with the UI. Two completely different things that are being implemented in parallel.
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 )
(http://i.imgur.com/eC0UVnx.png)
(http://i.imgur.com/eC0UVnx.png)
Wow! I want this now! :O
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?
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.
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
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.
you are trying to put to much information without the need to scroll!
(http://i.imgur.com/eC0UVnx.png)
The one in your photo? No idea.. My reworked interface however should be included in the next release which should be out next week.(http://i.imgur.com/eC0UVnx.png)
when will this theme be supported from the client? Any estimation?