Creating a 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. This seemed an interesting project and something that we could build with the Balena Browser block.

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

You can see here this is the back of the display

And if we zoom in we can see how we have a bracket to break out the VESA mount to enable us to attach a Raspberry Pi 4 enclosure and a mounting bracket.

We created a new Fleet within Balena for this project, downloaded an image to uSD Card and added this Raspberry Pi onto the BalenaCloud.

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

The Browser block basically allows us to run up a full screen “kiosk mode” webbrowser 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

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 but I am not sure if video acceleration is still operational. This needs further investigation

With this setup and a URL loaded we can now see a slide show!

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…

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 here

I then created a blank web page on a WordPress website we host and included that IFRAME link onto that page

I 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!

Here’s the Bill of Materials for the project, excluding the actual display itself, which 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 £13.00 source
Raspberry Pi 4 4GB £55.00 source
Power Supply USB-C 3A+ £6.30 source
16GB SD Card £6.00 source
Raspbery Pi VESA mount £2.50 source
Raspberry Pi Box £10.00 source
Amazon Basics Flexible Micro HDMI to HDMI Cable, 1,8 m £6.04 source
LINDY 40875 Low Cost VESA 50/75/100mm Adjustable Wall Mount Bracket £6.72 source
Total £105.56

I have done a little video on all of this for you here

Please do let me know what you think.

Ambassador Alex

1 Like

Here you go @mpous :smile:

Good job @ajlennon

Love it :slight_smile: