Weather
On the weather and other natural phenomenon.
A one page home/new tab page with random pictures, time, and weather
Are you annoyed by a trend in browsers to default to an annoying advertising page with new tabs? I sure am. And they don’t make it easy to change that. I thought, rather than a blank new tab page, why not load something cute and local. I enlisted claude.ai to help expedite the code and got something I like.
homepage.html is a very simple default page that loads a random image from a folder as a background, overlays the current local time in the one correct time format with seconds, live update, and throws up the local weather from wttr.in after a delay (to avoid hitting the server unnecessarily if you’re not going to keep the tab blank long enough to see the weather).
Images have to be in a local folder and in a predictable naming structure, as written “image_001.webp” to “image_999.webp.” If the random enumerator chooses an image name that doesn’t exist, you get a blank page.
Browsers don’t auto-rotate by exif (or webp) metadata, so orient all images in the folder as you’d like them to appear.
The weather information is only “current” which isn’t all that useful to me, I’d like tomorrows weather, but that’s not quite possible with the one-liner format yet.
How you set the homepage and new tab default page varies by browser. In Brave try hamburger->appearance->show home button->select option->paste the location of the homepage.html file, e.g. file://home/gessel/homepage.html.
The pictures are up to you, but here’s the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>New Tab</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
overflow: hidden;
}
#background-image {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: -1;
}
#time-date {
position: absolute;
top: 20px;
right: 20px;
font-size: 48px;
color: white;
text-shadow: 3px 3px 8px rgba(0, 0, 0, 1);
font-family: sans-serif;
font-weight: bold;
}
#weather {
position: absolute;
bottom: 20px;
left: 20px;
font-size: 24px;
color: white;
text-shadow: 3px 3px 8px rgba(0, 0, 0, 1);
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="background-image"></div>
<div id="time-date"></div>
<div id="weather"></div>
<script>
// Function to get a random image from the 'image_001.webp' to 'image_230.webp' range
// Edit image folder to match the folder you want to store the images in
// edit the min and max image index range to match the images
// set the imageName extension to suit (e.g. .jpg, .webp, .png)
// white screen usually means the images or folder can't be found
function getRandomImage() {
const imageFolder = '.images/';
const minImageIndex = 1;
const maxImageIndex = 230;
const randomIndex = Math.floor(Math.random() * (maxImageIndex - minImageIndex + 1)) + minImageIndex;
const imageName = `image_${randomIndex.toString().padStart(3, '0')}.webp`;
return `${imageFolder}${imageName}`;
}
// Function to update the time and date display
// Updates every second, uses the only technically correct* date and time format
// * The best kind of correct.
function updateTimeDate() {
const dateTimeElement = document.getElementById('time-date');
const currentDate = new Date();
const year = currentDate.getFullYear();
const month = String(currentDate.getMonth() + 1).padStart(2, '0');
const day = String(currentDate.getDate()).padStart(2, '0');
const hours = String(currentDate.getHours()).padStart(2, '0');
const minutes = String(currentDate.getMinutes()).padStart(2, '0');
const seconds = String(currentDate.getSeconds()).padStart(2, '0');
const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
dateTimeElement.textContent = formattedDateTime;
}
// Function to fetch and display the weather information
// The delay is set for 10 seconds to avoid hitting the wttr.in server if you're just
// opening a tab to enter a web address. Hopefully one-line forcasts will be implemented
// soon - check https://github.com/chubin/wttr.in/issues/447 for progress
async function updateWeather() {
const weatherElement = document.getElementById('weather');
try {
await new Promise(resolve => setTimeout(resolve, 10000)); // 10-second delay
const response = await fetch('https://wttr.in/?m&format=%l%20%c+%C+%t%20+%h%20+%w\n');
const weatherData = await response.text();
weatherElement.textContent = weatherData;
} catch (error) {
console.error('Error fetching weather information:', error);
weatherElement.textContent = 'Error fetching weather information.';
}
}
// Set the random background image
const backgroundImage = document.getElementById('background-image');
backgroundImage.style.backgroundImage = `url('${getRandomImage()}')`;
// Update the time and date every second
setInterval(updateTimeDate, 1000);
// Update the weather information every 100 minutes
updateWeather();
setInterval(updateWeather, 6000000);
// thanks to claude.ai for helping with the scripts.
</script>
</body>
</html>
South Lake Tahoe Caldor Fire Timelapse
Sentinalhub Playground is an excellent resource for near real time, albeit not quite google earth 1m resolution, satellite images. One of the cool features is being able to adjust the mapping of the satellite bands to RGB outputs. For example, using Sentinel-2 L2A image data of South Lake Tahoe between 2021-08-17 and 2021-09-01 and remapping the 2190nm (SWIR2) to red, which tends to highlight fires though isn’t thermal, 783nm to green, a vegetation band (though it is NIR to humans) to make vegetation cover more obvious, and 443nm to blue instead of 490nm as shorter wavelengths tend to be scattered more by aerosols and smoke the fire line (bright red) and smoke (obvs) is very visible while vegetation is (false) green. Burnt earth shows as dark red, compared to bare ground, which tends to show tan in this mapping, thus revealing the current line of fire, the recently burned areas, and the wind direction carrying smoke, which tends to correlate with the advancing line, and fuel (vegetation) still standing.
Then using the history controller to generate and save a sequence of stills, we can animate the progress of the fire with a simple FFMPEG command:
ffmpeg -framerate 1 -pattern_type glob -i '*.jpg' -vf crop=1754:1146 -c:v libx264 -r 30 -pix_fmt yuv420p fire.mp4
and you get:
Basra Snow Storm
I was feeling a little left out, reading posts by people digging out of snow storms and here I am in Basra where it gets down to 10C at night sometimes and usually hits the mid 20’s during the day. Rough. But the weather here came through with our own sort of snow storm.
Starting to look like a brown-out!
Obligatory shot of the yard furniture getting covered.
Kitty’s head is starting to show some accumulation.
With all this blowing through you can barely see a few hundred meters!
It’s really starting to accumulate. Where’s the snow blower?
It takes some special cleaning after playing out in it.
The Southern Iraqi Desert
The desert just north of Basra is beautifully empty.
Fall weather is arriving…
It only got to a peak 47.5C today according to our new roof-mounted weather station. It seems to be about 3 degrees cooler away from ground level, but we’re still down about 4-5 degrees from peak temperatures.
54°C
New experience today – 129+°F Wikipedia says the highest temperature recorded in Basra was 52°C. Now the car was driving over a sunlit road, so it was recording a higher temperature than you would see over shaded ground, but it is only May.
Summer is going to be fun.
Central Park in the Snow
Snow falling on Central Park from the 24th floor.
Snowmaggeddon
a snowy arrival in BOS
But not exactly snowmaggeddon. By the time we got there it was easy to get around.