Sfwbar Configuration for sway (lxpanel's mimic)

oneline.config

scanner {
# Get total and remaining battery charge
# create a ordinary text file contains total battery's capacity, "100" will do.
  file("/home/ahmad/bin/isi") {
    BatteryTotal = Grab(Sum)
  }
  file("/sys/class/power_supply/BAT0/capacity") {
    BatteryLeft = Grab(Sum)
  }
  # create executable file (text file and chmod it) contains a command "pamixer --get-volume"
  exec("/home/ahmad/bin/volume") {
    VolumeStatus = Grab(Last)
  }
  # create ordinary text file contains maximal volume "mine is 150"
  file("/home/ahmad/bin/volumemax") {
    VolumeMax = Grab(Sum)
  }
}

placer {
  xstep = 5    # step by 5% of desktop horizontally
  ystep = 5    # step by 5% of desktop vertically
  xorigin = 5
  yorigin = 5
  children = false
}

# Task Switcher

switcher {
  interval = 4
  labels = false
  cols = 5
}

# Panel layout

layout {

#  # add a launcher
  button {
    action = "xfce4-appfinder"                        # launch firefox on click
    value = "/home/ahmad/.icons/MacOs-Icon-Theme/apps/scalable/archlinux.svg"                          # set icon on the button 
    css = "* { min-height: 0.5cm; min-width: 0.5cm; }"   # set icon size
  }
  button {
    action = "mlterm-wl"
    value = "utilities-terminal"
    css = "* { min-height: 0.5cm; min-width: 0.5cm; }"
  }
  # add a pager
  pager {
    preview = true
    rows = 1
    pins = "1","2","3","4","5"
  }

  # add a taskbar
  taskbar {
    css = "* { -GtkWidget-hexpand: true; }" # take up empty space, set icon size
    icons = true     # display icons
    labels = true    # display titles
    rows = 1        # stack window buttons across two rows
  }

# Uncomment this section if you would like to put widgets on the left and right
# edges of the taskbar with empty space in the middle.
#  spacer {
#    type = label
#  }

#  include("usage.widget")
# 
#  grid {
#    style = "frame"
#    css = "* { -GtkWidget-direction: right; }"
#    include("cpu-temp.widget")
#    include("lan-bps.widget")
#    include("mb-temp.widget")
#    include("fan-rpm.widget")
#  }
#
#  include("weather.widget")
  grid {
    scale {
      interval = 1000
      css = "progressbar progress { background-color: #000000;}"
      value = VolumeStatus/VolumeMax
    }
  }

  label {
  interval = 1000
  value = VolumeStatus 
  }

  button {
    action = "pavucontrol"                        # launch firefox on click
    value = "/home/ahmad/.icons/audio-volume-high.svg"                          # set icon on the button 
    css = "* { min-height: 0.5cm; min-width: 0.5cm; }"   # set icon size
  }

  include("clock.widget")

  grid {
    scale {
      interval = 1000
      css = "progressbar progress { background-color: #ff0000;}"
      value = BatteryLeft/BatteryTotal
    }
  }

  label {
  interval = 1000
  value = BatteryLeft
  }

  button {
    action = "wlogout"                        # launch firefox on click
    value = "/home/ahmad/.icons/system-shutdown.png"                          # set icon on the button 
    css = "* { min-height: 0.5cm; min-width: 0.5cm; }"   # set icon size
  }
}

#CSS
#window {
#  -GtkWidget-direction: top;
#}
button#taskbar_normal image, button#taskbar_active image, button#taskbar_normal:hover image {
  min-width: 0.4cm;
  min-height: 0.4cm;
}

button#taskbar_normal label, button#taskbar_active label, button#taskbar_normal:hover label {
  -GtkWidget-vexpand: true;
  padding-left: 0.75mm;
  padding-top: 0px;
  padding-bottom: 0px;
  font: 0.3cm Sans;
}

button#taskbar_normal , button#taskbar_active , button#taskbar_normal:hover {
  padding-left: 0.75mm;
  padding-top: 0.5mm;
  padding-bottom: 0.5mm;
  background-image: none;
  border-radius: 0;
  border-image: none;
}

button#taskbar_active {
  background-color: #bbddff;
}

button#taskbar_normal:hover {
  background-color: #cccccc;
}

button#pager_normal , button#pager_visible , button#pager_focused {
  padding-left: 1.25mm;
  padding-right: 1.25mm;
  padding-top: 0.5mm;
  padding-bottom: 0.5mm;
  background-image: none;
  border-radius: 0;
  border-image: none;
  font: 0.3cm Sans;
}

button#pager_focused {
  background-color: #bbddff;
}

button#pager_preview {
  background-image: none;
  border-radius: 0;
  border-image: none;
  border-color: #000000;
  border-width: 0.25mm;
  color: #777777;
  min-width: 5cm;
  min-height: 2.8125cm;
}

grid#pager {
  outline-color: #000000;
  outline-style: dashed;
  outline-width: 0.25mm;
}

grid#switcher_active *, grid#switcher_active, grid#switcher_active * * {
  min-width: 1.25cm;
  min-height: 1.25cm;
  background-color: #bbddff;
  border-image: none;
  border-radius: 1.25mm;
  padding: 1.25mm;
}

grid#switcher_normal *, grid#switcher_normal {
  min-width: 1.25cm;
  min-height: 1.25cm;
  border-image: none;
  padding: 1.25mm;
}

window#switcher { 
  border-style: solid;
  border-width: 0.25mm;
  border-color: #000000;
  border-radius: 1.25mm; 
  padding: 1.25mm; 
}

grid#switcher { 
  border-radius: 1.25mm;
  padding: 1.25mm;
}

progressbar {
  padding-left: 0.25mm;
  padding-right: 0.25mm;
  -GtkWidget-vexpand: true;
  -GtkWidget-direction: top;
}

progress, trough {
  border-radius: 0;
  border-color: #9c9c9c;
}

progress {
  border-style: outset;
  min-width: 2mm;
}

trough {
  background-color: #a1a1a1;
  border-style: inset;
  min-height: 2.5mm;
  min-width: 2.5mm;
}

label#time, label#date {
  min-width: 2cm;
}

grid#frame {
  -GtkWidget-direction: right;
  min-width: 2cm;
  border-color: #9c9c9c;
  border-style: groove;
  border-width: 0.5mm;
  padding-top: 0.25mm;
}

grid#layout {
  padding: 0.25mm;
  -GtkWidget-direction: right;
}

label {
  font: 0.3cm Sans;
  color: #000000;
  padding-left: 1.25mm;
  padding-right: 1.25mm;
  padding-top: 0.5mm;
  padding-bottom: 0.5mm;
  background-image: none;
  border-image: none;
}