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

This commit is contained in:
Pieter Vander Vennet 2020-11-15 19:17:36 +01:00
parent c1490267e6
commit 8e5e249e6b
7 changed files with 103 additions and 41 deletions

View file

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

View file

@ -62,7 +62,11 @@ export default class DirectionInput extends InputElement<string> {
htmlElement.ontouchmove = (ev: TouchEvent) => { 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); onPosChange(ev.touches[0].clientX, ev.touches[0].clientY);
ev.preventDefault(); ev.preventDefault();
} }

View file

@ -190,6 +190,16 @@
"fr": "De quel matériau ce banc est-il fait ?" "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": { "render": {
"en": "Colour: {colour}", "en": "Colour: {colour}",
@ -297,7 +307,7 @@
"render": "8" "render": "8"
}, },
"iconSize": { "iconSize": {
"render": "20,20,center" "render": "30,30,center"
}, },
"color": { "color": {
"render": "#00f" "render": "#00f"

View file

@ -39,23 +39,17 @@
inkscape:window-height="1001" inkscape:window-height="1001"
id="namedview8" id="namedview8"
showgrid="false" 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-x="0"
inkscape:window-y="0" inkscape:window-y="0"
inkscape:window-maximized="1" inkscape:window-maximized="1"
inkscape:current-layer="svg6" /> inkscape:current-layer="svg6" />
<path <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" id="path4"
inkscape:connector-curvature="0" 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> </svg>

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -7,8 +7,8 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="292.05588" width="300"
height="159.1156" height="300"
version="1.1" version="1.1"
id="svg6" id="svg6"
sodipodi:docname="dome.svg" sodipodi:docname="dome.svg"
@ -40,33 +40,27 @@
id="namedview8" id="namedview8"
showgrid="false" showgrid="false"
inkscape:zoom="1.5733334" 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-x="0"
inkscape:window-y="0" inkscape:window-y="0"
inkscape:window-maximized="1" inkscape:window-maximized="1"
inkscape:current-layer="svg6" /> inkscape:current-layer="svg6" />
<path <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" id="path818"
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" /> sodipodi:nodetypes="ccccc" />
<path <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" id="path823"
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" /> 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 <g
id="g848" 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"> style="stroke-width:0.70398653">
<ellipse <ellipse
ry="23.81991" ry="23.81991"

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

View file

@ -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"
</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>

Before

Width:  |  Height:  |  Size: 287 B

After

Width:  |  Height:  |  Size: 2.2 KiB

View file

@ -102,6 +102,7 @@
"nl": "Naar welke geografische richting filmt deze camera?" "nl": "Naar welke geografische richting filmt deze camera?"
}, },
"render": "Films to {camera:direction}", "render": "Films to {camera:direction}",
"condition": "camera:type!=dome",
"freeform": { "freeform": {
"key": "camera:direction", "key": "camera:direction",
"type": "direction" "type": "direction"
@ -277,13 +278,19 @@
], ],
"hideUnderlayingFeaturesMinPercentage": 0, "hideUnderlayingFeaturesMinPercentage": 0,
"icon": { "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": { "width": {
"render": "8" "render": "8"
}, },
"iconSize": { "iconSize": {
"render": "30,30,center" "render": "50,50,center"
}, },
"color": { "color": {
"render": "#00f" "render": "#00f"