Introduction to our Digital Marketing Display

We were contacted by local SMEs asking if we could help them to create a low cost, easily maintained digital marketing display to go into local shops here in Liverpool, UK. This seemed an interesting project and something that we could build with Balena Cloud so we took a look… 

The Hardware (Display + Computer)

At the present time, the SME had a pretty standard low cost display monitor with a VESA 100 mounting at the back, so we decided to look at how to mount a Raspberry Pi on the back of this, connect it to BalenaCloud and look at how we could then display slideshows of marketing material for them.

You can see the back of the display on the left.

The Cloud

Balena

Firstly, we created a new Fleet within Balena for this project, downloaded an image to uSD Card and added this Raspberry Pi onto the BalenaCloud. The dashboard for this can be seen below.

Afterwards, we then added two blocks as services, the Balena Browser block, and the Balena Audio block.

Additionally, the Browser block allows us to run up a full screen “kiosk mode” web-browser which we can then use to display a wide variety of content. The Audio block supports the Browser block for audio output although this is not really needed for the digital marketing display.

We can configure the block with Balena environment variables. Details are on the Browser Block GitHub page. We have configured it here for full screen mode with a specific LAUNCH_URL which it loads on startup

Also, one of the issues we found is that if the vc4-fkms-v3d overlay is loaded we don’t seem to get audio out. You can remove this and then you do get audio!

Google

So the next question is… how can we easily create some content to display on this screen. As it is a web-browser we can display pretty much anything you can display on a normal PC but for small business we wanted a really straightforward way to manage slideshows. Enter Google Slides…

Evidently, we created a simple four slide Google Slides slideshow as you can see here:

Not everybody realises how easy it is to publish Google projects directly onto the web, and you can do this with your slideshow with File->Publish To the Web

We create an embedded link as shown on the left.

NB. We modified the HTML a little to remove the Google Slides notification bar:

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSe4Xl9N9ZfXqC0wkIKCf8iFEvsklvPBMoaNO8boLQiWISafu1y2bOKIg7hWYvy1PA8WGSrPj79GOcn/embed?start=true&amp;rm=minimal&amp;loop=true&amp;delayms=10000" frameborder="0" width="1920" height="1080" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

So if you browse to this page you will see whatever the latest slideshow is!

See: https://www.williamsonsfamilybutchers.com/shop-display

And sure enough, when you boot up our Digital Marketing Display you see this slideshow!

Costs for the Digital Marketing Display

On the whole, the Bill of Materials so far for this project, excluding the actual display itself. It comes to about £106. This could be reduced by laser cutting the VESA mounting brackets and enclosure for the Raspberry Pi.