Eww Wallpaper Clock Widget

_Eww Wallpaper Clock Widget.md

clock.yuck

(defwidget clock []
  (box
    :class "clock"
    :orientation "h"
    :space-evenly false
    :valign "center"
    :halign "end"
    :vexpand true
    :hexpand true
    (box
      :orientation "v"
      :class "clock_wday_year"
      :space-evenly false
      :valign "center"
      (label
        :class "date"
        :text {formattime(EWW_TIME, "%m / %d")}
      )
      (label
        :text {formattime(EWW_TIME, "%a")}
        :class "weekday"
      )
      (label
        :text {formattime(EWW_TIME, "%Y")}
        :class "year"
      )
    )
    (box
      :orientation "v"
      :space-evenly false
      :valign "center"
      :halign "end"
      (box
        :class "music_info"
        :visible {song_status == "Playing" ? true : false}
        :orientation "h"
        :space-evenly false
        :valign "center"
        :halign "start"
        :vexpand true
        :hexpand true
        (box
          :class "song_cover_art"
          :visible {cover_art == "" ? false : true}
          :style "background-image: url('${cover_art}');"
        )
        (box
          :orientation "v"
          :space-evenly false
          :valign "center"
          (label
            :class "title"
            :xalign 0
            :text song
          )
          (label
            :class "artist"
            :xalign 0
            :text song_artist
          )
        )
      )
      (box
        :orientation "h"
        :space-evenly false

        :class "time"
        (label
          :text {formattime(EWW_TIME, "%H")}
        )
        (scale
          :class "time-progress"
          :value {formattime(EWW_TIME, "%S")}
          :max 60
          :round-digits 0
          :orientation "v"
          :flipped true
        )
        (label
          :text {formattime(EWW_TIME, "%M")}
        )
      )
    )
  )
)

default.yuck

(include "./yuck/wallp_widgets/clock.yuck")
(defwidget wallp-widget []
  
  (box
    :class "wallpaper_widget"
    :space-evenly false

    (clock)

  )
)

eww.yuck

(include "./yuck/wallp_widgets/default.yuck")
(defwindow wallpaper_sys
  :geometry 
    (geometry
      :x "13%" 
      :y "33%" 
      :anchor "top right"
      :width "700px" 
      :height "400px"
    )
  :namespace "wallpaper"
  :focusable false
  :stacking "bg"
  :exclusive false
  (wallp-widget)
)

style.scss

.wallpaper_widget {

  &, * {
    // for debuggin purpose
    // border: 1px solid red;

  }
  font-size: 40px;
  font-family: Source Sans Variable, Source Han Sans JP, Cantarell;
  color: #dddddd;
  .clock {
    // margin-right: 40px;
    .clock_wday_year {
      .date {
        font-size: 0.9em;
      }
      .weekday {
        font-size: 1.8em;
        font-weight: 300;
        margin-top: -0.1em;
        margin-bottom: -0.2em;
      }
      .year {
        font-size: 0.7em;
      }
      margin-right: 0.4em;
    }
    box {
      .time {
        font-size: 5em;
        font-weight: lighter;
        margin-bottom: -0.3em;
        .time-progress {
          margin-bottom: 0.4em;
          margin-top: 0.4em;
          margin-left: 0.15em;
          margin-right: 0.15em;
          trough {
            all: unset;
            min-height: 2px;
            min-width: 4px;
            background-color: #444444;
            highlight {
              all: unset;
              background-color: #dddddd;
              border-radius: 24px;
            }
          }
        }
      }

      .music_info {

        margin-bottom: -1.2em;
        .song_cover_art {
          
          background-size: cover;
          background-position: center;
          min-height: 1em;
          min-width:  1.5em;
          margin: 2px 0.3em 2px 0.5em;
        }
        .title {
          font-size: 0.6em;
          font-weight: 300;
        }
        .artist {
          font-size: 0.4em;
        }
      }
    }
  }
}

variables.yuck

(deflisten song
  :initial ""
  "playerctl metadata --format \"{{ xesam:title }}\" -F"
)
(deflisten song_artist
  :initial ""
  "playerctl metadata --format \"{{ xesam:artist }}\" -F"
)

(deflisten song_status
  :initial "Stopped"
  "playerctl -F status"
)
(deflisten cover_art 
  :initial "images/music.png"
  "playerctl metadata --format \"{{ mpris:artUrl }}\" -F"
)