Category: Programming

Easy gauge chart with C3JS

When you produce data (in the field of industrial automation or IoT) you need to be able to visualize your data. I started out with the google charts library. It is really easy to use, but then I found out that you can only use this when connected to the internet. This could cause a potential problem when my customers are experiencing problems with their internet connection and you cannot show their data.

I was always charmed by D3 but compared to google charts it has a bigger learning curve. Then I found C3. C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don’t need to write D3 code any more :-).

Below shows a gauge chart which displays values instead of the ratio (%). The default example is working with %, this actually does the trick to convert to values: format: function(value) { return value; }

<!DOCTYPE html>
<html>
<head>
	<link href="/static/c3.css" rel="stylesheet" type="text/css">
	<script charset="utf-8" src="static/d3.v3.min.js">
	</script>
	<script src="/static/c3.min.js">
	</script>
	<title></title>
</head>
<body>
	<div id="chart"></div>
	<script>
	   var chart = c3.generate({
	   data: {
	       columns: [
	           ['data', 91.4]
	       ],
	       type: 'gauge',
	       onclick: function (d, i) { console.log("onclick", d, i); },
	       onmouseover: function (d, i) { console.log("onmouseover", d, i); },
	       onmouseout: function (d, i) { console.log("onmouseout", d, i); }
	   },
	   gauge: {
	       label: {
	           format: function(value) { return value; },
	//            show: false // to turn off the min/max labels.
	       },
	//    min: 0, // 0 is default, //can handle negative min e.g. vacuum / voltage / current flow / rate of change
	   max: 300, // 100 is default
	   units: ' V',
	//    width: 39 // for adjusting arc thickness
	   },
	   color: {
	       pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], // the three color levels for the percentage values.
	       threshold: {
	           unit: 'value', // percentage is default
	//            max: 200, // 100 is default
	           values: [30, 60, 200, 199]
	       }
	   },
	   size: {
	       height: 90
	   }
	});

	setTimeout(function () {
	   chart.load({
	       columns: [['data', 10]]
	   });
	}, 1000);

	setTimeout(function () {
	   chart.load({
	       columns: [['data', 50]]
	   });
	}, 2000);

	setTimeout(function () {
	   chart.load({
	       columns: [['data', 70]]
	   });
	}, 3000);

	setTimeout(function () {
	   chart.load({
	       columns: [['data', 299]]
	   });
	}, 4000);


	</script> 
</body>
</html>

None blocking bi serial communication between a microcontroller and SoC (e.g. RPI/Linkit/Yun)

If the yun bridge is not suffiecient for your, due to the fact that you would like to use bi directional communcation, you could disable the yun bridge and use the serial1 communcation between the MCU and SoC part of the Yun/Linkit. Or you want to setup a serial connection between an arduino and RPI, please see this post for the wiring.

For the software side you should install pyserial with: pip install pyserial

Please use the following code for bidirectional and none blocking communication.

The python part:

import serial
import time

s = serial.Serial("/dev/ttyS0", 57600, timeout=0.1)
s.write("Hello")
arduinodata = s.readline()

while (True):
    if (s.inWaiting()>0): #if incoming bytes are waiting to be read from$
                arduinodata = s.readline()
                print(arduinodata)

The C code:

String incoming_data;

void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600); 
  Serial1.begin(57600);
}

void loop() {
  // put your main code here, to run repeatedly:
  incoming_data  = Serial1.readStringUntil('\n');
  
  if(incoming_data!="") { 
    
    if(incoming_data=="Hello") {
      Serial1.println("World");
      Serial.println("World");
    }
  }
  Serial1.println("Writing in none blocking mode");
  delay(50);
  
}

I would like to thank Michael Kirsch for above code.

Windows versus Linux for Netbeans

This article is an old story about two different camps, the Linux or the Windows side. To be honest I find that windows 7 suites my needs and is always easy to work with, where with Linux you need sometime some more configuration effort (time) to get things working.

Nevertheless, I started programming with Java EE 7 and Glassfish/Payara and have chosen Netbeans as IDE. The startup under windows took quite some while and after watching some youtube tutorials I thought that the startup speed could be faster. So I decided to install Ubuntu 14.04 LTS on the same machine as dual boot.

Version and conditions:
– Netbeans 8.1
– Windows 7 with all patches/SP (waited till the OS loaded everything)
– Ubuntu 14.04 LTS (waited till the OS loaded everything)
– All projects closed in Netbeans, only startup time was measured

Windows:
First startup: 49,48 s
Second startup: 9,76 s (first started and closed outlook and chrome)

Ubuntu:
First startup: 23,46 s
Second startup: 7,43 (first started and closed thunderbird and chrome)

It seems that Ubuntu will be my preferred development environment ;-). Also the responsiveness with Ubuntu is faster and the startup of Pyara server is faster as well.