✨ new design, radar embeded

index.html

@@ -69,11 +69,37 @@ <h2 class="title is-2" data-fillin-text="cwb_location_select_value">...</h2>
       <!-- SpeechSynthesis button -->
       <div id="speechSynthesis_container"></div>
 
+      <!-- radar -->
+      <button class="button is-large is-success is-outlined is-fullwidth mt-3 mb-3" onclick="openRadarModal()">
+        <span class="icon is-small">
+          <i class="fas fa-cloud"></i>
+        </span>
+        <span class="ml-3" data-i18n-key="radar">Radar</span>
+      </button>
+      <div class="modal" id="radar_iframe_modal" data-modal-name="radar">
+        <div class="modal-background" onclick="close_modal(this)" data-modal-to-close="radar"></div>
+        <div class="modal-card" style="min-height: 99%">
+          <header class="modal-card-head">
+            <p class="modal-card-title" data-i18n-key="radar">Radar</p>
+            <button class="delete" aria-label="close" onclick="close_modal(this)" data-modal-to-close="radar"></button>
+          </header>
+          <section class="modal-card-body" style="padding: 0">
+            <iframe id="radar_iframe" style="width: 100%; height: 98%" src="" title="雷達回波"></iframe>
+          </section>
+          <footer class="modal-card-foot">
+            <!-- <button class="button is-success">Save changes</button> -->
+            <button class="button" onclick="close_modal(this)" data-modal-to-close="radar" data-i18n-key="close">
+              Close
+            </button>
+          </footer>
+        </div>
+      </div>
+
       <!-- weather chart -->
       <div class="card has-background-success-light mt-3 mb-3">
         <div class="card-content" id="step2">
           <div class="content" id="weather_chart_inner_content">
-            <canvas id="weather_chart_canvas" width="400" height="200"></canvas>
+            <canvas id="weather_chart_canvas" width="400" height="320"></canvas>
           </div>
         </div>
       </div>

js/app.js

@@ -240,6 +240,7 @@ async function fetch_cwb(url) {
       })
   } catch (error) {
     console.log(error)
+    alert_modal(error.message, default_prompt_last_time)
   }
 }
 
@@ -256,7 +257,7 @@ async function fetch_quote(url) {
         fillin_quote(data)
       })
   } catch (error) {
-    alert_modal(error.message, default_prompt_last_time)
+    // alert_modal(error.message, default_prompt_last_time)
   }
 }
 
@@ -329,8 +330,8 @@ function restore_app_lang() {
     user_selected_lang = data
     lang_select.value = data
   } else {
-    user_selected_lang = 'en'
-    lang_select.value = 'en'
+    user_selected_lang = 'zh-TW'
+    lang_select.value = 'zh-TW'
   }
 }
 
@@ -510,35 +511,70 @@ function generate_location_option(data_element) {
 
 // use now weather state object to generate html code
 function generate_now_weather(nowstate) {
+  // let wxci = handleWeatherWxCIImage(nowstate.Wx, nowstate.CI)
+  let wxci = {
+    wx: {
+      img: '',
+    },
+    ci: {
+      img: '',
+    },
+  }
   let div = document.createElement('div')
+  let wximgHtml = ``
+  let ciimgHtml = ``
+  if (wxci && wxci.wx.img) {
+    wximgHtml = `
+<img src="${wxci.wx.img}" alt="${nowstate.Wx}" style="max-width:100px" /><br>
+<span style="font-weight:lighter;width:100%;" class="is-size-7">
+  ${wxci.wx.attribution}
+</span>
+    `
+  }
+  if (wxci && wxci.ci.img) {
+    ciimgHtml = `
+<img src="${wxci.ci.img}" alt="${nowstate.CI}" style="max-width:100px" /><br>
+<span style="font-weight:lighter;width:100%;" class="is-size-7">
+  ${wxci.ci.attribution}
+</span>
+    `
+  }
+  let additional_pop_class = ''
+  let additional_maxt_class = ''
+  let additional_mint_class = ''
+  if (nowstate.PoP >= 70) additional_pop_class += ' has-text-danger'
+  if (nowstate.MaxT >= 30) additional_maxt_class += ' has-text-danger'
+  if (nowstate.MinT <= 12) additional_maxt_class += ' has-text-info'
   div.innerHTML += `
   <nav class="level">
     <div class="level-item has-text-centered">
       <div>
         <p class="heading" data-i18n-key="PoP">${i18n_get('PoP')}</p>
-        <p class="title"><i class="fas fa-cloud-showers-heavy"></i> ${nowstate.PoP}%</p>
+        <p class="title${additional_pop_class}"><i class="fas fa-cloud-showers-heavy"></i> ${nowstate.PoP}%</p>
       </div>
     </div>
     <div class="level-item has-text-centered">
       <div>
         <p class="heading" data-i18n-key="MaxT">${i18n_get('MaxT')}</p>
-        <p class="title"><i class="fas fa-chevron-up"></i> ${nowstate.MaxT}°C</p>
+        <p class="title${additional_maxt_class}"><i class="fas fa-chevron-up"></i> ${nowstate.MaxT}°C</p>
       </div>
     </div>
     <div class="level-item has-text-centered">
       <div>
         <p class="heading" data-i18n-key="MinT">${i18n_get('MinT')}</p>
-        <p class="title"><i class="fas fa-chevron-down"></i> ${nowstate.MinT}°C</p>
+        <p class="title${additional_mint_class}"><i class="fas fa-chevron-down"></i> ${nowstate.MinT}°C</p>
       </div>
     </div>
   </nav>
   <div class="tile is-ancestor">
-    <div class="tile is-12 is-parent">
-      <div class="tile is-child box">
+    <div class="tile is-parent is-12" style="gap: 12px;">
+      <div class="tile is-child box has-text-centered" style="margin-bottom:6px !important;">
         <p class="title">${nowstate.Wx}</p>
+        ${wximgHtml}
       </div>
-      <div class="tile is-child box">
+      <div class="tile is-child box has-text-centered" style="margin-bottom:6px !important;">
         <p class="title">${nowstate.CI}</p>
+        ${ciimgHtml}
       </div>
     </div>
   </div>
@@ -640,3 +676,36 @@ function darkmode_init() {
 function toggle_darkmode() {
   darkmode.toggle()
 }
+
+function handleWeatherWxCIImage(Wx, CI) {
+  let ciImg = ''
+  let ciAttribution = ''
+  let wxImg = ''
+  let wxAttribution = ''
+  if (CI == '舒適') {
+    ciImg = './icon/ci/thermometer.png'
+    ciAttribution = `<a href="https://www.flaticon.com/free-icons/thermal" title="Thermal icons">Thermal icons created by Flat Icons - Flaticon</a>`
+  }
+  if (Wx == '陰短暫雨') {
+    wxImg = './icon/ci/cloudy.png'
+    wxAttribution = `<a href="https://www.flaticon.com/free-icons/rain" title="rain icons">Rain icons created by iconixar - Flaticon</a>`
+  }
+  return {
+    wx: {
+      img: wxImg,
+      attribution: wxAttribution,
+    },
+    ci: {
+      img: ciImg,
+      attribution: ciAttribution,
+    },
+  }
+}
+
+function openRadarModal() {
+  let modal = document.getElementById('radar_iframe_modal')
+  let iframe = document.getElementById('radar_iframe')
+  let url = 'https://www.cwb.gov.tw/V8/C/W/OBS_Radar.html'
+  iframe.src = url
+  modal.classList.add('is-active')
+}

js/i18n.js

@@ -44,6 +44,7 @@ let i18n_resources = {
       'toggle-darkmode': '切換黑暗模式',
       'select-voice-in-config-section-first': '請先在設定中選擇聲音！',
       'see-tour': '看導覽',
+      radar: '雷達回波',
     },
   },
 }

js/my-chart.js

@@ -1,4 +1,5 @@
 let weather_chart_element
+let delayed
 
 const CHART_COLORS = {
   red: 'rgb(255, 99, 132)',
@@ -9,7 +10,7 @@ const CHART_COLORS = {
   purple: 'rgb(153, 102, 255)',
   grey: 'rgb(201, 203, 207)',
 }
-const line_chart_border_width = 7
+const line_chart_border_width = 3
 
 function generate_weather_chart_data(weatherElement) {
   const time = (str) => {
@@ -52,31 +53,39 @@ function generate_weather_chart_data(weatherElement) {
         {
           label: i18n_get('MaxT'),
           data: [],
+          pointStyle: 'rectRounded',
+          pointRadius: 8,
+          pointHoverRadius: 12,
           borderColor: CHART_COLORS.red,
+          backgroundColor: CHART_COLORS.red,
           borderWidth: line_chart_border_width,
         },
       ]
       for (let n = 0; n < weatherElement[i].time.length; n++) {
         const element = weatherElement[i].time[n]
         maxt_chart_image_data.datasets[0].data.push(element.parameter.parameterName)
       }
-      console.log(JSON.stringify(maxt_chart_image_data))
+      // console.log(JSON.stringify(maxt_chart_image_data))
     }
     // 如果是最小溫度
     if (weatherElementName == 'MinT') {
       mint_chart_image_data.datasets = [
         {
           label: i18n_get('MinT'),
           data: [],
+          pointStyle: 'rectRounded',
+          pointRadius: 8,
+          pointHoverRadius: 12,
           borderColor: CHART_COLORS.blue,
+          backgroundColor: CHART_COLORS.blue,
           borderWidth: line_chart_border_width,
         },
       ]
       for (let n = 0; n < weatherElement[i].time.length; n++) {
         const element = weatherElement[i].time[n]
         mint_chart_image_data.datasets[0].data.push(element.parameter.parameterName)
       }
-      console.log(JSON.stringify(mint_chart_image_data))
+      // console.log(JSON.stringify(mint_chart_image_data))
     }
   }
   if (weather_chart_element != undefined) weather_chart_element.destroy()
@@ -89,15 +98,28 @@ function generate_weather_chart_data(weatherElement) {
       datasets: [maxt_chart_image_data.datasets[0], mint_chart_image_data.datasets[0]],
     },
     options: {
+      responsive: true,
+      animation: {
+        onComplete: () => {
+          delayed = true
+        },
+        delay: (context) => {
+          let delay = 0
+          if (context.type === 'data' && context.mode === 'default' && !delayed) {
+            delay = context.dataIndex * 300 + context.datasetIndex * 100
+          }
+          return delay
+        },
+      },
       plugins: {
         title: {
           display: true,
-          text: '36h天氣預測',
+          text: '36h 天氣預測',
         },
       },
     },
   }
-  console.dir(config)
+  // console.dir(config)
   weather_chart_element = chart(weather_chart_canvas, config)
 }