2011|08|
2013|10|11|12|
2014|01|02|03|04|05|06|07|08|09|10|11|12|
2015|01|02|03|05|06|07|08|09|10|11|12|
2016|01|03|04|05|06|07|08|09|10|11|12|
2017|01|02|03|04|05|06|07|08|09|10|11|12|
2018|01|02|03|04|05|06|07|08|09|10|11|12|
2019|01|02|03|04|05|06|07|

2019-05-12 半田づけなしで、ケーブルからAC電源取り出す方法 [長年日記]

半田づけなしで、ケーブルからAC電源取り出す方法

半田づけなしで、ケーブルからAC電源取り出す方法

  • 2019/05/12

    原本

    背景

    • ■コンセントのないクローゼットの部屋に、追加の電灯を付けて欲しいと、嫁さんから依頼された。

    目的

    • ■天井の蛍光灯から、電源を引き出そうと考えた。

    課題

    • ■蛍光灯のケーブルをしてして半田付けしなければならない→天井を向きながらの半田づけ作業は大変危険
    • ■なんとか、半田づけ作業なしに、ケーブルを引き出す方法がないか調べた

    事前検討

    • ■自動車の電飾関係に「配線コネクタ」というものがあるが、対象電圧が低くて(12V)、ちょっと使うのは危険と思った。加えて、使える電線も細い            

    課題を解決する手段

    • ■DIYショップにいったら、こういうものが売っていた

    所感

    • いままで苦労して、切断、半田付けをしていたのが、バカみたい

    以上


2019-05-26 2秒単位で更新される鶏頭図のグラフ [長年日記]

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <SCRIPT LANGUAGE="JavaScript">
	<!--
		setTimeout("location.reload()",1000*5);  // 5秒
		//-->
  </SCRIPT>
  <title>グラフ</title> 
</head>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
 
 
<body>
    <h1>鶏頭図</h1>
    <canvas id="myPolarAreaChart"></canvas> 
    <canvas id="myPolarAreaChart2"></canvas> 
 
    <script>
    var ctx = document.getElementById("myPolarAreaChart");
    var myPolarAreaChart = new Chart(ctx, {
        type: 'polarArea',
            data: {
                labels: ["1月", "2月", "3月", "4月","5月"],
                datasets: [{
                    backgroundColor: [
                    "#800080", //パープル
                    "#FF1493", //ディープピンク
                    "#FF0000", //レッド
                    "#FF8C00", //ダークオレンジ
                    "#FFD700" //ゴールド
                    ], 
                    data: [18, 17, 12, 10, 3]
                }]
            },  
        options: {
	        animation:false, // アニメーションの停止
            title: {
                display: true,
                text: '月別 クラス病欠者数'
            }
        }
    });
    </script>
 
    <script>
    var ctx2 = document.getElementById("myPolarAreaChart2");
    var myPolarAreaChart2 = new Chart(ctx2, {
        type: 'polarArea',
            data: {
                labels: ["1月", "2月", "3月", "4月","5月"],
                datasets: [{
                    backgroundColor: [
                    "#800080", //パープル
                    "#FF1493", //ディープピンク
                    "#FF0000", //レッド
                    "#FF8C00", //ダークオレンジ
                    "#FFD700" //ゴールド
                    ], 
                    data: [18, 17, 12, 10, 3]
                }]
            },  
        options: {
	        animation:false, // アニメーションの停止
            title: {
                display: true,
                text: '月別 クラス病欠者数'
            }
        }
    });
    </script>
 
 
</body>
</html>
syntax2html

2019-05-27 時間とともに流れていくグラフ(2枚のグラフを描くところがポイント) [長年日記]

2枚のグラフを描くところがポイント

<!DOCTYPE html>
<html lang="ja">
  <head>
	<meta charset="utf-8">
	   <title>グラフ</title> 
  </head>
 
  <script type="text/javascript" src="moment.js"></script>
  <script type="text/javascript" src="Chart.js"></script>
  <script type="text/javascript" src="chartjs-plugin-streaming.js"></script> 
 
  <body>
	<h1>折れ線グラフ</h1>
 
    <canvas id="myChart"></canvas>
    <canvas id="myChart2"></canvas>
 
	
    <script>
			var ctx = document.getElementById('myChart').getContext('2d');
			var chart = new Chart(ctx, {
				type: 'line',
				data: {
					datasets: [{
                        data: [],  // 1つめ
                        borderColor: "rgba(255,0,0,1)",
                        backgroundColor: "rgba(0,0,0,0)",  
                        lineTension: 0,
 
					}, {
                        data: []  // 2つめ
                    }, {
                        data: []  // 3つめ
                    }, {
						data: []  // 4つめ
					}]
				},
				options: {
					scales: {
						xAxes: [{
                            type: 'realtime',
                            realtime: {
                                duration: 30000, // 300000ミリ秒(5分)のデータを表示 (コメントアウトすると早く動く)
                                onRefresh: function(chart) {
                                    chart.data.datasets.forEach(function(dataset) {
                                        dataset.data.push({
                                            x: Date.now(),
                                            y: Math.random()
                                        });
                                    });
                                }
                            }
 
                        }]
					}
				}
			});
      </script>
      
 
      <script>
			var ctx2 = document.getElementById('myChart2').getContext('2d');
			var chart2 = new Chart(ctx2, {
				type: 'line',
				data: {
					datasets: [{
                        data: [],  // 1つめ
                        borderColor: "rgba(255,0,0,1)",
                        backgroundColor: "rgba(0,0,0,0)",  
                        lineTension: 0,
 
					}, {
                        data: []  // 2つめ
                    }, {
                        data: []  // 3つめ
                    }, {
						data: []  // 4つめ
					}]
				},
				options: {
					scales: {
						xAxes: [{
                            type: 'realtime',
                            realtime: {
                                duration: 30000, // 300000ミリ秒(5分)のデータを表示 (コメントアウトすると早く動く)
                                onRefresh: function(chart) {
                                    chart.data.datasets.forEach(function(dataset) {
                                        dataset.data.push({
                                            x: Date.now(),
                                            y: Math.random()
                                        });
                                    });
                                }
                            }
 
                        }]
					}
				}
			});
      </script>
           
 
	 </body>
</html>
syntax2html

2019-05-28 htmlでcsvファイルを読み込む [長年日記]

htmlでcsvファイルを読み込む

chromoの右上アイコン→その他のツール→ディベロッパーツール→Consoleに出力される

<form name="test">
<input type="file" id="selfile"><br>
<textarea name="txt" rows="10" cols="50" readonly></textarea>
</form>
 
<script>
var obj1 = document.getElementById("selfile");
 
//ダイアログでファイルが選択された時
obj1.addEventListener("change",function(evt){
 
  var file = evt.target.files;
 
  //FileReaderの作成
  var reader = new FileReader();
 
  //テキスト形式で読み込む
  reader.readAsText(file[0]);
 
  //読込終了後の処理
  reader.onload = function(ev){
    //テキストエリアに表示する
    document.test.txt.value = reader.result;
    console.log( reader.result.split('\n') );
 
    var lineArr = reader.result.split("\n");           
    //行と列の二次元配列にする
    var itemArr = [];
     for (var i = 0; i < lineArr.length; i++) {
       itemArr[i] = lineArr[i].split(",");
     }
     console.log( itemArr ); // chromoの右上アイコン→その他のツール→ディベロッパーツール→Consoleに出力される
 
     var dummy = Number(itemArr[1][2]); // 1行目2列目の数字を取り出す
     console.log(dummy);
 
    }
},false);
</script>
syntax2html

2019-05-29 10秒ごとに更新される棒グラフ(csvファイルを変えれば変わるはず) [長年日記]

テストする為には、ローカルでサーバを立てなければならない。

python3 -m http.server      → http://localhost:8000

python3 -m http.server 9876 → http://localhost:9876 # これがどうにも上手く動かない


2019-05-30 動くchart.jsを落してきた [長年日記]

http://kobore.net/soft/chart_test3/docs/ja/

http://kobore.net/soft/chart_test3/docs/samples/


2019-05-31 GET / HTTP/1.1" 304 キャッシュがクリアされなくて困った時 [長年日記]

ローカルディレクトリから"python3 -m http.server 9876"とすると、簡単にWebサーバが立ち上がり、google chromoで"http://localhost:9876"とすると、index.htmlの内容がでてきて便利であるが、

JavaScriptから"test.csv"を読み込んで、グラフに表示されたいのであるが、"test.csv"を更新しても、JavaScriptの内容に変化がないので、内容が変更されずに、心底困っていた。

そこで、test.csvのタイムスタンプが変更した時に、内容が変化すように、console.log(filetime('data.csv'))を加えてみたら、上手くいった。

正直、「助かった」と思った。

こんな感じ。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script src="mychart.js"></script>

 <SCRIPT LANGUAGE="JavaScript">
 <!--
  setTimeout("location.reload()",1000*5);  // 5秒
  //-->
 </SCRIPT>

 console.log(filetime('data.csv'))

    <title>chart of results</title>
</head>
<body>



<!--ここにグラフが挿入されます-->
<div style="width: 100%; height: 100%;">
    <canvas id="myChart" style="width: 100%; height: auto;"></canvas>
</div>
</body>
</html>

ちなみに、開発中"だけ"に必要であれば、chromoのケースでは、 「その他のツール」→「ディベロッパーツール」→「Network」→disable cacheにチェックを入れると、キャッシュは無視される。