Responsive iOS 6 Theme für FHEM (CSS + JS) sowohl für iOS, Android und Desktop!

Blackcat · 16 Dezember 2014, 20:23:57

finde leider das Problem der niedrigen Auflösung im Landscape gerade nicht (ist nur 768 breit anstand 1024), aber ich stelle euch schonmal eine recht gut skalierende Version online.. ohne alerts

Blackcat · 16 Dezember 2014, 20:35:33

habe auch nochmal mit iPhone getestet, da ist der Landscape modus auch noch zu groß, dafür habe ich jetzt eine aktuelle Version online, bei der das Fullscreenmenü tut wie es soll

Danke also schonmal fürs testen, morgen werde ich mich nochmal dem landscape modus annehmen, bevor der Spaß dann richtig losgehen kann

Loredo · 17 Dezember 2014, 09:50:46

Hi Sandra,

Zitat von: Blackcat am 16 Dezember 2014, 18:42:52
Bitte poste den Head der html Datei und deine JavaScript attr von deinem fhemweb, dann kann ich schauen ob was nich passt

bin nicht sicher, ob du es noch brauchst, aber ich liefere es dir zur Sicherheit gerne trotzdem noch nach

Code Auswählen



<head root="/fmobile">
<title>Home, Sweet Home</title>
<link rel="shortcut icon" href="/fmobile/icons/favicon" />
<meta charset="UTF-8">
<meta name="viewport" content="width=768"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="apple-touch-icon" href="/fmobile/images/default/fhemicon_ios.png"/>
<link rel="shortcut-icon"    href="/fmobile/images/default/fhemicon_ios.png"/>
<link href="/fmobile/pgm2/style.css" rel="stylesheet"/>
<script type="text/javascript" src="/fmobile/pgm2/svg.js"></script>
<script type="text/javascript" src="/fmobile/pgm2/fhemweb.js"></script>
<script type="text/javascript" src="/fmobile/pgm2/fhemweb_colorpicker.js"></script>
<script type="text/javascript" src="/fmobile/pgm2/fhemweb_multiple.js"></script>
<script type="text/javascript" src="/fmobile/pgm2/fhemweb_noArg.js"></script>
<script type="text/javascript" src="/fmobile/pgm2/fhemweb_readingsGroup.js"></script>
<script type="text/javascript" src="/fmobile/pgm2/fhemweb_readingsHistory.js"></script>
<script type="text/javascript" src="/fmobile/pgm2/fhemweb_slider.js"></script>
<script type="text/javascript" src="/fmobile/pgm2/fhemweb_svg.js"></script>
<script type="text/javascript" src="/fmobile/pgm2/fhemweb_textField.js"></script>
<script type="text/javascript" src="/fmobile/pgm2/fhemweb_time.js"></script>
<script attr='' type="text/javascript" src="/fmobile/pgm2/ios6.js"></script>
</head>

Code Auswählen



define WEBphone FHEMWEB 8084
attr WEBphone JavaScripts pgm2/ios6.js
attr WEBphone allowedCommands get,set,style%20eventMonitor
attr WEBphone allowfrom localhost
attr WEBphone closeConn 1
attr WEBphone comment FHEM User Frontend for mobile phones
attr WEBphone hiddengroup FileLog,dummy,at,notify,CUL_HM,PRESENCE,outputUnit,pushButton,dimmer,switch,FLOORPLAN,THSensor,watchdog,motionDetector,smokeDetector,virtual,average,Twilight,dewpoint,sunpos,Weather,threeStateSensor,remote,LightScene,sensRain,HUEDevice,thermostat
attr WEBphone hiddenroom input,detail,save,Unsorted,Everything,CUL_HM,FS20,Commandref,style,Edit files,Select style,Logfile,Floorplans,Remote doc,FileLogs,NEW,Logs,System
attr WEBphone iconPath fhemSVG:openautomation
attr WEBphone room System
attr WEBphone roomIcons Save.config:edit_save Logs:edit_paste System:edit_settings Unsorted:secur_encoding Everything:control_building_2_s_all Logfile:edit_paste Commandref:edit_copy Edit.files:time_note Select style:control_return Event.monitor:edit_sort Update Check:system_fhem_update Update:system_fhem_update Backup:system_backup Reload:system_fhem_reboot Restart:system_fhem_reboot
attr WEBphone stylesheetPrefix ios6touchpad
attr WEBphone webname fmobile

Blackcat · 17 Dezember 2014, 18:37:59

jQuery fehlt in der Liste, bei mir ist es mit dabei:

Code Auswählen

<link href="/fhem/pgm2/style.css" rel="stylesheet">
<script type="text/javascript" src="/fhem/jscolor/jscolor.js"></script>
<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/pgm2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/fhem/pgm2/dashboard.js"></script>
<script type="text/javascript" src="/fhem/pgm2/svg.js"></script>
<script type="text/javascript" src="/fhem/pgm2/fhemweb.js"></script>
<script type="text/javascript" src="/fhem/pgm2/fhemweb_colorpicker.js"></script>
<script type="text/javascript" src="/fhem/pgm2/fhemweb_multiple.js"></script>
<script type="text/javascript" src="/fhem/pgm2/fhemweb_noArg.js"></script>
<script type="text/javascript" src="/fhem/pgm2/fhemweb_readingsHistory.js"></script>
<script type="text/javascript" src="/fhem/pgm2/fhemweb_slider.js"></script>
<script type="text/javascript" src="/fhem/pgm2/fhemweb_svg.js"></script>
<script type="text/javascript" src="/fhem/pgm2/fhemweb_textField.js"></script>
<script type="text/javascript" src="/fhem/pgm2/fhemweb_time.js"></script>
<script attr="{ &quot;theme&quot;:&quot;blackboard&quot;, &quot;lineNumbers&quot;:true }" type="text/javascript" src="/fhem/codemirror/fhem_codemirror.js"></script>
<script attr="" type="text/javascript" src="/fhem/pgm2/ios6.js"></script>

Meine Konfiguration :

Code Auswählen

define WEBtablet FHEMWEB 8085 global
attr WEBtablet JavaScripts codemirror/fhem_codemirror.js pgm2/ios6.js
attr WEBtablet codemirrorParam { "theme":"blackboard", "lineNumbers":true }
attr WEBtablet hiddenroom DashboardRoom,Administration
attr WEBtablet icon im_tablet
attr WEBtablet iconPath openautomation:jung:plans:IcoMoon:fhemSVG
attr WEBtablet menuEntries Restart,cmd=shutdown+restart,Update,cmd=update,Benutzer,cmd=set+sy_admin_webtablet+off,Administration,cmd=set+sy_admin_webtablet+on
attr WEBtablet room Konfiguration
attr WEBtablet roomIcons HomeMatic:im_home Save.config:im_disk Floorplans:floor Dashboard:im_meter Bewohner:im_users Konfiguration:im_wrench Licht:im_brightness-medium Steuerung:im_target System:im_cog Telefon:im_phone Everything:im_book Logfile:im_file4 Commandref:im_code Remote.doc:im_paragraph-left2 Edit.files:im_pencil Select.style:im_html5 Event.monitor:im_eye Restart:system_fhem_reboot Update:system_fhem_update Benutzer:im_user Administration:im_cog2
attr WEBtablet stylesheetPrefix ios6touchpad

Loredo · 17 Dezember 2014, 19:35:11

Hi Sandra,

danke dir!
Ich denke bei mir fehlt es, weil ich das Dashboard Modul nicht verwende. Ich würde daher vorschlagen, dass du die jQuery Dateien in deinen Dateien per include lädst, damit es auch bei Nichtnutzung des Dashboard funktioniert.

Gruß
Julian

Bennemannc · 15 Januar 2015, 21:12:26

Hallo Sandra,

nachdem wieder am Fhemweb und den JS etwas geändert wurde, habe ich folgendes Problem.
In der Detailansicht bei den Attributen ändert sich die Größe des Eingabefeldes - jenachdem welches Attribut ausgewählt wird. Leider ist das Eingabefeld ausgerechnet bei den Attributen (stateFormat, userReadings) klein, bei denen viel geschrieben wird

Kann man da etwas dran änderen - in anderen Styles ist das nicht so.

Gruß Christoph

Blackcat · 16 Januar 2015, 13:27:08

Ich schau mal nach

Blackcat · 16 Januar 2015, 13:37:36

bitte sehr

(kommt auch nochmal vorne)

Bennemannc · 16 Januar 2015, 16:22:00

Hallo Sandra,

besten Dank - wo muss ich eingreifen, damit die Schrift wieder kleiner wird. Es wird jetzt viel weniger auf dem Tablet angezeigt.

Gruß Christoph

Hab's gefunden. Der Abschnitt /*IPad Skalierung */ fehlt in der neuen Version. Einfach reinkopiert und alles ist wieder wie vorher.

Bennemannc · 22 Januar 2015, 18:34:04

Hallo Sandra,

seit dem letzten Update werden die Roomicons nicht mehr angezeigt, wenn in dem Raum eine Grafik (gplot) ist. In Räumen ohne Grafik werden die Icons angezeigt. Deutlicher: wenn ein Raum mit Grafik angezeigt wird, verschwinden alle Icon im Menue. Andersherum sind alle da. Die Icon im Detailbereich verschwinden auch.
Soweit ich weiß ist irgendetwas an fhemweb (pm und js) und SVG.pm geändert worden. Ich vermute dort das Problem.

Gruß Christoph

BTW. In den anderen Styles sind die Grafiken ziemlich "verhunzt" die Stimmen bei IOS6

Blackcat · 23 Januar 2015, 06:13:06

Ich schau mir das mal an ... aber ich kann seit gestern Abend wieder einchecken

Also für alle einfacher

PS: ich sehe gerade das Dashboard wurde auch geändert :/

Blackcat · 23 Januar 2015, 13:11:55

Habe eine neue Version eingestellt, kommt morgen mit dem Update und hat nun vollen ios Geräte Support

hier möchte ich aber im Portrait Mode noch den Abstand zu den Seiten verkleinern.

Bilder gibt es vorab im ersten Post

Auch mit einem geänderten Icon bei noch nicht gespeicherter Config

Blackcat · 23 Januar 2015, 13:33:54

So nun mit kleinerem Seitenrand im iphone Modus

Bennemannc · 24 Januar 2015, 10:04:22

Hallo Sandra,

jetzt sind die Icons wieder da, aber die Grafiken sind kaputt. Das kann aber auch an dem SVG Modul liegen. Ich habe versucht, eine Grafik zu ändern - da kommt bei der Farbauswahl immer nur "keine Option". Da scheint noch etwas nicht zu passen.

Gruß Christoph

Blackcat · 24 Januar 2015, 10:40:56

Ja die svgs sind kaputt, die haben so komische Schwarze Ränder

aber das ist bei den anderen außer dark auch so... Am style direkt liegt es nicht das habe ich überprüft .. $:-\$