Gå til innhold
  • Bli medlem
Støtt hjemmeautomasjon.no!

Grafana inn i hstouch


GO_Nilsen

Anbefalte innlegg

Har brukt device history i lisens perioden for å teste grafer til hstouch. Dette virker jo egentlig veldig bra. men

grafikken er kanskje ikke av den sprekeste. Har satt opp så jeg får logget det jeg trenger i grafana. 

Men er den noen som vet om en god løsning å få grafene fra grafana inn i hstouch?

 

 

Lenke til kommentar
Del på andre sider

Har prøvd både "text" boks og "image" boks. men virker ikke. 

ser at adressa jeg linker til ikke er en fil. men når jeg går inn på adressa kommer det kun opp et bilde (PNG).

noen som har tips?

 

http://mitt-hjemmenettverk/render/d-solo/gHSFsXXik/tempratur-fuktighet-magnus?orgId=1&theme=light&panelId=2&width=1000&height=600&tz=Europe%2FOslo

 

Virker jo fint i hstouch designeren, men når jeg får det over på en android tablet virker det ikke.

image.png

Endret av GO_Nilsen
Lenke til kommentar
Del på andre sider

  • 7 måneder senere...
On 18/02/2019 at 12:38, GO_Nilsen said:

Har prøvd både "text" boks og "image" boks. men virker ikke. 

ser at adressa jeg linker til ikke er en fil. men når jeg går inn på adressa kommer det kun opp et bilde (PNG).

noen som har tips?

 

http://mitt-hjemmenettverk/render/d-solo/gHSFsXXik/tempratur-fuktighet-magnus?orgId=1&theme=light&panelId=2&width=1000&height=600&tz=Europe%2FOslo

 

Virker jo fint i hstouch designeren, men når jeg får det over på en android tablet virker det ikke.

 

 

 

Fikk du løst dette på noe vis?
Skulle gjerne hatt en slik løsning med mulighet for grafer fra Grafana i HStouch. :)

Lenke til kommentar
Del på andre sider

  • 3 uker senere...

Jaggu fikk jeg satt opp InfluxDB og Grafana i dag. Alt fungerer strålende, men jeg skulle så gjerne hatt grafer med transparent eller en spesifikt farget bakgrunn.

Også som er mulig å få tak i med anonym tilgang. Er det mulig?

Jeg har prøvd å Google meg frem til noe, men det er et kaos der ute så finner ikke noe fornuftig :)

Lenke til kommentar
Del på andre sider

1 hour ago, zephyr said:

Fikk det til ved å legge inn en egen css fil som endret bakgrunnen. På gauge måtte jeg også inn i en js fil å endre litt siden bakgrunnen på "visern" er definert der

 

Har jeg forstått det da slik at du har fått graf fra Graphana inn is hstouch?

Kunne du isåfall kommet med en liten guide? :)
 

Er i utgangspunktet på jakt etter en mulighet å få grafene i hstouch.

Men kan bakgrunnen endres, så er jo det bare et pluss ? 

Lenke til kommentar
Del på andre sider

Fant ut i går at det ikke var helt på stell så måtte ordne det først.

 

Her er da sånn grafene ser ut hos meg. Bare et testoppsett enda for å vise grafene.

Dette ser mye bedre ut enn varianten med .png siden de er dynamiske.

Png bilder fra Grafana har også mye forsinkelse og har dårligere bildekvalitet så tror dette er en bedre løsning.

 

Jeg kan ikke filla om css og lignende, så dette er nok ikke den peneste løsningen :)

Hvis noen har ideer om forbedringer så bare si ifra!

 

image.thumb.png.989f6bb644634f362319445b2d74fb1a.png

Jeg regner med at en installasjon med InfluxDB og Grafana allerede er oppe å går.

 

WARNING: Dette kommer til å få Grafana til å se ganske snodig ut i nettleseren. Vi endrer bare deler av et theme her.

 

Jeg bruker Grafana kun til å holde endel grafer til HSTouch så da gjør det ingenting.

 

Får å få til det her må man da gjøre;

 

1: Rediger index.html i mappen \GrafanaLabs\grafana\public\views.

    Legg til 

<link rel="stylesheet" href="public/sass/hstouch.css" type="text/css">

under Title.

image.thumb.png.d75dc09cbc6eb5fa9ef34fbabf63ebd6.png

 

Lag en fil i /public/sass som heter hstouch.css (eller hva du vil) og kopier inn følgende;

 

@charset "UTF-8";

.panel-container {
    background-color: #78797d !important;
    border: 0px solid #78797d !important;
}
.dashboard-container {
    background-color: #78797d !important;
    border: 0px solid #78797d !important;
}

Endre fargekoder til hva du vil. Sett samme fargekoder på alle siden det er avrundede hjørner på containeren og bakgrunnen vil da synes.

Siden alt har !important tag vil da disse overstyre eksisterende css.

Etter endringer er gjort i hstouch.css måtte jeg bruke hard-refresh (shift-F5) for å få vist endringene.

Voila! Ny bakgrunnsfarge på grafer.

 

For å få det her inn i HSTouch gjør man da;

 

 

1: Gå til din Grafana installasjon og klikk på header til en graf sånn at du får frem menylinjen. Klikk på "View"

image.png.91913d7eda7d1f2240657c4c9389333f.png

 

2: Velg tidsområde for grafen i øvre høyre hjørne og oppdateringsfrekvens

image.png.48f4919116dcb263e3440f7fd2a28e77.png

 

3: Kopier linken i adresselinjen. Du skal bruke den og ikke den du får fra "Share" funksjonen.

 

4: Gå inn i HSTouch og legg til et nytt "Text" element.

    Endre følgende:

        - Sett IsHTML til "True"

 

image.png.387aa72df0b8650f35bcf25690a3f0c1.png

 

5: Lim inn linken du har fra Grafana i "Text"-feltet. Endre ip-adresse hvis Grafana-server er på annen maskin.

    - Legg til 

&kiosk

på slutten av link.

Det burde da se noe slik ut:

http://grafana-server:3000/d/uPW1yGoWk/new-dashboard-copy?orgId=1&refresh=5s&from=now-3h&to=now&theme=dark&panelId=6&fullscreen&kiosk

6: TADAA!!

image.thumb.png.0b7661ea201ab4a6ae2d3209a9f75ada.png

 

 

Endret av zephyr
  • Like 5
Lenke til kommentar
Del på andre sider

  • 2 år senere...

Ripper opp en gammel tråd nå, men jeg prøver å få Grafana charts inn i HStouch, men sliter med feilmelding.

Er det noen andre som har hatt det samme problemet, og evt løst det?

 

Finner lite om det på nett, og infoen under sier meg veldig lite.

Grafen ser fin ut i nettleseren, men vil ikke loades inn i HStouch. 

image.thumb.png.6d03b10a8bef641c00409abbea98481b.png

Lenke til kommentar
Del på andre sider

Bli med i samtalen

Du kan publisere innhold nå og registrere deg senere. Hvis du har en konto, logg inn nå for å poste med kontoen din.

Gjest
Skriv svar til emnet...

×   Du har limt inn tekst med formatering.   Lim inn uten formatering i stedet

  Du kan kun bruke opp til 75 smilefjes.

×   Lenken din har blitt bygget inn på siden automatisk.   Vis som en ordinær lenke i stedet

×   Tidligere tekst har blitt gjenopprettet.   Tøm tekstverktøy

×   Du kan ikke lime inn bilder direkte. Last opp eller legg inn bilder fra URL.

×
×
  • Opprett ny...

Viktig informasjon

Vi har plassert informasjonskapsler/cookies på din enhet for å gjøre denne siden bedre. Du kan justere dine innstillinger for informasjonskapsler, ellers vil vi anta at dette er ok for deg.