dots-of-war/files/.config/eww/example/eww.xml

<!-- The main eww configuration file. This is where your widgets and how they appear on the screen and what they
contain are defined. -->

<eww>
  <definitions>
    <!-- This is the place where you structure your widgets, align them and stuff. -->

    <def name="bar"> <!-- Starts the definition of a widget named main -->
      <box orientation="h" hexpand="true" valign="center">
	<workspaces wsp_literal="{{wsp_literal}}"/>
        <music/>
        <sidestuff/>
      </box>
    </def>
    <def name="sidestuff">
      <box class="sidestuff" orientation="h" space-evenly="false" halign="end">
          <slider-vol/>
          <slider-ram/>
          <time/>
      </box>
    </def>

    <def name="workspaces">
     <literal content="{{wsp_literal}}"/>
    </def>
    <def name="music">
        <box orientation="h" class="music" halign="center" space-evenly="false">
          <!-- An image. We won't be using it, but it might be handy if you ever need it. -->
          <!-- <image path="/home/user/.config/eww/icons/music.svg"/> -->

             {{music}} <!--This is how you use variables.-->
        </box>
    </def>
    <def name="slider-vol">
      <!--A basic volume slider-->
      <box orientation="h" class="slider-vol" space-evenly="false">
        <box class="label-vol"></box>
        <scale min="0" max="101" value="{{volume}}" onchange="amixer -D pulse sset Master {}%"/> 
      </box>
    </def>
    <def name="slider-ram">
      <!--A basic RAM slider-->
      <box orientation="h" class="slider-ram" space-evenly="false">
        <box class="label-ram"></box>
        <scale min="0" active="false" max="101" value="{{ram-used}}"/>
      </box>
    </def>
    <def name="time">
      <!--Time-->
      <box class="time">{{hour}}:{{min}} {{month}} {{number_day}}, {{year_full}}</box>
    </def>
  </definitions>

  <variables>

	  <!-- Music vars -->
    <!-- These are your variables. Like they say, they run a script, and then output that to the variable. In
    the following var, we get music info from playerctl. -->

    <script-var name="music" interval="5s">playerctl metadata --format '{{ artist }} - {{ title }}'</script-var>


    <!--Volume var-->    
    <!-- If your vars get too complex to write down here, you can use an external script and paste it's path here as well, as shown below.
     -->

    <script-var name="volume" interval="16ms">
     amixer -D pulse sget Master | grep 'Left:' | awk -F'[][]' '{ print $2 }' | tr -d '%'
    </script-var>

    <script-var name="workspace_literal_0">
     ~/.config/eww/scripts/workspaces.sh 0
    </script-var>
    <script-var name="workspace_literal_1">
     ~/.config/eww/scripts/workspaces.sh 1
    </script-var>
    <script-var name="workspace_literal_2">
     ~/.config/eww/scripts/workspaces.sh 2
    </script-var>

    <!--Date vars-->
    <script-var name="number_day" interval="5h">date "+%d"</script-var>
    <script-var name="month" interval="10h">date "+%b"</script-var>
    <script-var name="min" interval="10s">date "+%M"</script-var>
    <script-var name="hour" interval="1m">date "+%H"</script-var>
    <script-var name="year_full" interval="15h">date "+%Y"</script-var>

    <!--RAM var-->
    <script-var name="ram-used" interval="1s">
       printf '%.0f\n' $(LANG=en_US free -m | grep Mem | awk '{print ($3/$2)*100}')
    </script-var>

    <!--Battery charge var-->
    <script-var name="battery-remaining" interval="2m">
	<!--cat /sys/class/power_supply/BAT0/capacity-->
      echo 50
    </script-var>

  </variables>

  <windows>
    <!-- These are the windows -->
    <window screen="0" name="bar">
      <geometry x="0%" y="0%" width="100%" height="40px"/> <!--Specifies geometry-->
      <reserve side="top" distance="20px"/>
      <widget>
	<bar wsp_literal="{{workspace_literal_1}}"/> <!--This is the def we created earlier-->
      </widget>
    </window>
    <window screen="1" name="bar1">
      <geometry x="0%" y="0%" width="100%" height="40px"/> <!--Specifies geometry-->
      <reserve side="top" distance="20px"/>
      <widget>
	<bar wsp_literal="{{workspace_literal_0}}"/> <!--This is the def we created earlier-->
      </widget>
    </window>
    <window screen="2" name="bar2">
      <geometry x="0%" y="0%" width="100%" height="40px"/> <!--Specifies geometry-->
      <reserve side="top" distance="20px"/>
      <widget>
	<bar wsp_literal="{{workspace_literal_2}}"/> <!--This is the def we created earlier-->
      </widget>
    </window>
  </windows>
</eww>