{"id":150,"date":"2022-02-03T16:56:56","date_gmt":"2022-02-03T16:56:56","guid":{"rendered":"https:\/\/www.bleuio.com\/blog\/?p=150"},"modified":"2022-07-01T10:36:05","modified_gmt":"2022-07-01T10:36:05","slug":"plotting-real-time-graph-from-bluetooth-device-using-c","status":"publish","type":"post","link":"https:\/\/www.bleuio.com\/blog\/plotting-real-time-graph-from-bluetooth-device-using-c\/","title":{"rendered":"Plotting real-time graph from Bluetooth device using C#"},"content":{"rendered":"\n

Bluetooth Low Energy (BLE)<\/strong> is a low power wireless technology used to connect devices. It is a popular communication method, especially in the Internet of Things era. Several devices around the house have a built-in Bluetooth transceiver, and most of them provide useful capabilities to automate jobs. This technology is widely used in the healthcare, fitness, beacons, security, and home entertainment industries. For that reason, it is really interesting to create a desktop application using C# that plot a real-time graph of values from HibouAir – Air Quality Monitor<\/a> using BleuIO.<\/p>\n\n\n\n

For this project, Bluetooth Low Energy USB dongle<\/a> called BlueIO <\/strong>is used, which will act as a central device to retrieve data. HibouAir<\/strong> will serve as a peripheral device to transmit the data. The is simple to use and can be used for other purposes such as showing real-time air quality data; temperate, humidity, pressure, particle matters etc.<\/p>\n\n\n\n

Let\u2019s start<\/strong><\/p>\n\n\n\n

First, let\u2019s create a new project in visual studio and select C# windows form application from the list.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Choose a suitable name for your project.<\/p>\n\n\n\n

Once the project is created, we will see a blank form screen where we will add buttons and labels to communicate with BleuIO graphically and show plot real-time values from HibouAir.<\/p>\n\n\n\n

The application will connect to the BleuIO dongle to its given COM port from the script. You can change the port easily by going to line number 19.<\/p>\n\n\n\n

We will have a disconnect button to disconnect BleuIO from the COM port.<\/p>\n\n\n\n

By clicking on the Get data button, the script will connect to The BleuIO dongle and put it on DUAL mode. Then it will look for scanned data and filter out the device advertised information that we are looking for. You can change the scanForDevice <\/strong>value on line number 24.<\/strong><\/p>\n\n\n\n

Once it starts fetching data, it will go through a parser that decodes the advertised data and returns a meaningful number. <\/p>\n\n\n\n

In this script, we are only showing how to plot Ambient Light Sensor (ALS) value in lux and plot it on the chart.<\/p>\n\n\n\n

The form will look like this.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The .cs file associated with this will have the following code.
Source code is available at https:\/\/github.com\/smart-sensor-devices-ab\/bluetooth_realtimedata_csharp<\/a><\/p>\n\n\n\n

using System;\nusing System.Windows.Forms;\nusing System.IO.Ports;\nusing LiveCharts;\nusing LiveCharts.Configurations;\nusing LiveCharts.Wpf;\nusing System.Threading;\nusing System.Collections;\nusing System.Linq;\nusing System.Text;\nusing Timer = System.Windows.Forms.Timer;\n\nnamespace ConstantChanges\n{\n    public partial class ConstantChanges : Form\n    {\n        \/\/Connect to Serial port\n        \/\/Replace port number to your comport\n        SerialPort mySerialPort = new SerialPort(\"COM7\", 57600, Parity.None, 8, StopBits.One);\n        \/\/string ScannedData = \"\";\n        string ScannedData = \"\";\n        bool clicked = false;\n\n        public string scanForDevice = \"5B07050345840D\";\n        int chartYval ;\n\n        public String ParseSensorData(string input)\n        {\n            int counter = 17;\n            int pressureData = Convert.ToInt32(input[counter + 9].ToString() + input[counter + 10].ToString() + input[counter + 7].ToString() + input[counter + 8].ToString(), 16);\n            chartYval = pressureData;\n\n            return pressureData.ToString();\n\n        }\n        public ConstantChanges()\n        {\n            InitializeComponent();\n            mySerialPort.DataReceived += new SerialDataReceivedEventHandler(mySerialPort_DataReceived);\n            mySerialPort.Open();\n            ArrayList device = new ArrayList();\n            \/\/To handle live data easily, in this case we built a specialized type\n            \/\/the MeasureModel class, it only contains 2 properties\n            \/\/DateTime and Value\n            \/\/We need to configure LiveCharts to handle MeasureModel class\n            \/\/The next code configures MEasureModel  globally, this means\n            \/\/that livecharts learns to plot MeasureModel and will use this config every time\n            \/\/a ChartValues instance uses this type.\n            \/\/this code ideally should only run once, when application starts is reccomended.\n            \/\/you can configure series in many ways, learn more at http:\/\/lvcharts.net\/App\/examples\/v1\/wpf\/Types%20and%20Configuration\n\n            var mapper = Mappers.Xy<MeasureModel>()\n                .X(model => model.DateTime.Ticks)   \/\/use DateTime.Ticks as X\n                .Y(model => model.Value);           \/\/use the value property as Y\n\n            \/\/lets save the mapper globally.\n            Charting.For<MeasureModel>(mapper);\n\n            \/\/the ChartValues property will store our values array\n            ChartValues = new ChartValues<MeasureModel>();\n            cartesianChart1.Series = new SeriesCollection\n            {\n                new LineSeries\n                {\n                    Values = ChartValues,\n                    PointGeometrySize = 18,\n                    StrokeThickness = 4\n                }\n            };\n            cartesianChart1.AxisX.Add(new Axis\n            {\n                DisableAnimations = true,\n                LabelFormatter = value => new System.DateTime((long)value).ToString(\"mm:ss\"),\n                Separator = new Separator\n                {\n                    Step = TimeSpan.FromSeconds(1).Ticks\n                }\n            });\n\n            SetAxisLimits(System.DateTime.Now);\n\n            \/\/The next code simulates data changes every 500 ms\n            Timer = new Timer\n            {\n                Interval = 3000\n            };\n            Timer.Tick += TimerOnTick;\n            R = new Random();\n            Timer.Start();\n        }\n\n        \/\/Store response from the dongle\n        private void mySerialPort_DataReceived(object sender, SerialDataReceivedEventArgs e)\n        {\n\n            SerialPort sp = (SerialPort)sender;\n            string s = sp.ReadExisting();\n\n            \/\/get advertised data\n            if (s.Contains(\"[ADV]\"))\n            {\n                ScannedData = s;\n            }\n\n        }\n\n        public ChartValues<MeasureModel> ChartValues { get; set; }\n        public Timer Timer { get; set; }\n        public Random R { get; set; }\n\n        private void SetAxisLimits(System.DateTime now)\n        {\n            cartesianChart1.AxisX[0].MaxValue = now.Ticks + TimeSpan.FromSeconds(1).Ticks; \/\/ lets force the axis to be 100ms ahead\n            cartesianChart1.AxisX[0].MinValue = now.Ticks - TimeSpan.FromSeconds(8).Ticks; \/\/we only care about the last 8 seconds\n        }\n\n        private void TimerOnTick(object sender, EventArgs eventArgs)\n        {\n            var now = System.DateTime.Now;\n            if(clicked == true) {\n                getBleData();\n            }\n            \n            ChartValues.Add(new MeasureModel\n            {\n                DateTime = now,\n                \/\/Value = R.Next(0, 10)\n                Value = chartYval\n            });\n\n            SetAxisLimits(now);            \n            \/\/lets only use the last 30 values\n            if (ChartValues.Count > 30) ChartValues.RemoveAt(0);\n        }\n\n        private void label1_Click(object sender, EventArgs e)\n        {\n\n        }\n\n        private void cartesianChart1_ChildChanged(object sender, System.Windows.Forms.Integration.ChildChangedEventArgs e)\n        {\n\n        }\n\n        \/\/Get data every 3 seconds\n        private void getBleData()\n        {\n            var inputByte = new byte[] { 13 };\n            byte[] dualCmd = Encoding.UTF8.GetBytes(\"AT+DUAL\");\n            dualCmd = dualCmd.Concat(inputByte).ToArray();\n            mySerialPort.Write(dualCmd, 0, dualCmd.Length);\n            Thread.Sleep(500);\n            byte[] gapScanCmd = Encoding.UTF8.GetBytes(\"AT+FINDSCANDATA=\"+ scanForDevice);\n            gapScanCmd = gapScanCmd.Concat(inputByte).ToArray();\n            mySerialPort.Write(gapScanCmd, 0, gapScanCmd.Length);\n            Thread.Sleep(1200);\n            byte[] bytes = Encoding.UTF8.GetBytes(\"\\u0003\");\n            bytes = bytes.Concat(inputByte).ToArray();\n            mySerialPort.Write(bytes, 0, bytes.Length);\n\n            if (ScannedData != null)\n            {\n                sensor_op.Text = ScannedData;\n                string lastWord = ScannedData.Split(' ').Last();\n                if(lastWord !=null) {\n                    var toPrint = ParseSensorData(lastWord);\n                    sensor_op.Text = \"Current Value :\" + toPrint;\n                }\n                \n                \n            }\n        }\n\n\n        private void btnGetData_Click(object sender, EventArgs e)\n        {\n            var inputByte = new byte[] { 13 };\n            byte[] dualCmd = Encoding.UTF8.GetBytes(\"AT+DUAL\");\n            dualCmd = dualCmd.Concat(inputByte).ToArray();\n            mySerialPort.Write(dualCmd, 0, dualCmd.Length);\n            Thread.Sleep(500);\n            byte[] gapScanCmd = Encoding.UTF8.GetBytes(\"AT+FINDSCANDATA=\"+ scanForDevice);\n            gapScanCmd = gapScanCmd.Concat(inputByte).ToArray();\n            mySerialPort.Write(gapScanCmd, 0, gapScanCmd.Length);\n            Thread.Sleep(1200);\n            byte[] bytes = Encoding.UTF8.GetBytes(\"\\u0003\");\n            bytes = bytes.Concat(inputByte).ToArray();\n            mySerialPort.Write(bytes, 0, bytes.Length);\n\n            if (ScannedData!=null) {\n                sensor_op.Text = ScannedData;\n                string lastWord = ScannedData.Split(' ').Last();\n                if (lastWord != null)\n                {\n                    var toPrint = ParseSensorData(lastWord);\n                    sensor_op.Text = \"Current Value :\"+toPrint;\n                }\n                clicked = true;\n            }  \n            \/\/Show Chart\n            cartesianChart1.Visible = true;\n        }\n    }\n}<\/code><\/pre>\n\n\n\n
As you can notice, I wrote COM7 to connect to the serial port because the BleuIO device on my computer is connected to COM7.<\/p>\n\n\n\n
You can check your COM port from the device manager. <\/p>\n\n\n\n
Also, scanForDevice <\/strong>value is 5B07050345840D where 45840D is the device id. <\/p>\n\n\n\n
Let\u2019s run the project and click on Get Data. You will notice a new light value is plotting in every three seconds.<\/p>\n\n\n\n
Here is a demo of this sample application. <\/p>\n\n\n\n
\n