[FUIP] Jetzt wird's bunt! (Oder auch: Der Farbauswahldialog)

Begonnen von Thorsten Pferdekaemper, 20 Januar 2019, 21:30:13

Vorheriges Thema - Nächstes Thema

Thorsten Pferdekaemper

Hi,
ich habe mal wieder eine etwas größere Erweiterung hochgeladen, in der Hoffnung nichts kaputt gemacht zu haben.
Man kann jetzt die Farben der Oberfläche per Dialog auswählen. Dazu gibt es im Menu des Konfigurations-Popups einen Unterpunkt "Colours". Wenn man den auswählt, dann sieht das in etwa so aus wie auf dem angehängten Screenshot. Im Prinzip ist das das Style-Schema "bright-mint", nur mit anderen Farben.
Die Spalten auf dem Dialog bedeuten folgendes:

  • Symbolischer Name der Farbe
  • Farbauswahl-Button. Wenn man hier draufklickt, dann sollte man den Farbauswahl-Dialog des Browsers bekommen. Lässt man die Maus darüber "schweben" (hover), dann flackern die entsprechenden Screen-Elemente.
  • "Opacity", also sozusagen "Deckkraft". Leider kann das der HTML5-Farbauswähler nicht, daher musste ich das selbst dazubauen. Man kann damit mehr oder weniger transparente Farben machen.
  • Ganz rechts ist ein Vorschaufeld, welches die eigentliche Farbe und die Deckkraft kombiniert.
Dann sind noch drei Buttons am unteren Rand des Dialogs:

  • Ok: Fertig, so will ich's haben
  • Reset all to style schema: Das verwirft alle Änderungen und setzt alles auf den Default des Style Schemas zurück. Achtung: Das kann nicht rückgängig gemacht werden.
  • Cancel: Das verwirft alle aktuellen Änderungen, also seit man den "Colours"-Dialog gestartet hat.
Die Sache hat ein paar kleine Schwächen:

  • Es funktioniert vielleicht nicht für alle möglichen Screen-Elemente. Ich kann unmöglich alles testen. Wenn also jemand was findet, bitte Bescheid sagen.
  • Es werden u.U. Farben angezeigt, die das momentan ausgewählte Style Schema gar nicht kennt.
  • Wenn man ein neues Style Schema wählt, aber vorher Farben (für das alte) geändert hat, dann bleiben diese Änderungen weiterhin bestehen. Das kann zu merkwürdigen Effekten führen. Dann am besten den "Reset"-Button benutzen.
  • Das "Flackern" der Screen-Elemente ist manchmal schlecht zu sehen.
Viel Spaß damit.
Gruß,
   Thorsten
FUIP

willib

#1
Tolle Arbeit. Danke
Jetzt kann ich mich wieder an mein ebook reader FTUI machen. Ich gebe zu dass mir FTUI in der Konfiguration zu kompliziert war. Mit FUIP wird es wohl einfacher werden.

Edit:
Es ist super einfach. Ich muss mich noch etwas reinfuchsen, aber es klappt schon sehr gut.
Was mir aufgefallen ist: Beim Thermostat und beim temperature view kann man die Farbe der angezeigten Werte nicht ändern.
Dummerweise verweigert mein ereader die korrekte Darstellung meiner angepassten FUIP Seite. Diese wird noch immer Weiß auf grau dargestellt. Muss wohl was damit zutun haben wie der reader Farben umrechnet. Mit dem f18 Style von FHEM kommt er in schwarz/weiß aber klar.
https://forum.fhem.de/index.php/topic,86865.msg793005.html#msg793005
Hast du eine Idee dazu?
FHEM in Debian 10 LXC unter Proxmox auf NUC, Homematic, Hue, Intertechno, Jeelink, RFXTRX, Harmony Hub, VU+ Uno 4K, Sonos, AMAD

hietzi

Mir fehlen irgendwie die Farbauswahlen siehe Anhang
An was kann das denn liegen ??

Thorsten Pferdekaemper

Zitat von: hietzi am 28 Januar 2019, 17:42:09
Mir fehlen irgendwie die Farbauswahlen siehe Anhang
An was kann das denn liegen ??
Ehrlich gesagt: Keine Ahnung. Da müssen wir mal etwas forschen.
Was mir auch auffällt: Das Popup ist bei Dir viel breiter als bei mir. Warst Du das oder kommt das so hoch?
Der Browser scheint Chrome zu sein. Welche Version genau?
Welches Betriebssystem ist das genau? Windows 10?
Könntest Du mal ein list des FUIP-Device liefern sowie Deine FUIP_....cfg-Datei?
Kannst Du mit den Browser-Entwicklertools umgehen?
Gruß,
    Thorsten
FUIP

hietzi


Thorsten Pferdekaemper

Hi,
tja, auch damit kann ich das nicht nachvollziehen. Kannst Du das mal auf einem anderen Browser und/oder Betriebssystem ausprobieren?
Könntest Du mal eine neue Seite in FUIP anlegen, also in der url nach "page/", z.B.
http://10.10.1.111:8083/fhem/ui/page/neueseite
(oder einfach auf den Link klicken)
Das macht eine neue Seite. Davon bitte den Quelltext (also rechte Maustaste, "Seitenquelltext anzeigen").
Vielleicht fällt mir da was auf.
Gruß,
   Thorsten
FUIP

Thorsten Pferdekaemper

FUIP

hietzi

Sorry für die späte Antwort.
Bin derzeit etwas im Stress :-)

Leider auch mit der neuen Seite das selbe Ergebnis

<!DOCTYPE html>
<html data-name="ui" data-pageid="neueseite" data-editonly="0" data-layout="flex">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script type="text/javascript">
// when using browser back or so, we should reload
if(performance.navigation.type == 2){
location.reload(true);
};
</script>
<title>neueseite</title><link rel="shortcut icon" href="/fhem/icons/favicon" />
<link rel="stylesheet" href="/fhem/ui/css/fhem-tablet-ui.css"  type="text/css" />
<link rel="stylesheet" href="/fhem/ui/fuip/css/fuip-default-ui.css" type="text/css" />
<link rel="stylesheet" href="/fhem/ui/fuip/css/fuip-blue-ui.css" type="text/css" />
<link rel="stylesheet" href="/fhem/ui/lib/font-awesome.min.css"   type="text/css" />
<link rel="stylesheet" href="/fhem/ui/fuip/fonts/nesges.css" type="text/css" />
<script type="text/javascript" src="/fhem/ui/lib/jquery.min.js"></script>
        <script type="text/javascript" src="/fhem/ui/fuip/jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/fhem/ui/fuip/jquery-ui/jquery-ui.css">
<!-- tablesorter -->
<script type="text/javascript" src="/fhem/ui/fuip/js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="/fhem/ui/fuip/js/jquery.tablesorter.widgets.js"></script>
                <script src="/fhem/ui/js/fhem-tablet-ui.js"></script><script src="/fhem/ui/fuip/js/fuip.js"></script>
  <script>
fuipInit({ baseWidth:177,
baseHeight:108,
maxCols:99,
gridlines:"hide",
snapTo:"nothing" })
</script>
<link rel="stylesheet" href="/fhem/ui/fuip/css/theme.blue.css"><style type="text/css">
                .fuip-color {
                color: var(--fuip-color-foreground,#808080);
                    }
.fuip-flex-region {
margin:4px;
border:solid;
border-width:1px;
border-color:var(--fuip-color-foreground,#808080);
display:grid;
grid-auto-columns:177px;
grid-auto-rows:108px;
grid-gap:10px;
place-content:start;
}
.tablesorter-filter option {
background-color:#fff;
}
select.tablesorter-filter {
-moz-appearance: auto;
-webkit-appearance: menulist;
appearance: auto;
border-radius: 0;
padding: 4px !important;
}
select.fuip {
-moz-appearance: auto;
-webkit-appearance: menulist;
appearance: auto;
border-radius: 0;
padding: 1px 0px !important;
border-style: inset;
border-width: 2px;
border-color: initial;
border-image: initial;
width: initial;
color: initial;
background-color: initial;
}
option.fuip {
background-color: initial;
}
.fuip-ui-icon-bright {
background-image: url(/fhem/ui/fuip/jquery-ui/images/ui-icons_ffffff_256x240.png);
}
</style><link href="/fhem/ui/css/fhem-tablet-ui-user.css" rel="stylesheet" type="text/css">
</head>
            <body data-confirmDelete='0' data-confirmJSError='1' data-addHtmlTitle='1' data-styleData='{
"f18": {
  "Pinned.menu": false,
  "cols.bg": "444444",
  "cols.fg": "CCCCCC",
  "cols.link": "FF9900",
  "cols.evenrow": "333333",
  "cols.oddrow": "111111",
  "cols.header": "222222",
  "cols.menu": "111111",
  "cols.sel": "333333",
  "cols.inpBack": "444444",
  "savePinChanges": true,
  "hidePin": true,
  "hideLogo": true,
  "rightMenu": false,
  "showDragger": false,
  "Pos.style_list_Styles": {
   "left": 3,
   "top": 3,
   "width": 213,
   "height": 280,
   "oTop": 20,
   "oLeft": 0
  },
  "Pos.style_list_f18_special": {
   "left": 2,
   "top": 308,
   "width": 230,
   "height": 124,
   "oTop": 40,
   "oLeft": 0
  },
  "Pos.style_list_f18__Room_specific": {
   "left": 2,
   "top": 476,
   "width": 230,
   "height": 385,
   "oTop": 40,
   "oLeft": 0
  },
  "snapToGrid": false,
  "fixedInput": false,
  "Pos.Room_01Eingang_grp_IT": {
   "left": 6,
   "top": 11,
   "width": 333,
   "height": 103,
   "oTop": 20,
   "oLeft": 0
  }
}
}' data-availableJs='readingsGroup,fbcalllist,iconSwitch,uzsu,sortable,iconRadio,colorpicker,iconButtons,readingsHistory,weekprofile,iconLabel,knob' data-webName='WEB '><svg id="fuipsvg" class="basicdefs" style="position:absolute;height:0px;">
</svg>
<style>
.wi {
line-height: inherit;
}
</style>

<div style="display:flex">
<div id="fuip-flex-menu" class="fuip-flex-region"></div>
<div style="display:flex;flex-direction:column;">
<div id="fuip-flex-title" class="fuip-flex-region"></div>
<div id="fuip-flex-main" class="fuip-flex-region"><div id='fuip-flex-fake-0' style="grid-area:1 / 1 / 2 / 2;position:relative;width:177px;height:108px;px;background-color:rgba(0,0,0,0);">
<div id='fuip-flex-cell-0' data-cellid="0" class="fuip-droppable fuip-cell" style="position:absolute;width:177px;height:108px;
border:0;"><header class='fuip-cell-header' style='display: block;
font-size: 0.85em;font-weight: bold;line-height: 2em;
text-align: center;width: 100%;'>0
<span style="position:absolute;right:1px;top:0;z-index:12;" class="fa-stack fa-lg"
onclick="openSettingsDialog('cell','0')">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-cog fa-stack-1x"></i>
</span>
</header></div></div><script>
$( function() {
$( "#fuip-flex-cell-0" ).resizable({
start: onFlexMaintResizeStart,
stop: onFlexMaintResizeStop,
resize: onFlexMaintResize
});
$("#fuip-flex-cell-0" ).draggable({
stack: "[id^=fuip-flex-cell-]",
start: onFlexMaintDragStart,
drag: onFlexMaintDrag,
stop: onFlexMaintDragStop
});
} );
</script></div>
</div>
</div>
   <div id="viewsettings">
   </div>
   <div id="valuehelp">
   </div>
<div data-type="symbol" data-icon="ftui-door" class="hide"></div>
<div data-type="symbol" data-icon="fa-volume-up" class="hide"></div>
<div data-type="symbol" data-icon="mi-local_gas_station" class="hide"></div>
<div data-type="symbol" data-icon="oa-secur_locked" class="hide"></div>
<div data-type="symbol" data-icon="wi-day-rain-mix" class="hide"></div>
<div data-type="symbol" data-icon="fs-ampel_aus" class="hide"></div>
<div id="inputpopup01">
</div>
       </body>
       </html>


lg
Chris

Thorsten Pferdekaemper

Hi,
ich habe jetzt sogar bei mir mal ein bisschen Spezialcoding eingefügt, um genau Dein HTML zu verwenden. Trotzdem ist das bei mir kein Problem. Ohne das ganze bei mir nachvollziehen zu können kann ich da nichts herausfinden. Wir könnten das ganze noch irgendwie per Screensharing (Skype oder so) versuchen. D.h. ich könnte direkt bei Dir mal debuggen. Was meinst Du?
...oder es findet sich sonst noch jemand, der ein ähnliches Problem hat und selbst mal nachschauen kann.
Gruß,
    Thorsten
FUIP

hietzi

Gerne wenn du Lust und Zeit hast :-)
Ich schick dir meinen skypenamen per pn

lg
chris

Thorsten Pferdekaemper

Ok, ich hab Dich auf Skype gefunden, aber Du warst offline.
Probier's einfach mal bei mir, wenn Du wieder zurück bist. Ich kann nichts versprechen, aber vielleicht klappt das heute noch.
Gruß,
   Thorsten
FUIP

Thorsten Pferdekaemper

Hi,
kurze Zusammenfassung von mir, für alle die doch ein ähnliches Problem haben: Eine alte Version des Tablet-UI hat input-Elemente grundsätzlich auf "hidden" gesetzt. Die Lösung ist: Eine aktuelle Version des FTUI verwenden.
Gruß,
   Thorsten
FUIP

hietzi

Thorsten vielen Dank nochmals für deine Hilfe
Schönen Sonntag noch

lg Chris

wowogiengen

Zitat von: Thorsten Pferdekaemper am 03 März 2019, 16:51:52
Hi,
kurze Zusammenfassung von mir, für alle die doch ein ähnliches Problem haben: Eine alte Version des Tablet-UI hat input-Elemente grundsätzlich auf "hidden" gesetzt. Die Lösung ist: Eine aktuelle Version des FTUI verwenden.
Gruß,
   Thorsten
Hallo Thorsten,
ich habe auch das Problem, dass die Elemente noch auf hidden sind. Aber wie aktualisiere ich FTUI?
ich habe bereits update force gemacht. Aber das Problem besteht wohl nach wie vor...
Viele Grüße
Wolfgang

Thorsten Pferdekaemper

Hi,
mach mal ein

update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt

Was kommt dabei raus?
Gruß,
   Thorsten
FUIP