Issue with Graphics on SCM20260D Dev Board


Been playing around with the SCM20260D Dev Board and encountered a issue when showing images on the screen. the images appear messed up.

The source image:

The image shown on the screen:

The code is taken from the Getting started page:

using GHIElectronics.TinyCLR.Devices.Display;
using GHIElectronics.TinyCLR.Devices.Gpio;
using GHIElectronics.TinyCLR.Pins;
using System.Drawing;
using System.Threading;

namespace TinyCLRApplication1
    class Program
        private static void Main()
            GpioPin backlight = GpioController.GetDefault().OpenPin(SC20260.GpioPin.PA15);

            var displayController = DisplayController.GetDefault();

            // Enter the proper display configurations
            displayController.SetConfiguration(new ParallelDisplayControllerSettings
                Width = 480,
                Height = 272,
                DataFormat = DisplayDataFormat.Rgb565,
                Orientation = DisplayOrientation.Degrees0, //Rotate display.
                PixelClockRate = 10000000,
                PixelPolarity = false,
                DataEnablePolarity = false,
                DataEnableIsFixed = false,
                HorizontalFrontPorch = 2,
                HorizontalBackPorch = 2,
                HorizontalSyncPulseWidth = 41,
                HorizontalSyncPolarity = false,
                VerticalFrontPorch = 2,
                VerticalBackPorch = 2,
                VerticalSyncPulseWidth = 10,
                VerticalSyncPolarity = false,

            displayController.Enable(); //This line turns on the display I/O and starts
                                        //  refreshing the display. Native displays are
                                        //  continually refreshed automatically after this
                                        //  command is executed.

            var screen = Graphics.FromHdc(displayController.Hdc);

            var image = Resource1.GetBitmap(Resource1.BitmapResources.test1);


            screen.DrawImage(image, 0, 0);



The source image does not match the size and aspect ratio of the display.

You need to use the DrawImage API which does scaling.

Using a Portal, and the following code:

Rectangle srcRect = new Rectangle(0, 0, image.Width, image.Height);
Rectangle dstRect = new Rectangle(0, 0, 480, 272);
 screen.DrawImage(image, dstRect, srcRect, GraphicsUnit.Pixel);

The entire image appears, but the aspect ratio is wrong. You will have to decide how to handle the aspect ratio.

1 Like