add a section for a webcam to the Belchertown skin?

[mrneutron42]

:bulb: The Idea

Can a section for a webcam image be added to Belchertown? I'd like to be able to display the windy.com RADAR image as well as a webcam image.

As a short-term workaround, I just replaced the $radar_html line in the index.html.tmpl file, with with a call to my wifi webcam image. This works, but now I don't have the windy.com radar.

                <!-- Radar image -->
                <div class="col-lg-5 radar-map toprow-height">
                    <img src="./images/webcam.jpg" width="640" height="480">
                </div>
            </div>

To be sure the webcam image reloads, I put the reload commands into the [[Belchertown]] [[[Extras]]] section of the weewx.conf file and restarted weewx.

[[Belchertown]]
    skin = CabinBelchertown
    enable = true
    HTML_ROOT = public_html
    [[[Extras]]]
        webpage_autorefresh = 300000   #in miliseconds
        reload_hook_images = 1
        reload_images_radar = 300    #in seconds

[poblabs]

I've recently added a webcam, and have been thinking of the best place that it could go while keeping the radar. What does your solution look like? Can you share a link to your site?

[mrneutron42]

Sure. I've got a weewx setup running at home and another at my lake cabin. The lake cabin has 2 of the $10 ESP32-CAM cameras. http://weewx-ricelake.duckdns.org http://weewx-tonka.duckdns.org

I saw a Belchertown setup I like the look of, that has tabs for the RADAR section! https://belcampmdweather.tech/weewx/belchertown/ discussion here:
https://groups.google.com/g/weewx-user/c/y-RQmnoqcqQ/m/n1Qt8-soFAAJ

[norecords]

Hi there, you could try what I've done on this branch https://github.com/norecords/weewx-belchertown/tree/radar-navbar See it live at https://meteo.correns.org

[poblabs]

Very cool, can you share how you did it?

[fvirgola80]

Hello, I entered the new master published by Pat and I changed the index.html.tmpl file to line 407 by inserting this code

            <div class="col-lg-5 radar-map toprow-height">
                    <div id="tabs-container">
                    <!-- MODS RADAR TABS -->
                        <ul class="nav nav-tabs">
                          <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#radar">Radar Pioggia</a>
                          </li>
                            <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#radar2">Vento in Nodi</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#radar3">Radar Lampi</a>
                          </li>
                           <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#webcam">Webcam Live</a>
                          </li>
                        </ul>

                        <div class="container-fluid">
                          <div class="tab-content">
                               <div role="tabpanel" class="tab-pane fade in active" id="radar">
                               <div class="radar_image">$radar_html</div>
                            </div>
                               <div role="tabpanel" class="tab-pane fade" id="radar2">
                               <div id="radar" class="tab-content" style=""><div><iframe width="650" height="318" src="https://embed.windy.com/embed2.html?lat=42.066&lon=11.986&detailLat=42.068&detailLon=10.168&width=650&height=318&zoom=8&level=surface&overlay=wind&product=ecmwf&menu=&message=true&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=kt&metricTemp=%C2%B0C&radarRange=-1" frameborder="0"></iframe></div></div>
                            </div>
                               <div role="tabpanel" class="tab-pane fade" id="radar3">
                               <div id="radar" class="tab-content" style=""><div><iframe width="650" height="318" src="https://embed.windy.com/embed2.html?lat=42.066&lon=11.986&detailLat=42.068&detailLon=10.168&width=650&height=318&zoom=8&level=surface&overlay=radar&product=radar&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=km%2Fh&metricTemp=%C2%B0C&radarRange=-1" frameborder="0"></iframe></div></div>
                            </div>
                               <div role="tabpanel" class="tab-pane fade" id="webcam">
                               <div><iframe width="650" height="318" src="https://rtsp.me/embed/zDkkkstY/" frameborder="0" allowfullscreen></iframe></div>
                            </div>
                          </div>
                        </div>  
                    <!-- MODS RADAR TABS -->
                    </div>  
                </div>

I always insert it whenever there is a new version in the master. I ask you if it is possible to put a configuration in the skin.conf file so that you don't have to change the index.html.tmpl file every time. The result is on www.meteocivitavecchia.it. Debugging is on if you want to check other things.

I also modified the style.css file by adding the following code to line 1440

.nav-item { font-size: 15px; }

:-)

[norecords]

@poblabs here you can see my mods https://github.com/poblabs/weewx-belchertown/compare/master...norecords:radar-navbar It's not implemented with the skin.conf yet and i'm too busy right now to work on...

[fvirgola80]

@norecords, thanks for the information you provided, I changed them on www.meteocivitavecchia.it and here is the result..😉

[poblabs]

This is awesome @norecords! I wonder if there's a way to make this a skin.conf option for others looking to use this too. Would need to be enable/disable the menu, and then another option to give the menu's a title, and then the content. Could be challenging

[poblabs]

Or perhaps the radar section gets moved to an .inc file, then it can be edited however the owner wants without altering the base skin

[poblabs]

I think this is the easiest way. I'll put it together and commit it

[dtalens]

Please @poblabs, can you add index_radar.inc file example in this repository? Thanks,

[poblabs]

@dtalens if I add it, then it'll become default for everyone which is not what we want. if you want something similiar to what i have at belchertownweather.com, you can use this below.

I've added some javascript which will reload the webcam image every 5 minutes automatically.

<div id="tabs-container">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs tabs-menu" role="tablist">
        <li role="presentation" class="active"><a href="#radar" aria-controls="radar" role="tab" data-toggle="tab">Radar</a></li>
        <li role="presentation"><a href="#webcam" aria-controls="webcam" role="tab" data-toggle="tab">Station Camera</a></li>
    </ul>
    <!-- Tabs contents -->
    <div class="tab">
        <div id="radar" class="tab-content">
            <div class="radar_image">$radar_html</div>
        </div>
        <div id="webcam" class="tab-content">
            <a name="webcam" href="https://your_domain/your_photo.jpg" target="_blank"><img src="https://your_domain/your_photo.jpg"></a>
        </div>
    </div>
</div>

<script type="text/javascript">
jQuery(document).ready(function() {
    setInterval('reloadWebcam()', 300000); // 5 mins in millis
});

function reloadWebcam() {
    jQuery('#webcam img').each(function() {
        new_image_url = jQuery(this).attr('src').split('?')[0] + "?" + Math.floor(Math.random() * 999999999);
        jQuery(this).attr('src', new_image_url);
    });
}

jQuery('.tabs-menu a').click(function(event) {
    event.preventDefault();

    // Toggle active class on tab buttons
    jQuery(this).parent().addClass("active");
    jQuery(this).parent().siblings().removeClass("active");

    // display only active tab content
    var activeTab = jQuery(this).attr("href");
    jQuery('.tab-content').not(activeTab).css("display","none");
    jQuery(activeTab).fadeIn();

});
</script>

<style>
.dark .tabs-menu > li > a {
    padding: 0px 5px;
}

.dark .nav-tabs>li.active>a, .dark .nav-tabs>li.active>a:focus, .dark .nav-tabs>li.active>a:hover {
    color: #e5554e;
}

.active a {
    /* color:red; */
}

.tab-content {
    display:none;
}

.tabs-menu > li > a {
    padding: 0px 5px;
}

#radar {
    display:block;
}

.toprow-height {
    min-height: 402px !important;
}
</style>

[norecords]

@dtalens if I add it, then it'll become default for everyone which is not what we want. if you want something similiar to what i have at belchertownweather.com, you can use this below.

@poblabs maybe name it index_radar.inc.exemple to add into the repo, so people want to use it just have to rename to index_radar.inc

Good job team ;)

[mrneutron42]

How would the index_radar.inc file get called/included? Would you put a call to it in the index.html.tmpl file?

Something like?:

        <!-- Radar image -->
            #include  "index_radar.inc"

[poblabs]

The latest master branch has all the changes needed. You can download the zip file, and upgrade the skin by re-installing it

https://github.com/poblabs/weewx-belchertown/archive/refs/heads/master.zip

sudo wee_extension --install master.zip

[poblabs]

@dtalens if I add it, then it'll become default for everyone which is not what we want. if you want something similiar to what i have at belchertownweather.com, you can use this below.

@poblabs maybe name it index_radar.inc.exemple to add into the repo, so people want to use it just have to rename to index_radar.inc

Good job team ;)

Good idea

[mrneutron42]

I downloaded the master.zip with "wget https://github.com/poblabs/weewx-belchertown/archive/refs/heads/master.zip" then used the command "wee_extension --install master.zip"

I see the new files dated 20211002 (today) in my /home/weewx/skins/Belchertown directory, but I'm not seeing the index_radar.inc.example file.

I guess that file hasn't been merged into the master branch yet? Until you do, I guess we manually create a index_radar.inc file in the skins/Belchertown directory?

[mrneutron42]

I'm trying to tweak the index_radar.inc file so I can have 2 webcams, with the Radar as the 3rd slot. I moved the class="active" notation to make the Camera 1 tab the active tab. That worked. BUT somehow the Radar picture is on top (covering the Camera 1 image), with each page refresh. I can't understand what is wrong, and how to get Camera 1 to be active and visible. Any help?

<div id="tabs-container">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs tabs-menu" role="tablist">
        <li role="presentation" class="active"><a href="#webcam1" aria-controls="webcam1" role="tab" data-toggle="tab">Camera 1</a></li>
        <li role="presentation"><a href="#webcam2" aria-controls="webcam2" role="tab" data-toggle="tab">Camera 2</a></li>
        <li role="presentation"><a href="#radar" aria-controls="radar" role="tab" data-toggle="tab">Radar</a></li>
    </ul>
    <!-- Tabs contents -->
    <div class="tab">
        <div id="webcam1" class="tab-content">
            <a name="webcam1" href="./ramdisk/webcam-time.jpg" target="_blank"><img src="./ramdisk/webcam-time.jpg"></a>
        </div>
        <div id="webcam2" class="tab-content">
            <a name="webcam2" href="./ramdisk/webcam-time2.jpg" target="_blank"><img src="./ramdisk/webcam-time2.jpg"></a>
        </div>
        <div id="radar" class="tab-content">
            <div class="radar_image">$radar_html</div>
        </div>
     </div>
</div>

[norecords]

@mrneutron42 in my case i had to remove <div class="radar_image"> and in style.css changed

#radar {
    display:block;
}

to

#webcam1 {
    display:block;
}

I think there is something with radar_image class...

[mrneutron42]

@mrneutron42 in my case i had to remove <div class="radar_image">

I looked up the file that defines the term "radar_image". It is in belchertown.py file. Here is where it is defined to call the Windy website:

                radar_html = '<iframe width="{}px" height="{}px" src="https://embed.windy.com/embed2.html?lat={}&lon={}&zoom={}&level=surface&overlay=radar&menu=&message=true&$
                    radar_width, radar_height, lat, lon, zoom, marker, lat, lon
                )

Can anyone understand how this definition would/could take over the tab and force the windy radar image to be front and center all the time?

[norecords]

@mrneutron42 if you have followed @poblabs code, edit like so

<div id="tabs-container">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs tabs-menu" role="tablist">
        <li role="presentation" class="active"><a href="#webcam1" aria-controls="webcam1" role="tab" data-toggle="tab">Camera 1</a></li>
        <li role="presentation"><a href="#webcam2" aria-controls="webcam2" role="tab" data-toggle="tab">Camera 2</a></li>
        <li role="presentation"><a href="#radar" aria-controls="radar" role="tab" data-toggle="tab">Radar</a></li>
    </ul>
    <!-- Tabs contents -->
    <div class="tab">
        <div id="webcam1" class="tab-content">
            <a name="webcam1" href="./ramdisk/webcam-time.jpg" target="_blank"><img src="./ramdisk/webcam-time.jpg"></a>
        </div>
        <div id="webcam2" class="tab-content">
            <a name="webcam2" href="./ramdisk/webcam-time2.jpg" target="_blank"><img src="./ramdisk/webcam-time2.jpg"></a>
        </div>
        <div id="radar" class="tab-content">
            $radar_html
        </div>
    </div>
</div>

<script type="text/javascript">
jQuery(document).ready(function() {
    setInterval('reloadWebcam()', 300000); // 5 mins in millis
});

function reloadWebcam() {
    jQuery('#webcam1 img').each(function() {
        new_image_url = jQuery(this).attr('src').split('?')[0] + "?" + Math.floor(Math.random() * 999999999);
        jQuery(this).attr('src', new_image_url);
    });
}

jQuery('.tabs-menu a').click(function(event) {
    event.preventDefault();

    // Toggle active class on tab buttons
    jQuery(this).parent().addClass("active");
    jQuery(this).parent().siblings().removeClass("active");

    // display only active tab content
    var activeTab = jQuery(this).attr("href");
    jQuery('.tab-content').not(activeTab).css("display","none");
    jQuery(activeTab).fadeIn();

});
</script>

<style>
.dark .tabs-menu > li > a {
    padding: 0px 5px;
}

.dark .nav-tabs>li.active>a, .dark .nav-tabs>li.active>a:focus, .dark .nav-tabs>li.active>a:hover {
    color: #e5554e;
}

.active a {
    /* color:red; */
}

.tab-content {
    display:none;
}

.tabs-menu > li > a {
    padding: 0px 5px;
}

#webcam1 {
    display:block;
}

.toprow-height {
    min-height: 402px !important;
}
</style>

If you want also refreshing webcam2 edit the function

function reloadWebcam() {
    jQuery('#webcam1 img').each(function() {
        new_image_url = jQuery(this).attr('src').split('?')[0] + "?" + Math.floor(Math.random() * 999999999);
        jQuery(this).attr('src', new_image_url);
    });
    jQuery('#webcam2 img').each(function() {
        new_image_url = jQuery(this).attr('src').split('?')[0] + "?" + Math.floor(Math.random() * 999999999);
        jQuery(this).attr('src', new_image_url);
    });
}

[norecords]

@mrneutron42 that's not related to Python, but to JavaScript https://github.com/poblabs/weewx-belchertown/blob/a00bdeedaeee6858b2facf09bdf828b638e511f9/skins/Belchertown/js/belchertown.js.tmpl#L562 here you can see that radar_image class is loaded when applying theme, so I think that's why the radar is displayed over if we don't remove the radar_image div

[mrneutron42]

Thank you @norecords! Those changes gave the tab focus to webcam1, as desired.

It looks like changing the display:block section (farther down in the .inc file) from

#radar {
    display:block;
}

to

#webcam1 {
    display:block;
}

was the key. I never noticed that display:block callout previously. I wish I would have, so I didn't have to bother anyone with the question.

Thanks again!

[norecords]

@mrneutron42 if you want to have a drop down toggle like this: try this

<div id="tabs-container">
    <ul class="nav nav-tabs tabs-menu" role="tablist">
        <li class="dropdown active">
            <a href="#toggle" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Webcams <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li class="active"><a href="#webcam1">Webcam #1</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#webcam2">Webcam #2</a></li>
            </ul>
        </li>
        <li><a href="#radar">Radar</a></li>
    </ul>
    <div class="tab">
        <div id="webcam1" class="tab-content">
            <a name="webcam1" href="./ramdisk/webcam-time.jpg" target="_blank"><img src="./ramdisk/webcam-time.jpg"></a>
        </div>
        <div id="webcam2" class="tab-content">
            <a name="webcam2" href="./ramdisk/webcam-time2.jpg" target="_blank"><img src="./ramdisk/webcam-time2.jpg"></a>
        </div>
        <div id="radar" class="tab-content">
            $radar_html
        </div>
    </div>
</div>

<script type="text/javascript">
jQuery(document).ready(function() {
    setInterval('reloadWebcam()', 300000); // 5 mins in millis
});

function reloadWebcam() {
    jQuery('#webcam1 img').each(function() {
        new_image_url = jQuery(this).attr('src').split('?')[0] + "?" + Math.floor(Math.random() * 999999999);
        jQuery(this).attr('src', new_image_url);
    });
}

jQuery('.tabs-menu a').click(function(event) {
    event.preventDefault();

    // Toggle active class on tab buttons
    jQuery(this).parent().addClass("active");
    jQuery(this).parent().siblings().removeClass("active");

    // display only active tab content
    var activeTab = jQuery(this).attr("href");
    if (activeTab != "#toggle") {
        jQuery('.tab-content').not(activeTab).css("display","none");
        jQuery(activeTab).fadeIn();
    }
});
</script>

<style>
.dark .tabs-menu > li > a {
    padding: 0px 5px;
}

.dark .nav-tabs>li.active>a, .dark .nav-tabs>li.active>a:focus, .dark .nav-tabs>li.active>a:hover {
    color: #e5554e;
}

.active a {
    /* color:red; */
}

.tab-content {
    display:none;
}

.tabs-menu > li > a {
    padding: 0px 5px;
}

#webcam1 {
    display:block;
}

.toprow-height {
    min-height: 402px !important;
}
</style>

[dtalens]

I was able to add your code to my website, thanks @norecords

[norecords]

@dtalens your code have some mistakes your drop down section should look like this: (remove active classes and wrong li end tag)

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Lapse de temps <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#timelapse24h">24 hores</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#timelapse30d">30 dies</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#timelapse1a">Anual</a></li>
        </ul>
</li>

[dtalens]

Thanks @norecords

[dtalens]

Hi @norecords Anchoring href="#" causes a client-side error when pressing the button for the drop-down menu.

Uncaught Error: Syntax error, unrecognized expression: #
    at Function.oe.error (jquery.min.js:2)
    at oe.tokenize (jquery.min.js:2)
    at oe.compile (jquery.min.js:2)
    at jquery.min.js:2
    at PSEUDO (jquery.min.js:2)
    at Ce (jquery.min.js:2)
    at oe.compile (jquery.min.js:2)
    at oe.select (jquery.min.js:2)
    at oe (jquery.min.js:2)
    at Function.oe.matches (jquery.min.js:2)
oe.error @ jquery.min.js:2
oe.tokenize @ jquery.min.js:2
oe.compile @ jquery.min.js:2
(anònim) @ jquery.min.js:2
PSEUDO @ jquery.min.js:2
Ce @ jquery.min.js:2
oe.compile @ jquery.min.js:2
oe.select @ jquery.min.js:2
oe @ jquery.min.js:2
oe.matches @ jquery.min.js:2
w.filter @ jquery.min.js:2
j @ jquery.min.js:2
not @ jquery.min.js:2
(anònim) @ (índex):460
dispatch @ jquery.min.js:2
y.handle @ jquery.min.js:2

Is it possible to fix it?

[norecords]

@dtalens thanks for report, I've edited my code above... To resolve it just give a name to the anchor, like: <a href="#toggle1" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">DropDown Toggle</a>

[dtalens]

@dtalens thanks for report, I've edited my code above... To resolve it just give a name to the anchor, like: <a href="#toggle1" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">DropDown Toggle</a>

This solution displays a blank area at bottom of menu until some of items are selected. Is it possible to display contents of first menu item when menu button is pressed?

[norecords]

@dtalens ok so name your anchor "toggle" <a href="#toggle" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">DropDown Toggle</a> and modify the JavaScript

    // display only active tab content
    var activeTab = jQuery(this).attr("href");
    if (activeTab != "#toggle") {
        jQuery('.tab-content').not(activeTab).css("display","none");
        jQuery(activeTab).fadeIn();
    }

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.