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…
balenaCloud is a container-based platform for deploying and managing IoT applications
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.
Furthermore, if we zoom in we can see how there’s a bracket to break out the VESA mount to enable us to attach a Raspberry Pi 4 enclosure and a mounting bracket.
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.
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!
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.
We then created a blank web page on a WordPress website we host and included that
IFRAME link onto that page
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&rm=minimal&loop=true&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!
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.
|HumanCentric VESA Mounting Plate Bracket
|Raspberry Pi 4 4GB
|Power Supply USB-C 3A+
|16GB SD Card
|Raspbery Pi VESA mount
|Raspberry Pi Box
|Amazon Basics Flexible Micro HDMI to HDMI Cable, 1,8 m
|LINDY 40875 Low Cost VESA 50/75/100mm Adjustable Wall Mount Bracket