Archive for the ‘Uncategorized’ Category

HTML Codes – ASCII Special Characters

12. June 2011

No Comments »

I need this often, so I am going to mirror it on my blog. Credits to Yellowpipe.com

(more…)

HTML5 Input

1. August 2010

2 Comments »

Lets be honest, HTML5 is the new buzz word. Every blog, tutorial, tweet, article, or post I read contains some reference to HTML5. It’s almost as bad as presidential campaigns during election year (well… maybe not that bad, but you get the idea!) However, unlike the latter, I am fully confident HTML5 will live up its expectations. Why is HTML5 so special? Well, you know all those hoops you’ve had to jump through and JavaScript libraries you’ve had to include? Kiss them goodbye! Let us take a look at some of the new features HTML5 provides with regard to input types.

Placeholder

[code lang="html"]
[/code]

Range

[code lang="html"]
[/code]

Number

[code lang="html"]
[/code]

Search

[code lang="html"]
[/code]

Date

[code lang="html"]
[/code]

Month

[code lang="html"]
[/code]

Week

[code lang="html"]
[/code]

Time

[code lang="html"]
[/code]

Datetime

[code lang="html"]
[/code]

Datetime-Local

[code lang="html"]
[/code]

Currently, desktop browsers treat the following types as plain text. However, Safari on my iPhone optimizes the keyboard layout.

Email

[code lang="html"]
[/code]

URL

[code lang="html"]
[/code]

Tel

[code lang="html"]
[/code]

The next type is built into the HTML5 specification, but I could not find any browser that takes advantage of it.

Color

[code lang="html"]
[/code]

Interacting with the Arduino with C#

3. June 2010

6 Comments »

There are times where you may want to build a nice user interface for your Arduino program to monitor input/output. In this tutorial, I will show you how to use C# to send data to and receive data from the Arduino. This tutorial assumes basic knowledge of Arduino programming and C#. For testing purposes, we will create a vary basic “echo” program that takes an input and outputs the input.

[code lang="cpp"]void setup()
{
Serial.begin(9600);
}

void loop()
{
while(Serial.available()) {
Serial.write(Serial.read());
}
}[/code]

While there is data available, we read it, then write it to the output. Now open Visual Studio and create a new Windows Forms Application. I will name it ArduinoSerial.

From your toolbox, add two Label’s, two ComboBox’s, and a SerialPort. I have named them lblCOM, lblBaud, cboPorts, cboBaud, and serialPort1 respectively. ComboBox’s cboPorts and cboBaud which will allow the user to select which COM port the Arduino is using and the correct Baud rate to use.

To get the available serial ports, use the GetPortNames() method from System.IO.Ports.SerialPort. You can then add this array to cboPorts.

[code lang="cpp"]string[] serialPorts = System.IO.Ports.SerialPort.GetPortNames();
cboPorts.Items.AddRange(serialPorts);[/code]

For the Baud rate ComboBox I am simply going to enumerate the values.
[code lang="cpp"]cboBaud.Items.Add(2400);
cboBaud.Items.Add(4800);
cboBaud.Items.Add(9600);
cboBaud.Items.Add(14400);
cboBaud.Items.Add(19200);
cboBaud.Items.Add(28800);
cboBaud.Items.Add(38400);
cboBaud.Items.Add(57600);
cboBaud.Items.Add(115200);[/code]
The final constructor takes the following form:
[code lang="cpp"]public ArduinoSerial()
{
InitializeComponent();

string[] serialPorts = System.IO.Ports.SerialPort.GetPortNames();
cboPorts.Items.AddRange(serialPorts);

cboBaud.Items.Add(2400);
cboBaud.Items.Add(4800);
cboBaud.Items.Add(9600);
cboBaud.Items.Add(14400);
cboBaud.Items.Add(19200);
cboBaud.Items.Add(28800);
cboBaud.Items.Add(38400);
cboBaud.Items.Add(57600);
cboBaud.Items.Add(115200);

cboPorts.SelectedIndex = 0;
cboBaud.SelectedIndex = 2;
}[/code]

Next we are going to create a button called btnStart. This button will initiate the connection to the Arduino. In the code for the buttons click event, we first need to get the port from cboPorts. Then are are going to assign this value to the PortName attribute of the SerialPort object.
[code lang="cpp"]serialPort1.PortName = cboPorts.SelectedItem.ToString();[/code]
We are going to do the same for the BaudRate attribute.
[code lang="cpp"]serialPort1.BaudRate = Convert.ToInt32(cboBaud.SelectedItem.ToString());[/code]
Then we are going to open the connection (and toggle the Start/Stop buttons)
[code lang="cpp"]if (!serialPort1.IsOpen)
{
btnStart.Enabled = false;
btnStop.Enabled = true;
serialPort1.Open();
}[/code]
In the btnStop click event is very similar to the above.
[code lang="cpp"]private void btnStop_Click(object sender, EventArgs e)
{
if (serialPort1.IsOpen)
{
btnStart.Enabled = true;
btnStop.Enabled = false;
serialPort1.Close();
}
}[/code]
Now we can create a TextBox and a Button called txtInput and btnSend. These two controls will be responsible for sending data to the Arduino. In the btnSend click event add the following code.
[code lang="cpp"]if (!serialPort1.IsOpen) return;
serialPort1.Write(txtInput.Text + "\n");[/code]
The rest of the magic takes place in the SerialPorts DataReceived event. To get the data from the serial port we simply call the ReadExisting() function on the SerialPort object. Then we just need to append that text to a text box. However, we must make this thread safe to prevent any dead locks.

[code lang="cpp"]/**
* http://msdn.microsoft.com/en-us/library/ms171728(VS.80).aspx
*/
delegate void SetTextCallback(string text);
private void SetText(string text)
{
if (this.txtOutput.InvokeRequired)
{
SetTextCallback d = new SetTextCallback(SetText);
this.BeginInvoke(d, new object[] { text });
}
else
{
txtOutput.AppendText(text);
}
}

private void serialPort1_DataReceived(object sender, System.IO.Ports.SerialDataReceivedEventArgs e)
{
try
{
SetText(serialPort1.ReadExisting());
}

catch (Exception ex)
{
SetText(ex.ToString());
}

}[/code]