Ankündigung

Einklappen
Keine Ankündigung bisher.

[Anfänger] Anpassung eines einfachen divs

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    [Anfänger] Anpassung eines einfachen divs

    Hallo,

    ich habe ein paar Anfänger Fragen. (Habe noch kein Smarthome system, aber wir ziehen bald in unser Haus ein, welches einige KNX Steuerungen bekommt [Rolladen, Licht, Heizung, ...].) Wir haben uns entschieden zunächst SmartHomeNG und SmartVISU zu verwenden. Ich will gerade die Templates für unsere Zimmer schreiben und hänge an folgendem Stück Code:

    Code:
    <div class="block">
            <div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
    
                    <div data-role="collapsible" data-collapsed="false">
                            <h3>Rolladen</h3>
                            {{ device.blind('blind1', 'Ganzer Raum', 'bath.blind.mov', 'bath.blind.stop', 'bath.blind.pos') }}
    
    
                            {{ device.blind('blind2', 'Großes Fenster', 'bath.blind.mov', 'bath.blind.stop', 'bath.blind.pos') }}
    
                            {{ device.blind('blind3', 'Kleines Fenster', 'bath.blind.mov', 'bath.blind.stop', 'bath.blind.pos') }}
    
                    </div>
    
            </div>
    </div>

    Das sieht momentan wie folgt aus:

    rolladen.png

    1) Da alle 3 blind Devices momentan die selbe Variable haben, übernehmen sie gegenseitig die Werte. Mein gewünschtes Verhalten wäre aber, dass der erste als Master und die anderen beiden als Slave funktionieren. (Sollten das große und das kleine Fenster einen unterschiedlichen Status haben, kann der "Ganze Raum" immer "ganz oben" anzeigen. Sollte ich beim "Ganzen Raum" dann eine Einstellung vornehmen, sollten die beiden Rolladen aber natürlich wieder entsprechend gesteuert und das auch entsprechend visualisiert werden. Kann mir jemand sagen wie hierfür vorgegangen wird?

    2) Ich hätte gern die Bezeichnungen "Ganzer Raum" usw. nicht rechts daneben, sondern oben drüber. Kann man das ändern? Wenn ja, wie? Edit1: Ich kann natürlich die Bezeichnung raus nehmen und sie separat / manuell drüber schreiben, aber gibt es da eine bessere Lösung?

    3) Ich hätte gern, dass die 3 Elemente nicht untereinander, sondern nebeneinander in einer Reihe angeordnet werden. Ist das über HTML / CSS einzustellen?
    Edit2: Habe in nem anderen Template gesehen, dass man das relativ einfach über eine Tabelle lösen kann. Nach allem was ich so über aktuelles Web-Design weiß, ist dass man Tabellen in der Regel eigtl. nur noch für echte Tabellen micht Daten verwendet... Hat da vlt jemand eine elegantere Lösung?

    Edit3:
    4) Ist es später theoretisch möglich, dass der Rolladen anzeigt, dass der Motor sich gerade bewegt? Beispiel: Ich drücke auf Rolladen nach unten und der Button nach unten leuchtet solang grün, bis er entweder unten angekommen ist, oder die Operation gestoppt wird?

    Edit4:
    5) Und noch eine weitere Frage... Wie kann man logs auslesen / debuggen? Ich wollte die Funktionalität hinzufügen, die Anrufliste meiner Fritzbox auszulesen. Habe also einen Service-Benutzer erstellt, in die config eingetragen, das entsprechende tag
    Code:
    {{ phone.list('phonelist', 'Phonelist') }}
    in die index.html meiner page gepackt und die seite aufgerufen. Aber leider sehe ich nichts. Ich habe also ins /var/log/nginx/error.log geschaut, aber da finde ich keine Information warum ich keine Daten sehe. Ebenso wenig im access.log im selben Verzeichnis. Andere logs habe ich ebenfalls nicht gefunden und google hat mir auch nicht gesagt wo smartvisu die eigenen logs ablegt...

    Für kleine Hilfestellungen, wäre ich sehr dankbar!

    Viele Grüße
    David
    Zuletzt geändert von Misanthrop; 24.02.2019, 22:45.

    #2
    Zu 1: das sollte natürlich nicht über die VISU sondern über die Programmierung im KNX oder aber auch einfach in shNG erfolgen. Dazu entweder eigene Gruppenadressen (KNX) inkl. der Items oder nur die Items in shNG anlegen. Dann kann man das in der Visu auch entsprechend Realisieren. Ob über KNX oder nur shNG hängt davon ab, ob du das "Ganzer Raum" evtl. auch auf die Schalter legen möchtest.

    Zu 2: mehr anpasungen sind möglich, wenn man sein eigenes Widget erstellt. Evtl. wäre es auch möglich (wie die ja selbst schon vorgeschlagen hast) den Namen weg zu lassen und das dann einfach im HTML anzupassen....

    Zu 3: das sollte über Float funktionieren, dass man alle nebeneinander Klemmt... evtl. vorher in DIVs verpacken und die Divs dann floaten. Oder halt in ne Tabelle....

    Zu 4: das hängt von deinem Aktor ab, ob der das Ausgibt. Wenn nicht könnte man auch evtl. einen Hack bauen, dass du in shNG ein Item anlegst, welches nach aktivieren einer Fahrposition eine Bestimmte Zeit X auf 1 Springt und dann automatisch wieder auf 0. Das wäre zwar nicht genau, aber eben eine Möglichkeit.

    Zu 5: das ist die Funktion/Aufruf der VISU, oder die über shNG? In der VISU habe ich auch noch kein Log ausser dass des Webservers unter /var/log/apache2 bzw. nginx gefunden... Da hab ich leider keine Idee ....

    EDIT: denke für die Telefonliste schaust du am besten mal da rein: Fritz!Box Telefonliste via TR-064

    Grüße
    Zuletzt geändert von TCr82; 11.05.2019, 10:24.

    Kommentar


      #3
      Zu 3 hab ich mal schnell was gebaut... sollte man evtl. auch einfach über eine CSS Klasse Stylen...

      Screenshot_20190511_110718.png
      HTML-Code:
      <div class="block">
              <div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
      
          <script type="text/javascript">
              $( document ).ready(function() {
                  $("#divBlind1").css("float", "left").css('margin-right','5px').parent().css('overflow','auto');
                  $("#divBlind2").css("float", "left").css('margin-right','5px');
                  $("#divBlind3").css("float", "left").css('margin-right','5px');
              })  
          </script>
                      <div data-role="collapsible" data-collapsed="false">
                              <h3>Rolladen</h3>
                              <div id="divBlind1"><p>Ga. Raum</p>{{ device.blind('blind1', '', 'bath.blind.mov', 'bath.blind.stop', 'bath.blind.pos') }}</div>
                              <div id="divBlind2"><p>Kl. Fenster</p>{{ device.blind('blind2', '', 'bath.blind.mov', 'bath.blind.stop', 'bath.blind.pos') }}</div>
                              <div id="divBlind3"><p>Gr. Fenster</p>{{ device.blind('blind3', '', 'bath.blind.mov', 'bath.blind.stop', 'bath.blind.pos') }}</div>
                      </div>
      
              </div>
      </div>
      Um das Element zu Stylen empfiehlten sich generell immer das Entwicklerwerkzeug des jeweiligen Browsers, da kann man mal schnell schauen wie man das richtige Ergebnis erreicht und es dann fest in die Datei wegschreiben.
      Zuletzt geändert von TCr82; 11.05.2019, 10:12.

      Kommentar


        #4
        Hey,

        vielen Dank für deine ausführlichen Antworten und Mühen. Visu ist bei mir gerade in der Prio Liste leider weit nach hinten gerückt. Der Umzug steht unmittelbar bevor und daher sind gerade andere Themen wesentlich wichtiger. Visu mach ich dann weiter, sobald wir mal eingezogen sind.
        Deine Hinweise und Antworten sehen aber sehr viel versprechend aus und ich bin sicher, dass Sie mir alle weiterhelfen werden. Ich melde mich, sobald ich es erfolgreich umgesetzt habe.

        Viele Grüße
        David

        Kommentar

        Lädt...
        X