TinyCLR: Komponen Chart untuk mikrokontroller

Hi Makers,

Pa kabar ? semoga sehat dan tetap semangat. Rekan-rekan disini sebelumnya pernah dengar tentang TinyCLR ? Nah ini adalah salah satu dev platform untuk embedded system yang dikembangkan oleh GHI Electronics di US, nah ini dulunya adalah .NET Mikro Framework buatan Microsoft yang lalu di modifikasi untuk di modernisasi untuk kebutuhan saat ini.

Karena tergolong platform yang baru maka belum banyak library-library yang tersedia, nah penulis salah satu pengguna dari produk GHI, makanya tertarik bikinin komponen chart.

Nah chart ini biasa untuk melakukan visualisasi data dengan bentuk yang lebih mudah dipahami, komponen ini akan menghasilkan image dengan format bitmap untuk menampilkan data dalam bentuk Line Chart dan Bar Chart.

Ini tampilannya, sederhana bukan ? haha yang penting ada manfaatnya deh, nanti soal kosmetik tergantung rekan-rekan yang bisa berkreasi.

Untuk penggunaannya silakan ikuti langkah berikut:

1. Install visual studio 2022 kalau belum punya dari Visual Studio 2022 Community Edition – Download Latest Free Version (microsoft.com)
2. Install extension TinyCLR dari Downloads (ghielectronics.com)
3. Lalu download solusinya dari Gravicode/TinyCLR.BitmapChart: This is simple chart for TinyCLR (github.com)
4. Penggunaan sesederhana ini:

var datas = new ArrayList();
Random random = new Random();
for(int i = 0; i < 10; i++)
{
datas.Add(new DataItem() { Value = random.Next(100), Name = $"N{i}" });
}
var chartService = new ChartService(800, 480)
{
DivisionAxisX = 1,
DivisionAxisY = 10,
RadiusPoint = 15,
ChartTitle = "Test Tiny Chart",
Items = datas
};

var chart1 = chartService.GetChart(ChartMode.LineMode);

var chart2 = chartService.GetChart(ChartMode.RectangleMode);
//.Save(Directory.GetCurrentDirectory() + "\\chartRectangle.png");
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 = 800,
Height = 480,
DataFormat = DisplayDataFormat.Rgb565,
Orientation = DisplayOrientation.Degrees0, //Rotate display.
PixelClockRate = 24000000,
PixelPolarity = false,
DataEnablePolarity = false,
DataEnableIsFixed = false,
HorizontalFrontPorch = 16,
HorizontalBackPorch = 46,
HorizontalSyncPulseWidth = 1,
HorizontalSyncPolarity = false,
VerticalFrontPorch = 7,
VerticalBackPorch = 23,
VerticalSyncPulseWidth = 1,
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);

screen.Clear();
//draw first chart - line
screen.DrawImage(chart1, 0, 0);

screen.Flush();

Thread.Sleep(5000);

screen.Clear();
//draw second chart - bar
screen.DrawImage(chart2, 0, 0);

screen.Flush();

Nah, selamat berkreasi dan semoga manfaat.

-Salam Kreatif 😀