Issue with Graphics on SCM20260D Dev Board

Hey

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:
https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80

The image shown on the screen:

The code is taken from the Getting started page: https://docs.ghielectronics.com/software/tinyclr/tutorials/graphics.html

Code:
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);
            backlight.SetDriveMode(GpioPinDriveMode.Output);
            backlight.Write(GpioPinValue.High);

            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.Clear();

            screen.DrawImage(image, 0, 0);

            screen.Flush();

            Thread.Sleep(-1);
        }
    }
}

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