Neowx Rain radar and webcam

Mazufa

unread,

Dec 11, 2023, 10:31:07 PM12/11/23

to weewx-user

Hello!

Has anyone made an embedded rain radar and webcam for this neowx theme? Since there is extra space on the site, I would like to get a rain radar and a webcam on it. Could someone give me advice on the easiest way to do it and would someone have ready-made software? Then there would also be the question of how to get those metrics into Finnish? Like Barometer etc? I have changed the language of the Neowx condifuration file to Finnish, but only the ones in the upper corner, Nykyinen, Eilinen, Viikko, etc., changed to Finnish.

Thanks for help!

sääasema2.png

sääasema3.png

sääasema.png

michael.k...@gmx.at

unread,

Dec 12, 2023, 1:46:30 AM12/12/23

to weewx-user

It seems to me that NeoWX is neither internationalized, nor maintained any more. But it is still there, clone it an have fun ;)

daved

unread,

Dec 12, 2023, 2:26:11 PM12/12/23

to weewx-user

Is this something close to what you are looking for? https://cbkwx.com/index.html

I'm using the neox-material skin.

It's been a while since I did this, so I'll have to go back and look at what I actually did, but here is the gist of it. I wrote a script to take a picture every four minutes and put it in the html root directory, as well as create a timelapse for the previous 24 hours and put it in the html/media directory as well. The webcam picture on the main page is an iframe. I edited the skin.conf to make the custom Timelapse menu item, as well as added a stanza to the [CheetahGenerator] section to generate the timelapse page. I wrote a template file based on the existing ones.

I'm not much of a web designer, and know very little about html, css, and javascript, so this was a bit of trial and error, and looking at the page source of this site: https://www.360shetland.co.uk/weather/index.html There are likely to be easier and better ways to accomplish this, but it seems to work, and is relatively responsive to viewing on mobile devices.

As far as translating this to finnish, see here: https://neoground.com/docs/neowx-material/config.translations

Rory Gillies

unread,

Dec 13, 2023, 11:58:11 AM12/13/23

to weewx-user

Hi Mazufa,

My station uses a fork of NeoWX Material (www.360shetland/weather), I've added in loads of extras, and there's a couple of very good and reasonably active forks on Github: https://github.com/seehase/neowx-material.

To add in radar / webcam you can create inc files with iFrames then add them to the index.html.tmpl file were you want them. My Windy and satellite maps are called in the main page layout section between the #end for and the closing </div>:

## +-------------------------------------------------------------------------+
## | The main page layout |
## +-------------------------------------------------------------------------+

<!DOCTYPE html>
<html lang="$Extras.language">
<head>
<title>
$Extras.Translations[$Extras.language].current | $station.location
</title>
#include "head.inc"
</head>
<body class="${Extras.Appearance.mode}-theme main-bg" ontouchstart="">

#attr $active_nav = 'current'
#include "header.inc"
<main>
<div class="container-fluid d-flex-xxl">
<div class="row my-4 temprow align-content-start">

<div class="col-12 mb-4 text-center">
<h2 class="h2-responsive text-dark">Current Conditions</h2>
</div>
#for $x in $Extras.Appearance.values_order

#if $x == "ET"
#if $day.ET.has_data and $day.ET.sum.raw is not None and $day.ET.sum.raw > 0.0
$valuesCard('ET')
#end if
#else
$valuesCard($x)
#end if

#end for

## +-------------------------------------------------------------------------+
## | iFrame to display Windy.com forecast and wind map |
## +-------------------------------------------------------------------------+

#include "forecast.inc" <--- Add here
#include "meteoblue.inc" <--- Add here

</div>

The inc files are basic HTML as if it was included in the document, here's an iframe that you can insert your own source:

<div class="col-12 mb-4 text-center">
<h2 class="h2-responsive text-dark">Your Heading</h2>
</div>
<iframe width="100%" height="650" style="padding:14px;border:2px;" src="Your iFrame source" frameborder="0" scrolling="NO" allowtransparency="true" sandbox="allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox" style="width: 100%; height: 550px"></iframe>

<iframe width="100%" height="650" style="padding:14px;border:2px;" src="Your Source" frameborder="0" scrolling="NO" allowtransparency="true" sandbox="allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox" style="width: 100%; height: 550px"></iframe>

To localise your version add a [[[fi]]] section in the [[Translations]] section (use the existing languages as a guide), then set the language in the [Extras] section, language = fi

Hope this helps,

Rory

Mazufa

unread,

Dec 15, 2023, 10:44:20 PM12/15/23

to weewx-user

Hello

This is exactly what I'm looking for. Any instructions on how to install this? Could you install it remotely for me? That's exactly what suits me. If you can help, I'll give you instructions. for an electrician.