Dashticz - Center Button Image (icon) Topic is solved

[darkville]

How do I center the icon from a button?

Code: Select all

buttons.page7 = { key: "media", width:1, isimage: true, image: "radio.png", slide:8};

Code: Select all

.button[data-id='media'] {
 height: 90px;
 text-align: center;
}

[Lokonli]

I guess you just want to show an image within the button.

I would recommend the following block definition:

Code: Select all

blocks['media'] = {
    btnimage: 'img/radio.png',
    width: 1,
}

(The image parameter is used for the icon style images at the left side of the block)

Add it to a column with:

Code: Select all

columns[1]['blocks'] = [
    'media'
]

and modify custom.css with:

Code: Select all

div[data-id='media'] img {
    width: 80%;
    display: block;
    margin: auto;
    padding: 5px;
}

radio.jpg (1.75 KiB) Viewed 622 times

or with a fixed height within the column width:

Code: Select all

div[data-id='media'] img {
    display: block;
    margin: auto;
    padding: 5px;
    height: 90px;
    object-fit: contain;
}

radio2.jpg (2.23 KiB) Viewed 622 times

[darkville]

I guess you just want to show an image within the button.

I would recommend the following block definition:

Code: Select all

blocks['media'] = {
    btnimage: 'img/radio.png',
    width: 1,
}

(The image parameter is used for the icon style images at the left side of the block)

Add it to a column with:

Code: Select all

columns[1]['blocks'] = [
    'media'
]

and modify custom.css with:

Code: Select all

div[data-id='media'] img {
    width: 80%;
    display: block;
    margin: auto;
    padding: 5px;
}

radio.jpg

or with a fixed height within the column width:

Code: Select all

div[data-id='media'] img {
    display: block;
    margin: auto;
    padding: 5px;
    height: 90px;
    object-fit: contain;
}

radio2.jpg

I tried this. It resulted in two things:
1. It's not within the column;
2. It's no longer a button and the code doesn't work with buttons.

[Lokonli]

What's your Dashticz version?

[darkville]

What's your Dashticz version?

Newest beta version.

Also here's what happens when using your code:

[Lokonli]

Which browser and OS do you use?

Can you post your CONFIG.js, custom.css and custom.js?

Verstuurd vanaf mijn AC2003 met Tapatalk

[darkville]

Os: Raspberry pi OS newest version.
Browser: Chrome & Chromium newest versions.

Config.js

Code: Select all

var config = {}
config['domoticz_ip'] = 'http://192.168.0.192:8080';
config['app_title'] = 'Dashticz V3';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['user_name'] = 'LetsNowShareTheUser';
config['pass_word'] = 'NorPasswordCauseIdk';
config['default_news_url'] = 'http://www.nu.nl/rss.html';
config['owm_api'] = '1667c78d2e447aa6c09bd7e54df9c0e9';
config['owm_name'] = '';
config['owm_country'] = 'nl';
config['owm_city'] = 'MyCity ;)';
config['owm_lang'] = 'nl';
config['owm_cnt'] = '5';
config['owm_min'] = true;
config['owm_days'] = true;
config["news_scroll_after"] = "15";
config['default_cors_url']
config['_HIDE_SECONDS_IN_CLOCK'] = false;
config['standby_after'] = 99999999999;
config["auto_swipe_back_after"] = 999999999;
config['language'] = "nl_NL"
config["calendarlanguage"] = "nl_NL"


var imagee = {key: "BulbImage", image:"bulb.png"}
buttons = {}   
buttons.page0 = {key: "home", width:1, image:"home.png", forceheight: "151px", slide:1};
buttons.page1 = { key: "lampen", width:1, image: "bulb.png", forceheight: '151px', slide:2};
buttons.page2 = { key: "ventilatie", width:1, image: "fan_on.png", forceheight: '151px', slide:3};
buttons.page3 = { key: "temp", width:1, image: "verwarming.png", forceheight: "151px", slide:4};
buttons.page4 = { key: "sensor", width:1, image: "motion_on.png", forceheight: "151px", slide:5};
buttons.page5 = { key: "beveiliging", width:1, image: "alarm.png", forceheight: "151px", slide:6};
buttons.page6 = { key: "brandbeveiliging", width:1, image: "heating.png", forceheight: "151px", slide:7};
// buttons.page7 = { key: "media", width:1, isimage: true, btnimage: 'img/radio.png', slide:8};
buttons.buienradar = {key: "br", width:12, isimage:true, btnimage: 'http://api.buienradar.nl/image/1.0/RadarMapNL?w=408&h=320', url: 'https://hetweerlokaal.nl/nederland/Gelderland/CityNamexD'}

var frames = {}
// frames.weather = {
//   frameurl:"//onlineluisteren.nl",
//   height: 1080   //height of the block in pixels
// }
frames.weather = {
  frameurl:"//nederland.fm",
  height: 730   //height of the block in pixels
}
frames.afval = {
  frameurl: "afval url",
  height: 730
}


blocks = {}
blocks["afval"] = {
  idx: 233,
  key: "afval",
  width: 6
}
blocks["eightynine"] = {
  idx: 89,
  key: "lamp89",
  width: 6
}
blocks["nintysix"] = {
	idx: 96,
	key: "lamp96",
	width: 6
  }
  blocks["twentythree"] = {
    idx: 23,
    key: "lamp23",
    width: 6
    }
  blocks["seventeen"] = {
	idx: 17,
	key: "lamp17",
	width: 6
  }
  blocks["onehundredandseventeen"] = {
    idx: 117,
    key: "lamp117",
    width: 6
    }
  blocks["twenty"] = {
	idx: 20,
	key: "lamp20",
	width: 6
  }
   blocks["twohunderdeleven"] = {
    idx: 211,
    key: "lamp211",
    width: 6
    }
  blocks["nintyfour"] = {
	idx: 94,
	key: "lamp94",
	width: 6
  }
  blocks["eightteen"] = {
	idx: 18,
	key: "lamp18",
	width: 6
  }
  blocks["fiftysix"] = {
	idx: 56,
	key: "lamp56",
	width: 6
  }
  blocks["fiftyfive"] = {
	idx: 229,
	key: "lamp55",
	width: 6
  }
  blocks["twentyfour"] = {
    idx: 24,
    key: "lamp24",
    width: 6
    }
  blocks["twentythree"] = {
	idx: 23,
	key: "lamp23",
	width: 6
  }
  blocks["onehundredandtwentytwo"] = {
    idx: 122,
    key: "lamp122",
    width: 6
    }
  blocks["fiftyone"] = {
	idx: 51,
	key: "temp51",
	width: 6
  }
  blocks["fiftythree"] = {
	idx: 53,
	key: "temp53",
	width: 6
  }
  blocks["eighty"] = {
	idx: 80,
	key: "temp80",
	width: 6
  }
  blocks["fiftyseven"] = {
    idx: 57,
    key: "lamp57",
    width: 6
  }
  blocks['newst'] = {
    feed: "https://www.nu.nl/rss/algemeen",
    showimages: false,
    icon: 'fas fa-newspaper',
    width: 8
    }
  
    blocks['woonkamer_thuis'] = {
      SwjitchType: 'dial', 
      type: "Heating",
      subtype: "Evohome",              
      idx: 143,                  
      title: 'Thuis: Woonkamer',       
      width: 12,                   
    }
    blocks['zolder_thuis'] = {
      SwjitchType: 'dial', 
      type: "Heating",
      subtype: "Evohome",              
      idx: 146,                  
      title: 'Thuis: Zolder',       
      width: 12,                   
    }
    blocks['kantoor_thuis'] = {
      SwjitchType: 'dial', 
      type: "Heating",
      subtype: "Evohome",              
      idx: 145,                  
      title: 'Thuis: Kantoor',       
      width: 12,                   
    }
    blocks['bas_thuis'] = {
      SwjitchType: 'dial', 
      type: "Heating",
      subtype: "Evohome",              
      idx: 144,                  
      title: 'Thuis: Bas',       
      width: 12,                   
    }
    blocks['media'] = {
      btnimage: 'img/radio.png',
      width: 1,
  }
    // blocks["clock2"] = {
    //   type: "clock",     
    //   width: 2,
    //   size: 10
    // }

    blocks['sp'] = {
 htmlfile: "indexs.html",
 margin: true
  }

//definition of a menu column
var columns = {}
columns['0'] = {
	blocks:  [],
	width: 12
  }
  columns[1] = {}
columns[1]['blocks'] = ['currentweather_big_owm','weather_owm']
columns[1]['width'] = 5;
columns["trafficinfos"] = {
	blocks: [buttons.buienradar],
	width: 3
}
columns[2] = {
  blocks: ['newst'],
  width: 4
  }
  columns["afvals"] = {
    blocks: ["afval"],
    width: 6
  }
columns['top'] = {
  blocks:  [ buttons.page0, buttons.page1, buttons.page2, buttons.page3, buttons.page4, buttons.page5, buttons.page6, blocks.media, "clock2"],
  width: 12
}
columns['lamp1'] = {
	blocks:  [blocks.nintysix, blocks.seventeen, blocks.eightynine, blocks.twentyfour, blocks.twentythree],
	width: 12
  }
  columns['lamp2'] = {
	blocks:  [blocks.twenty, blocks.nintyfour, blocks.twohunderdeleven, blocks.onehundredandtwentytwo, blocks.onehundredandseventeen, blocks.fiftyfive], 
	width: 12
  }
  columns['lamp3'] = {
	blocks:  [blocks.eightteen, blocks.fiftysix],
	width: 12
  }
  
  // columns['lamp4'] = {
	// blocks:  [blocks.fiftyfive, blocks.twentythree],
	// width: 12
  // }
  columns['Temp1'] = {
  // blocks:  [blocks.fiftyone, blocks.fiftythree],
  blocks:  [blocks.woonkamer_thuis, blocks.kantoor_thuis],
  width: 3
  }
  columns['Temp2'] = {
    // blocks:  [blocks.fiftyone, blocks.fiftythree],
    blocks:  [blocks.bas_thuis, blocks.zolder_thuis],
    width: 3
    }
  columns['Temp3'] = {
	blocks:  [blocks.eighty],
	width: 12
  }
  columns['Media1'] = {
    blocks:  [frames.weather],
    width: 12
    }

//Add the menu column to your screens
var screens = {}        //This line only once!
screens[1] = {
  columns: ['top', "0", "1","trafficinfos", "2", "afvals",],
  background: "bgg.jpg"
}
screens[2] = {
  columns: ['top', "lamp1","lamp2","lamp3", "lamp4", "0", 3,4]
}
screens[3] = {
  columns: ['top']
}
screens[4] = {
  columns: ['top', "0", "Temp1", "Temp2", "Temp3", 5,6]
}
screens[5] = {
  columns: ["top"]
}
screens[6] = {
  columns: ["top"]
}
screens[7] = {
  columns: ["top"]
}
screens[8] = {
	columns: ['top', "0", "Media1", 7,8]
  }
 

Custom.css

Code: Select all

.button[data-id='lampen'] {
    object-position: center;
 height: 90px;
 align-items: center;
 align-self: center;

 }
 .button[data-id='ventilatie'] {
     object-position: center;
height: 90px;
align-items: center;
align-self: center;
word-wrap: break-word;
}
 .button[data-id='home'] {
    object-position: center;
 height: 90px;
 align-items: center;

 }
 .button[data-id='sensor'] {
    object-position: center;
height: 90px;
align-items: center;
text-align: center;
word-wrap: break-word;
}
 .button[data-id='temp'] {
    object-position: center;
 height: 90px;
 align-items: center;

}
.button[data-id='beveiliging'] {
    object-position: center;
  height: 90px;
  align-items: center;
  text-align: center;
  word-wrap: break-word;
 
 }
 .button[data-id='brandbeveiliging'] {
    object-position: center;
  height: 90px;
  align-items: center;
  text-align: center;
  word-wrap: break-word;
 
 }
/* .button[data-id='media'] {
 height: 90px;
 text-align: center;
  display: block;
 margin: auto;
 padding: 5px;
 object-fit: contain; 
} */
div[data-id='media'] img {
   display: block;
   margin: auto;
   padding: 5px;
   height: 90px;
   object-fit: contain;
}

[Lokonli]

If you add the block 'media' to a column via 'blocks.media' then the key is not defined, and the data-id='media' will not work.

You can add key:"media" to the block definition explicitly, or just add the block via string identifier "media" to a column, like:

Code: Select all

 blocks:  [ buttons.page0, buttons.page1, buttons.page2, buttons.page3, buttons.page4, buttons.page5, buttons.page6, "media", "clock2"],

Some more background info:
You can add blocks to a column in two ways:
1) inline block definition
2) string identifier

The buttons.page0 .. page6 blocks you have are inline block definitions.
"clock2" is a string identifier.

If you use a string identifier, then dashticz searches for blocks[string_identifier] for the block definition, and adds as parameter key: string_identifier to the block definition as well.

If you add a block via blocks.string_identifier, then Dashticz will add the block via the inline block definition method, but in that case the key parameter can not be added automatically.

So instead of the blocks['media'] block, you also could define your block with:

Code: Select all

buttons.page7 = { key: "media", width:1, btnimage: "img/radio.png", slide:8};

and add to a column via buttons.page7

Note that image parameter is relative to the ./img/ folder, while btnimage is relative to root ./