Embedding cutom content into Frontpage
The skin supports adding own custom content to the front page. You can add iFrames, images or videos, whatever you want - full HTML is supported here. Each layout (altervative and classic) provides different "Regions" to place the content.
Please add the templates named below into your weewx-wdc skin folder (see https://weewx.com/docs/5.0/usersguide/where/, it should be at e.g. SKIN_ROOT/weewx-wdc/custom-content-top.inc):
The snippets at https://github.com/Daveiano/weewx-wdc/wiki/Code-Snippets#basic-layouts can be used to structure these regions.
-
custom-content-top.inc- This template is placed at the top of the page, above the stat tiles (or gauges). -
custom-content-after-stat.inc- This template is placed after the stat tiles and before the diagram tiles. -
custom-content-bottom.inc- This template is placed at the bottom of the page, below the table.
-
custom-content-left.inc- This template is placed at the bottom left side of the page. -
custom-content-top.inc- This template is placed at the top of the page, above the stat tiles (or gauges). -
custom-content-bottom.inc- This template is placed at the bottom of the page, below the table.
A user might want to add custom tiles to the front page and link these tiles to open more content via a modal, this is how you would do it:
- Decide where you want to display the tiles, for example, if you are using the Alternative layout, you may want to show your custom tiles after the default stat tiles, so you choose to use the template
custom-content-after-stat.inc. - In your custom template (in this case
custom-content-after-stat.inc) add the code for your custom tile, eg.
#errorCatcher Echo
#encoding UTF-8
<div class="bx--row">
<div class="bx--col-sm-4 bx--col-md-4 bx--col-lg-6 bx--col-xlg-6 bx--col-max-4">
<div class="bx--tile stat-tile" id="user-modal-button-01" style="cursor: pointer;">
<!-- Main row -->
<div class="bx--row">
<div class="bx--col">
<p class="label">$month.dateTime.format("%B %Y")</p>
</div>
</div>
<!-- /Main row -->
<div class="bx--row">
<div class="bx--col">
<p class="value">$obs.label.outTemp</p>
<div class="bx--row">
<div class="bx--col value-min">
<p class="stat-label">$gettext("Min month")</p>
<p class="stat-value"><span class="value" style="display: inline;">$month.outTemp.min</span></p>
</div>
<div class="bx--col value-max">
<p class="stat-label">$gettext("Max month")</p>
<p class="stat-value"><span class="value" style="display: inline;">$month.outTemp.max</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>This line is important:
<div class="bx--tile stat-tile" id="user-modal-button-01" style="cursor: pointer;">
The id attribute is set to the element which should open the modal on click. Use the naming modal-button-[id].
style="cursor: pointer;" causes the mouse arrow to show a pointer when hovering over the custom tile.
- Add you modal content to
index.html.tmplas follows right before#include "includes/footer.inc":
<cds-modal id="user-modal-content-01">
<cds-modal-header>
<cds-modal-close-button></cds-modal-close-button>
<cds-modal-label>Label (Optional)</cds-modal-label>
<cds-modal-heading>Modal Title</cds-modal-heading>
</cds-modal-header>
<cds-modal-body>
<div class="bx--tile stat-tile" style="padding:0; margin: 0;">
<div class="bx--row">
<div class="bx--col">
<!-- Main row -->
<div class="bx--row">
<div class="bx--col">
<p class="label">$yesterday.dateTime.format("%a, %d. %B %Y")</p>
</div>
</div>
<!-- /Main row -->
<div class="bx--row">
<div class="bx--col">
<p class="value">$obs.label.windSpeed</p>
<div class="bx--row">
<div class="bx--col value-max">
<p class="stat-label">$gettext("Max month")</p>
#if $yesterday.wind.vecdir.raw != None and $yesterday.windSpeed.max.raw != 0
<p class="stat-value"><span class="value" style="display: inline;">$yesterday.windSpeed.max | $yesterday.wind.vecdir.ordinal_compass | $yesterday.wind.vecdir</span></p>
#else
<p class="stat-value"><span class="value" style="display: inline;">$yesterday.windSpeed.max</span></p>
#end if
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</cds-modal-body>
</cds-modal>
#include "includes/footer.inc"Here the id attribute in <cds-modal id="user-modal-content-01"> is important! The ID (01) must match the ID used in step 2.
Tip For more clarity you can also save your custom modals content into a separate template and just call the template:
<cds-modal id="user-modal-content-01">
<cds-modal-header>
<cds-modal-close-button></cds-modal-close-button>
<cds-modal-label>Label (Optional)</cds-modal-label>
<cds-modal-heading>Modal Title</cds-modal-heading>
</cds-modal-header>
<cds-modal-body>
#include my-custom-modal-content.inc
</cds-modal-body>
</cds-modal>
#include "includes/footer.inc"- For now, you need to also copy this code to the template chosen in step 1, eg.
custom-content-after-stat.inc(Will be included by default in the next release):
<script type="text/javascript">
document
.querySelectorAll('[id^=user-modal-button]')
.forEach((button) => {
button.addEventListener('click', (event) => {
const modalButton = event.target.closest('[id^=user-modal-button]');
const modalContentId = modalButton.id.replace('button', 'content');
document.getElementById(modalContentId).open = true;
}, true);
});
</script>