Info
Content

Externally Embedded Panels (Clock, Weather, Radar, Calendar, Moon)

all_embedded_items.jpg

All five of these embedded iframe panels are cross platform compatible.

This tutorial is cross platform compatible.

Dependencies:

1. Clock

clock.jpg

Dependencies:

This is an embedded service taken from Clocklink.com where you can choose styles and functionality from many different options. Copy the code from below and paste it into a Grafana panel, or head over to http://www.clocklink.com to choose your own style.

This widget does not require any further modification to match your location or settings.

This is the code I used:

<center>
<iframe scrolling="no" frameborder="no" clocktype="html5" style="overflow:hidden;border:0;margin:0;padding:0;width:227px;height:75px;"src="https://www.clocklink.com/html5embed.php?clock=008&timezone=CST&color=black&size=227&Title=&Message=&Target=&From=2019,1,1,0,0,0&Color=black">
</iframe>
</center>

2. Weather Forecast

weather_forecast.JPG

Dependencies:

This is a sweet animated 7 day forecast widget. This widget refreshes itself. I will share the code I used below, but keep in mind that you are going to have to modify the code in order to be relevant to your location. (Going to http://www.forecast.io to get the embed code may be your best bet here) In addition to that, in order to get this <iframe> to fit properly on my dashboard, I had to use a bit of Javascript to adjust the scale of the widget itself using a zoom factor that you *may* have to adjust yourself in order to get it to look right on your display.

You will likely have to visit this website directly to adjust the settings to reflect your location.

This is the code I used:

#embedweather {
    zoom: 0.71;
    -moz-transform: scale(0.80);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.17);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.85);
    -webkit-transform-origin: 0 0;
    width: 200px;
</style>
<script type="text/javascript">
var weatherProperties = 'lat=30.445133&lon=-87.210937&color=#FFFFFF&text-color=#FFFFFF';
 
// initial load
document.getElementById('embedweather').src = 'http://forecast.io/embed/?ts=' + (Date.now()) + '#' + weatherProperties;
 
// refresh
var weatherRefresh = setInterval(function() { document.getElementById('embedweather').src = 'http://forecast.io/embed/?ts=' + (Date.now()) + '#' + weatherProperties; }, 1800000);
 
</script>
<iframe id="embedweather"  src="#" style="margin: 0; padding: 0; border: none; width:800px; position:relative; top:-50px; overflow:visible; margin-bottom: -70px; height: 500px;"></iframe>

3. Weather Radar

live_radar.JPG

Dependencies:

This is a really nice live radar widget that displays current radar in your area over the last half hour. This widget refreshes itself. I did not have to input any javascript to adjust the scale of this widget.

You will likely have to visit this website directly to adjust the settings to reflect your location.

This is the code I used:

<iframe src="https://www.rainviewer.com/map.html?loc=29.7978,-86.9183,7,4&oFa=1&oC=0&oU=0&oCS=1&oF=0&oAP=1&rmt=2&c=1&o=83&lm=1&th=1&sm=1&sn=1" width="100%" height="100%" frameborder="0" style="border:0;height:100%;" allowfullscreen>
</iframe>

4. Moon Phases

moon_phases.JPG

Dependencies:

We are amateur astronomers in my house, and it's nice to know which phase the moon is in on any given occasion. I did have to input some javascript on this widget in order to adjust the scale and make it fit properly on my display.

Aside from the scaling, this widget does not require any further modification to match your location or settings.

This is the code I used:

<style type="text/css">
#embedmoon {
    zoom: 0.90;
    -moz-transform: scale(0.65);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.65);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.7);
    -webkit-transform-origin: 0 0;
</style>

<iframe allowtransparency="yes" scrolling="no" style="border: 0px solid #888; width:190px; height:283px; overflow: hidden;" src="https://in-the-sky.org/widgets/moonphase.php?skin=1" id="embedmoon"></iframe>

5. Google Calendar

google_calendar.JPG

Dependencies:

Google Calendar has lots of options for embedding your calendar. You will have to get the embed code for your personal calendar and switch it out with mine.

You will have to be logged into your Google account on the same browser in which you're viewing Grafana.

This is the code I used:

<iframe src="https://calendar.google.com/calendar/embed?height=600&amp;wkst=1&amp;bgcolor=%23ffffff&amp;ctz=America%2FChicago&amp;src=b3MzNGdldWVjMXZsMTRta3NlMjA4ODg3N29AZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;color=%23795548&amp;showTitle=0&amp;showNav=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;mode=AGENDA" style="border: 0; opacity: 0.5; height: 800px; width: 100%;" frameborder="0" scrolling="no">
</iframe>

There's a few steps to getting the calendar to display like this on your dashboard:

1.1 Select Your Calendar at calendar.google.com

And on the left-hand toolbar, match your settings to this:

calendar_settings.JPG

1.2 Scroll down and click Customize

 

scroll_down_to_customize.JPG

 

1.3 Adjust the settings on the left like this:

use_these_settings.JPG

1.4 Then copy the embed code

copy_think_code.JPG

1.5 Embed the code into a Grafana text panel

And make sure the panel is set to "HTML mode".

embed_google_calendar.JPG

 

 

Back to top