
TWSNMP FC:PWA版にノードリストとポーリングリストを追加
今朝は4時前から開発開始です。PWA版の開発が軌道に乗って楽しくなってきたので早く目が覚めました。
まずは、マップとイベントログの表示を1分間隔で更新する機能とログアウトした後に再度ログインした時にマップだけ表示されない問題を解決しました。
マップを表示しているp5.jsのキャンバスの再作成が関係していました。
マップの表示を切り替えた時にキャンバスを削除する必要がありましたが、その方法がやっとわかりました。
p5.jsのremoveを実施しれば良かったようです。
let map;
export const showMAP = (div) => {
mapRedraw = true
if (map) {
map.remove();
map = undefined;
}
map = new P5(mapMain, div)
}
TWSNMP FCの本体でも同じような問題がありましたが、キャンバスは維持して対策していました。同じ方法で対策できそうですが、今はやめておきます。
マップ画面ができたので、次はノードやポーリングなどのリスト画面を追加することにしました。表示方法はイベントログと同じ方法でできます。
画面の切り替えはTWLogAIANのレポート画面の切り替えと同じ様に右上のコンボボックスで出来ました。

ノードリストは、

のような感じです。
ポーリングリストは、

のような感じです。ポーリングリストを追加する開発は
のような感じです。
リストで表示するものは同じパターンで追加できそうです。他の画面も簡単に追加できそうでますます楽しくなってきましたが今日は時間切れになりました。
明日に続く
いいなと思ったら応援しよう!
