design graphical of user interface with visual studio c++ ... graphical of user interface...
TRANSCRIPT
![Page 1: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/1.jpg)
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
![Page 2: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/2.jpg)
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.
![Page 3: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/3.jpg)
Remote management of embedded application
USB
Comm port
Rain detector
SCADA (supervisory control and data acquisition) Wonderware intouch scada
![Page 4: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/4.jpg)
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
![Page 5: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/5.jpg)
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.
![Page 6: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/6.jpg)
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
![Page 7: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/7.jpg)
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
![Page 8: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/8.jpg)
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”
![Page 9: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/9.jpg)
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
![Page 10: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/10.jpg)
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
![Page 11: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/11.jpg)
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!!!
![Page 12: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/12.jpg)
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
![Page 13: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/13.jpg)
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
![Page 14: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/14.jpg)
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
![Page 15: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/15.jpg)
Create a new project in Studio, Windows Form Application
![Page 16: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/16.jpg)
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();
![Page 17: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/17.jpg)
Inside the Form Designer Run
![Page 18: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/18.jpg)
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);
![Page 19: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/19.jpg)
Fubarino or Ardunio side communications
• arduino-control-using-a-windows-presentation-foundation
• http://playground.arduino.cc/Main/InterfacingWithSoftware
• http://www.ardulink.org/
![Page 20: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/20.jpg)
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:}
![Page 21: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/21.jpg)
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
![Page 22: Design Graphical of User Interface with Visual Studio C++ ... Graphical of User Interface with... · Create an empty C++ CLR project and add a Windows Forms to it. Make a "CLR Empty](https://reader030.vdocuments.site/reader030/viewer/2022020315/5b1c8d4e7f8b9a9e388b8145/html5/thumbnails/22.jpg)
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)".