Die Frage ist zwar schon mal gestellt worden, leider hat mir die Antwort nicht geholfen und ich komme nicht weiter.
Wie kann ich mir alle Installierten Icons UND deren Namen anzeigen lassen ?
Mit fontforge sehe zwar welche Symbole in dem Zeichensatz enthalten sind aber leider habe ich da keine Zuordnung zu den Namen unter dem ich das Icon einbinden kann.
Leider gibt weder die Wiki Seite noch die Suche was dazu aus und da ich mich leider mit der Web Programierung nicht auskenne, komme ich nicht weiter.
Irgendwo hatte ich zwar ein script gen_iconsdemo.pl gefunden aber das bekommen ich auch nicht zum Laufen.
Stefan
Moin.
Für FontAwesome-Icons:
http://fortawesome.github.io/Font-Awesome/icons/ (http://fortawesome.github.io/Font-Awesome/icons/)
Prefix= fa-
FTUI-Icons:
- ftui-window
- ftui-door
FHEM-Icons:
Du kannst dir alle Icons die in FHEm integriert sind über FHEMWEB anzeigen lassen... Es sind aber nicht alle in FTUI implementiert. Prefix= fs-
Dort sind auch OpenAutomation-Icons mit drin: Prefix= oa-
Nicht vergessen die dementsprechenden CSS-Files in deine index.html einzubinden:
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
Grüße^^
Danke das ist auch das was im Wiki steht.
ABER wenn ich jetzt die openautomation Icons installiere habe ich keine Zuordung
Ich möchte mir nur eine Seite anzeigen lassen auf der alle Icons erscheinen.
Ich z.B. folgenden Menüentrag angelegt :
<div data-type="pagetab" data-url="sub5.html" data-icon="oa-secur_locked" class="top-space"></div>
wird mir aber nicht angezeigt. Außerdem woher soll ich wissen welche Icons in dem Zeichensatz stecken und welchen namen die haben ?
Den zeichensatz habe ich auch Installiert, bzw er war schon vorhanden und auch mit
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
eingebunden.
Stefan
@roman1528
Danke für den Hinweis zu FontAwesome-Icons
Nur .. wie bat man die als Icons z.B. für einen Menüeintrag ein??
Sorry, stehe deswegen momentan "auf dem Schlauch"
Was läuft denn bei Dir beim Script gen_iconsdemo.pl nicht?
Im PERL-Script müssen evtl. die Referenzen auf die .css und .js-Files angepasst werden.
Anbei mein aktueller Stand. Die Dateien sollten unterhalb ../tablet (evtl. in einem Folder) abgelegt werden. Der Aufruf von icons_table.htmlerfolgt ensprechend wie bei FTUI.
Gruß,
Mario
Zitat von: Wernieman am 04 März 2016, 12:46:47
Nur .. wie bat man die als Icons z.B. für einen Menüeintrag ein??
Das verstehe ich nicht... Beim besten Willen nicht!
Was willst du machen? Was geht nicht? Menüeintrag? Als was?
jetzt wirst du dich wahrscheinlich totlachen aber ich habe es im Tablett Verzeichniss über die Komandozeile aufgerufen.
Ist bestimmt falsch aber ich wusste nicht wie ich das sonnst aufrufen kann.
So was in der art, wie deine Anhänge habe ich gesucht. Werde nachher mal versuch Sie einzubinden. Danke
@Wernieman
Der Hinweis auf die FontAwesome-Icons steht auch im Wiki.
Stefan
Thanks .. werde ich mir doch nochmals durchlesen (müssen)
@roman1528
Besten dank nochmal. Das war genau was ich gesucht habe.
die icons.html bzw die icons_table.html rufe ich Tablet UI Adresse auf http://home:8083/fhem/ftui/icons_table.html
und schon habe ich genau was ich wollte.
@Wernieman
Es ist nicht schön wenn man in einem anderen threat seine fragen stellt, die nichts damit zu tun haben.
Bei dir geht es um die Grundsätzliche Installation und die ist im Wiki beschrieben und wird auch hier im Forum und in diversen Blocks
genau erklärt .
Deswegen solltest du nicht wundern, wenn du hier keine antwort bekommst.
Stefan
Es kam, weil der Link genau hier eingefügt wurde ... sorry nochmals ;o)
Hallo zusammen.
Ich bin wahrscheinlich zu dumm für diese Geschichte. :o
Wie kann ich das jetzt genau machen, damit die HTML-Seite erstellt wird, bzw. angezeigt wird?
Ich habe die beiden .pl Dateien. Wo werden diese hin kopiert, wie/wo gestartet/ausgeführt und wie wird die Seite aufgerufen (Im Browser? unter FTUI?, oder, oder, oder?)
Könnt ihr einem totalen Linux Noob helfen? :-[
@Hoogle, sind die html-Dateien in Beitrag #4 gemeint?
Speichere die Dateien im folgenden Pfad /<fhem-path>/www/tablet
In diesem Ordner sind auch die html-Dateien von Tablet UI abgelegt.
Ich gehe einmal davon aus, das bei Dir eine lauffähige Tablet UI vorhanden ist und in Deinem
Browser geöffnet ist. Einfach die Link-Endung von Deiner Tablet UI Startseite z.B. .../index_home.html in icons_table.html ändern.
;D ;D ;D ;D
Was soll ich sagen.
Es kann so einfach sein.
Vielen Dank
Auch von mir
Vielen Dank
das hatte ich die Tage auch schon gesucht und nicht gefunden.
Merci
Dummbatz
Kann mir einer sagen wie ich das "gen_iconsdemo.pl" zum lauen bekomme??
root@www:/opt/fhem/www/tablet# chmod 777 gen_iconsdemo.pl
root@www:/opt/fhem/www/tablet# ./gen_iconsdemo.pl
./gen_iconsdemo.pl: Zeile 7: Syntaxfehler beim unerwarteten Wort `newline'
./gen_iconsdemo.pl: Zeile 7: `<!DOCTYPE html>'
root@www:/opt/fhem/www/tablet#
root@www:/opt/fhem/www/tablet# perl gen_iconsdemo.pl
Bareword found where operator expected at gen_iconsdemo.pl line 23, near "<title>fhem"
(Missing operator before fhem?)
syntax error at gen_iconsdemo.pl line 10, near "<"
Unrecognized character \xC2; marked by <-- HERE after at master <-- HERE near column 52 at gen_iconsdemo.pl line 23.
root@www:/opt/fhem/www/tablet#
Ich habe auf Zeile 45 den Pfad angepasst, das Script unter /opt/fhem/www/tablet/gen_icons.pl abgespeichert und ausgeführt - funktioniert hervorragend.
ABER: das Unterverzeichnis "/opt/fhem/www/tablet/examples" muss bereits vorhanden sein. Ist es das nicht, werden auch keine Dateien erzeugt.
Mein Pfad auf Zeile 45: /opt/fhem/www/tablet/lib/$cssfile
Hier nochmal das Script, wie es bei mir funktioniert:
#!/usr/bin/perl
use strict;
my @cssfiles = qw(font-awesome.min.css openautomation.css fhemSVG.css);
my $color='#f0f0f0';
my $html_head = '<!DOCTYPE html>
<html>
<head>
<title>FHEM-Tablet-UI :: Iconfonts Demo</title>
<meta name="widget_base_width" content="116">
<meta name="widget_base_height" content="131">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
';
foreach my $cssfile (@cssfiles) {
$html_head .= ' <link rel="stylesheet" href="/fhem/tablet/lib/'.$cssfile.'" />'."\n";
}
$html_head .= ' <script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
</head>
<body style="background-color:#2a2a2a">
';
my $html_foot = '
</body>
</html>';
my $html_icons;
my $html_table;
foreach my $cssfile (@cssfiles) {
$html_icons .= "\n <h2>$cssfile</h2>\n";
$html_table .= "<tr><th><h2 colspan='3'>$cssfile</h2></th></tr>\n";
my %icons;
open CSS, "/opt/fhem/www/tablet/lib/$cssfile" or die $!;
while(my $line = <CSS>) {
$line =~ s/.path\d+//g;
my @matches = $line =~ /\.([^.'";]*?):before/ig;
for my $match (@matches) {
$icons{$match}++;
}
}
close CSS;
my @icons = sort keys %icons;
for my $icon (@icons) {
$html_icons .= ' <div data-type="symbol" data-icon="'.$icon.'" title="'.$icon.'" data-off-color="'.$color.'"></div>'."\n";
$html_table .= ' <tr><td><div data-type="symbol" data-icon="'.$icon.'" title="'.$icon.'" data-off-color="'.$color.'"></div></td><td>'.$icon.'</td><td>'.$cssfile.'</td></tr>'."\n";
}
}
open HTML, '> examples/icons.html';
print HTML $html_head;
print HTML $html_icons;
print HTML $html_foot;
close HTML;
open HTML, '> examples/icons_table.html';
print HTML $html_head;
print HTML '<table>';
print HTML $html_table;
print HTML '</table>';
print HTML $html_foot;
close HTML;
print "Ok\n";