Frontend zum Eigengebrauch umgestalten

Begonnen von dorf, 20 Oktober 2013, 00:30:30

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1 2 3 4 Alle
Benutzer-Aktionen

dorf

20 Oktober 2013, 00:30:30
Hallo alle zusammen,

gibt es eine Möglichkeit mit der 99_myUtils.pm JavaScript und CSS in den Header oder/und Footer einzusetzen?

Oder gibt es generell eine Möglichkeit den Header oder Footer um eigene Scripte zu erweitern?


Gruß dort

rudolfkoenig

#1
20 Oktober 2013, 08:32:37
Scripte einzufuegen kann man, indem man folgende Variable(n) setzt: $data{FWEXT}{meinscript}{SCRIPT} = "meinscript.js"
Eigenen CSS kann man mit einem neuen Style anfordern. Was mit header und footer gemeint ist, weiss ich nicht genau, vermutlich ist die Antwort nein.

dorf

#2
20 Oktober 2013, 21:48:50
Hi,

danke hat nach ein paar Versuchen wunderbar funktioniert.

Eigene Styles und JS in Header und Footer ->
Styles und JS in den <head> Bereich bzw vor dem </body> zu platzieren, wenn möglich noch in einer bestimmten Reihenfolge.

Andere Frage tut sich jetzt nach einigen Versuchen bei mir auf? Gibt es eine Möglichkeit das Rendering des darstellenden HTML zu beeinflussen ohne die 01_FHEMWEB.pm ändern zu müssen? Also Aufrufe der Ausgabe neu bzw umzuschreiben?
Code Auswählen
  ##############
  # LOGO
  my $hasMenuScroll;
  if($FW_detail && $FW_ss) {
    $FW_room = AttrVal($FW_detail, "room", undef);
    $FW_room = $1 if($FW_room && $FW_room =~ m/^([^,]*),/);
    $FW_room = "" if(!$FW_room);
    FW_pO(FW_pHPlain("room=$FW_room",
        "<div id=\"back\">" . FW_makeImage("back") . "</div>"));
    FW_pO "<div id=\"menu\">$FW_detail details</div>";
    return;

  } else {
    $hasMenuScroll = 1;
    FW_pO '<div id="menuScrollArea">';
    FW_pH "", '<div id="logo"></div>';

  }


Gruß dorf

rudolfkoenig

#3
20 Oktober 2013, 23:02:18
Das kann man doch mit JS hervorragend machen.

dorf

#4
20 Oktober 2013, 23:13:38
Hi,

klar kann man.
Dachte nur man könnte ein Framework über FHEM stülpen und somit erreichen das man nicht verschiedene Ports für die Frontends brauche und auch noch eine App. Dachte an Foundation, Bootstrap oder jQuery Mobile, somit wäre das Frontend responsive und auf allen Devices verfügbar.
Deswegen die Frage ob es eine Möglichkeit gibt das Rendering umzuschreiben ohne die 01_FHEMWEB.pm zu ändern.

rudolfkoenig

#5
21 Oktober 2013, 08:20:38
Sowas wuerde ich an deine Stelle mit einem separaten index.html bauen, die JS und CSS laedt.
Die Daten kann man mit XmlList/JsonList holen, und auf Aenderungen mit inform reagieren.
Man koennte damit auch eine "offline" Anwendung machen, um Bilder nicht erneut zu laden.

dorf

#6
21 Oktober 2013, 10:41:18
Ok, schau ich mir mal an.
aber wie kann ich daten zurückschreiben?

Die andere Lösung wäre irgendwie eleganter gewesen, da das lediglich ein umschreiben des HTML bedeutet hätte.

dorf

#7
04 November 2013, 23:48:02 Letzte Bearbeitung: 05 November 2013, 09:14:13 von dorf
Hi,

ich schon wieder. Hab mal einen Startscreen für Fhem in Bootstrap zusammen gestellt. Besteht für eine responsive Umsetzung des Frontend in einer der kommenden Versionen von Fhem evtl. die Möglichkeit?

Desktop
Mobile ab kleiner 768px

Frank Hell

#8
05 November 2013, 07:57:55
Zitat von: dorf am 04 November 2013, 23:48:02
Hab mal einen Startscreen für Fhem in Bootstrap zusammen gestellt. Besteht für eine responsive Umsetzung des Frontend in einer der kommenden Versionen

Das sieht ja richtig klasse aus! Ich habe für meine Zwecke die "brightstyle.css" etwas angepasst. Aber eine "responsive" Umsetzung wäre natürlich viel besser.
Ich hoffe das Projekt nimmt richtig Fahrt auf - viel Erfolg!

dorf

#9
05 November 2013, 22:09:02
Update zu den ersten Screens. Eine Darstellung eines Room könnte dann so aussehen.


fhainz

#10
10 November 2013, 15:32:32
Sieht klasse aus!
Lass uns bitte an deinen Entwicklungsstand teilhaben ;)

Grüße

molnitza

#11
16 Januar 2014, 23:06:00
Hast du von deinem Frontend eine lauffähige Version die du uns zu Verfügung stellen magst?

dorf

#12
16 Januar 2014, 23:09:45
Hi,

lauffähigen HTML Dummy hab ich zur Zeit nur. Eine Weiterentwicklung wurde leider aus beruflichen Gründen aufgeschoben, eng das ich im Februar / März weiter machen werde.

strauch

#13
17 Januar 2014, 11:30:09
Das schaut sehr gut aus, hab auch angefangen ein anderes Design aufzubauen, mir fehlt aber auch etwas die Zeit. Machst du das ganze Responsive?
FHEM 5.6 VMware mit Debian. 1 CUL für FS20 und HMLAN für Homematic, HM-CC-RT-DN, HM-LC_Sw1PBU-FM, HM-LC-Bl1PBU-FM,  HM-SEC-SC, HM-SEC-SC-2, HM-LC-Sw1-Pl2, HM-Sec-RHS, ASH2200, FHT80B, S20KSE, Sonos, XBMC, FB_Callmonitor, SMLUSB, Arduino Firmata, uvm.

molnitza

#14
17 Januar 2014, 12:55:39 Letzte Bearbeitung: 18 Januar 2014, 11:52:04 von molnitza
Er baut mit dem HTML Framework bootstrap, was genau für so etwas gedacht ist. Ich schaue mir FHEM das Wochenende mal an, da ich ein modernes Frontend programmieren möchte, in dem nur das nötigste angezeigt wird. Konfigurieren kann man schließlich auf dem originalen Frontend ausreichend gut. Vielleicht steht am Sonntag schon was brauchbares.

So wie es sich mir darstellt wird man die 01_FHEMWEB.pm direkt anfassen müssen. Sehe ich das richtig?
Drucken
Nach oben Seiten1 2 3 4 Alle
Benutzer-Aktionen