From d3a9a3e4675a88b0a36d1d0c779241bb029d90df Mon Sep 17 00:00:00 2001
From: eljamm <83901271+eljamm@users.noreply.github.com>
Date: Mon, 13 Nov 2023 03:13:21 +0100
Subject: [PATCH] Fixes and Improvements

---
 app/asgi.py                                   |   8 +-
 raspberry/raspi/sensors/__init__.py           |   3 +-
 raspberry/raspi/sensors/distance.py           |  37 +-
 raspberry/raspi/utils/utils.py                |  15 +-
 raspberry/ws_control.py                       |  17 +-
 sensor/consumers.py                           |  60 +-
 .../static/sensor/css/sensor/ultrasonic.css   | 106 +++
 .../sensor/css/sensor/ultrasonic.css.map      |   1 +
 .../sensor/images/wiring/pins/ultrasonic.svg  | 828 +++++++++---------
 sensor/static/sensor/js/sensors/ultrasonic.js |  78 ++
 .../static/sensor/scss/sensor/ultrasonic.scss |  82 ++
 .../templates/sensor/sensors/ultrasonic.html  |  13 +
 sensor/views.py                               |   4 +-
 13 files changed, 793 insertions(+), 459 deletions(-)
 create mode 100644 sensor/static/sensor/css/sensor/ultrasonic.css
 create mode 100644 sensor/static/sensor/css/sensor/ultrasonic.css.map
 create mode 100644 sensor/static/sensor/js/sensors/ultrasonic.js
 create mode 100644 sensor/static/sensor/scss/sensor/ultrasonic.scss

diff --git a/app/asgi.py b/app/asgi.py
index 096a334..a9daff9 100644
--- a/app/asgi.py
+++ b/app/asgi.py
@@ -7,6 +7,7 @@
 https://docs.djangoproject.com/en/4.0/howto/deployment/asgi/
 """
 
+import sensor.routing
 import os
 
 from channels.auth import AuthMiddlewareStack
@@ -19,15 +20,14 @@
 
 django_asgi_app = get_asgi_application()
 
-import sensor.routing
 
 application = ProtocolTypeRouter({
-  "http": django_asgi_app,
-  "websocket": AllowedHostsOriginValidator(
+    "http": django_asgi_app,
+    "websocket": AllowedHostsOriginValidator(
         AuthMiddlewareStack(
             URLRouter(
                 sensor.routing.websocket_urlpatterns
             )
         )
     ),
-})
\ No newline at end of file
+})
diff --git a/raspberry/raspi/sensors/__init__.py b/raspberry/raspi/sensors/__init__.py
index 1e99560..6df2210 100644
--- a/raspberry/raspi/sensors/__init__.py
+++ b/raspberry/raspi/sensors/__init__.py
@@ -6,4 +6,5 @@
 from .ledmatrix import Matrix
 from .buzzer import Buzzer
 from .segment import Segment
-from .relay import Relay
\ No newline at end of file
+from .relay import Relay
+from .distance import Ultrasonic
diff --git a/raspberry/raspi/sensors/distance.py b/raspberry/raspi/sensors/distance.py
index fb2e37b..a72f055 100644
--- a/raspberry/raspi/sensors/distance.py
+++ b/raspberry/raspi/sensors/distance.py
@@ -1,34 +1,34 @@
-# WORK IN PROGRESS
-
 import json
 import logging
 from time import sleep
 
 from gpiozero import DistanceSensor
-from gpiozero.pins.pigpio import PiGPIOFactory
 
 
-class Ultrasound:
-    def __init__(self, pins, pin_factory=PiGPIOFactory(),
-                 setup=False):
+class Ultrasonic:
+    def __init__(self, pins, setup=False):
         self.echo = pins["E"]
         self.trigger = pins["T"]
-        self.pin_factory = pin_factory
 
         if setup:
             self.setup()
 
     def setup(self):
-        self.device = DistanceSensor(
-            echo=self.echo, trigger=self.trigger, pin_factory=self.pin_factory)
+        self.device = DistanceSensor(echo=self.echo, trigger=self.trigger)
+
+    def cleanup(self):
+        self.device.close()
 
     def read(self):
-        data = sensor.distance*100
+        distance = self.device.distance*100
+
+        message = "Distance: {:.1f} cm".format(distance)
 
         json_file = {
             "sensor": "ultrasonic",
-            "message": data,
+            "message": message,
             "message_type": "data",
+            "distance": distance
         }
 
         return json_file
@@ -54,10 +54,13 @@ def process(self, ws, delay):
         "E": 17
     }
 
-    sensor = Ultrasound(pins)
-
-    sensor.wait_for_active()
+    sensor = Ultrasonic(pins, setup=True)
 
-    while True:
-        print('Distance: ', sensor.distance * 100)
-        sleep(1)
+    try:
+        while True:
+            distance = sensor.device.distance*100
+            print('Distance: ', "Distance: {:.1f} cm".format(distance))
+            sleep(1)
+    except KeyboardInterrupt:
+        sensor.cleanup()
+        print("\nQuitting Program")
diff --git a/raspberry/raspi/utils/utils.py b/raspberry/raspi/utils/utils.py
index ffda60f..01794bf 100644
--- a/raspberry/raspi/utils/utils.py
+++ b/raspberry/raspi/utils/utils.py
@@ -13,7 +13,7 @@ async def async_receive(ws):
 
 def run(sensor, pi):
     (logger, dht11, mat8x8, dpad, array_led,
-     lcd, joystick, buzzer, segment, relay) = pi.sensors
+     lcd, joystick, buzzer, segment, relay, ultra) = pi.sensors
 
     # --- Sensor Regex --- #
     sensor_is_dht = re.search(".*dht11-.*", sensor)
@@ -24,6 +24,7 @@ def run(sensor, pi):
     sensor_is_buz = re.search(".*buzzer-.*", sensor)
     sensor_is_seg = re.search(".*7segment.*", sensor)
     sensor_is_rel = re.search(".*relay-.*", sensor)
+    sensor_is_ult = re.search(".*ultrasonic.*", sensor)
 
     # --- Extra Regex --- #
     extra_is_gauge = re.search(".*gauge.*", sensor)
@@ -86,6 +87,10 @@ def run(sensor, pi):
         relay.setup()
         relay.com.on()  # Power COM on from GPIO
 
+    # Ultrasonic
+    elif sensor_is_ult:
+        ultra.setup()
+
     while True:
         message = pi.message
         message_type = pi.message_type
@@ -149,6 +154,10 @@ def run(sensor, pi):
                 relay.com.off()  # Power COM off from GPIO
                 relay.cleanup()
 
+            # Ultrasonic
+            elif sensor_is_ult:
+                ultra.cleanup()
+
             break
 
         # --- Process --- #
@@ -228,6 +237,10 @@ def run_scroll(stop_event: threading.Event):
                 if extra_is_alarm:
                     relay.toggle_switch(1.0)
 
+            # Ultrasonic
+            elif sensor_is_ult:
+                ultra.process(pi.ws, 1.5)
+
         except RuntimeError as error:
             logger.warning(error.args[0])
             sleep(2.0)
diff --git a/raspberry/ws_control.py b/raspberry/ws_control.py
index 0dd49c7..a6984d4 100644
--- a/raspberry/ws_control.py
+++ b/raspberry/ws_control.py
@@ -11,7 +11,7 @@
 
 from raspi import (
     DHT11, LCD, ArrayLED, DPad, Joystick, Matrix, Buzzer, Segment, Relay,
-    async_receive, run
+    Ultrasonic, async_receive, run
 )
 
 
@@ -118,19 +118,28 @@ def __init__(self, server, port, pi_name):
         self.segment = Segment(seg_pins, multi=seg_multi)
 
         # --- Relay --- #
-        pins = {
+        relay_pins = {
             "COM": 21,      # Common pin
             "SWITCH": 20    # Relay coil switch
         }
 
-        self.relay = Relay(pins)
+        self.relay = Relay(relay_pins)
+
+        # --- Ultrasonic --- #
+
+        ultra_pins = {
+            "T": 18,
+            "E": 17
+        }
+
+        self.ultra = Ultrasonic(ultra_pins)
 
         # --- Misc --- #
 
         self.sensor = ""
         self.sensors = [self.logger, self.dht11, self.mat8x8, self.dpad,
                         self.array_led, self.lcd, self.joystick, self.buzzer,
-                        self.segment, self.relay]
+                        self.segment, self.relay, self.ultra]
 
 
 if __name__ == "__main__":
diff --git a/sensor/consumers.py b/sensor/consumers.py
index e338b5d..8d2c62f 100644
--- a/sensor/consumers.py
+++ b/sensor/consumers.py
@@ -50,19 +50,28 @@ async def receive(self, text_data):
             'time': now.isoformat()
         }
 
-        if (sensor == 'dht11'):
-            temp = text_data_json['temp']
-            hum = text_data_json['hum']
+        # Write data to database
+        if message_type != "command":
+            if (sensor == 'dht11'):
+                temp = text_data_json['temp']
+                hum = text_data_json['hum']
 
-            dht11_json = {
-                'temp': temp,
-                'hum': hum,
-            }
+                tmp_json = {
+                    'temp': temp,
+                    'hum': hum,
+                }
 
-            json_file = {**json_file, **dht11_json}
+                json_file = {**json_file, **tmp_json}
+
+            if (sensor == 'ultrasonic'):
+                distance = text_data_json['distance']
+
+                tmp_json = {
+                    'distance': distance,
+                }
+
+                json_file = {**json_file, **tmp_json}
 
-        # Write data to database
-        if message_type != "control":
             await self.register_data(self.pi_name, sensor, now, message)
 
         # Send message to group
@@ -84,16 +93,26 @@ async def sensor_message(self, event):
             'time': now
         }
 
-        if (sensor == 'dht11'):
-            temp = event['temp']
-            hum = event['hum']
+        if message_type != "command":
+            if (sensor == 'dht11'):
+                temp = event['temp']
+                hum = event['hum']
+
+                tmp_json = {
+                    'temp': temp,
+                    'hum': hum,
+                }
+
+                json_file = {**json_file, **tmp_json}
+
+            if (sensor == 'ultrasonic'):
+                distance = event['distance']
 
-            dht11_json = {
-                'temp': temp,
-                'hum': hum,
-            }
+                tmp_json = {
+                    'distance': distance,
+                }
 
-            json_file = {**json_file, **dht11_json}
+                json_file = {**json_file, **tmp_json}
 
         # Send message to WebSocket
         await self.send(text_data=json.dumps(json_file))
@@ -104,6 +123,7 @@ def register_data(self, raspi, sensor, time, data):
             pi = Raspi.objects.get(name=raspi)
             se = pi.sensor_set.get(name=sensor)
             se.item_set.create(datetime=time, data=data)
-        except:
-            #logging.debug("Raspi: %s | Sensor: %s | Time: %s | Data: %s" % (raspi, sensor, time, data))
+        except Exception:
+            # logging.debug("Raspi: %s | Sensor: %s | Time: %s | Data: %s" %
+            # (raspi, sensor, time, data))
             logging.debug("Sensor does not exist in database")
diff --git a/sensor/static/sensor/css/sensor/ultrasonic.css b/sensor/static/sensor/css/sensor/ultrasonic.css
new file mode 100644
index 0000000..0cd9a5a
--- /dev/null
+++ b/sensor/static/sensor/css/sensor/ultrasonic.css
@@ -0,0 +1,106 @@
+.ultra {
+  width: 30vw;
+}
+
+.ultra-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 5%;
+}
+@media (min-width: 1200px) {
+  .ultra-container {
+    padding: 2% 10%;
+  }
+}
+@media (max-width: 1199.98px) {
+  .ultra-container {
+    padding: 2% 8%;
+  }
+}
+@media (max-width: 991.98px) {
+  .ultra-container {
+    padding: 2% 6%;
+  }
+}
+@media (max-width: 767.98px) {
+  .ultra-container {
+    flex-direction: column;
+    padding: 2% 4%;
+  }
+}
+@media (max-width: 575.98px) {
+  .ultra-container {
+    flex-direction: column;
+    padding: 2% 2%;
+  }
+}
+
+.ultra-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  object-fit: fill;
+  font-style: bold;
+  text-align: center;
+  font-size: 24px;
+}
+.ultra-box p {
+  margin: 0%;
+}
+@media (min-width: 1200px) {
+  .ultra-box p {
+    font-size: 2.2rem;
+  }
+}
+@media (max-width: 1199.98px) {
+  .ultra-box p {
+    font-size: 2rem;
+  }
+}
+@media (max-width: 991.98px) {
+  .ultra-box p {
+    font-size: 1.6rem;
+  }
+}
+@media (max-width: 767.98px) {
+  .ultra-box p {
+    font-size: 1.5rem;
+  }
+}
+@media (max-width: 575.98px) {
+  .ultra-box p {
+    font-size: 1.2rem;
+  }
+}
+@media (min-width: 1200px) {
+  .ultra-box div {
+    font-size: 2rem;
+  }
+}
+@media (max-width: 1199.98px) {
+  .ultra-box div {
+    font-size: 1.6rem;
+  }
+}
+@media (max-width: 991.98px) {
+  .ultra-box div {
+    font-size: 1.4rem;
+  }
+}
+@media (max-width: 767.98px) {
+  .ultra-box div {
+    font-size: 1.2rem;
+    margin-bottom: 15%;
+  }
+}
+@media (max-width: 575.98px) {
+  .ultra-box div {
+    font-size: 1.1rem;
+    margin-bottom: 10%;
+  }
+}
+
+/*# sourceMappingURL=ultrasonic.css.map */
diff --git a/sensor/static/sensor/css/sensor/ultrasonic.css.map b/sensor/static/sensor/css/sensor/ultrasonic.css.map
new file mode 100644
index 0000000..9905637
--- /dev/null
+++ b/sensor/static/sensor/css/sensor/ultrasonic.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../scss/sensor/ultrasonic.scss","../../scss/utils/_common.scss","../../scss/third-party/bootstrap/mixins/_breakpoints.scss"],"names":[],"mappings":"AAGA;EACI;;;AAGF;ECDA;EACA;EAIA;EACA;EDiBE;;AEkCA;EFxDF;IAKI;;;AEgEF;EFrEF;IAQI;;;AE6DF;EFrEF;IAWI;;;AE0DF;EFrEF;IAcI;IACA;;;AEsDF;EFrEF;IAkBI;IACA;;;;AAMN;EC/BE;EACA;EASA;EACA;EDwBE;EAEA;EACA;EACA;;AAEA;EACE;;AEoBF;EFrBA;IAII;;;AE8BJ;EFlCA;IAOI;;;AE2BJ;EFlCA;IAUI;;;AEwBJ;EFlCA;IAaI;;;AEqBJ;EFlCA;IAgBI;;;AEKJ;EFDA;IAEI;;;AEYJ;EFdA;IAKI;;;AESJ;EFdA;IAQI;;;AEMJ;EFdA;IAWI;IACA;;;AEEJ;EFdA;IAeI;IACA","file":"ultrasonic.css"}
\ No newline at end of file
diff --git a/sensor/static/sensor/images/wiring/pins/ultrasonic.svg b/sensor/static/sensor/images/wiring/pins/ultrasonic.svg
index a2d6d4b..bd3fb2f 100644
--- a/sensor/static/sensor/images/wiring/pins/ultrasonic.svg
+++ b/sensor/static/sensor/images/wiring/pins/ultrasonic.svg
@@ -4,7 +4,7 @@
    height="136.828346pt"
    viewBox="0 0 561.826772 136.828346"
    version="1.2"
-   id="svg1005"
+   id="svg1008"
    sodipodi:docname="ultrasonic.svg"
    inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
@@ -13,7 +13,7 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
   <sodipodi:namedview
-     id="namedview1007"
+     id="namedview1010"
      pagecolor="#505050"
      bordercolor="#ffffff"
      borderopacity="1"
@@ -23,18 +23,18 @@
      inkscape:document-units="pt"
      showgrid="false"
      inkscape:zoom="1.6352905"
-     inkscape:cx="374.24543"
+     inkscape:cx="261.7272"
      inkscape:cy="91.115309"
      inkscape:window-width="1366"
      inkscape:window-height="708"
      inkscape:window-x="0"
      inkscape:window-y="19"
      inkscape:window-maximized="1"
-     inkscape:current-layer="svg1005" />
+     inkscape:current-layer="svg1008" />
   <defs
-     id="defs280">
+     id="defs283">
     <g
-       id="g158">
+       id="g161">
       <symbol
          overflow="visible"
          id="glyph0-0">
@@ -451,1974 +451,1982 @@
            d="M 11.203125 -3.671875 L 11.296875 0 L 8.140625 0 L 4.015625 -7.1875 L 3.828125 -7.1875 L 3.8125 -4.09375 L 3.921875 0 L 1.28125 0 L 1.421875 -3.421875 L 1.28125 -11.609375 L 4.421875 -11.609375 L 8.5625 -4.421875 L 8.75 -4.421875 L 8.671875 -11.5 L 11.359375 -11.65625 Z M 11.203125 -3.671875 "
            id="path155" />
       </symbol>
+      <symbol
+         overflow="visible"
+         id="glyph1-28">
+        <path
+           style="stroke:none;"
+           d="M 5.25 -6.609375 C 5.882812 -6.609375 6.429688 -6.460938 6.890625 -6.171875 C 7.347656 -5.878906 7.695312 -5.488281 7.9375 -5 C 8.175781 -4.519531 8.296875 -3.992188 8.296875 -3.421875 C 8.296875 -2.785156 8.144531 -2.191406 7.84375 -1.640625 C 7.539062 -1.085938 7.09375 -0.640625 6.5 -0.296875 C 5.90625 0.0351562 5.1875 0.203125 4.34375 0.203125 C 3.125 0.203125 2.175781 -0.160156 1.5 -0.890625 C 0.820312 -1.628906 0.484375 -2.632812 0.484375 -3.90625 C 0.484375 -5.332031 0.9375 -6.640625 1.84375 -7.828125 C 2.75 -9.015625 4.023438 -9.988281 5.671875 -10.75 L 5.8125 -10.75 L 7.703125 -9.484375 L 7.703125 -9.203125 C 6.523438 -8.753906 5.613281 -8.3125 4.96875 -7.875 C 4.332031 -7.445312 3.863281 -6.953125 3.5625 -6.390625 L 3.6875 -6.25 C 4.207031 -6.488281 4.726562 -6.609375 5.25 -6.609375 Z M 4.421875 -1.65625 C 4.847656 -1.65625 5.171875 -1.773438 5.390625 -2.015625 C 5.609375 -2.265625 5.71875 -2.628906 5.71875 -3.109375 C 5.71875 -4.117188 5.273438 -4.625 4.390625 -4.625 C 3.992188 -4.625 3.554688 -4.5 3.078125 -4.25 L 3.078125 -3.9375 C 3.078125 -3.144531 3.171875 -2.566406 3.359375 -2.203125 C 3.554688 -1.835938 3.910156 -1.65625 4.421875 -1.65625 Z M 4.421875 -1.65625 "
+           id="path158" />
+      </symbol>
     </g>
     <clipPath
        id="clip1">
       <path
          d="M 380 0 L 561.796875 0 L 561.796875 1 L 380 1 Z M 380 0 "
-         id="path160" />
+         id="path163" />
     </clipPath>
     <clipPath
        id="clip2">
       <path
          d="M 561 0 L 561.796875 0 L 561.796875 37 L 561 37 Z M 561 0 "
-         id="path163" />
+         id="path166" />
     </clipPath>
     <clipPath
        id="clip3">
       <path
          d="M 560 0 L 561.796875 0 L 561.796875 37 L 560 37 Z M 560 0 "
-         id="path166" />
+         id="path169" />
     </clipPath>
     <clipPath
        id="clip4">
       <path
          d="M 561 0 L 561.796875 0 L 561.796875 37 L 561 37 Z M 561 0 "
-         id="path169" />
+         id="path172" />
     </clipPath>
     <clipPath
        id="clip5">
       <path
          d="M 560 0 L 561.796875 0 L 561.796875 37 L 560 37 Z M 560 0 "
-         id="path172" />
+         id="path175" />
     </clipPath>
     <clipPath
        id="clip6">
       <path
          d="M 380 35 L 561.796875 35 L 561.796875 36 L 380 36 Z M 380 35 "
-         id="path175" />
+         id="path178" />
     </clipPath>
     <clipPath
        id="clip7">
       <path
          d="M 561 35 L 561.796875 35 L 561.796875 62 L 561 62 Z M 561 35 "
-         id="path178" />
+         id="path181" />
     </clipPath>
     <clipPath
        id="clip8">
       <path
          d="M 560 35 L 561.796875 35 L 561.796875 62 L 560 62 Z M 560 35 "
-         id="path181" />
+         id="path184" />
     </clipPath>
     <clipPath
        id="clip9">
       <path
          d="M 561 35 L 561.796875 35 L 561.796875 62 L 561 62 Z M 561 35 "
-         id="path184" />
+         id="path187" />
     </clipPath>
     <clipPath
        id="clip10">
       <path
          d="M 560 35 L 561.796875 35 L 561.796875 62 L 560 62 Z M 560 35 "
-         id="path187" />
+         id="path190" />
     </clipPath>
     <clipPath
        id="clip11">
       <path
          d="M 380 60 L 561.796875 60 L 561.796875 61 L 380 61 Z M 380 60 "
-         id="path190" />
+         id="path193" />
     </clipPath>
     <clipPath
        id="clip12">
       <path
          d="M 561 60 L 561.796875 60 L 561.796875 87 L 561 87 Z M 561 60 "
-         id="path193" />
+         id="path196" />
     </clipPath>
     <clipPath
        id="clip13">
       <path
          d="M 560 60 L 561.796875 60 L 561.796875 87 L 560 87 Z M 560 60 "
-         id="path196" />
+         id="path199" />
     </clipPath>
     <clipPath
        id="clip14">
       <path
          d="M 561 60 L 561.796875 60 L 561.796875 87 L 561 87 Z M 561 60 "
-         id="path199" />
+         id="path202" />
     </clipPath>
     <clipPath
        id="clip15">
       <path
          d="M 560 60 L 561.796875 60 L 561.796875 87 L 560 87 Z M 560 60 "
-         id="path202" />
+         id="path205" />
     </clipPath>
     <clipPath
        id="clip16">
       <path
          d="M 380 85 L 561.796875 85 L 561.796875 86 L 380 86 Z M 380 85 "
-         id="path205" />
+         id="path208" />
     </clipPath>
     <clipPath
        id="clip17">
       <path
          d="M 561 85 L 561.796875 85 L 561.796875 112 L 561 112 Z M 561 85 "
-         id="path208" />
+         id="path211" />
     </clipPath>
     <clipPath
        id="clip18">
       <path
          d="M 560 85 L 561.796875 85 L 561.796875 112 L 560 112 Z M 560 85 "
-         id="path211" />
+         id="path214" />
     </clipPath>
     <clipPath
        id="clip19">
       <path
          d="M 561 85 L 561.796875 85 L 561.796875 112 L 561 112 Z M 561 85 "
-         id="path214" />
+         id="path217" />
     </clipPath>
     <clipPath
        id="clip20">
       <path
          d="M 560 85 L 561.796875 85 L 561.796875 112 L 560 112 Z M 560 85 "
-         id="path217" />
+         id="path220" />
     </clipPath>
     <clipPath
        id="clip21">
       <path
          d="M 0 135 L 181 135 L 181 136.800781 L 0 136.800781 Z M 0 135 "
-         id="path220" />
+         id="path223" />
     </clipPath>
     <clipPath
        id="clip22">
       <path
          d="M 0 136 L 181 136 L 181 136.800781 L 0 136.800781 Z M 0 136 "
-         id="path223" />
+         id="path226" />
     </clipPath>
     <clipPath
        id="clip23">
       <path
          d="M 0 110 L 1 110 L 1 136.800781 L 0 136.800781 Z M 0 110 "
-         id="path226" />
+         id="path229" />
     </clipPath>
     <clipPath
        id="clip24">
       <path
          d="M 179 135 L 382 135 L 382 136.800781 L 179 136.800781 Z M 179 135 "
-         id="path229" />
+         id="path232" />
     </clipPath>
     <clipPath
        id="clip25">
       <path
          d="M 179 136 L 382 136 L 382 136.800781 L 179 136.800781 Z M 179 136 "
-         id="path232" />
+         id="path235" />
     </clipPath>
     <clipPath
        id="clip26">
       <path
          d="M 179 110 L 180 110 L 180 136.800781 L 179 136.800781 Z M 179 110 "
-         id="path235" />
+         id="path238" />
     </clipPath>
     <clipPath
        id="clip27">
       <path
          d="M 380 110 L 561.796875 110 L 561.796875 111 L 380 111 Z M 380 110 "
-         id="path238" />
+         id="path241" />
     </clipPath>
     <clipPath
        id="clip28">
       <path
          d="M 380 135 L 561.796875 135 L 561.796875 136.800781 L 380 136.800781 Z M 380 135 "
-         id="path241" />
+         id="path244" />
     </clipPath>
     <clipPath
        id="clip29">
       <path
          d="M 380 136 L 561.796875 136 L 561.796875 136.800781 L 380 136.800781 Z M 380 136 "
-         id="path244" />
+         id="path247" />
     </clipPath>
     <clipPath
        id="clip30">
       <path
          d="M 380 110 L 382 110 L 382 136.800781 L 380 136.800781 Z M 380 110 "
-         id="path247" />
+         id="path250" />
     </clipPath>
     <clipPath
        id="clip31">
       <path
          d="M 561 110 L 561.796875 110 L 561.796875 136.800781 L 561 136.800781 Z M 561 110 "
-         id="path250" />
+         id="path253" />
     </clipPath>
     <clipPath
        id="clip32">
       <path
          d="M 560 110 L 561.796875 110 L 561.796875 136.800781 L 560 136.800781 Z M 560 110 "
-         id="path253" />
+         id="path256" />
     </clipPath>
     <clipPath
        id="clip33">
       <path
          d="M 561 110 L 561.796875 110 L 561.796875 136.800781 L 561 136.800781 Z M 561 110 "
-         id="path256" />
+         id="path259" />
     </clipPath>
     <clipPath
        id="clip34">
       <path
          d="M 560 110 L 561.796875 110 L 561.796875 136.800781 L 560 136.800781 Z M 560 110 "
-         id="path259" />
+         id="path262" />
     </clipPath>
     <clipPath
        id="clip35">
       <path
          d="M 0 135 L 181 135 L 181 136.800781 L 0 136.800781 Z M 0 135 "
-         id="path262" />
+         id="path265" />
     </clipPath>
     <clipPath
        id="clip36">
       <path
          d="M 0 136 L 181 136 L 181 136.800781 L 0 136.800781 Z M 0 136 "
-         id="path265" />
+         id="path268" />
     </clipPath>
     <clipPath
        id="clip37">
       <path
          d="M 179 135 L 382 135 L 382 136.800781 L 179 136.800781 Z M 179 135 "
-         id="path268" />
+         id="path271" />
     </clipPath>
     <clipPath
        id="clip38">
       <path
          d="M 179 136 L 382 136 L 382 136.800781 L 179 136.800781 Z M 179 136 "
-         id="path271" />
+         id="path274" />
     </clipPath>
     <clipPath
        id="clip39">
       <path
          d="M 380 135 L 561.796875 135 L 561.796875 136.800781 L 380 136.800781 Z M 380 135 "
-         id="path274" />
+         id="path277" />
     </clipPath>
     <clipPath
        id="clip40">
       <path
          d="M 380 136 L 561.796875 136 L 561.796875 136.800781 L 380 136.800781 Z M 380 136 "
-         id="path277" />
+         id="path280" />
     </clipPath>
   </defs>
   <g
-     id="surface2122">
+     id="surface2570">
     <path
        style=" stroke:none;fill-rule:evenodd;fill:rgb(18.431091%,30.979919%,30.979919%);fill-opacity:1;"
        d="M 0.0273438 35.6875 L 560.75 35.6875 L 560.75 -0.0859375 L 0.0273438 -0.0859375 Z M 0.0273438 35.6875 "
-       id="path282" />
+       id="path285" />
     <path
        style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M -0.199219 136.828346 L 179.886719 136.828346 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path284" />
+       id="path287" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 0.199219 136.515846 L 179.488281 136.515846 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path286" />
+       id="path289" />
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 0.3125 136.629128 L 0.3125 101.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path288" />
+       id="path291" />
     <path
        style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 0 137.027565 L 0 100.941628 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path290" />
+       id="path293" />
     <path
        style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.488281 136.828346 L 381.289062 136.828346 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path292" />
+       id="path295" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.886719 136.515846 L 380.890625 136.515846 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path294" />
+       id="path297" />
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 180 136.629128 L 180 101.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path296" />
+       id="path299" />
     <path
        style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.6875 137.027565 L 179.6875 100.941628 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path298" />
+       id="path301" />
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.375 136.629128 L 179.375 101.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path300" />
+       id="path303" />
     <g
        clip-path="url(#clip1)"
        clip-rule="nonzero"
-       id="g304">
+       id="g307">
       <path
          style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 380.890625 136.828346 L 561.003906 136.828346 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path302" />
+         id="path305" />
     </g>
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 381.289062 136.515846 L 560.609375 136.515846 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path306" />
+       id="path309" />
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 381.402344 136.629128 L 381.402344 101.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path308" />
+       id="path311" />
     <path
        style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 381.089844 137.027565 L 381.089844 100.941628 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path310" />
+       id="path313" />
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 380.777344 136.629128 L 380.777344 101.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path312" />
+       id="path315" />
     <g
        clip-path="url(#clip2)"
        clip-rule="nonzero"
-       id="g316">
+       id="g319">
       <path
          style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 561.117188 137.226784 L 561.117188 100.742409 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path314" />
+         id="path317" />
     </g>
     <g
        clip-path="url(#clip3)"
        clip-rule="nonzero"
-       id="g320">
+       id="g323">
       <path
          style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 560.804688 137.027565 L 560.804688 100.941628 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path318" />
+         id="path321" />
     </g>
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 560.492188 136.629128 L 560.492188 101.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path322" />
+       id="path325" />
     <g
        clip-path="url(#clip4)"
        clip-rule="nonzero"
-       id="g326">
+       id="g329">
       <path
          style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 561.117188 137.226784 L 561.117188 100.742409 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path324" />
+         id="path327" />
     </g>
     <g
        clip-path="url(#clip5)"
        clip-rule="nonzero"
-       id="g330">
+       id="g333">
       <path
          style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 560.804688 137.027565 L 560.804688 100.941628 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path328" />
+         id="path331" />
     </g>
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 560.492188 136.629128 L 560.492188 101.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path332" />
+       id="path335" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 0.199219 101.453346 L 179.488281 101.453346 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path334" />
+       id="path337" />
     <path
        style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M -0.199219 101.140846 L 179.886719 101.140846 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path336" />
+       id="path339" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 0.199219 100.828346 L 179.488281 100.828346 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path338" />
+       id="path341" />
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 0.3125 100.941628 L 0.3125 76.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path340" />
+       id="path343" />
     <path
        style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 0 101.336159 L 0 75.941628 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path342" />
+       id="path345" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.886719 101.453346 L 380.890625 101.453346 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path344" />
+       id="path347" />
     <path
        style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.488281 101.140846 L 381.289062 101.140846 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path346" />
+       id="path349" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.886719 100.828346 L 380.890625 100.828346 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path348" />
+       id="path351" />
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 180 100.941628 L 180 76.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path350" />
+       id="path353" />
     <path
        style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.6875 101.336159 L 179.6875 75.941628 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path352" />
+       id="path355" />
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.375 100.941628 L 179.375 76.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path354" />
+       id="path357" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 381.289062 101.453346 L 560.609375 101.453346 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path356" />
+       id="path359" />
     <g
        clip-path="url(#clip6)"
        clip-rule="nonzero"
-       id="g360">
+       id="g363">
       <path
          style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 380.890625 101.140846 L 561.003906 101.140846 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path358" />
+         id="path361" />
     </g>
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 381.289062 100.828346 L 560.609375 100.828346 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path362" />
+       id="path365" />
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 381.402344 100.941628 L 381.402344 76.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path364" />
+       id="path367" />
     <path
        style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 381.089844 101.336159 L 381.089844 75.941628 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path366" />
+       id="path369" />
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 380.777344 100.941628 L 380.777344 76.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path368" />
+       id="path371" />
     <g
        clip-path="url(#clip7)"
        clip-rule="nonzero"
-       id="g372">
+       id="g375">
       <path
          style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 561.117188 101.535378 L 561.117188 75.742409 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path370" />
+         id="path373" />
     </g>
     <g
        clip-path="url(#clip8)"
        clip-rule="nonzero"
-       id="g376">
+       id="g379">
       <path
          style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 560.804688 101.336159 L 560.804688 75.941628 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path374" />
+         id="path377" />
     </g>
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 560.492188 100.941628 L 560.492188 76.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path378" />
+       id="path381" />
     <g
        clip-path="url(#clip9)"
        clip-rule="nonzero"
-       id="g382">
+       id="g385">
       <path
          style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 561.117188 101.535378 L 561.117188 75.742409 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path380" />
+         id="path383" />
     </g>
     <g
        clip-path="url(#clip10)"
        clip-rule="nonzero"
-       id="g386">
+       id="g389">
       <path
          style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 560.804688 101.336159 L 560.804688 75.941628 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path384" />
+         id="path387" />
     </g>
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 560.492188 100.941628 L 560.492188 76.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path388" />
+       id="path391" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 0.199219 76.44944 L 179.488281 76.44944 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path390" />
+       id="path393" />
     <path
        style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M -0.199219 76.13694 L 179.886719 76.13694 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path392" />
+       id="path395" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 0.199219 75.82444 L 179.488281 75.82444 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path394" />
+       id="path397" />
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 0.3125 75.941628 L 0.3125 51.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path396" />
+       id="path399" />
     <path
        style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 0 76.336159 L 0 50.937721 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path398" />
+       id="path401" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.886719 76.44944 L 380.890625 76.44944 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path400" />
+       id="path403" />
     <path
        style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.488281 76.13694 L 381.289062 76.13694 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path402" />
+       id="path405" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.886719 75.82444 L 380.890625 75.82444 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path404" />
+       id="path407" />
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 180 75.941628 L 180 51.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path406" />
+       id="path409" />
     <path
        style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.6875 76.336159 L 179.6875 50.937721 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path408" />
+       id="path411" />
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.375 75.941628 L 179.375 51.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path410" />
+       id="path413" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 381.289062 76.44944 L 560.609375 76.44944 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path412" />
+       id="path415" />
     <g
        clip-path="url(#clip11)"
        clip-rule="nonzero"
-       id="g416">
+       id="g419">
       <path
          style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 380.890625 76.13694 L 561.003906 76.13694 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path414" />
+         id="path417" />
     </g>
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 381.289062 75.82444 L 560.609375 75.82444 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path418" />
+       id="path421" />
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 381.402344 75.941628 L 381.402344 51.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path420" />
+       id="path423" />
     <path
        style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 381.089844 76.336159 L 381.089844 50.937721 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path422" />
+       id="path425" />
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 380.777344 75.941628 L 380.777344 51.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path424" />
+       id="path427" />
     <g
        clip-path="url(#clip12)"
        clip-rule="nonzero"
-       id="g428">
+       id="g431">
       <path
          style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 561.117188 76.535378 L 561.117188 50.738503 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path426" />
+         id="path429" />
     </g>
     <g
        clip-path="url(#clip13)"
        clip-rule="nonzero"
-       id="g432">
+       id="g435">
       <path
          style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 560.804688 76.336159 L 560.804688 50.937721 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path430" />
+         id="path433" />
     </g>
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 560.492188 75.941628 L 560.492188 51.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path434" />
+       id="path437" />
     <g
        clip-path="url(#clip14)"
        clip-rule="nonzero"
-       id="g438">
+       id="g441">
       <path
          style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 561.117188 76.535378 L 561.117188 50.738503 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path436" />
+         id="path439" />
     </g>
     <g
        clip-path="url(#clip15)"
        clip-rule="nonzero"
-       id="g442">
+       id="g445">
       <path
          style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 560.804688 76.336159 L 560.804688 50.937721 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path440" />
+         id="path443" />
     </g>
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 560.492188 75.941628 L 560.492188 51.336159 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path444" />
+       id="path447" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 0.199219 51.44944 L 179.488281 51.44944 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path446" />
+       id="path449" />
     <path
        style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M -0.199219 51.13694 L 179.886719 51.13694 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path448" />
+       id="path451" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 0.199219 50.82444 L 179.488281 50.82444 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path450" />
+       id="path453" />
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 0.3125 50.937721 L 0.3125 26.332253 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path452" />
+       id="path455" />
     <path
        style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 0 51.336159 L 0 25.937721 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path454" />
+       id="path457" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.886719 51.44944 L 380.890625 51.44944 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path456" />
+       id="path459" />
     <path
        style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.488281 51.13694 L 381.289062 51.13694 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path458" />
+       id="path461" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.886719 50.82444 L 380.890625 50.82444 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path460" />
+       id="path463" />
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 180 50.937721 L 180 26.332253 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path462" />
+       id="path465" />
     <path
        style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.6875 51.336159 L 179.6875 25.937721 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path464" />
+       id="path467" />
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.375 50.937721 L 179.375 26.332253 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path466" />
+       id="path469" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 381.289062 51.44944 L 560.609375 51.44944 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path468" />
+       id="path471" />
     <g
        clip-path="url(#clip16)"
        clip-rule="nonzero"
-       id="g472">
+       id="g475">
       <path
          style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 380.890625 51.13694 L 561.003906 51.13694 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path470" />
+         id="path473" />
     </g>
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 381.289062 50.82444 L 560.609375 50.82444 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path474" />
+       id="path477" />
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 381.402344 50.937721 L 381.402344 26.332253 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path476" />
+       id="path479" />
     <path
        style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 381.089844 51.336159 L 381.089844 25.937721 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path478" />
+       id="path481" />
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 380.777344 50.937721 L 380.777344 26.332253 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path480" />
+       id="path483" />
     <g
        clip-path="url(#clip17)"
        clip-rule="nonzero"
-       id="g484">
+       id="g487">
       <path
          style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 561.117188 51.535378 L 561.117188 25.738503 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path482" />
+         id="path485" />
     </g>
     <g
        clip-path="url(#clip18)"
        clip-rule="nonzero"
-       id="g488">
+       id="g491">
       <path
          style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 560.804688 51.336159 L 560.804688 25.937721 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path486" />
+         id="path489" />
     </g>
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 560.492188 50.937721 L 560.492188 26.332253 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path490" />
+       id="path493" />
     <g
        clip-path="url(#clip19)"
        clip-rule="nonzero"
-       id="g494">
+       id="g497">
       <path
          style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 561.117188 51.535378 L 561.117188 25.738503 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path492" />
+         id="path495" />
     </g>
     <g
        clip-path="url(#clip20)"
        clip-rule="nonzero"
-       id="g498">
+       id="g501">
       <path
          style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 560.804688 51.336159 L 560.804688 25.937721 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path496" />
+         id="path499" />
     </g>
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 560.492188 50.937721 L 560.492188 26.332253 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path500" />
+       id="path503" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 0.199219 26.445534 L 179.488281 26.445534 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path502" />
+       id="path505" />
     <path
        style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M -0.199219 26.13694 L 179.886719 26.13694 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path504" />
+       id="path507" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 0.199219 25.82444 L 179.488281 25.82444 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path506" />
+       id="path509" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 0.199219 1.332253 L 179.488281 1.332253 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path508" />
+       id="path511" />
     <g
        clip-path="url(#clip21)"
        clip-rule="nonzero"
-       id="g512">
+       id="g515">
       <path
          style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M -0.199219 1.019753 L 179.886719 1.019753 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path510" />
+         id="path513" />
     </g>
     <g
        clip-path="url(#clip22)"
        clip-rule="nonzero"
-       id="g516">
+       id="g519">
       <path
          style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M -0.398438 0.707253 L 180.085938 0.707253 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path514" />
+         id="path517" />
     </g>
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 0.3125 25.937721 L 0.3125 1.218971 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path518" />
+       id="path521" />
     <g
        clip-path="url(#clip23)"
        clip-rule="nonzero"
-       id="g522">
+       id="g525">
       <path
          style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 0 26.332253 L 0 0.820534 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path520" />
+         id="path523" />
     </g>
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.886719 26.445534 L 380.890625 26.445534 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path524" />
+       id="path527" />
     <path
        style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.488281 26.13694 L 381.289062 26.13694 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path526" />
+       id="path529" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.886719 25.82444 L 380.890625 25.82444 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path528" />
+       id="path531" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.886719 1.332253 L 380.890625 1.332253 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path530" />
+       id="path533" />
     <g
        clip-path="url(#clip24)"
        clip-rule="nonzero"
-       id="g534">
+       id="g537">
       <path
          style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 179.488281 1.019753 L 381.289062 1.019753 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path532" />
+         id="path535" />
     </g>
     <g
        clip-path="url(#clip25)"
        clip-rule="nonzero"
-       id="g538">
+       id="g541">
       <path
          style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 179.289062 0.707253 L 381.488281 0.707253 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path536" />
+         id="path539" />
     </g>
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 180 25.937721 L 180 1.218971 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path540" />
+       id="path543" />
     <g
        clip-path="url(#clip26)"
        clip-rule="nonzero"
-       id="g544">
+       id="g547">
       <path
          style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 179.6875 26.332253 L 179.6875 0.820534 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path542" />
+         id="path545" />
     </g>
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.375 25.937721 L 179.375 1.218971 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path546" />
+       id="path549" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 381.289062 26.445534 L 560.609375 26.445534 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path548" />
+       id="path551" />
     <g
        clip-path="url(#clip27)"
        clip-rule="nonzero"
-       id="g552">
+       id="g555">
       <path
          style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 380.890625 26.13694 L 561.003906 26.13694 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path550" />
+         id="path553" />
     </g>
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 381.289062 25.82444 L 560.609375 25.82444 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path554" />
+       id="path557" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 381.289062 1.332253 L 560.609375 1.332253 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path556" />
+       id="path559" />
     <g
        clip-path="url(#clip28)"
        clip-rule="nonzero"
-       id="g560">
+       id="g563">
       <path
          style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 380.890625 1.019753 L 561.003906 1.019753 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path558" />
+         id="path561" />
     </g>
     <g
        clip-path="url(#clip29)"
        clip-rule="nonzero"
-       id="g564">
+       id="g567">
       <path
          style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 380.691406 0.707253 L 561.203125 0.707253 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path562" />
+         id="path565" />
     </g>
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 381.402344 25.937721 L 381.402344 1.218971 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path566" />
+       id="path569" />
     <g
        clip-path="url(#clip30)"
        clip-rule="nonzero"
-       id="g570">
+       id="g573">
       <path
          style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 381.089844 26.332253 L 381.089844 0.820534 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path568" />
+         id="path571" />
     </g>
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 380.777344 25.937721 L 380.777344 1.218971 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path572" />
+       id="path575" />
     <g
        clip-path="url(#clip31)"
        clip-rule="nonzero"
-       id="g576">
+       id="g579">
       <path
          style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 561.117188 26.531471 L 561.117188 0.621315 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path574" />
+         id="path577" />
     </g>
     <g
        clip-path="url(#clip32)"
        clip-rule="nonzero"
-       id="g580">
+       id="g583">
       <path
          style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 560.804688 26.332253 L 560.804688 0.820534 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path578" />
+         id="path581" />
     </g>
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 560.492188 25.937721 L 560.492188 1.218971 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path582" />
+       id="path585" />
     <g
        clip-path="url(#clip33)"
        clip-rule="nonzero"
-       id="g586">
+       id="g589">
       <path
          style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 561.117188 26.531471 L 561.117188 0.621315 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path584" />
+         id="path587" />
     </g>
     <g
        clip-path="url(#clip34)"
        clip-rule="nonzero"
-       id="g590">
+       id="g593">
       <path
          style="fill:none;stroke-width:0.39949;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 560.804688 26.332253 L 560.804688 0.820534 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path588" />
+         id="path591" />
     </g>
     <path
        style="fill:none;stroke-width:0.19955;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 560.492188 25.937721 L 560.492188 1.218971 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path592" />
+       id="path595" />
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 0.199219 1.332253 L 179.488281 1.332253 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path594" />
+       id="path597" />
     <g
        clip-path="url(#clip35)"
        clip-rule="nonzero"
-       id="g598">
+       id="g601">
       <path
          style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M -0.199219 1.019753 L 179.886719 1.019753 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path596" />
+         id="path599" />
     </g>
     <g
        clip-path="url(#clip36)"
        clip-rule="nonzero"
-       id="g602">
+       id="g605">
       <path
          style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M -0.398438 0.707253 L 180.085938 0.707253 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path600" />
+         id="path603" />
     </g>
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 179.886719 1.332253 L 380.890625 1.332253 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path604" />
+       id="path607" />
     <g
        clip-path="url(#clip37)"
        clip-rule="nonzero"
-       id="g608">
+       id="g611">
       <path
          style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 179.488281 1.019753 L 381.289062 1.019753 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path606" />
+         id="path609" />
     </g>
     <g
        clip-path="url(#clip38)"
        clip-rule="nonzero"
-       id="g612">
+       id="g615">
       <path
          style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 179.289062 0.707253 L 381.488281 0.707253 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path610" />
+         id="path613" />
     </g>
     <path
        style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(32.548523%,32.548523%,32.548523%);stroke-opacity:1;stroke-miterlimit:10;"
        d="M 381.289062 1.332253 L 560.609375 1.332253 "
        transform="matrix(1,0,0,-1,0,136.828346)"
-       id="path614" />
+       id="path617" />
     <g
        clip-path="url(#clip39)"
        clip-rule="nonzero"
-       id="g618">
+       id="g621">
       <path
          style="fill:none;stroke-width:0.39712;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(16.470337%,16.470337%,16.470337%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 380.890625 1.019753 L 561.003906 1.019753 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path616" />
+         id="path619" />
     </g>
     <g
        clip-path="url(#clip40)"
        clip-rule="nonzero"
-       id="g622">
+       id="g625">
       <path
          style="fill:none;stroke-width:0.1987;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;"
          d="M 380.691406 0.707253 L 561.203125 0.707253 "
          transform="matrix(1,0,0,-1,0,136.828346)"
-         id="path620" />
+         id="path623" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g628">
+       id="g631">
       <use
          xlink:href="#glyph0-1"
          x="10.091"
          y="23.414346"
-         id="use624" />
+         id="use627" />
       <use
          xlink:href="#glyph0-2"
          x="23.072444"
          y="23.414346"
-         id="use626" />
+         id="use629" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g632">
+       id="g635">
       <use
          xlink:href="#glyph0-3"
          x="28.555985"
          y="23.414346"
-         id="use630" />
+         id="use633" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g640">
+       id="g643">
       <use
          xlink:href="#glyph0-4"
          x="36.14981"
          y="23.414346"
-         id="use634" />
+         id="use637" />
       <use
          xlink:href="#glyph0-5"
          x="44.031401"
          y="23.414346"
-         id="use636" />
+         id="use639" />
       <use
          xlink:href="#glyph0-6"
          x="54.806639"
          y="23.414346"
-         id="use638" />
+         id="use641" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g646">
+       id="g649">
       <use
          xlink:href="#glyph0-7"
          x="64.302917"
          y="23.414346"
-         id="use642" />
+         id="use645" />
       <use
          xlink:href="#glyph0-8"
          x="75.285986"
          y="23.414346"
-         id="use644" />
+         id="use647" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g650">
+       id="g653">
       <use
          xlink:href="#glyph0-9"
          x="86.66873"
          y="23.414346"
-         id="use648" />
+         id="use651" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g654">
+       id="g657">
       <use
          xlink:href="#glyph0-10"
          x="92.152271"
          y="23.414346"
-         id="use652" />
+         id="use655" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g658">
+       id="g661">
       <use
          xlink:href="#glyph0-11"
          x="101.632562"
          y="23.414346"
-         id="use656" />
+         id="use659" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g662">
+       id="g665">
       <use
          xlink:href="#glyph0-12"
          x="107.212025"
          y="23.414346"
-         id="use660" />
+         id="use663" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g666">
+       id="g669">
       <use
          xlink:href="#glyph0-13"
          x="118.706678"
          y="23.414346"
-         id="use664" />
+         id="use667" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g670">
+       id="g673">
       <use
          xlink:href="#glyph0-8"
          x="129.577838"
          y="23.414346"
-         id="use668" />
+         id="use671" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g674">
+       id="g677">
       <use
          xlink:href="#glyph0-6"
          x="140.960582"
          y="23.414346"
-         id="use672" />
+         id="use675" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g680">
+       id="g683">
       <use
          xlink:href="#glyph0-7"
          x="150.45686"
          y="23.414346"
-         id="use676" />
+         id="use679" />
       <use
          xlink:href="#glyph0-4"
          x="161.439929"
          y="23.414346"
-         id="use678" />
+         id="use681" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g684">
+       id="g687">
       <use
          xlink:href="#glyph0-14"
          x="204.094"
          y="23.414346"
-         id="use682" />
+         id="use685" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g690">
+       id="g693">
       <use
          xlink:href="#glyph0-5"
          x="216.388003"
          y="23.414346"
-         id="use686" />
+         id="use689" />
       <use
          xlink:href="#glyph0-6"
          x="227.163241"
          y="23.414346"
-         id="use688" />
+         id="use691" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g694">
+       id="g697">
       <use
          xlink:href="#glyph0-15"
          x="236.659519"
          y="23.414346"
-         id="use692" />
+         id="use695" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g698">
+       id="g701">
       <use
          xlink:href="#glyph0-16"
          x="248.138185"
          y="23.414346"
-         id="use696" />
+         id="use699" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g702">
+       id="g705">
       <use
          xlink:href="#glyph0-13"
          x="259.616851"
          y="23.414346"
-         id="use700" />
+         id="use703" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g710">
+       id="g713">
       <use
          xlink:href="#glyph0-4"
          x="270.488011"
          y="23.414346"
-         id="use704" />
+         id="use707" />
       <use
          xlink:href="#glyph0-4"
          x="278.369602"
          y="23.414346"
-         id="use706" />
+         id="use709" />
       <use
          xlink:href="#glyph0-17"
          x="286.251193"
          y="23.414346"
-         id="use708" />
+         id="use711" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g714">
+       id="g717">
       <use
          xlink:href="#glyph0-11"
          x="296.642743"
          y="23.414346"
-         id="use712" />
+         id="use715" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g718">
+       id="g721">
       <use
          xlink:href="#glyph0-18"
          x="302.222206"
          y="23.414346"
-         id="use716" />
+         id="use719" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g724">
+       id="g727">
       <use
          xlink:href="#glyph0-19"
          x="309.512278"
          y="23.414346"
-         id="use720" />
+         id="use723" />
       <use
          xlink:href="#glyph0-20"
          x="321.694372"
          y="23.414346"
-         id="use722" />
+         id="use725" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g728">
+       id="g731">
       <use
          xlink:href="#glyph0-21"
          x="333.380869"
          y="23.414346"
-         id="use726" />
+         id="use729" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g732">
+       id="g735">
       <use
          xlink:href="#glyph0-22"
          x="349.271947"
          y="23.414346"
-         id="use730" />
+         id="use733" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g736">
+       id="g739">
       <use
          xlink:href="#glyph0-14"
          x="387.808"
          y="23.414346"
-         id="use734" />
+         id="use737" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g742">
+       id="g745">
       <use
          xlink:href="#glyph0-5"
          x="400.102003"
          y="23.414346"
-         id="use738" />
+         id="use741" />
       <use
          xlink:href="#glyph0-6"
          x="410.877241"
          y="23.414346"
-         id="use740" />
+         id="use743" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g746">
+       id="g749">
       <use
          xlink:href="#glyph0-15"
          x="420.373519"
          y="23.414346"
-         id="use744" />
+         id="use747" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g750">
+       id="g753">
       <use
          xlink:href="#glyph0-16"
          x="431.852185"
          y="23.414346"
-         id="use748" />
+         id="use751" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g754">
+       id="g757">
       <use
          xlink:href="#glyph0-13"
          x="443.330851"
          y="23.414346"
-         id="use752" />
+         id="use755" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g762">
+       id="g765">
       <use
          xlink:href="#glyph0-4"
          x="454.202011"
          y="23.414346"
-         id="use756" />
+         id="use759" />
       <use
          xlink:href="#glyph0-4"
          x="462.083602"
          y="23.414346"
-         id="use758" />
+         id="use761" />
       <use
          xlink:href="#glyph0-17"
          x="469.965193"
          y="23.414346"
-         id="use760" />
+         id="use763" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g766">
+       id="g769">
       <use
          xlink:href="#glyph0-11"
          x="480.356743"
          y="23.414346"
-         id="use764" />
+         id="use767" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g770">
+       id="g773">
       <use
          xlink:href="#glyph0-18"
          x="485.936206"
          y="23.414346"
-         id="use768" />
+         id="use771" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g782">
+       id="g785">
       <use
          xlink:href="#glyph0-19"
          x="493.226278"
          y="23.414346"
-         id="use772" />
+         id="use775" />
       <use
          xlink:href="#glyph0-7"
          x="505.408372"
          y="23.414346"
-         id="use774" />
+         id="use777" />
       <use
          xlink:href="#glyph0-5"
          x="516.391441"
          y="23.414346"
-         id="use776" />
+         id="use779" />
       <use
          xlink:href="#glyph0-4"
          x="527.166679"
          y="23.414346"
-         id="use778" />
+         id="use781" />
       <use
          xlink:href="#glyph0-23"
          x="535.04827"
          y="23.414346"
-         id="use780" />
+         id="use783" />
     </g>
     <g
        style="fill:rgb(100%,100%,100%);fill-opacity:1;"
-       id="g786">
+       id="g789">
       <use
          xlink:href="#glyph0-22"
          x="546.526936"
          y="23.414346"
-         id="use784" />
+         id="use787" />
     </g>
     <g
        style="fill:rgb(100%,0%,0%);fill-opacity:1;"
-       id="g794">
+       id="g797">
       <use
          xlink:href="#glyph1-1"
          x="75.09"
          y="53.688346"
-         id="use788" />
+         id="use791" />
       <use
          xlink:href="#glyph1-2"
          x="85.872"
          y="53.688346"
-         id="use790" />
+         id="use793" />
       <use
          xlink:href="#glyph1-2"
          x="95.16"
          y="53.688346"
-         id="use792" />
+         id="use795" />
     </g>
     <g
        style="fill:rgb(100%,0%,0%);fill-opacity:1;"
-       id="g802">
+       id="g805">
       <use
          xlink:href="#glyph1-3"
          x="249.704"
          y="53.688346"
-         id="use796" />
+         id="use799" />
       <use
          xlink:href="#glyph1-1"
          x="257.588"
          y="53.688346"
-         id="use798" />
+         id="use801" />
       <use
          xlink:href="#glyph1-4"
          x="268.37"
          y="53.688346"
-         id="use800" />
+         id="use803" />
     </g>
     <g
        style="fill:rgb(100%,0%,0%);fill-opacity:1;"
-       id="g806">
+       id="g809">
       <use
          xlink:href="#glyph1-4"
          x="270.962"
          y="53.688346"
-         id="use804" />
+         id="use807" />
     </g>
     <g
        style="fill:rgb(100%,0%,0%);fill-opacity:1;"
-       id="g810">
+       id="g813">
       <use
          xlink:href="#glyph1-5"
          x="273.554"
          y="53.688346"
-         id="use808" />
+         id="use811" />
     </g>
     <g
        style="fill:rgb(100%,0%,0%);fill-opacity:1;"
-       id="g814">
+       id="g817">
       <use
          xlink:href="#glyph1-6"
          x="283.832"
          y="53.688346"
-         id="use812" />
+         id="use815" />
     </g>
     <g
        style="fill:rgb(100%,0%,0%);fill-opacity:1;"
-       id="g818">
+       id="g821">
       <use
          xlink:href="#glyph1-7"
          x="300.14"
          y="53.688346"
-         id="use816" />
+         id="use819" />
     </g>
     <g
        style="fill:rgb(78.038025%,8.235168%,52.156067%);fill-opacity:1;"
-       id="g822">
+       id="g825">
       <use
          xlink:href="#glyph1-8"
          x="466.696"
          y="53.688346"
-         id="use820" />
+         id="use823" />
     </g>
     <g
        style="fill:rgb(11.764526%,56.469727%,100%);fill-opacity:1;"
-       id="g828">
+       id="g831">
       <use
          xlink:href="#glyph1-9"
          x="71.688"
          y="78.690346"
-         id="use824" />
+         id="use827" />
       <use
          xlink:href="#glyph1-7"
          x="80.868"
          y="78.690346"
-         id="use826" />
+         id="use829" />
     </g>
     <g
        style="fill:rgb(11.764526%,56.469727%,100%);fill-opacity:1;"
-       id="g832">
+       id="g835">
       <use
          xlink:href="#glyph1-10"
          x="91.776"
          y="78.690346"
-         id="use830" />
+         id="use833" />
     </g>
     <g
        style="fill:rgb(11.764526%,56.469727%,100%);fill-opacity:1;"
-       id="g836">
+       id="g839">
       <use
          xlink:href="#glyph1-11"
          x="97.284"
          y="78.690346"
-         id="use834" />
+         id="use837" />
     </g>
     <g
        style="fill:rgb(0%,50.195312%,50.195312%);fill-opacity:1;"
-       id="g840">
+       id="g843">
       <use
          xlink:href="#glyph1-11"
          x="253.587"
          y="78.690346"
-         id="use838" />
+         id="use841" />
     </g>
     <g
        style="fill:rgb(0%,50.195312%,50.195312%);fill-opacity:1;"
-       id="g844">
+       id="g847">
       <use
          xlink:href="#glyph1-5"
          x="264.279"
          y="78.690346"
-         id="use842" />
+         id="use845" />
     </g>
     <g
        style="fill:rgb(0%,50.195312%,50.195312%);fill-opacity:1;"
-       id="g848">
+       id="g851">
       <use
          xlink:href="#glyph1-10"
          x="274.557"
          y="78.690346"
-         id="use846" />
+         id="use849" />
     </g>
     <g
        style="fill:rgb(0%,50.195312%,50.195312%);fill-opacity:1;"
-       id="g852">
+       id="g855">
       <use
          xlink:href="#glyph1-12"
          x="280.065"
          y="78.690346"
-         id="use850" />
+         id="use853" />
     </g>
     <g
        style="fill:rgb(0%,50.195312%,50.195312%);fill-opacity:1;"
-       id="g856">
+       id="g859">
       <use
          xlink:href="#glyph1-13"
          x="291.657"
          y="78.690346"
-         id="use854" />
+         id="use857" />
     </g>
     <g
        style="fill:rgb(0%,50.195312%,50.195312%);fill-opacity:1;"
-       id="g860">
+       id="g863">
       <use
          xlink:href="#glyph1-14"
          x="298.263"
          y="78.690346"
-         id="use858" />
+         id="use861" />
     </g>
     <g
        style="fill:rgb(78.038025%,8.235168%,52.156067%);fill-opacity:1;"
-       id="g864">
+       id="g867">
       <use
          xlink:href="#glyph1-13"
          x="463.408"
          y="78.690346"
-         id="use862" />
+         id="use865" />
     </g>
     <g
        style="fill:rgb(78.038025%,8.235168%,52.156067%);fill-opacity:1;"
-       id="g868">
+       id="g871">
       <use
          xlink:href="#glyph1-8"
          x="470.014"
          y="78.690346"
-         id="use866" />
+         id="use869" />
     </g>
     <g
        style="fill:rgb(100%,64.704895%,0%);fill-opacity:1;"
-       id="g876">
+       id="g879">
       <use
          xlink:href="#glyph1-15"
          x="68.4"
          y="103.691346"
-         id="use870" />
+         id="use873" />
       <use
          xlink:href="#glyph1-2"
          x="77.796"
          y="103.691346"
-         id="use872" />
+         id="use875" />
       <use
          xlink:href="#glyph1-16"
          x="87.084"
          y="103.691346"
-         id="use874" />
+         id="use877" />
     </g>
     <g
        style="fill:rgb(100%,64.704895%,0%);fill-opacity:1;"
-       id="g880">
+       id="g883">
       <use
          xlink:href="#glyph1-12"
          x="99.684"
          y="103.691346"
-         id="use878" />
+         id="use881" />
     </g>
     <g
        style="fill:rgb(100%,7.843018%,57.646179%);fill-opacity:1;"
-       id="g884">
+       id="g887">
       <use
          xlink:href="#glyph1-4"
          x="189.893"
          y="103.691346"
-         id="use882" />
+         id="use885" />
     </g>
     <g
        style="fill:rgb(100%,7.843018%,57.646179%);fill-opacity:1;"
-       id="g888">
+       id="g891">
       <use
          xlink:href="#glyph1-17"
          x="192.485"
          y="103.691346"
-         id="use886" />
+         id="use889" />
     </g>
     <g
        style="fill:rgb(100%,7.843018%,57.646179%);fill-opacity:1;"
-       id="g894">
+       id="g897">
       <use
          xlink:href="#glyph1-18"
          x="200.387"
          y="103.691346"
-         id="use890" />
+         id="use893" />
       <use
          xlink:href="#glyph1-17"
          x="204.491"
          y="103.691346"
-         id="use892" />
+         id="use895" />
     </g>
     <g
        style="fill:rgb(100%,7.843018%,57.646179%);fill-opacity:1;"
-       id="g900">
+       id="g903">
       <use
          xlink:href="#glyph1-1"
          x="212.393"
          y="103.691346"
-         id="use896" />
+         id="use899" />
       <use
          xlink:href="#glyph1-4"
          x="223.175"
          y="103.691346"
-         id="use898" />
+         id="use901" />
     </g>
     <g
        style="fill:rgb(100%,7.843018%,57.646179%);fill-opacity:1;"
-       id="g904">
+       id="g907">
       <use
          xlink:href="#glyph1-4"
          x="225.767"
          y="103.691346"
-         id="use902" />
+         id="use905" />
     </g>
     <g
        style="fill:rgb(100%,7.843018%,57.646179%);fill-opacity:1;"
-       id="g908">
+       id="g911">
       <use
          xlink:href="#glyph1-19"
          x="228.359"
          y="103.691346"
-         id="use906" />
+         id="use909" />
     </g>
     <g
        style="fill:rgb(100%,7.843018%,57.646179%);fill-opacity:1;"
-       id="g924">
+       id="g927">
       <use
          xlink:href="#glyph1-20"
          x="240.239"
          y="103.691346"
-         id="use910" />
+         id="use913" />
       <use
          xlink:href="#glyph1-21"
          x="245.441"
          y="103.691346"
-         id="use912" />
+         id="use915" />
       <use
          xlink:href="#glyph1-20"
          x="254.927"
          y="103.691346"
-         id="use914" />
+         id="use917" />
       <use
          xlink:href="#glyph1-22"
          x="260.129"
          y="103.691346"
-         id="use916" />
+         id="use919" />
       <use
          xlink:href="#glyph1-23"
          x="270.425"
          y="103.691346"
-         id="use918" />
+         id="use921" />
       <use
          xlink:href="#glyph1-24"
          x="278.813"
          y="103.691346"
-         id="use920" />
+         id="use923" />
       <use
          xlink:href="#glyph1-4"
          x="288.497"
          y="103.691346"
-         id="use922" />
+         id="use925" />
     </g>
     <g
        style="fill:rgb(100%,7.843018%,57.646179%);fill-opacity:1;"
-       id="g928">
+       id="g931">
       <use
          xlink:href="#glyph1-4"
          x="291.089"
          y="103.691346"
-         id="use926" />
+         id="use929" />
     </g>
     <g
        style="fill:rgb(100%,7.843018%,57.646179%);fill-opacity:1;"
-       id="g934">
+       id="g937">
       <use
          xlink:href="#glyph1-9"
          x="293.681"
          y="103.691346"
-         id="use930" />
+         id="use933" />
       <use
          xlink:href="#glyph1-25"
          x="302.861"
          y="103.691346"
-         id="use932" />
+         id="use935" />
     </g>
     <g
        style="fill:rgb(100%,7.843018%,57.646179%);fill-opacity:1;"
-       id="g938">
+       id="g941">
       <use
          xlink:href="#glyph1-4"
          x="312.959"
          y="103.691346"
-         id="use936" />
+         id="use939" />
     </g>
     <g
        style="fill:rgb(100%,7.843018%,57.646179%);fill-opacity:1;"
-       id="g942">
+       id="g945">
       <use
          xlink:href="#glyph1-4"
          x="315.551"
          y="103.691346"
-         id="use940" />
+         id="use943" />
     </g>
     <g
        style="fill:rgb(100%,7.843018%,57.646179%);fill-opacity:1;"
-       id="g946">
+       id="g949">
       <use
          xlink:href="#glyph1-11"
          x="318.143"
          y="103.691346"
-         id="use944" />
+         id="use947" />
     </g>
     <g
        style="fill:rgb(100%,7.843018%,57.646179%);fill-opacity:1;"
-       id="g950">
+       id="g953">
       <use
          xlink:href="#glyph1-5"
          x="328.835"
          y="103.691346"
-         id="use948" />
+         id="use951" />
     </g>
     <g
        style="fill:rgb(100%,7.843018%,57.646179%);fill-opacity:1;"
-       id="g954">
+       id="g957">
       <use
          xlink:href="#glyph1-10"
          x="339.113"
          y="103.691346"
-         id="use952" />
+         id="use955" />
     </g>
     <g
        style="fill:rgb(100%,7.843018%,57.646179%);fill-opacity:1;"
-       id="g958">
+       id="g961">
       <use
          xlink:href="#glyph1-12"
          x="344.621"
          y="103.691346"
-         id="use956" />
+         id="use959" />
     </g>
     <g
        style="fill:rgb(100%,7.843018%,57.646179%);fill-opacity:1;"
-       id="g962">
+       id="g965">
       <use
          xlink:href="#glyph1-13"
          x="356.213"
          y="103.691346"
-         id="use960" />
+         id="use963" />
     </g>
     <g
        style="fill:rgb(100%,7.843018%,57.646179%);fill-opacity:1;"
-       id="g966">
+       id="g969">
       <use
          xlink:href="#glyph1-26"
          x="362.819"
          y="103.691346"
-         id="use964" />
+         id="use967" />
     </g>
     <g
        style="fill:rgb(78.038025%,8.235168%,52.156067%);fill-opacity:1;"
-       id="g970">
+       id="g973">
       <use
          xlink:href="#glyph1-13"
          x="464.4"
          y="103.691346"
-         id="use968" />
+         id="use971" />
     </g>
     <g
        style="fill:rgb(78.038025%,8.235168%,52.156067%);fill-opacity:1;"
-       id="g974">
+       id="g977">
       <use
          xlink:href="#glyph1-13"
          x="471.006"
          y="103.691346"
-         id="use972" />
+         id="use975" />
     </g>
     <g
        style="fill:rgb(0%,0%,0%);fill-opacity:1;"
-       id="g978">
+       id="g981">
       <use
          xlink:href="#glyph1-11"
          x="72.312"
          y="128.693346"
-         id="use976" />
+         id="use979" />
     </g>
     <g
        style="fill:rgb(0%,0%,0%);fill-opacity:1;"
-       id="g982">
+       id="g985">
       <use
          xlink:href="#glyph1-27"
          x="83.004"
          y="128.693346"
-         id="use980" />
+         id="use983" />
     </g>
     <g
        style="fill:rgb(0%,0%,0%);fill-opacity:1;"
-       id="g986">
+       id="g989">
       <use
          xlink:href="#glyph1-19"
          x="95.604"
          y="128.693346"
-         id="use984" />
+         id="use987" />
     </g>
     <g
        style="fill:rgb(0%,0%,0%);fill-opacity:1;"
-       id="g990">
+       id="g993">
       <use
          xlink:href="#glyph1-11"
          x="262.8"
          y="128.693346"
-         id="use988" />
+         id="use991" />
     </g>
     <g
        style="fill:rgb(0%,0%,0%);fill-opacity:1;"
-       id="g994">
+       id="g997">
       <use
          xlink:href="#glyph1-27"
          x="273.492"
          y="128.693346"
-         id="use992" />
+         id="use995" />
     </g>
     <g
        style="fill:rgb(0%,0%,0%);fill-opacity:1;"
-       id="g998">
+       id="g1001">
       <use
          xlink:href="#glyph1-19"
          x="286.092"
          y="128.693346"
-         id="use996" />
+         id="use999" />
     </g>
     <g
        style="fill:rgb(78.038025%,8.235168%,52.156067%);fill-opacity:1;"
-       id="g1002">
+       id="g1005">
       <use
-         xlink:href="#glyph1-14"
-         x="466.498"
+         xlink:href="#glyph1-28"
+         x="466.611"
          y="128.693346"
-         id="use1000" />
+         id="use1003" />
     </g>
   </g>
 </svg>
diff --git a/sensor/static/sensor/js/sensors/ultrasonic.js b/sensor/static/sensor/js/sensors/ultrasonic.js
new file mode 100644
index 0000000..9ce7d2d
--- /dev/null
+++ b/sensor/static/sensor/js/sensors/ultrasonic.js
@@ -0,0 +1,78 @@
+window.onload = function () {
+    const debug = JSON.parse(document.getElementById('debug').textContent);
+    const piName = JSON.parse(document.getElementById('pi-name').textContent);
+    const sensorName = JSON.parse(document.getElementById('sensor-name').textContent);
+
+    const dataSocket = new WebSocket(
+        'ws://'
+        + window.location.host
+        + '/ws/'
+        + piName
+        + '/'
+        + sensorName
+        + '/'
+    );
+
+    dataSocket.onmessage = function (e) {
+        const data = JSON.parse(e.data);
+        console.log(data);
+
+        if (debug === true) {
+            // Process received data
+            if (data.message_type === "data") {
+                document.querySelector('#data-log').value += (data.message + '\n');
+            }
+        }
+
+        var distance = document.getElementById('distance-text');
+        distance.textContent = data.distance.toFixed(2) + " cm";
+    };
+
+    dataSocket.onopen = function (e) {
+        // Send start signal
+        dataSocket.send(JSON.stringify({
+            'sensor': sensorName,
+            'message': 'start',
+            'message_type': 'command',
+        }));
+    }
+
+    window.onbeforeunload = function () {
+        // Send stop signal
+        dataSocket.send(JSON.stringify({
+            'sensor': sensorName,
+            'message': 'stop',
+            'message_type': 'command',
+        }));
+        dataSocket.close
+    };
+
+    dataSocket.onclose = function (e) {
+        console.error('Data socket closed unexpectedly');
+    };
+
+    if (debug === true) {
+        document.querySelector('#data-message-input').focus();
+        document.querySelector('#data-message-input').onkeyup = function (e) {
+            if (e.keyCode === 13) {  // enter, return
+                document.querySelector('#data-message-submit').click();
+            }
+        };
+
+        document.querySelector('#data-message-submit').onclick = function (e) {
+            const messageInputDom = document.querySelector('#data-message-input');
+            const message = messageInputDom.value;
+            dataSocket.send(JSON.stringify({
+                'sensor': sensorName,
+                'message': message,
+                'message_type': 'command',
+            }));
+            messageInputDom.value = '';
+        };
+
+        document.querySelector('#clear-textarea').onclick = function (e) {
+            const dataLogDom = document.querySelector('#data-log');
+            dataLogDom.value = '';
+        };
+    }
+}
\ No newline at end of file
diff --git a/sensor/static/sensor/scss/sensor/ultrasonic.scss b/sensor/static/sensor/scss/sensor/ultrasonic.scss
new file mode 100644
index 0000000..35e3500
--- /dev/null
+++ b/sensor/static/sensor/scss/sensor/ultrasonic.scss
@@ -0,0 +1,82 @@
+@use "../third-party/bootstrap" as *;
+@use "../utils" as *;
+
+.ultra {
+    width: 30vw;
+  }
+  
+  .ultra-container {
+    @include flex-row;
+    @include flex-center;
+  
+    @include media-breakpoint-up(xl) {
+      padding: 2% 10%;
+    }
+    @include media-breakpoint-down(xl) {
+      padding: 2% 8%;
+    }
+    @include media-breakpoint-down(lg) {
+      padding: 2% 6%;
+    }
+    @include media-breakpoint-down(md) {
+      flex-direction: column;
+      padding: 2% 4%;
+    }
+    @include media-breakpoint-down(sm) {
+      flex-direction: column;
+      padding: 2% 2%;
+    }
+  
+    margin-bottom: 5%;
+  }
+
+.ultra-box {
+    @include flex-column;
+    @include flex-center;
+  
+    object-fit: fill;
+  
+    font-style: bold;
+    text-align: center;
+    font-size: 24px;
+  
+    p {
+      margin: 0%;
+  
+      @include media-breakpoint-up(xl) {
+        font-size: 2.2rem;
+      }
+      @include media-breakpoint-down(xl) {
+        font-size: 2rem;
+      }
+      @include media-breakpoint-down(lg) {
+        font-size: 1.6rem;
+      }
+      @include media-breakpoint-down(md) {
+        font-size: 1.5rem;
+      }
+      @include media-breakpoint-down(sm) {
+        font-size: 1.2rem;
+      }
+    }
+  
+    div {
+      @include media-breakpoint-up(xl) {
+        font-size: 2rem;
+      }
+      @include media-breakpoint-down(xl) {
+        font-size: 1.6rem;
+      }
+      @include media-breakpoint-down(lg) {
+        font-size: 1.4rem;
+      }
+      @include media-breakpoint-down(md) {
+        font-size: 1.2rem;
+        margin-bottom: 15%;
+      }
+      @include media-breakpoint-down(sm) {
+        font-size: 1.1rem;
+        margin-bottom: 10%;
+      }
+    }
+  }
\ No newline at end of file
diff --git a/sensor/templates/sensor/sensors/ultrasonic.html b/sensor/templates/sensor/sensors/ultrasonic.html
index 085574b..3902f44 100644
--- a/sensor/templates/sensor/sensors/ultrasonic.html
+++ b/sensor/templates/sensor/sensors/ultrasonic.html
@@ -2,6 +2,9 @@
 {% load range_iterator %}
 {% load reusable_blocks %}
 
+<script src="{% static 'sensor/js/sensors/ultrasonic.js' %}"></script>
+<link rel="stylesheet" href="{% static 'sensor/css/sensor/ultrasonic.css' %}">
+
 <!-- Wiring -->
 {% sub_header "tool.svg" "Wiring Schematic" "wiring" %}
 
@@ -14,4 +17,14 @@
 
 <div class="d-flex justify-content-center align-items-center flex-column">
     <img class="img-table" src="{% static 'sensor/images/wiring/pins/ultrasonic.svg' %}" alt="Ultrasonic Pins">
+</div>
+
+<!-- Interface -->
+{% sub_header "tablet.svg" "Display Panel" "display" %}
+
+<div class="ultra-container">
+    <div class="ultra-box">
+        <p class="jumbotron">Distance</p>
+        <div id="distance-text"></div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/sensor/views.py b/sensor/views.py
index 09e2c74..65951d2 100644
--- a/sensor/views.py
+++ b/sensor/views.py
@@ -102,7 +102,7 @@ def pi_name(request, pi_name):
 
 
 def sensor_name(request, pi_name, sensor_name):
-    debug = settings.DEBUG
+    debug = True
     sensors = ["dht11", "ultrasonic", "8x8matrix", "buzzer",
                "relay", "lcd", "7segment", "ledarray", "joystick"]
 
@@ -116,7 +116,7 @@ def sensor_name(request, pi_name, sensor_name):
 
 
 def sensor_extra(request, pi_name, sensor_name, extra):
-    debug = settings.DEBUG
+    debug = True
     return render(request, 'sensor/extra.html', {
         'debug': debug,
         'pi_name': pi_name,