New Meteox Widget Format

Ask a Question
,
1

Meteox have changed the format of their rain radar widget

https://widgets.meteox.com/en-gb

I have no idea how to incorporate the new widget into my PWS!

2

You can use the widgets in a webcam block.

Schermafbeelding 2024-01-03 om 12.36.49
Schermafbeelding 2024-01-03 om 12.36.49952Ɨ530 152 KB

I attach an example of webcam3_c_block.php
webcam3_c_block.php.zip (2.3 KB)

Line 67-68 reads in the original version

echo '<img src="'.$webcam_img.'" alt="weathercam" style="'.$webcam_width.$webcam_height.';" />
</a>'.PHP_EOL;

The information between line 67 echo ' and the next line </a>' needs to be replaced with the code you copy from the Meteox site.
Click button ā€œApply and Get Codeā€ and then ā€œCopy codeā€

meteox
meteox800Ɨ598 277 KB

Succes,
Wim

3

Many thanks for your quick reply

Done as you suggested but the end result is not so good

The popup window is perfect!

4
  1. The transparency is the first thing to improve.
    When selecting in your menu ā€œLight Themeā€ or ā€œStation Themeā€ is is readable.
    We will need to adept the copied code for that.

Schermafbeelding 2024-01-03 om 13.04.30
Schermafbeelding 2024-01-03 om 13.04.30772Ɨ1016 80.2 KB

  1. The small visible area is the second improvement we need.
    Better not use the widget with the two coloured bottom rows.
    Select another one.

  2. The popup from the ā€˜enlargeā€™ text is the third thing we have to adept.
    Luckily when clicking the image we already go to their new website.

There will be more users of the old meteox widget, so I think there will be also a few users with time on their hand to solve these issues.

Wim

1 Like
5

Ok - many many thanks - I will wait and in the meantime use another tile in its place!!

6

Hi Wim

Using your example Webcam 3 Block I have a rain radar working with Windy

Many thanks

1 Like
7

just for info i found this part of the code

style="width:100%!important;max-width:600px!important;max-height:600px!important;height:100%!important;padding:0px;border:none!important;box-sizing:border-box!important;" scrolling="no" frameborder="0"></iframe>

was causing a letter box display had to change to

width="100%" height="800" scrolling="yes" frameborder="0" name="iframe"></iframe>

this gave the size required Ballaugh Weather - Radar (hc-iom.co.uk) as they clearly have not checked the code that they provide

8

Our discourse system ā€œimprovesā€ our texts by changing the straight quotes to curly qoutes.
Those do not work in html, if you copy the code from hcorrinā€™s post the code will fail
Copy from this line:

  width="100%" height="800" scrolling="yes" frameborder="0" name="iframe"

You should adept the 100% and 800 to your situation.

Wim

9

To ensure code isnā€™t reformatted incorrectly you can use three backticks ``` on a line above and below the code. Discourse will try itā€™s best to identify code and prompt you to add the backticks, but it doesnā€™t mandate/force this.

You can go a step further and identify what type of code the backticks contain to further ā€œimproveā€ the formatting, e.g. ```php can be used to mark a block of PHP code. Thereā€™s an extensive list of languages supported by this function - see
Supported Languages ā€” highlight.js 11.9.0 documentation for the full list.

Iā€™ve edited the original code block to add backticks.

PS. If you wish to protect a block of code from being edited but not reformatted in any way you can use ```text