Ankündigung

Einklappen
Keine Ankündigung bisher.

Formartierung: Table Border

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

    Formartierung: Table Border

    Moin,

    ich habe SmartVISU 2.9.2 sowie Chrome auf einem RaspberryPi mit 7"-(Touch)-Screen als Haus-Visu laufen...

    Für eine Übersicht welche Fenster geöffnet sind und ob durch ein geöffnetes Fenster der Raum erwärmt wird, habe ich mir folgendes zusammen gestrickt.
    Ich verwende die
    Code:
    <div class="hide"
    und zusätzlich HTML-Tables, damit das Symbol (Temperatur max, blinkend als GIF oder Herz) rechtsbündig angezeigt wird.
    alarm_table_balken.png
    Nun meine Fragen an Euch:
    --> Wie bekomme ich innerhalb einer Reihe den grauen Trennstreifen weg, bzw auch rot eingefärt?

    Mein HTML-Quelltext für diese Seite:
    Code:
    {% extends "overview/base.html" %}
    
    {% block content %}
    <div class="html" data-title="Fenster">
    
    {{ status.collapse('kuefenLR', 'egvisu.kueche.fenster.beide_zu',1) }}
    <div class="hide" data-bind="kuefenLR">
    <table style="width: 100%;text-align: left">
    <tr style="background-color:#ff0000">
    <th>
    {{ basic.symbol('kuefenL1', 'egvisu.kueche.fenster', 'EG: Küchenfenster offen - links', 'fts_window_2w_open_l.svg', 1, '') }}
    {{ basic.symbol('kuefenR1', 'egvisu.kueche.fenster', 'EG: Küchenfenster offen - rechts', 'fts_window_2w_open_r.svg', 2, '') }}
    {{ basic.symbol('kuefenLR1', 'egvisu.kueche.fenster', 'EG: Küchenfenster offen - beide', 'fts_window_2w_open_lr.svg', 0, '') }}
    </th>
    <th style="background-color:#ff0000;text-align: right">
    {{ basic.symbol('kuealarmh1', 'egvisu.kueche.temp_fenster_offen_alarm_heizt','Fe nster zu!+', '', 1, '') }}
    {{ basic.symbol('kuealarmk1', 'egvisu.kueche.temp_fenster_offen_alarm_heizt',' ->kühlt: ' , '', 0, '') }}
    
    {{ basic.print('kuealarmc', 'egvisu.kueche.temp_delta_innen_aussen', '%01,1f °C') }}
    
    {{ basic.symbol('kuealarmk2', 'egvisu.kueche.temp_fenster_offen_alarm_heizt','' , 'jquery_heart', 0, '') }}
    {{ basic.symbol('kuealarmh2', 'egvisu.kueche.temp_fenster_offen_alarm_heizt','', 'temp_temperature_max.gif', 1, '') }}
    </th>
    
    </tr>
    </table> </div>
    
    {{ status.collapse('hwrfen', 'egvisu.hwr.fenster.einzel_zu',1) }}
    <div class="hide" data-bind="hwrfen">
    <table style="width: 100%;text-align: left">
    <tr style="background-color:#ff0000">
    <th> {{ basic.stateswitch('hwrfen1', 'egvisu.hwr.fenster.einzel_zu', 'icon', ['1', '0'], ['fts_window_1w_open.svg', 'fts_window_1w_open.svg'], '', ['icon0', 'icon0']) }} EG: HWR-Fenster offen</th>
    <th style="background-color:#ff0000;text-align: right">
    {{ basic.symbol('hwralarmh1', 'egvisu.hwr.temp_fenster_offen_alarm_heizt','Fenst er zu!+', '', 1, '') }}
    {{ basic.symbol('hwralarmk1', 'egvisu.hwr.temp_fenster_offen_alarm_heizt',' ->kühlt: ' , '', 0, '') }}
    
    {{ basic.print('hwralarmc', 'egvisu.hwr.temp_delta_innen_aussen', '%01,1f °C') }}
    
    {{ basic.symbol('hwralarmk2', 'egvisu.hwr.temp_fenster_offen_alarm_heizt','' , 'jquery_heart', 0, '') }}
    {{ basic.symbol('hwralarmh2', 'egvisu.hwr.temp_fenster_offen_alarm_heizt','', 'temp_temperature_max.gif', 1, '') }}
    </th>
    </tr>
    </table> </div>
    
    {% endblock %}
    Zur Vollständigkeit habe ich die base.html und root.html ebenso als Anhang hinzugefügt.
    Versucht habe ich bereit direkt "Styles" in <tr> bzw. <th> einzufügen.

    --> Kennt ihr noch eine andere Methode, um zum Ziel zu kommen?

    Angehängte Dateien

    #2
    Moin,

    wenn es Dir nur um die table borders geht, kannst Du diese in CSS oder im html-Elemnt per style="..." festlegen. Siehe hier.

    Man kann solche Tabellen alternativ auch über Spans machen, die man per CSS formatiert. Beispiel ist das device-smallshut Widget mit den entsprechenden CSS-Klassen in base.css.

    Hilfreich ist die Entwickler-Konsole im Browser (mit F12 aufrufen). Dort kannst Du direkt an den CSS-Eigenschaften spielen und siehst die Ergebnisse live, ohne die Seite jedes Mal neu laden zu müssen.

    Für die Fenster kannst Du aus dem Example3.graphic mal die windows-Widgets ausprobieren.

    Gruß Wolfram

    Kommentar


      #3
      wvhn: Besten Dank für die vielen hilfreichen Tipps!

      Ich habe es nun mit -Spans- gelöst, da der "Umbau" mit wenig Aufwand verbunden war:
      hwr_screen.png

      Code:
      {% extends "overview/base.html" %}
      {% block content %}
      <div class="html" data-title="Fenster">
      {{ status.collapse('kuefenLR', 'egvisu.kueche.fenster.beide_zu',1) }}
      <div class="hide" data-bind="kuefenLR">
      <table style="width: 100%">
      <tr>
      <th style="background-color:#ff0000">
      <span style="display: block; float:left">
      {{ basic.symbol('kuefenL1', 'egvisu.kueche.fenster', 'EG: Küchenfenster offen - links', 'fts_window_2w_open_l.svg', 1, '') }}
      {{ basic.symbol('kuefenR1', 'egvisu.kueche.fenster', 'EG: Küchenfenster offen - rechts', 'fts_window_2w_open_r.svg', 2, '') }}
      {{ basic.symbol('kuefenLR1', 'egvisu.kueche.fenster', 'EG: Küchenfenster offen - beide', 'fts_window_2w_open_lr.svg', 0, '') }}
      </span>
      <span style="display: block; float:right">
      {{ basic.symbol('kuealarmh1', 'egvisu.kueche.temp_fenster_offen_alarm_heizt','Fenster zu!+', '', 1, '') }}
      {{ basic.symbol('kuealarmk1', 'egvisu.kueche.temp_fenster_offen_alarm_heizt',' ->kühlt: ' , '', 0, '') }}
      {{ basic.print('kuealarmc', 'egvisu.kueche.temp_delta_innen_aussen', '%01,1f °C') }}
      {{ basic.symbol('kuealarmk2', 'egvisu.kueche.temp_fenster_offen_alarm_heizt','' , 'jquery_heart', 0, '') }}
      {{ basic.symbol('kuealarmh2', 'egvisu.kueche.temp_fenster_offen_alarm_heizt','', 'temp_temperature_max.gif', 1, '') }}
      </span>
      </th>
      </tr>
      </table>
      </div>
      
      
      {{ status.collapse('hwrfen', 'egvisu.hwr.fenster.einzel_zu',1) }}
      <div class="hide" data-bind="hwrfen">
      <table style="width: 100%">
      <tr >
      <th style="background-color:#ff0000">
      <span style="display: block; float:left">
      {{ basic.stateswitch('hwrfen1', 'egvisu.hwr.fenster.einzel_zu', 'icon', ['1', '0'], ['fts_window_1w_open.svg', 'fts_window_1w_open.svg'], '', ['icon0', 'icon0']) }}
      EG: HWR-Fenster offen
      </span>
      <span style="display: block; float:right">
      {{ basic.symbol('hwralarmh1', 'egvisu.hwr.temp_fenster_offen_alarm_heizt','Fenster zu!+', '', 1, '') }}
      {{ basic.symbol('hwralarmk1', 'egvisu.hwr.temp_fenster_offen_alarm_heizt',' ->kühlt: ' , '', 0, '') }}
      {{ basic.print('hwralarmc', 'egvisu.hwr.temp_delta_innen_aussen', '%01,1f °C') }}
      {{ basic.symbol('hwralarmk2', 'egvisu.hwr.temp_fenster_offen_alarm_heizt','' , 'jquery_heart', 0, '') }}
      {{ basic.symbol('hwralarmh2', 'egvisu.hwr.temp_fenster_offen_alarm_heizt','', 'temp_temperature_max.gif', 1, '') }}
      </span>
      </th>
      </tr>
      </table>
      </div>
      
      
      </div> {% endblock %}
      Nun ist richtig-kühles Lüften für alle im Haus transparent. - SOLVED
      Nur besser als eine Visu wäre direkt sichtbare LEDs an den Fenstergriffen

      Kommentar

      Lädt...
      X