Welcome to the Cumulus Support forum.

Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024

Cumulus MX V4 beta test release 4.0.0 (build 4017) - 17 March 2024

Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014 (a patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)

Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki

Custom Tiles

Share your Cumulus MX user interface here

Moderator: mcrossley

Post Reply
stefanbagnato
Posts: 159
Joined: Sun 08 May 2016 9:11 pm
Weather Station: Vantage Pro 2
Operating System: Windows Server 2019
Location: Raleigh, NC

Custom Tiles

Post by stefanbagnato »

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...
air.PNG
lightning.PNG
You do not have the required permissions to view the files attached to this post.
stefanbagnato
Posts: 159
Joined: Sun 08 May 2016 9:11 pm
Weather Station: Vantage Pro 2
Operating System: Windows Server 2019
Location: Raleigh, NC

Re: Custom Tiles

Post by stefanbagnato »

Any ideas on this one? Now that I actually have the Ecowitt and Airlink sensors set up, I'd love to try and get these tiles working.
User avatar
mcrossley
Posts: 12689
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Custom Tiles

Post by mcrossley »

The data is extracted from API calls...

/api/extra/lightning.json

/api/extra/airLinkCountsOut.json
/api/extra/airLinkAqiOut.json

And the corresponding "In" calls.
stefanbagnato
Posts: 159
Joined: Sun 08 May 2016 9:11 pm
Weather Station: Vantage Pro 2
Operating System: Windows Server 2019
Location: Raleigh, NC

Re: Custom Tiles

Post by stefanbagnato »

Mark, makes sense. I guess I am just trying to find where those calls are. Unless I am blind, I don't see any local folder for them. Is that all server-side on your end?
User avatar
mcrossley
Posts: 12689
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Custom Tiles

Post by mcrossley »

The calls are in JavaScript, all API responses are generated when requested they are not stored anywhere.
stefanbagnato
Posts: 159
Joined: Sun 08 May 2016 9:11 pm
Weather Station: Vantage Pro 2
Operating System: Windows Server 2019
Location: Raleigh, NC

Re: Custom Tiles

Post by stefanbagnato »

Okay, thank you. I'll continue to dig and better understand it all. My hope is to create these tiles (and the new dashboard altogether) then share it if anybody else wants it.
Post Reply