Custom Tiles
Posted: Wed 01 Sep 2021 12:24 am
I just purchased an Airlink air quality sensor and Ecowitt lightning sensor. I've made many customizations to my CMX dashboard, but I would now like to add tiles for those sensors. I created the basic tile outline, but I found out it's not going to be that easy to create the full tile.
Starting with Airlink, I pulled up airlink.html. Focusing in on outdoor particle counts, my idea was to take the 1 minute counts for each particulate size and throw them in my tile. However, my tiles are formatted the same as all the stock tiles on the dashboard, whereas this airlink.html page has the data in a table. Looking at the 1 micrometer table, I see <span id="pm1_out">-</span>. Referencing the scripts in the file head, the only "new" script to this page is js/airlink.js. However, it is clear that there is nothing to edit/pull from this page. It's an API call "somewhere else". I do see url: "api/settings/version.json", but I don't actually know where that is located. If I look at airlink.html in a browser and pull up developer settings, I can see the table values being refreshed, so it's obviously a live feed.
Moving to lightning which is on extra.html, it was kind of the same result. I found the html for the lightning table but it is mostly blank. However, if I look at the page via dev settings, I can see it dynamically updating. In the table, I see <table id="LightningTable" style="width:100%">, but I don't know where this table is defined. In the head, I see another new script, js/extrasensors.js. But the result is literally the same as above; it pulls from some location I cannot track down.
Now, as a test, I inserted the entire lightning table from extra.html into my dashboard lightning block code, but I could never get the formatting remotely close; I would guess because of the formatting of that table id.
So, I am left at, what do I do from here? Has anybody created blocks like this? Does anybody have more background knowledge into how those js files work and where those API feeds (assuming I am correct as to what they are) are going? I know my way around html and css very well, and can fumble around the rest of the file types to "figure it out". I just need some assistance at getting started.
FYI I'd be glad to share the code of my current dashboard layout (and even the new one once it is figured out).
FYI #2 here are screenshots of what I'd like the tiles to look like (format-wise) once I can get the data to input...
Starting with Airlink, I pulled up airlink.html. Focusing in on outdoor particle counts, my idea was to take the 1 minute counts for each particulate size and throw them in my tile. However, my tiles are formatted the same as all the stock tiles on the dashboard, whereas this airlink.html page has the data in a table. Looking at the 1 micrometer table, I see <span id="pm1_out">-</span>. Referencing the scripts in the file head, the only "new" script to this page is js/airlink.js. However, it is clear that there is nothing to edit/pull from this page. It's an API call "somewhere else". I do see url: "api/settings/version.json", but I don't actually know where that is located. If I look at airlink.html in a browser and pull up developer settings, I can see the table values being refreshed, so it's obviously a live feed.
Moving to lightning which is on extra.html, it was kind of the same result. I found the html for the lightning table but it is mostly blank. However, if I look at the page via dev settings, I can see it dynamically updating. In the table, I see <table id="LightningTable" style="width:100%">, but I don't know where this table is defined. In the head, I see another new script, js/extrasensors.js. But the result is literally the same as above; it pulls from some location I cannot track down.
Now, as a test, I inserted the entire lightning table from extra.html into my dashboard lightning block code, but I could never get the formatting remotely close; I would guess because of the formatting of that table id.
So, I am left at, what do I do from here? Has anybody created blocks like this? Does anybody have more background knowledge into how those js files work and where those API feeds (assuming I am correct as to what they are) are going? I know my way around html and css very well, and can fumble around the rest of the file types to "figure it out". I just need some assistance at getting started.
FYI I'd be glad to share the code of my current dashboard layout (and even the new one once it is figured out).
FYI #2 here are screenshots of what I'd like the tiles to look like (format-wise) once I can get the data to input...