button with p1 graph and its clickable to goto to slide

[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

[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 (4.75 KiB) Viewed 633 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 (3.62 KiB) Viewed 631 times

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

[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..

[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'
										}
		        						},
       								}
    						},

[pvklink]

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!