Tweaks to icons, add direction to benches, tweak to direction input

UI/FullScreenMessageBoxHandler.ts

@@ -39,14 +39,14 @@ export class FullScreenMessageBox extends UIElement {
 
         this.returnToTheMap =
             new Combine([Translations.t.general.returnToTheMap.Clone().SetStyle("font-size:xx-large")])
-                .SetStyle("background:#7ebc6f;" +
+                .SetStyle("background:var(--catch-detail-color);" +
                     "position: fixed;" +
                     "z-index: 10000;" +
                     "bottom: 0;" +
                     "left: 0;" +
                     `height: ${FullScreenMessageBox._toTheMap_height};` +
                 "width: 100vw;" +
-                "color: white;" +
+                "color: var(--catch-detail-color-contrast);" +
                 "font-weight: bold;" +
                 "pointer-events: all;" +
                 "cursor: pointer;" +

UI/Input/DirectionInput.ts

@@ -62,7 +62,11 @@ export default class DirectionInput extends InputElement<string> {
 
 
         htmlElement.ontouchmove = (ev: TouchEvent) => {
-            console.log("Getting a touch", ev.touches[0].clientX, ev.touches[0].clientY)
+            onPosChange(ev.touches[0].clientX, ev.touches[0].clientY);
+            ev.preventDefault();
+        }
+
+        htmlElement.ontouchstart = (ev: TouchEvent) => {
             onPosChange(ev.touches[0].clientX, ev.touches[0].clientY);
             ev.preventDefault();
         }

assets/themes/benches/benches.json

@@ -190,6 +190,16 @@
             "fr": "De quel matériau ce banc est-il fait ?"
           }
         },
+        {
+          "question": {
+            "en": "In which direction are you looking when sitting on the bench?"
+          },
+          "render": "When sitting on the bench, one looks towards {direction}*",
+          "freeform": {
+            "key": "direction",
+            "type": "direction"
+          }
+        },
         {
           "render": {
             "en": "Colour: {colour}",
@@ -297,7 +307,7 @@
         "render": "8"
       },
       "iconSize": {
-        "render": "20,20,center"
+        "render": "30,30,center"
       },
       "color": {
         "render": "#00f"

assets/themes/surveillance_cameras/cam.svg

@@ -39,23 +39,17 @@
      inkscape:window-height="1001"
      id="namedview8"
      showgrid="false"
-     inkscape:zoom="1.5733333"
+     inkscape:zoom="4.4500586"
-     inkscape:cx="-95.73727"
+     inkscape:cx="52.470633"
-     inkscape:cy="204.79067"
+     inkscape:cy="172.70315"
      inkscape:window-x="0"
      inkscape:window-y="0"
      inkscape:window-maximized="1"
      inkscape:current-layer="svg6" />
   <path
-     d="m 20,169 23.279468,-6.61917 -1.66207,-3.54505 3.57365,-1.43124 37.583972,53 -14.4517,5.42595 -3.079595,-4.60462 L 35,222 Z M 27.853974,129.44943 251,66 c 5.83831,-1.483989 13.98665,-0.576204 16.78652,10.077906 0,0 13.16723,59.102364 19.90559,86.841004 2.37442,9.77433 -0.21672,13.95095 -6.93927,15.75524 L 103,230 Z"
+     d="m 19.550568,165.17983 25.64048,-7.77529 37.583972,53 -44.404278,15.19092 z M 27.853974,129.44943 251,66 c 5.83831,-1.483989 13.98665,-0.576204 16.78652,10.077906 0,0 13.16723,59.102364 19.90559,86.841004 2.37442,9.77433 -0.21672,13.95095 -6.93927,15.75524 L 103,230 Z"
      id="path4"
      inkscape:connector-curvature="0"
-     style="fill:#000000"
+     style="fill:#000000;stroke:#ffffff;stroke-width:15;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     sodipodi:nodetypes="cccccccccccssccc" />
+     sodipodi:nodetypes="cccccccssccc" />
-  <circle
-     style="fill:#ff0000;fill-opacity:1;stroke:#000000;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
-     id="path822"
-     cx="62.923725"
-     cy="141.73729"
-     r="8.5805082" />
 </svg>

assets/themes/surveillance_cameras/dome.svg

@@ -7,8 +7,8 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="292.05588"
+   width="300"
-   height="159.1156"
+   height="300"
    version="1.1"
    id="svg6"
    sodipodi:docname="dome.svg"
@@ -40,33 +40,27 @@
      id="namedview8"
      showgrid="false"
      inkscape:zoom="1.5733334"
-     inkscape:cx="37.492305"
+     inkscape:cx="84.526201"
-     inkscape:cy="-39.615653"
+     inkscape:cy="188.2981"
      inkscape:window-x="0"
      inkscape:window-y="0"
      inkscape:window-maximized="1"
      inkscape:current-layer="svg6" />
   <path
-     style="fill:none;stroke:#000000;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     style="fill:#ffffff;stroke:#ffffff;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
-     d="M 30.310053,5.0022193 H 258.48803 c 37.50409,0.111509 38.67272,47.1046307 0,46.6151717 H 30.310053 c -33.9563194,0.100388 -33.5365029,-46.9980667 0,-46.6151717 z"
+     d="M 34.759205,76.188657 H 262.93718 c 37.50409,0.111509 38.67272,47.104633 0,46.615173 H 34.759205 c -33.95631907,0.10039 -33.5365026,-46.998068 0,-46.615173 z"
      id="path818"
      inkscape:connector-curvature="0"
      sodipodi:nodetypes="ccccc" />
   <path
-     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     style="fill:#000000;fill-opacity:1;stroke:#ffffff;stroke-width:15;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     d="M 45.301301,61.150437 244.74566,60.823247 C 244.49975,193.57698 44.690966,190.06371 45.301301,61.150437 Z"
+     d="M 49.750453,132.33688 249.19481,132.00969 C 248.9489,264.76342 49.140118,261.25015 49.750453,132.33688 Z"
      id="path823"
      inkscape:connector-curvature="0"
      sodipodi:nodetypes="ccc" />
-  <circle
-     style="fill:#ff0000;fill-opacity:1;stroke:#000000;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
-     id="path822"
-     cx="111.22884"
-     cy="85.26194"
-     r="5.2097664" />
   <g
      id="g848"
-     transform="matrix(1.4204816,0,0,1.4204816,-66.400565,-107.09225)"
+     transform="matrix(1.4204816,0,0,1.4204816,-61.951413,-43.532931)"
      style="stroke-width:0.70398653">
     <ellipse
        ry="23.81991"

assets/themes/surveillance_cameras/logo.svg

@@ -1,8 +1,61 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg"
+<svg
-width="300" height="300">
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
-<rect stroke="#333" fill="#FFF" rx="9"
+   xmlns:cc="http://creativecommons.org/ns#"
-x="7" y="7" width="286" height="286"/>
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-<path fill="#000" d="m20,169 28-8 15,53-28,8zm11-40
+   xmlns:svg="http://www.w3.org/2000/svg"
-220-63 32,112-180,52zm112-122h30v77l-31,9z"/>
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="300"
+   height="300"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="logo.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="1.1125147"
+     inkscape:cx="-139.39327"
+     inkscape:cy="92.396852"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <circle
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="path812"
+     cx="150.55981"
+     cy="149.44019"
+     r="148.76208" />
+  <path
+     d="m 40.704254,162.40461 21.579577,-6.49818 31.631474,44.29458 -37.37159,12.69576 z M 47.692578,132.54304 235.49705,79.515388 c 4.91364,-1.240239 11.77146,-0.481561 14.12789,8.422577 0,0 11.08182,49.394605 16.75297,72.577085 1.99836,8.16887 -0.18239,11.65946 -5.84024,13.16739 l -149.60059,42.89541 z"
+     id="path4"
+     inkscape:connector-curvature="0"
+     style="fill:#000000;stroke:#00ff00;stroke-width:15;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     sodipodi:nodetypes="cccccccssccc" />
 </svg>

assets/themes/surveillance_cameras/surveillance_cameras.json

@@ -102,6 +102,7 @@
             "nl": "Naar welke geografische richting filmt deze camera?"
           },
           "render": "Films to {camera:direction}",
+          "condition": "camera:type!=dome",
           "freeform": {
             "key": "camera:direction",
             "type": "direction"
@@ -277,13 +278,19 @@
       ],
       "hideUnderlayingFeaturesMinPercentage": 0,
       "icon": {
-        "render": "./assets/themes/surveillance_cameras/logo.svg"
+        "render": "./assets/themes/surveillance_cameras/cam.svg",
+        "mappings": [
+          {
+            "if": "camera:type=dome",
+            "then": "./assets/themes/surveillance_cameras/dome.svg"
+          }
+        ]
       },
       "width": {
         "render": "8"
       },
       "iconSize": {
-        "render": "30,30,center"
+        "render": "50,50,center"
       },
       "color": {
         "render": "#00f"