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.
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&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!
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|
I have done a little video on all of this for you here
Please do let me know what you think.