feat: Modernize the visual card editor. (#2586)

src/images/README.md

@@ -19,7 +19,7 @@
 $ convert -strip -interlace Plane -quality 85% -scale 492x277 iris-screensaver-original.jpg iris-screensaver.jpg
 ```
 
-## iris.svg / iris-outline.svg
+## icons/iris.svg / iris-background.svg
 
 **Link**: https://pictogrammers.com/library/mdi/icon/camera-iris/
 
@@ -27,8 +27,13 @@ $ convert -strip -interlace Plane -quality 85% -scale 492x277 iris-screensaver-o
 
 **Image Formatting Process**:
 
-- Outline addded manually
-- Opacity adjustmented manually
+- `icons/iris.svg`: single-path variant for the card's custom iconset
+- `iris-background.svg`: outline / opacity adjusted manually
+
+## icons/{frigate,motioneye,reolink,tplink}.svg
+
+**Description**: Vendor logos, flattened to single-path monochrome silhouettes
+for the card's custom iconset.
 
 ## check-circle.svg
 

src/images/icons/frigate.svg

@@ -0,0 +1 @@
+<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.876 22.744c0.087 0.693 0.812 1.164 0.379 1.271-0.433 0.108-2.327-3.437-2.76-4.952-0.433-1.515-0.676-3.22-0.569-4.194 0.108-0.974 5.71-2.49 5.71-2.895 0-0.406-1.813-0.027-1.894-0.352-0.081-0.325 1.369-0.13 1.759-0.65 0.609-0.812 1.38-0.676 1.867-1.109 0.487-0.433 1.082-2.084 1.191-2.787 0.108-0.704-1.082-1.515-1.408-2.057-0.325-0.541 0.704-0.92 3.194-1.948 2.49-1.028 10.391-3.301 10.499-3.031 0.108 0.271-2.598 1.407-4.492 2.111-1.894 0.704-4.979 2.057-4.979 2.435 0 0.379 0.162 0.677 0.054 1.543-0.108 0.866-0.121 1.27-0.325 1.84-0.135 0.379-0.271 1.272 0 2.083 0.216 0.649 0.92 1.137 1.245 1.245 0.271 0.018 1.017 0.043 1.84 0 1.028-0.054 2.49 0.054 2.49 0.325 0 0.271-2.219 0.108-2.219 0.487 0 0.379 2.273-0.054 2.219 0.325-0.054 0.379-1.894 0.216-2.869 0.216-0.779 0-1.93-0.036-2.435-0.216l-0.108 0.378c-0.18 0-0.557 0.108-0.948 0.109-0.487 0-0.514 0.162-1.407 0.162-0.893 0-0.622-0.054-1.434-0.108-0.812-0.054-3.843 2.273-4.384 3.031-0.541 0.758-0.216 2.598-0.216 3.436 0 0.754-0.108 2.435 0 3.302z"/></svg>

src/images/icons/iris.svg

@@ -0,0 +1 @@
+<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.73 15L9.83 21.76C10.53 21.91 11.25 22 12 22c2.4 0 4.6-0.85 6.32-2.25L14.66 13.4M2.46 15c0.92 2.92 3.15 5.26 5.99 6.34L12.12 15m-3.58-3l-3.9-6.75c-1.64 1.75-2.64 4.14-2.64 6.75 0 0.68 0.07 1.35 0.2 2h7.49M21.8 10H14.31L14.6 10.5 19.36 18.75C21 16.97 22 14.6 22 12 22 11.31 21.93 10.64 21.8 10m-0.26-1C20.62 6.07 18.39 3.74 15.55 2.66L11.88 9M9.4 10.5L14.17 2.24c-0.7-0.15-1.42-0.24-2.17-0.24-2.4 0-4.6 0.84-6.32 2.25l3.66 6.35z"/></svg>

src/images/icons/motioneye.svg

@@ -0,0 +1 @@
+<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.794 4.615C2.036 6.569 0.97 9.124 0.97 11.959 0.97 18.05 5.909 22.989 12 22.989 18.091 22.989 23.03 18.05 23.03 11.959c0-2.825-1.064-5.393-2.811-7.344-0.835 0.307-1.668 0.664-2.492 1.127 1.595 0.462 2.757 1.939 2.757 3.672 0 2.098-1.708 3.818-3.818 3.818-1.789 0-3.294-1.236-3.712-2.89h-1.908c-0.414 1.655-1.922 2.89-3.712 2.89-2.11 0-3.831-1.72-3.831-3.818 0-1.753 1.21-3.243 2.836-3.686-0.825-0.449-1.676-0.798-2.545-1.113zM12 11.535c0.262 0.976 0.543 1.944 1.697 2.545L12 16.625 10.303 14.08c1.011-0.716 1.478-1.594 1.697-2.545z M7.334 8.141c-0.703 0-1.273 0.57-1.273 1.273 0 0.703 0.57 1.273 1.273 1.272 0.703 0 1.273-0.57 1.272-1.272 0-0.703-0.57-1.273-1.272-1.273z M16.666 8.141c-0.703 0-1.273 0.57-1.272 1.273 0 0.703 0.57 1.273 1.272 1.272 0.703 0 1.273-0.57 1.273-1.272 0-0.703-0.57-1.273-1.273-1.273z M12 0.93c-2.233 0-4.308 0.715-6.045 1.855 1.878 0.201 3.731 0.686 5.833 1.724 2.127-1.084 4.307-1.536 6.27-1.763C16.318 1.598 14.24 0.93 12 0.93Z M19.212 3.302C17.001 3.317 13.981 4.403 11.788 5.406 9.482 4.573 7.116 3.253 4.444 3.316 4.266 3.32 4.095 3.329 3.913 3.342L1.819 3.515 3.807 4.177c2.728 0.889 5.127 1.456 7.239 5.12 0.49 0 1.453 0 1.908 0 2.103-3.643 4.626-4.251 7.225-5.12L22.141 3.541 20.1 3.342c-0.278-0.026-0.572-0.042-0.888-0.04z"/></svg>

src/images/icons/reolink.svg

@@ -0,0 +1 @@
+<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.037 23.965C16.765 23.918 16.562 23.836 16.326 23.68 16.197 23.594 14.544 21.953 12.218 19.602 10.077 17.438 8.22 15.583 8.09 15.479 7.604 15.089 7.088 14.869 6.499 14.802 6.314 14.781 5.079 14.763 3.754 14.763l-2.409 0 0.007-7.394v-7.394l6.204 0c3.98 0 6.359 0.015 6.637 0.041 2.331 0.22 4.365 1.499 5.579 3.501 0.686 1.131 1.021 2.278 1.067 3.655 0.063 1.884-0.574 3.66-1.831 5.1-0.756 0.866-1.861 1.63-2.929 2.025l-0.32 0.118-1.951-1.979-1.951-1.98 1.046-0.023c0.576-0.013 1.1-0.037 1.165-0.053 0.596-0.151 0.95-0.314 1.322-0.611 0.644-0.513 1.046-1.244 1.138-2.067 0.168-1.505-0.771-2.87-2.263-3.29L13.95 4.323 9.798 4.311 5.639 4.298v3.069 3.07l1.419 0c1.628 0.001 1.779 0.019 2.31 0.28 0.31 0.152 0.39 0.219 1.082 0.915 3.027 3.042 12.194 12.308 12.205 12.337 0.016 0.044-5.364 0.04-5.618-0.004z"/></svg>

src/images/icons/tplink.svg

@@ -0,0 +1 @@
+<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M155.984 0.844C182.129 0.121 205.944 8.49 225.371 26.156 244.256 44.245 252.535 69.269 253.25 94.938 252.928 122.316 242.482 146.002 223.625 165.688 204.23 184.488 179.742 191.456 153.25 191.125 148.548 191.084 143.845 191.042 139 191 139 173.18 139 155.36 139 137 146.59 136.67 154.18 136.34 162 136 174.007 134.137 182.944 130.452 190.5 120.625 197.347 110.432 199.293 99.095 197.574 87.004 195.503 77.231 191.277 69.067 183.188 63 172.794 56.502 160.79 55.075 148.844 57.691 137.647 61.45 129.313 67.937 123.715 78.402 120.929 84.403 119.903 89.77 119.684 96.395 119.645 97.478 119.607 98.562 119.568 99.679 119.525 101.043 119.482 102.407 119.438 103.813 119.293 108.164 119.149 112.516 119 117 101.18 117 83.36 117 65 117 64.398 83.9 67.548 55.283 91 30 108.41 12.165 131.231 2.14 155.984 0.844Z M0 135C39.93 135 79.86 135 121 135 121 174.93 121 214.86 121 256 71 256 71 256 66 252 63.855 248.851 63.756 246.259 63.773 242.497 63.773 241.396 63.773 240.295 63.773 239.161 63.784 237.979 63.794 236.796 63.805 235.578 63.808 234.363 63.81 233.148 63.813 231.896 63.824 228.014 63.85 224.132 63.875 220.25 63.885 217.618 63.894 214.987 63.902 212.355 63.924 205.904 63.958 199.452 64 193 63.046 193.01 63.046 193.01 62.073 193.02 55.438 193.087 48.803 193.132 42.168 193.165 39.693 193.18 37.219 193.2 34.745 193.226 31.183 193.263 27.621 193.28 24.059 193.293 22.957 193.308 21.856 193.324 20.721 193.34 14.691 193.341 10.289 192.993 5 190-8.497 175.793 0 153.016 0 135Z"/></svg>

src/images/iris.svg

@@ -1,49 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   inkscape:version="1.4 (e7c3feb1, 2024-10-09)"
-   sodipodi:docname="camera-iris-transparent.svg"
-   id="svg4"
-   version="1.1"
-   viewBox="0 0 24 24"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs8" />
-  <sodipodi:namedview
-     id="namedview6"
-     pagecolor="#b93e3e"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.60784314"
-     inkscape:pagecheckerboard="false"
-     inkscape:deskcolor="#d1d1d1"
-     showgrid="false"
-     inkscape:zoom="19.378578"
-     inkscape:cx="12.100991"
-     inkscape:cy="12.307405"
-     inkscape:window-width="1440"
-     inkscape:window-height="848"
-     inkscape:window-x="0"
-     inkscape:window-y="52"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg4" />
-  <g
-     id="g1119"
-     style="fill-opacity:0.05;fill:#ffffff;stroke-width:1.0015748;stroke-dasharray:none">
-    <circle
-       style="display:none;opacity:0.5;fill:#000000;fill-opacity:1;stroke-width:1.00157;stroke-dasharray:none"
-       id="path170"
-       cx="12"
-       cy="12"
-       inkscape:label="Background"
-       r="11.25" />
-    <path
-       d="M 13.730001,15 9.8300003,21.76 C 10.53,21.91 11.25,22 12,22 c 2.400001,0 4.6,-0.85 6.32,-2.25 L 14.660001,13.4 M 2.4600003,15 c 0.92,2.92 3.15,5.26 5.99,6.34 L 12.12,15 m -3.5799997,-3 -3.9,-6.7499996 c -1.64,1.749999 -2.64,4.1399993 -2.64,6.7499996 0,0.68 0.07,1.35 0.2,2 h 7.49 M 21.8,9.9999997 H 14.310001 L 14.600001,10.5 19.36,18.75 C 21,16.97 22,14.6 22,12 22,11.31 21.93,10.64 21.8,9.9999997 m -0.26,-1 C 20.62,6.0700005 18.39,3.7400002 15.550001,2.6600002 L 11.88,8.9999997 M 9.4000003,10.5 14.170001,2.2400002 c -0.7,-0.15 -1.420001,-0.24 -2.170001,-0.24 -2.3999997,0 -4.5999997,0.84 -6.3199997,2.2500003 l 3.66,6.3499995 z"
-       id="path2"
-       inkscape:label="Iris"
-       style="fill-opacity:1;fill:#ffffff;opacity:1;stroke-width:1.0015748;stroke-dasharray:none" />
-  </g>
-</svg>