Page 1 of 1

button with p1 graph and its clickable to goto to slide

Posted: Friday 05 May 2023 14:54
by pvklink
Is it possible to have a:
button, with an button image of a self made graph (say block p1), and when you click on the button it goes to slide x

My dashboard for my small screen in my living room has all big buttons that show content (cam or weather) and go to slides after clicking...
Now that my energy settings are configured on a separate slide i want the button on the home page tot be filled with a graph or if thats not posible powerusage data

Re: button with p1 graph and its clickable to goto to slide

Posted: Friday 05 May 2023 21:23
by Lokonli
For most blocks you can add the block parameter 'slide: 2'

Then when you click on it, the screen will move to slide 2.

This should work for normal Domoticz blocks, dials as well as graphs.

If you have a small block width for a graph probably you want to hide the axes and the title.
It's a bit of tweaking, but you can achieve this as follows.

Add to your block definition:

Code: Select all

blocks['mygraph'] = {
  ...,  //your graph definition here
  width: 2,
  height: '50px',
  slide: 2,
  customHeader: ' ',
  options: {
    scales: {
        xAxes: [ {
          display: false
        }],
        yAxes: [ {
          display: false
        }],
      },
      layout: {
        padding: {
            top: 0
        }
    }
  }
}
And use custom.css to hide the buttons:

Code: Select all

 [data-id='mygraph'] .graphbuttons {
    display:none
 }
 
Then you'll get a minimal graph button, that will move the screen to slide 2 on click.
minigraph.jpg
minigraph.jpg (4.75 KiB) Viewed 671 times
If you want to hide the title completely add the following to custom.css:

Code: Select all

 [data-id='mygraph'] .graphtitle {
    display:none
 }
minigraph2.jpg
minigraph2.jpg (3.62 KiB) Viewed 669 times

I could add a layout preset for this to make life easier. Would that be a useful feature?

Re: button with p1 graph and its clickable to goto to slide

Posted: Friday 05 May 2023 23:19
by pvklink
Thanks for your advise!
Gonna test it tomorrow..
Will be continued...
This is the last button, then my dashboard is ready for solarpanels :-)
Will publish it afterwards...

Graph also good enough, and refresh also works..

Re: button with p1 graph and its clickable to goto to slide

Posted: Wednesday 10 May 2023 10:30
by pvklink
Works almost!
Great button/graph, but when i add slide, the graph is gone and only the name of the block is shown!
The slide function does work..

Code: Select all

blocks['testp1'] =				{
    						//title: 'My electra verbruik',
    						//graphTypes: ['v'],
						devices: [3079],
						stacked: true,
						slide:6,
						tooltiptotal: false,
						buttonsSize: 0,
						width: 3,
						// debugButton: true,
						graph: ['bar','bar'],
						legend: false,
						datasetColors:['red','green'],
						range:'last',
  						options:	{
    								scales: {
        								xAxes:	[ {
          										display: false
        									}],
        								yAxes:	[ {
          									display: false
        									}],
      									},
      								layout: {
        								padding: {
            										top: 0
        									}
    									}
  								},
						custom :	{
								"last":	{
									data:	{
										usage: 'd.v_3079',
										generation: '-d.r1_3079'
										}
		        						},
       								}
    						},


Re: button with p1 graph and its clickable to goto to slide

Posted: Friday 12 May 2023 8:53
by pvklink
Lokonli wrote: Friday 05 May 2023 21:23 For most blocks you can add the block parameter 'slide: 2'

Then when you click on it, the screen will move to slide 2.

This should work for normal Domoticz blocks, dials as well as graphs.

If you have a small block width for a graph probably you want to hide the axes and the title.
It's a bit of tweaking, but you can achieve this as follows.

Add to your block definition:

Code: Select all

blocks['mygraph'] = {
  ...,  //your graph definition here
  width: 2,
  height: '50px',
  slide: 2,
  customHeader: ' ',
  options: {
    scales: {
        xAxes: [ {
          display: false
        }],
        yAxes: [ {
          display: false
        }],
      },
      layout: {
        padding: {
            top: 0
        }
    }
  }
}
And use custom.css to hide the buttons:

Code: Select all

 [data-id='mygraph'] .graphbuttons {
    display:none
 }
 
Then you'll get a minimal graph button, that will move the screen to slide 2 on click.

minigraph.jpg
If you want to hide the title completely add the following to custom.css:

Code: Select all

 [data-id='mygraph'] .graphtitle {
    display:none
 }
minigraph2.jpg


I could add a layout preset for this to make life easier. Would that be a useful feature?

All settings work, only slide does not work. When i add that one, the graphs disappear!