feat: Added example

examples/eww-bar/eww.scss

@@ -1,43 +0,0 @@
-* {
-  all: unset; // Unsets everything so you can style everything from scratch
-}
-
-// Global Styles
-.bar {
-  background-color: #3a3a3a;
-  color: #b0b4bc;
-  padding: 10px;
-}
-
-// Styles on classes (see eww.yuck for more information)
-
-.sidestuff 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;
-}
-
-.label-ram {
-  font-size: large;
-}
-
-.workspaces button:hover {
-  color: #D35D6E;
-}
-

examples/eww-bar/ewwii.rhai

@@ -1,49 +1,102 @@
-fn separator() {
-    return box(#{
-        class: "separator",
-        width: "1px",
-        height: "20px",
-        background_color: "#888",
-        margin: "0 8px"
-    }, []);
+fn bar(music, time, volume) {
+  return centerbox(#{ orientation: "h" }, [workspaces(), music(music), sidestuff(volume, time)]);
 }
 
-fn widget1() {
-    return box(#{
-        class: "widget1",
-        orientation: "h",
-        space_evenly: false,
-        halign: "start",
-        spacing: 5
-    }, [
-        button(#{ onclick: "print('Hello there!')", text: "greet" }),
-        separator(),
-        button(#{ onclick: "print('Bye bye!')", text: "say bye" })
-    ]);
+fn sidestuff(volume, time) {
+  return box(#{ class: "sidestuff", orientation: "h", space_evenly: false, halign: "end"}, [
+    metric(#{
+      label: "🔊",
+      value: volume,
+      onchange: "amixer -D pulse sset Master {}%",
+    }),
+    label(#{ text: time })
+  ]);
 }
 
-fn window_body() {
-    return centerbox(#{ orientation: "h" }, [
-        widget1(),
-        box(#{},[]),
-        box(#{},[]),
-    ]);
+fn workspaces() {
+  return box(#{
+    class: "workspaces",
+    orientation: "h",
+    space_evenly: true,
+    halign: "start",
+    spacing: 10,
+  }, [
+    button(#{ onclick: "wmctrl -s 0", label: "1" }),
+    button(#{ onclick: "wmctrl -s 1", label: "2" }),
+    button(#{ onclick: "wmctrl -s 1", label: "3" }),
+    button(#{ onclick: "wmctrl -s 3", label: "4" }),
+    button(#{ onclick: "wmctrl -s 4", label: "5" }),
+    button(#{ onclick: "wmctrl -s 5", label: "6" }),
+    button(#{ onclick: "wmctrl -s 6", label: "7" }),
+    button(#{ onclick: "wmctrl -s 7", label: "8" }),
+    button(#{ onclick: "wmctrl -s 8", label: "9" }),
+  ]);
+}
+
+fn music(music) {
+  let label_text = if music != "" {
+      "🎵" + music
+  } else {
+      ""
+  };
+  return box(#{
+    class: "music",
+    orientation: "h",
+    space_evenly: false,
+    halign: "center"
+  }, [
+    label(#{ text: label_text }),
+  ]);
+}
+
+fn metric(props) {
+  let label_prop = props.label;
+  let value_prop = props.value;
+  let onchange_prop = props.onchange;
+
+  return box(#{
+    orientation: "h",
+    class: "metric",
+    space_evenly: false,
+  }, [
+    slider(#{
+      min: 0,
+      max: 101,
+      active: onchange_prop != "",
+      value: value_prop,
+      onchange: onchange_prop,
+    }),
+  ]);
 }
 
 enter([
-    poll("cpu_usage", #{ 
-        interval: "1s", 
-        cmd: "./test.sh",  
-        initial: "initial" 
-    }),
-    listen("net_speed", #{ 
-        signal: "./test.sh"
-    }),
+  listen("music", #{
+    initial: "",
+    cmd: "playerctl --follow metadata --format '{{ artist }} - {{ title }}' || true"
+  }),
 
-    defwindow("main_window", #{
-        monitor: 0,
-        windowtype: "dock",
-        geometry: #{ x: "0px", y: "0px", width: "30px", height: "30px" },
-        reserve: #{ top: "30", distance: "30" }
-    }, window_body())
-]);
+  poll("volume", #{ 
+      interval: "1s", 
+      cmd: "scripts/getvol",
+      initial: "" 
+  }),
+
+  poll("time", #{ 
+      interval: "10s", 
+      cmd: "date '+%H:%M %b %d, %Y'",
+      initial: "" 
+  }),
+
+  defwindow("bar", #{
+      monitor: 0,
+      windowtype: "dock",
+      geometry: #{
+          x: "0%",
+          y: "0%",
+          width: "90%",
+          height: "10px",
+          anchor: "top center",
+      },
+      reserve: #{ side: "top", distance: "4%" }
+  }, bar(music, time, volume)),
+])

examples/eww-bar/ewwii.scss

@@ -0,0 +1,38 @@
+* {
+    all: unset; // Unsets everything so you can style everything from scratch
+}
+
+// Global Styles
+.bar {
+    background-color: #3a3a3a;
+    color: #b0b4bc;
+    padding: 10px;
+}
+
+// Styles on classes (see ewwii.rhai for more information)
+
+.sidestuff 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;
+}
+
+.workspaces button:hover {
+    color: #d35d6e;
+}

examples/eww-bar/test.rhai

@@ -0,0 +1,49 @@
+fn separator() {
+    return box(#{
+        class: "separator",
+        width: "1px",
+        height: "20px",
+        background_color: "#888",
+        margin: "0 8px"
+    }, []);
+}
+
+fn widget1() {
+    return box(#{
+        class: "widget1",
+        orientation: "h",
+        space_evenly: false,
+        halign: "start",
+        spacing: 5
+    }, [
+        button(#{ onclick: "print('Hello there!')", text: "greet" }),
+        separator(),
+        button(#{ onclick: "print('Bye bye!')", text: "say bye" })
+    ]);
+}
+
+fn window_body() {
+    return centerbox(#{ orientation: "h" }, [
+        widget1(),
+        box(#{},[]),
+        box(#{},[]),
+    ]);
+}
+
+enter([
+    poll("cpu_usage", #{ 
+        interval: "1s", 
+        cmd: "./test.sh",  
+        initial: "initial" 
+    }),
+    listen("net_speed", #{ 
+        signal: "./test.sh"
+    }),
+
+    defwindow("main_window", #{
+        monitor: 0,
+        windowtype: "dock",
+        geometry: #{ x: "0px", y: "0px", width: "30px", height: "30px" },
+        reserve: #{ top: "30", distance: "30" }
+    }, window_body())
+]);