C# Tutorial

Index

1. Getting Started
2. Building the Form
3. Adding Code
4. Test

1. Getting Started

The source code for this tutorial is available on GitHub at: https://github.com/webifi-me/CsharpTutorial.git.
For this tutorial we used Microsoft Visual Studio Express 2017 (but most recent versions of Visual Studio should work), which can be downloaded for free from the Microsoft website. Open Visual Studio and start a new project. Select Windows Forms Application under Visual C# -> Windows. At the bottom, in the Name textbox enter: CsharpTutorial and select the location where you would like to store the project. Click OK to create a new Solution. Next we need to install the Webifi library. Go to Tools -> NuGet Package Manager -> Package Manager Console. In the Package Manager Console type:

Install-Package webifiLib

This should install the Webifi library and all the controls. There are two controls in this library that we can add to our Visual Studio Toolbox. On the left hand side open the Toolbox and right click in the General section of the Toolbox window. Select Choose Items… in the popup menu. In the Choose Toolbox Items window, on the right hand side click the Browse… button and then browse to the CsharpTutorial folder. Browse to packages -> webifiLib.x.x.x -> lib -> netxx -> Webifi.dll. There should be two new controls in the General section: WebifiControl and SerialPortControl:

See our C# Library Documentation for a detailed explanation of these controls.

2. Building the Form

Add the following controls to the form and change their details as follows:

At this point the form should look like this:

3. Adding Code

Add the following statement to the top of the file:

using WebifiLib;

Next add the following variables at the top of the form class:

private List<string> discoveredNames;
private List<int> discoveredSessionIDs;

These will hold the names and session IDs of all your connected devices after a discovery.

The first event handlers we need to complete is for webifiControl. Select webifiControl on the form and in the Properties window, click the Events icon. Double click each of the following events to create the event handlers:

• ConnectionStatus
• DataReceived
• Error

Complete the code in the event handlers for it to look as follows:

private void webifiControl_ConnectionStatus(object sender, bool connected)
{
    if (connected)
    {
        textBoxMessages.Text = "Connection successful";
        buttonSend.Enabled = true;
        buttonSendDiscovery.Enabled = true;
    }
    else
    {
        textBoxMessages.Text = "Disconnected";
        buttonSend.Enabled = false;
        buttonSendDiscovery.Enabled = false;
    }
}

private void webifiControl_DataReceived(object sender, byte[] data, string dataType, int fromSessionID)
{
    //check if received data is a discovery response
    if (dataType == "Discovery Response")
    {
        string discoveredName = Webifi.ConvertByteArrayToString(data);
        discoveredNames.Add(discoveredName);
        discoveredSessionIDs.Add(fromSessionID);
        textBoxMessages.Text = "Number of devices discovered: " + discoveredSessionIDs.Count.ToString();
    }
    else
    {
        //data received from another device
        string dataStr = Webifi.ConvertByteArrayToString(data);
        textBoxRec.Text = textBoxRec.Text + dataStr + "(Data type: " + dataType + ", from: " + fromSessionID.ToString() + ")";
    }
}

private void webifiControl_Error(object sender, string errorCode)
{
    textBoxMessages.Text = "Error " + errorCode + ": " + webifiControl.GetErrorCodeDescription(errorCode);
}

The next step is to add code to the events of all the buttons. Double click each of the following three buttons to create event handlers for them:

• buttonSend
• buttonSendDiscovery
• buttonClear

Complete the three event handlers so their code looks as follows:

private void buttonSend_Click(object sender, EventArgs e)
{
    WebifiDataToSend sendData = new WebifiDataToSend();
    //convert the string to a byte array for sending.
    sendData.dataForSending = Encoding.UTF8.GetBytes(textBoxSend.Text);
    sendData.dataType = "Test data";  //optional field
    webifiControl.SendData(sendData);
}

private void buttonSendDiscovery_Click(object sender, EventArgs e)
{
    discoveredNames = new List<string>();
    discoveredSessionIDs = new List<int>();
    webifiControl.SendDiscovery();
}

private void buttonClear_Click(object sender, EventArgs e)
{
    textBoxRec.Text = "";
}

4. Test

The last step is to test the program. Run the program and then click on the Start button. After a short delay the Messages text box should say “Connection Successful” if your connect details are correct. We need something to communicate with. We made a test page especially for this purpose. Go to our Test Page and enter your details in the connect name and password text boxes and click the Start button.

Enter “test123” into the Text to send textbox and click the Send button. The message should be displayed on the web page. Next click the Send data button on the web page and the message should be received in the test program. If both the test program and the web page connected successfully but no data can be sent between them then the most common cause is that the network names don’t match. If the devices are not on the same default networks then they cannot exchange data unless the data is specifically sent to the other one’s network. The network names can be set after connection by clicking the Set Network Names button.

Click on the Send Discovery button. After a short delay the Messages textbox should display: “Number of devices discovered: 1”. The names and session IDs will be stored in the two string lists. We hope this tutorial gives you enough information to get going using our C# library. For a detailed explanation of all the classes and controls please go to our C# Library Documentation.