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?
I have a solution
link looks like this
<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
<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.