Dashboard - Iframes

Various web based material can be configured to be displayed alongside instrumentation data in the VDV Dashboard interface.

Note: Make sure you give the Dashboard a name and an owner before inserting the iframes.

Iframe examples include:

- Google Maps (e.g. route directions, location marking, search results, street view)

- Weather Forcasts

- Web sites

- Twitter Feeds

- Youtube Videos

 

Google Maps

To include a Google Map component in your Dashboard:

1. Visit the Google API Map Generator found here.

2. Build your desired map

3. Copy the generated iframe code

4. Create a text component in your Dashboard where you would like to locate your map. Click the </> symbol to enter the code interface and paste your code there.

4. Request a free API key on the Google Developers site here.

5. Replace the three dots "..." found in your iframe code with your API key. As you click the</> symbol again you should find your map appear in the text component.

 

Weather Forecasts

To include a 48h weather forcast from yr.no:

1. Create a text component. Enter the code view by clicking the </> icon.

2. Paste the following code into the code view

<iframe src="http://www.yr.no/place/South_Africa/Western_Cape/Cape_Town/meteogram.png" style="margin: 10px 0 10px 0" scrolling="no" frameborder="0" height="350" width="850">\n'
+ '</iframe>

3. Search yr.no for your location. Copy the part of the url. showing your location and use it to replace /South_Africa/Western_Cape/Cape_Town/ 

Example: If my location is New York. Search New York on yr.no and find http://www.yr.no/place/United_States/New_York/New_York/

Replace /South_Africa/Western_Cape/Cape_Town/ with /United_States/New_York/New_York/ 

4. Close the code view by clicking the </> icon and your forecast should appear.

 

Web sites

To include a website in your Dashboard:

1. Create a text component. Enter the code view by clicking the </> icon.

2. Copy paste the following code into the code view and replace the Vista Data Vision url with your own.

<iframe src="http://www.vistadatavision.com" width="200" height="200"></iframe>

3. Adjust your pixel size as needed and close the code view again by clicking the </> icon again.

 

Twitter

To include a twitter feed in your Dashboard:

1. Sign into your Twitter account and go to Profile and Settings > Settings > Widgets > Create New and create the desired Twitter feed. Twitter will generate a code for your widget.

2. Create a text component. Enter the code view by clicking the </> sign and paste the generated code into the code view and click the </> sign again to close the code view.

 

Youtube Videos

To include a Youtube video in your Dashboard:

1. Open the desired video on Youtube.

2. Click Share > Embed and copy your iframe code.

3. Open a text component and enter the code view by clicking the </> icon. 

4. Paste your code and close the code view again by clicking the </> icon again.