Buttons

Buttons are clickable elements that may show an image. First you have to define the button in CONFIG.js:

buttons = {}            //only once!!
buttons.yr = {
    width: 12,
  isimage: true,
  refresh: 60,
    btnimage: 'https://www.yr.no/sted/Norge/Oppland/%C3%98ystre_Slidre/Beito/advanced_meteogram.png',
    url: 'https://www.yr.no/sted/Norge/Oppland/%C3%98ystre_Slidre/Beito/langtidsvarsel.html'
};

// Then add the button to a specific column:
var columns = {}          //This line only once!!
columns['3'] = {
  blocks:  [
      ...,
      buttons.yr,
      ...
  ],
  width: 1
}

Parameters

Parameter Description
width 1..12: The width of the block relative to the column width
title '<string>': Custom title for the block
key 'key': unique identifier.
slide 1..99: Slide to specified screen on click.
isimage Set to true if the image should be shown in the full button width (default false).
icon 'fas fa-icon': icon to show in the button.
image 'image.png': image to show as icon the button. Image path is relative to the <dashticz>/img folder.
btnimage '<url>': URL of the image to show in the button.
refresh 1..99999: Refresh time of the button image in seconds. There is no maximum. The default is 60 (=1 minute).
url '<url>': URL of the page to open in a popup window on click.
popup 'mypopup': Opens the ‘mypopup’ block in a new window on click.
forceheight
Set the height of the image in a button
'200px': Set image height to 200px.
framewidth '<integer>': specific width of the popup window on click.
frameheight '<integer>': specific height of the popup window on click.
forcerefresh
Control the caching-prevention mechanism of the images and popup frame for a button.
0 : Normal caching behavior (=default)
1, true : Prevent caching by adding t=<timestamp> parameter to the url as second parameter. Try this if you have a (cheap Chinese) webcam. Not all webservers will handle this correctly
2 : The image is loaded via php, preventing caching. (php must be enabled on your Dashticz server)
3 : Prevent caching by adding t=<timestamp> parameter to the end of the url. Not all webservers will handle this correctly.
refreshiframe
0: No automatic refresh of a button popup frame (default)
1..99999: Refresh time of the button popup frame in sec. There is no maximum. The default is 60 (=1 minute).
level Domoticz log level used by the log-button.
newwindow
0: open in current window
1: open in new window
2: open in new frame (default, to prevent a breaking change in default behavior)
3: no new window/frame (for intent handling, api calls). HTTP get request.
4: no new window/frame (for intent handling, api calls). HTTP post request. (forcerefresh not supported)
5: open in a new browser tab
auto_close
Closes the opened window after a certain period of time (only applicable when newwindow is 1,2 or 5)
0: (=Default) No auto close
5: Closes the popup window after 5 seconds.
password
Password protect switches, buttons, thermostats, sliders, blinds
'secret': Password to use

Usage

Slide button

If you have added the slide parameter to a button, then Dashtics will slide to the specific screen if the button is pressed.

If you use a button to slide to specific screen (menu button), then the background color of that button will change if that specific screen is active.

Example: If screen number 2 is the active screen, then a button with parameter slide:2 will be shown as active.

You can adapt the formatting of the selected button with the class .selectedbutton in your custom.css. Example:

.selectedbutton {
  background-color: #cba !important;
}

Example on how to use menu buttons:

//three buttons are defined
buttons.page1 = { width:12, title:'page 1', slide:1};
buttons.page2 = { width:12, title:'page 2', slide:2};
buttons.page3 = { width:12, title:'page 3', slide:3};

//definition of a menu column
var columns = {}          //This line only once!!
columns['menu'] = {
  blocks:  [ buttons.page1, buttons.page2, buttons.page3],
  width: 1
}

//Define columns 1 to 6 as well
// ...

//Add the menu column to your screens
var screens = {}        //This line only once!
screens[1] = {
  columns: ['menu', 1,2]
}
screens[2] = {
  columns: ['menu', 3,4]
}
screens[3] = {
  columns: ['menu', 5,6]
}

forcerefresh

Control the caching-prevention mechanism of the images for a button.

0 : Normal caching behavior (=default)

1 (or true) : Prevent caching by adding t=<timestamp> parameter to the url. Not all webservers will handle this correctly

2 : The image is loaded via php, preventing caching. (php must be enabled on your Dashticz server)

Examples

Additional examples of button definitions:

var buttons = {}
buttons.buienradar = {width:12, isimage:true, refresh:60, btnimage: 'https://image.buienradar.nl/2.0/image/animation/RadarMapRainNL?height=300&width=360&extension=gif&renderBackground=True&renderBranding=False&renderText=True&history=3&forecast=6&skip=1', url: 'https://www.buienalarm.nl/amsterdam-noord-holland-nederland/52.3727,4.8936'}
buttons.radio = {width:12, image: 'radio_on.png', title: 'Radio', url: 'http://nederland.fm'}
buttons.nunl = {width:12, icon: 'far fa-newspaper', title: 'Nu.nl', url: 'http://www.nu.nl'}
buttons.webcam = {width:12, isimage:true, refresh:2, btnimage: 'http://ip_url_to_webcam', url: 'http://ip_url_to_webcam', framewidth:500, frameheight:400}

To remove the close button of the button-popup add the following text to custom.css:

.frameclose { display: none; }