HI!
Irgendwie wollen meine Icons im Circlemenu nicht funktionieren... Hat jemand eine Idee woran es liegen könnte?
HAbe Einen Screenshot gemacht wie es aussieht und welche ich nutzen möchte...
Und hier der Code:
<div class="vbox">
<div class="container">
<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="symbol"
data-device="DavidSchicht"
data-get="STATE"
data-states='["Fruehschicht","Normalschicht","Spaetschicht","Nachtschicht","Frei"]'
data-icons='["mi-sentiment_neutral","mi-sentiment_satisfied","mi-sentiment_dissatisfied","mi-sentiment_very_dissatisfied","mi-sentiment_very_satisfied"]'
data-colors='["red","#FFFFFF","#808080","#0000FF ","#00FF00"]'
></div></li>
<li><div data-type="push"
data-device="DavidFruehschicht"
data-icon="mi-sentiment_neutral"></div></li>
<li><div data-type="push"
data-device="DavidNormalschicht"
data-icon="mi-sentiment_satisfied"></div></li>
<li><div data-type="push"
data-device="DavidSpaetschicht"
data-icon="mi-sentiment_dissatisfied"></div></li>
<li><div data-type="push"
data-device="DavidNachtschicht"
data-icon="mi-sentiment_very_dissatisfied"></div></li>
<li><div data-type="push"
data-device="DavidFrei"
data-icon="mi-sentiment_very_satisfied"></div></li>
</ul>
</div>
<div data-type="label">David Schicht</div>
</div>
Vieelen Dank!
Vorab zwei Fragen:
1. ist die material-icons.min.css eingebunden?
2. Testhalber mal
data-icon="mi mi-sentiment_neutral">
versucht?
Zitat von: yersinia am 25 Oktober 2019, 10:26:38
Vorab zwei Fragen:
1. ist die material-icons.min.css eingebunden?
2. Testhalber mal
data-icon="mi mi-sentiment_neutral">
versucht?
OKAYYY... Ähm, nö... Habe sie weder eingebunden (Dachte das ist standard drin) noch funktioniert das mi-sentiment_neutral :-\
Habe jetzt mal die Zeile <link rel="stylesheet" href="/fhem/tablet/lib/material-icons.min.css" /> oben wo die anderen drin sind mit eingertagen, funktioniet aber leider auch nicht... :-[
Die Min.css ist auch im lib Verzeichnis... Siehe Screenshot. Was mache ich falsch? Warum werden sie nicht angezeigt?
:-[ Hat denn niemand eine Idee was da los ist?
@misux
Ich habe es einmal in meiner Testumgebung ausprobiert; einfaches Reinkopieren Deines Codes (sogar mit dem fehlenden </div>) reicht aus und es werden sofort die gewünschten Icons angezeigt.
Daher ergeben sich sofort ein paar Fragen:
- Liegt es am fehlenden </div>?
- Welche FTUI-Version verwendest Du?
- Hast Du Änderungen am ausgelieferten Code vorgenommen?
- Wie sieht Dein <head>-Bereich in der Hauptseite aus?
- Kannst Du generell keine Material Icons darstellen - unabhängig vom circlemenu?
Es ist frustrierend! Vor allem weil es bei dir geht...
Habe soeben ein FTUI Update durchgeführt, leider ohen Erfolg. Immernoch keine Smileys...
Hier mein Head:
<html>
</head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="cache-control" content="no-store">
<meta name='toast_position' content='top-center'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!--meta name="gridster" content="full-width" /-->
<meta name="gridster_disable" content="1">
<!--meta name="widget_base_width" content="100"-->
<meta name="widget_base_height" content="110">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="longpoll" content="1">
<meta name="debug" content="0">
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/material-icons.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-wdtimer.css" />
<link rel="stylesheet" href="/fhem/tablet/style.css">
<link rel="stylesheet" href="/fhem/tablet/css/fhem-table-user.css" />
<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
<style type="text/css">
td {
color: #808080;
}
!--body {
background:#FFFFFF
}--!
</style>
<ul>Hier der Endgültige Code: (Aber an sich wie der alte nur mit allen div..)
<div class="vbox">
<div data-type="circlemenu" data-item-diameter="" data-direction="" class="">
<ul>
<li><div data-type="symbol"
data-device="DavidSchicht"
data-get="state"
data-states='["Fruehschicht","Normalschicht","Spaetschicht","Nachtschicht","Frei"]'
data-icons='["mi-sentiment_neutral","mi-sentiment_satisfied","mi-sentiment_dissatisfied","mi-sentiment_very_dissatisfied","mi-sentiment_very_satisfied"]'
data-colors='["red","#FFFFFF","#808080","#0000FF ","#00FF00"]'></div>
</li>
<li><div data-type="push"
data-device="DavidFruehschicht"
data-icon="mi-sentiment_neutral"></div></li>
<li><div data-type="push"
data-device="DavidNormalschicht"
data-icon="mi-sentiment_satisfied"></div></li>
<li><div data-type="push"
data-device="DavidSpaetschicht"
data-icon="mi-sentiment_dissatisfied"></div></li>
<li><div data-type="push"
data-device="DavidNachtschicht"
data-icon="mi-sentiment_very_dissatisfied"></div></li>
<li><div data-type="push"
data-device="DavidFrei"
data-icon="mi-sentiment_very_satisfied"></div></li>
</ul>
</div>
<div data-type="label"
data-device="DavidSchicht"
data-states='["Fruehschicht","Normalschicht","Spaetschicht","Nachtschicht","Frei"]'
data-colors='["red","#FFFFFF","#808080","#0000FF ","#00FF00"]'
data-substitution='["Fruehschicht","Frühschicht","Spaetschicht","Spätschicht","Frei","Urlaub"]'>
</div>
</div>Tatsächlich läd er soweit ich getestet habe keine Material Icons... :-\
ZitatHast Du Änderungen am ausgelieferten Code vorgenommen?
Was genau meinst du?
Hier mal der Code der ganzen Zeile wo das circle menu ist... Könnte es an der Tabelle oder der VBox liegen?
<header class="bold large" style="background:white;color:black;">Schalter</header>
<br>
<table width="100%" class="bold">
<tr>
<td>
<div class="hbox bold large">
<div class="vbox">
<div data-type="checkbox" class="" data-on-background-color="#00FF00" data-off-color="black" data-on-color="black"
data-device="DruckluftDummy"></div>
<div style="padding:15px" class="fixedlabel" data-type="label" data-device="Druckluft" data-states='["on","off"]' data-colors='["#00FF00","grey"]'>Druckluft</div>
</div>
<div class="vbox">
<div data-type="checkbox" class="" data-on-background-color="#00FF00" data-off-color="black" data-on-color="black"
data-device="GartenKlingelDummy"></div>
<div style="padding:15px" class="fixedlabel" data-type="label" data-device="GartenKlingelDummy" data-states='["on","off"]' data-colors='["#00FF00","grey"]'>Gartenklingel</div>
</div>
<div class="vbox">
<div data-type="checkbox" class="" data-on-background-color="#00FF00" data-off-color="black" data-on-color="black"
data-device="Wasserlauf"></div>
<div style="padding:15px" class="fixedlabel" data-type="label" data-device="Wasserlauf" data-states='["on","off"]' data-colors='["#00FF00","grey"]'>Bachlauf</div>
</div>
<div class="vbox">
<div data-type="circlemenu" data-item-diameter="" data-direction="" class="">
<ul>
<li><div data-type="symbol"
data-device="DavidSchicht"
data-get="state"
data-states='["Fruehschicht","Normalschicht","Spaetschicht","Nachtschicht","Frei"]'
data-icons='["mi-add","mi-sentiment_satisfied","mi-sentiment_dissatisfied","mi-sentiment_very_dissatisfied","mi-sentiment_very_satisfied"]'
data-colors='["red","#FFFFFF","#808080","#0000FF ","#00FF00"]'></div>
</li>
<li><div data-type="push"
data-device="DavidFruehschicht"
data-icon="mi-sentiment_neutral"></div></li>
<li><div data-type="push"
data-device="DavidNormalschicht"
data-icon="mi-sentiment_satisfied"></div></li>
<li><div data-type="push"
data-device="DavidSpaetschicht"
data-icon="mi-sentiment_dissatisfied"></div></li>
<li><div data-type="push"
data-device="DavidNachtschicht"
data-icon="mi-sentiment_very_dissatisfied"></div></li>
<li><div data-type="push"
data-device="DavidFrei"
data-icon="mi-sentiment_very_satisfied"></div></li>
</ul>
</div>
<div data-type="label"
data-device="DavidSchicht"
data-states='["Fruehschicht","Normalschicht","Spaetschicht","Nachtschicht","Frei"]'
data-colors='["red","#FFFFFF","#808080","#0000FF ","#00FF00"]'
data-substitution='["Fruehschicht","Frühschicht","Spaetschicht","Spätschicht","Frei","Urlaub"]'>
</div>
</div>
<div class="vbox">
<div data-type="checkbox" class="" data-on-background-color="#00FF00" data-off-color="black" data-on-color="black"
data-device="PartyTime"></div>
<div style="padding:15px" class="fixedlabel" data-type="label" data-device="PartyTime" data-states='["on","off"]' data-colors='["#00FF00","grey"]'>PARTYTime</div>
</div>
<div class="vbox">
<div data-type="checkbox" class="" data-on-background-color="#00FF00" data-off-color="black" data-on-color="black"
data-device="TVTime"></div>
<div style="padding:15px" class="fixedlabel" data-type="label" data-device="TVTime" data-states='["on","off"]' data-colors='["#00FF00","grey"]'>TVTime</div>
</div>
<div class="vbox">
<div data-type="checkbox" class="" data-on-background-color="#00FF00" data-off-color="black" data-on-color="black"
data-device="KINOTime"></div>
<div style="padding:15px" class="fixedlabel" data-type="label" data-device="KINOTime" data-states='["on","off"]' data-colors='["#00FF00","grey"]'>KINOTime</div>
</div>
</div>
</td>
</tr>
</table>Und noch was ist mir aufgefallen.... Viele der Icons vom font-waesome.min.css sind auch defekt also schon in der übersicht...siehe Bild...
@misux
Einerseits gilt, dass die von Dir gezeigten, nicht darstellbaren
Font Awesome Icons bei mir ebenfalls nur mit ihrem Platzhalter gezeigt werden. Andererseits gilt aber zum Glück auch, dass Du die gewünschten
Material Icons grundsätzlich darstellen kannst.
Die dazu von Dir verwendete "Iconfonts Demo"-Darstellung kommt mit einem minimalistischen
head-Bereich aus
<head>
<title>FHEM-Tablet-UI :: Iconfonts Demo</title>
<meta name="icondemo" content="1">
<script src="js/fhem-tablet-ui.js" defer></script>
</head>
Im Gegensatz dazu scheint es in Deinem gezeigten
head-Bereich relativ viel Bereinigungspotential zu geben:
- Seltsam ist, dass der html-Tag mit einem </head> beginnt - keine Ahnung, wie das interpretiert wird ...
- Der eigentliche head-Bereich hat keinen umschließenden head-Tag
- Vermutlich mehr als "90%" der link- sowie script-Tags können gelöscht werden; die zum Lieferumfang gehörenden Dateien müssen in der Regel nicht explizit eingebunden werden; Ausnahme sind lediglich fhem-tablet-ui.js sowie nutzerspezifische Dateien wie z.B. style.css.
- der ul-Tag hat im head nichts verloren ...
Angehängt habe ich mal eine Datei, die als neue HTML-Startseite nur den Zweck hat, das circlemenu mit den gewünschten Icons darzustellen. Einmal nur als circlemenu und einmal als Element der Schalterleiste ...
:-\ Klasse! Vielen Dank für die ausführliche Antwort!
Ich werde heute Abend mich dran machen und weiter testen/bereinigen...
An sich habe ich eigentlich keine Ahnung von HTML... habe mir nur mühevoll eine FTUI Seite Erstellt die mir auf einer Tabletseite das Wetter, Uhrzeit, die Lichtzustände, Schalterzustände und ein paar Informationen anzeigt. 2 Rollos kann ich steuern und ein Informationsfeld gibt es das nur erscheint wenn relewante Informationen vorhanden sind.
Naja und nun wollte ich mir das circlemenu erstellen weil sich meine Arbeitsumstände geändert haben... Leider Scheitere ich an den Icons...
Was den HEAD Bereich angeht... ::) :o ??? ;D Ich habe keinen Plan... Das muss ein alter aus einer Originalen FTUI sein... Ich weiß es nicht mehr nach so vielen anfängen und frustrierenden miserfolgen...
Werde versuchen einen Sauberen HEAD Bereich zu erstellen, weiß zwar noch nicht genau wie, aber denke werde mich mit einer Originalen FTUI behelfen...
Vielen Dank schon mal für deine MÜHE!!!
:D
Wie soll ichs sagen...
Du bist heute mein persönlicher Held!
Habe den HEADBereich übelst gekürzt und jetzt geht es!
VIELEN DANK!!!!!