Design of Graphical User Interface with MS Visual Studio C++ For Fubarino and Arduino
Generate control and see feedback from your embedded application with Windows PC graphical user interface
Presentation by Hampton Sailer
Hampton Sailer, Eatontown, NJ
• 30+ years electronics hardware design using 8, 16 and 32 bit microprocessors, DRAM, Flash, Ethernet, USB, TCP/IP networking. FPGA (Field Programmable Gate Array) design using Verilog language, Altera.
• Software design using, C, C++, C#, Java, Basic, Fortran, Pascal, assembly language.
• Website design using HTML, CSS, Javascsript, PHP, MySql, mobile design with Bootstrap, JQuery Mobile.
• Quite familiar with AC power wiring & construction.
• Theatrical stage lighting, sound systems.
Remote management of embedded application
USB
Comm port
Rain detector
SCADA (supervisory control and data acquisition) Wonderware intouch scada
Possible Applications • RC race cars, robotic control, model airplanes
• Music synthesizer control and sequencing
• Green house environment control
• Home security, fire and entry detection
• Home heating and cooling remote control
• Home lighting control, save energy
• Monitor sump pump operation
• Process RFID scans, track GPS location
Advantages of a GUI control
• Re-create any configuration of control panel with a software compile. No drilling metal panels and adding switches, LED, etc.
• Remote control of embedded application from a distance.
• Able to read data back, as well as send control commands. Store data for later analysis.
• Retain microcontroller for local closed loop control.
Graphical User Interface (GUI)
Create Graphical User Interface (GUI) With Buttons, labels, text boxes and many other graphical objects called “Controls” (in the MS vernacular).
windows+forms+controls+industrial+gauge
www.ucancode.net
softwarexplorer
Mathframe.com
opcfoundation
codeproject
Beau Gauge
2.53 Volts
Buttons
Labels Text Box
syncfusion radial-gauge
Prerequisites
• Windows PC (Mac possible with other IDE)
• Microsoft Visual Studio 2010, 2012 or 2015
• HW - Fubarino (or Arduino) with USB cable
• Arduino IDE version 1.65 (Fubarino)
• Knowledge of C language or Arduino sketch
• Some I/O stuff, a few switches and LEDs
Object Oriented Design in C# Do not be afraid of Object Oriented Design We do not need to create classes We only need to use system classes Serial port class is used on both ends In Visual Studio: Drag serialPort object from the Toolbox Drop object onto the Windows form Use property Inspector to update port Saves having to create serial Port Object Also see: system.io.ports.serialport
Woody Allen in “Sleeper”
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace ConsoleApplication1 { class myProgram { static void Main(string[] args) { int x = 1000; Console.WriteLine("Hello Fubar Labs User. " + x ); Console.WriteLine(DateTime.Now); Console.ReadLine(); //wait for user to close } } }
System library references
User namespace that your application’s class names will
belong to
Main, the program entry point
User program code
Serial port data over USB
serialPort1.Open(); serialPort1.PortName = L"COM4"; serialPort1.Read(byteArray, 0, 1); serialPort1.Write(byteArray, 0, 1); serialPort1.Close();
Serial.begin(9600); Serial.available(); Serial.read(); Serial.write(value);
We need to use serial port objects in order to communicate with each device
system.io.ports.serialport Arduino Serial Port Reference
Make up Serial data protocol
• We will use a “switch” statement in an embedded Sketch to parse the serial data
• Simple one byte protocol
• Reserve a code for each device you control
• Reserve a two codes for run / stop control
• Reserve a code to reset state of operation
• Reserve a few codes for Read Data command
• Write it down!!!
Device State Serial Data GUI control
Relay 1 On Data = 1 Button 1
Relay 1 Off Data = 2 Button 8
Relay 2 On Data = 3 Button 2
Relay 2 Off Data = 4 Button 7
Relay 3 On Data = 5 Button 3
Relay 3 Off Data = 6 Button 6
Relay 4 On Data = 7 Button 4
Relay 4 Off Data = 8 Button 5
All Relays On Data = 9 Button 12
All Relays Off Data = 10 Button 11
Run Sequence On Data = 11 Button 13
Run Sequence Off Data = 12 Button 14
Simple byte protocol from PC to Fubarino
Open() the Serial Port class after Initialize
namespace WindowsFormsApplication1
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
serialPort1.Open(); //add this code here
}
…
Look for this
Send data on serial port (a command to Fubarino)
var dataArray = new byte[] {1}; //create byte array
dataArray[0] = 13; //assign a value
serialPort1.Write(dataArray, 0, 1) //send data
Receive data
int recData; //create an integer of storage
recData = serialPort1.ReadByte(); //read data
textBox2.Text = recData.ToString(); //process data
Windows GUI side
Create a new project in Studio, Windows Form Application
Process at the Windows Side
• Start Visual Studio 2015 Community Editon
• Create a new C# Windows Form Application
• Stretch the User Form width 3 times wider.
• Open the Toolbox from left edge of Designer.
• Open the “Common controls” and drag buttons from toolbox to the Form area.
• Add serialPort object from Toolbox to form.
• Edit event handlers by double clicking controls
• After “InitializeComponent();”
add serialPort1.Open();
Inside the Form Designer Run
Object member access
• The C++ language uses an “indirect member operator” -> to access a property of a class member, or call a class method. In C# we use the dot construction for member access.
• In C++, array<unsigned char>^ byteArray = gcnew array<unsigned char>(1);
• In C++, serialPort1->Write(byteArray, 0, 1);
• In C#, var dataArray = new byte[] {1};
• In C# use, serialPort1.Write(dataArray, 0, 1);
Fubarino or Ardunio side communications
• arduino-control-using-a-windows-presentation-foundation
• http://playground.arduino.cc/Main/InterfacingWithSoftware
• http://www.ardulink.org/
Fubarino Sketch code Initialize the serial communication:
void setup() {
Serial.begin(9600);
byte recData;}
void loop() {
if (Serial.available()) {
recData = Serial.read();
switch (recData) {
case 1:
digitalWrite(relay1, HIGH); //relay1 on
break;
case 2:}
Favorite SW websites
• 2015 Community version of Visual Studio
• http://www.cplusplus.com/ - Tutorials C++
• http://www.functionx.com/ - Tutorials all
• https://msdn.microsoft.com/library/default.aspx
• http://www.tutorialspoint.com/cplusplus/
• http://www.academictutorials.com/cpp/
• http://stackoverflow.com/ - Program Help
• http://www.w3schools.com/ - Web Design
• https://www.thingiverse.com/ - 3D Models
http://www.cplusplus.com/forum/windows/162326/
Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty Project". Press Ctrl-Shift-A and create a Windows Form (under UI). Inside the CPP file that is created, paste this code, replacing anything in square brackets except [STAThread] with the appropriate names: #include "[FORM NAME].h"
using namespace System;
using namespace System::Windows::Forms;
[STAThread] //leave this as is
void main(array<String^>^ args) {
Application::EnableVisualStyles();
Application::SetCompatibleTextRenderingDefault(false);
[PROJECT NAME]::[FORM NAME] form;
Application::Run(%form);
}
Right click your project in the Solution Explorer and click Properties. Under Configuration Properties > Linker > Advanced, change Entry Point to "main" (without quotation marks). Under Configuration Properties > Linker > System, change SubSystem to "Windows (/SUBSYSTEM:WINDOWS)".