Javascript Timer の停止再開インターバル変更など

データベースのデータを読み込んで、飛行機の航跡地図を表示する処理で、録画した航跡の再現速度を速くしたり、遅くしたり、録画位置の変更、一時停止などする必要があるため作ってみました。
調べましたところ、タイマーを解除するのはclearIntervalで出来るのがわかりましたが、一時停止するメソッドがないようなので、タイマーは動かしたままにして、タイマーの処理内でフラグを見て判別してます。
再生速度変更も同じようにして、clearIntervalで解除してインターバルを変えて再開しています。

< コード例 >

HTML
Bootstrap4のモーダルダイアログのタイトル

        <div class="pull-left mt-0 histrangeclass">

          <!-- ポーズ再開ボタン -->
          <button id="histpause" type="button" class="btn btn-sm btn-primary tippyspan histshow pauseresume"
                    title="Pause live"><i class="fa fa-pause"></i></button>
          <button id="histresume" type="button" class="btn btn-sm btn-primary tippyspan histshow pauseresume dsp_none"
                    title="Resume live"><i class="fa fa-play"></i></button>          

          <!-- ヒストリースライダー -->
          <input id="histrange" type="range" class="histshow dsp_none curpo" min="1" max="200" step="1">  
          <span id="range_pos" class="histshow dsp_none">126/200</span>

          <!-- インターバルボタンズ --> 
          <span id="hist_int_buttons">

            <button id="histint_2" type="button" class="btn btn-sm btn-primary tippyspan histshow intbtns"
                    title="Change to 2 sec interval">2</button>
            <button id="histint_3" type="button" class="btn btn-sm btn-primary tippyspan histshow intbtns"
                    title="Change to 3 sec interval">3</button>

            <button id="histint_7" type="button" class="btn btn-sm btn-primary tippyspan histshow intbtns"
                    title="Change to 7 sec interval">7</button>

            <button id="histint_15" type="button" class="btn btn-sm btn-primary tippyspan histshow intbtns"
                    title="Change to 15 sec interval">15</button>

            <button id="histint_22" type="button" class="btn btn-sm btn-primary tippyspan histshow intbtns"
                    title="Change to 22 sec interval">22</button>

            <button id="histint_33" type="button" class="btn btn-sm btn-primary tippyspan histshow intbtns"
                    title="Change to 33 sec interval">33</button>

            <button id="histint_45" type="button" class="btn btn-sm btn-primary tippyspan histshow intbtns"
                    title="Change to 45 sec interval">45</button>

          </span>  

        </div>

タイマー関数


    /**
     * 飛行機マーカー描画タイマー関数
     * @param {type} interval タイマーインターバル (ms)
     * @returns {undefined}
     */
    const timerFunc = (interval) => {

      $("#timerint").removeClass("dsp_none")
      $("#timerint").show()
      $("#timerint").text("T:" + parseInt(interval / 1000))

      HistoryMap.histTimer = setInterval(() => {

        if (!isPaused) {

          const slidepos = eval(recpos) + eval(1)

          // スライダーを動かす //
          $("#histrange").val(recpos)
          $("#range_pos").text(`${slidepos}/${recs.length}`)

          console.log("TimerPos:" + recpos)
          const tmpdata = JSON.parse(recs[recpos]["TXT_JSON"])

          // 時計更新 //
          const currtmtxt = recs[recpos]["TM_ADD"].slice(5, 16).replace("-", "/") + "(JST)"
          const currtmtxtUTC = recs[recpos]["TM_ADD_UTC"].slice(5, 16).replace("-", "/") + "(UTC)"
          const postxt = `${eval(recpos) + eval(1)}/${recs.length}`
          console.log(currtmtxt)

          $("#historymap_time").text(currtmtxt + "  " + currtmtxtUTC + "  " + postxt)

          // 中心、ズーム //
          const clat = recs[recpos]["CLAT"]
          const clon = recs[recpos]["CLON"]
          const zoom = recs[recpos]["ZOOM"]
          //lmap.setView([clat, clon], zoom)
          lmap.flyTo([clat, clon], zoom)
          //lmap.panTo([clat, clon], zoom)


          // 飛行機マーカー描画 //
          const mmp = new MoveMarkerParent("", this.userId, false,
                  false, "", "")
          mmp.setTypeAndVoice("HISTORY", recs[recpos]["MP3_MSG"])
          const mkres = mmp.drawAircraftMarkers(lmap, tmpdata, false, false)
          console.log(mkres)

          recpos++;

          if (recpos === recs.length) {
           
            recpos = 0
          }

        }

      }, interval)

    }

初回読込


    let isPaused = false    // 停止用フラグ
    let recpos = 1          // 再生位置
 
    let intvl = Math.floor(this.firstInterval * 3 / 4 * 1000)

    // 初期インターバルボタン強調 //
    $("#histint_" + parseInt(intvl / 1000)).removeClass("btn-primary")
    $("#histint_" + parseInt(intvl / 1000)).addClass("btn-dark")

    // ライブ受信ランプ 受信コストを常に消す //
    $("#liveramp, #t2scost, #livecost").addClass("dsp_none")
    $("#liveramp, #t2scost, #livecost").hide()

    //alert(intvl)
    // 飛行機マーカー描画タイマー関数 //
    timerFunc(intvl)

停止、再開ボタンのリスナー


    // @@ 停止再開ボタンを押した時 @@ //
    $(".pauseresume").on("click", function (e) {

      const id = $(this).attr("id")
      isPaused = id === "histpause"
      $(this).addClass("dsp_none")
      $(this).hide()

      const opobtnid = isPaused ? "#histresume" : "#histpause"
      $(opobtnid).removeClass("dsp_none")
      $(opobtnid).show()

    })

スライダーでの位置変更


    $("#histrange").off("input")

    // @@ レンジスライダーの値が変わる時 @@ //
    // ユーザーが変えた場合発生、タイマーからは発生しない //
    $("#histrange").on("input", function (e) {

      const val = $(this).val()
      console.log("# input # slider pos is " + val)

      $("#range_pos").text(`${val}/${recs.length}`)

      isPaused = true

    })

再生インターバル変更ボタンのリスナー


    $(".intbtns").off("click")

    // @@ インターバル変更ボタンを押した時 @@ //
    $(".intbtns").on("click", function (e) {

      const val = $(this).text()
      //alert(val)

      $(".intbtns").removeClass("btn-dark")
      $(".intbtns").addClass("btn-primary")
      $(this).addClass("btn-dark")

      // タイマー再セットインターバル変更 //
      try {
        clearInterval(HistoryMap.histTimer)
      }
      catch (e) {
      }

      // 飛行機マーカー描画タイマー関数 //
      timerFunc(val * 1000)


    })

< 画面例 >
ボタンのテキストはインターバルの秒数です。
スライダーはHTMLの標準のを使ってスタイルはここを真似ました。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

航空情報 2023年 4月号 [雑誌]
価格:1425円(税込、送料無料) (2023/3/3時点)

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

航空ファン 2023年 4月号 [雑誌]
価格:1361円(税込、送料無料) (2023/3/3時点)

Tabulator formatterでフォーマットしたセルのhtmlをタイマーで更新する

 

 

 

Tabulatorでタイマーで動的に更新された値をもとにしたHTMLでセルの表示を部分的に変更させてみました。
formatterを使ってない場合は、JSONの配列を使って簡潔に出来そうですが、HTMLの部分入替がややこしくなるので、jQueryでDOMエレメントを書き換えています。

< コード例 >

Unix時刻フォーマット関数


/**
   * Unix時刻(ms)指定 時:分 フォーマット時刻
   * @param {type} utm ミリ秒Unix時刻
   * @param {type} incdate 日付有無
   * @param {type} withS 秒有無
   * @returns {String}
   */
  getFormatLocalTime2(utm, incdate, withS = false, withYMD = false) {

    //console.log(utm);

    const lTM = new Date(utm);
    const currMS = lTM.getTime();
    const Y = lTM.getFullYear();
    const M = lTM.getMonth() + 1;
    const D = lTM.getDate();
    let h = lTM.getHours();
    let n = lTM.getMinutes();
    let s = lTM.getSeconds();

    h = h.toString().length === 1 ? "0" + h : h;
    n = n.toString().length === 1 ? "0" + n : n;
    s = s.toString().length === 1 ? "0" + s : s;

    const tmtxt = h + ":" + n;
    const tmtxtWithDate = Y + "-" + (M < 10 ? "0" : "") + M + "-" +
            (D < 10 ? "0" : "") + D + " " + h + ":" + n;

    let res = ""
    if (incdate) {
      res = tmtxtWithDate;
    }
    else {
      res = tmtxt;
    }

    if (withS) {
      res += ":" + s
    }
    
    if (withYMD) {
      res = Y + "-" + M + "-" + D + " " + res
    }

    return res

  }

現在時刻タイマー


  // 時計スタート時刻 //
  const sttmutc = Number(sttm - UTC_OFFSET_SECONDS * 1000)

  const lt = new LocalTimes()

  let tmtxt = lt.getFormatLocalTime2(sttmutc, 0, true)
  $("#utctime").text(tmtxt + " (UTC)")
  // tableのcellのformatterで使う //
  let tmtxtUTCLong = lt.getFormatLocalTime2(sttmutc, 0, true, true)
  //console.log(tmtxtUTCLong)


  tmtxt = lt.getFormatLocalTime2(sttm, 0, true)
  $("#yourtime").text(tmtxt + " (You)")

  // == 時計時刻タイマー == //

  let tmpos = 0
  const clockTimer = setInterval(() => {

    const curtmutc = sttmutc + parseInt(1000 * tmpos)
    let tmfmt = lt.getFormatLocalTime2(curtmutc, 0, true)
    //console.log(tmfmt)
    tmtxtUTCLong = lt.getFormatLocalTime2(curtmutc, 0, true, true)
    //console.log(tmtxtUTCLong)

    $("#utctime").text(tmfmt + " (UTC)")

    const curtmyou = sttm + parseInt(1000 * tmpos)
    tmfmt = lt.getFormatLocalTime2(curtmyou, 0, true)
    $("#yourtime").text(tmfmt + " (You)")

    if (tmpos % 30 === 0 && tmpos !== 0) {
      // セルのAgo minutesを書き換え //
      updateRowDiffTimes(lt, tmtxtUTCLong)
    }


    tmpos++;


  }, 1000)   // <=== 1秒間隔

カラムの初期設定


        // ログ追加 クライアント時刻 UTC時刻 更新遅延秒 //
        {
          //headerTooltip: true,
          title: "Your Time", field: "TM_ADD_UTC_SHORT",
          width: 50, hozAlign: "center",
          formatter: function (cell, formatterParams, onRendered) {

            // 反転させて強調 //
            const cellelm = cell.getElement()
            $(cellelm).on("mouseover", function (e) {
              $(this).addClass("text_reverse")

            })
            $(cellelm).on("mouseout", function (e) {
              $(this).removeClass("text_reverse")
            })

            /**
             * Now - UTC追加時刻 分取得
             */
            const diffMinutesToNow = (datatm, nowtm) => {
              const lts = new LocalTimes()
              return Math.round(lts.getMinuteTimeDifference(datatm, nowtm))
            }

            const utcfmt = cell.getData().TM_ADD_UTC
            const dt = utcfmt.split(" ")[0]
            const tm = utcfmt.split(" ")[1]
            const y = dt.split("-")[0]
            let m = dt.split("-")[1]
            let d = dt.split("-")[2]
            let h = tm.split(":")[0]
            let n = tm.split(":")[1]
            let s = tm.split(":")[2]
            m = m.slice(0, 1) === "0" ? m.slice(1) : m
            d = d.slice(0, 1) === "0" ? d.slice(1) : d
            h = h.slice(0, 1) === "0" ? h.slice(1) : h
            n = n.slice(0, 1) === "0" ? n.slice(1) : n
            s = s.slice(0, 1) === "0" ? s.slice(1) : s
            const dttm = new Date(y, m, d, h, n, s)
            const dttmvalUTC = dttm.getTime()
            const dttmvalLocal = Number(dttmvalUTC) + Number(UTC_OFFSET_SECONDS * 1000)


            const lt = new LocalTimes()
            const ltfmt = lt.getFormatLocalTime2(dttmvalLocal, 0, false, false)

            const secagotxt = "SA " + cell.getData().UPDATED_SEC_AGO

            const diffToNow = diffMinutesToNow(cell.getData().TM_ADD_UTC, tmtxtUTCLong)

            return  ltfmt + "<br>" + cell.getValue() + "<br>" + secagotxt + "<br>" +
                    diffToNow + "MA"

            // tmtxtUTCLong

          },

タイマーで更新した値にしてHTMLを部分的書き換え


  /**
   * テーブルの差異分更新
   * @param {type} lt 時刻処理ユーティリティクラスのインスタンス
   * @param {type} currtmtxt 現在時刻テキスト
   * @returns {undefined}
   */
  const updateRowDiffTimes = (lt, currtmtxt) => {

    const rows = table.getRows()
    //console.log("rows.length:" + rows.length)

    // ++ テーブル行走査 ++ //
    rows.forEach((row) => {

      const utclong = row.getData().TM_ADD_UTC

      // ++ jQueryによる列走査 ++ //
      $.each($(row.getElement()).children(""), function (j, itm) {

        const fld = $(this).attr("tabulator-field")

        // UTC時刻列の差異分を書き換え //
        if (fld === "TM_ADD_UTC_SHORT") {

          //console.log($(this).html())
          let html = $(this).html()
          let ary = html.split("<br>")

          // セルデータのUTC時刻と今との差異分 //
          const diffToNow = Math.round(lt.getMinuteTimeDifference(utclong, currtmtxt)) + "MA"
          //console.log(diffToNow)

          // セルを書き換え //
          ary[3] = diffToNow
          $(this).html(`${ary[0]}<br>${ary[1]}<br>${ary[2]}<br>${ary[3]}`)

        }

      })
    })


  }

< 画面例 >

タイマーで30秒に1回、離着陸が何分前であるかを更新していく

Tabulator 行コンテキストメニュー ビルトインファンクション編

ドキュメントはこちら

 

 

< コード例 >


    rowContextMenu: function (component, row) {
      //component - column/cell/row component that triggered the menu
      //e - click event object  <=== eventではなくrow

      console.log("--- component")
      console.log(component)

      console.log("--- e")
      console.log(row.getData().iata_code)
      //console.log(e.Target._row.data)


      const icao = row.getData().icao_code
      const iata = row.getData().iata_code
      const name = row.getData().name

      const icon = `Img/airline/airline_${iata.toLowerCase()}_square.png`


      let menu = [];

      let itm = {
        label: "<span class='mr-1'>" + "<img src='" + icon + "' width='20'/></span>" + icao + " Show LiveMap",
        action: function (e, column) {


          // -C モーダルダイアログで表示 //
          const lm = new LiveMap("#modal_livemap", "livemap-container")
          lm.setAirportLatLon(-500, -500)
          lm.setUserGroup(userGroup)
          lm.setUserId(userId)
          lm.showDialog(icao, iata, name)

        }
      }
      menu.push(itm)

      return menu;
    }

< 画面例 >

Tabulator カスタムページネーターの配置

 

 

 

テーブルが縦に長い場合、上の方にも配置したページネーターでページ移動出来ると便利なので配置してみました。

< コード例 >

HTML


<!-- ページネーション -->
<div id="top_pagenator" class="ml-4 mt-0 pt-0">
  <span id="topp_first" class="mr-3 curpo topps tippyspan" title="Move to first page"><i class="fa fa-angle-double-left"></i></span>
  <span id="topp_prev" class="mr-3 curpo topps tippyspan" title="Move to previous page"><i class="fa fa-angle-left"></i></span>
  <span id="topp_next" class="mr-3 curpo topps tippyspan" title="Move to next page"><i class="fa fa-angle-right"></i></span>
  <span id="topp_last" class="mr-3 curpo topps tippyspan" title="Move to last page"><i class="fa fa-angle-double-right"></i></span>
  <!-- 9/99 -->
  <span id="topp_position" clss="text-white"></span>
</div>

Javascript
paginationCounterの関数


    paginationCounter: function (pageSize, currentRow, currentPage, totalRows, totalPages) {

      $("#topp_position").text(`${currentPage}/${totalPages}`)
      return "Showing " + pageSize + " rows of " + totalRows + " total";
    },

アイコンクリックのリスナー


  $(".topps").off("click")

  // @@ トップページネーションアイコンをクリックした時 @@ //
  $(".topps").on("click", function (e) {

    let firstButton
    let prevButton
    let nextButton
    let lastButton

    // ページネーションボタンをセット //
    $.each($("button"), function (j, btn) {

      // tabulator-pageクラス内でテキストが合致する場合、セットする //
      if ($(this).hasClass("tabulator-page")) {
        const btntxt = $(this).text()
        if (btntxt === "First") {
          firstButton = $(this)
        }
        else if (btntxt === "Prev") {
          prevButton = $(this)
        }
        else if (btntxt === "Next") {
          nextButton = $(this)
        }
        else if (btntxt === "Last") {
          lastButton = $(this)
        }
      }

    })

    const tp = $(this).attr("id").split("_")[1]

    // ボタンクリックを発生させる //
    switch (tp) {
      case "first":
        $(firstButton).trigger("click")
        //pgPos = 1
        break
      case "prev":
        $(prevButton).trigger("click")
        //pgPos--
        break
      case "next":
        $(nextButton).trigger("click")
        //pgPos++
        break
      case "last":
        $(lastButton).trigger("click")
        //pgPos = pageSize
        break
    }


  })

< 画面例 >

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

航空ファン 2023年2月号【雑誌】【1000円以上送料無料】
価格:1361円(税込、送料無料) (2023/2/17時点)

Tabulator セルのマウスオーバーで文字を反転表示

 

 

 

マウスが乗ったセルを反転させて強調表示させるため、組込みの関数を探してみましたが、ないようなので、StackOverFlowの投稿を参考にして、cellのformatterでエレメントにCSSのクラスを追加したり削除したりさせてみました。

< コード例 >
CSS


  /* tabulator セル文字反転用 */
  .text_reverse {
    color: white;
    background-color: black;
    
  }

Javascript


    // Airport name //
    {title: 'Name', field: 'nmAirport', width: 180,
      formatter: function (cell, formatterParams, onRendered) {

        // 反転させて強調 //
        const cellelm = cell.getElement()
        $(cellelm).on("mouseover", function (e) {
          $(this).addClass("text_reverse")

        })
        $(cellelm).on("mouseout", function (e) {
          $(this).removeClass("text_reverse")
        })
        return cell.getData().nmAirport

      }

    },

< 画面例 >

 

 

 

 

 

画像には枠をつけてみました。

 

 

 

 

 



  /* tabulator 画像セル背景反転用 */
  .imgback_reverse {
    background-color: #B8E2E6;
    border: 1px solid #00a0a0;
  }

Color Thief で画像のドミナントカラーを検出

Google chart API のバーの色をロゴ画像のドミナントカラーにしたいので、画像からドミナントカラーを検出するライブラリを探してましたところ、Color Thiefで出来るので使ってみました。
ここで教えて頂きました。

< コード例 >

画像エレメントをColor Thiefで指定させるため、画像にidをつけます。


// ++ 行走査 ++ //
      $.each(rows, function (i, itm) {

        // エアラインロゴ画像にidをつける //
        td = $("#" + itm["id"]).children("td").eq(2)
        $(td).children("img").eq(0).attr("id", "alimg_" + i)

        == 省略 ==
})

Color Thiefで検出


// サイズが小さいとエラーなのでデフォルトをセットして例外で囲む //
      let color = [0, 0, 255]
      try {

        // ロゴのドミナントカラーを検出 //
        const img = document.querySelector('#alimg_' + i);
        color = colorThief.getColor(img);
        console.log(color)

      }
      catch (e) {
        //console.log(e)
      }

RGB値をhexのカラーコードに変換 (公式サイトのFAQにありました)


// RGBカラー配列Hex文字列変換 //
    const rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {
        const hex = x.toString(16)
        return hex.length === 1 ? '0' + hex : hex
      }).join('')

変換結果 (開発ツールのconsole)


DOWTABLE_BC1_0620_0820
(3) [27, 58, 138]
DOWTABLE_NH239_0625_0830
(3) [12, 51, 139]
DOWTABLE_7G41_0640_0845
(3) [44, 44, 44]
DOWTABLE_JL305_0700_0905
(3) [203, 4, 4]
DOWTABLE_NH241_0725_0930
(3) [12, 51, 139]
DOWTABLE_BC3_0730_0940
(3) [27, 58, 138]
DOWTABLE_JL307_0800_1005
(3) [203, 4, 4]
DOWTABLE_NH243_0830_1030
(3) [12, 51, 139]

< 画面例 >

羽田=>福岡の週間フライトスケジュール

 

Googleのタイムラインチャートで表示
JAL, ANA, SkyMark, StarFlyer で色分けされたバーになります。

Leaflet Javascript 地図内に画像を配置

HTMLで地図を配置したdiv内に画像用divを配置して、CSSで画像用divの位置をセットします。

< コード例 >
HTML
#livemap_photoのsrcはJavascriptでダイナミカリーにセットしています。

<!-- Leaflet伸縮地図 -->
<div id="livemap-container" class="z-depth-1-half map-container p-0">
<!-- 省略 -->
<!-- Planespotter 機材写真 -->
    <figure>
        <div id="livemap_photo_div" class="dsp_none">
            <a id="livemap_photo_a" href="" target="_blank">
                <img id="livemap_photo" src="" width="240" class="border border-primary rounded fade-in"></img>
            </a>
            <figcaption id="livemap_photo_figcap" class="flagcap_dark">..</figcaption>

        </div>
    </figure>
</div>

CSS

positionを absoluteにする
bootom, top, left. right で地図内でのパッディングをセットする
z-indexを地図より大きくする

/* ライブ地図機材写真 */
#livemap_photo_div {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 99999;
    color: white;
    font-size: 14px;
    opacity: 0.8
}

< 画面例 >

Tabulator topCalc ビルトイン関数編

 

 

 

TabulatorのtopCalcプロパティを使えば集計値の表示が出来ます。
ビルトインで用意されたプロパティを使ってみました。
公式ドキュメントはこちら
sum, avg, count, maximum, minmum, concatenate が使えます。、

< コード例 >

sumとcount


        // 機材数 //
        {
          topCalc: "sum",
          title: "Fleet",
          field: "fleet_size",
          hozAlign: "right",
          width: 46,
          formatterParams: {thousand: ","},
          formatter: function (cell, formatterParams, onRendered) {
            if (cell.getValue() <= 0) {
              return ""
            }
            else {
              return numeral(cell.getValue()).format("#,###")
            }
          },
          //width: 50,
          sorter: "number",
          cssClass: "cell_num_onlytext_navy"
        },
        
        // 旅客貨物定時国際タイプ記号列挙 //
        { topCalc: "count",
          title: "Type", field: "type", hozAlign: "center", width: 50
        },

< 画面例 >