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 4018) - 28 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

Annual data Summary (DAJ script) - show day-of-week

Other discussion about creating web sites for Cumulus that doesn't have a specific subforum

Moderator: daj

User avatar
mikechristelow
Posts: 165
Joined: Wed 01 Feb 2012 9:33 pm
Weather Station: Watson W8681 (solar)
Operating System: Windows XP SP3
Location: Crewe, Cheshire
Contact:

Annual data Summary (DAJ script) - show day-of-week

Post by mikechristelow »

Hi,
I have enough understanding of David's readdayfile.js and datasummary .css to have been able to create my own implementation of the Annual Data Summary tables with coloured backgrounds to suit my purposes.

My understanding is rudimentary however :lol: .

What I'd like to be able to do is show what day of the week it is for a highlighted value in the table. So in the the snip below, I have highlighted the value for February 3 2013 and would like the element in the left column of the table to read "Sun 3" as February 3rd 2013 was a Sunday.

Has anyone done this or got any pointers? ;)
You do not have the required permissions to view the files attached to this post.
http://www.christelow.co.uk
“It's snowing still," said Eeyore gloomily.
"So it is."
"And freezing."
"Is it?"
"Yes," said Eeyore. "However," he said, brightening up a little, "we haven't had an earthquake lately.”

User avatar
beteljuice
Posts: 3292
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: Annual data Summary (DAJ script) - show day-of-week

Post by beteljuice »

... would like the element in the left column of the table to read "Sun 3" as February 3rd 2013 was a Sunday.
False logic ! - although you may be able to do it as a 'mouseover'.

The left col (day) is eg. 1st for ALL months, which will NOT be the same day of the week ;)
Image
......................Imagine, what you will KNOW tomorrow !
User avatar
mikechristelow
Posts: 165
Joined: Wed 01 Feb 2012 9:33 pm
Weather Station: Watson W8681 (solar)
Operating System: Windows XP SP3
Location: Crewe, Cheshire
Contact:

Re: Annual data Summary (DAJ script) - show day-of-week

Post by mikechristelow »

Hi Beteljus,

I appreciate fully that the left-hand column applies to all months - hence my query! :lol:

I'd like the highlighted element of the column to show the day of week alongside the day of the month, when a value in the table is highlighted.

I realise this may be complicated, all I'm after is some pointers which might help me work out how to do it (or will confirm my suspicion that its beyond my humble abilities!) :oops:
http://www.christelow.co.uk
“It's snowing still," said Eeyore gloomily.
"So it is."
"And freezing."
"Is it?"
"Yes," said Eeyore. "However," he said, brightening up a little, "we haven't had an earthquake lately.”

User avatar
rogerthn
Posts: 489
Joined: Thu 11 Apr 2013 6:31 pm
Weather Station: Ecowitt GW1000/GW1003
Operating System: Raspberry Pi OS bullseye aarch64
Location: Trollhättan Sweden
Contact:

Re: Annual data Summary (DAJ script) - show day-of-week

Post by rogerthn »

Image
User avatar
beteljuice
Posts: 3292
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: Annual data Summary (DAJ script) - show day-of-week

Post by beteljuice »

err ......... that's PHP

The beteljuice is crap not very good with JSON / Jquery syntax, but as I see it:

You need to declare var names for the days of the week.
You need a date object to manipulate (to get the weekday number)
The part of the code that creates the table cell with the date needs to be populated with upto 12 <span>s which each have a unique id containing the 'name' of the day of the week. (and are normally hidden)
The 'datacells' need to have a new attribute which relates to the new <span>s ids so that a modified 'datacell hover' construct can 'address' them and show / hide the required <span>.

I'll think about it ..............
Image
......................Imagine, what you will KNOW tomorrow !
User avatar
mcrossley
Posts: 12694
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Annual data Summary (DAJ script) - show day-of-week

Post by mcrossley »

Column and row give you the month and day, you already know the year, so easy enough to do client side, but you could embed it in the PHP generation code. I guess one advantage of client side is that you can do it in users current locale format.
User avatar
beteljuice
Posts: 3292
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: Annual data Summary (DAJ script) - show day-of-week

Post by beteljuice »

Hmm ... I think I've got what you want ...

beteljuice test

In fact there's enough room so that it could read eg. Tue Oct 3, that way you only have to cast your eyes to one side and not up as well. (Edit: No there isn't, eg. Wed Dec 12 will cause the cell to wrap on mouseover !)

Sometimes the beteljuice surprises himself :shock:
Last edited by beteljuice on Mon 30 Dec 2013 12:27 pm, edited 2 times in total.
Image
......................Imagine, what you will KNOW tomorrow !
User avatar
mcrossley
Posts: 12694
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Annual data Summary (DAJ script) - show day-of-week

Post by mcrossley »

Nicely done.

Or maybe like this?

Code: Select all

code removed, see link below for updated version.
Last edited by mcrossley on Mon 30 Dec 2013 6:30 pm, edited 1 time in total.
User avatar
beteljuice
Posts: 3292
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: Annual data Summary (DAJ script) - show day-of-week

Post by beteljuice »

Tsk Mark - Most unlike you ...

You constructed the id the datacell.hover instead but forgot to remove the 'redundant' dataday construct in the part2+= :P

I tried fitting in Wed Dec 18, but Wed is just that little bit large and makes the cell wrap.

Anyways - here it is, don't forget this is a mod of the original DAJ JavaScript version and will NOT contain any later tweaks or personalisations.

I've commented out 'old' and commented 'new', so there shouldn't be any problems - should there :lol:

Edit: Small correction as per marks errata post below.

Code: Select all

// Annual Weather data summary
//
// javascript to process dayfile.txt and produce the table layout
//
// Author: David A Jamieson (daj@findmyinbox.co.uk)
// Version: 1.1
// Updated: 7 March 2011
// Dec 30th 2013 - beteljuice bodge to display Day Of Week
//
// You may use and modify this code freely, however you should continue to
// acknowledge the original author
//


var dayfile='/data/dayfile.txt';

var mn = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

var dy = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']; // NEW - beteljuice


var label_items = [
		['maxtemp',	'Max Temp','Maximum Temperature (&deg;C)',true],
		['mintemp',	'Min Temp','Minimum Temperature (&deg;C)',true],
		['avgtemp',	'Avg Temp','Average Temperature (&deg;C)',true],
		['minmaxt',	'Min/Max Temp','Min / Max Temperature (&deg;C)',true],
		['rainfall','Rainfall','Rainfall (mm)',true],
		['windgust','Wind Gust','Highest Wind Gust (mph)',true] ];

var tableDiv='#tableData';

var field_delimiter = ",";

var date_delimiter  = "/";
	
// ----------------------------------------------------
// Nothing to edit below here


function drawCalendar(tableYear,whatdata){
	var tablelayout='<div id="table_container"><div id="table_menu">';tablelayout+='<ul>'
	for(var i=0;i<label_items.length;i++){
		if(label_items[i][3]==true){
			tablelayout+='<li><a href="javascript:" onclick="drawCalendar('+String(tableYear)+',\''+label_items[i][0]+'\');">'+label_items[i][1]+'</a></li>';
		}
	}
	tablelayout+='</ul>'
	tablelayout+='<div id="table_name"><p>';dayfilecol2=0;
	switch(whatdata){
		case'maxtemp':
			tablelayout+=label_items[0][2];
			dayfilecol=6;
			break;
		case'mintemp':
			tablelayout+=label_items[1][2];
			dayfilecol=4;
			break;
		case'avgtemp':
			tablelayout+=label_items[2][2];
			dayfilecol=15;
			break;
		case'minmaxt':
			tablelayout+=label_items[3][2];
			dayfilecol=4;
			dayfilecol2=6;
			break;
		case'rainfall':
			tablelayout+=label_items[4][2];
			dayfilecol=14;
			break;
		case'windgust':
			tablelayout+=label_items[5][2];
			dayfilecol=1;
			break;
		default:tablelayout+='?';
	}
	tablelayout+='</p></div></div>';
	tablelayout+="<table>";
	tablelayout+="<tr>";
	tablelayout+='<th id="table_year">'+String(tableYear)+'</th>';
	for(m=1;m<=12;m++){
		tablelayout+='<th ';
		if(dayfilecol2>0){tablelayout+='colspan="2" ';}
		tablelayout+='id="tc'+(m)+'">'+mn[m-1]+'</th>';
	}
	tablelayout+="</tr>";
	for(d=1;d<=31;d++){
		tablelayout+='<tr>';
// OLD		tablelayout+='<th id="tr'+d+'">'+d+'</th>';
			part1 = '<td id="tr'+d+'">'; // NEW - beteljuice
			part2 = ''; // NEW - beteljuice

		for(m=1;m<=12;m++){
			if(d<=daysInMonth(m,tableYear)){
				theDate = new Date(tableYear, m-1, d); // NEW - beteljuice
				theDay = dy[theDate.getDay()]; // NEW - beteljuice
				part1 += '<span style="display: none;" id="dd'+d+'_'+mn[m-1]+'">'+theDay+'</span>'; // NEW - beteljuice
// OLD			tablelayout+='<td class="datacell" datarow="#tr'+d+'" datacol="#tc'+m+'" id="'+d+'-'+mn[m-1]+'">';
				part2+='<td class="datacell" dataday="#dd'+d+'_'+mn[m-1]+'" datarow="#tr'+d+'" datacol="#tc'+m+'" id="'+d+'-'+mn[m-1]+'">'; // NEW - beteljuice
				if(dayfilecol2>0){
// OLD				tablelayout+='<td class="datacell" datarow="#tr'+d+'" datacol="#tc'+m+'" id="'+d+'-'+mn[m-1]+'-2">';
					part2+='<td class="datacell" dataday="#dd'+d+'_'+mn[m-1]+'" datarow="#tr'+d+'" datacol="#tc'+m+'" id="'+d+'-'+mn[m-1]+'-2">'; // NEW - beteljuice
				}
			}
			else
			{
// OLD			tablelayout+='<td class="nondate"';
				part2 +='<td class="nondate"'; // NEW - beteljuice
// OLD			if(dayfilecol2>0){tablelayout+='colspan="2" ';}
				if(dayfilecol2>0){part2+='colspan="2" ';}
// OLD			tablelayout+='>';
				part2+='>'; // NEW - beteljuice
			}
// OLD		tablelayout+='</td>';
			part2+='</td>'; // NEW - beteljuice
		}
// new - stitch the 'row' together
		tablelayout+= part1+' '+d+'</th>'+part2; // NEW - beteljuice
		tablelayout+='</tr>';
	}
	tablelayout+='</table></div>';
	$(tableDiv).html(tablelayout);
	if(dayfilecol2>0){
		$(".datacell").addClass('smallfont');
	}
	$(".datacell").hover(function(){
		var trow=$(this).attr("datarow");
		var tcol=$(this).attr("datacol");
		var tday=$(this).attr("dataday"); // NEW - beteljuice
		$(trow).addClass("highlight");
		$(tcol).addClass("highlight");
		$(this).addClass("highlight");
		$(tday).show(); // NEW - beteljuice
		},
		function(){
			var trow=$(this).attr("datarow");
			var tcol=$(this).attr("datacol");
			var tday=$(this).attr("dataday"); // NEW - beteljuice
			$(trow).removeClass("highlight");
			$(tcol).removeClass("highlight");
			$(this).removeClass("highlight");
			$(tday).hide(); // NEW - beteljuice
	});
	var current_year=-1;
	var year_list='<select onchange="drawCalendar(this.value,\''+whatdata+'\');">';
	$.get(dayfile,function(data){
		var lines=data.split("\n");
		$.each(lines,function(n,elem){
			wd_data=elem.split(field_delimiter);
			the_date=wd_data[0].split(date_delimiter);
			if('20'+the_date[2]==String(tableYear)){
				data_cell='#'+String(parseInt(the_date[0],10))+'-'+mn[parseInt(the_date[1],10)-1];
				$(data_cell).html(wd_data[dayfilecol]);
				if(dayfilecol2>0){
					$(data_cell+'-2').html(wd_data[dayfilecol2]);
				}
				if((parseFloat(wd_data[dayfilecol].split(',').join('.'))==0)&&(dayfilecol==14||dayfilecol==1)){
					$(data_cell).addClass('zerovalue');
				}
			}
			if(the_date[2]>current_year){
				current_year=the_date[2];
				year_list+='<option value="';
				year_list+='20'+the_date[2]+'"';
				if('20'+the_date[2]==String(tableYear)){
					year_list+=' selected="selected"';
				}
				year_list+='>20'+String(the_date[2])+'</option>';
			}
		});
		year_list+='</select>';
		$('#table_year').html(year_list);
	});
}
function daysInMonth(month,year){
	return new Date(year,month,0).getDate();
}
$(document).ready(function(){
	var urlParams={};
	(function(){
		var e,a=/\+/g,r=/([^&=]+)=?([^&]*)/g,d=function(s){
			return decodeURIComponent(s.replace(a," "));
		},q=window.location.search.substring(1);
		while(e=r.exec(q))urlParams[d(e[1])]=d(e[2]);
	})();
	if(urlParams['year']){
		drawYear=urlParams['year'];
	}else{
		var d=new Date();
		var curr_date=d.getDate();
		drawYear=d.getFullYear();
	}
	if(urlParams['data']){
		dataSet=urlParams['data'];
	}else{
		dataSet='maxtemp';
	}
	drawCalendar(drawYear,dataSet);
});
Enjoy ....
Last edited by beteljuice on Mon 30 Dec 2013 10:29 pm, edited 1 time in total.
Image
......................Imagine, what you will KNOW tomorrow !
User avatar
mcrossley
Posts: 12694
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Annual data Summary (DAJ script) - show day-of-week

Post by mcrossley »

beteljuice wrote:Tsk Mark - Most unlike you ...

You constructed the id the datacell.hover instead but forgot to remove the 'redundant' dataday construct in the part2+= :P
I'll have to take a look later, this was a quick on the fly 'in browser' hack whilst being pestered to go look at holidays. That's my excuse anyway, it seemed to work :lol:
User avatar
mcrossley
Posts: 12694
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Annual data Summary (DAJ script) - show day-of-week

Post by mcrossley »

How's this as an alternative, to show a months days at a time? I think I resolved beteljuice's pickings :)
User avatar
PaulMy
Posts: 3777
Joined: Sun 28 Sep 2008 11:54 pm
Weather Station: Davis VP2 Plus 24-Hour FARS
Operating System: Windows8 and Windows10
Location: Komoka, ON Canada
Contact:

Re: Annual data Summary (DAJ script) - show day-of-week

Post by PaulMy »

Fascinating how quickly you both made that addition :clap:

I've played with it but my attempt gets me a 0.0 :oops:
My current datasummary.php has the following, so how would I integrate/use the new feature?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="datasummary.css" />
<script src="https://ajax.googleapis.com/ajax/libs/j ... /jquery.js" type="text/javascript"></script>
<title>Annual Weather data</title>
</head>
<body>
<div id="tableData">
<?php include('readDayfile.php');?>
</div>
</body>
</html>

Paul
Davis Vantage Pro2+
C1 www.komokaweather.com/komokaweather-ca
MX www.komokaweather.com/cumulusmx/index.htm /index.html /index.php
MX www.komokaweather.com/cumulusmxwll/index.htm /index.html /index.php
MX www. komokaweather.com/cumulusmx4/index.htm

Image
User avatar
mikechristelow
Posts: 165
Joined: Wed 01 Feb 2012 9:33 pm
Weather Station: Watson W8681 (solar)
Operating System: Windows XP SP3
Location: Crewe, Cheshire
Contact:

Re: Annual data Summary (DAJ script) - show day-of-week

Post by mikechristelow »

:clap: :clap: :clap:

Ah, that's good!
I like it :)

I've got Beteljuice's version working at the moment, complete with my own earlier colour mods, but can't get Marks' version to work (it removes both the day of week on the highlighted month/day element and doesn't show the full month's days values at all). Need to do some more testing now!

My thanks to both the Beteljuice and Mark for their work - very much appreciated.

When I get the finished version fully working I'll post the link to it here for others to see what they make of it.
http://www.christelow.co.uk
“It's snowing still," said Eeyore gloomily.
"So it is."
"And freezing."
"Is it?"
"Yes," said Eeyore. "However," he said, brightening up a little, "we haven't had an earthquake lately.”

User avatar
mcrossley
Posts: 12694
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Annual data Summary (DAJ script) - show day-of-week

Post by mcrossley »

Actually there is a problem with these scripts when you try and display the two column min/max data - it crashes the script engine in Chrome with an out of memory condition! I'll see if I can spot what is wrong...
User avatar
mcrossley
Posts: 12694
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Annual data Summary (DAJ script) - show day-of-week

Post by mcrossley »

Fixed. Line 106 in my script was...

Code: Select all

               part2+=tablelayout+='<td class="datacell" datamon=".'+mn[m-1]+'" datarow="#tr'+d+'" datacol="#tc'+m+'" id="'+d+'-'+mn[m-1]+'-2">'; // NEW - beteljuice
Changed to...

Code: Select all

               part2+='<td class="datacell" datamon=".'+mn[m-1]+'" datarow="#tr'+d+'" datacol="#tc'+m+'" id="'+d+'-'+mn[m-1]+'-2">'; // NEW - beteljuice
The same A similar change needs to be made to the betejuice code as well.
Last edited by mcrossley on Mon 30 Dec 2013 7:50 pm, edited 1 time in total.
Post Reply