Posts

=================================

Collection of OpenWRT Tips | DzQ39 |

Here is a list of OpenWRT tips which I find useful.

Network

Network configuration
https://wiki.openwrt.org/doc/uci/network

Build System

OpenWrt build system – Installation
https://wiki.openwrt.org/doc/howto/buildroot.exigence

OpenWrt build system – Usage
https://wiki.openwrt.org/doc/howto/build

Building your own package for OpenWRT
https://vivekian2.wordpress.com/2007/03/28/building-your-own-package-for-openwrt/

How to Build a Single Package
https://wiki.openwrt.org/doc/howtobuild/single.package

OPKG

Where to get packages
https://wiki.openwrt.org/doc/packages



Exchange Files Between OpenWRT and Windows PC

SFTP server
https://wiki.openwrt.org/doc/howto/sftp.server

WinSCP Downloads
https://winscp.net/eng/download.php

File Download

wget vs curl: How to Download Files Using wget and curl
https://adamscheller.com/systems-administration/rtl8192cu-fix-wifi/

Check Kernel Version

How To Check the Kernel Version in Linux / Ubuntu / CentOS
https://www.liquidweb.com/kb/how-to-check-the-kernel-version-in-linux-ubuntu-centos/

Search for directory or file

find  / -name "filename"

References:

LuCI

OpenWrt luci web interface logo picture and modify strings

Adding new elements to LuCI
https://wiki.openwrt.org/doc/devel/luci

Mounting USB Drive

OpenWRT — Setting Up USB Storage Support
https://medium.com/openwrt-iot/lede-openwrt-setting-up-usb-storage-support-adec9c0d484e

Safely Shutdown OpenWRT

How to shut down openwrt without corrupting file systems?
https://superuser.com/questions/694297/how-to-shut-down-openwrt-without-corrupting-file-systems

Misc.

OpenWrt, ash alias profile
http://www.cesareriva.com/openwrt-shell-alias/

Some binaries from additional packages return "not found" (wrong libc link possible)
https://dev.openwrt.org/ticket/19893
at No comments:
Labels: ,

OpenWrt - How to enable support for external USB Drive | DzQ39 |

This is a quick summary on how to enable support for external USB Drive.

1st - Follow the steps in https://medium.com/openwrt-iot/lede-openwrt-setting-up-usb-storage-support-adec9c0d484e to install the needed packages.


2nd - Use dmesg | grep sd to check the result.


3rd - Use the commands below to create a mounting point and  mount the USB drive to it.

root@mylinkit:/Media# mkdir flashdrive
root@mylinkit:/Media# mount /dev/sda /Media/flashdrive

4th - Check the content of the USB drive.


To safely remove the USB drive.

Use the command below to unmount the USB drive.

root@mylinkit:/Media/flashdrive# umount /dev/sda


Reference:

OpenWRT — Setting Up USB Storage Support
https://medium.com/openwrt-iot/lede-openwrt-setting-up-usb-storage-support-adec9c0d484e

How do I access an external drive mounted on a machine on my own network?
http://askubuntu.com/questions/50104/how-do-i-access-an-external-drive-mounted-on-a-machine-on-my-own-network

How to umount a USB drive?
http://unix.stackexchange.com/questions/45820/how-to-umount-a-usb-drive

Linux (Ubuntu): safely remove USB flash disk via command line [closed]
http://stackoverflow.com/questions/13224509/linux-ubuntu-safely-remove-usb-flash-disk-via-command-line

OpenWrt Wiki - USB Storage
http://webcache.googleusercontent.com/search?q=cache:swXK9O6jidEJ:https://wiki.openwrt.org/doc/howto/usb.storage&num=1&hl=en&gl=tw&strip=1&vwsrc=0
at No comments:
Labels: ,

How to create line chart with 2 y-axis using chart.js | DzQ39 |

This is a quick post about how to create line chart with 2 y-axis using chart.js.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
    <!-- For latest CDN version of Chart.js, visit https://cdnjs.com/libraries/Chart.js -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
</head>
<body>
    
    <canvas id="myChart" width="400" height="250"></canvas>

    <script>
        var ctx = document.getElementById("myChart").getContext("2d");
        var myChart = new Chart(ctx, {
          type: "line",
          data: {
            "labels": [
              "01.12.2015",
              "02.12.2015",
              "03.12.2015",
              "04.12.2015",
              "30.12.2015"
            ],
            "datasets": [{
              "label": "DEA Burrweiler Druck Abgabe",
              "fill": "false",
              yAxisID: "y-axis-0",
              "data": [
                8.7913,
                8.6985,
                8.7914,
                8.7948,
                8.7882
              ]
            }, {
              "label": "DEA Burrweiler Druck Zulauf",
              "fill": "false",
              yAxisID: "y-axis-0",
              "data": [
                4.5997,
                4.5526,
                4.5915,
                4.5937,
                4.5795
              ]
            }, {
              "label": "DMS Flemlingen Durchfluss",
              "fill": "false",
              yAxisID: "y-axis-1",
              "data": [
                1.9588,
                2.4226,
                2.1392,
                2.223,
                1.9048
              ]
            }]
          },
          options: {
            scales: {
              yAxes: [{
                position: "left",
                "id": "y-axis-0"
              }, {
                position: "right",
                "id": "y-axis-1"
              }]
            }
          }
        });
    </script>

</body>
</html>

Result


To disable the responsive feature, add "responsive: false" as shown below.


References:

Chart.js - line chart with two yAxis
http://stackoverflow.com/questions/37028536/chart-js-line-chart-with-two-yaxis

http://jsfiddle.net/dahd27d7/
at No comments:
Labels: ,

How to sort multi-dimensional arrays in JavaScript | DzQ39 |

This is a continuation of my previous post on How to create a line chart using Chart.js and the data parsed from a CSV string using Papa Parse. In the previous post, the x-axis is not in ascending order (see below photo). This post will address this issue by sorting the data in the desired order before making the chart.




Code

Note, the part highlighted in yellow is the newly added part that does the sorting.


  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
    <!-- Load papaparse.js -->
    <script src="papaparse.min.js"></script>
    
    <!-- For latest CDN version of Chart.js, visit https://cdnjs.com/libraries/Chart.js -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
</head>
<body>
    
    <canvas id="myChart" width="400" height="250"></canvas>

    <script>
        //Parse the data.
        function parseData() {
            csv = "Date,Time,Station_id,Ambient Humidity,Ambient Temperature,Light,Probe Temperature,DI1,DI2" + "\n" +
                  "2017-03-23,16:37:38,1,70.10,22.10,859,22.50,0,0" + "\n" +
                  "2017-03-23,16:42:51,1,70.50,22.30,820,21.88,0,0" + "\n" +
                  "2017-03-23,16:32:25,1,69.90,22.10,848,22.38,0,0" + "\n" +
                  "2017-03-23,16:27:12,1,70.30,22.10,866,22.25,0,0" + "\n" +
                  "2017-03-23,14:21:11,1,71.40,22.60,577,22.38,0,0" + "\n" +
                  "2017-03-23,13:02:45,1,73.10,22.60,558,22.31,0,0" + "\n" +
                  "2017-03-23,13:34:02,1,74.00,22.60,577,22.38,0,0" + "\n" +
                  "2017-03-23,12:20:59,1,75.20,22.50,435,22.25,0,0" + "\n" +
                  "2017-03-23,11:49:39,1,76.00,22.60,572,22.31,0,0";
            var parsed_data = Papa.parse(csv);
            //console.log(parsed_data);
            createGraph(parsed_data.data);
        }

        function createGraph(pd) {
            
            // Check the length of the data array
            //console.log(pd.length);
            
            pd.sort(function (a, b) {
                //return a[1] - b[1];
                
                // The code below works. But hardwire the date is not needed because pd[0] contains the date data.
                //return new Date('1970/01/01 ' + a[1]) - new Date('1970/01/01 ' + b[1]);
                
                // The code below works by combining pd[0] and pd[1] (don't miss the space in between).
                return new Date(a[0]+ " " + a[1]) - new Date(b[0]+ " " + b[1]);
            });
                        
            var canvas = document.getElementById('myChart');
            
            // Buffers for storing the selected array data for making chart
            var time = [];
            var light = [];
            
            for (var i = 1; i < pd.length; i++) {
                //console.log(pd[i][5]);
                time.push(pd[i][1]);            // Time Stamp
                light.push(pd[i][5]);           // Light Sensor Reading
            }
            
            // Double check the contents of the 2 arrays
            console.log(time);
            console.log(light);
            
            var data = {
            //labels: ["January", "February", "March", "April", "May", "June", "July"],
            labels: time,                       // X-Axis
            datasets: [
                {
                    label: "My First dataset",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(75,192,192,0.4)",
                    borderColor: "rgba(75,192,192,1)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgba(75,192,192,1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 5,
                    pointHitRadius: 10,
                    //data: [65, 59, 80, 0, 56, 55, 40],
                    data: light,                // Y-Axis
                }
            ]
            };

            var option = {
                showLines: true,
                responsive: false
            };
            var myLineChart = Chart.Line(canvas,{
                data:data,
                options:option
            });
        }

        parseData();

    </script>

</body>
</html>


Result

Note, the x-axis is now in ascending order.


Reference:

Sort string array containing time in format '09:00 AM'?
http://stackoverflow.com/questions/17064603/sort-string-array-containing-time-in-format-0900-am




at No comments:
Labels: , , ,

How to create a line chart using Chart.js and the data parsed from a CSV string using Papa Parse | DzQ39 |

This is a quick summary about how to create a line chart using Chart.js and the data parsed from a CSV string using Papa Parse.


Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html>
<head>
    <!-- Load papaparse.js -->
    <script src="papaparse.min.js"></script>
    
    <!-- For latest CDN version of Chart.js, visit https://cdnjs.com/libraries/Chart.js -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
</head>
<body>
    
    <canvas id="myChart" width="400" height="250"></canvas>

    <script>
        //Parse the data.
        function parseData() {
            csv = "Date,Time,Station_id,Ambient Humidity,Ambient Temperature,Light,Probe Temperature,DI1,DI2" + "\n" +
                  "2017-03-23,16:37:38,1,70.10,22.10,859,22.50,0,0" + "\n" +
                  "2017-03-23,16:42:51,1,70.50,22.30,820,21.88,0,0" + "\n" +
                  "2017-03-23,16:32:25,1,69.90,22.10,848,22.38,0,0" + "\n" +
                  "2017-03-23,16:27:12,1,70.30,22.10,866,22.25,0,0" + "\n" +
                  "2017-03-23,14:21:11,1,71.40,22.60,577,22.38,0,0" + "\n" +
                  "2017-03-23,13:02:45,1,73.10,22.60,558,22.31,0,0" + "\n" +
                  "2017-03-23,13:34:02,1,74.00,22.60,577,22.38,0,0" + "\n" +
                  "2017-03-23,12:20:59,1,75.20,22.50,435,22.25,0,0" + "\n" +
                  "2017-03-23,11:49:39,1,76.00,22.60,572,22.31,0,0";
            var parsed_data = Papa.parse(csv);
            //console.log(parsed_data);
            createGraph(parsed_data.data);
        }

        function createGraph(pd) {
            
            // Check the length of the data array
            //console.log(pd.length);
            
            var canvas = document.getElementById('myChart');
            
            // Buffers for storing the selected array data for making chart
            var time = [];
            var light = [];
            
            for (var i = 1; i < pd.length; i++) {
                //console.log(pd[i][5]);
                time.push(pd[i][1]);            // Time Stamp
                light.push(pd[i][5]);           // Light Sensor Reading
            }
            
            // Double check the contents of the 2 arrays
            console.log(time);
            console.log(light);
            
            var data = {
            //labels: ["January", "February", "March", "April", "May", "June", "July"],
            labels: time,                       // X-Axis
            datasets: [
                {
                    label: "My First dataset",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(75,192,192,0.4)",
                    borderColor: "rgba(75,192,192,1)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgba(75,192,192,1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 5,
                    pointHitRadius: 10,
                    //data: [65, 59, 80, 0, 56, 55, 40],
                    data: light,                // Y-Axis
                }
            ]
            };

            var option = {
                showLines: true,
                responsive: false
            };
            var myLineChart = Chart.Line(canvas,{
                data:data,
                options:option
            });
        }

        parseData();

    </script>

</body>
</html>

Result

Chart
Note, For info. on how to put the x-axis in ascending order, refer to my other post at http://wei48221.blogspot.tw/2017/03/how-to-sort-multi-dimensional-arrays-in.html.

Developer Tools Output


Reference

How to Create Website Graphs from CSV Files with c3.js and PapaParse
https://youtu.be/1OK4TJfCzdY
at No comments:
Labels: , ,

How to parse CSV string using Papa Parse | DzQ39 |

This is an example of how to form a CSV string and parse it using Papa Parse.

Code


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
    <!-- Load papaparse.js -->
    <script src="papaparse.min.js"></script>
</head>
<body>
    <br><br><br>
    <div class="container">
        <div id="chart"></div>
    </div>

    <script>
        //Parse the data.
        function parseData() {
            csv = "Date,Time,Station_id,Ambient Humidity,Ambient Temperature,Light,Probe Temperature,DI1,DI2" + "\n" +
                  "2017-03-23,16:37:38,1,70.10,22.10,859,22.50,0,0" + "\n" +
                  "2017-03-23,16:42:51,1,70.50,22.30,820,21.88,0,0" + "\n" +
                  "2017-03-23,16:32:25,1,69.90,22.10,848,22.38,0,0" + "\n" +
                  "2017-03-23,16:27:12,1,70.30,22.10,866,22.25,0,0" + "\n" +
                  "2017-03-23,14:21:11,1,71.40,22.60,577,22.38,0,0" + "\n" +
                  "2017-03-23,13:02:45,1,73.10,22.60,558,22.31,0,0" + "\n" +
                  "2017-03-23,13:34:02,1,74.00,22.60,577,22.38,0,0" + "\n" +
                  "2017-03-23,12:20:59,1,75.20,22.50,435,22.25,0,0" + "\n" +
                  "2017-03-23,11:49:39,1,76.00,22.60,572,22.31,0,0";
            var data = Papa.parse(csv);
            console.log(data);
        }

        parseData();

    </script>

</body>
</html>

Note that "\n" is needed at the end of each line to indicate the end of a row of data in the CSV string; without it, the whole CSV string will be treated as one line and you will have one long row of data...

Once the code is done, save it as index.html (or other filename name that ends with ".html"), then double click on the saved file to launch a browser to execute it.

Result

At first glance, there's nothing to see.


If Google Chrome is used, enable the Developer Tools under More Tools / Developer Tool.


Under Console, there is an array that contains 10 rows of data.
Click on data, then on individual Array to see the data.


The CSV string is now successfully parsed and put in an array.

References:

Parsing a Local CSV File with JavaScript and Papa Parse
http://www.joyofdata.de/blog/parsing-local-csv-file-with-javascript-papa-parse/

How to Create Website Graphs from CSV Files with c3.js and PapaParse
https://youtu.be/1OK4TJfCzdY
at No comments:
Labels: , ,

How to create a simple line chart using Chart.js | DzQ39 |

Here is a quick example of how to make a line chart using Chart.js.

Code


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
!DOCTYPE html>
<html>
  <head>
    <!-- For latest CDN version of Chart.js, visit https://cdnjs.com/libraries/Chart.js -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
  </head>

  <body>
    <canvas id="myChart" width="400" height="250"></canvas>

    <script>

    var canvas = document.getElementById('myChart');
    var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 5,
            pointHitRadius: 10,
            data: [65, 59, 80, 0, 56, 55, 40],
        }
    ]
    };

    var option = {
        showLines: true,
        responsive: false
    };
    var myLineChart = Chart.Line(canvas,{
        data:data,
    options:option
    });
      
    </script>
  </body>
</html>

Result


Reference

https://jsfiddle.net/red_stapler/4zwyn6vd/4/
at No comments:
Labels: , ,

How to turn JSFiddle example into standalone code | DzQ39 |

This post is about how to turn JSFiddle example into standalone code.


Source: https://jsfiddle.net/red_stapler/mfvmoy64/



Code


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
  <head>
    <!-- For latest CDN version of Chart.js, visit https://cdnjs.com/libraries/Chart.js -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
  </head>

  <body>
    <canvas id="myChart" width="200" height="100"></canvas>

    <script>

      var canvas = document.getElementById('myChart');
      var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [65, 59, 30, 81, 56, 55, 40],
        }
        ]
      };
      var option = {
            animation: {
       duration:5000
            }
      };
      var myBarChart = Chart.Bar(canvas,{
            data:data,
            options:option
      });
      
    </script>
  </body>
</html>

Note,

1. The code in the HTML section of JSFiddle goes to the <body> section (line 9);
2. The code in the JAVASCRIPT section of JSFiddle goes to the <script> section (line 13 ~ 36) in <body>;
3. The External Resources (left side menu, https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js) goes to the <script> section in <head>.

at No comments:
Labels: , ,