eww/bar/eww.scss

@@ -18,35 +18,49 @@ $media-progress-bg:   #333333;
 $media:           rgba(224, 232, 224, 0.7);
 $media-paused:    rgba(224, 200, 200, 0.7);
 
+// Dims the desktop background so status icons can be seen against darker wallpapers
+$status_bg: rgba(0, 0, 0, 0.3);
 $tray_bg:   rgba(204, 204, 204, 0.1);
 $tray:                 #c9cbff;
 $keyboard:             #f2cdcd;
 $language:             #e8a2af;
 $idle_inhibitor:       #f28fad;
 $audio:                #fae3b0;
-$backlight:            #f8bd96;
+$network:              #f8bd96;
-$bluetooth:            #caa9c7;
+$backlight:            #bd93f9;
-$network:              #bd93f9;
 $cpu_bg:               #333333;
 $cpu:                  #96cdfb;
 $memory_bg:            #333333;
-$memory:               #88bbeb;
+// previously bluetooth colour
+$memory:               #caa9c7;
+//$memory:               #88bbeb;
 $temperature:          #ddb6f2;
 $temperature_critical: #ff6666;
 $battery:              #b6b2b3;
 
 
-//* { all: unset; }
+// Styles all scales
+scale trough {
+  all: unset;
+  background-color: #333333;
+  border-radius: 5px;
+  min-height: 80px;
+  min-width: 2px;
+  //margin: .3rem 0 .3rem 0;
+}
+trough highlight {
+  all: unset;
+  background-color: #eeeeee;
+  border-radius: 5px;
+}
+trough slider {
+  background-color: transparent;
+  border-width: 0px;
+  border-radius: 10px;
+}
 
 .vbar {
   background-color: transparent;
-  margin-left: 5px;
-  font-size: 15px;
-  font-family: monospace;
-}
-.hbar {
-  background-color: transparent;
-  margin-top: 5px;
   font-size: 15px;
   font-family: monospace;
 }
@@ -58,7 +72,7 @@ $battery:              #b6b2b3;
 .launcher {
   all: unset;
   font-size: 40px;
-  margin: -2px -5px 5px -3px;
+  margin: -2px -5px 5px 0px;
 }
 
 box .workspaces {
@@ -88,6 +102,10 @@ box .workspaces {
   }
 }
 
+box .status {
+  background-color: $status_bg;
+}
+
 box .weather {
   color: $weather;
   margin-left: 2px;
@@ -118,45 +136,30 @@ box .weather {
     color: mix($weather_end, $weather, 100%);
   }
 }
-//.audio-scale .audio .audio-icon {
+.audio {
-//  background-color: transparent;
+  background-color: transparent;
-//  color: $audio;
+  .icon {
-//}
-scale {
-  border-radius: 5px;
-  min-height: 80px;
-  min-width: 10px;
-  margin: .3rem 0 .3rem 0;
-}
-.volume-icon {
-  margin: 2pt 0 2pt 0;
     color: $audio;
   }
-box .cpu {
+  color: $audio;
-  background-color: $cpu_bg;
+	border-left: 2px solid $audio;
-  color: $cpu;
+  margin-bottom: 1px;
-  padding: 5pt;
+  margin-top: 1px;
-}
-box .memory {
-  background-color: $memory_bg;
-  color: $memory;
-  padding: 5pt;
-}
-box .clock {
-  background-color: transparent;
-  border-radius: 5;
-  color: $clock;
-  padding: 2pt 2pt 2pt 2pt;
 }
 
 .media {
 	font-family: "Noto Serif";
-	padding-left: 5px;
-	padding-right: 5px;
   min-height: 15px;
   min-width: 15px;
 	color: $media;
 	border: none;
+
+  .media-text-playing {
+    padding-left: 10px;
+  }
+  .media-text-paused {
+    padding-left: 10px;
+	  color: $media-paused;
   }
   .media-playing {
     background-color: $media-progress-bg;
@@ -166,52 +169,34 @@ box .clock {
     background-color: $media-progress-bg;
 	  color: $media-paused;
   }
-.media-text-paused {
-	color: $media-paused;
-}
-.status {
-  font-family: monospace;
 }
 
+box .cpu {
+  .progress {
+    background-color: $cpu_bg;
+  }
+  color: $cpu;
+	border-left: 2px solid $cpu;
+  margin-bottom: 1px;
+  margin-top: 1px;
+}
+box .memory {
+  .progress {
+    background-color: $memory_bg;
+  }
+  color: $memory;
+	border-left: 2px solid $memory;
+  margin-bottom: 1px;
+  margin-top: 1px;
+}
+box .clock {
+  background-color: transparent;
+  color: $clock;
+  margin-top: 1px;
+	border-left: 2px solid $clock;
+}
 .systray {
-  background-color: $tray_bg;
+  //background-color: $tray_bg;
   color: $tray;
-}
+	border-left: 2px dotted $tray;
-
-// Styles on classes (see eww.yuck for more information)
-
-.status slider {
-  all: unset;
-  color: #ffd5cd;
-}
-
-.metric scale trough highlight {
-  all: unset;
-  background-color: #D35D6E;
-  color: #000000;
-  border-radius: 10px;
-}
-.metric scale trough {
-  all: unset;
-  background-color: #4e4e4e;
-  border-radius: 50px;
-  min-height: 3px;
-  min-width: 50px;
-  margin-left: 10px;
-  margin-right: 20px;
-}
-.metric scale trough highlight {
-  all: unset;
-  background-color: #D35D6E;
-  color: #000000;
-  border-radius: 10px;
-}
-.metric scale trough {
-  all: unset;
-  background-color: #4e4e4e;
-  border-radius: 50px;
-  min-height: 3px;
-  min-width: 50px;
-  margin-left: 10px;
-  margin-right: 20px;
 }

eww/bar/eww.yuck

@@ -1,4 +1,5 @@
-(defvar eww "eww --config $HOME/.config/eww/bar")
+(defvar eww-flags "--config $HOME/.config/eww/bar")
+(defvar amixer "amixer -D pulse")
 
 (defwindow vbar
 	:exclusive true
@@ -15,7 +16,6 @@
 	(centerbox
 		:orientation "v"
 		(box :orientation "v" :space-evenly false :valign "start"
-			;(box :class "launcher" :valign "start" :width "10px" :height "10px" "☯")
 			(label
 				:class "launcher" :valign "start" :width "20px" :height "20px"
 				:unindent true
@@ -24,14 +24,17 @@
 			(widget-workspaces)
 		)
 		(widget-media)
-		(box :orientation "v" :space-evenly false :valign "end"
+		(box
+			:class "status"
+			:orientation "v" :space-evenly false :valign "end"
 			(widget-tray)
-			(widget-audio)
+			(widget-volume)
+			(widget-microphone)
+			;(widget-temperature)
 			(widget-cpu)
 			(widget-memory)
 			(widget-clock)
 		)
-		;(widget_status)
 	))
 (defwindow hbar
 	:exclusive true
@@ -73,30 +76,6 @@
 	"scripts/compositor-control active-title")
 
 
-; Weather
-
-(defwidget widget-weather [orientation]
-	(box
-		:class "weather"
-		:orientation orientation
-		:space-evenly false
-		:valign "start"
-		:halign "center"
-		:spacing 10
-		(button :onclick "scripts/popup weather" "W")
-	))
-
-(defpoll weather-text :initial "" :interval "180s"
-	"curl --max-time 2 wttr.in")
-
-(defwindow weather
-	:geometry (geometry :x "70px"
-						:y "50%"
-						:width "270px"
-						:height "60px")
-	(box weather-text))
-
-
 (defwidget widget-media []
 	(box
 		:class "media"
@@ -120,6 +99,7 @@
 			:xalign 0.5
 			:yalign 0.5
 			:justify "center"
+			:limit-width 120
 			:text {media-current != "" ? "『${media-current}』" : "『』"})
 	))
 
@@ -135,55 +115,99 @@
 (deflisten media-status :initial "Stopped"
 	"playerctl --follow status")
 
-(defwidget widget-audio []
+(defwidget widget-volume []
 	(eventbox
-		:class "audio"
+		:onhover "${EWW_EXECUTABLE} ${eww-flags} update show-volume=true"
-		:onhover "${eww} update show-audio=true"
+		:onhoverlost "${EWW_EXECUTABLE} ${eww-flags} update show-volume=false"
-		:onhoverlost "${eww} update show-audio=false"
+		:onclick "${amixer} sset Master toggle"
 		(box
 			:class "audio"
 			:orientation "v"
 			:space-evenly "false"
 			:spacing "2"
-			(revealer :transition "slideup" :reveal show-audio
+			:tooltip "Volume: ${current-volume}%"
+			(revealer :transition "slideup" :reveal show-volume
 				(scale
-					:class "audio-scale"
+					:class "scale"
 					:value current-volume
 					:orientation "v"
 					:flipped true
 					:marks true
-					:tooltip "Volume: ${current-volume}%"
 					:max 101
 					:min 0
-					:onchange "amixer -D pulse sset Master {}%" ))
+					:onchange "${amixer} sset Master {}%" ))
 			(label
-				:class "audio-icon"
+				:class "icon"
 				:width 20 :height 20
 				:xalign 0.5 :yalign 0.5
 				:noindent true
-				:tooltip "Volume: ${current-volume}%"
+				:text { current-volume-state == "off" ? "" : (current-volume > 80 ? "" : "") }))))
-				:text { current-volume == 0 ? "" : (current-volume > 80 ? "" : "") }))))
+(defwidget widget-microphone []
+	(eventbox
+		:onhover "${EWW_EXECUTABLE} ${eww-flags} update show-microphone=true"
+		:onhoverlost "${EWW_EXECUTABLE} ${eww-flags} update show-microphone=false"
+		:onclick "${amixer} sset Capture toggle"
+		(box
+			:class "audio"
+			:orientation "v"
+			:space-evenly "false"
+			:spacing "2"
+			:tooltip "Capture : ${current-microphone}%"
+			(revealer :transition "slideup" :reveal show-microphone
+				(scale
+					:class "scale"
+					:value current-microphone
+					:orientation "v"
+					:flipped true
+					:marks true
+					:max 101
+					:min 0
+					:onchange "${amixer} sset Capture {}%" ))
+			(label
+				:class "icon"
+				:width 20 :height 20
+				:xalign 0.5 :yalign 0.5
+				:noindent true
+				:text { current-microphone-state == "off" ? "" : "" }))))
 (defpoll current-volume :interval "1s" "amixer -D pulse sget Master | grep 'Left:' | awk -F'[][]' '{ print $2 }' | tr -d '%'")
-(defvar show-audio false)
+(defpoll current-volume-state :interval "1s" "amixer -D pulse sget Master | grep 'Left:' | awk -F'[][]' '{ print $4 }'")
+(defpoll current-microphone :interval "1s" "amixer -D pulse sget Capture | grep 'Left:' | awk -F'[][]' '{ print $2 }' | tr -d '%'")
+(defpoll current-microphone-state :interval "1s" "amixer -D pulse sget Capture | grep 'Left:' | awk -F'[][]' '{ print $4 }'")
+(defvar show-volume false)
+(defvar show-microphone false)
 
+(defwidget widget-temperature []
+	(label
+		:class "temperature"
+		:width 20
+		:height 20
+		:tooltip {EWW_TEMPS}
+		:text ""
+	))
 (defwidget widget-cpu []
-	(circular-progress
+	(box
 		:class "cpu"
-			:width 20
+		:orientation "v"
-			:height 20
-			:thickness 4
-			:tooltip {EWW_CPU.cores}
-			:value {EWW_CPU.avg}
-	))
-(defwidget widget-memory []
 		(circular-progress
-			:class "memory"
+			:class "progress"
 			:width 20
 			:height 20
 			:thickness 4
-			:tooltip "${EWW_RAM.used_mem} / ${EWW_RAM.total_mem}"
+			:tooltip " ${round(EWW_CPU.avg, 2)}%"
+			:value {EWW_CPU.avg}
+		)))
+(defwidget widget-memory []
+	(box
+		:class "memory"
+		:orientation "v"
+		(circular-progress
+			:class "progress"
+			:width 20
+			:height 20
+			:thickness 4
+			:tooltip " ${round(100 * EWW_RAM.used_mem / EWW_RAM.total_mem, 2)}%"
 			:value {EWW_RAM.used_mem_perc}
-	))
+	)))
 (defwidget widget-tray []
 	(systray
 		:class "systray"
@@ -200,7 +224,7 @@
 		:valign "end"
 		:spacing 1
 		:width 20
-		(box :class "icon" "")
+		;(box :class "icon" "")
 		"${clock.m}" "${clock.d}"
 		(box :class "icon" "")
 		"${clock.H}" "${clock.M}"
@@ -210,7 +234,6 @@
 	"date '+{\"H\":\"%H\", \"M\":\"%M\", \"d\":\"%d\", \"m\":\"%m\", \"b\":\"%b\", \"Y\":\"%Y\"}'")
 
 
-
 ; Calendar
 
 (defwindow calendar
@@ -236,20 +259,25 @@
 (defpoll calendar_year :interval "10h"
     "date '+%Y'")
 
-(defwidget metric [label value onchange]
+; Weather
+
+(defwidget widget-weather [orientation]
 	(box
-		:orientation "v"
+		:class "weather"
-		:class "metric"
+		:orientation orientation
 		:space-evenly false
-		(box :class "label" label)
+		:valign "start"
-		(circular-progress :value value)
+		:halign "center"
-		;(scale
+		:spacing 10
-		;	:min 0 :max 101
+		(button :onclick "scripts/popup weather" "W")
-		;	:active {onchange != ""}
-		;	:orientation "v"
-		;	:value value
-		;	:onchange onchange)
 	))
 
-(defpoll volume :initial 0 :interval "1s"
+(defpoll weather-text :initial "" :interval "180s"
-	"scripts/get-volume.sh")
+	"curl --max-time 2 wttr.in")
+
+(defwindow weather
+	:geometry (geometry :x "70px"
+						:y "50%"
+						:width "270px"
+						:height "60px")
+	(box weather-text))

eww/bar/scripts/get-volume.sh

@@ -1,3 +0,0 @@
-#!/bin/bash
-
-amixer -D pulse sget Master | grep 'Left:' | awk -F'[][]' '{ print $2 }' | tr -d '%' | head -1