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

Lightning Dashboard Tile

From build 3044 the development baton passed to Mark Crossley. Mark has been responsible for all the Builds since. He has made the code available on GitHub. It is Mark's hope that others will join in this development, but at the very least he welcomes your ideas for future developments (see Cumulus MX Development suggestions).

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

Lightning Dashboard Tile

Post by stefanbagnato »

I am attempting to create a lightning tile for my dashboard. I am struggling with the format as the data is supplied via API.

Currently, the tile looks like:
Capture.PNG

However, I am trying/hoping to get the format closer to the other existing tiles. For instance, the Solar tile is next to it:
Capture1.PNG

The data is pulled via the lightning.json API found in the wiki.

Code: Select all

    var lightningTable = $('#LightningTable').DataTable({
        "paging": false,
        "searching": false,
        "info": false,
        "ordering": false,
        "columnDefs": [
            {"className": "left", "targets": [0,2]},
            {"className": "right", "targets": [1]}
        ],
        "ajax": '../api/extra/lightning.json'
    });
By default, this is thrown into a table, and the html to display it on the Extra Sensors page is:

Code: Select all

            <div class="col-md-4">
                <table id="LightningTable" style="width:100%">
                    <thead>
                        <tr>
                            <th>&nbsp;Lightning</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                </table>
            </div>

At the moment, the tile code is (literally just the building blocks of the other tiles with the extra sensors html in it):

Code: Select all

				<div class="lighttile">
					<div class="dash-unit">
						<span class="dtitle">Lightning</span>
						<hr>
						<br>
						<div class="cont">
							<div class="cont">
                <table id="LightningTable" style="width:100%">
                    <thead>
                        <tr>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                </table>
							</div>
						</div>
					</div>
				</div>	

I attempted to adjust the API from http://localhost:8998/api/extra/lightning.json, which outputs {"data":[["Distance to last strike","10.6","miles"],["Time of last strike","10/11/2021 8:49:39 AM",""],["Number of strikes today","2",""]]}

to http://localhost:8998/api/tags/process. ... rikesToday, (using WebTags) which outputs {"LightningDistance":"10.6","LightningTime":"8:49 AM","LightningStrikesToday":"2"}

I threw this in a new json file, updated a "working" version of extrasensors.js (this "working" version is called in my test dashboard html, along with the "normal" version), but it did not work for me.

I made a similar dashboard tile for my Airlink data, and that came out fairly well as the table which that API inserts data into is formatted well. This is all getting to the edge of my abilities, thus I am kind of out of ideas on how to get this to work. I know it could all be rewritten into PHP, and I know I could adopt the "that's not what the dashboard is for, use the website" mantra as well. But, I want to try and get this working and "cleaned up", and I also believe there has to be at least one other user out there who wants to tinker around with the dashboard layout a bit and get other tiles such as lightning.

As always, let me know if you have any suggestions to help.
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: Lightning Dashboard Tile

Post by stefanbagnato »

To restart this thread, last night I started looking back into this tile. What I am trying to do is remove all of the extra descriptive text (see OP screenshot). For instance, instead of it saying "Time of last strike" I might change it to just say "Time". However, I cannot for the life of me determine WHERE this text is coming from.

The API call is http://localhost:8998:/api/records/extra/lightning.json. It produces:

{
"data": [
["Distance to last strike", "0.0", "miles"],
["Time of last strike", "01/01/0001 00:00:00", ""],
["Number of strikes today", "0", ""]
]
}

I cannot find where this json file is actually located. I know it is not in the local installation package. I cloned the entire GitHub repo and started to dig through the code. I've found a lot of useful tidbits in there, but still nothing pointing me to the actual spot where this file is located.

My hope is to make a much cleaner Lightning tile, and then I'd be glad to share it with whoever wants it. I also plan to work on an Air Quality one, but first things first.
freddie
Posts: 2433
Joined: Wed 08 Jun 2011 11:19 am
Weather Station: Davis Vantage Pro 2 + Ecowitt
Operating System: GNU/Linux Ubuntu 22.04 LXC
Location: Alcaston, Shropshire, UK
Contact:

Re: Lightning Dashboard Tile

Post by freddie »

The json doesn't come from a json file - it is generated on the fly. The static text you mention is in the file WeatherStation.cs (approx. line 9785), available from GitHub.
Freddie
Image
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: Lightning Dashboard Tile

Post by stefanbagnato »

Ah understood. That makes sense now. And I do see that text around 9848, currently. Part of me says I could just change it to meet my needs, recompile, and go from there, but then I'd be shooting myself in the foot anytime Mark makes changes. I'll try to think of a different way to extract the actual values (distance, time, and count) from what the call returns. Right now, my tile is more-or-less a reformatted version of the Extra Sensors lightning table. But again the goal is to attempt to bring the formatting more in line with the rest of the dashboard tiles.
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: Lightning Dashboard Tile

Post by stefanbagnato »

Do we know how exactly DataTables is integrated with CMX? For instance, I've toyed around with adjusting the Lightning parameters in WeatherStation.cs, but if I attempt to remove the third column for the lightning.json call (where it provides "miles" for the strike distance value"), the UI freaks out throwing a DataTables error. I toyed around with different Python scripts to pull the lightning data value individually (instead of using the built in API in CMX) but then I would run into the issue of inserting them into the dashboard since it's built with html and not php.

Looking at index.html, I see the datatables.min.js file is used, but no other files from the Datatables directory in CMX are. Removing it from the html breaks the lightning tile, so clearly it needs to be there. However, the basic 'source' of that tile is just the html from the Extra page, namely table id="LightningTable". But, where exactly IS this value specified? I have yet to find it in any file in any folder in the entire CMX directory, and it's not in any of the source code.

I know this is a super first-world issue, but I really do hope to be able to create some new/extra tiles, including ones based of data supplied by API calls, but there really is no easy and clean way to do this unless I can trace the source of every attribute/value.
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: Lightning Dashboard Tile

Post by mcrossley »

stefanbagnato wrote: Mon 17 Jan 2022 9:20 pm However, the basic 'source' of that tile is just the html from the Extra page, namely table id="LightningTable". But, where exactly IS this value specified? I have yet to find it in any file in any folder in the entire CMX directory, and it's not in any of the source code.
Where is what defined?

DataTables just loads the JSON data supplied into the nominated table.

If you want to manipulate it then I think you will have to either add an OnDraw event handler to that table and change the table contents on every draw.
Or remove the DataTable handing for that table completely, fetch the JSON using Ajax, change the data as you wish, then load it into the table.
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: Lightning Dashboard Tile

Post by stefanbagnato »

Code: Select all

 <!-- LIGHTNING BLOCK-->
            <div class="col-md-4">
                <table id="LightningTable" style="width:100%">
                    <thead>
                        <tr>
                            <th>&nbsp;Lightning</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                </table>
            </div>
Mark, was trying to determine where

Code: Select all

 <table id="LightningTable" style="width:100%"> 
was defined. Before I really started to dig deep through CMX, I figured that just referenced some CSS location, which I now know is not true.

Regardless, I may use your second suggestion and remove DataTables altogether, at least for the dashboard (I rarely view any other page besides the dashboard, but why break them if they aren't broken?). I know this would also force me to rewrite/manipulate my AIrlink tile as well (which btw is much much cleaner from the start, but stil needs some tweaking), but that's okay.
Post Reply