Schöneres Raum-Menu im smallscreen style

[KernSani]

Hi zusammen,

ich konnte mich im smallscreen style nie sonderlich mit dem Dropdown anfreunden, das anstelle des Raum-Menus tritt. Deshalb habe ich mal etwas experimentiert und das Menu mittels Javascript etwas umgebaut, so dass es sich wie ein "typisches" Menu einer mobilen Anwendung verhält. In Verbindung mit ein bisschen CSS und noch mehr Javascript Gedöns sieht das auf dem Iphone dann aus, wie auf den Screenshots dargestellt. Falls es Interesse gibt würde ich dazu mal ein kleines HowTo basteln...

Grüße,

Oli

[rudolfkoenig]

Interesse habe ich, da smallscreen mAn auch renovierbedierftig ist, und ich bin auf der Suche nach Konzepten.
Allerdings schaut auf dem Bild so aus, dass diese Darstellung nur fuer Benutzer < 30Jahre geniessbar ist.

[KernSani]

Interesse habe ich, da smallscreen mAn auch renovierbedierftig ist, und ich bin auf der Suche nach Konzepten.

Bei einer grundlegenden Renovierung des smallscreen ist meine technische Lösung wohl eher nicht geeignet. Ich habe versucht mit javascript auf dem existierenden Style etwas zu bauen (Prinzipiell mache ich aus der Menu-Tabelle eine <ul> und jage das dann in ein jQuery-basiertes Widget). Zudem ist es tatsächlich gar kein smallscreen. Da im smallscreen die webcmds nicht angezeigt werden (ist doch so, oder?) ist mir das zu eingeschränkt.
Da wären wir bei den Konzepten: Wie bringe ich viele Informationen/Funktionen auf den kleinen Screen, habe dabei gleichzeitig schnellen Zugriff auf die wichtigsten Funktionalitäten und mache das Ganze im existierenden Framework? Nicht einfach zu beantworten... Ich mache mir mal ein paar Gedanken dazu, wie ich mir das vorstellen könnte...Ich würde es sehr begrüßen, wenn FHEM out-of-the-box ein Iphone-taugliches Frontend hätte, bei dem ich nur zwei Attribute vergeben muß (room und group) und dann ist ein neues Device da wo es hingehört...

Allerdings schaut auf dem Bild so aus, dass diese Darstellung nur fuer Benutzer < 30Jahre geniessbar ist.

Bin > 40

[rudolfkoenig]

Ich habe versucht mit javascript auf dem existierenden Style etwas zu bauen

Mir schwebt auch sowas vor, nur radikaler: JavaScript holt nur Daten von FHEMWEB, und rendert selbst. Dieses Konzept hat noch Probleme mit Widgets, die in Perl gerendert werden.

Da im smallscreen die webcmds nicht angezeigt werden (ist doch so, oder?) ist mir das zu eingeschränkt.

smallscreenCommands
       If set to 1, commands, slider and dropdown menues will appear in
       smallscreen landscape mode.

[Xcoder]

Hat sich da noch etwas getan? Habe das Prinzip aus den Bildern nicht genau erfasst, aber ist dass so etwas wie ein Side- oder Slide-Menu? Die Beispiele hier https://www.w3schools.com/howto/howto_js_sidenav.asp sehen relativ überschaubar aus. Hat da jemand Interesse etwas zu stricken. Ich helfe auch gerne mit, aber wenn jemand schon mal eine grobe Grundlage vorlegen könnte, wäre das etwas einfacher.

Den smallscreenstyle könnte man ja erst mal lassen wie er ist, und nur das Dropdown durch das Slide-Menu ersetzen.

Gruss, Xcoder

[Xcoder]

OK ist jetzt nicht smallscreenstyle, aber direkt davon abgewandelt. Dank jQuery funktioniert das sogar ohne Anpassung von 01_FHEMWEB, man muss aber noch ein JavaScript laden:

Code Auswählen Erweitern

attr WEBtest JavaScripts pgm2/testtouchpadstyle.js
attr WEBtest stylesheetPrefix testtouchpad


pgm2/testtouchpadstyle.js:

Code Auswählen Erweitern

$(function() {
  $("#logo").on('click', function(e) {
    $("#menu")
    .css('width','250px')
    .css('box-shadow','3px 0px 20px 0px #111');

    e.stopImmediatePropagation();
  });

  var $room = $("#content").attr("room");
  $("#logo").append(" ☰   FHEM - " + $room);

   var $sidebar   = $("#logo"), 
       $window    = $(window),
       offset     = $sidebar.offset(),
       topPadding = 0;

  $window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
      $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding });
    } else {
      $sidebar.stop().animate({ marginTop: 0 });
    }
  });
 
});

pgm2/testtouchpadstyle.css:

Code Auswählen Erweitern

@import url("defaultCommon.css");

body     { background-color: #d0d0d0; color: #0000a0; margin: 0px; }
a        { color: #0000a0;}
svg:not([fill]):not(.jssvg) { fill:#0000a0; }
select   { font-size: 36px;}
.handle  { color: #0000a0; width: 80px; }

#console { height:auto; }
textarea { font-family:Arial, sans-serif; font-size:16px;}
#back    { position:absolute; top: 2px; left:18px; }

#logo    {
   z-index: 99;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   padding: 8px; padding-left: 20px;
   background-color: #c0c0c0;
   font-size: 30px;
}
#menu    {
   z-index: 999;
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 0px;
   overflow-x: hidden;
   background-color: #111;
   transition: 0.4s;
}
#hdr     { display: none; }
#content { z-index: 9; position:absolute; top:50px; left: 0px; right: 0px; }

#errmsg  { left:0px; }

.devType { font-size:12px;}

table.room a { color: white; }
table.room { background-color: transparent; border: none; padding-left: 20px; font-size: 30px; }
table.room tr.sel { background-color: transparent; border: none; }
table.room.roomBlock1 { display: none; }
table.room.roomBlock3 { display: none; }

div.col1 { width: 188px; height: 30px; white-space: nowrap; }
div.col2 { width: 142px; height: 30px;
  -webkit-box-pack: center; -moz-box-pack: center; box-pack: center;
  white-space: wrap;
  font-size:16px;
}

div.col1, div.col2, div.col3 {
  overflow: hidden; text-overflow: ellipsis;

  padding-top: 10px; padding-bottom: 10px;
  padding-left: 5px; padding-right: 5px;
  display: -webkit-box; -webkit-box-align: center;
  display: -moz-box; -moz-box-align: center;
}

div.dname, div.dval  {
  width: 152px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size:16px;
}
div.tiny { font-size:10px; }

table.block { width: 320px; border-spacing:0px; border:0; border-radius:0; }
table.block tr { border:1px solid gray; border-spacing:0px; }
table.block td { width: 150px; border-right: 1px solid #D0D0D0; }

#menu #block { visibility: hidden; }
button.dist { margin:5px; }

.slider { float:right; width:320px; height:26px; }
.set .slider,.get slider,.attr .slider { background:#F0F0D8; }

#cloudfree { display:none; }

/* Portrait mode */
@media all and (orientation:portrait) {
/*table.block select, table.block input { width: 0px; display: none; } */
  table.block tr td:nth-child(n+3) { width: 0px; display: none; }
}

/* Landscape mode */
@media all and (orientation:landscape) {
  div.col1 { width:282px; }
  div.col2 { width:108px; }
  div.col3 { width:100%; min-width:108px; height:30px; }

  table.block input { text-align: center; }
  table.block tr td:nth-child(3) { text-align: center; }

  table.block div.slider { min-width: 108px; text-align: center; }
  table.block slider { float: none; }
  table.block select { text-align: center; }
}

[Xcoder]

Und noch Screenshots...

[Xcoder]

Noch etwas weiter aufgehübscht.