WIXLIB

Design of Graphical User Interfacewith MS Visual Studio C For Fubarino and ArduinoPresentation by Hampton SailerGenerate control and see feedbackfrom your embedded application withWindows PC graphical user interface

Hampton Sailer, Eatontown, NJ 30 years electronics hardware design using 8, 16and 32 bit microprocessors, DRAM, Flash, Ethernet,USB, TCP/IP networking. FPGA (Field ProgrammableGate 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 ofembedded applicationRain detectorUSBComm portWonderware intouch scadaSCADA (supervisory control and data acquisition)

Possible Applications RC race cars, robotic control, model airplanesMusic synthesizer control and sequencingGreen house environment controlHome security, fire and entry detectionHome heating and cooling remote controlHome lighting control, save energyMonitor sump pump operationProcess RFID scans, track GPS location

Advantages of a GUI control Re-create any configuration of control panel with a softwarecompile. 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)softwarexplorercodeprojectButtonsLabels2.53 VoltsCreate Graphical User Interface (GUI)With Buttons, labels, text boxes andmany other graphical objects called“Controls” (in the MS vernacular).windows forms controls industrial gaugeText Boxopcfoundationwww.ucancode.netMathframe.comBeau Gaugesyncfusion radial-gauge

Prerequisites Windows PC (Mac possible with other IDE)Microsoft Visual Studio 2010, 2012 or 2015HW - Fubarino (or Arduino) with USB cableArduino IDE version 1.65 (Fubarino)Knowledge of C language or Arduino sketchSome I/O stuff, a few switches and LEDs

Object Oriented Design in C#Do not be afraid of Object Oriented DesignWe do not need to create classesWe only need to use system classesSerial port class is used on both endsIn Visual Studio:Drag serialPort object from the ToolboxDrop object onto the Windows formUse property Inspector to update portSaves having to create serial Port ObjectWoody Allen in “Sleeper”Also see:system.io.ports.serialport

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;System library referencesUser namespace that yourapplication’s class names willbelong tonamespace ConsoleApplication1{class myProgram{Main, the programstatic void Main(string[] args)entry point{int x 1000;Console.WriteLine("Hello Fubar Labs User. " x );User program ne();//wait for user to close}}}

Serial port data over USBserialPort1.Open();serialPort1.PortName L"COM4";serialPort1.Read(byteArray, 0, 1);serialPort1.Write(byteArray, 0, no Serial Port Referencesystem.io.ports.serialportWe need to use serial port objects in order to communicate with each device

Make up Serial data protocol We will use a “switch” statement in anembedded 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!!!

Simple byte protocol from PC to FubarinoDeviceStateSerial DataGUI controlRelay 1OnData 1Button 1Relay 1OffData 2Button 8Relay 2OnData 3Button 2Relay 2OffData 4Button 7Relay 3OnData 5Button 3Relay 3OffData 6Button 6Relay 4OnData 7Button 4Relay 4OffData 8Button 5All RelaysOnData 9Button 12All RelaysOffData 10Button 11Run Sequence OnData 11Button 13Run Sequence OffData 12Button 14

Open() the Serial Port class after Initializenamespace WindowsFormsApplication1{public partial class Form1 : Form{public Form1()Look for d this code here}

Windows GUI sideSend data on serial port (a command to Fubarino)var dataArray new byte[] {1}; //create byte arraydataArray[0] 13;//assign a valueserialPort1.Write(dataArray, 0, 1)//send dataReceive dataint recData;//create an integer of storagerecData serialPort1.ReadByte();//read datatextBox2.Text recData.ToString(); //process data

Create a new project in Studio, Windows Form Application

Process at the Windows Side Start Visual Studio 2015 Community EditonCreate a new C# Windows Form ApplicationStretch the User Form width 3 times wider.Open the Toolbox from left edge of Designer.Open the “Common controls” and dragbuttons 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 DesignerRun

Object member access The C language uses an “indirect memberoperator” - to access a property of a classmember, or call a class method. In C# we usethe 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 sidecommunications tion oftware http://www.ardulink.org/

Fubarino Sketch codeInitialize 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 onbreak;case 2:}

Favorite SW websites 2015 Community version of Visual Studiohttp://www.cplusplus.com/ - Tutorials C http://www.functionx.com/ - Tutorials m/ - Program Helphttp://www.w3schools.com/ - Web Designhttps://www.thingiverse.com/ - 3D Models

te 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 squarebrackets except [STAThread] with the appropriate names:#include "[FORM NAME].h"using namespace System;using namespace System::Windows::Forms;[STAThread] //leave this as isvoid main(array String args) tCompatibleTextRenderingDefault(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)".

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 appropriat