[ Scriptable] 카카오 서울 날씨

KakaoAirPollution.js

const url = encodeURI("https://m.search.daum.net/kakao?w=tot&DA=Z8T&rtmaxcoll=Z8T&q=서울 오늘 날씨")

const wv = new WebView()
wv.loadURL(url)

await wv.waitForLoad()

const cont = await wv.evaluateJavaScript(`[...document.querySelectorAll(".cont_air>ul>li")].map(t => {
return {  
  title: t.querySelector('.txt_type')?.innerText,  
  state: t.querySelector('.txt_state')?.innerText,  
  num: t.querySelector('.txt_num')?.innerText,
}
})`, false)


function getColor(state) {
  if (state === "좋음") return new Color("#299de6")
  if (state === "보통") return new Color("#49bc1d")
  if (state === "나쁨") return new Color("#ff8000")
  if (state === "매우나쁨") return new Color("#f54543")
  
  return Color.white()
}

// TODO cache image
const iconUrl = "https://search1.daumcdn.net/search/statics/common/mi/r2/ico_weather_etc_200922.png";
const req = new Request(iconUrl)
const img = await req.loadImage()

const getIcon = async (state) => {
  const c = new DrawContext()
  c.size = new Size(35,35)
  c.opaque = false
  c.respectScreenScale = true
  let x = 0
  let y = -42
  if (state === "좋음") x = 0
  else if (state === "보통") x = -40
  else if (state === "나쁨") x = -80
  else if (state === "매우나쁨") x = -120
  else { x = -56, y = -104 }
  c.drawImageInRect(img, new Rect(x,y,210,160))
  return c.getImage()
}

const widget = new ListWidget()
widget.url = url
widget.setPadding(0,0,0,0)
widget.backgroundColor = new Color("#121212")
widget.refreshAfterDate = new Date(Date.now() + 1000 * 300)

const cols = widget.addStack()
cols.layoutHorizontally()
cols.centerAlignContent()
cols.addSpacer()

for (let i=0; i<cont.length; i++) {
  const c = cont[i]
  const col = cols.addStack()
  col.layoutVertically()
  col.centerAlignContent()
  
  let stack = col.addStack()
  stack.addSpacer()
  stack.setPadding(0, 0, 8,0)
  const title = stack.addText(c.title)
  title.centerAlignText()
  title.textColor = Color.white()
  title.textOpacity = 0.5
  title.font = Font.boldSystemFont(11)
  stack.addSpacer()
  
  stack = col.addStack()
  stack.setPadding(0,0,8,0)
  stack.addSpacer()
  const img = stack.addImage(await getIcon(c.state))
  img.imageSize = new Size(32,32)
  img.centerAlignImage()
  stack.addSpacer()
  
  stack = col.addStack()
  stack.addSpacer()
  const inner = stack.addStack()
  inner.backgroundColor = getColor(c.state)
  inner.cornerRadius = 8
  inner.setPadding(1, 8, 1, 8)
  const state = inner.addText(c.state)
  state.centerAlignText()
  state.textColor = Color.white()
  state.font = Font.boldRoundedSystemFont(13)
  stack.addSpacer()
  
  stack = col.addStack()
  stack.addSpacer()
  stack.setPadding(8,0,0,0)
  const num = stack.addText(c.num || "-")
  num.centerAlignText()
  num.textColor = getColor(c.state)
  num.font = Font.boldRoundedSystemFont(10)
  num.textOpacity = 0.66
  stack.addSpacer()
  
  cols.addSpacer()
}

if (config.runsInWidget) {
    Script.setWidget(widget)
} else {
    // for Test
    widget.presentMedium()
}
Script.complete()