GUI needs a lot work

I’ve managed to add a button to the LCD display but graphically, it is very basic.

Has anyone considered porting Glide to TinyCLR2.0? I know Mifmasterz has something on his GITHUB (Gravicode) page but there were issues with missing features in TinyCLR1.0 that stopped his progress. I don’t know if he has looked at this again with TinyCLR2.0 to see if the missing features have been included.

I’d like to work on something and add more graphical elements to it. Give the buttons a nicer look etc.

The great thing with Glide was how fast it was to create a GUI, especially using the late BlackdogSpark’s Glide Studio. We need something similar for TinyCLR2.0

2 Likes

WPF is nice because it scales with the display and uses less ram. Glide was more user friendly but it is fixed to a specific size and it was ram hungry.

I think we just need WPF examples to make it easier.

2 Likes

I am no expert but if I understand WPF correctly, on the desktop it stores the design layout in a xaml file format. I suppose it should be possible to process the xaml file to create a TinyCLR compatible C# file for displaying the screen.

When you get around to publishing some examples please show some examples that show the best way to update data on the screen and tie in touch events. I was able to do some but I am not sure it is correct. Also need some examples that handle multiple windows with background processes running and updating those multiple windows.

As an example I created a dispatch timer for a window. Each time the timer fires I wanted to update the data in multiple text locations. It did work but it wasn’t very scalable. There is no “Name” value in the UIElement class to help identify each element that is a child of the parent window(panel). You have to address them by the index or the order in which they were added to their parent. That is not real workable for a window that has a large number of elements.

Is it possible to add the “Name” property to the UIElement class to assist with this? Of course I could be all messed up on my approach to updates so if I am please point me in the right direction.

I am playing around with a the GUI and the samples appear to be out of date as a number of the functions don’t work as many have different parameter. Eg, the panel element doesn’t like the Recangle function as it requires a x and y position and not just width and height. The child add for this doesn’t work either.

I’ve also been reading up on WPF and almost every tutorial uses xaml which I suspect isn’t the case with TinyCLR2.0?

I have done a very simple program using UI with SC20260D and UD435 display: when I push button, it switches the led.

using System;
using System.Drawing;
using GHIElectronics.TinyCLR.Devices.Display;
using GHIElectronics.TinyCLR.Devices.Gpio;
using GHIElectronics.TinyCLR.Devices.I2c;
using GHIElectronics.TinyCLR.Drivers.FocalTech.FT5xx6;
using GHIElectronics.TinyCLR.Pins;
using GHIElectronics.TinyCLR.UI;
using GHIElectronics.TinyCLR.UI.Controls;
using GHIElectronics.TinyCLR.UI.Input;
using GHIElectronics.TinyCLR.UI.Media;

namespace testSC2060DDisplay4
{
    class Program : Application
    {
        private static Font _font;
        private static Program _app;
        private static GpioPin _led;

        private Program(DisplayController d) : base(d)
        {

        }
        static void Main()
        {
            var disp = DisplayController.GetDefault();

            disp.SetConfiguration(new ParallelDisplayControllerSettings
            {
                //Your display configuration
                Width = 480,
                Height = 272,
                DataFormat = DisplayDataFormat.Rgb565,
                HorizontalBackPorch = 46,
                HorizontalFrontPorch = 16,
                HorizontalSyncPolarity = false,
                HorizontalSyncPulseWidth = 1,
                DataEnableIsFixed = false,
                DataEnablePolarity = false,
                PixelClockRate = 16_000_000,
                PixelPolarity = false,
                VerticalBackPorch = 23,
                VerticalFrontPorch = 7,
                VerticalSyncPolarity = false,
                VerticalSyncPulseWidth = 1
            });

            disp.Enable();

            //            UCMStandard.SetModel(UCMModel.UC5550);
            var gpioController = GpioController.GetDefault();

            _led = gpioController.OpenPin(SC20260.GpioPin.PH6);
            _led.SetDriveMode(GpioPinDriveMode.Output);
            _led.Write(GpioPinValue.High);

            var backlight = gpioController.OpenPin(SC20260.GpioPin.PA15);
            backlight.SetDriveMode(GpioPinDriveMode.Output);
            backlight.Write(GpioPinValue.High);

            _font = Resource.GetFont(Resource.FontResources.NinaB);

            var i2CController = I2cController.GetDefault();
            var touch = new FT5xx6Controller(i2CController.GetDevice(FT5xx6Controller.GetConnectionSettings()), gpioController.OpenPin(SC20260.GpioPin.PJ14));

            touch.TouchDown += Touch_TouchDown;
            touch.TouchUp += Touch_TouchUp;

            _app = new Program(disp);
            _app.Run(Program.CreateWindow(disp));
        }

        private static void Touch_TouchUp(FT5xx6Controller sender, GHIElectronics.TinyCLR.Drivers.FocalTech.FT5xx6.TouchEventArgs e)
        {
            _app.InputProvider.RaiseTouch(e.X, e.Y, TouchMessages.Up, DateTime.Now);
        }

        private static void Touch_TouchDown(FT5xx6Controller sender, GHIElectronics.TinyCLR.Drivers.FocalTech.FT5xx6.TouchEventArgs e)
        {
            _app.InputProvider.RaiseTouch(e.X, e.Y, TouchMessages.Down, DateTime.Now);
        }

        private static Window CreateWindow(DisplayController disp)
        {
            var window = new Window
            {
                Height = disp.ActiveConfiguration.Height,
                Width = disp.ActiveConfiguration.Width
            };
            window.Background = new LinearGradientBrush(Colors.Blue, Colors.Red, 0, 0,
               window.Width * 2, 0);
            window.Visibility = Visibility.Visible;
            window.Child = Elements();
            return window;
        }

        private static UIElement Elements()
        {
            var txt = new Text(_font, "Push me!")
            {
                VerticalAlignment = VerticalAlignment.Center,
                HorizontalAlignment = HorizontalAlignment.Center,
            };
            var button = new Button()
            {
                Child = txt,
                Width = 100,
                Height = 40,
            };
            button.Click += Button_Click;
            return button;
        }

        private static void Button_Click(object sender, RoutedEventArgs e)
        {
            _led.Write(_led.Read() == GpioPinValue.High ? GpioPinValue.Low : GpioPinValue.High);
        }
    }
}```
2 Likes

screenshoot is missing :slight_smile:

@Greg_Norris I agree

1 Like

User-Interface code should be all fixed on the next pull request.

1 Like

Any chance you saw my post above about adding “Name” string to the UIElement class? Is that even possible?

2 Likes

It all works for me too on the 7" IPS and all it needs now is some graphics to make it look pretty and UP and DOWN states etc.

We need something similar to Glide with a visual editor but without the overhead that used to have. Trying to place elements on the GUI by code is a little old fashioned. :wink:

This image is not the best to show off the display as it doesn’t capture the red colour so well and the white looks washed out. This is a 900cd/m3 display so it is bright.

The higher resolution means crisper looking text.

2 Likes

Gus, do we use xaml with WPF in TinyCLR2.0? I am confused as all of the samples I find online are all using xaml to create the windows.

1 Like

No unfortunately not. It is very loosely based on WPF. We need to clarify @Joel_Riley

Well I know Glide is a memory hog is some respects, but I like it and intend to use it at this point in time. It handles all of my needs for a GUI that allows me to develop screens fast. Normally scaling is not needed once I’ve developed an app for a specific need. Most of my development is for 4.3" and I know that the screens will have to be adjusted if I move to a 7".

Mifmasterz started to port it to 1.0 and I am looking to see I can port to 2.0 even if a memory hog. Might even be able to work around the memory issues and get it working with WPF.

Have a look for gravicode on GITHUB. He has done a good bit of the work on this but still loads left to do.

We welcome glide but please give WPF a chance. We will release some examples next week to help out.

3 Likes

Is there any way with WPF to layout elements in absolute coordinates? I can’t see how to lay out a button in the bottom 2 corners. Everything seems to be in the centre of the screen.

You are still thinking fixed position, that is what glide did.
This got me very confused when I first tried the UI. There is canvas to do that but you shouldn’t do that. You need to think more dynamic. An element, like a button, should be a child of a panel, in which panels can be children of other panels, to them all become the window’s only child.

What happens then is that elements will go in the proper position regardless of the screen resolution.

By the way, I think we should stop calling it WPF. We should call it UI instead.

1 Like

We do need samples as I spent a few hours tonight trying to get 2 buttons to appear on the screen and both were on top of each other. I understand the way this should work as this is how Android also works but in the case of the UI on TinyCLR, I can’t see how to make a control appear on the screen in the way I want it to appear. Android gives me a thing called a margin that allows me to space elements apart but in UI, I only end up with a gray background to the control and this responds to touch and not the button itself. The margin is part of the control and not the space around it.

If you could show us a sample that creates something similar to the following, I think that will make all the difference to understanding how to do this with TinlyCLR2.0 and UI. :slight_smile:

2 Likes

until you figures (or until i receive board) you are close to make product ready for sale (with TinyCLR 2.0)