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.
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.