Custom Made Dakboard Alternative for Raspberry Pi — Part 3

Part 1 — Dropbox App Setup for Image Hosting

Part 2 — Dropbox HTTP Requests with Golang

Part 3 — Serving an Image Slideshow Web Page Using Go Templates

Part 4 — Custom Calendar for Custom Dakboard (coming soon)

As a quick recap of what we’ve done so far:

1. We’ve registered an app with Dropbox to gain access to our images via HTTP requests
2. Created Golang Structs and Functions to make HTTP request to Dropbox to get image links
3. Added Concurrency patterns to our request for optimum efficiency

Now that we have our image links from Dropbox, we can display them using HTML. If you’re unfamiliar with HTML, CSS, JS, or anything “full stack” web developer, don’t worry. I’m by no means an expert at any of this either. But displaying an image on a web browser using html is as simple as

<img src="https://afinde-production.s3.amazonaws.com/uploads/981ebabb-5722-44c1-ad30-fc57fbc8ee9d.jpeg">

where <img> is just an image tag in HTML and the “src” inside of the tag is the image source. For the above example, I’m using a URL link of a random image I found on the web.

Open any text editor and save it as whatever you like, with the suffix “.html”. Insert the above image tag and save. Then open that file with a web browser, and you should see

So that is the main goal for part 3; we want to embed images into a webpage using our Dropbox image URLs, HTML, and Golang templates.

To start off, we need to create a server that listens on a specific port for a URL request. There are literally a ton of examples on this on the web. I’m not doing anything special here. We will place all website requests in htmlscripts.go.

Fig 1.) Server Function

Server() function will be called in main.go (not shown ). It is responsible for parsing any html templates we may have in our static folder. It will also setup our server with the handlers to route incoming traffic to the proper destination. Again, there are several examples dedicated to just the net/http package, so I won’t be detailing anything much further than this. The main thing to note is that there are two handler functions; homePage and ImageHandler. Adding homePage first….

Fig 2.) homePage function added

when a client navigates to the /home destination, homePage() will be called. It will begin the process of retrieving image links from Dropbox concurrently by kicking off our go routines we created last part (ListImagesFromDropbox & GetTemporaryLink). It will also render load.html for the client. Load.html will be a simple loading screen that is shown while the go routines are aggregating the links. There is a third go routine added in this function; Images(). Images is responsible for compiling all the image links from GetTemporaryLink in an array. It is also responsible for terminating the blocking feature of one of the channels.

Fig 3.) Images go routine code

Once the image links are aggregated together, they’re stored in a struct that is then sent across another channel that will be utilized later — imgLinks.

Now it’s time to create the loading page that will be rendered. Honestly, you can search the web for all sorts of loading page and the accompanying code. For instance, I will be using this page created by mathdotrandom

In your static folder, create a file called “load.html”, “index.html” and another folder called “css”. Inside css, create a file called mystyes.css

Fig 4.) Project folder contents

Now, in load.html, I simply add the html code as provided in the pen above. The same goes for the CSS. Copy and paste the CSS code from the pen into mystyles.css. The only manual thing you have to do now is direct your load.html to reference mystyles.css. This can be seen as the <link> tag under the <header> tag in the html code.

Fig 5.) load.html

Fig 6.) mystyles.css

One thing added to load.html at the top that wasn’t a part of the codepen

<meta http-equiv="Refresh" content="10; url=http://localhost:3000/images/" />

This is a browser redirect instruct. “content” is how many seconds the browser will wait until it redirects to the link referenced by “url”. The shown URL is the address for one of the two handler functions we created in the Server() function. Adjust the content parameter as needed, but ultimately, this is what is responsible for giving our go routines enough time to work before the image slideshow is rendered on the client’s screen.

Creating the image slideshow is fairly straightforward as well. In index.html, add the following:

Fig 7.) index.html

If you don’t understand everything above, don’t worry. It is straightforward html and javascript. The only thing that is Golang specific can be found on lines 19–21.

{{range .Images}}
<img class="mySlides w3-animate-fading" src="{{.}}" style="width:100%">
{{end}}

Everything containing {{}} is what gets parsed by the templates package in golang. Remember that our image URLs were aggregated in a struct called “data” (Fig 3. line 60). Data had a key called Images that refers to our list of URLs. That struct will essentially be passed into our html template where

{{range .Images}}

will loop through each URL in our array being referenced by Images. Each iteration of the loop will create a new <img> tag and make the current URL being iterated on {{.}} the source of the img tag

src="{{.}}" 

Finally, when all image URLs have been iterated over and a new <img> tag is created in the html script, the loop will be terminated

{{end}}

So if we had 1000 images in our Dropbox, we don’t have to code 1000 different <img> html tags. We let Golang and the templates package handle that for us dynamically.

This takes care of all html and css scripts. All we need to do now is finish the last handler function ImageHandler() and update main.go.

Fig 8.) ImageHandler function added to htmlscripts.go

ImageHandler is pulling in all URL links from the imgLinks channel and serving up our index.html while injecting the data (URL links) in the html template. Now make the following change to main.go

Fig 9.) main.go

And that’s it. Now open up your project folder directory in a terminal session and type

go run *.go

You should see the following output

Fig 10.) A running golang server

Now open a web browser and type

http://localhost:3000/home

and Voila! You should see your loading screen, and if you didn’t change the redirect delay in the html, in 10 seconds you should be redirected to your images slideshow. If you look at your terminal output, you’ll also see each time a link is being compiled.

Coming up next, we will start to implement the calendar functionality for our custom made Dakboard. Thanks for getting this far with me!