Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. ioBroker Allgemein
    4. Tvspielfilm LCARS (StarTrek GUI) CSS-Designeinstellungen

    NEWS

    • Wir empfehlen: Node.js 22.x

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker goes Matter ... Matter Adapter in Stable

    Tvspielfilm LCARS (StarTrek GUI) CSS-Designeinstellungen

    This topic has been deleted. Only users with topic management privileges can see it.
    • P
      pix last edited by

      Hallo,

      gerad auf dem Rückweg vom Usertreffen in Kassel fiel mir wieder ein, dass die Ausgabe der Daten aus dem tvspielfilm-Adapter auf Vis-Views im LCARS-Design nicht sehr ansprechend aussieht, wenn sie nicht entsprechend formatiert werden. Ein User hatte mir seine VIS Views im LCARS-Design gezeigt und ich habe ihm schnelle Hilfe versprochen :lol:

      Ich habe daher mal ein paar CSS-Einstellungen vorgenommen, die die Ausgabe leicht anpassen. Die Vorgaben für LCARS (Farben und Schrift) befinden sich hier:

      http://www.lcarscom.net/faq.htm

      Für die Schriftart ist das Laden eines Webfonts nötig, daher funktioniert das ganze nur mit Internetverbindung.

      Zuerst also bitte den folgenden CSS-Code im VIS-Editor in den Reiter CSS, Unterpunkt Projekt kopieren. Ich nutze einen blau verlaufenden Hintergrund, der mit diesem Code und dieser Formatierung nichts zu tun hat.
      261_bildschirmfoto_2017-05-07_um_17.48.51.jpg
      Hier der CSS-Code:

      ! ````
      /* LCARS FONT /
      @import url('https://www.fontify.me/wf/5f2bd24419f3431361ab14c11c11aa08');
      ! /
      tvspielfilm /
      .tclass-th { /
      Headerzeilen */
      background-color: darkgrey;
      background-color: rgba(100,100,100,0.8);
      color: white;

      /*font-weight: bold;*/
      font-family: Arial;
      
      /* lcars */
      color: black;
      font-family: font112588;
      background-color: rgb(204,102,102); /*rot*/
      

      }

      .tclass-th1 { /* linker Header /
      width: 20px;
      text-align: center;
      color: transparent; /

      Text ausblenden /
      /
      display: none; / / ganze Spalte ausblenden */
      }

      ! .tclass-th .tclass-th1 {
      display: none; /* Spaltenüberschrift überm Bild ausblenden*/
      }
      ! .tclass-tr {
      color: red;
      }
      ! .tclass-tr:nth-child(odd) {
      background-color: darkgreen;
      background-color: rgba(50,120,80,0.6);

      /* lcars */
      background-color: rgb(153,153,255); /* blau */
      

      }

      ! .tclass-tr:nth-child(even) {
      color: yellow;
      background-color: darkred;
      background-color: rgba(150,150,150,0.2);

      /* lcars */
      background-color: rgb(255,153,0); /*orange*/
      

      }

      ! /* tv spielfilm */
      .tv_tipps,
      .tv_jetzt {
      font-family: Arial;
      font-size: 75%;

      /*lcars*/
      font-family: font112588;
      font-size: 100%;
      

      }

      ! .tv_tipps tr,
      .tv_jetzt tr {
      background-color: transparent;
      color: white;

      /*lcars */
      color: black;
      

      }

      ! .tv_tipps tr td a,
      .tv_jetzt tr td a {
      background-color: transparent;
      color: white;
      text-decoration: none;

      /*lcars */
      color: rgb(255,204,153); /* blau */
      

      }

      ! .tv_jetzt tr td a {
      font-size: 130%;
      }
      ! ````
      Es sieht dann so aus:
      261_bildschirmfoto_2017-05-07_um_17.50.36.jpg
      Ich gebe zu, die Lesbarkeit leidet etwas. Nur habe ich hier auf dem Autobahnparkplatz nicht soviel Zeit zum Rumprobieren. Passt die Farben gemäß LCARS Richtlinien bitte selbst an (sie Link oben).

      Zum Vergleich hier das Bild ohne die LCARS-Formatierungen, so wie ich es verwende:
      261_bildschirmfoto_2017-05-07_um_18.03.03.jpg
      CSS ohne LCARS (für die normale Ansicht können die mit /* lcars */ kommentierten Absätze gelöscht oder auskommentiert werden):

      ! ````
      .tclass-th { /* Headerzeilen */
      background-color: darkgrey;
      background-color: rgba(100,100,100,0.8);
      color: white;

      /*font-weight: bold;*/
      font-family: Arial;
      
      /* lcars 
      color: black;
      font-family: font112588;
      background-color: rgb(204,102,102);*/ /*rot*/
      

      }

      .tclass-th1 { /* linker Header /
      width: 20px;
      text-align: center;
      color: transparent; /

      Text ausblenden /
      /
      display: none; / / ganze Spalte ausblenden */
      }

      ! .tclass-th .tclass-th1 {
      display: none; /* Spaltenüberschrift überm Bild ausblenden*/
      }
      ! .tclass-tr {
      color: red;
      }
      ! .tclass-tr:nth-child(odd) {
      background-color: darkgreen;
      background-color: rgba(50,120,80,0.6);

      /* lcars 
      background-color: rgb(153,153,255);*/ /* blau */
      

      }

      ! .tclass-tr:nth-child(even) {
      color: yellow;
      background-color: darkred;
      background-color: rgba(150,150,150,0.2);

      /* lcars 
      background-color: rgb(255,153,0);*/ /*orange*/
      

      }

      ! /* tv spielfilm */
      .tv_tipps,
      .tv_jetzt {
      font-family: Arial;
      font-size: 75%;

      /*lcars
      font-family: font112588;
      font-size: 100%;*/
      

      }

      ! .tv_tipps tr,
      .tv_jetzt tr {
      background-color: transparent;
      color: white;

      /*lcars 
      color: black;*/
      

      }

      ! .tv_tipps tr td a,
      .tv_jetzt tr td a {
      background-color: transparent;
      color: white;
      text-decoration: none;

      /*lcars 
      color: rgb(255,204,153); *//* blau */
      

      }

      ! .tv_jetzt tr td a {
      font-size: 130%;
      }

      
      Ich hoffe, der LCARS-Vis-Nutzer kann dieser Anleitung folgen. Über Feedback freue ich mich.
      
      Gruß von der A7
      
      Pix
      1 Reply Last reply Reply Quote 0
      • First post
        Last post

      Support us

      ioBroker
      Community Adapters
      Donate
      FAQ Cloud / IOT
      HowTo: Node.js-Update
      HowTo: Backup/Restore
      Downloads
      BLOG

      871
      Online

      32.0k
      Users

      80.4k
      Topics

      1.3m
      Posts

      1
      1
      1494
      Loading More Posts
      • Oldest to Newest
      • Newest to Oldest
      • Most Votes
      Reply
      • Reply as topic
      Log in to reply
      Community
      Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
      The ioBroker Community 2014-2023
      logo