TileBoard - New dashboard for Homeassistant

This is because the value is not being set properly via value attribute. value: '@attributes.current_position should work just fine.

Get multitudes of errors.

1: Where to put the function, inside or outside var CONFIG ? (slightly more adept in java than javascript, so somehow outside seems more correct?) If I put it inside I get errors like this:


var CONFIG = {
   function loadScript(url) {  ':' expected 
      var req = new XMLHttpRequest();  ':' expected
      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);
    } Declaration or statement expected
      
    
    //loadScript('includes/tiles.js');
    loadScript('/includes/binary_sensor.js');

If I put the function ourside the var CONFIG it will look like:

function loadScript(url) {  ':' expected 
    var req = new XMLHttpRequest();  ':' expected
    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);
    } 

var CONFIG = {    
    //loadScript('includes/tiles.js');
    loadScript('/includes/binary_sensor.js'); Identitifer expected

I do have @attributes.current_position in value:, from the previous post:

                  {
                     position: [1, 0],
                     width: 2,
                     type: TYPES.SLIDER,
                     //id: "input_number.volume",
                     id: 'cover.tapparella_salotto_destra', // replace it with real string id
                     title: ' ',
                     state: false,
                     unit: '%',
                     value: '@attributes.current_position',
                     slider: {
                        max: 100,
                        min: 0,
                        step: 5,
                        field: 'position',
                        request: {
                           type: "call_service",
                           domain: "cover",
                           service: "set_cover_position",
                           field: "position"
                        }
                     }
                  },

No, what I posted above should be the only contents of config.js.

You load your sensor.js variables via loadScript(’/includes/binary_sensor.js’); and than define CONFIG in a separate file.

ah, think i understand, will return otherwise :slight_smile:

but something like:
config.js

function loadScript(url){
,
,
}
   loadScript('includes/config2.js');
   loadScript('includes/tiles.js');

and then:
config2.js

var CONFIG = {
,
,
      items: [
              input_boolean_radio(2, 3)
             ,
]


}

I worked out the following :slight_smile:

I have added a helper function and my own config is muck cleaner now:

function $$(tileObject, merge) {
   if(merge instanceof Array) {
      merge = {position: merge};
   }

   var copy = mergeObjects({}, tileObject);

   return mergeObjects(copy, merge);
}

var CONFIG = (function () {
  CONF.pages = [
      {
         title: 'Main',
         bg: 'images/bg2.png',
         icon: 'mdi-home-outline',
         tileSize: 140,
         groups: [
            {
               title: 'Summary',
               width: 3,
               height: 3,
               items: [
                   $$(TILES.DEVICE_TRACKER2, [1, 0]),
                   $$(TILES.DEVICE_TRACKER3, [2, 0]),
                   $$(TILES.WEATHER_LIST, [0, 1]),
                   $$(TILES.WEATHER_TODAY, [2, 1]),
               ]
            },
            ...
         ]
      },
  return CONF;
}());

edit: had to re-download everything and now it seems like it works, will try to add your helper as well.

so will start writing on the wiki when I’ve fixed it all…

is this a totally different way of doing it?

Would you mind sharing your full config?

Trust me, whenever I get tis working, I will rewrite the wiki-part :wink:

Just checking out the HISTORY tiles - amazing job! Just one question: is there a way to reduce the frequency of the datapoints displayed? It makes the page very heavy to load sometimes.

It is based of standard Chat.JS library and you can supply your own config. To be honest I have not played around with charts myself at all.

https://www.chartjs.org/docs/latest/configuration/

1 Like

Found this post and got it to work, although with the function in the config as well. So not with a separate config with just the function and calls to it.

Although not as easy as the solution I had, it’s at least a solution. But I think the new structure does’nt make that possible? Not quite sure how it compare to yours. There is more than one way to skin a cat, in programming its more than one way + 1…

My old setup have several config.js, each with their own custom.css, is it possible to link them as well, or do Ihav to merge them into one?

Thanks for the help

I am struggling with the chart too.

I really want to change the line colour but I can’t find a way. I am sure it is really simple but it is eluding me.

I used to be able to do it with the old file structure but the new one I am finding hard.

Please drop me a line on alexey(AT)reso.od.ua and I’ll send you my full config.

Wow, it does look really nice. I was always surprised what people end up doing with TileBoard while I still have one of the most basic layout with 3 pages :slight_smile:

1 Like

Hi all, I am trying to populate a text_list from a file written by a python script extracting the next 10 events from my google calendar.
here is the code for the tile:

                  { // tile 2
                     position: [0, 0.5],
                     width: 2.5,
                     height: 2,
                     title: 'Impegni famiglia',
                     type: TYPES.TEXT_LIST,
                     state: false,
                     id: {}, // using empty object for an unknown id
                     list: (
                        
                        function(item, entity) {
                           var fs=require('fs');
                           var data=fs.readFileSync('/config/appdaemon/apps/cal_events_list.json', 'utf8');
                           if (err) {
                              return '[{"err file"}]' ;}
                           else {
                              return data;
                           }
                        } 
                        //[ { "title": "26/01/2021" }, { "icon": "mdi-swim", "value": "19:40-21:45: JP & JC1 training" }, { "title": "27/01/2021" }, { "icon": "mdi-swim", "value": "18:50-20:30: County & JC2 training" }, { "icon": "mdi-swim", "value": "19:35-21:45: JP & JC1 training" }, { "title": "29/01/2021" }, { "icon": "mdi-swim", "value": "18:50-21:00: JP & JC1 training" }, { "title": "30/01/2021" }, { "icon": "mdi-football", "value": "09:00-11:00: League Game" }, { "icon": "mdi-swim", "value": "17:20-19:00: County & JC2 training" }, { "title": "31/01/2021" }, { "icon": "mdi-swim", "value": "16:05-17:45: County training" }, { "title": "01/02/2021" }, { "icon": "mdi-message-text-outline", "value": "16:00-17:00: Leonardo EHCP review" }, { "icon": "mdi-swim", "value": "18:20-20:00: County & JC2 training" }, { "title": "02/02/2021" }, { "icon": "mdi-football", "value": "18:55-20:00: Training" } ]

the list does not show up…

if I paste the file content directly:

[ { "title": "26/01/2021" }, { "icon": "mdi-swim", "value": "19:40-21:45: JP & JC1 training" }, { "title": "27/01/2021" }, { "icon": "mdi-swim", "value": "18:50-20:30: County & JC2 training" }, { "icon": "mdi-swim", "value": "19:35-21:45: JP & JC1 training" }, { "title": "29/01/2021" }, { "icon": "mdi-swim", "value": "18:50-21:00: JP & JC1 training" }, { "title": "30/01/2021" }, { "icon": "mdi-football", "value": "09:00-11:00: League Game" }, { "icon": "mdi-swim", "value": "17:20-19:00: County & JC2 training" }, { "title": "31/01/2021" }, { "icon": "mdi-swim", "value": "16:05-17:45: County training" } ]

it works

What am I doping wrong?

Thank you for your work on tileboard and your appreciation.
I hope i will have more sensors to full all pages and get the best from tileboard.

You are assuming TileBoard’s JS is executing on the server side rather than in your browser.

Good afternoon, I’m try to call home assistant service from the dashboard but I don’t know how to call it. I have add this to my config.js but it didn’t works

                  {
                     position: [0, 1],
                     type: TYPES.CUSTOM,
                     title: 'Test',
                     id: 'sensor.temperatura_camera',
                     icon: 'mdi-monitor',                    
                     action: function callService (item, domain, service, data, callback) {                 
                        Api.callService('climate', 'set_temperature', 
                        {
                           "entity_id": "climate.termostato_camera",
                           "temperature": 25,
                           "target_temp_high": 26,
                           "target_temp_low": 20,
                           "hvac_mode": "heat"
                         }, function (res) {

                           item.loading = false;               
                  
                           if (callback) {
                              callback(res);
                           }
                        })
                     },                   
                  },

Thanks for your help

Thank you Alexey, I am learning…
That means I have to get the json with something like:


var data = $.getJSON('cal_events_list.json');

I’ve tried this but it seems not to be working either…

I’m afraid $.getJSON() is a function of JQuery which is not something we use for TB. You could do it with XMLHttpRequest like so:

var url = '/local/yourdatadir/cal_events_list.json';
var req = new XMLHttpRequest();
req.open('GET', url, true);
req.onreadystatechange = function() {
  if (req.readyState === 4) {
    var res = JSON.parse(req.responseText);
  }
};
req.send(null);

res shall contain data you need.