Yeah. It works nicely. In my set up I need to include
background-position: center; background-size: cover; if I want to keep the detail and avoid excessive zooming of the background image.
Thanx man.
1 Like
- How to make the left side menu thinner?
- Would it be possible to add tile for the total energy distribution?
For me it was the following in custom-css:
.item.-unavailable .item-entity--icon{opacity:.65}
Played two days around with TileBoard to get a good desktop solution that goes along well with my Mobile-UI-Version. Quite loving it so far. Feedback is much appreciated.
1 Like
I tried adding this to my custom.css and removed background img in the config
body {
background-image: url('../images/bg2.jpg') !important;
background-position: center;
background-size: cover;
}
But all I get now is a white background? Did you do something else to get it to work?
No, it should work. Play around with position and size. If that doesn’t work check your config again for lines starting with “bg:” and comment them out.
Strange. Checked every bg. They’re commented out.
This is what my css looks like:
.-theme-homekit .item .item-entity--icon{color:#f4c876}
body {
background-image: url("../images/bg2.jpg");
background-position: center;
background-size: cover;
}
Does the first line I had in there before screw things up?
I don’t think so but put body at the top anyway.
Maybe the image is .png not .jpg?
Put body on top. Still no luck.
It’s jpg. Also tried with some of the included backgrounds, still no luck. It just looks like this:
I commented out bg like this:
title: 'Main page',
//bg: 'images/bg2.jpg',
icon: 'mdi-robot-vacuum-variant', // home icon
groups: [
I’ve been working on configuring a TileBoard dashboard to run on an old FireHD 8 I’ve had laying around collecting dust. I’m utilizing FullyKiosk. I like TileBoard because it allows for an awesome amount of customization even though my device is maxed out on Android Webview Ver 59.
I’ve run into my first strange issue that I think is related to the old version of Webview OR maybe something strange with FullyKiosk.
I have a page that’s configured with four different Media Player cards controlling different Amazon Echo’s throughout the house. Those cards work just fine; however, when I navigate off the page and back, it drops the volume to 0 (mute) or max volume. This seems to depend on the previous volume. It rounds up or down.
I don’t experience this behavior when I do the same thing from a modern browser on my laptop.
I’ve messed with FullyKiosk settings, but can’t find anything that might cause this.
Anyone else running TileBoard in FullyKiosk on an old tablet? Have you encountered this? Any workarounds?
Inspired by similar adaptations by @Themsk, I am in the process of building a customized thermostat control tile. Everything works - but I have a strange behaviour in the display of the gauge: As soon as I change the temperature, the gauge line jumps to the wrong values. As soon as I reload the page, the gauge shows the correct value again. If I understand the Angular Gauge documentation correctly, dynamically changing values should be displayed without any problems. So where is my error? Thanks for any help!
3 Likes
see if some parts of this code will help:
this is located in config.js file, under the tile u use the gauge
thresholds: function(item, entity) {
var value1 = null;
value1 = this.states['input_number.living_target_temp_2'].state
if (item.old_val1 !== value1) {
thresholds1 = get_colors(value1, this.parseFieldValue("&input_select.sezon.state"));
item.old_val1 = value1
}
return thresholds1
}
this one i use in a custom js file because i use many gauges with same part but you can intergrate in the code above
function get_colors(value, sezon) {
var marja;
if (sezon == 'cald') marja = 1;
else marja = 0;
value = Number(value);
return {
[value - (10 + marja)]: {
color: "magenta"
},
[value - (7 + marja)]: {
color: "purple"
},
[value - (5 + marja)]: {
color: "#357d87"
},
[value - (3 + marja)]: {
color: "#00cc99"
},
[value - (1 + marja)]: {
color: "green"
},
[value + (1 + marja)]: {
color: "yellowgreen"
},
[value + (2 + marja)]: {
color: "yellow"
},
[value + (3 + marja)]: {
color: "orange"
},
[value + (5 + marja)]: {
color: "red"
},
[value + (7 + marja)]: {
color: "firebrick"
},
[value + (10 + marja)]: {
color: "maroon"
}
}
}
ignore the value+(4 + marja) and replace with your own value eg. 50 or 40 or wahtever you need
if you have more gauges on that page, change the thresholds1 name with thresholds2 and 3 and so on…
Is it possible to shift the entire page to the left? I only have 1 page, therefore I do not have any need to scroll through the pages, nor use the icon which is usually located on the left to jump to a page. So ideally I’d like to move my page to take advantage of the empty padding on the left. Hopefully my image below will help explain my ask.
I figured out that I can shift the header text to the left by changing the value in this section from 130px to 0px (as shown in the image below, section A):
styles: {
margin: '30px 130px 0',
fontSize: '28px'
},
left: [
{
type: HEADER_ITEMS.DATETIME,
dateFormat: 'EEEE, dd LLLL',
},
]
}
But the rest of the page (body) is still about 130px from the left (section B)
Any ideas?
Try this in your custom.css
.page-align {margin-left: 0px;}
.pages-menu.-left {width: 0px;}Thank you for your response. However I discovered that I can move the position of the “menu” (even though it was empty and transparent). I moved it to the bottom:
menuPosition: MENU_POSITIONS.BOTTOM
and this allowed for the page to nudge across to the far left.
Thank you for your support. I understand that your code is for dynamically coloring the thresholds.
However, my problem seems to be with the “Value” of the Gauge itself, right?
Currently I am outputting the “temperature” attribute of the climate entity there. Basically, that seems to work. But what would have to be different here so that changing the value doesn’t make the gauge line jump like crazy?
{
position: [0, 0],
width: 1.5,
height: 1.5,
title: '',
subtitle: '',
state: false,
type: TYPES.GAUGE,
classes: ["-heating"],
id: 'climate.tado_thermostat_wohnzimmer',
value: function(item, entity){
return entity.attributes.temperature
},
settings: {
size: 200,
type: 'arch',
min: 7,
max: 30,
cap: 'butt',
thick: 5,
label: '',
append: function(){
if (this.states['climate.tado_thermostat_wohnzimmer'].state === 'off') {
return '';
}
else {
return '°C';
}
},
prepend: '',
duration: 1000,
thresholds: {0: { color: '#8FA0A1'} },
labelOnly: false,
foregroundColor: 'rgba(0, 150, 136, 1)',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
fractionSize: 1,
},
},
I think I may have found the problem to my volume slider issue. The use of Nullish coalescing operators (??) in the initSliderConf function (line 883 of main.js) may cause sliders to fail in older browsers or old versions of Webview like mine.
This has been a great project for me to learn some JavaScript and CSS. I’ll work on a ‘fix’ myself. If anyone wants to implement an alternative to ?? in the project before I finish, I’d be much obliged. I opened an issue to track and work off of here:
I dont think there is any problem with the gauge but with the values you give to gauge.
Verify when load the page what value you have (show the number somewhere, on a different tile) and what value is next when you hit the arrows. I think the values ar jumping wrong.
I had the same problem. It’s a bug in ng-gauge, not in Tileboard. It only manifests itself when changing the value while the min setting is not 0. The animation displacement of the gauge is then incorrectly calculated, making the gauge jump around like crazy when the value is changed (but not when it is recreated by a page reload).
If you don’t want to mess with the ng-gauge source like explained below, you can alternatively just set min to 0.
But if you want to fix this so that the min setting works correctly, you’ll need to link to your own local version of angularjs-gauge.js. Here’s the relevant source in the repo:
https://github.com/ashish-chopra/angular-gauge/blob/595d5ea18857adaf59f184d2134989289a214009/src/angularjs-gauge.js
Change the following two lines to fix the bug.
Line 134, from
displacement = unit * nv - unit * ov;
to
displacement = unit * (nv - min) - unit * (ov - min);
And line 141, from
var previousProgress = ov ? (ov * unit) : 0;
To:
var previousProgress = ov ? ((ov - min) * unit) : 0;
Ideally this should be fixed upstream of course.
Hoping someone can help. I’m using a TEXT_LIST to display a list of London tube lines and their current state. Is it possible in a TEXT_LIST to change the colour of the state depending on the value - so for example, if it’s ‘Delayed’ have the text colour change to red?