Tablet AJAX/JavaScript/HTML GUI

[infeliz]

mh. das klappt schon ganz gut! der Anfang ist gemacht.

[noice]

Uhi nice... hab ihr euch nun schon zusammen gefunden?

[selfarian]

...hat sich erledigt... nach einem restart des raspi ging es wieder...

trotzdem: super sache, gefällt mir bisher ganz gut.
Habt ihr die Steuerung der Heizung schon realisiert, oder nur Anzeige?

[SkyRaVeR]

@infeliz

Drag 'n Drop inkl. speichern von Werten zurück in meine config.xml habe ich schon eingebaut. Allerdings braucht man dazu ein Modul was mich stört.
Ich suche noch eine Möglichkeit ohne weitere Modifikationen durch Module/eigenen Webserver etc. die Daten zurück zu schreiben.
Möglich aber unkomfortabel wäre es den Benutzer erst eine Datei runterladen zu lassen und dann gleich wieder hochzuladen. Javascript unterbindet es ja leider Daten zu schreiben.
Soweit ich das gerade sehe kann aber der integrierte Webserver keine cgi requests beantworten
Mal schauen wie ich das geschickt umsetze ohne es für den Nutzer zu kompliziert zu machen. Evtl. werde ich ein kleine Javaprog als "Konfigurator" basteln oder das webserver modul für
unsere Zwecke erweitern.

Was meint der Rest?
- Eigenes standalone GUI-Prog zum konfigurieren ?
- Eigenes Modul in fhem ?
- Fhem-webserver Modul erweitern ?

Ansonsten bin ich mit dem Backend-Anteil leider noch nicht so weit wie ich mir das gewünscht habe... Leider viel zu Tun gerade
Was aktuell geht:
- Konfigurieren ohne die config.xml anzufassen
-> Anlegen/Löschen und Bearbeiten von Menüpunkten
-> "Widgets" zu einem View hinzufügen und positionieren (Devices aus fhem werden ausgelesen und die readings bereit zum Auswählen bereitgestellt)
-> Drag 'n Drop zum Positionieren der Widgets im View

Was noch fehlt:
- cross browser kompatibiliät verbessern (nur mit chromium und safari getestet)
- hübsches Design *g*

Diesbezüglich müssen wir uns mal zusammen setzen und die Grundstruktur festziehen damit wir nicht unnötig parallel das Gleiche basteln und schneller voran kommen

Grüße

[selfarian]

Wenn ich was helfen kann und sei es nur zu testen, sagt bescheid

[infeliz]

Meintest du sowas?

Code Auswählen Erweitern

<script language="JavaScript">
  // Create a connection to the file.
  var Connect = new XMLHttpRequest();

  // Define which file to open and
  // send the request.
  Connect.open("GET", "Customers.xml", false);
  Connect.setRequestHeader("Content-Type", "text/xml");
  Connect.send(null);

  // Place the response in an XML document.
  var TheDocument = Connect.responseXML;

  // Place the root node in an element.
  var Customers = TheDocument.childNodes[0];

  // Retrieve each customer in turn.
  for (var i = 0; i < Customers.children.length; i++)
  {
   var Customer = Customers.children[i];
 
   // Access each of the data values.
   var Name = Customer.getElementsByTagName("Name");
   var Age = Customer.getElementsByTagName("Age");
   var Color = Customer.getElementsByTagName(
     "FavoriteColor");
 
   // Write the data to the page.
   document.write("<tr><td>");
   document.write(Name[0].textContent.toString());
   document.write("</td><td>");
   document.write(Age[0].textContent.toString());
   document.write("</td><td>");
   document.write(Color[0].textContent.toString());
   document.write("</td></tr>");
  }
</script>

[infeliz]

oder sowas

http://efxa.org/2013/06/03/how-to-transform-an-xml-document-into-html5-using-xslt/

[SkyRaVeR]

@infeliz
nee, ich meine die simple Möglichkeit die vom Nutzer "zusammen geclickte gui" wieder in die config.xml zu speichen.
Werde es wohl erstmal über ein zusätzliches Modul machen, aber mal anfragen ob nicht irgendwer cgi support in den webserver mit einbauen mag.
Wenn ich das mache ist es blöd weil man so bei
Hast du deine Widgets alle eigentlich standalone, oder immer nur in die index.html integriert? Sollten auf jedenfall zeitnah unsere Sachen mergen damit wir mit einem Stand arbeiten...

Grüße

[elfrinjo]

Zum Thema Config schreiben:
Der aktuelle Webserver dürfte doch schon entsprechende Funktionen im Rahmen von Edit Files kennen, oder?

[SkyRaVeR]

@elfrinjo
echt? Ich dachte er kann nur Werte in die fhem.cfg speichern... Hast du evtl. 'nen Link für mich? Scheine das übersehen zu haben...

Gruß & Danke

[elfrinjo]

Hi,
das ist nur, was ich aus User- und Header-Sicht sehe. (Stehe leider auf Kriegsfuß mit Perl)

Es gibt ein Kommando "style edit", das POST Requests entgegennimmt.
In so einem Request lässt sich Form-Data übergeben.

Der folgende Request hat eine gplot Datei geöffnet und dann als css Datei gespeichert. Das Zielverzeichnis ist scheinbar von der Dateiendung abhängig.
.gplot --> www/gplot/
.css --> www/pgm2/
und der Rest nach FHEM/

Code Auswählen Erweitern


Request URL:http://fhem.fritz.box:8083/fhem?cmd=style%20edit%20SM_CPUStat.gplot

FormData (parsed)
saveAs:Save as
saveName:SM_CPUS55555tat.css
cmd:style save SM_CPUStat.gplot
data:# Inhalt der zu
# speichernden Datei



EDIT:
Ich habe es jetzt auch im der 01_FHEMWEB.pm gefunden. Die Orte an denen geschrieben werden kann ist doch recht eingeschränkt:

Code Auswählen Erweitern

1675 sub
1676 FW_fileNameToPath($)
1677 {
1678   my $name = shift;
1679
1680   $attr{global}{configfile} =~ m,([^/]*)$,;
1681   my $cfgFileName = $1;
1682   if($name eq $cfgFileName) {
1683     return $attr{global}{configfile};
1684   } elsif($name =~ m/.*(css|svg)$/) {
1685     return "$FW_cssdir/$name";
1686   } elsif($name =~ m/.*gplot$/) {
1687     return "$FW_gplotdir/$name";
1688   } else {
1689     return "$MW_dir/$name";
1690   }
1691 }

[schnibberle]

Den kompletten Auszug habe ich dir per PN geschickt.

Hier ein Teil davon

Code Auswählen Erweitern


    },
    "Readings": {
      "block": { "Value":"unlock", "Time":"2015-03-12 16:40:23" },
      "nightReduction": { "Value":"0", "Time":"2015-03-12 16:40:23" },
      "setpointTemp": { "Value":"13.1", "Time":"2015-03-12 16:40:23" },
      "state": { "Value":"T: 21.8 SPT: 13.1 NR: 0", "Time":"2015-03-12 16:40:23" },
      "temperature": { "Value":"21.8", "Time":"2015-03-12 16:40:23" }
    },
    "Attributes": {
      "IODev": "TCM_ESP3_0",
      "alias": "Schlafzimmer Heizung",
      "manufID": "00D",
      "model": "FHK61",
      "room": "EnOcean",
      "setCmdTrigger": "refDev",
      "subDef": "FFEFFFEF",
      "subType": "roomSensorControl.05",
      "temperatureRefDev": "EnO_4BS_019CA9ABB"
    }
  }
  ],
  "totalResultsReturned":1
}

Hab den Fehler gefunden. FHEM konnte die js nicht öffnen. Ist mir beim "backup" aufgefallen mit
"chmod 777 -R /opt/fhem/www/lcarshome/"  tuts

Geht also auch mit Enocean. Weitere Tests folgen...

[SkyRaVeR]

@elfrinjo
joa, das hab ich hauch gesehen
Bin auch kein Freund von Perl, aber versuche es ein wenig nebenbei zu lernen. Zum Glück gibt es !google und eine große Community dahinter.
Werde jetzt erst einmal mit einem kleinen blöden Hack fortfahren damit es hier etwas weiter geht...

Code Auswählen Erweitern


# lcars hack #####
     if ($ext eq "cgi") {
return FW_lcarsserveSpecial($file, $ext, $ldir, $arg );
     }
#############


Naja, nicht schön aber fürs erste muss es so gehen.
Werde jetzt mal zusehen, dass ich die Woche Bugs fixe..

@schnibberle - super, dass freut mich

@infeliz - wie mergen wir am Besten die ganzen Widgets und co?  Sollten auch noch einmal über die config.xml schauen was man dort noch besser machen kann... (Wenn wer Vorschläge und Anregungen hat bitte bescheid geben

Grüße

[noice]

Passiert hier noch was?

[BjoernC]

Moin zusammen,

Ich bin erst vor ein paar Tagen auf dieses Projekt gestoßen (einfaches und automatisiertes Layouting, cool!) und leider scheint es ja "tot" zu sein. Ich habe das letzte Coding von SkyRaVeR inklusive einigen Bugfixes und Verbesserungen auf GitHub hochgeladen (https://github.com/MichaelAnders/lcars4fhem). Läuft jetzt seit gestern ganz gut daheim.

Ich hoffe, daß ist ok und hoffe ebenfalls, dass an diesem geilen Projekt wieder mehr passiert

VG,
Björn