Hauptmenü

FTUI version 3

Begonnen von Bunnu, 25 Oktober 2020, 09:25:41

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten 1 ... 71 72 73 74 75 ... 241
Benutzer-Aktionen

moonsorrox

#1080
16 März 2021, 14:04:28
Code Auswählen
<body ftui-binding [class]="OS_Astro:light | map('`0`:`background-0`, `1`:`background-1`, `2`:`background-2`, `3`:`background-3`, `4`:`background-4`, `5`:`background-5`, `6`:`background-6`')">

ich denke das die `0`,`1`,`2` usw. nicht diese `` brauchen, da es ja nur Zahlen sind das brauchst du doch nur bei getrennten "state" wie z.B. `Abnehmende Sichel` die Abnehmende Sichel nur als Beispiel.
Evtl. mal testen
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

Sailor

#1081
16 März 2021, 19:22:56 Letzte Bearbeitung: 16 März 2021, 19:29:51 von Sailor
Hallo Yersinia

Zitat von: yersinia am 16 März 2021, 13:55:28
Aber bevor man das -^ versucht, würde ich es eher über einen Selektor versuchen. Möglicherweise habe ich auch ftui-binding falsch benutzt (ftui-binding vs ftui-binding="class").
Ich weiss nicht, ob und wie du das .semitransparent nutzt.

Danke. Das .semitransparent wollte ich fuer die einzelnen kacheln spaeter verwenden, damit das Background-Bild nicht komplett abgedeckt wird.
Deine oben genannte css-Definition trage ich zusätzlich in die ftui.css ein?
Zum Beispiel ftui.css
Code Auswählen

html, body, main {
  height: 100%;
  width: 100%;
  touch-action: manipulation;
}

main {
  overflow: auto;
}

body {
  width: auto;
  margin: 0;
  /* disable selection */
  user-select: none;
}

body {
  background-color: transparent;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-clip: border-box;
}
body.background-0 { background-image: url('./images/Background-0.png'); }
body.background-1 { background-image: url('./images/Background-1.png'); }
body.background-2 { background-image: url('./images/Background-2.png'); }
body.background-3 { background-image: url('./images/Background-3.png'); }
body.background-4 { background-image: url('./images/Background-4.png'); }
body.background-5 { background-image: url('./images/Background-5.png'); }
body.background-6 { background-image: url('./images/Background-6.png'); }

.semitransparent {
    background: rgba(0, 0, 0, 0.7) !important;
}



body.loading:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1500;
  background-color: rgba(0, 0, 0, 0.8);
}

body:before {
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 200ms;
}

*, *:after, *:before {
  box-sizing: border-box;
}

*:not(:defined){
  opacity: 0;
}

.fixed {
  position: fixed;
  z-index: 2;
}

footer {
  bottom: 0;
  width: 100%;
  padding: 0.5em 0 0.5em 0;
  background: var(--view-footer-color);
  display: flex;
  justify-content: space-evenly;
}

.bold {
  font-weight: bold;
}

.lift {
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2);
}

.h-5 {
  height: 5%;
}

.h-8 {
  height: 8.3%;
}

.h-10 {
  height: 10%;
}

.h-15 {
  height: 15%;
}

.h-12 {
  height: 12.5%;
}

.h-20 {
  height: 20%;
}

.h-25 {
  height: 25%;
}

.h-30 {
  height: 30%;
}

.h-33 {
  height: 33%;
}

.h-35 {
  height: 35%;
}

.h-40 {
  height: 40%;
}

.h-45 {
  height: 45%;
}

.h-50 {
  height: 50%;
}

.h-55 {
  height: 55%;
}

.h-60 {
  height: 60%;
}

.h-65 {
  height: 65%;
}

.h-66 {
  height: 66%;
}

.h-70 {
  height: 70%;
}

.h-75 {
  height: 75%;
}

.h-80 {
  height: 80%;
}

.h-85 {
  height: 85%;
}

.h-90 {
  height: 80%;
}

.h-95 {
  height: 95%;
}

.h-100 {
  height: 100%;
}


.w-20 {
  width: 20%;
}

.w-50 {
  width: 50%;
}

.w-60 {
  width: 60%;
}

.w-80 {
  width: 80%;
}

.w-100 {
  width: 100%;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.top-align {
  vertical-align: top;
}

.bottom-align {
  vertical-align: bottom;
}

.truncate, .nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wordwrap {
  white-space: pre-wrap;
  /* CSS3 */
  white-space: -moz-pre-wrap;
  /* Firefox */
  white-space: -pre-wrap;
  /* Opera <7 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  /* IE */
}

.darker {
  color: #8C8C8C;
}

.thin {
  font-weight: 100;
}

.size-12 {
  font-size: 8rem;
  font-family: "HelveticaNeue-UltraLight", "Segoe UI", "Roboto Light", sans-serif;
}

.size-11 {
  font-size: 6rem;
  font-family: "HelveticaNeue-UltraLight", "Segoe UI", "Roboto Light", sans-serif;
}

.size-10 {
  font-size: 4rem;
  font-family: "HelveticaNeue-UltraLight", "Segoe UI", "Roboto Light", sans-serif;
}

.size-9  {
  font-size: 3.5rem;
}

.size-8  {
  font-size: 3rem;
}

.size-7  {
  font-size: 2.5rem;
}

.size-6  {
  font-size: 2rem;
}

.size-5  {
  font-size: 1.75rem;
}

.size-4  {
  font-size: 1.5rem;
}

.size-3  {
  font-size: 1.25rem;
}

.size-2  {
  font-size: 1rem;
}

.size-1  {
  font-size: 0.875rem;
}

.size-0 {
  font-size: 0.75rem;
}

/* end font sizes */


.verticalLine {
  border-right-style: outset;
}

.border-top {
  border-top: 1px solid var(--border-color);
}

/* toDo: sort */

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

ul, ol {
  list-style: none;
}

ul, li {
  margin: 0;
  padding: 0;
}

.hw-accelerate {
  transform: translateZ(0);
  will-change: transform;
}


.led {
  height: 2em;
  width: 2em;
}

.led:after {
  content: " ";
}

.led.square {
  height: 1em;
  width: 2em;
  border-radius: 3px;
}

#shade {
  position: absolute;
  z-index: 1001;
  background-color: #000000;
  opacity: 0.5;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
}

.blurry {
  color: transparent !important;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.half-transparent {
  opacity: .5 !important;
}

.transparent {
  opacity: 0;
}

.faded {
  filter: grayscale(100%);
  opacity: .2 !important;
}

.hidden {
  display: none;
}

.has-error {
  border: dashed 2px red;
  min-height: 1em;
  min-width: 1em;
}

/* animations */

.blink {
  animation: blink 1s step-start 0s infinite;
}

.spin {
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.shake {
  animation: shake 100ms ease-in-out infinite;
}

.fail-shake {
  animation: fail-shake .5s linear;
}

.hop {
  animation-name: hop;
  animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.flash {
  animation-name: flash;
  animation-timing-function: ease-out;
  animation-duration: .4s;
}

.marquee {
  width: 100%;
  margin: auto;
  padding: 2px;
  overflow: hidden;
  white-space: nowrap;
  animation: marquee 10s linear infinite;
}

/* animation keyframes */

@keyframes hop {
  0%   { transform: scale(1,1)      translateY(0); }
  10%  { transform: scale(1.1,.9)   translateY(0); }
  30%  { transform: scale(.9,1.1)   translateY(-1em); }
  50%  { transform: scale(1.05,.95) translateY(0); }
  57%  { transform: scale(1,1)      translateY(-0.1em); }
  64%  { transform: scale(1,1)      translateY(0); }
  100% { transform: scale(1,1)      translateY(0); }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes marquee {
  0% {
    text-indent: 100%
  }
  100% {
    text-indent: 0%
  }
}

@keyframes shake {
  2% {
    transform: translate(1.5px, 2.5px) rotate(-0.5deg);
  }
  4% {
    transform: translate(1.5px, -1.5px) rotate(0.5deg);
  }
  6% {
    transform: translate(1.5px, -1.5px) rotate(-0.5deg);
  }
  8% {
    transform: translate(0.5px, 2.5px) rotate(0.5deg);
  }
  10% {
    transform: translate(-0.5px, -0.5px) rotate(1.5deg);
  }
  12% {
    transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
  }
  14% {
    transform: translate(2.5px, 0.5px) rotate(-0.5deg);
  }
  16% {
    transform: translate(-1.5px, 1.5px) rotate(0.5deg);
  }
  18% {
    transform: translate(2.5px, 0.5px) rotate(-0.5deg);
  }
  20% {
    transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
  }
  22% {
    transform: translate(2.5px, -1.5px) rotate(-0.5deg);
  }
  24% {
    transform: translate(1.5px, 2.5px) rotate(1.5deg);
  }
  26% {
    transform: translate(-1.5px, -0.5px) rotate(0.5deg);
  }
  28% {
    transform: translate(1.5px, 1.5px) rotate(-0.5deg);
  }
  30% {
    transform: translate(2.5px, -1.5px) rotate(-0.5deg);
  }
  32% {
    transform: translate(0.5px, 2.5px) rotate(-0.5deg);
  }
  34% {
    transform: translate(-0.5px, 1.5px) rotate(1.5deg);
  }
  36% {
    transform: translate(0.5px, 1.5px) rotate(1.5deg);
  }
  38% {
    transform: translate(1.5px, 1.5px) rotate(0.5deg);
  }
  40% {
    transform: translate(-0.5px, 1.5px) rotate(0.5deg);
  }
  42% {
    transform: translate(-0.5px, 0.5px) rotate(1.5deg);
  }
  44% {
    transform: translate(-1.5px, -1.5px) rotate(1.5deg);
  }
  46% {
    transform: translate(0.5px, -0.5px) rotate(0.5deg);
  }
  48% {
    transform: translate(-0.5px, 1.5px) rotate(-0.5deg);
  }
  50% {
    transform: translate(2.5px, -0.5px) rotate(-0.5deg);
  }
  52% {
    transform: translate(0.5px, -1.5px) rotate(0.5deg);
  }
  54% {
    transform: translate(2.5px, -1.5px) rotate(0.5deg);
  }
  56% {
    transform: translate(-1.5px, -0.5px) rotate(0.5deg);
  }
  58% {
    transform: translate(-1.5px, 2.5px) rotate(1.5deg);
  }
  60% {
    transform: translate(0.5px, -1.5px) rotate(0.5deg);
  }
  62% {
    transform: translate(-0.5px, 2.5px) rotate(1.5deg);
  }
  64% {
    transform: translate(0.5px, 0.5px) rotate(-0.5deg);
  }
  66% {
    transform: translate(1.5px, -0.5px) rotate(1.5deg);
  }
  68% {
    transform: translate(-1.5px, -0.5px) rotate(0.5deg);
  }
  70% {
    transform: translate(-0.5px, 2.5px) rotate(1.5deg);
  }
  72% {
    transform: translate(1.5px, 0.5px) rotate(0.5deg);
  }
  74% {
    transform: translate(0.5px, -1.5px) rotate(0.5deg);
  }
  76% {
    transform: translate(1.5px, 1.5px) rotate(-0.5deg);
  }
  78% {
    transform: translate(2.5px, -1.5px) rotate(0.5deg);
  }
  80% {
    transform: translate(-1.5px, 1.5px) rotate(0.5deg);
  }
  82% {
    transform: translate(-0.5px, 2.5px) rotate(1.5deg);
  }
  84% {
    transform: translate(1.5px, 1.5px) rotate(-0.5deg);
  }
  86% {
    transform: translate(2.5px, 0.5px) rotate(1.5deg);
  }
  88% {
    transform: translate(-0.5px, -1.5px) rotate(-0.5deg);
  }
  90% {
    transform: translate(1.5px, -0.5px) rotate(-0.5deg);
  }
  92% {
    transform: translate(0.5px, -1.5px) rotate(1.5deg);
  }
  94% {
    transform: translate(-0.5px, -0.5px) rotate(0.5deg);
  }
  96% {
    transform: translate(-0.5px, -1.5px) rotate(-0.5deg);
  }
  98% {
    transform: translate(-0.5px, -1.5px) rotate(1.5deg);
  }
  0%, 100% {
    transform: translate(0, 0) rotate(0);
  }
}

@keyframes fail-shake {
  8%, 41% {
    transform: translateX(-10px);
  }
  25%, 58% {
    transform: translateX(10px);
  }
  75% {
    transform: translateX(-5px);
  }
  92% {
    transform: translateX(5px);
  }
  0%, 100% {
    transform: translateX(0);
  }
}

@keyframes spin {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}
}

@keyframes flash {
  0% {
    background: white;
  }
  100% {
    background: none;
  }
}

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}

.drop-hover {
  border: 3px dotted #3a7999;
  color: #3a7999;
  background: rgba(0, 0, 0, 0);
}

.drag {
  transition: all 0.15s ease-out;
  cursor: move;
}

.drag:hover {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}

/* components specials */

/* icon badge */
ftui-circlemenu ~ ftui-badge,
ftui-icon ~ ftui-badge {
  position: absolute;
  margin: -1.5em -1.5em 1em 1em;
  min-width: 1.2em;
  min-height: 1em;
  --padding-top: 0.15em;
  --padding-bottom: 0.15em;
  z-index: 1;
}

[popup-target],
[onclick] {
  cursor: pointer;
}


So realisiert, ist zwar der rote Rahmen weg, aber kein Bild da...
PS: im ftui-Verzeichnis befindet sich das images - Verzeichnis. Daher ist "./images/Background-0.png" richtig

Gruss
    Sailor
******************************
Man wird immer besser...

Sailor

#1082
16 März 2021, 19:28:45
Zitat von: moonsorrox am 16 März 2021, 14:04:28
Code Auswählen
<body ftui-binding [class]="OS_Astro:light | map('`0`:`background-0`, `1`:`background-1`, `2`:`background-2`, `3`:`background-3`, `4`:`background-4`, `5`:`background-5`, `6`:`background-6`')">

ich denke das die `0`,`1`,`2` usw. nicht diese `` brauchen, da es ja nur Zahlen sind das brauchst du doch nur bei getrennten "state" wie z.B. `Abnehmende Sichel` die Abnehmende Sichel nur als Beispiel.
Evtl. mal testen

Hallo moonsorrox

Weder
Code Auswählen
<body ftui-binding="class" [class]="OS_Astro:light | map('0:`background-0`, 1:`background-1`, 2:`background-2`, 3:`background-3`, 4:`background-4`, 5:`background-5`, 6:`background-6`')">

noch
Code Auswählen
<body ftui-binding="class" [class]="OS_Astro:light | map('0:background-0, 1:background-1, 2:background-2, 3:background-3, 4:Background-4, 5:background-5, 6:background-6')">

brachten das gewuenschte Bild herbei.

Wobei ich mir noch nicht sicher bin, ob ich die css-Datei überhaupt richtig umgesetzt habe. :-\

Aber Danke, dass ihr noch Ideen habt.

Gruß
    Sailor
******************************
Man wird immer besser...

Eisix

#1083
16 März 2021, 20:13:23
Hallo,

den Eintrag hat setstate in der popup.component.css gesetzt und da muss auch nichts geändert werden.

Was ist das eigentliche Problem?
Brauchst du ein Beispiel für Popup?

Code Auswählen

<ftui-row>
        <ftui-label
                [text]="Aquarium_Temp:temperature"
                [color]="Aquarium_Temp:temperature | map('27.5:blue, 28.5:green, 31:red')"
                popup-target="popup-Aquarium"
                class="size-6"><span slot="end">°C</span>
        </ftui-label>
</ftui-row>
<ftui-popup id="popup-Aquarium" width="800px" height="300px" timeout="120">
        <ftui-chart title="Aquarium Temperatur">
                <ftui-chart-data label="Temperatur" color="#21a000" log="logdb" file="-" spec="Aquarium_Temp:temperature"></ftui-chart-data>
                <ftui-chart-controls units="day, week"></ftui-chart-controls>
        </ftui-chart>
<ftui-popup>


Gruß
Eisix

Sailor

#1084
16 März 2021, 20:19:01
Hallo Eisix

Zitat von: Eisix am 16 März 2021, 20:13:23
Was ist das eigentliche Problem?
Brauchst du ein Beispiel für Popup?

Hat sich mittlerweile erledigt.

Ich hatte ein ">" vergessen und schon ging gar nix mehr!

Code Auswählen

<ftui-grid-tile row="1" col="1" height="10" width="10" shape="round" class="semitransparent">
<ftui-column>
<div popup-target="calllist">Popup</div>
</ftui-column>
</ftui-grid-tile>

<ftui-popup shape="round" id="calllist" height="400px" width="600px">
<header class="size-5">Hier soll was poppen</header>
Hier ist mein Popup!
</ftui-popup>


Funzt prima!

Sorry für den Anfaengerfehler!

PS: Wenn man entwickelt und außerhalb der index.html etwas verändert, muss ich ständig den Cache unter Firefox leeren, damit mir selbst mit F5 die Aenderung angezeigt werden.
Wie macht Ihr das eigentlich? Das ist ja ultranervig!
******************************
Man wird immer besser...

Eisix

#1085
16 März 2021, 20:30:08
@Sailor: Kein Problem.

Noch ein kleiner wahrscheinlich offensichtlicher Tip für alle die migrieren. FTUI2 Sachen lassen sich auch per Iframe einbinden.

Code Auswählen

<ftui-row>
                <iframe width="100%" height="100%" src="http://192.168.100.5:8083/fhem/www/tablet/Meteogram.html" frameborder="0"> </iframe>
</ftui-row>


Gruß
Eisix


Sailor

#1086
16 März 2021, 22:15:21
Hallo Eisix

Zitat von: Eisix am 16 März 2021, 20:30:08
Noch ein kleiner wahrscheinlich offensichtlicher Tip für alle die migrieren. FTUI2 Sachen lassen sich auch per Iframe einbinden.

Och noee, wenn ich schon alles neu aufsetze, dann richtig von Grund auf.

Mein heutiges Projekt war Icon auf Popup mit Tabelle von Icons auf ein jeweiliges Unter-Popup.

Code Auswählen

<!--
/* FHEM tablet ui - FTUI */
* UI builder framework for FHEM
* Version: 3.0.0
*
* Alarm Status
*
* Subsequent tile content for the FTUI "The Deeke Home"
* Copyright (c) matthias.deeke@deeke.eu
*
-->

<ftui-column>
<ftui-icon [name]       = "AllAttentionGetter:state | map('silent: check-circle, warning: exclamation-triangle, alert: exclamation-triangle')"
[color]      = "AllAttentionGetter:state | map('silent: success,      warning: warning,              alert: danger')"
[class-name] = "AllAttentionGetter:state | map('silent: size-5,       warning: size-5,               alert: blink size-5')"
popup-target = "alarmstatus">
</ftui-icon>
</ftui-column>

<ftui-popup shape="round" id="alarmstatus" height="400px" width="600px">
<header>Alarms</header>
<table width="100%" border="1">
<tr>
<td colspan="100%">
<ftui-column>
<ftui-icon [name]       = "AllAttentionGetter:state            | map('silent: check-circle,                 warning: exclamation-triangle,           alert: exclamation-triangle')"
[color]      = "AllAttentionGetter:state            | map('silent: success,                      warning: warning,                        alert: danger')"
[class-name] = "AllAttentionGetter:state            | map('silent: size-5,                       warning: size-5,                         alert: blink size-5')">
</ftui-icon>
</ftui-column>
</td>
</tr>
<tr>
<td>
<ftui-column>
<ftui-icon [name]       = "AttentionGetter_SmokeDetector:state | map('silent: secur_smoke_detector,          warning: secur_smoke_detector,          alert: secur_smoke_detector')"
[color]      = "AttentionGetter_SmokeDetector:state | map('silent: success,                       warning: warning,                       alert: danger')"
[class-name] = "AttentionGetter_SmokeDetector:state | map('silent: size-5,                        warning: size-5,                        alert: blink size-5')"
popup-target = "smokedetector">
</ftui-icon>
</ftui-column>
</td>
<td>
<ftui-column>
<ftui-icon [name]       = "AttentionGetter_Humidity:state      | map('silent: weather_humidity,              warning: weather_humidity,              alert: weather_humidity')"
[color]      = "AttentionGetter_Humidity:state      | map('silent: success,                       warning: warning,                       alert: danger')"
[class-name] = "AttentionGetter_Humidity:state      | map('silent: size-5,                        warning: size-5,                        alert: blink size-5')"
popup-target = "humidity">
</ftui-icon>
</ftui-column>
</td>
<td>
<ftui-column>
<ftui-icon [name]       = "AttentionGetter_DeadDevice:state    | map('silent: it_network,                    warning: it_network,                    alert: it_network')"
[color]      = "AttentionGetter_DeadDevice:state    | map('silent: success,                       warning: warning,                       alert: danger')"
[class-name] = "AttentionGetter_DeadDevice:state    | map('silent: size-5,                        warning: size-5,                        alert: blink size-5')"
popup-target = "actiondetector">
</ftui-icon>
</ftui-column>
</td>
</tr>
<tr>
<td>
<ftui-column>
<ftui-icon [name]       = "AttentionGetter_Battery:state       | map('silent: measure_battery_25,            warning: measure_battery_25,            alert: measure_battery_25')"
[color]      = "AttentionGetter_Battery:state       | map('silent: success,                       warning: warning,                       alert: danger')"
[class-name] = "AttentionGetter_Battery:state       | map('silent: size-5,                        warning: size-5,                        alert: blink size-5')"
popup-target = "battery">
</ftui-icon>
</ftui-column>
</td>
<td>
<ftui-column>
<ftui-icon [name]       = "AttentionGetter_Pressure:state      | map('silent: weather_barometric_pressure,   warning: weather_barometric_pressure,   alert: weather_barometric_pressure')"
[color]      = "AttentionGetter_Pressure:state      | map('silent: success,                       warning: warning,                       alert: danger')"
[class-name] = "AttentionGetter_Pressure:state      | map('silent: size-5,                        warning: size-5,                        alert: blink size-5')"
popup-target = "pressure">
</ftui-icon>
</ftui-column>
</td>
<td>
<!-- Reserved -->
</td>
</tr>

</table>
</ftui-popup>

<ftui-popup shape="round" id="smokedetector"  height="200px" width="200px">
<header>Smoke</header>

</ftui-popup>

<ftui-popup shape="round" id="humidity"       height="200px" width="200px">
<header>Humidity</header>

</ftui-popup>

<ftui-popup shape="round" id="actiondetector" height="200px" width="200px">
<header>ActionDetector</header>

</ftui-popup>

<ftui-popup shape="round" id="battery"        height="200px" width="200px">
<header>Battery</header>

</ftui-popup>

<ftui-popup shape="round" id="pressure"       height="200px" width="200px">
<header>Pressure</header>

</ftui-popup>


Jetzt muss ich nur noch hinbekommen ein ganzes Readingsgroup in dem jeweiligen Unter-Popup angezeigt zu bekommen.
In den Examples habe ich hierzu noch nichts gefunden.

Gruß
    Sailor

PS: Langsam nimmt die Sache fahrt auf. Wenn man erst mal die Semantik verstanden hat, lernen die Codezeilen nur so das Fliegen.  ;D
******************************
Man wird immer besser...

moonsorrox

#1087
16 März 2021, 23:12:54
Zitat von: Sailor am 16 März 2021, 19:22:56
Deine oben genannte css-Definition trage ich zusätzlich in die ftui.css ein?
das wird nichts, spätestens beim nächsten Update ist deins weider weg.
Schreibe zusätzlichen css Code in eine userftui.css die bleibt erhalten.

Habe ich dich da richtig verstanden, hatte es oben als Frage erkannt...?

Ich habe mich noch nicht richtig beschäftigt damit, aber ich finde diese Stelle sieht komisch aus
<body ftui-binding="class" [class]="OS_Astro:light.........>

Dein OS_Astro:light hat auch die Werte "0", "1" usw. frage deshalb weil mein Astro solch einen Wert nicht hat, mein altes Twilight hat diesen Wert aber schon...!
Nur eine Vermutung.....  ;)
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

TWART016

#1088
17 März 2021, 01:40:47
Ich habe mal probiert FTUI in Docker zu installieren. Beim starten bekomme ich den Fehler:
Code Auswählen
standard_init_linux.go:219: exec user process caused: exec format error

Muss nur die index.html im Ordner liegen, oder die ganzen Installationsdateien?

Code Auswählen
docker run -d -p 8080:80 -v /opt/containers/ftui/index.html:/usr/share/nginx/html/index.html --name ftui3 knowthelist/ftui

yersinia

#1089
17 März 2021, 07:41:18
Zitat von: Sailor am 16 März 2021, 19:22:56Deine oben genannte css-Definition trage ich zusätzlich in die ftui.css ein?
Zum Beispiel ftui.css
Nein, weil -wie moonsorrox schreibt- du dann bei jedem FTUI3 Update die datei überschreibst. Leg eine eigene CSS Datei an und binde diese in deiner Hauptseite (index.html?) ein. In diese fügst du folgendes ein (in Bezug auf body) um die body-Deklaration aus ftui.css zu ergänzen bzw nicht zu überschreiben.
Code Auswählen
body.background-0, body.background-1, body.background-2,
body.background-3, body.background-4, body.background-5,
body.background-6 {
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-clip: border-box;
}
body.background-0 { background-image: url('./images/Background-0.png'); }
body.background-1 { background-image: url('./images/Background-1.png'); }
body.background-2 { background-image: url('./images/Background-2.png'); }
body.background-3 { background-image: url('./images/Background-3.png'); }
body.background-4 { background-image: url('./images/Background-4.png'); }
body.background-5 { background-image: url('./images/Background-5.png'); }
body.background-6 { background-image: url('./images/Background-6.png'); }

.semitransparent {
    background: rgba(0, 0, 0, 0.7) !important;
}

Damit hast du eine eigene CSS für deine individuelle Gestaltungsmöglichkeiten.

Natürlich auch das Verzeichnis ./images überpüfen, ob die Dateien dort auch liegen (von der ftui-seite aus gesehen).

Schau dir an, welche Werte das Reading light von OS_Astro zur Verfügung stellt - sind es wirklich 0 bis 6?

Wenn alles gegeben ist, müsste zumindest
Code Auswählen
<body ftui-binding="class" [class]="OS_Astro:light | map('0:`background-0`, 1:`background-1`, 2:`background-2`, 3:`background-3`, 4:`background-4`, 5:`background-5`, 6:`background-6`')">
dazu führen, dass der richtige Selektor ausgewählt wird. Eventuell mit einem Code-Inspektor überprüfen. Dazu müssen aber vorher die ftui.js und zumindest deine user-CSS geladen sein.

Wenn <body> gar nicht will, kannst du auch ein div Container unterhalb des <body> definieren welcher 100% des Platzes einnimmt - und dann den Hintergrund aufnimmt. Dazu müsstest du in der CSS oben das body weglassen.


Zitat von: moonsorrox am 16 März 2021, 23:12:54Ich habe mich noch nicht richtig beschäftigt damit, aber ich finde diese Stelle sieht komisch aus
<body ftui-binding="class" [class]="OS_Astro:light.........>
So genau ist mir die Syntax auch nicht klar, ob es eher
Code Auswählen
<body ftui-binding="class" [class]="...">
oder
Code Auswählen
<body ftui-binding [class]="...">
oder
Code Auswählen
<ftui-binding body [class]="...">
ist.

Ich nutze erste Version (allerdings mit einem div-Container) und das funktioniert, ob es nötig ist weiss ich nicht - insb wenn man mehr als einen Wert binden möchte...


Zitat von: TWART016 am 17 März 2021, 01:40:47Muss nur die index.html im Ordner liegen, oder die ganzen Installationsdateien?
Ich vermute, damit es vernünftig läuft, benötigst du alles unter www/ftui auf deinem Docker-Webserver.
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

Sailor

#1090
17 März 2021, 08:23:58
Hallo moonsorrox

Zitat von: moonsorrox am 16 März 2021, 23:12:54
das wird nichts, spätestens beim nächsten Update ist deins weider weg.
Schreibe zusätzlichen css Code in eine userftui.css die bleibt erhalten.
Habe ich dich da richtig verstanden, hatte es oben als Frage erkannt...?

Hast du richtig verstanden!
Danke, werde ich so umsetzen.

Zitat von: moonsorrox am 16 März 2021, 23:12:54
Ich habe mich noch nicht richtig beschäftigt damit, aber ich finde diese Stelle sieht komisch aus
<body ftui-binding="class" [class]="OS_Astro:light.........>
Dein OS_Astro:light hat auch die Werte "0", "1" usw. frage deshalb weil mein Astro solch einen Wert nicht hat, mein altes Twilight hat diesen Wert aber schon...!
Nur eine Vermutung.....  ;)

Aha! Ein Experte mit Hintergrundwissen!  ;)

Ja, nachdem Twilight mir nervige Meldungen ueber die Einstellung des yahoo-Service ausgespuckt hat, bin ich auf das ASTRO - Modul umgestiegen mit folgendem User-Reading:

Code Auswählen

light {
my $SunAlt = ReadingsVal($name,"SunAlt",0);
my $Indoor_Horizon = AttrVal($name, "indoor_horizon", 0);
my $LightIndex;

### 0 - total night, sun is at least -18 degree below horizon
if ($SunAlt <= -18) {
$LightIndex = 0;
}
### 1 - astronomical twilight, sun is between -12 and -18 degree below horizon
elsif (($SunAlt > -18) && ($SunAlt <= -12)) {
$LightIndex = 1;
}
### 2 - nautical twilight, sun is between -6 and -12 degree below horizon
elsif (($SunAlt > -12) && ($SunAlt <=  -6)) {
$LightIndex = 2;
}
### 3 - civil twilight, sun is between 0 and -6 degree below horizon
elsif (($SunAlt >  -6) && ($SunAlt <=   0)) {
$LightIndex = 3;
}
### 4 - indoor twilight, sun is between the indoor_horizon and 0 degree below horizon (not used if indoor_horizon=0)
elsif (($Indoor_Horizon < 0) && ($SunAlt <= 0) && ($SunAlt > $Indoor_Horizon)) {
$LightIndex = 4;
}
### 5 - weather twilight, sun is between indoor_horizon and a virtual weather horizon (the weather horizon depends on weather conditions (optional)

### 6 - maximum daylight
elsif ($SunAlt > 0) {
$LightIndex = 6;
}
$LightIndex
}


Gruß
    Sailor
******************************
Man wird immer besser...

yersinia

#1091
17 März 2021, 08:33:09
[OT]
Zitat von: Sailor am 17 März 2021, 08:23:58Ja, nachdem Twilight mir nervige Meldungen ueber die Einstellung des yahoo-Service ausgespuckt hat, bin ich auf das ASTRO - Modul umgestiegen mit folgendem User-Reading:
Beta-User hat sich bezgl Twilight richtig ins Zeug gelegt und das Modul tiefgründig überarbeitet - mit dem Verzicht auf Yahoo und der Möglichkeit, externe Wetterdatendevices einzubinden. Schau es dir an, wenn es dich interessiert. Bist du zufrieden mit Astro, dann bleib dabei.
[/OT]
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

Sailor

#1092
17 März 2021, 08:33:35
Hallo yersinia

Zitat von: yersinia am 17 März 2021, 07:41:18
Nein, weil -wie moonsorrox schreibt- du dann bei jedem FTUI3 Update die datei überschreibst. Leg eine eigene CSS Datei an und binde diese in deiner Hauptseite (index.html?) ein. In diese fügst du folgendes ein (in Bezug auf body) um die body-Deklaration aus ftui.css zu ergänzen bzw nicht zu überschreiben.
Damit hast du eine eigene CSS für deine individuelle Gestaltungsmöglichkeiten.
Natürlich auch das Verzeichnis ./images überpüfen, ob die Dateien dort auch liegen (von der ftui-seite aus gesehen).

Erledigt: "myftui.css"

Zitat von: yersinia am 17 März 2021, 07:41:18
Schau dir an, welche Werte das Reading light von OS_Astro zur Verfügung stellt - sind es wirklich 0 bis 6?

Ja, siehe oben.

Zitat von: yersinia am 17 März 2021, 07:41:18
Wenn alles gegeben ist, müsste zumindest
Code Auswählen
<body ftui-binding="class" [class]="OS_Astro:light | map('0:`background-0`, 1:`background-1`, 2:`background-2`, 3:`background-3`, 4:`background-4`, 5:`background-5`, 6:`background-6`')">
dazu führen, dass der richtige Selektor ausgewählt wird. Eventuell mit einem Code-Inspektor überprüfen. Dazu müssen aber vorher die ftui.js und zumindest deine user-CSS geladen sein.

Wenn <body> gar nicht will, kannst du auch ein div Container unterhalb des <body> definieren welcher 100% des Platzes einnimmt - und dann den Hintergrund aufnimmt. Dazu müsstest du in der CSS oben das body weglassen.

So genau ist mir die Syntax auch nicht klar, ob es eher
Code Auswählen
<body ftui-binding="class" [class]="...">
oder
Code Auswählen
<body ftui-binding [class]="...">
oder
Code Auswählen
<ftui-binding body [class]="...">
ist.

Werde ich ausprobieren und berichten.

Gruß
    Sailor
******************************
Man wird immer besser...

Sailor

#1093
17 März 2021, 08:49:10
Ein herzerfrischendesMoin vom achtern Diek vorweg!
[Gelöst]

Leute, Ihr seid absolute Spitze!!!  DANKE! ;D

Es funzt und zwar rattenschnell (im Gegensatz zu v 2.x)!

Die Zusammenfassung für die Nachwelt:

index.html
Code Auswählen

<!-- Add line after  -->
<link href = "ftui.css"              rel="stylesheet">
<link href = "myftui.css"            rel="stylesheet">

<!-- Replace TestDummy with Twilight device -->
<body ftui-binding="class" [class]="TestDummy:light | map('0:`background-0`, 1:`background-1`, 2:`background-2`, 3:`background-3`, 4:`background-4`, 5:`background-5`, 6:`background-6`')">
     <!-- Your ftui content -->
</body>


myftui.css im gleichen Verzeichnis wie ftui.css
Code Auswählen

body.background-0, body.background-1, body.background-2,
body.background-3, body.background-4, body.background-5,
body.background-6 {
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-clip: border-box;
}
body.background-0 { background-image: url('./images/Background-0.png'); }
body.background-1 { background-image: url('./images/Background-1.png'); }
body.background-2 { background-image: url('./images/Background-2.png'); }
body.background-3 { background-image: url('./images/Background-3.png'); }
body.background-4 { background-image: url('./images/Background-4.png'); }
body.background-5 { background-image: url('./images/Background-5.png'); }
body.background-6 { background-image: url('./images/Background-6.png'); }

.semitransparent {
    background: rgba(0, 0, 0, 0.7) !important;
}


Unterverzeichnis "images" im ftui - Ordner
Code Auswählen

-rw-rw-rw- 1 pi pi 2478881 Sep 21  2018 Background-0.png
-rw-rw-rw- 1 pi pi 1998613 Sep 21  2018 Background-1.png
-rw-rw-rw- 1 pi pi 1505728 Sep 21  2018 Background-2.png
-rw-rw-rw- 1 pi pi 1797516 Sep 21  2018 Background-3.png
-rw-rw-rw- 1 pi pi 1673802 Sep 21  2018 Background-4.png
-rw-rw-rw- 1 pi pi  644889 Sep 21  2018 Background-5.png
-rw-rw-rw- 1 pi pi 2541812 Sep 21  2018 Background-6.png


Gruß
    Sailor
******************************
Man wird immer besser...

moonsorrox

#1094
17 März 2021, 12:28:03
@ Sailor

na super...! gemeinsam ist nie Einsam  ;)
Schön das es geklappt hat, finde die Idee ganz super, kann man ja mit den verschiedensten Szenarien erstellen
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM
Drucken
Nach oben Seiten 1 ... 71 72 73 74 75 ... 241
Benutzer-Aktionen