# Using Clouds in Indicator

## **Theory** <a href="#theory" id="theory"></a>

“Clouds” are areas highlighted with a special color drawn between two line series. Usually, they are used to highlight some special region on the chart. So, it’s one more great visual effect which can make your script more user friendly and even more useful.

To start drawing a cloud area we need to invoke the ‘[BeginCloud](https://api.quantower.com/docs/TradingPlatform.BusinessLayer.Indicator.html#TradingPlatform_BusinessLayer_Indicator_BeginCloud_System_Int32_System_Int32_System_Drawing_Color_System_Int32_)’ method and pass required parameters. If we want to end drawing the area - invoke ‘[EndCloud](https://api.quantower.com/docs/TradingPlatform.BusinessLayer.Indicator.html#TradingPlatform_BusinessLayer_Indicator_EndCloud_System_Int32_System_Int32_System_Drawing_Color_System_Int32_)’ method. These methods are available for every indicator.

Let’s figure out the meaning of these parameters:

```
protected void BeginCloud(int line1Index, int line2Index, Color color, int offset = 0)
```

```
protected void EndCloud(int line1Index, int line2Index, Color color, int offset = 0)
```

## **Practice** <a href="#practice" id="practice"></a>

It will be a simple indicator that will draw two SMA lines with different periods and сloud areas between of them. Periods and colors can be changed in settings.

![](https://gblobscdn.gitbook.com/assets%2F-LD6FsRvQ3jgwJIg6O7r%2F-MVCLryA4-TNA-U9qRYx%2F-MVCNjdtC3DHy6P6cZ2D%2Fusing_clouds_example.jpg?alt=media\&token=02a114b4-b848-4b77-8170-a33a7e6a0344)

### Input parameters <a href="#input-parameters" id="input-parameters"></a>

Let’s create an empty indicator project and define input parameters.

```
[InputParameter("Fast SMA period", 10, 1, 9999, 1, 0)]public int FastPeriod = 50;​[InputParameter("Slow SMA period", 20, 1, 9999, 1, 0)]public int SlowPeriod = 100;​[InputParameter("Fast line above cloud style", 30)]public Color FastAboveCloudColor;​[InputParameter("Slow line above cloud style", 40)]public Color SlowAboveCloudColor;​private Indicator fastSma;private Indicator slowSma;
```

### Class constructor <a href="#class-constructor" id="class-constructor"></a>

Populate constructor of our class. Define script name, add line series and set default colors of cloud areas.

```
this.Name = "Crossing lines";​this.AddLineSeries("Fast SMA line", Color.Red, 3, LineStyle.Solid);this.AddLineSeries("Slow SMA line", Color.Green, 3, LineStyle.Solid);​this.FastAboveCloudColor = Color.FromArgb(127, Color.Green);this.SlowAboveCloudColor = Color.FromArgb(127, Color.Red);
```

### OnInit method <a href="#oninit-method" id="oninit-method"></a>

In the ‘OnInit ‘ method we create two SMA indicators and attach them to our main ‘HistoricalData’.

> Notice, we use Quantower built-in indicator collection.

```
protected override void OnInit(){     this.fastSma = Core.Instance.Indicators.BuiltIn.SMA(this.FastPeriod, PriceType.Close);     this.slowSma = Core.Instance.Indicators.BuiltIn.SMA(this.SlowPeriod, PriceType.Close);​     this.AddIndicator(this.fastSma);     this.AddIndicator(this.slowSma);}​
```

### OnUpdate method <a href="#onupdate-method" id="onupdate-method"></a>

The main calculation is performed in the "OnUpdate" method.

> Notice the line '20'. When lines are crossed we invoke the ‘EndCloud’ method to close the last area. After that we invoke ‘BeginCloud’ to start drawing the new area with specified color.

```
protected override void OnUpdate(UpdateArgs args){     var currFastValue = this.fastSma.GetValue();     var currSlowValue = this.slowSma.GetValue();​     var prevFastValue = this.fastSma.GetValue(1);     var prevSlowValue = this.slowSma.GetValue(1);​     var isCrossing = currFastValue > currSlowValue && prevFastValue < prevSlowValue ||                      currFastValue < currSlowValue && prevFastValue > prevSlowValue;​     this.SetValue(currFastValue, 0);     this.SetValue(currSlowValue, 1);​     if (isCrossing)     {        this.EndCloud(0, 1, Color.Empty);​        if (currFastValue > currSlowValue)             this.BeginCloud(0, 1, this.FastAboveCloudColor);        else if (currFastValue < currSlowValue)             this.BeginCloud(0, 1, this.SlowAboveCloudColor);     }}
```

### OnClear method <a href="#onclear-method" id="onclear-method"></a>

Don’t forget to remove indicators we created in the method "OnClear"

```
protected override void OnClear(){     this.RemoveIndicator(this.fastSma);     this.RemoveIndicator(this.slowSma);}
```

A complete example is available on our Github.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.ampfutures.com/trading-platforms/quantower/quantower-algo/using-clouds-in-indicator.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
