TWSNMP FCの改善：悲願マップ上に表示するゲージをかっこよくできた

今朝は３時前に目がさめましたが寒いので布団の中でウトウトしながら今日作るものを考えていました。４時過ぎに助手の猫さんが起こしに来たので布団から出てお世話をした後開発開始です。

昨日作ったsyslogからデータを抽出する機能は、いくつかの問題を修正して完成しました。
今朝のテーマは、マップに表示する描画アイテムのゲージを改善することです。いままでは

のような表示でした。p5.jsで

を参考にして作ったのですが、もう少しかっこよくしたかったので、ずっと他の描画方法を探していました。
p5.js  gaugeとかを検索していましたが、なかなか良いものが見つかりません。実は、探し方が悪かったのです。
昨日、ふと良いアイデアが浮かびました。echartsのサンプルにあるゲージ

Examples - Apache ECharts

をp5.jsで表示するマップに追加する方法です。p5.jsのマップに画像は表示できるのでechartsのグラフを画像にしてp5.jsのマップに追加できれば解決できそうです。
echartsのドキュメントを真面目に読んで見つけました。

Documentation - Apache ECharts

getDataURLというメッソドでグラフを画像データとして取得できます。
さらに初期化

Documentation - Apache ECharts

の時に、ssrを指定すれば、グラフを描画しないで作成できます。
この２つを組み合わせてグラフの画像データを作る関数を作りました。

import * as echarts from 'echarts'

export const gauge = (title, val, backgroundColor) => {
  const chart = echarts.init(null, null, {
    renderer: 'svg',
    ssr: true,
    width: 1000,
    height: 1000,
  })
  const option = {
    series: [
      {
        type: 'gauge',
        axisLine: {
          lineStyle: {
            width: 30,
            color: [
              [0.8, '#1f78b4'],
              [0.9, '#dfdf22'],
              [1, '#e31a1c'],
            ],
          },
        },
        pointer: {
          itemStyle: {
            color: 'auto',
          },
        },
        axisTick: {
          distance: -30,
          length: 8,
          lineStyle: {
            color: '#fff',
            width: 2,
          },
        },
        splitLine: {
          distance: -30,
          length: 30,
          lineStyle: {
            color: '#fff',
            width: 4,
          },
        },
        axisLabel: {
          color: 'inherit',
          distance: 40,
          fontSize: 20,
        },
        detail: {
          valueAnimation: true,
          formatter: '{value}%',
          color: 'inherit',
        },
        data: [
          {
            value: val,
            name: title,
            title: {
              color: '#fff',
              fontSize: 40,
              offsetCenter: [0, '60%'],
            },
          },
        ],
      },
    ],
  }
  chart.setOption(option)
  return chart.getDataURL({ backgroundColor })
}

これで作った画像をp5.jsのloadImage()関数で読み込めばマップに表示できました。

のような感じです。かなり嬉しいです。

これを応用すれば、棒グラフやライングラフも表示できそうです。

明日に続く