D03模擬結果並列播放

Table of contents

D03模擬結果並列播放

背景

在工作站node03完成前述習作迄今也超過一個月，可以再多加一些功能。
此處將各單位（中央大學大氣系NCU、中研院大氣變遷中心SNC、此處預報SES）的預報結果放在一起比較、目標是做成「叢集預報」。這樣不再是一單位的獨斷預報，而是綜合各單位的預測，可以讓使用者可以有更多的訊息，做出最佳的判斷。
要達成這個目標的技術性困難在於：
1. 目前網站上並沒法取得各單位的數值預報結果，只能有個別的結果畫面，不能重新消化、製圖(參考從png檔案讀取濃度)。
2. 即使畫面也是有困難，畫面大小不一、檔案型態分歧，如何轉檔而不失真？
3. 如何將這些圖檔一起放映在網頁上？是要個別使用播放器呢？還是將圖檔整併成一個。
4. 原網站是要廢去？同步運作？還是單獨成立新的網頁？
幾經嘗試，發現要同時驅動不同js程式展現個別圖片，基本上是不可能達成，必須將3張圖片整合成一張，才可能正確同步播放。前述問題似乎只有一個答案：就是在原來的domain選項之外、另外再加上3張合輯的選項的成果比較。

圖檔來源及下載時間點

sinica檔案之下載

sinica檔案是個gif檔案，在每一天的8:06會完成下載。可以先行處理圖檔。在11:00時再予以拼接。

NCU結果之下載

NCU結果會在上午與夜間10:00公開在災害防救科技中心。
因此，只能在11:00那次的上載作業中處理這一部分。
這也表示執行腳本需要設計跳脫機制：如果沒有檔案，則不執行轉檔與整併。

SES模擬結果之上載

正常狀況下，在每天的子夜之前會完成所有的模擬工作，將結果上載到node03備用。並在隔天早上8:00將結果上載到GitHub，讓外部單位可以下載。
雖然如此，crontab還是安排自從8:00後，每3小時執行一次上載到網站上。

node03 crontab的安排

執行SES圖檔上載之後，視情況執行3單位圖檔的整併。

6 8/11/14 * * * root /var/www/html/time-bar/pngs/pngs2jfy.sh

html之因應修改

圖框之扁平化

舊圖框：<div id="TAIWAN_TOWN_id_1_p" style="float:center;;width:1120px;height:650px;
新圖框：<div id="TAIWAN_TOWN_id_1_p" style="float:center;;width:1100px;height:550px;

新增下拉選單項目

舊選單

<optgroup title="台灣本島與澎湖解析度3k" label="D03">
    <option value="PM25_d03" selected>PM2.5</option>
</select>

新選單。合併後圖檔名稱前綴：PM25_all。

<optgroup title="台灣本島與澎湖解析度3k" label="D03">
    <option value="PM25_d03" selected>PM2.5</option>
<optgroup title="SES,sinica,NCU比較" label="D03CF">
    <option value="PM25_all">PM2.5</option>
</optgroup>
</select>

自動執行腳本

在原本pngs2jfy.sh結束之後，再加上以下處理程序。

暫存檔目錄

因gif拆解、縮放、調整邊框等等，需要一個地方存放暫存檔。
這個設計是考量最後可以把暫存檔完全刪除，不影響儲存。

D=$(echo $T|cut -c8-15)
cd $root/$T
mkdir -p origin;cd origin

sinica(SNC)圖檔之處理

SNC圖檔會在8:06處理完，在後續(11/14：00)則不需要再處理一遍。
如果沒有圖檔（因為失誤）則跳出不做。
convert在整併圖檔時，一律向上對齊、不會自動調整垂直置中、必須手動調整。
此處應用-border W%xH%選項，調整上下邊框增加15%。15%為試誤結果。
拆解後逐一進行壓縮尺寸，並加上下邊框。在同一行指令直接處理。

n=$(ls snc*png|wc -l)
if [[ $n -eq 0 ]];then
  snc=/nas2/cmaqruns/2022fcst/grid03/cctm.fcst/daily/sinica/$D.gif
  test ! -e $snc && exit
  ln -s $snc .
  /bin/convert -coalesce $D.gif $D.png
  i=0
  for d in 0 1 2;do
    for h in {0..23};do
      datep=$(date -d "$D + ${d}days +${h}hours" +%Y%m%d%H )
      /bin/convert ${D}-$i.png -resize 77% -bordercolor white -border 0%x15% snc_$datep.png
      i=$(( $i + 1 ));done;done;fi

NCU圖檔之處理

NCU圖檔會在10:00處理好（@dev2），8:00時不會處理、會在11:00處理。如果已經處理過(11:00)，就不再重複執行(14:00)。
因為jfy.cs作業結果不會存留過去每一天的png檔，因此如果nas2還有原始的png檔案（當日），則直接連結過來，否則將由gif檔案再次拆解產生。
NCU的初始圖檔起自4:00，共72個檔案。時間如果與SES結果切齊，最後4個小時將不會有圖片可供顯示。
雖然NCU圖幅比較大，但臺灣範圍相對其他單位成果比較都小，因此反而還需要再放大142%。
因為NCU圖檔的上下範圍是3者中最大，不需要（也不能）再調整邊框。

n=$(ls ncu*png|wc -l)
if [[ $n -eq 0 ]];then
  N=ncdr-PM25_d03_
  jfy=/nas2/cmaqruns/2022fcst/grid03/cctm.fcst/daily/jfy
  if [[ -e $jfy/${N}${D}04.png ]];then
    ln -s $jfy/*png .
  else
    test ! -e $jfy/jfy${D}02.gif && exit
    ln -s $jfy/jfy${D}02.gif .
    /bin/convert -coalesce jfy${D}02.gif jfy.png
    i=0
    for d in 0 1 2;do
      for h in {0..23};do
        m=$(( $h + 4 ))
        datep=$(date -d "$D + ${d}days +${m}hours" +%Y%m%d%H )
        mv -f jfy-$i.png $N$datep.png
        i=$(( $i + 1 ));done;done;fi
  for f in $(ls ${N}*png);do
    datep=$(echo $f|cut -d'_' -f3|cut -d'.' -f1)
    /bin/convert $N${datep}.png -resize 142% ncu_$datep.png ;done;fi

為SES圖檔添加上下邊框

convert在整併圖檔時，一律向上對齊、不會自動調整垂直置中、必須手動調整。
為使臺灣島能垂直置中、便於比較，其他2個圖檔需與NCU圖檔之臺灣位置能對齊。
此處應用-border W%xH%選項，經試誤上下邊框增加26%。
不取代原檔案，避免干擾SES原網頁D03畫面。

for f in $(ls ../PM25_d03*.png);do
  fn=$(echo $f|cut -d'/' -f2)
  /bin/convert -bordercolor white -border 0%x26% $f $fn;done

合併圖檔

SES模擬第一天是初始化（前一天），那些結果在make_gifs.cs中已經刪除。
SES從8：00開始播放。共需執行72個frame。
因為時間切齊的緣故，NCU及SNC結果在第三天可能會有些不足。以最後出現的圖檔來墊檔。

cd $root/$T
for d in 0 1 2;do
  for h in {0..23};do
    m=$(( $h + 8 ))
    datep=$(date -d "$D + ${d}days +${m}hours" +%Y%m%d%H )
    fn=$datep.png
    f1=origin/PM25_d03_$fn;f2=origin/snc_$fn;f3=origin/ncu_$fn
    test ! -e $f1 && f1=$f1O;test ! -e $f2 && f2=$f2O;test ! -e $f3 && f3=$f3O
    /bin/convert $f1 $f2 $f3 +append PM25_all_$fn
    f1O=$f1;f2O=$f2;f3O=$f3;done;done

結果


本計畫SES(左),中研院環變中心SNC(中),中央大物所NCU(右)未來3日PM_2.5預報結果之比較

因未能取得其他單位模擬結果的數據檔案，CMAQ模式PM_2.5預報結果定性探討比較詳見D03預報結果比較討論。

TODOs

環保署實測數據圖檔下載並列

路徑：https://airtw.moenv.gov.tw/ModelSimulate/YYYYMMDD/ 。YYYYMMDD為年月日。
檔名（規則）：output_ssssss_YYYYMMDDHHmmss.png
- ssss:（平均時間）空氣污染物名稱。AVPM25、AVPM10、O3、AVO3（臭氧8小時值）、AQI，也可以是NO2,SO2,CO等未顯示在畫面上的污染項目。
- 時間標籤：HH從0時開始起算。mmss目前均為0。
縣市邊界
- 圖檔並不含縣市邊界，為貼上topo.json內容。詳見taiwanmap.path
- TODOs
  - 製作一個空白的PMs.nc
  - 執行nc2gif.py，產生縣市邊界與圖框
  - 在白色位置填入output…png內容。存檔。（參考NCL貼在OTM底圖上 NCLonOTM）
  - 調整：先調整尺寸大小、再平移到正確位置。
色標：

<div class="ConcentrationSide clearfix" id="bar">
<p class="BarTitle">PM<sub>2.5</sub> (μg/m<sup>3</sup>)</p>
<div class="ConcentrationBar"></div>
<div class="BarNum PM25"><ul><li>350.4</li><li>250.4</li><li>150.4</li><li>54.4</li><li>35.4</li><li>15.4</li></ul></div>
</div>