Tablet UI - displaying charts (aka passing parameters)

Begonnen von malc_b, 08 Februar 2017, 10:36:55

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

malc_b

08 Februar 2017, 10:36:55
Has anyone any suggests for this?

What I am trying to is plot some charts in tablet ui.  A single chart is easy enough but I want charts for all the radiator valves (and maybe others).  My 1st try was like this

Swiper -> multiple charts -> chart template

The problem with swiper is that it can't cope the cursor.  I think swiper is loading all the charts and then those not being displayed are off screen to left or right.  The cursor seems to be fixed on chart 0.  I reckon swiper is not the widget to use, not only because of the cursor issue but also because if it loading all the charts it would be very slow.  Hence I reckon I should use pagebutton (or maybe pagetab if I could work out what the difference between those two was) so that each chart is a separate load.

What I would like to do, since most charts are the same template, is call the template and pass in the parameters.  I think that can sort of be achieved by:

Pagebuttons (1 url, multiple #contents -> multi charts/#contents on 1 page -> chart template

I'm not sure if pagebutton just grabs the content it wants or whether it expands the page first so would be bad for speed.  Also I can't pass params in the url as that breaks pagebutton it seems.  This was a way of making the urls different so that the pagebutton activate could tell when it was activated.

The only way that I guess will work is:

Pagebuttons  -> multi pages -> chart template

where I have 1 file for each chart that just calls the template with parameters.  Not very neat.  Is there a better way?



malc_b

#1
11 Februar 2017, 17:03:05
I have a solution

link  looks like this

Code Auswählen

<div data-type="link" data-url="#index-charts-x.html#0" data-load="#chart0"
     data-active-pattern=".*#index-charts-x\.html#0"
     data-background-color="#606060" data-active-background-color="#aa6900"
     data-color="#eeeeee" class="inline w3x round nocache">Button Text</div>


I'm using link so I can have text label but pagebutton with icons would work the same way.  The file loaded is index-charts-x.html which contains

Code Auswählen

<html>
    <!-- /*load this page via widget pagebutton*/ -->
<body>
  <div class="page" id="chart0">
    <div data-template="chart.html" data-parameter='{"pMAXid":"MAX_Lounge1", "pLabel":"LOUNGE", "pGrp":"0"}'></div>
  </div>
  <div class="page" id="chart1">
    <div data-template="chart.html" data-parameter='{"pMAXid":"MAX_MasterBed", "pLabel":"MASTER BED", "pGrp":"1"}'></div>
  </div>
........


Which is calling my chart template.  The link button will only fetch the matching id so even though the file contains all charts all link #chart0 would get is chart0.
The #0 at the end of the url does nothing except vary the url so that the active pattern can match individual link buttons. # in the url at the end is ignored and passes through (?param=something does NOT work, I think because fhem uses ?param).

Note I have a main menu which has index-charts.html, when page active looks for index-charts.*, hence my sub page has to be index-charts-x in order that the main menu pagebutton stays lit.

FYI the issue with swiper and charts looks to be a missing refresh of the plot when cursor is enabled (or disabled or starts enabled).  Click zoom +/- refreshes the plot and then the cursor works.
Drucken
Nach oben Seiten1
Benutzer-Aktionen