grid view des develop branches von smart visu funktioniert nicht

[drbone]

Hallo

Ich bin neu hier, habe aber schon einiges gelesen. Zu meinem aktuellen Problem konnte ich bisher keine Antwort finden, daher frage ich jetzt einfach selbst.

Ausgangsituation:
=> Haus mit KNX installation
=> knxd, SmarthomeNG, smartVISU und fhem auf einem ubuntu server 16.04 (bald 18.04)

Bisher habe ich den master branch von smartvisu genutzt und die otterstaetter grid view für mich "adaptiert/konfiguriert".
Das hat prima geklappt, habe so gut wie alle Räume und deren Funktionen abgebildet und war zufrieden.
D.h. die integration KNXD/SmarthomeNG/smartVISU und fhem funktioniert eigentlich.

Vor kurzem bin ich auf die (nachträglich blöde) Idee gekommen: "Ich hätte doch gerne das Wetter in der VISU integriert"
Wunderground gibt keine API Keys mehr her und yr bekomm ich nicht zum laufen)
=> Nach einer kurzen Suche bin ich über darksky.net gestolpert.
Dafür gibt es eine smarthomeNG integration und eine smartvisu integration: https://knx-user-forum.de/forum/supp...zw-forecast-io

Die Integration gibt es im develop branch von smartvisu. Gut, neuer Ordner git clone auf den develop branch und ausprobieren.
Die gute Nachricht: Darksky funktioniert, nochmals Danke dafür.
Die schlechte Nachricht: die Grid view (inzwischen in examples3.advanced) ist kaputt. (zumindest bei mir)

Das Problem: Statt eines 8x4 bzw 4x2 "grid" im landscape, wie ich es gewohnt bin, werden alle widges des Grids in einer Spalte untereinander, und das auch noch mit großem Abstand angezeigt. Das ist aber schon direkt nach dem pull so, kann man also relativ einfach reproduzieren:

• cd /var/www/html/
• mkdir test
• cd test
• git clone --single-branch -b develop https://github.com/Martin-Gleiss/smartvisu.git
• im Browser http://<host>/test/smartvisu/ öffnen
• Konfiguration öffnen
• auf example3.advanced und ice umstellen => speichern
• testen

Ich vermute dass es eine einfache Kleinigkeit ist, aber ich kenne mich mit js/css etc einfach zu wenig aus um den Fehler zu finden.

Bitte daher um Hilfe.

danke, beste Grüße
Jo

[smai]

In welchem Browser funktioniert die Anzeige als Grid in 2.8? In allen von mir getesteten Browsern ist auch in 2.8 alles untereinander:
screenshot.png


Das mit den Abständen hingegen kann ich nachvollziehen, da stimmt was nicht in develop.

[drbone]

dafuq... du hast recht. Hab mir gerade 2.8 geholt und hab das gleiche. Ja, wie du sagst ohne die Abstände.
d.h. ich hab da selbst was gemacht damit es so aussieht: DeepinBildschirmfoto_Bereich auswählen_20180802113133.png
Das war ein guter Tipp, Ich such da noch ein wenig.

[smai]

Ich bin dem Fehler zumindest näher gekommen:
Die JavaScript-Datei /pages/otterstaetter/mobile/grid.js wird in 2.8 im Browser gar nicht geladen.
In 2.9 habe ich die Funktion aus dieser Datei in /pages/examples3.advanced/widgets/grid.js integriert, deshalb wird sie ausgeführt. Das was sie macht scheint aber nicht korrekt zu sein.

Ich habe aber leider grad nicht Zeit, mir das genauer anzuschauen.
Wenn du eine Lösung findest, werde ich diese gerne übernehmen.

[drbone]

ich hab die Lösung (ein diff hilft bei solchen Dingen)
touch ./pages/otterstaetter/visu.js
und schon funktioiert das grid in 2.8

Ich hab nur _keine_ Ahnung warum das so ist, das überlasse ich dir :-)

€: leider hilft das für den develop branch nicht.

[smai]

Und du hast nichts in die visu.js reingeschrieben?

[drbone]

nö ist ein leeres file.
Wenn ich mal raten würde, wird das file irgendwo eingebunden und wenn es das file dann nicht gibt fällt er auf die Schnautze und desshalb gehts nicht. Wenn es das File aber gibt, und nur leer ist, ist das kein Problem. just a guess of a non-web-dev :-)

[smai]

OK, habe es in 2.8 hingekriegt. git diff war mein Freund, da hatte doch irgendjemand bei mir was geändert.

[smai]

Versuchs in 2.9 mal mit folgendem in der anzulegenden Datei /pages/example3.advanced/widgets/grid.css (bzw. natürlich in deinen Pages).
Es ist noch nicht ganz alles richtig, aber vom Grundsatz her sollte es funktionieren.

.container div.grid {
    position: absolute;
}

.container div a.grid {
    height: 100%;
    font-size: 2.6vmin;
    padding: 0;
}

/* Font-size for label */
.container div a.grid p {
    text-align: center;
}

.container div a.grid img,
.container div a.grid svg {
    width: 60%;
    height: auto;
    padding-top: 1em;
}

/* TODO .container div a.grid .ui-btn-text .single {
    width: 80%;
    height: auto;
}
 */
.container div a.camera_button img.pic {
    width: 90%;
    height: auto;
}

.container div a.grid .svg-frame, a.grid span.rgb-icon, .container .svg-frame svg, .container .svg-frame object.icon {
    width: 60%;
    height: auto;
    position: relative;
    display:inline-block;
    vertical-align: middle; 
    overflow:hidden;
}

.container div a.grid .svg-frame {
    width: 100%;
    height: auto;
}

/* Plot */
.container div a.grid .plot {
    width: 100%;
    height: 11em;
    min-width: 0;
    position: relative;
    display:inline-block;
    vertical-align: middle; 
    overflow:hidden;
}

.container a.grid .plot svg text {
    font-size: 2vmin!important;
}

.container a.grid .plot svg path {
    stroke-width: 1px!important;
}

/* Hide and disable objects */
.disabled svg {
    pointer-events: none;
}

.container .hide {
    display: none!important;
}

.ui-off {
    opacity: .5;
}

/* Popup */
.rgb-popup2 div {
    width: 24px;
    height: 24px;
    margin: 0 1px 1px 0;
    float: left;
}

.rgb-popup2 br {
    clear: left;
}

/* footer */
.ui-footer-custom div {
    position: relative;
    float: left; 
    padding-bottom: 2px;
    margin-right: 20px;
    /* Center Text vertical */
    line-height: 32px;
    vertical-align: middle;
}

.ui-footer-custom img, .ui-footer-custom svg {
    display: block;
    float: left;
    margin-right: 5px; 
    height: 32px!important;
}

.ui-footer-custom div.align-right {
    float: right; 
}

/* Popup */

.ui-popup {
    margin: 10px;
    padding: 2em;
}

.ui-popup div.popup-info div.icon {
    float: left;
    height: inherit;
}

.ui-popup div.popup-info div.info {
    float: right;
    font-size: 2.5vmin;
    margin: auto;
}

/** Rotate Text -90 degrees used in shutter-widget */
.rotate {
    display: block;
    white-space: nowrap;
    -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
    -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
    -ms-transform: rotate(-90deg); /* IE */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE */
    transform: rotate(-90deg);
}

svg.icon {
    width: auto;
    height: auto;
}

/* Weather */
.container div a.weather .ui-btn-text {
    height: 100%;
}

.container div a.grid img.weather {
    width: 100%;
    white-space: normal;
    margin-top: 10%;
}

.container div a.grid .weather * {
    text-align: inherit;
    margin: 2% 0;
}

.container div a.grid .weather .temp {
    padding: 0;
}

.container div a.grid.weather .info {
    vertical-align: top;
    overflow: hidden;
}

.container div a.grid .weather .values {
    vertical-align: bottom;
    font-size: 2.8vmin;
    font-weight: normal;
}

.container div a.grid .weather .values .temp, .container div a.grid .weather .values .highlow {
    font-size: 4vmin;
    margin-bottom: 0.5em;
}

[drbone]

funzt! super cool, danke dir!