Draw.dot OnRender()

[efeuvejota01]

Is there any sample showing how to draw a dot (or any figure) in an OnRender section??
Thank you
FVJ

[NinjaTrader_BrandonH]

Hello FVJ,

Thanks for your post.

You could view the SampleCustomRender indicator that comes default with NinjaTrader for an example of using SharpDX to custom render objects on the chart. To view the script, open a New > NinjaScript Editor window, open the Indicators folder, and double click on the SampleCustomRender file.

RenderTarget would be used to custom render drawing objects on the chart.

See the help guide documentation below for more information.

Using SharpDX for Custom Chart Rendering: https://ninjatrader.com/support/help..._rendering.htm
RenderTarget: https://ninjatrader.com/support/help...ndertarget.htm

Let me know if I may assist further.

[PaulMohn]

            // 1.4 - Rendering Custom Shapes

            // SharpDX namespace consists of several shapes you can use to draw objects more complicated than lines
            // For example, we can use the RectangleF object to draw a rectangle that covers the entire chart area
            SharpDX.RectangleF rect = new SharpDX.RectangleF(startPoint.X, startPoint.Y, width, height);

            // The RenderTarget consists of two commands related to Rectangles.
            // The FillRectangle() method is used to "Paint" the area of a Rectangle
            RenderTarget.FillRectangle(rect, areaBrushDx);

            // and DrawRectangle() is used to "Paint" the outline of a Rectangle
            RenderTarget.DrawRectangle(rect, customDXBrush, 2);

            // Another example is an ellipse which can be used to draw circles
            // The ellipse center point can be used from the Vectors calculated earlier
            // The width and height an absolute 100 device pixels
            // To ensure that pixel coordinates work across all DPI devices, we use the NinjaTrader ChartingExteions methods
            // Which will convert the "100" value from WPF pixels to Device Pixels both vertically and horizontally
            int ellipseRadiusY = ChartingExtensions.ConvertToVerticalPixels(100, ChartControl.PresentationSource);
            int ellipseRadiusX = ChartingExtensions.ConvertToHorizontalPixels(100, ChartControl.PresentationSource);

            SharpDX.Direct2D1.Ellipse ellipse = new SharpDX.Direct2D1.Ellipse(center, ellipseRadiusX, ellipseRadiusY);

            // 1.5 - Complex Brush Types and Shapes
            // For this ellipse, we can use one of the more complex brush types "RadialGradientBrush"
            // Warning:  RadialGradientBrush objects must be disposed of after they have been used
            SharpDX.Direct2D1.RadialGradientBrush radialGradientBrush;

            // However creating a RadialGradientBrush requires a few more properties than SolidColorBrush
            // First, you need to define the array gradient stops the brush will eventually use
            SharpDX.Direct2D1.GradientStop[] gradientStops = new SharpDX.Direct2D1.GradientStop[2];

            // With the gradientStops array, we can describe the color and position of the individual gradients
            gradientStops[0].Color = SharpDX.Color.Goldenrod;
            gradientStops[0].Position = 0.0f;
            gradientStops[1].Color = SharpDX.Color.SeaGreen;
            gradientStops[1].Position = 1.0f;

            // then declare a GradientStopCollection from our render target that uses the gradientStops array defined just before
            // Warning:  GradientStopCollection objects must be disposed of after they have been used
            SharpDX.Direct2D1.GradientStopCollection gradientStopCollection =
                new SharpDX.Direct2D1.GradientStopCollection(RenderTarget, gradientStops);

            // we also need to tell our RadialGradientBrush to match the size and shape of the ellipse that we will be drawing
            // for convenience, SharpDX provides a RadialGradientBrushProperties structure to help define these properties
            SharpDX.Direct2D1.RadialGradientBrushProperties radialGradientBrushProperties =
                new SharpDX.Direct2D1.RadialGradientBrushProperties
                {
                    GradientOriginOffset = new SharpDX.Vector2(0, 0),
                    Center = ellipse.Point,
                    RadiusX = ellipse.RadiusY,
                    RadiusY = ellipse.RadiusY
                };

            // we now have everything we need to create a radial gradient brush
            radialGradientBrush = new SharpDX.Direct2D1.RadialGradientBrush(RenderTarget, radialGradientBrushProperties,
                gradientStopCollection);

            // Finally, we can use this radialGradientBrush to "Paint" the area of the ellipse
            RenderTarget.FillEllipse(ellipse, radialGradientBrush);​

lines 168 to 228

https://web.archive.org/web/20240807124202/https://pastebin.com/sj55rkQy

[forrestang]

Here is a design pattern I still use regularly for debugging. Pretty much just paste it into my code.

        protected override void OnRender(ChartControl chartControl, ChartScale chartScale)
        {

            int rightMostBar = ChartBars.ToIndex;                     //Note:First bar on chart is 0
            int leftMostBar = ChartBars.FromIndex;                     //Note:First bar on chart is 0

            SharpDX.Direct2D1.SolidColorBrush solidColorBrush;

            for (int i=leftMostBar; i <= rightMostBar; i++) //Start at necessary List position
            {        
                float currentX = chartControl.GetXByBarIndex(ChartBars, i);
                
                int ellipseRadiusY = chartControl.GetBarPaintWidth(chartControl.BarsArray[0]);
                int ellipseRadiusX = chartControl.GetBarPaintWidth(chartControl.BarsArray[0]);    
                
            //--------------------------    
                if(myStateUp.GetValueAt(i) == +1)
                {
                    SharpDX.Vector2 center = new SharpDX.Vector2(currentX, ChartPanel.Y + (ChartPanel.H) -vOffset-7);
                    SharpDX.Direct2D1.Ellipse ellipse = new SharpDX.Direct2D1.Ellipse(center, ellipseRadiusX, ellipseRadiusY);
                    
                    solidColorBrush = new SharpDX.Direct2D1.SolidColorBrush(RenderTarget, SharpDX.Color.LightBlue);
                    RenderTarget.FillEllipse(ellipse, solidColorBrush);
                    solidColorBrush.Dispose();
                }
                if(myStateUp.GetValueAt(i) == -1 )
                {
                    SharpDX.Vector2 center = new SharpDX.Vector2(currentX, ChartPanel.Y + (ChartPanel.H)-vOffset -0);
                    SharpDX.Direct2D1.Ellipse ellipse = new SharpDX.Direct2D1.Ellipse(center, ellipseRadiusX, ellipseRadiusY);
                    
                    solidColorBrush = new SharpDX.Direct2D1.SolidColorBrush(RenderTarget, SharpDX.Color.Red);
                    RenderTarget.FillEllipse(ellipse, solidColorBrush);
                    solidColorBrush.Dispose();
                }​
​
            }

            //Allow onRender+
            base.OnRender(chartControl, chartScale);

        }​

This simply draws dots on the bottom of the screen, based on the value in "myStateUp." I simply change this value when I need to check for various values.

Attached is an image, showing what it looks like. In the image, it actually prints 4 colors, but just showing you what it looks like. In the code above, this would draw a lightblue, and a red dot, depending on the value found on each bar, in "myStateUp".

You notice "vOffset," this is usually a global variable I have as a user input, and simply raises all the dots from the bottom of the screen by n-pixels. I offset the dots also, that's why one has a "-7" on it, as it raises that set of dots above the other set of dots by 7 pixels, so they sit on different y-values.