[FHEM-Tablet-UI] User-Demos

[moonsorrox]

@Thyraz

das was du uns hier zeigst ist absolut Top, du sprichst mir aus der Seele. 3 Daumen hoch dafür... 

Ich habe ja parallel in einem anderen Thread gefragt wie ich Readings/Geräte verstecken kann weil mir das immer mehr immer voller System absolut gegen Strich geht, ich wußte es bisher nicht das man das verstecken kann...
...und genau was du sagst kommt jemand und guckt auf mein Tablet schlägt er die Hände über den Kopf zusammen und sagt das ist mir zuviel. Das braucht kein Mensch 

Also nochmals das "einfache" hast du richtig gut hinbekommen, sicher ist das alles Geschmackssache und das Design kann sich ja jeder selber anpassen... 

Ich habe noch nicht in dein zip geschaut aber hast du extrem an den css class geschraubt oder hält sich das in Grenzen, ich würde die css gerne mal sehen, denn ein wenig kenne ich mich vom Homepage basteln aus, aber ich bin kein Freak... deshlab ist es gut mal zu schauen. Hast du mit bootstrap gearbeitet, dieses ermöglicht ja ein genaues positionieren..?

Gefällt mir sehr gut. Wie hast du die Schriftart geändert?

schreib das doch in eine user-ui.css dann brauchst du die Angabe nur einmal in der index.html machen, indem du die dort rein schreibst

[Thyraz]

Ja, als Responsive-Grid hab ich Bootstrap verwendet.
Nach der neusten Version von setstate wäre es evtl.  auch eine Idee gewesen mit Flexbox zu arbeiten.
Hatte aber schon mit dem Design begonnen und hab mir Flexbox auch noch nicht angeschaut.

Die CSS Datei hält sich ehrlich gesagt in Grenzen.
Minimale Verschiebungen (hier mal ein margin-top, da mal ein padding-right) von Elementen hab ich teilweise in den Template Files auch direkt als Inline-Style gesetzt, wodurch das CSS File etwas sauberer ist.

Ist zwar nicht ganz korrekt vom Gedanken der Trennung UI/Content, aber dafür beinhalten die Templates eben alles was dazugehört.

Das ist das User CSS File:

Code Auswählen Erweitern


/* Custom Colors */
:root {
  --lighter-gray: #f5f5f5;
  --light-gray: #c2c2c2;
  --mid-gray: #92969b;
  --darker-gray: #494e54;
  --subtle-blue: #5486e5;
  --subtle-yellow: #ffc807;
  --subtle-green: #42be62;
  --subtle-red: #db4444;
  --subtle-petrol: #09be91;
  --subtle-purple: #aa49dd;
  --slider-fill: #dbdbdb;
  --slider-bg: #f3f3f3;
  --navbar-bg:#181b24;
  --switch-green: #3acd67;
  --navbar-inactive:#dbdbdb;
  --navbar-active:#419aff;
}

body {
    background-color: white;
    font-family: Roboto, Arial;
    font-weight: 500;
    font-size: 16px;
    color: var(--light-gray);
}

.dark-font {
    color: var(--darker-gray);
}
.mid-font {
    color: var(--mid-gray);
}
.white-font {
    color: white;
}

/* Icons */
.big-icon #fg.fa {
    font-size: 1.25em !important;
}
.small-icon {
  margin: -14px !important;
}
.small-icon #fg.fa {
    font-size: 0.75em !important;
}

/* Room Header */
.room-temp {
    font-family: roboto, sans-serif;
    font-size: 300%;
    font-weight: 300;
}
.room-humidity {
    font-family: roboto, sans-serif;
    font-size: 200%;
    font-weight: 300;
    padding-left: 40px;
}
.room-header {
    margin-bottom: -5px;
}

/* Slider Widget */
.range-handle {
    background-color: var(--light-gray) !important;
    -webkit-box-shadow: 0px 0px 0px 2px rgba(255,255,255,1) !important;
    box-shadow: 0px 0px 0px 2px rgba(255,255,255,1) !important;
}
.range-bar {
    background-color: var(--slider-bg) !important;
}
.range-quantity {
    background-color: var(--slider-fill) !important;
}

/* Level Widget */
[data-type="level"] {
    width: inherit !important;
}

/* Select Widget */
select, input.textinput {
    border-radius: 3px !important;
    border: 0px solid var(--lighter-gray) !important;
    background: var(--lighter-gray) !important;
    padding: 2px 10px 2px 10px !important;
    font-size: 15px !important;
    color: var(--mid-gray) !important;
}
.select_wrapper:after {
    bottom: -9px !important;
    top: inherit !important;
    padding: 5px !important;
    color: var(--mid-gray) !important;
}
[class*='col-'] > .select {
    margin-top: -3px;
    width: 85px !important;
    float: right !important;
}

/* Collapse Button */
.collapse-button {
    font-size: 14px;
    margin-top: -13px !important;
    padding: 0px 4px !important;
    outline: none !important;
    background: var(--light-gray);
}

/* Jumbotron */
.jumbotron {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin-bottom: 0px !important;
    color: inherit;
    background-color: #f8f8f8;
}

/* Footer: Sticky footer, psuhing up content, scrollbar positioning and iOS scroll fix */
html {
  height: 100%;
}
html body {
  height: 100%;
  overflow: hidden !important;
}
.container-wrapper {
  position: absolute;
  top: 0px;
  bottom: 60px;
  right: 0;
  left: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    padding-top: 20px;
    background-color: var(--navbar-bg);
    text-align: left;
}

/* Tables */
th, td {
    text-align: center !important;
    font-weight: 500 !important;
    border-color: var(--lighter-gray) !important;
}
.left-align {
    text-align: left !important;
}


[moonsorrox]

OK, ich habe sie jetzt schon gefunden, da ich mal rein geschaut habe.
Gut das sieht ehrlich sehr übersichtlich aus, aber doch verstehe ich nicht alle zusammenhänge, da fehlen mir doch spezielle css Kenntnisse.

Ich habe das ganze Teil unverändert mal eingebaut (abgesehen von den Icons, die ich ja nicht habe) aber ich bekomme noch nicht einmal den footer zusehen, nur den Hintergrund dort aber kein einzig positioniertes Icon, die du ja mit deinem Namen versehen hast.
Jetzt dachte ich tausche ich die mal aus gegen vorhandene, aber auch die sehe ich nicht 

Habe ich einen Denkfehler..?

[Hanneck]

Hallo moonsorroox,

hast nur die zugehörigen Dateien vom Tablet mit dazu genommen? Habe ich gemacht und damit sieht man auch die Icons mit footer.
Durch mein testen habe ich es gefunden, vielleicht hilft es. Da ich nicht zu den wissenden gehöre, aber ein lernender bin, probiere ich
um so zu lernen.

Gruß Dieter 

[moonsorrox]

ich habe zwar ein paar Beiträge mehr  , aber was FTUI betrifft bin ich genauso am Anfang wie du und lernender 
JA ich habe nur die Dateien von Thyraz dazu gepackt, alles andere war vorher schon drin...! Das meintest du wohl..?

Ich habe das ganze Tablet FTUI nochmals installiert und jetzt kommt auch die Ansicht.
Da werde ich mich jetzt mal ran machen und es für mich anpassen...

[Hanneck]

Genau das habe ich gemeint. Bei mir klappt es. Habe auch versucht es an meine  Konfiguration an zu passen, da entstehen aber gleich wieder größere Baustellen.
Da muss ich noch vie.....l lernen. Aber meistens kommt mit der Zeit auch der Erfolg, außerdem habe ich noch nie so kompetente Lehrer wie in diesem Forum erlebt.
An erster Stelle der unermüdliche und fast immer wissende Setstate und die nun vorbildlich schreibenden Lehrbuch Autoren (WIKI TabletUI), allen voran Standarduser und drhirn nur mal kurz zu erwähnen.
Ich bin einer der eifrigsten Leser und Tester, nur leider ab einem gewissen Alterslevel (58) kann man es nicht mehr so leicht implementieren. Aber lernen hält jung.

In diesem Sinne Danke und weiter so Jung`s.

der lernende
Gruß Dieter 

[Gunther]

Hier mal mein UI.
Bin noch nicht ganz fertig, aber für den einen oder anderen ist sicher etwas dabei.
Die Größe ist optimiert fürs Samsung Galaxy Tablet 9.7

mfg

Magst Du noch die css-Dateien hier posten. Würde mich gerne an Deiner Struktur orientieren.

[moonsorrox]

Genau das habe ich gemeint. Bei mir klappt es. Habe auch versucht es an meine  Konfiguration an zu passen, da entstehen aber

selbst... wenn du dich ein wenig mit css auskennst wird dieses Art von Thyraz dich vor Probleme stellen..! Ich arbeite schon den ganzen Abend daran und muss feststellen das dies alles sehr speziell gemacht ist, besonders wenn du die einzelnen Geräte positionieren willst.

Was ich damit meine, wenn du mit dem Layout klar kommst und nur ähnliche Geräte hinzufügen möchtest kannst du das ganz easy machen.
Wenn du aber etwas anderes einbauen möchtest (ich sage mal ein Label/Icon mit einer Combobox wird das schon schwieriger, dann ist diese Art der css Gestaltung nichts für ungeübte)
Das ansprechen der data-device und data-get ist hier nicht selbsterklärend...! 

Deshalb wird es grad richtig schwierig, weil die ganzen css class muss man sich erst einmal anschauen was die machen.
Ist nur meine Meinung, dass dieses Layout super aussieht ist gar keine Frage....
also ich kämpfe mich da mal durch mal schauen ob das was wird 

[Hanneck]

Code Auswählen Erweitern

Deshalb wird es grad richtig schwierig, weil die ganzen css class muss man sich erst einmal anschauen was die machen.
Ist nur meine Meinung, dass dieses Layout super aussieht ist gar keine Frage....
also ich kämpfe mich da mal durch mal schauen ob das was wird 

Deswegen warte ich ein wenig und widme mich meinen anderen Baustellen. Ich lass mich dann von deiner Arbeit inspirieren, wenn du fertig bist.
Ich mach lieber erst mal Sachen die ich auch ein wenig verstehen und nach stellen kann.

Gruß Dieter

[Masterfunk]

@Eisix: Nein!

Im Video von Detlef ist zu sehe, dass innerhalb des PopUps die Module angezeigt werden, welche für ein update bereist sind. quasi das Ergebnis von "update check"

Bin noch bei den Anpassungen wegen der Umstellung auf 2.5

Genau an der Stelle habe ich aktuell Probleme, da die data-substitution nicht mehr geht.
Sobald ich alles wieder richtig am laufen habe, werde ich noch mal alle Dateien zur Verfügung stellen.

Gruß Detlef

[Wasserwerk33]

Hi
ich habe ein Problem mit meinem Tabletten ui. Und zwar ist es nicht mittig der hintergrund passt nicht zur Steuer Seite. Kann mir einer sagen wo mein Fehler ist? Habe mal ein Screenshots von meiner Seite gemacht(https://uploads.tapatalk-cdn.com/20170213/38352d308a025da84a2875f4479d9306.jpg)

Gesendet von meinem ALE-L21 mit Tapatalk

[moonsorrox]

hast du dies in der index.html stehen

Code Auswählen Erweitern

<meta name="widget_margin" content="4">

[Wasserwerk33]

Hi
ne hatte es nicht drin. Habe es nachgepflegt, nun ist es aber noch schlimmer geworden.

[coolice]

Hallo zusammen, könnte mir jemand sagen an welcher Stelle ich die Schriftfarbe und die Farbe der Icons ändern kann.

[DerBaer]

Im bereich class="large red"

Das. class bezieht sich aber immer auf einen speziellen Bereich.