Main Site Documentation

Help with getting GUI?


#1

Hey guys,

Yesterday I wanted to create a simple GUI on the cobra board. First thing I noticed: it is pretty easy. Another thing I noticed: I seem to be too dumb to get it work, haha.

I have 3 buttons. On, off and exit. When I press on, the on button gets highlighted and it works, when I would like to press the off button or exit button, this does not work.

Using the buttons on the cobra works and the code gets executed…

I have taken the code from the demo program from the terminal program.
Could you guys create some sort of step-by-step guide on how to create a GUI?

Thank you! :smiley:


#2

Drawing is covered by the book but what is not covered is the WPF and I think this is what you are trying to use. For WPF, I recommend http://books.google.com/books?id=a6ezLevNBMUC&lpg=PP1&ots=OL1d8a4rBs&dq=expert%20micro%20framework&pg=PP1#v=onepage&q&f=false


#3

Adding a GUI might be a little tricky at first, but it’s pretty easy once you figure out how it works. It helps if you have a good understanding of how HTML and CSS work. Take a look at one of my project threads to see how I did it.


#4

thanks both of you. Will try to get into this today. First need to do some homework (file systems) and need to learn for a test (events and delegates). Since my brain has a total meltdown today, I do not know if I will make it today… :stuck_out_tongue:

Yes, I have good knowledge of HTML and CSS… :slight_smile:

Thanks again! I will post some results :wink:


#5

The implementation of WPF in .NET MF is different as it is implemented in normal framework.

You don’t need XAML for designing the windows. There is a good example in .NET MF samples which were installed with the SDK.

But Jan has written a small tool for XAML in MF

Here is the link:
http://informatix.miloush.net/microframework/Utilities/MicroXaml.aspx


#6

Very good (and easy) example, cypher, but how do you create buttons?

Stepped into your code, chris, as always looks fine… Checked out the display stuff like you said.

Basically this is all I need

	_Program = program;

			// Create a new window and apply the necessary properties
			this.Height = SystemMetrics.ScreenHeight;
			this.Width = SystemMetrics.ScreenWidth;
			this.Background = new SolidColorBrush(Colors.Black);

			// Create a new stack panel, set margins, and bind it to the window
			stack = new StackPanel(Orientation.Vertical);
			stack.SetMargin(0, (SystemMetrics.ScreenHeight / 2) - 50, 0, 0);
			this.Child = stack;

			// Create a new Text object for the time and add it to the stack
			timeText = new Text();
			timeText.Font = Resources.GetFont(Resources.FontResources.Arial32);
			timeText.TextContent = "Please Wait";
			timeText.HorizontalAlignment = Microsoft.SPOT.Presentation.HorizontalAlignment.Center;
			timeText.VerticalAlignment = Microsoft.SPOT.Presentation.VerticalAlignment.Center;
			timeText.ForeColor = Colors.Blue;
			stack.Children.Add(timeText);

			// Create a new Text object for the date and add it to the stack
			dateText = new Text();
			dateText.Font = Resources.GetFont(Resources.FontResources.Arial14);
			dateText.TextContent = "Please Wait";
			dateText.HorizontalAlignment = Microsoft.SPOT.Presentation.HorizontalAlignment.Center;
			dateText.VerticalAlignment = Microsoft.SPOT.Presentation.VerticalAlignment.Center;
			dateText.ForeColor = Colors.Yellow;
			stack.Children.Add(dateText);

			// Make the window visible 
			this.Visibility = Visibility.Visible;

Did not know this was all I needed?


#7

Ok, so this works fine. Now I tried to add a button… but I do not get it to work. Could someone provide me with a working C# code example? I’m getting pretty frustrated that I seem to be too dumb to get a damned button on the screen… :confused:


#8

Hi Foekie,

Sorry for the long response, I never saw that this topic had new posts.

AFAIK, there isn’t a button UIElement… At least by default. You can extend the UIElement class and make your own element, but past that you are on your own, as I haven’t done such a thing yet.

If you just want to be able to fire an event when you touch something, you can just attach a touchdown event to some other UIElement, like, for example, a Text object. This is what I do. Look in my SRC in the settings screen for the close text.

Please note you will also need to initialize touch before running the window. See program.cs in my SRC.


#9

Thanks Chris. FINALLY got it to work. It’s soooooooo easy… :confused: I feel ashamed, haha. :stuck_out_tongue:

For other users:

                private StackPanel stack;
		private Text closeText;
		private Program _Program;

		public Front(Program Program)
		{
			_Program = Program;

			// Create a new window and apply the necessary properties
			this.Height = SystemMetrics.ScreenHeight;
			this.Width = SystemMetrics.ScreenWidth;
			this.Background = new SolidColorBrush(Colors.Black);

			// Create a new stack panel, set margins, and bind it to the window
			stack = new StackPanel(Orientation.Vertical);
			stack.SetMargin(0, 0, 0, 0);
			this.Child = stack;
			this.Visibility = Visibility.Visible;

			// Close button
			closeText = new Text();
			closeText.Font = Resources.GetFont(Resources.FontResources.Arial14);
			closeText.TextContent = "Close";
			closeText.HorizontalAlignment =     Microsoft.SPOT.Presentation.HorizontalAlignment.Right;
			closeText.ForeColor = Colors.Red;
			closeText.TouchDown += close;
			stack.Children.Add(closeText);
		}
closeText.TouchDown += close;

#10

Sure, no prob :stuck_out_tongue:

Nice to hear you got it working. What kind of project are you working on?


#11

Since I am not yet famillar with this way of creating GUI’s, I’m working on this now. Also working on my part for the contest, but it’s not going as planned since the joystick events are single events and not multi events. You might be able to help me with that. You have a lot of experience.

Might be an idea that we share email addresses.

Here’s mine:
// removed

Just send me an email. Do not post it on the board. Will remove mine when I recieve yours.

Thanks again Chris and the rest for your time and patience. :wink:


#12

Just send you an email!