Open frank-schubidoo opened 11 months ago
hi guys,
I adjusted the SVG element a bit. Still not 100% where I want it but a bit better IMHO on what was there. Also there is a bug in original element where the in/out humidity sensors where swapped.
--> type: picture-elements image: >- data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='420' height='512' viewBox='0, 0, 420, 512'%3E%3Cdefs%3E%3ClinearGradient id='Gradient_1' gradientUnits='userSpaceOnUse' x1='57.688' y1='278.913' x2='395.671' y2='278.913'%3E%3Cstop offset='0' stop-color='%23FF0000' stop-opacity='0.396'/%3E%3Cstop offset='1' stop-color='%233D00FF' stop-opacity='0.458'/%3E%3C/linearGradient%3E%3ClinearGradient id='Gradient_2' gradientUnits='userSpaceOnUse' x1='69.201' y1='200.783' x2='395.671' y2='200.783'%3E%3Cstop offset='0' stop-color='%23FF0000' stop-opacity='0.5'/%3E%3Cstop offset='1' stop-color='%239A01FF' stop-opacity='0.501'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Layer_1'%3E%3Cpath d='M129.517,188.074 L49.517,278.074 L119.517,346.965 L229.517,346.965 L289.517,278.074 L219.517,188.074 z' fill='%236DA7C2' fill-opacity='0.294'/%3E%3Cpath d='M49.517,278.074 L49.517,318.074 L109.517,388.074 L229.517,388.074 L289.517,328.074 L289.517,278.074 L229.517,346.965 L119.517,346.965 z' fill='%236DA7C2' fill-opacity='0.615'/%3E%3Cpath d='M5.54,408.574 L15.54,448.574 L45.54,448.574 M85.54,448.574 L325.54,448.574 L334.493,408.574' fill-opacity='0' stroke='%23000000' stroke-width='2.835' stroke-linecap='square' stroke-linejoin='bevel'/%3E%3Cpath d='M294.116,98.483 L296.533,120.483 L281.54,120.483 L281.54,214.483 L277.174,223.257 L76.54,374.969 L76.008,400.948 L54.994,400.948 L54.54,369.496 L58.905,360.722 L259.54,209.01 L259.54,109.483 L270.54,98.483 L294.116,98.483 z M395.671,98.357 L306.502,98.483 L309.429,120.302 L395.671,120.383 L395.671,98.357 z M64.557,508.483 L35.04,459.483 L95.04,459.483 z M76.008,415.03 L55.065,415.03 L55.143,459.583 L75.761,459.583 L76.008,415.03 z' fill='url(%23Gradient_1)'/%3E%3Cpath d='M199.672,286.702 C200.453,287.249 202.823,288.905 206.339,291.366 C211.026,294.647 211.026,294.647 217.667,299.295 C233.292,310.233 233.292,310.233 252.042,323.358 C270.792,336.483 270.792,336.483 286.417,347.42 C293.058,352.069 293.058,352.069 297.745,355.35 C298.639,355.976 298.158,355.639 299.189,356.361 C303.015,356.427 306.841,356.439 310.667,356.456 C315.343,356.466 321.578,356.669 322.056,356.62 C322.056,356.62 324.474,377.8 325.012,378.477 C325.549,379.155 295.245,378.544 295.352,378.984 C295.459,379.424 289.037,376.936 289.037,376.936 C288.256,376.389 288.256,376.389 284.741,373.928 C280.053,370.646 280.053,370.646 273.412,365.998 C257.787,355.061 257.787,355.061 239.037,341.936 C220.287,328.811 220.287,328.811 204.662,317.873 C198.022,313.225 198.022,313.225 193.334,309.943 C189.819,307.482 181.765,301.849 180.984,301.302 L199.672,286.702 z M91.878,53.926 L69.201,53.926 L69.201,212.966 L73.737,222.037 L153.087,281.24 L171.652,267.337 L91.878,207.297 L91.878,53.926 z M91.684,3.365 L69.367,3.365 L69.201,41.916 L91.878,41.916 L91.684,3.365 z M395.671,368.526 L345.54,398.303 L345.54,338.483 z M345.54,357.238 L333.993,357.196 L336.833,378.957 L345.54,379.036 L345.54,357.238 z' fill='url(%23Gradient_2)'/%3E%3Cpath d='M45.54,48.574 L295.54,48.574 L334.493,408.574 L5.54,408.574 z' fill-opacity='0' stroke='%23000000' stroke-width='2.835' stroke-linejoin='bevel'/%3E%3C/g%3E%3C/svg%3E%0A style: | ha-card { border-radius: 20px; margin: 0em 0em 0em 0em; padding: 10px; } labelContainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgb(255,255,255); background: radial-gradient(circle, rgba(255, 255, 255,0.8) 0%, rgba(128,128,128,0) 80%, rgba(0,0,0,0) 100%); } elements:
<--
hi guys,
I adjusted the SVG element a bit. Still not 100% where I want it but a bit better IMHO on what was there. Also there is a bug in original element where the in/out humidity sensors where swapped.
--> type: picture-elements image: >- data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='420' height='512' viewBox='0, 0, 420, 512'%3E%3Cdefs%3E%3ClinearGradient id='Gradient_1' gradientUnits='userSpaceOnUse' x1='57.688' y1='278.913' x2='395.671' y2='278.913'%3E%3Cstop offset='0' stop-color='%23FF0000' stop-opacity='0.396'/%3E%3Cstop offset='1' stop-color='%233D00FF' stop-opacity='0.458'/%3E%3C/linearGradient%3E%3ClinearGradient id='Gradient_2' gradientUnits='userSpaceOnUse' x1='69.201' y1='200.783' x2='395.671' y2='200.783'%3E%3Cstop offset='0' stop-color='%23FF0000' stop-opacity='0.5'/%3E%3Cstop offset='1' stop-color='%239A01FF' stop-opacity='0.501'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Layer_1'%3E%3Cpath d='M129.517,188.074 L49.517,278.074 L119.517,346.965 L229.517,346.965 L289.517,278.074 L219.517,188.074 z' fill='%236DA7C2' fill-opacity='0.294'/%3E%3Cpath d='M49.517,278.074 L49.517,318.074 L109.517,388.074 L229.517,388.074 L289.517,328.074 L289.517,278.074 L229.517,346.965 L119.517,346.965 z' fill='%236DA7C2' fill-opacity='0.615'/%3E%3Cpath d='M5.54,408.574 L15.54,448.574 L45.54,448.574 M85.54,448.574 L325.54,448.574 L334.493,408.574' fill-opacity='0' stroke='%23000000' stroke-width='2.835' stroke-linecap='square' stroke-linejoin='bevel'/%3E%3Cpath d='M294.116,98.483 L296.533,120.483 L281.54,120.483 L281.54,214.483 L277.174,223.257 L76.54,374.969 L76.008,400.948 L54.994,400.948 L54.54,369.496 L58.905,360.722 L259.54,209.01 L259.54,109.483 L270.54,98.483 L294.116,98.483 z M395.671,98.357 L306.502,98.483 L309.429,120.302 L395.671,120.383 L395.671,98.357 z M64.557,508.483 L35.04,459.483 L95.04,459.483 z M76.008,415.03 L55.065,415.03 L55.143,459.583 L75.761,459.583 L76.008,415.03 z' fill='url(%23Gradient_1)'/%3E%3Cpath d='M199.672,286.702 C200.453,287.249 202.823,288.905 206.339,291.366 C211.026,294.647 211.026,294.647 217.667,299.295 C233.292,310.233 233.292,310.233 252.042,323.358 C270.792,336.483 270.792,336.483 286.417,347.42 C293.058,352.069 293.058,352.069 297.745,355.35 C298.639,355.976 298.158,355.639 299.189,356.361 C303.015,356.427 306.841,356.439 310.667,356.456 C315.343,356.466 321.578,356.669 322.056,356.62 C322.056,356.62 324.474,377.8 325.012,378.477 C325.549,379.155 295.245,378.544 295.352,378.984 C295.459,379.424 289.037,376.936 289.037,376.936 C288.256,376.389 288.256,376.389 284.741,373.928 C280.053,370.646 280.053,370.646 273.412,365.998 C257.787,355.061 257.787,355.061 239.037,341.936 C220.287,328.811 220.287,328.811 204.662,317.873 C198.022,313.225 198.022,313.225 193.334,309.943 C189.819,307.482 181.765,301.849 180.984,301.302 L199.672,286.702 z M91.878,53.926 L69.201,53.926 L69.201,212.966 L73.737,222.037 L153.087,281.24 L171.652,267.337 L91.878,207.297 L91.878,53.926 z M91.684,3.365 L69.367,3.365 L69.201,41.916 L91.878,41.916 L91.684,3.365 z M395.671,368.526 L345.54,398.303 L345.54,338.483 z M345.54,357.238 L333.993,357.196 L336.833,378.957 L345.54,379.036 L345.54,357.238 z' fill='url(%23Gradient_2)'/%3E%3Cpath d='M45.54,48.574 L295.54,48.574 L334.493,408.574 L5.54,408.574 z' fill-opacity='0' stroke='%23000000' stroke-width='2.835' stroke-linejoin='bevel'/%3E%3C/g%3E%3C/svg%3E%0A style: | ha-card { border-radius: 20px; margin: 0em 0em 0em 0em; padding: 10px; } labelContainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgb(255,255,255); background: radial-gradient(circle, rgba(255, 255, 255,0.8) 0%, rgba(128,128,128,0) 80%, rgba(0,0,0,0) 100%); } elements:
<--