Hallo zusammen,
ich erweitere gerade mein Smartphone optimiertes TabletUI (https://forum.fhem.de/index.php/topic,76306.0.html)
Eigentlich sollte nur ein einfacher zusätzlicher homestatus-Schalter mit ein paar anderen Icons hinzu kommen. Da ich bei den sonst üblichen fontawesome Icons nichts gefunden habe was passt, habe ich mich bei den material icons umgesehen.
Aber egal welches Material Icon ich auswähle, es wird nicht gefunden.
Statt dem Icon steht nur ein "undefined" an der Stelle des Icons.
Mein Header in der index.html sieht so aus:
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="debug" content="3"> <!-- verbose level 1-6 = output to console;0 = not output -->
<meta name='toast' content='0'> <!-- keine Ausgabe von Protokollmeldungen -->
<meta name="longpoll" content="1">
<link rel="stylesheet" href="css/fhem-mobil-ui.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui-wdtimer.css" />
<link rel="stylesheet" href="user-tablet-ui.css" />
<link rel="stylesheet" href="lib/material-icons.min.css" />
<script src="js/fhem-tablet-ui.js" defer></script>
<script src="js/widget_wdtimer.js"></script>
<title>FHEM</title>
</head>
Testweise habe ich die Zeile mit dem <link rel="stylesheet" href="lib/material-icons.min.css" /> hinzugefügt. Allerdings ohne Erfolg.
Überlicherweise ist es ja bei der aktuellen Version des TabletUI ausreichend, wenn man die <script src="js/fhem-tablet-ui.js" defer></script> Zeile hat.
Die icons_table.html funktioniert. Da werden alle Icons angezeigt und da sieht man ja am HTML-Code auch, dass nur die fhem-tablet-ui-js Datei geladen wird, um dann alle Icons zu haben.
Was ist hier also los, warum werden die mi-Icons nicht geladen.
Gleiches gilt im übrigen für alle Icons außer fontawesome. Es funktionieren die ftui-Icons nicht, die weather-icons nicht und openautomation-icons nicht.
Meine homestatus ist so gebaut:
<div class="vbox">
<div data-type="homestatus"
data-device="Wohnung.Schalter"
data-get-on='["Alltag","Fruehschicht","ausserHaus","Spaetschicht"]'
data-alias='["Alltag","Früh","ausserHaus","Spät"]'
data-icons='["fa-spinner","mi-alarm","fa-car","fa-car"]'
class="blue"></div>
</div>
Könnte es sein, dass das speziell am homestatus-Widget liegt? Das lädt ja die Icons per "data-icons" statt per "data-icon".
Im Seitenmenü funktionieren die material-icons nämlich...
<nav class="menu">
<div class="menu-trigger"></div>
<header>Menu</header>
<ul>
<li>
<div data-type="link" data-url="#content_home.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_home"
data-text-align="left"
data-active-pattern="(.*index.html|.*#content_home.html)"
data-icon="fa-home" class="large"><span>Home</span></div>
</li>
<li>
<div data-type="link" data-url="#content_chart.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_chart"
data-text-align="left"
data-active-pattern=".*(#content_chart.html)"
data-icon="mi-show_chart" class="large"><span>Grafiken</span></div>
</li>
<li>
<div data-type="link" data-url="#content_settings.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_settings"
data-text-align="left"
data-active-pattern=".*(#content_settings.html)"
data-icon="mi-settings" class="large"><span>Einstellungen</span></div>
</li>
</ul>
</nav>
Vielen Dank für die Unterstützung,
Bond
Versuch mal das auszukommentieren:<link rel="stylesheet" href="lib/material-icons.min.css" />
Wie schon gesagt, das habe ich nachträglich hinzugefügt, um zu testen ob es eventuell damit funktioniert.
Hat leider nicht zum Erfolg geführt.
Üblicherweise ist mein Code ohne diese Zeile und es funktioniert nicht.
Sorry, hatte zu schnell gelesen.