smartVISU-Logo als SVG

[ares72]

Gibt es bereits ein smartVISU-Logo als SVG oder hat sich schon jemand die Mühe gemacht und kann mir das zur Verfügung stellen?

Details:
Der WAF von smartVISU ist bei uns stark gesunken, nachdem meine beiden Damen seit kurzem Apple-Geräte verwenden. Das Problem am iPhone und iPad ist, dass Apple die Verbindung in smartVISU (zu fhem) abbricht und smartVISU die Verbindung auch nach einem Klick auf das Logo rechts oben oder einem Reload nicht zuverlässig aufbaut. Man braucht hier wirklich viele Versuche und viel Geduld, da das Reproduzieren nicht sofort möglich ist und ich kein iPhone/iPad verwende. Ich habe keine vernünftige Lösung für meine Damen gefunden, also habe ich Alternativen zu fhem gesucht. Der erste Versuch ist nun Home Assistant.

Der erste Eindruck von HomeAssistant war OK und es sieht halt anders aus, dann kam aber schnell das "naja". Berechtigungen sind wohl noch nicht so weit und Einschränkungen für Kinder können anders als in smartVISU mit fhem relativ leicht umgangen werden. Ein gravierendes Problem nicht nur für mich ist, dass es keine Möglichkeit gibt, den letzten Zeitpunkt von Änderungen (zum Beispiel Heizung meldet Service") auch nach einem Neustart anzuzeigen. Wie schön war da doch fhem und der Wahlfreiheit pro Sensor. Egal, genug gejammert, die Entwickler wollen hier wohl seit Jahren nicht einlenken.
Toll an Home Assistant ist aber, dass ich in Home Assistant smartVISU einbinden kann und damit der WAF wieder steigt, da es über den Umweg keine Verbindungsprobleme mehr gibt. Aktuell wird beim Start der App nur smartVISU angezeigt, ich würde das aber gerne um ein paar weitere Informationen ergänzen und smartVISU dann als "Zimmer" anzeigen. Da das smartVISU-Logo bei meinen Damen schon bekannt ist, würde ich das gerne beibehalten, was als PNG aber an vielen Stellen nicht funktioniert. Ein eigenes SVG kann man aber mit einem kleinem Umweg verwenden. Ich hoffe, die Arbeit hat sich schon jemand gemacht, damit das SVG auch weiterhin hübsch aussieht.

[wvhn]

Abhilfe zu dem Problem mit Apple-Geräten gibt es hier im Forum. Es ist ein Fehler von Safari. Mit Firefox funktioniert die Websocketverbindung. Oder man stellt auf Hostnamen statt IP-Adressen um.

Gruß
Wolfram

[ares72]

Hallo Wolfram,

noch einen weiteren Browser wollen sie nicht, verstehe ich auch. Ich glaube, meine Damen haben das mit Safari und Chrome getestet und beides funktioniert nicht, zumindest nicht als Link am Startbildschirm wie sie es wollen, immerhin ist smartVISU ja ihr täglicher Begleiter. Ich dachte daher, Apple trennt die Verbindung um den Akku zu schonen. Leider klappt auch das erneute Verbinden mit fhem (!) nicht so wie Du es schon in einem anderen Post mit Hinweis "debugen schwierig" dokumentiert hast. So geht's auch mir beim Ausprobieren, ich habe ja kein iPhone und die Verbindung bricht ja auch nicht auf Knopfdruck ab.

Dass es mit Hostnamen funktioniert habe ich übersehen, muss ich mal testen. Danke für den Hinweis!

Der Umweg über Home Assistant funktioniert auch schon zuverlässig und ich sehe da zusätzliche Möglichkeiten. Die Leiste oben mit der Überschrift "SmartVisu" (inzwischen "smartVISU") und die Auswahlen links sind derzeit noch ausgeblendet. Um mehr Seiten anzuzeigen, ist aber zumindest die Seite oben sinnvoll, hier lässt Home Assistant aber nur SVG Icon zu. Ich möchte smartVISU auch nicht ersetzen, aber eben "hübsch" mit Icon einbinden.

Mit Inkscape soll das Konvertieren und manuelle Nachbessern auch möglich sein, Home Assistant bereitet mir aber auch so schon nach Feierabend genug Kopfschmerzen. Ich hoffe daher, jemand hat das schon fertig und kann das SVG icon zur Verfügung stellen.

Danke
Manfred

[ares72]

Ich habe etwas gebastelt... erst schön, dann ganz einfach.
Aber auch stark vereinfacht sieht es mit 24x24 Pixel nicht wirklich gut aus.

Hier die "besser-als-nix"-Version:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<rect fill="#fff" x="2" y="2" width="20" height="20"/>
<path fill="#444" d="m3.74 23.9c-1.55-0.356-2.62-1.16-3.23-2.41-0.189-0.391-0.348-0.857-0.449-1.31-0.0604-0.272-0.0626-0.558-0.0633-8.29l-7.16e-4 -8 0.0825-0.294c0.236-0.838 0.546-1.45 1.03-2.03 0.582-0.691 1.53-1.26 2.52-1.51l0.271-0.0692 16.3 0.0171 0.331 0.103c0.934 0.29 1.55 0.644 2.14 1.24 0.57 0.572 0.927 1.17 1.22 2.06l0.102 0.308-6e-4 16.2-0.08 0.348c-0.461 2.01-1.66 3.19-3.69 3.64-0.272 0.0605-0.552 0.0625-8.21 0.061l-7.93-0.0016zm15.4-3.33c0.674-0.0564 1.06-0.206 1.41-0.546 0.276-0.271 0.427-0.554 0.539-1.01 0.0459-0.187 0.056-0.668 0.0763-3.62 0.0129-1.88 0.0248-3.46 0.0264-3.52 0.0037-0.139-0.129-0.528-0.268-0.784-0.149-0.275-0.461-0.571-0.758-0.72-0.509-0.255 0.15-0.232-7.49-0.258-3.95-0.0134-7.08-0.0107-7.38 0.0064-0.615 0.0344-1.07 0.12-1.34 0.251-0.107 0.0529-0.288 0.193-0.427 0.33-0.277 0.274-0.468 0.631-0.553 1.04-0.0568 0.27-0.0657 0.569-0.0183 0.617 0.0198 0.0198 0.0357 1.24 0.0421 3.24 0.0102 3.21 0.0103 3.21 0.0843 3.47 0.214 0.761 0.646 1.23 1.32 1.43 0.184 0.0554 0.61 0.0599 7.2 0.0758 3.85 0.0093 7.04 0.0203 7.08 0.0244 0.0455 0.0041 0.254-0.0069 0.463-0.0244zm-12.7-2.31c-0.093-0.0832-0.157-0.271-0.746-2.18-0.989-3.2-0.942-3.04-0.905-3.17 0.0177-0.064 0.0836-0.162 0.146-0.217 0.215-0.188 0.513-0.179 0.712 0.0232 0.114 0.116 0.141 0.197 0.623 1.84 0.622 2.13 0.574 1.97 0.612 1.96 0.0175-0.0058 0.274-0.841 0.57-1.86 0.412-1.41 0.556-1.87 0.616-1.93 0.304-0.33 0.898-0.154 0.901 0.267 6.42e-4 0.0865-0.275 1.03-0.751 2.59-0.414 1.35-0.769 2.49-0.789 2.54-0.0725 0.184-0.166 0.222-0.544 0.222-0.327 0-0.347-0.0041-0.444-0.091zm3.26 0.0445c-0.226-0.0985-0.214 0.0684-0.214-2.84v-2.63l0.0718-0.0912c0.208-0.265 0.721-0.236 0.863 0.0492 0.0536 0.107 0.0578 0.301 0.0561 2.65-0.0013 1.87-0.0121 2.56-0.0413 2.65-0.0587 0.17-0.222 0.266-0.45 0.265-0.102-7.13e-4 -0.231-0.0211-0.286-0.0452zm2.43 0.0104c-0.211-0.0409-0.59-0.235-0.773-0.397-0.267-0.235-0.345-0.475-0.232-0.713 0.0614-0.129 0.286-0.277 0.421-0.277 0.106 0 0.287 0.11 0.513 0.31 0.215 0.191 0.442 0.269 0.783 0.268 0.429-5.7e-4 0.729-0.172 0.808-0.462 0.0889-0.327 0.0259-0.622-0.18-0.842-0.164-0.175-0.26-0.228-0.87-0.477-0.529-0.216-0.76-0.351-0.981-0.569-0.299-0.296-0.445-0.733-0.407-1.22 0.05-0.652 0.473-1.1 1.22-1.3 0.324-0.0852 1.03-0.0761 1.37 0.0178 0.441 0.12 0.607 0.212 0.682 0.376 0.0355 0.0781 0.0648 0.175 0.0652 0.216 0.0012 0.117-0.0976 0.332-0.176 0.382-0.147 0.0946-0.23 0.0904-0.601-0.0309-0.492-0.161-0.91-0.188-1.17-0.0772-0.372 0.16-0.483 0.489-0.282 0.834 0.106 0.181 0.31 0.306 0.858 0.523 0.597 0.237 0.798 0.346 1 0.541 0.31 0.297 0.455 0.605 0.501 1.06 0.095 0.942-0.34 1.62-1.17 1.84-0.157 0.0408-1.16 0.0398-1.37-0.0014zm4.34-0.0075c-0.376-0.105-0.829-0.463-0.975-0.771-0.146-0.307-0.149-0.357-0.149-2.59l-3.92e-4 -2.13 0.112-0.122c0.102-0.112 0.129-0.123 0.323-0.135 0.18-0.0111 0.228-0.0015 0.327 0.065 0.24 0.161 0.232 0.0826 0.232 2.25 5.8e-5 2.22-0.0022 2.19 0.249 2.44 0.112 0.108 0.184 0.146 0.333 0.177 0.44 0.0914 0.806-0.0663 0.963-0.415 0.0546-0.121 0.0609-0.301 0.0761-2.17l0.0166-2.04 0.0738-0.104c0.109-0.153 0.278-0.222 0.499-0.203 0.159 0.0132 0.197 0.031 0.293 0.136l0.11 0.12-2.5e-4 2.04c-1.5e-4 1.23-0.0138 2.13-0.034 2.26-0.0749 0.477-0.36 0.84-0.851 1.08l-0.253 0.125-0.598 0.0073c-0.401 0.0049-0.647-0.0064-0.748-0.0344zm-3.02-9.79c0.246-0.0355 0.591-0.189 0.788-0.35 0.0769-0.063 0.149-0.115 0.159-0.115 0.0106 0 0.0193 0.0642 0.0193 0.143 0 0.22 0.056 0.271 0.295 0.27 0.335-0.00193 0.317 0.0695 0.317-1.27 0-1.01-0.0073-1.18-0.0616-1.39-0.184-0.72-0.79-1.09-1.6-0.973-0.298 0.0431-0.688 0.168-0.765 0.245-0.128 0.128-0.104 0.43 0.0404 0.496 0.0687 0.0313 0.134 0.0201 0.393-0.0675 0.398-0.134 0.682-0.142 0.933-0.0253 0.17 0.0792 0.17 0.0792 0.307 0.43 0.117 0.299 0.131 0.362 0.0982 0.425-0.0609 0.116-0.0884 0.123-0.476 0.124-0.569 0.00169-1.13 0.144-1.37 0.35-0.272 0.233-0.398 0.683-0.293 1.05 0.0952 0.327 0.389 0.583 0.754 0.654 0.196 0.0385 0.214 0.0387 0.453 0.00416zm-0.275-0.593c-0.195-0.121-0.26-0.222-0.275-0.43-0.0135-0.187-0.00969-0.197 0.114-0.327 0.169-0.178 0.383-0.241 0.886-0.265 0.456-0.0212 0.484-0.00666 0.482 0.254-0.0014 0.296-0.207 0.58-0.54 0.746-0.212 0.106-0.517 0.115-0.668 0.0217zm-7.82 0.498c0.484-0.174 0.686-0.525 0.612-1.07-0.072-0.527-0.396-0.806-1.19-1.03-0.433-0.12-0.5-0.157-0.577-0.319-0.0675-0.142-0.031-0.311 0.101-0.468 0.186-0.221 0.474-0.247 0.95-0.0853 0.355 0.121 0.479 0.0988 0.554-0.0986 0.103-0.271-0.128-0.433-0.741-0.522-0.859-0.124-1.46 0.256-1.5 0.957-0.0224 0.343 0.0342 0.514 0.239 0.723 0.156 0.159 0.198 0.181 0.598 0.312 0.531 0.175 0.705 0.26 0.839 0.412 0.0871 0.0992 0.105 0.146 0.105 0.282 0 0.297-0.0969 0.393-0.473 0.468-0.244 0.0491-0.494-0.00705-0.843-0.19-0.309-0.161-0.407-0.177-0.504-0.0791-0.0729 0.0729-0.089 0.26-0.0317 0.367 0.0717 0.134 0.423 0.303 0.793 0.38 0.306 0.0644 0.825 0.042 1.07-0.046zm14.7 0.0285c0.164-0.0622 0.194-0.386 0.0489-0.518-0.0562-0.051-0.138-0.0655-0.446-0.079-0.357-0.0157-0.381-0.0213-0.468-0.108l-0.0918-0.0918v-2.23l0.497-0.0197c0.273-0.0108 0.499-0.022 0.502-0.0248 0.0836-0.0725 0.11-0.131 0.11-0.245 0-0.238-0.0416-0.257-0.565-0.257-0.251 0-0.479-0.00904-0.508-0.0201-0.0455-0.0175-0.0524-0.113-0.0524-0.726 0-0.688-2e-3 -0.709-0.0756-0.794-0.0552-0.0641-0.117-0.0926-0.23-0.105-0.14-0.0158-0.164-0.00765-0.257 0.0846l-0.102 0.102 0.0099 2.13c9e-3 1.95 0.0148 2.14 0.0692 2.28 0.176 0.454 0.656 0.714 1.24 0.672 0.133-0.00957 0.276-0.0303 0.318-0.0462zm-13-0.0194c0.0545-0.0282 0.113-0.0887 0.131-0.135 0.0178-0.0469 0.0317-0.558 0.0317-1.17v-1.09l0.0925-0.177c0.227-0.434 0.845-0.531 1.2-0.188 0.221 0.216 0.217 0.189 0.235 1.49l0.0166 1.19 0.0824 0.0667c0.0662 0.0536 0.117 0.0638 0.258 0.0521 0.301-0.0249 0.286 0.0365 0.305-1.28l0.0166-1.15 0.0864-0.166c0.306-0.587 1.13-0.568 1.41 0.0329 0.076 0.163 0.0772 0.183 0.0775 1.26l3.23e-4 1.1 0.0799 0.0929c0.0684 0.0795 0.105 0.0929 0.251 0.0929 0.145 0 0.183-0.0137 0.248-0.0891 0.103-0.12 0.13-0.496 0.108-1.5-0.0185-0.819-0.0463-1.01-0.192-1.33-0.385-0.854-1.45-0.981-2.11-0.252l-0.198 0.219-0.067-0.11c-0.109-0.18-0.363-0.421-0.528-0.502-0.122-0.0603-0.21-0.0762-0.42-0.0762-0.315 0-0.551 0.0934-0.787 0.312-0.0808 0.0745-0.164 0.135-0.185 0.135-0.0217 0-0.0377-0.0546-0.0377-0.129 0-0.261-0.218-0.36-0.471-0.212-0.108 0.0628-0.108 0.0637-0.129 0.392-0.0384 0.604-0.0318 2.81 0.00871 2.93 0.0409 0.117 0.2 0.233 0.32 0.233 0.0419 6.8e-5 0.121-0.0229 0.175-0.0511zm9.33-0.0702 0.0795-0.0924-0.0194-0.679c-0.031-1.09 0.0341-1.55 0.253-1.81 0.182-0.213 0.406-0.315 0.754-0.344 0.358-0.0297 0.44-0.086 0.44-0.303 0-0.112-0.0192-0.153-0.112-0.235-0.108-0.0969-0.12-0.0994-0.38-0.0857-0.349 0.0184-0.605 0.132-0.823 0.363l-0.157 0.167v-0.148c0-0.0999-0.0224-0.177-0.0686-0.235-0.0591-0.0751-0.0936-0.0872-0.248-0.0872-0.136 0-0.196 0.0163-0.246 0.0662-0.0644 0.0644-0.0662 0.11-0.0662 1.7 0 1.77-0.0028 1.74 0.177 1.81 0.127 0.0545 0.328 0.0108 0.415-0.0903z"/>
<path fill="#000" d="m3.82 23.9c-1.7-0.295-3.21-1.57-3.61-3.28-0.359-1.21-0.147-2.5-0.207-3.75 0.025-1.73-0.052-3.48 0.0498-5.2 0.949 0.212 1.89 0.439 2.84 0.682 0.0769 2.17-0.0413 4.34 0.091 6.5 0.0976 1.08 1.13 1.88 2.2 1.73 4.76 0.0304 9.52 7e-3 14.3 0.0098 0.927-0.162 1.67-0.976 1.66-1.93 0.0803-2.2 0.0312-4.41 0.0445-6.61 0.923-0.326 1.88-0.535 2.85-0.692-0.0116 2.85 0.0291 5.69-0.0297 8.54-0.195 1.9-1.64 3.59-3.54 3.97-0.85 0.243-1.75 0.082-2.62 0.128-4.56-0.0085-9.12 0.0125-13.7-0.0143-0.105-0.0218-0.21-0.0436-0.315-0.0654zm2.68-5.59c-0.475-0.693-0.557-1.65-0.874-2.45-0.28-0.971-0.634-1.93-0.844-2.91 0.775-1.05 1.25 0.669 1.36 1.31 0.285 0.592 0.389 2.03 0.777 2.18 0.429-1.2 0.682-2.47 1.13-3.66 0.773-0.622 1.1 0.522 0.651 1.08-0.442 1.46-0.872 2.92-1.36 4.36-0.223 0.192-0.576 0.149-0.841 0.0902zm5.75 0.0164c-0.742 0.0909-1.78-1.26-0.603-1.33 0.5 0.605 1.94 0.896 2.05-0.169-0.0634-1.26-1.83-0.968-2.31-1.97-0.422-0.812-0.0496-1.98 0.924-2.16 0.682-0.12 2.3-0.268 2.14 0.785-0.566 0.525-2.26-0.729-2.25 0.699 0.389 0.895 1.74 0.688 2.2 1.57 0.604 0.917 0.137 2.49-1.07 2.57-0.362 0.0274-0.729 0.0458-1.09 0.0078zm4.47-8e-5c-0.998-0.0311-1.52-1.09-1.35-1.99 0.0196-1.18-0.0709-2.38 0.0403-3.55 0.968-0.727 0.985 0.843 0.896 1.46 0.095 1-0.196 2.1 0.195 3.04 0.932 0.824 1.77-0.42 1.46-1.34 0.0519-1.06-0.0754-2.14 0.104-3.19 1.18-0.66 0.831 1.15 0.854 1.81-0.0832 0.99 0.117 2.04-0.173 2.99-0.414 0.756-1.26 0.834-2.03 0.76zm-7.09-0.0678c-0.326-0.827-0.075-1.83-0.149-2.72 0.061-0.938-0.0971-1.94 0.127-2.84 0.594-0.38 0.984 0.198 0.825 0.728-0.0053 1.57-0.0105 3.14-0.0158 4.7-0.189 0.229-0.533 0.255-0.788 0.126z"/>
</svg>
​

Mal schaun, vielleicht finde ich noch eine bessere Lösung sobald die anderen Baustellen weniger werden.

[wvhn]

Das "icon" ist eigentlich ein Stück html-Code des Macros "lib.smartvisu" in der ./widgets/lib.html und dem zugehörigen CSS in der ./pages/base/base.css. Dazu gehört der Hintergrund ./pages/base/pics/app.png und die Schriftdateien ./pages/base/dosis.woff ,.ttf und .eot.

Mit Hilfe von ChatGPT habe ich das jetzt mal in ein reines Vektorformat ohne Bitmaps übersetzt, wobei die Schriftdatei "dosis.woff" im selben Ordner wie das svg-icon liegen muss:

<svg xmlns="http://www.w3.org/2000/svg"
     width="72" height="72" viewBox="0 0 72 72">

  <defs>
    <style>
      @font-face {
        font-family: 'Dosis';
        src: url('dosis.woff') format('woff');
        font-weight: 500;
      }
      .smart {
        font-family: 'Dosis';
        font-size: 20px;
        fill: #ffffff;
        font-weight: 200;
      }
      .visu {
        font-family: 'Dosis';
        font-size: 20px;
        fill: #000000;
        font-weight: 700;
      }
    </style>

    <!-- Hintergrund-Lichtverlauf -->
    <radialGradient id="appBgGradient" cx="50%" cy="-180%" r="250%">
      <stop offset="0%" stop-color="#cccccc"/>
      <stop offset="90%" stop-color="#888888"/>
      <stop offset="100%" stop-color="#111111"/>
    </radialGradient>

    <linearGradient id="visuGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#cccccc"/>
    </linearGradient>
  </defs>

  <!-- Icon background -->
  <rect x="4" y="4" width="64" height="64" rx="11" fill="url(#appBgGradient)" />

  <!-- smart -->
  <text x="36" y="28" text-anchor="middle" class="smart">
    smart
  </text>

  <!-- VISU background -->
  <rect x="12.7" y="32" width="46.6" height="25.6" rx="3"
        fill="url(#visuGradient)"/>

  <!-- VISU -->
  <text x="36" y="52" text-anchor="middle" class="visu">
    VISU
  </text>

</svg>

Der radiale Farbverlauf trifft das Original noch nicht zu 100%, aber als Basis ist das Ergebnis IMHO ganz gut. Wer möchte kann das gerne weiter perfektionieren.



Wenn man die Schriftart nicht in einer separaten Datei haben will / darf, dann kann man sie auch integrieren. Dazu wird die dosis.woff mit einem Online-Tool in eine base64-codierte data-url gewandelt und anstelle der bisherigen url angegeben:

     src: url(data:font/woff;base64, ...<base64-codierte Datei> ...) format("woff");

Gruß
Wolfram