Would love to see the code for this!
I would like to see the changes that you made for this too.
https://github.com/cgarwood/tileboard has the backend/core changes to support footers (basically the same code as headers) as well as modal dialogs (derived from the door_entry popup).
Here’s a gist with the alert-specific code. Now that it’s written I want to go through and refactor/clean it up a bit:
I think I’m going to make some more backend adjustments so I can clean it up more. Maybe add a new “ticker” header item type so I can just pass it an array of objects and have it loop through them. That would give me some nicer animation capabilities too.
2 Likes
Good stuff right here! I’ve sort of put TileBoard on the backburner while I’ve been working on my mobile Lovelace config, but definitely making a note of this work when I get back around to tweaking my TileBoard setup.
I just started using Tileboard and am working on a tablet interface for my hassio. I am interested in creating some small button tiles that are a fraction of the size of the ‘standard’ tiles. What is the preferred method for customizing a given tiles size? Should I set the default tile size to something very small and then scale up all of the other tiles?
I create “mini” tiles by setting the width/height to 0.5 and then add a mini class to them. I then put the following in my custom.css file to adjust icon/text sizes.
/* Mini Tiles */
.mini .item-entity--icon {
font-size: 32px;
}
.mini .item-title {
font-size: 12px;
}
I would love to see the rest of of your tileboard tabs.
These are a little outdated (and only 2 of the 4 rooms), but here’s some pics/screenshots:
https://imgur.com/a/xstuSox
2 Likes
Thanks @cgarwood. Seeing what other people have done always gives me ideas. I like the use of the mini tiles, I can make use of that in a couple of places to save some screen real estate.
Thank you. I’m a total newbie to js and classes and am having trouble applying the mini class. Is there any chance you could post an example of mini tile code from your config? I appreciate any help you can give me.
Anyone know how to get config.js to call functions from external javascript files?
Ex.
CUSTOM.JS
-------------
function MY_CUSTOM_FUNCTION() {
return '123-456-7890';
}
CONFIG.JS
-------------
{
position: [0, 0],
type: TYPES.DEVICE_TRACKER,
id: 'device_tracker.google_maps_9000',
title: MY_CUSTOM_FUNCTION(),
}
I want to return sensitive data (ex. phone numbers) through an external javascript file that I would exclude from Github.
Thanks
Not a function but here is an example of using additional configuration in a separate file.
/includes/secrets.js:
var CONFIG_SECRETS = {
someSecretThing: "aSecretValue"
}
at top of config.js
function loadScript(url) {
var req = new XMLHttpRequest();
req.open('GET', url + '?cache=' + Math.random(), false);
req.onreadystatechange = function(){
if (req.readyState === 4) {
var s = document.createElement('script');
s.appendChild(document.createTextNode(req.responseText));
document.head.appendChild(s);
}
};
req.send(null);
}
loadScript( "includes/config/secrets.js" );
inside the CONFIG declaration in config.js:
title: CONFIG_SECRETS.someSecretThing,
1 Like
OMG - Thanks a million! I spent all day yesterday trying to get this to work.
I’m trying to add the slider controls for the cover allowing setting the opening value.
Basicly I want to control my dafang camera.
In lovelace I can see basic control like this:
but following configuration does nothing and not recognizing even the current position (showing as “open”):
{
position: [0, 0],
id: 'cover.dafang_move_leftright',
type: TYPES.SLIDER,
state: false,
bottom: true, // puts slider on bottom
slider: {
//max: 100,
//min: 0,
//step: 2,
request: {
type: "call_service",
domain: "cover",
service: "set_cover_position",
field: "value"
}
}
},
Does anybody knows how it can be implemented?
Thanks!
I figured out how to control the cover position with the slider and how to get the value displayed, the only issue remained is to show correct position with the slider.
{
position: [0, 0],
id: 'cover.dafang_move_leftright',
title: false,
subtitle: false,
type: TYPES.SLIDER,
//unit '%',
state: false,
field: 'position',
bottom: true, // puts slider on bottom,
value: '&cover.dafang_move_leftright.attributes.current_position',
slider: {
max: 100,
min: 0,
step: 2,
title: "Position",
field: "position",
value: '&cover.dafang_move_leftright.attributes.current_position',
request: {
type: "call_service",
domain: "cover",
service: "set_cover_position",
field: "position"
}
}
},
When I manually set slider value to some integer like 22, it show the slider in correct position, but when I put the actual value value: '&cover.dafang_move_leftright.attributes.current_position', it show the slider position like the value is 50:
Tried to parse the value with parseInt, Number - nothing.
Tried to make the value as function - > also whatever I return it always shows as 50, even this one:
value: function() {
return 10;
},
Can you suggest what else to try?
Thanks!
2 Likes
ok, found what was the issue, all “fields” should be “current_possition”.
Now works as expected.
2 Likes
Congratulation for this awesome project.
I have been using this for the last days, and I’m trying to change the names of the operation_mode in climate, is it possible?
The names are in english and all lowercase, I want to translate to my country language, is it possible?
This is the list which your climate component in HA is providing via the API and what it expects as a set value.
1 Like
Yes, I know. But in HA it converts this values to readable in my country language, but in Tileboard is showing without translate. If it were possible to make a list to translate every item, it would fix my problem.
Anyone using a photo gallery with tileboard (ex. to show security camera images for the day)? If so, how are you doing it?