斜度を細かく知れるツールの続き(グラフを表示してみた)

こんにちは

先日、GPXファイルをアップロードしチェ、一定距離毎の平均斜度等をCSV形式で生成するWebツールを作りました。

最初はCSVデータをコマンドで出力するツールでした

→ 斜度を細かく知れるツールを作ってみようかなと思ってみました

次のはバージョンアップして、Webツールとして用意して、GPXファイルをアップロードしてCSVデータを生成する所まで作りました。

→ 斜度を細かく知れるツールの続き(ファイル読み込み)

CSVデータからExcel等でグラフを作ってみましたが、イマイチかなと思ったのですがコメント欄で、たかにぃさんからアドバシス?を頂いた案を、ありがたく参考にして、今回のグラフを表示する所まで作ってみました。

データはあるので、グラフを表示すれば良い訳なので、グラフを描画するライブラリ(ミドルウェア)を探してみます。

ツールは、今までphpで作ったのでphpで使える物に限定してみます。

プログラム言語は、ruby,phytonとかもかじった事があるので、使ってみたい気もしますが、環境を用意するのがめんどくさくなったので、やっぱり何もしないで使えるperl,php辺りが楽ちんそうです。(^_^;

jpGraph, pChartと言うのが有って、グラフを生成するのは出来そうですが、同じデータのなかで色を変更する。。と言うのができそうにありません。pChartは途中まで作ってみましたが、やっぱり無理そうです。

データを用意して定義すれば、勝手にグラフが生成できるのは凄い便利なんですが。グラフが特殊すぎたか。。

と言う事で、初心?に帰って、GDライブラリを作って、線をゴリゴリ引いてグラフを作るか。。

なんか久しぶりだな。。

昔はそうでしたが、最近便利なツールが多くて。。人間楽するとダメになりそうです(笑)

と言う事で、それっぽいのができました。スマホでも動くと思いますが、全く動作検証していないんので、画面からはみ出て見づらいかも?です。

→ https://cycle.photo-blog.jp/tools/gpx/calc_slope_graph.html

軽く説明します。

上のリンクから、Webページを表示すると、下の様なページが表示されます。

上から、「斜度計算単位(m)」には、集計単位を指定します。初期値は今は50mです。

ここで指定した距離を進む毎に、1ポイント分のデータが生成され、その間の平均斜度等が算出されます。

これが50mだと、50m移動する間に変化があった高度差から平均斜度を計算します。例えば、1000mだと、1km毎になります。サイコンなどで記録したデータ等は数秒単位で記録されます。1m等と極端に短くすると、その間にデータが記録されていなくなり、計算結果が微妙な事になりそうです。できるだけ、最低でも1つ又は、2つぐらいのデータが存在する様な距離を指定すると良いと思いまs.

次の「GPXファイル」は、アップロードするGPXファイルを指定します。指定したGPXファイルは、処理後すぐに削除されますが、エラーが出た時等の保存期間は、前の記事をご参照ください。GPXファイルは削除されますが、次のページに表示されるCSVデータは処理後30分間はサーバ上に残ります。と言うは、グラフ生成が別プログラムになってて、CSVファイルを元に生成するので、ファイルが無いとページ表示後に、グラフ画像のダウンロード(保存)ができなくなりますので、30分間だけ保持しています。

また、GPXファイルはGarmin Connect,Strava,ルートラボのデータで検証しました。他のデータでも出来る筈ですが、ルートラボなども含めて、GPSの位置情報と、高度が保存されていないGPXファイルをアップロードしても処理できませんので、ご注意ください。

これで、「処理開始」ボタンを押すと、グラフが表示されます。

下側におまけで、「斜度色分けマップ」があります。

Level1から、9までの9段階の斜度でグラフの色分け表示をします。

固定にすると、ルート毎で緑しか出なかったりして楽しくないので、変更できる様にしてあります。

下側に、ボタンが2つ有って、ブラウザ上に設定内容を保存するボタンと、初期化するボタンを用意しました。

説明は省略します。

あと、手抜きで相関チェック等はしていませんので、設定する時に斜度の範囲がlevel1からlevel9の間で逆転したり、範囲におかしな値を設定しない様に注意してください。基本的にはLevel1から順に見ていくので最初に見つかった範囲で表示される。。はずです。極端な所では、Level1の右側(終了)に100%とか書いちゃうと、Level1の色でしかグラフが表示されないはずです。(^_^;

あと、色は面倒なので固定しました。

頂いたアドバイスの色でやってみましたが、色の濃淡で表現しないと、ぱっと見て斜度の強さが理解できなかったので、緑→黄→赤の濃淡で表現してみました。

で処理すると、前とほぼ同じ画面の下側に、グラフが出ます。

この間の、ツールド美ヶ原のデータで処理してみました。

30m刻みで、上りだけ?と思う所で分割してみました。

激坂だった所などが表現できてて、自画自賛です(笑)

30分間だけグラグだけもダウンロードできます。

往復の全データを入れてみます。

ついでに、ツール・ド・つくばのルートを。。不動峠が。。。黄色いです。(笑)

なかなか、面白くできたと思います。いかがでしょうか?

『斜度を細かく知れるツールの続き(グラフを表示してみた)』へのコメント

  1. 名前:たかにぃ 投稿日:2019/06/16(日) 14:24:18 ID:93f6197c7 返信

    すごく良い感じです。
    近所の峠往復したときのGPXファイルで描画してみました。麓が緑で頂上付近が赤く平均斜度7%でもキツイのが良く分かりましたよ。
    白猫アップローダー、ダウンロードパスワードsyado
    http://whitecats.dip.jp/up/download/1560662379/attach/1560662379.JPG

    • 名前:しげ 投稿日:2019/06/16(日) 15:00:57 ID:bc939bf75 返信

      たかにぃさん
      コメント及び、お試しありがとうございます。
      グラフ拝見しました。中盤ら一気にキツくなる感じですね。
      近くにこんな所があるとか、うらやましいです。

      • 名前:たかにぃ 投稿日:2019/06/16(日) 18:32:01 ID:91cdb777c 返信

        サンプルもう一件、ダウンロードパスワードsyado
        http://whitecats.dip.jp/up/download/1560677365/attach/1560677365.JPG

        前回の峠もこの山も自宅が起点です。
        街中から出るだけで獲得標高が300~500mになるくらい坂や峠が多い土地なので機会があれば走りに来てください。

        • 名前:しげ 投稿日:2019/06/16(日) 18:42:44 ID:b086d2dbd 返信

          自宅起点なんですね。平均斜度6%前後でしょうか。後半に集中しててなんとと辛そうです(T_T)
          機会があれば。。これ一本で満足して帰りそうです(笑)
          私の自宅からだと、どう向かっても最初の50〜60kmぐらいは平坦です(^_^;)