Skip to content

Part 4. Customize It

Jump to bottom
jrbail01 edited this page Feb 7, 2019 · 6 revisions

Change the iframe embed

If you take a peek at the main HTML file in this example, dashboard.html, you will see the following:

<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
		<title>Weather Dashboard</title>
		<link rel="stylesheet" type="text/css" href="dashboard.css" />
	</head>
	<body>
		<img src="nashville.jpg">
		<div class="is-embed">
			<iframe src="https://iot.app.initialstate.com/embed/#/tiles/bkt_ebon1jp1i2kqc"></iframe>
		</div>
	</body>
</html>

Notice our iframe embed code on line 10. You can very easily replace this iframe embed code with your own. This will turn our example data dashboard into your personal, customized data dashboard.

*Note: When you make changes to your files, you will need to restart your web server to see those changes take effect.

Change the header image

Line 8 of dashboard.html displays the header image.

<img src="nashville.jpg">

This image is located in the public subdirectory of this example project. For example:

$ ls /home/pi/simple-dashboard-server/public
dashboard.css  franklin.jpg  nashville.jpg

You can upload your own image to your Pi (specifically, to the /home/pi/simple-dashboard-server/public directory) and change this line of HTML code accordingly. To upload an image to your Pi remotely, you can use SCP (secure copy). Follow the instructions at https://www.raspberrypi.org/documentation/remote-access/ssh/scp.md.

Fancy animated image

Static images are boring. Let's give our header image some life by making it slowly zoom in and out.

This is a simple HTML/CSS trick. Since we are hosting a web server, we can use whatever HTML/CSS tricks we want. Change dashboard.html to the following (notice line 8 from the original is replaced by eight new lines of code):

<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
		<title>Weather Dashboard</title>
		<link rel="stylesheet" type="text/css" href="dashboard.css" />
	</head>
	<body>
		<div class="header-wrapper">
		  <div class="zoominheader">
		    <div class="zoomoutheader">
		      </br></br>
		      </br></br>
		    </div>
		  </div>
		</div>		
		<div class="is-embed">
			<iframe src="https://iot.app.initialstate.com/embed/?org=iot#/tiles/bkt_1ecfj11jrb6p74w"></iframe>
		</div>
	</body>
</html>

Add the following to the end of your CSS file at public/dashboard.css (leave the original CSS in place, simply add these to the end):

/* The outermost element*/
.header-wrapper {
  overflow: hidden;
  width:100%;
  height:288px;
  text-align:center;
}

.zoominheader {
  width:100%;
  height:288px;
  text-align:center;
  background: url("nashville.jpg");
  background-size: auto;
  background-attachment: fixed;
  background-repeat: repeat;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-animation: zoomin 75s ease-in infinite;
  animation: zoomin 75s ease-in infinite;
  transition: all .5s ease-in-out;
  overflow: hidden;
}

/* The innermost element*/
.zoomoutheader {
  width:100%;
  height:288px;
  text-align:center;
  background: none;
  -webkit-animation: zoomout 75s ease-in infinite;
  animation: zoomout 75s ease-in infinite;
  transition: all .5s ease-in-out;
  overflow: hidden;
}

/* Zoom in Keyframes */
@-webkit-keyframes zoomin {
  0% {transform: scale(1);}
  50% {transform: scale(1.5);}
  100% {transform: scale(1);}
}
@keyframes zoomin {
  0% {transform: scale(1);}
  50% {transform: scale(1.5);}
  100% {transform: scale(1);}
} /*End of Zoom in Keyframes */

/* Zoom out Keyframes */
@-webkit-keyframes zoomout {
  0% {transform: scale(1);}
  50% {transform: scale(0.67);}
  100% {transform: scale(1);}
}
@keyframes zoomout {
    0% {transform: scale(1);}
  50% {transform: scale(0.67);}
  100% {transform: scale(1);}
}/*End of Zoom out Keyframes */

Restart your web server and notice the new image animation at the top. You can change the speed of the zoom by changing the four instances of 75s in the CSS file to whatever time you like.

Conclusion

This example gives you a simple foundation for building your own customized dashboard using basic HTML/CSS and iframe elements.

<< Part 3: Run It

Initial State (https://www.initialstate.com)

(c) 2019 Initial State Technologies, Inc.

Simple Dashboard Web Server

Clone this wiki locally