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
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 (https://forum.fhem.de/index.php/topic,86865.msg793005.html#msg793005)
Hast du eine Idee dazu?
Mir fehlen irgendwie die Farbauswahlen siehe Anhang
An was kann das denn liegen ??
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
Hi Thorsten
Anbei meine fuip.cfg und das list
lg
Chris
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
Hi,
ist das jetzt erledigt?
Gruß,
Thorsten
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
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
Gerne wenn du Lust und Zeit hast :-)
Ich schick dir meinen skypenamen per pn
lg
chris
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
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
Thorsten vielen Dank nochmals für deine Hilfe
Schönen Sonntag noch
lg Chris
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
Hi,
mach mal ein
update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt
Was kommt dabei raus?
Gruß,
Thorsten
Hallo Thorsten,
ich hab gestern (wo weiß ich nicht mehr, vlt wiki?), das update-Prozedere für das tabletui`durchgeführt.
nun habe ich bei
update list
diese Quellen drin:
http://fhem.de/fhemupdate/controls_fhem.txt
https://raw.githubusercontent.com/ThorstenPferdekaemper/FHEM-FUIP/master/controls_fuip.txt
https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt
sollte also in Zukunft automatisch gehen, wenn ich update mache...
Viele Grüße
Wolfgang
Hi,
das heißt ja noch lange nicht, dass das auch funktioniert hat. Welchen Stand (also welches Datum) haben denn die Dateien
...\fhem\www\tablet\css\fhem-tablet-ui.css
...\fhem\FHEM\lib\FUIP\js\fuip_tablet_ui.js
Gruß,
Thorsten
Hallo Thorsten,
das passt schon, die sind vom 13.10.2020...
Hi,
tja, dann muss man mal detaillierter reinschauen. Falls Du Dich selbst ein bisschen auskennst, dann könntest Du mal mit den Entwickler-Tools... Das Übliche halt.
Ansonsten könnten wir mal mit einem Screenshot anfangen. Zeig mir mal wie das bei Dir aussieht und wo Du die Eingabefelder vermisst (falls es nicht offensichtlich ist). Dazu bitte mal den Quelltext der Seite.
Gruß,
Thorsten
Hallo Thorsten,
du hast mich falsch verstanden ;D
Ich habe die updates inzwischen alle korrekt durchgeführt. Und seitdem funktioniert auch der Color-Picker-Dialog.
Viele Grüße
Wolfgang
Das hatte ich tatsächlich ganz anders verstanden.
Na dann viel Spaß damit!
Gruß,
Thorsten