From c70632a0c3fa612a9c8abc0438b89543754ad2fc Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 26 Apr 2019 18:02:27 +0200 Subject: [PATCH 01/14] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 03dec3aac..9e5542b16 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ The Canvas App is the in-house charting system of Superalgos. It is the software capable of running the Plotters that can represent datasets graphically. -![image](https://user-images.githubusercontent.com/9479367/55588708-ca8f1e80-572e-11e9-9073-a591b1143171.png) +![image](https://user-images.githubusercontent.com/9479367/56820881-520f0f80-684d-11e9-9f47-4b3ca38370e9.png) ## Installation From 522a06f053ff3a8bf104be6b7d61e93f09b692ca Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 26 Apr 2019 18:09:12 +0200 Subject: [PATCH 02/14] Update README.md --- README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/README.md b/README.md index 9e5542b16..d3acef1bd 100644 --- a/README.md +++ b/README.md @@ -12,4 +12,16 @@ https://github.com/Superalgos/AAWeb/blob/develop/README.md ## Usage +First time you enter you will see this screen, with no chart displayed, since the app exects you to select one of the available layers at the left panel: + +![image](https://user-images.githubusercontent.com/9479367/56821029-a3b79a00-684d-11e9-8226-2471e32b70e7.png) + +Click on the first layer "Candles" and wait a few second to load the data and plot the candles chart. At that point you should see something like this: + +![image](https://user-images.githubusercontent.com/9479367/56821266-1fb1e200-684e-11e9-9492-8bcbc3ed84d8.png) + +As you can see, the candles belong to the market BTC/USDT @ Poloniex. Even though the app already support other markets and other exchanges, for us is better to have only this one active while the codebase matures. + + + Use your mouse wheel to zoom out and zoom in, and left click to drag and drop the charts. The Canvas App is designed to have a similar experience than Google Maps in the sense that allows you to easily navigate through different markets, potentially at different exchanges just by zooming out, dragging / dropping and zooming in at your destination. From 8509f9712c78058835c1ee4778c26e5e47418072 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 26 Apr 2019 18:20:25 +0200 Subject: [PATCH 03/14] Update README.md --- README.md | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d3acef1bd..58c4790e8 100644 --- a/README.md +++ b/README.md @@ -16,12 +16,37 @@ First time you enter you will see this screen, with no chart displayed, since th ![image](https://user-images.githubusercontent.com/9479367/56821029-a3b79a00-684d-11e9-8226-2471e32b70e7.png) +### Layers Panel + +This panel includes different layers you can visualize just by turning them on with a mounse click. A second click would turn them off. +The layer title bar can have 3 possibles colors: + +1. Red: layer is off. +2. Green: layer is on. +3. Yellow: layer is loading or can not completelly load if it stay in this color/state. + Click on the first layer "Candles" and wait a few second to load the data and plot the candles chart. At that point you should see something like this: ![image](https://user-images.githubusercontent.com/9479367/56821266-1fb1e200-684e-11e9-9492-8bcbc3ed84d8.png) As you can see, the candles belong to the market BTC/USDT @ Poloniex. Even though the app already support other markets and other exchanges, for us is better to have only this one active while the codebase matures. +You need to notice these 3 things on your screen: + +### Main Elements + +1. The current datetime at the top. This is the date and time at the mouse pointer position. +2. The current rate at the right. This is the current rate (in this case USDT per BTC) at the mouse pointer position. +3. The current time period (or candle size if you wish) at the bottom. This is the currently diplayed time period, not only for candles but for any other object plotted across any of the available layers. + +### Mouse Wheel Operations + +There are many things you can do with your mouse wheel. + +1. Use your mouse wheel next to the datetime to produce an horizontal scaling. +2. Use your mouse wheel at the displayed rate to produce a vertical scaling. +3. Use your mouse wheel next to the time period to change it amoung all the possible available time periods. +4. User you mouse wheel over the Layers panel to scroll up or down the layers (in case they are not all already displayed). +5. User your mouse wheel overt the chart, and not close to the previous elements to zoom in and out the chart. The App will not only zoom in and out but also automatically adjust the time period to the most convinient for the zoom level you are in. -Use your mouse wheel to zoom out and zoom in, and left click to drag and drop the charts. The Canvas App is designed to have a similar experience than Google Maps in the sense that allows you to easily navigate through different markets, potentially at different exchanges just by zooming out, dragging / dropping and zooming in at your destination. From 31b04a8a12f7c87223b2b2d950903a080558ff55 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 26 Apr 2019 18:23:29 +0200 Subject: [PATCH 04/14] Update README.md --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 58c4790e8..6c74adcb6 100644 --- a/README.md +++ b/README.md @@ -49,4 +49,8 @@ There are many things you can do with your mouse wheel. 4. User you mouse wheel over the Layers panel to scroll up or down the layers (in case they are not all already displayed). 5. User your mouse wheel overt the chart, and not close to the previous elements to zoom in and out the chart. The App will not only zoom in and out but also automatically adjust the time period to the most convinient for the zoom level you are in. +After zooming in the main elements stay at the top, left and bottom of the viewport as you can see in the next screenshot: + +![image](https://user-images.githubusercontent.com/9479367/56822037-30635780-6850-11e9-8d1c-1c58959f46e9.png) + From 299d020eb48a0a4c3f529dfeed6dfaa5cc5bc317 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 26 Apr 2019 18:27:59 +0200 Subject: [PATCH 05/14] Update README.md --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index 6c74adcb6..23beb2dbd 100644 --- a/README.md +++ b/README.md @@ -53,4 +53,13 @@ After zooming in the main elements stay at the top, left and bottom of the viewp ![image](https://user-images.githubusercontent.com/9479367/56822037-30635780-6850-11e9-8d1c-1c58959f46e9.png) +### Hiding Panels +There are two ways to hide the panels on the screen: + +1. Drag them from their title bar with the right mouse button. +2. Click over the small triangle at the left of their title bar. This will automatically position them at the bottom of the screen. Clicking again restores its previous position. + +Here I gragged the Layers panel to the left, and I clicked at the Current Candle Panel: + +![image](https://user-images.githubusercontent.com/9479367/56822276-db741100-6850-11e9-9e23-d3fabb82754c.png) From 7ba2712c7eb59dbfe06437b108671a21e8d061c5 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 26 Apr 2019 18:43:58 +0200 Subject: [PATCH 06/14] Update README.md --- README.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/README.md b/README.md index 23beb2dbd..2fac7179c 100644 --- a/README.md +++ b/README.md @@ -63,3 +63,25 @@ There are two ways to hide the panels on the screen: Here I gragged the Layers panel to the left, and I clicked at the Current Candle Panel: ![image](https://user-images.githubusercontent.com/9479367/56822276-db741100-6850-11e9-9e23-d3fabb82754c.png) + +### Available Layers + +Superalgos is an open system, that means anyone can build more layers for this chart app. So far with our current limited manpower we managed to create these ones: + +1. Candles: tipical candlesticks. + +![image](https://user-images.githubusercontent.com/9479367/56822785-6acdf400-6852-11e9-98d9-0bd19ca98d61.png) + +2. Volumes: here I innovated a little bit, putting the buy volume down and in green, and the sell volume up and red. + +![image](https://user-images.githubusercontent.com/9479367/56822811-8638ff00-6852-11e9-9f25-6b97720a9d1b.png) + +3. Candle Stairs Patterns: this is an unusual pattern to prove anything can be added to the system. A Stair Pattern is defined as a set of candles going in the same direction, either up or down. You can think about this patterns as "Candle Channels" as are channels with direction up or down based on underlaying candles direction. + +![image](https://user-images.githubusercontent.com/9479367/56822884-b6809d80-6852-11e9-999a-bccddfb68229.png) + +4. Volume Stairs Patterns: similar concept but with volumes. Whenever we find a sequence of volume bars each one bigger than the previous one, they are bundled together in a "Stair". The same when they are going down (or the next is smaller than the previous one). In this way you can ask easily ast from a trading bot: is sell volume going up? is buy volume going down? + +![image](https://user-images.githubusercontent.com/9479367/56822975-f34c9480-6852-11e9-9175-19d397b89441.png) + + From 4642775eb9a1a54371412d9ce98a2c20c2bdfae2 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 26 Apr 2019 18:45:50 +0200 Subject: [PATCH 07/14] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2fac7179c..3785f211e 100644 --- a/README.md +++ b/README.md @@ -80,7 +80,7 @@ Superalgos is an open system, that means anyone can build more layers for this c ![image](https://user-images.githubusercontent.com/9479367/56822884-b6809d80-6852-11e9-999a-bccddfb68229.png) -4. Volume Stairs Patterns: similar concept but with volumes. Whenever we find a sequence of volume bars each one bigger than the previous one, they are bundled together in a "Stair". The same when they are going down (or the next is smaller than the previous one). In this way you can ask easily ast from a trading bot: is sell volume going up? is buy volume going down? +4. Volume Stairs Patterns: similar concept but with volumes. Whenever we find a sequence of volume bars each one bigger than the previous one, they are bundled together in a "Stair". The same when they are going down (or the next is smaller than the previous one). In this way you can ask easily ask from a trading bot: is sell volume going up? is buy volume going down? ![image](https://user-images.githubusercontent.com/9479367/56822975-f34c9480-6852-11e9-9175-19d397b89441.png) From 46384b0d5274aa5e890addd05d4142d0d6a26191 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 26 Apr 2019 22:04:05 +0200 Subject: [PATCH 08/14] Update README.md --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index 3785f211e..bac69825d 100644 --- a/README.md +++ b/README.md @@ -84,4 +84,13 @@ Superalgos is an open system, that means anyone can build more layers for this c ![image](https://user-images.githubusercontent.com/9479367/56822975-f34c9480-6852-11e9-9175-19d397b89441.png) +5. Bollinger Bands: this is the traditional Bollinger Bands indicator as described here: https://en.wikipedia.org/wiki/Bollinger_Bands + +Bollinger Bands have a moving average, in our case calculated with the last 20 periods. (It is the line in the middle of the bands.). We are plotting the moving average with one color when it is going up, and another color when it is going down. The upper band is at 2 Standard Deviations from the center and the lower band too, at 2 Standard Deviations. It is the most widely used Bollinger Bands settings. + +![image](https://user-images.githubusercontent.com/9479367/56833341-82b37100-686e-11e9-8b17-55b3bf7a8fdb.png) + + + + From 55c1b0d6aec1f986cb07316b03ba73ff155a2796 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 26 Apr 2019 22:28:47 +0200 Subject: [PATCH 09/14] Update README.md --- README.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index bac69825d..a41fa6095 100644 --- a/README.md +++ b/README.md @@ -84,12 +84,15 @@ Superalgos is an open system, that means anyone can build more layers for this c ![image](https://user-images.githubusercontent.com/9479367/56822975-f34c9480-6852-11e9-9175-19d397b89441.png) -5. Bollinger Bands: this is the traditional Bollinger Bands indicator as described here: https://en.wikipedia.org/wiki/Bollinger_Bands - -Bollinger Bands have a moving average, in our case calculated with the last 20 periods. (It is the line in the middle of the bands.). We are plotting the moving average with one color when it is going up, and another color when it is going down. The upper band is at 2 Standard Deviations from the center and the lower band too, at 2 Standard Deviations. It is the most widely used Bollinger Bands settings. +5. Bollinger Bands: this is the traditional Bollinger Bands indicator as described here: https://en.wikipedia.org/wiki/Bollinger_Bands . Bollinger Bands have a moving average, in our case calculated with the last 20 periods. (It is the line in the middle of the bands.). We are plotting the moving average with one color when it is going up, and another color when it is going down. The upper band is at 2 Standard Deviations from the center and the lower band too, at 2 Standard Deviations. It is the most widely used Bollinger Bands settings. ![image](https://user-images.githubusercontent.com/9479367/56833341-82b37100-686e-11e9-8b17-55b3bf7a8fdb.png) +6. Percentage Bandwidth or %B: this is a well known indicator that derives from the Bollinger Bands. In a nutshell it tells you how close the price is either to the upper band or the lower band at any point in time. When the price is in the middle of the bands (it is calculated with the close value of each candle), then %B is in the middle of its chart, at value 50. When the price touches the upper band, then %B is at 100, and finally when the price is at the lower band, then %B is at 0. The chart contains lines at %B value 30 and 70 since these are the most common values used by traders to forecast when it will reverse it course. It our chart %B is the one represented at #1. I found usefull to add a moving average in order to smooth a little bit its volatility and be able to ask at any time if it is going up or down. The moving average calcualted with the last 5 %B values is plotted as line #2. Finally I also added a property called Bandwidth, which represents the separation of the upper band from the lower band. It is a measure of the volatity and is plotted at #3. + +![image](https://user-images.githubusercontent.com/9479367/56834223-1c7c1d80-6871-11e9-9687-ae5dc12d0336.png) + + From 201f61f79563b68ec20597631cf176e0379071f4 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 26 Apr 2019 22:44:17 +0200 Subject: [PATCH 10/14] Update README.md --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index a41fa6095..89efa79c2 100644 --- a/README.md +++ b/README.md @@ -92,7 +92,13 @@ Superalgos is an open system, that means anyone can build more layers for this c ![image](https://user-images.githubusercontent.com/9479367/56834223-1c7c1d80-6871-11e9-9687-ae5dc12d0336.png) +7. Bollinger Channels: this is a non-standard indicator derived from the Bollinger Bands. This type of channels are calculated using the Bollinger Bands moving average. Essentially an upward channel begins when the moving average turns from going down to up, and the channel finishes when it turns from going up to down. A downward channel starts when the Bollinger Band moving average turn from going up to down, and it finishes when it starts going up again. Upward channels are plotted in green, while downward ones in red. Additional information can be found at the indicator's panel, like the number of periods contained at the channel. +![image](https://user-images.githubusercontent.com/9479367/56834955-30c11a00-6873-11e9-8601-9d8abc8fab84.png) + +8. Bollinger Sub-Channels: if we consider that one Bollinger Chanel can have sub-channels with the same direction (up or down) but different slopes, then we get to the concept of Bollinger Sub-Channeles. The most important property of a sub-channel is its slope. The possible values are: side, gentle, medium, high and extreme. With this information, a trading bot could easily ask if it is in a sub-channel with a certain slope and for how many periods. + +![image](https://user-images.githubusercontent.com/9479367/56835528-c610de00-6874-11e9-8431-3cfe0c515f3e.png) From a9072c80add3ef7c687fd3887150b29c82a9266a Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 28 Apr 2019 09:31:26 +0200 Subject: [PATCH 11/14] Update README.md --- README.md | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 89efa79c2..69ccd2ce0 100644 --- a/README.md +++ b/README.md @@ -64,9 +64,11 @@ Here I gragged the Layers panel to the left, and I clicked at the Current Candle ![image](https://user-images.githubusercontent.com/9479367/56822276-db741100-6850-11e9-9e23-d3fabb82754c.png) -### Available Layers +### Layers -Superalgos is an open system, that means anyone can build more layers for this chart app. So far with our current limited manpower we managed to create these ones: +Superalgos is an open system, that means anyone can build more layers for this chart app. So far with our current limited manpower we managed to create 8 public layers (available to anyone without being logged in) and 2 extra private layers for when users are logged in: + +#### Public Layers 1. Candles: tipical candlesticks. @@ -100,6 +102,14 @@ Superalgos is an open system, that means anyone can build more layers for this c ![image](https://user-images.githubusercontent.com/9479367/56835528-c610de00-6874-11e9-8431-3cfe0c515f3e.png) +#### Private Layers +1. Trading Simulation: The Trading Simulation layer displays a backtest + fordwartest (paper trading) of whatever strategies you have created in the system. At sign up, you are provided with an initial set of strategies so that you can be up and running as quickly as possilbe. By activating the Trading Simulation layer you should be able to see something like this: + +![image](https://user-images.githubusercontent.com/9479367/56860461-0799aa00-6997-11e9-9c2d-5ace122a5c25.png) + +Let's take a moment to understand what you see on the chart: + +A. This shows you when you entered into one of your strategies (think as if the strategy was activated because the activation conditions were met). The first icon represent the moment when you entered into that strategy and the second one when you left the strategy. From 6f436698fac937908f1d2c4d18dac83410303004 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 28 Apr 2019 09:34:09 +0200 Subject: [PATCH 12/14] Update README.md --- README.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 69ccd2ce0..174ec79a7 100644 --- a/README.md +++ b/README.md @@ -21,9 +21,9 @@ First time you enter you will see this screen, with no chart displayed, since th This panel includes different layers you can visualize just by turning them on with a mounse click. A second click would turn them off. The layer title bar can have 3 possibles colors: -1. Red: layer is off. -2. Green: layer is on. -3. Yellow: layer is loading or can not completelly load if it stay in this color/state. +1. **Red**: layer is off. +2. **Green**: layer is on. +3. **Yellow**: layer is loading or can not completelly load if it stay in this color/state. Click on the first layer "Candles" and wait a few second to load the data and plot the candles chart. At that point you should see something like this: @@ -70,41 +70,41 @@ Superalgos is an open system, that means anyone can build more layers for this c #### Public Layers -1. Candles: tipical candlesticks. +1. **Candles**: tipical candlesticks. ![image](https://user-images.githubusercontent.com/9479367/56822785-6acdf400-6852-11e9-98d9-0bd19ca98d61.png) -2. Volumes: here I innovated a little bit, putting the buy volume down and in green, and the sell volume up and red. +2. **Volumes**: here I innovated a little bit, putting the buy volume down and in green, and the sell volume up and red. ![image](https://user-images.githubusercontent.com/9479367/56822811-8638ff00-6852-11e9-9f25-6b97720a9d1b.png) -3. Candle Stairs Patterns: this is an unusual pattern to prove anything can be added to the system. A Stair Pattern is defined as a set of candles going in the same direction, either up or down. You can think about this patterns as "Candle Channels" as are channels with direction up or down based on underlaying candles direction. +3. **Candle Stairs Patterns**: this is an unusual pattern to prove anything can be added to the system. A Stair Pattern is defined as a set of candles going in the same direction, either up or down. You can think about this patterns as "Candle Channels" as are channels with direction up or down based on underlaying candles direction. ![image](https://user-images.githubusercontent.com/9479367/56822884-b6809d80-6852-11e9-999a-bccddfb68229.png) -4. Volume Stairs Patterns: similar concept but with volumes. Whenever we find a sequence of volume bars each one bigger than the previous one, they are bundled together in a "Stair". The same when they are going down (or the next is smaller than the previous one). In this way you can ask easily ask from a trading bot: is sell volume going up? is buy volume going down? +4. **Volume Stairs Patterns**: similar concept but with volumes. Whenever we find a sequence of volume bars each one bigger than the previous one, they are bundled together in a "Stair". The same when they are going down (or the next is smaller than the previous one). In this way you can ask easily ask from a trading bot: is sell volume going up? is buy volume going down? ![image](https://user-images.githubusercontent.com/9479367/56822975-f34c9480-6852-11e9-9175-19d397b89441.png) -5. Bollinger Bands: this is the traditional Bollinger Bands indicator as described here: https://en.wikipedia.org/wiki/Bollinger_Bands . Bollinger Bands have a moving average, in our case calculated with the last 20 periods. (It is the line in the middle of the bands.). We are plotting the moving average with one color when it is going up, and another color when it is going down. The upper band is at 2 Standard Deviations from the center and the lower band too, at 2 Standard Deviations. It is the most widely used Bollinger Bands settings. +5. **Bollinger Bands**: this is the traditional Bollinger Bands indicator as described here: https://en.wikipedia.org/wiki/Bollinger_Bands . Bollinger Bands have a moving average, in our case calculated with the last 20 periods. (It is the line in the middle of the bands.). We are plotting the moving average with one color when it is going up, and another color when it is going down. The upper band is at 2 Standard Deviations from the center and the lower band too, at 2 Standard Deviations. It is the most widely used Bollinger Bands settings. ![image](https://user-images.githubusercontent.com/9479367/56833341-82b37100-686e-11e9-8b17-55b3bf7a8fdb.png) -6. Percentage Bandwidth or %B: this is a well known indicator that derives from the Bollinger Bands. In a nutshell it tells you how close the price is either to the upper band or the lower band at any point in time. When the price is in the middle of the bands (it is calculated with the close value of each candle), then %B is in the middle of its chart, at value 50. When the price touches the upper band, then %B is at 100, and finally when the price is at the lower band, then %B is at 0. The chart contains lines at %B value 30 and 70 since these are the most common values used by traders to forecast when it will reverse it course. It our chart %B is the one represented at #1. I found usefull to add a moving average in order to smooth a little bit its volatility and be able to ask at any time if it is going up or down. The moving average calcualted with the last 5 %B values is plotted as line #2. Finally I also added a property called Bandwidth, which represents the separation of the upper band from the lower band. It is a measure of the volatity and is plotted at #3. +6. **Percentage Bandwidth or %B**: this is a well known indicator that derives from the Bollinger Bands. In a nutshell it tells you how close the price is either to the upper band or the lower band at any point in time. When the price is in the middle of the bands (it is calculated with the close value of each candle), then %B is in the middle of its chart, at value 50. When the price touches the upper band, then %B is at 100, and finally when the price is at the lower band, then %B is at 0. The chart contains lines at %B value 30 and 70 since these are the most common values used by traders to forecast when it will reverse it course. It our chart %B is the one represented at #1. I found usefull to add a moving average in order to smooth a little bit its volatility and be able to ask at any time if it is going up or down. The moving average calcualted with the last 5 %B values is plotted as line #2. Finally I also added a property called Bandwidth, which represents the separation of the upper band from the lower band. It is a measure of the volatity and is plotted at #3. ![image](https://user-images.githubusercontent.com/9479367/56834223-1c7c1d80-6871-11e9-9687-ae5dc12d0336.png) -7. Bollinger Channels: this is a non-standard indicator derived from the Bollinger Bands. This type of channels are calculated using the Bollinger Bands moving average. Essentially an upward channel begins when the moving average turns from going down to up, and the channel finishes when it turns from going up to down. A downward channel starts when the Bollinger Band moving average turn from going up to down, and it finishes when it starts going up again. Upward channels are plotted in green, while downward ones in red. Additional information can be found at the indicator's panel, like the number of periods contained at the channel. +7. **Bollinger Channels**: this is a non-standard indicator derived from the Bollinger Bands. This type of channels are calculated using the Bollinger Bands moving average. Essentially an upward channel begins when the moving average turns from going down to up, and the channel finishes when it turns from going up to down. A downward channel starts when the Bollinger Band moving average turn from going up to down, and it finishes when it starts going up again. Upward channels are plotted in green, while downward ones in red. Additional information can be found at the indicator's panel, like the number of periods contained at the channel. ![image](https://user-images.githubusercontent.com/9479367/56834955-30c11a00-6873-11e9-8601-9d8abc8fab84.png) -8. Bollinger Sub-Channels: if we consider that one Bollinger Chanel can have sub-channels with the same direction (up or down) but different slopes, then we get to the concept of Bollinger Sub-Channeles. The most important property of a sub-channel is its slope. The possible values are: side, gentle, medium, high and extreme. With this information, a trading bot could easily ask if it is in a sub-channel with a certain slope and for how many periods. +8. **Bollinger Sub-Channels**: if we consider that one Bollinger Chanel can have sub-channels with the same direction (up or down) but different slopes, then we get to the concept of Bollinger Sub-Channeles. The most important property of a sub-channel is its slope. The possible values are: side, gentle, medium, high and extreme. With this information, a trading bot could easily ask if it is in a sub-channel with a certain slope and for how many periods. ![image](https://user-images.githubusercontent.com/9479367/56835528-c610de00-6874-11e9-8431-3cfe0c515f3e.png) #### Private Layers -1. Trading Simulation: The Trading Simulation layer displays a backtest + fordwartest (paper trading) of whatever strategies you have created in the system. At sign up, you are provided with an initial set of strategies so that you can be up and running as quickly as possilbe. By activating the Trading Simulation layer you should be able to see something like this: +1. **Trading Simulation**: The Trading Simulation layer displays a backtest + fordwartest (paper trading) of whatever strategies you have created in the system. At sign up, you are provided with an initial set of strategies so that you can be up and running as quickly as possilbe. By activating the Trading Simulation layer you should be able to see something like this: ![image](https://user-images.githubusercontent.com/9479367/56860461-0799aa00-6997-11e9-9c2d-5ace122a5c25.png) From d0f1e34dd313563a2f5b7209d0efc481a316bcfc Mon Sep 17 00:00:00 2001 From: Julian Molina Date: Sun, 28 Apr 2019 18:26:51 +0200 Subject: [PATCH 13/14] Update README.md Revision --- README.md | 70 +++++++++++++++++++++++++++---------------------------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index 174ec79a7..0d2e7eb94 100644 --- a/README.md +++ b/README.md @@ -1,115 +1,115 @@ # Welcome to the Canvas App -The Canvas App is the in-house charting system of Superalgos. It is the software capable of running the Plotters that can represent datasets graphically. +The Canvas App is the built-in charting system of Superalgos. It is the software capable of running the Plotters that represent datasets graphically. ![image](https://user-images.githubusercontent.com/9479367/56820881-520f0f80-684d-11e9-9f47-4b3ca38370e9.png) ## Installation -To install the Canvas App, you need to install AAWeb. Please follow this guide: +To install the Canvas App, you need to install AAWeb, following this guide: https://github.com/Superalgos/AAWeb/blob/develop/README.md ## Usage -First time you enter you will see this screen, with no chart displayed, since the app exects you to select one of the available layers at the left panel: +The first time you access the Canvas App, you will see the following screen with no chart displayed, since the app expects you to select one of the available layers at the Layers Panel on the left: ![image](https://user-images.githubusercontent.com/9479367/56821029-a3b79a00-684d-11e9-8226-2471e32b70e7.png) ### Layers Panel -This panel includes different layers you can visualize just by turning them on with a mounse click. A second click would turn them off. -The layer title bar can have 3 possibles colors: +This panel includes different layers you may visualize by toggling them on and off with a single mouse clicks. +The layer title bar can have 3 possible background colors: 1. **Red**: layer is off. 2. **Green**: layer is on. -3. **Yellow**: layer is loading or can not completelly load if it stay in this color/state. +3. **Yellow**: layer is loading. If it stays yellow, it means it can't load fully. -Click on the first layer "Candles" and wait a few second to load the data and plot the candles chart. At that point you should see something like this: +Click on the "Candles" layer and wait a few seconds date is loaded and candles are plotted. You should see something like this: ![image](https://user-images.githubusercontent.com/9479367/56821266-1fb1e200-684e-11e9-9492-8bcbc3ed84d8.png) -As you can see, the candles belong to the market BTC/USDT @ Poloniex. Even though the app already support other markets and other exchanges, for us is better to have only this one active while the codebase matures. +As you may see, the candles belong to the BTC/USDT market @ Poloniex. Even though the app supports other markets and exchanges, it is better for us to have only this one active, while the codebase matures. -You need to notice these 3 things on your screen: +Notice the following 3 elements relative to the position of the mouse pointer: ### Main Elements -1. The current datetime at the top. This is the date and time at the mouse pointer position. -2. The current rate at the right. This is the current rate (in this case USDT per BTC) at the mouse pointer position. -3. The current time period (or candle size if you wish) at the bottom. This is the currently diplayed time period, not only for candles but for any other object plotted across any of the available layers. +1. Above, the current datetime. This is the date and time at the mouse pointer position. +2. To the right, the current rate. This is the rate (in this case USDT per BTC) at the mouse pointer position. +3. Below, the current time period (or candle size if you wish). This is the currently displayed time period—not only for candles, but for any other object plotted across available layers. ### Mouse Wheel Operations There are many things you can do with your mouse wheel. -1. Use your mouse wheel next to the datetime to produce an horizontal scaling. -2. Use your mouse wheel at the displayed rate to produce a vertical scaling. -3. Use your mouse wheel next to the time period to change it amoung all the possible available time periods. -4. User you mouse wheel over the Layers panel to scroll up or down the layers (in case they are not all already displayed). -5. User your mouse wheel overt the chart, and not close to the previous elements to zoom in and out the chart. The App will not only zoom in and out but also automatically adjust the time period to the most convinient for the zoom level you are in. +1. Scroll on top of or next to the datetime to produce a horizontal scaling. +1. Scroll on top of or next to the displayed rate to produce a vertical scaling. +1. Scroll on top of or next to the time period to change the time period to available values. +1. Scroll elsewhere over the chart to zoom in and out. The App will not only zoom in and out of the chart, but also automatically adjust the time period to the most convenient one (for the current zoom level). +1. Scroll over the Layers Panel to access layers that may be out of reach downwards. After zooming in the main elements stay at the top, left and bottom of the viewport as you can see in the next screenshot: ![image](https://user-images.githubusercontent.com/9479367/56822037-30635780-6850-11e9-8d1c-1c58959f46e9.png) -### Hiding Panels +### Moving Panels -There are two ways to hide the panels on the screen: +Drag and drop right-clicking on the title bar. -1. Drag them from their title bar with the right mouse button. -2. Click over the small triangle at the left of their title bar. This will automatically position them at the bottom of the screen. Clicking again restores its previous position. +### Minimizing Panels -Here I gragged the Layers panel to the left, and I clicked at the Current Candle Panel: +Click on the small triangle on the right of their title bar. This will automatically position the panel at the bottom of the screen. Clicking again restores the panel to its previous position. +In the following image, the Layers Panel was dragged to the left and the Current Candle Panel was minimized: + ![image](https://user-images.githubusercontent.com/9479367/56822276-db741100-6850-11e9-9e23-d3fabb82754c.png) ### Layers -Superalgos is an open system, that means anyone can build more layers for this chart app. So far with our current limited manpower we managed to create 8 public layers (available to anyone without being logged in) and 2 extra private layers for when users are logged in: +Superalgos is an open system, meaning anyone can build layers for this charting app. So far—with our current limited manpower—we have created 8 public layers (available without logging in) and 2 private layers (available to logged-in users): #### Public Layers -1. **Candles**: tipical candlesticks. +1. **Candles**: Typical candlesticks. ![image](https://user-images.githubusercontent.com/9479367/56822785-6acdf400-6852-11e9-98d9-0bd19ca98d61.png) -2. **Volumes**: here I innovated a little bit, putting the buy volume down and in green, and the sell volume up and red. +1. **Volumes**: I innovated a bit placing the buy volume at the bottom (in green), and the sell volume at the top (in red). ![image](https://user-images.githubusercontent.com/9479367/56822811-8638ff00-6852-11e9-9f25-6b97720a9d1b.png) -3. **Candle Stairs Patterns**: this is an unusual pattern to prove anything can be added to the system. A Stair Pattern is defined as a set of candles going in the same direction, either up or down. You can think about this patterns as "Candle Channels" as are channels with direction up or down based on underlaying candles direction. +1. **Candle Stairs Patterns**: This is an unusual pattern proving any dataset may be plotted on the charts (and by extension, that anything can be added to the system). A Stair Pattern is defined as a set of candles going in the same direction, either up or down. You can think of these patterns as "Candle Channels", as they represent channels with an up or down direction based on underlying candles direction. ![image](https://user-images.githubusercontent.com/9479367/56822884-b6809d80-6852-11e9-999a-bccddfb68229.png) -4. **Volume Stairs Patterns**: similar concept but with volumes. Whenever we find a sequence of volume bars each one bigger than the previous one, they are bundled together in a "Stair". The same when they are going down (or the next is smaller than the previous one). In this way you can ask easily ask from a trading bot: is sell volume going up? is buy volume going down? +1. **Volume Stairs Patterns**: A similar concept, this time with volumes. Whenever a sequence of volume bars is found where each one is bigger than the previous one, they are bundled together in a "Stair". The same applies when they are going down (the next is smaller than the previous one). For a trading bot, this serves to identify if sell or buy volumes are raising or declining, if any. ![image](https://user-images.githubusercontent.com/9479367/56822975-f34c9480-6852-11e9-9175-19d397b89441.png) -5. **Bollinger Bands**: this is the traditional Bollinger Bands indicator as described here: https://en.wikipedia.org/wiki/Bollinger_Bands . Bollinger Bands have a moving average, in our case calculated with the last 20 periods. (It is the line in the middle of the bands.). We are plotting the moving average with one color when it is going up, and another color when it is going down. The upper band is at 2 Standard Deviations from the center and the lower band too, at 2 Standard Deviations. It is the most widely used Bollinger Bands settings. +1. **Bollinger Bands**: This is the traditional (Bollinger Bands indicator)[https://en.wikipedia.org/wiki/Bollinger_Bands]. Bollinger Bands have a moving average, in our case calculated with the last 20 periods (the line in the middle of the bands). We are plotting the moving average with one color when it is going up, and with a different color when it's going down. The upper band is at 2 Standard Deviations from the center, pretty much like the lower band, also at 2 Standard Deviations. These are the most widely used Bollinger Bands settings. ![image](https://user-images.githubusercontent.com/9479367/56833341-82b37100-686e-11e9-8b17-55b3bf7a8fdb.png) -6. **Percentage Bandwidth or %B**: this is a well known indicator that derives from the Bollinger Bands. In a nutshell it tells you how close the price is either to the upper band or the lower band at any point in time. When the price is in the middle of the bands (it is calculated with the close value of each candle), then %B is in the middle of its chart, at value 50. When the price touches the upper band, then %B is at 100, and finally when the price is at the lower band, then %B is at 0. The chart contains lines at %B value 30 and 70 since these are the most common values used by traders to forecast when it will reverse it course. It our chart %B is the one represented at #1. I found usefull to add a moving average in order to smooth a little bit its volatility and be able to ask at any time if it is going up or down. The moving average calcualted with the last 5 %B values is plotted as line #2. Finally I also added a property called Bandwidth, which represents the separation of the upper band from the lower band. It is a measure of the volatity and is plotted at #3. +1. **Percentage Bandwidth or %B**: This is a well-known indicator that derives from the Bollinger Bands. In a nutshell it tells you how close the price is either to the upper band or the lower band at any point in time. When the price is in the middle of the bands (it is calculated with the close value of each candle), then %B is in the middle of its chart, at value 50. When the price touches the upper band, then %B is at 100, and finally when the price is at the lower band, then %B is at 0. The chart contains lines at %B value 30 and 70 since those are the most common values for traders to forecast when a reversal may happen. In our chart, %B is the one represented at #1. I've found useful to add a moving average in order to smooth volatility a bit, and to be able to ask—at any time—if it is going up or down. The moving average calculated with the last 5 %B values is plotted as line #2. Finally I also added a property called Bandwidth, which represents the separation of the upper band from the lower band. It is a measure of the volatility and is plotted at #3. ![image](https://user-images.githubusercontent.com/9479367/56834223-1c7c1d80-6871-11e9-9687-ae5dc12d0336.png) -7. **Bollinger Channels**: this is a non-standard indicator derived from the Bollinger Bands. This type of channels are calculated using the Bollinger Bands moving average. Essentially an upward channel begins when the moving average turns from going down to up, and the channel finishes when it turns from going up to down. A downward channel starts when the Bollinger Band moving average turn from going up to down, and it finishes when it starts going up again. Upward channels are plotted in green, while downward ones in red. Additional information can be found at the indicator's panel, like the number of periods contained at the channel. +1. **Bollinger Channels**: This is a non-standard indicator derived from the Bollinger Bands. These types of channels are calculated using the Bollinger Bands moving average. Essentially an upward channel begins when the moving average turns from going down to going up, and the channel finishes when it turns from going up to down. A downward channel starts when the Bollinger Band moving average turns from going up to down, and it finishes when it starts going up again. Upward channels are plotted in green, while downward channels in red. Additional information can be found at the indicator's panel, like the number of periods contained at the channel. ![image](https://user-images.githubusercontent.com/9479367/56834955-30c11a00-6873-11e9-8601-9d8abc8fab84.png) -8. **Bollinger Sub-Channels**: if we consider that one Bollinger Chanel can have sub-channels with the same direction (up or down) but different slopes, then we get to the concept of Bollinger Sub-Channeles. The most important property of a sub-channel is its slope. The possible values are: side, gentle, medium, high and extreme. With this information, a trading bot could easily ask if it is in a sub-channel with a certain slope and for how many periods. +1. **Bollinger Sub-Channels**: If we consider that one Bollinger Channel can have sub-channels with the same direction (up or down) but different slopes, then we get to the concept of Bollinger Sub-Channels. The most important property of a sub-channel is its slope. The possible values are: side, gentle, medium, high and extreme. With this information, a trading bot could easily ask if it is in a sub-channel with a certain slope and for how many periods. ![image](https://user-images.githubusercontent.com/9479367/56835528-c610de00-6874-11e9-8431-3cfe0c515f3e.png) #### Private Layers -1. **Trading Simulation**: The Trading Simulation layer displays a backtest + fordwartest (paper trading) of whatever strategies you have created in the system. At sign up, you are provided with an initial set of strategies so that you can be up and running as quickly as possilbe. By activating the Trading Simulation layer you should be able to see something like this: +1. **Trading Simulation**: The Trading Simulation layer displays a backtest + fordwardtest (paper trading) of whatever strategies you have created in the system. At sign up, you are provided with an initial set of strategies so that you can be up and running as quickly as possible. By activating the Trading Simulation layer you should be able to see something like this: ![image](https://user-images.githubusercontent.com/9479367/56860461-0799aa00-6997-11e9-9c2d-5ace122a5c25.png) -Let's take a moment to understand what you see on the chart: - -A. This shows you when you entered into one of your strategies (think as if the strategy was activated because the activation conditions were met). The first icon represent the moment when you entered into that strategy and the second one when you left the strategy. +Let's take a moment to analyze what you see on the chart: +A. This shows you when you entered into one of your strategies (think of it as if the strategy was activated because when activation conditions were met). The first icon represents the moment when you entered into that particular strategy, and the second icon represents the moment you left the strategy. From 595c920e0322309806cf670fd6a6a1b5f1beac74 Mon Sep 17 00:00:00 2001 From: Julian Molina Date: Sun, 28 Apr 2019 18:30:01 +0200 Subject: [PATCH 14/14] Update README.md Revision --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 0d2e7eb94..7fa3a65e8 100644 --- a/README.md +++ b/README.md @@ -75,31 +75,31 @@ Superalgos is an open system, meaning anyone can build layers for this charting ![image](https://user-images.githubusercontent.com/9479367/56822785-6acdf400-6852-11e9-98d9-0bd19ca98d61.png) -1. **Volumes**: I innovated a bit placing the buy volume at the bottom (in green), and the sell volume at the top (in red). +2. **Volumes**: I innovated a bit placing the buy volume at the bottom (in green), and the sell volume at the top (in red). ![image](https://user-images.githubusercontent.com/9479367/56822811-8638ff00-6852-11e9-9f25-6b97720a9d1b.png) -1. **Candle Stairs Patterns**: This is an unusual pattern proving any dataset may be plotted on the charts (and by extension, that anything can be added to the system). A Stair Pattern is defined as a set of candles going in the same direction, either up or down. You can think of these patterns as "Candle Channels", as they represent channels with an up or down direction based on underlying candles direction. +3. **Candle Stairs Patterns**: This is an unusual pattern proving any dataset may be plotted on the charts (and by extension, that anything can be added to the system). A Stair Pattern is defined as a set of candles going in the same direction, either up or down. You can think of these patterns as "Candle Channels", as they represent channels with an up or down direction based on underlying candles direction. ![image](https://user-images.githubusercontent.com/9479367/56822884-b6809d80-6852-11e9-999a-bccddfb68229.png) -1. **Volume Stairs Patterns**: A similar concept, this time with volumes. Whenever a sequence of volume bars is found where each one is bigger than the previous one, they are bundled together in a "Stair". The same applies when they are going down (the next is smaller than the previous one). For a trading bot, this serves to identify if sell or buy volumes are raising or declining, if any. +4. **Volume Stairs Patterns**: A similar concept, this time with volumes. Whenever a sequence of volume bars is found where each one is bigger than the previous one, they are bundled together in a "Stair". The same applies when they are going down (the next is smaller than the previous one). For a trading bot, this serves to identify if sell or buy volumes are raising or declining, if any. ![image](https://user-images.githubusercontent.com/9479367/56822975-f34c9480-6852-11e9-9175-19d397b89441.png) -1. **Bollinger Bands**: This is the traditional (Bollinger Bands indicator)[https://en.wikipedia.org/wiki/Bollinger_Bands]. Bollinger Bands have a moving average, in our case calculated with the last 20 periods (the line in the middle of the bands). We are plotting the moving average with one color when it is going up, and with a different color when it's going down. The upper band is at 2 Standard Deviations from the center, pretty much like the lower band, also at 2 Standard Deviations. These are the most widely used Bollinger Bands settings. +5. **Bollinger Bands**: This is the traditional (Bollinger Bands indicator)[https://en.wikipedia.org/wiki/Bollinger_Bands]. Bollinger Bands have a moving average, in our case calculated with the last 20 periods (the line in the middle of the bands). We are plotting the moving average with one color when it is going up, and with a different color when it's going down. The upper band is at 2 Standard Deviations from the center, pretty much like the lower band, also at 2 Standard Deviations. These are the most widely used Bollinger Bands settings. ![image](https://user-images.githubusercontent.com/9479367/56833341-82b37100-686e-11e9-8b17-55b3bf7a8fdb.png) -1. **Percentage Bandwidth or %B**: This is a well-known indicator that derives from the Bollinger Bands. In a nutshell it tells you how close the price is either to the upper band or the lower band at any point in time. When the price is in the middle of the bands (it is calculated with the close value of each candle), then %B is in the middle of its chart, at value 50. When the price touches the upper band, then %B is at 100, and finally when the price is at the lower band, then %B is at 0. The chart contains lines at %B value 30 and 70 since those are the most common values for traders to forecast when a reversal may happen. In our chart, %B is the one represented at #1. I've found useful to add a moving average in order to smooth volatility a bit, and to be able to ask—at any time—if it is going up or down. The moving average calculated with the last 5 %B values is plotted as line #2. Finally I also added a property called Bandwidth, which represents the separation of the upper band from the lower band. It is a measure of the volatility and is plotted at #3. +6. **Percentage Bandwidth or %B**: This is a well-known indicator that derives from the Bollinger Bands. In a nutshell it tells you how close the price is either to the upper band or the lower band at any point in time. When the price is in the middle of the bands (it is calculated with the close value of each candle), then %B is in the middle of its chart, at value 50. When the price touches the upper band, then %B is at 100, and finally when the price is at the lower band, then %B is at 0. The chart contains lines at %B value 30 and 70 since those are the most common values for traders to forecast when a reversal may happen. In our chart, %B is the one represented at #1. I've found useful to add a moving average in order to smooth volatility a bit, and to be able to ask—at any time—if it is going up or down. The moving average calculated with the last 5 %B values is plotted as line #2. Finally I also added a property called Bandwidth, which represents the separation of the upper band from the lower band. It is a measure of the volatility and is plotted at #3. ![image](https://user-images.githubusercontent.com/9479367/56834223-1c7c1d80-6871-11e9-9687-ae5dc12d0336.png) -1. **Bollinger Channels**: This is a non-standard indicator derived from the Bollinger Bands. These types of channels are calculated using the Bollinger Bands moving average. Essentially an upward channel begins when the moving average turns from going down to going up, and the channel finishes when it turns from going up to down. A downward channel starts when the Bollinger Band moving average turns from going up to down, and it finishes when it starts going up again. Upward channels are plotted in green, while downward channels in red. Additional information can be found at the indicator's panel, like the number of periods contained at the channel. +7. **Bollinger Channels**: This is a non-standard indicator derived from the Bollinger Bands. These types of channels are calculated using the Bollinger Bands moving average. Essentially an upward channel begins when the moving average turns from going down to going up, and the channel finishes when it turns from going up to down. A downward channel starts when the Bollinger Band moving average turns from going up to down, and it finishes when it starts going up again. Upward channels are plotted in green, while downward channels in red. Additional information can be found at the indicator's panel, like the number of periods contained at the channel. ![image](https://user-images.githubusercontent.com/9479367/56834955-30c11a00-6873-11e9-8601-9d8abc8fab84.png) -1. **Bollinger Sub-Channels**: If we consider that one Bollinger Channel can have sub-channels with the same direction (up or down) but different slopes, then we get to the concept of Bollinger Sub-Channels. The most important property of a sub-channel is its slope. The possible values are: side, gentle, medium, high and extreme. With this information, a trading bot could easily ask if it is in a sub-channel with a certain slope and for how many periods. +8. **Bollinger Sub-Channels**: If we consider that one Bollinger Channel can have sub-channels with the same direction (up or down) but different slopes, then we get to the concept of Bollinger Sub-Channels. The most important property of a sub-channel is its slope. The possible values are: side, gentle, medium, high and extreme. With this information, a trading bot could easily ask if it is in a sub-channel with a certain slope and for how many periods. ![image](https://user-images.githubusercontent.com/9479367/56835528-c610de00-6874-11e9-8431-3cfe0c515f3e.png)