In this video, we will be learning how to set up a Raspberry Pi in kiosk mode - meaning our Pi will automatically and seamlessly boot into a fullscreen webpage. This provides us humans with an elegant way to interact with the web, whether it's your Home Assistant or Adafruit IO dashboard, your calendar, or your locally hosted webpage, you'll be able to create a seamless way to interact with it.

Transcript

In this video, we'll be learning how to set up a Raspberry Pi in kiosk mode, so you can boot straight into a full-screen webpage to display your home automation dashboard, calendar, airport departure time screen, or whatever webpage you want. Just a technical note before we begin, this guide will be for Wayland, which is a software component that handles the interactions between applications and the screen. We do have a written guide link below if you want to use X11 instead, but Bookworm now uses Wayland by default. If you don't know what any of that means, don't worry, just use the Wayland method which we'll be doing in this video, and if you want to know what you're using, you can check by typing this command into a terminal. So the core skill of this all is that we're going to be learning how to set up a Raspberry Pi to automatically open Chromium into a full-screen webpage on boot, so we get this sleek and seamless display for whatever application you want.

Now this guide can be done on a Pi 5, or a 4, or a Zero 2W, or pretty much any Raspberry Pi, and with nearly any display. But for this guide, we're going to be specifically setting up a Pi 5 with this elegant little case and touchscreen combo. To make this, you will need a Pi 5, the official 7-inch touchscreen, the KKSB case, a keyboard and mouse, a microSD card that is at least 16GB, and a cooler for the Pi 5. We're just using the active cooler here. Let's start by installing Raspberry Pi OS onto the SD card. A clean and fresh install never Hz here, but an existing install will also work. If you need a hand installing Pi OS, we have some more instructions in our written guide linked below, which also has some more detailed instructions for everything we do in this video if you need a hand. Once we've installed Pi OS, whack that SD card into your Pi, and let's boot into it. If you are in the first-time setup, set it up as you will, there's not really anything essential here to do, just make sure you don't uninstall Chromium, remember your username, and ensure that your Pi is connected to the internet.

It's also a good chance to enable Pi Connect, which will allow you to access your Pi remotely from anywhere in the world with another computer, and we'll have a guide linked to that below. It's a really good complementary thing for this kiosk mode. Alright, as always, it's a good habit to update your packages before starting a project, and we can just do this in a terminal like so. This guide contains a lot of commands and code, and you can find them all linked in our guide if you want to paste them instead of writing them out, as they do get pretty long. With our system updated, we'll go ahead and enter the configuration menu with sudo raspi-config, and we're going to go into system options, boot-auto login, and we're going to say auto login to the desktop environment, and this will ensure that our Pi doesn't need a password when we turn it on. Now, to launch kiosk mode, we'll be writing a shell script, which is something we can use to execute and run commands and code. To do so, we're just going to go into a terminal, and we're going to use the nano editor to create a file called run-underscore-kiosk.

In here, we'll start by delaying this script for four seconds with sleep four, and then we will tell it to open up the Chromium browser, and for the website, we just whack the URL on the end. I'm going to do a really boring example, and I'm just going to open up this world clock here, and I'll just pop that web address on the end with the ampersand after it, like so. Now that's the command to open Chromium to that site, we're going to fill out some launch options, with the most important being we want it to open in kiosk mode, like so. Those are the core ones, but there's some other launch options that we might add that can also help us here. We can add these lines to suppress error and information bar pop-ups, and we can also suppress the scroll bar to only appear when we scroll, as it can be a little bit annoying with it constantly being on the side of the screen. And if you really wanted to, you could open this window in incognito, but I'm not going to, because it's not needed here. If you need to add any additional launch options, insert them here, but once we're done, we can save and exit by hitting ctrl x, y to save, and then enter, and that's all we need to do.

Now that we've written out our script, we need to make it executable and give it permissions with chmod, like so. Now we should be able to open up our file explorer, and in our home folder, we should see our script that we just made, and we can actually double-check that it works by opening it, executing it, and after a few seconds, it should open up Chromium in full screen, like so. Voila! This isn't going to work if you have Chromium open, so always close it before you test the script, and you can exit this by hitting alt f4. Now we need to set it up so that this script runs when the Pi boots up, and to do so, we're just going to go ahead and edit the Wayfire config file, which we can open up in the nano editor. We're going to navigate down to the bottom, and if yours doesn't have an auto-start section like mine, you can just create it like so, and in this section, we're just going to tell the Pi to run the script that we just created, and that's going to start when it boots up. Now an important thing here is that this path will change depending on what your username for your Pi is. Mine's called pi5, so I have slash home slash pi5 slash run kiosk, but you should replace that with whatever username you created for your Pi.

I'm also going to add some other important start-up options here. We're going to disable the screen saver and the display power management settings, and this will help ensure that our screen stays on at all times. Once we're done, we can save and quit again with ctrl x y and enter, and if we restart our Raspberry Pi, just typing reboot into the terminal might save you some time here, and look at that, we're pretty much halfway there already. Now a really annoying issue that might be happening right now is that cursor will always appear smack-bang in the middle of your display. You can see it if I wiggle it around here, and this might ruin our experience, so let's fix that. At the time of writing this video, there's very few robust ways to hide the cursor after a short delay in Wayland. You can do that very easily in X11, so we'll be just moving it to the bottom right of the screen so you won't see it, and this will work for most people, but if it doesn't work for you, check out our written guide as we may update it if we find a better method. So to do this, we'll be using Y. Tool, which is a fantastic little tool that lets us simulate mouse movements and mouse inputs, and we'll install it in a new terminal window like so.

Then we're going to create a new script with the nano editor again like so, and then in here we're just going to write some code to put it to sleep for eight seconds, and then use Y. Tool to move the mouse 10,000 pixels to the bottom right of the screen, which should be plenty enough. Ctrl x y and enter to save it, and then we're going to need to go ahead and make it executable and give it permissions exactly like we did before, but obviously now with hide cursor dot sh. We'll also need to open up that Wayfire config file again with the nano edit exactly like last time as well, and we're going to go back down to our auto start section, and then we're going to add another very similar line to tell it to start this script on boot as well. And remember you'll need to change that path as well with your username, that one always catches me off guard. And after rebooting we come into kiosk mode and that cursor disappears like so. Very nice. Now that is the core of this guide. We can seamlessly open up Chromium in full screen on boot, and using those same skills of creating a script to do something and then getting that script to start on boot, we can add a little bit of spice to this if we want.

We're going to do one more example of getting the pie to change between different pages periodically. If you have multiple tabs opening Chromium, hitting control tab will cycle to the next one, and we're going to simulate some keystrokes to do this automatically. But before we do that, we will need to edit our original run kiosk shell script, which we can just do in the nano editor again. And all we need to do is add another web address at the end. This line is getting a little bit too long for our terminal window here, but you can see we've got our first-time dot is tab that's going to be opened, and then the second one will be our wind map like so. Control X, Y, and enter to save. Now we need to install a tool called W type because Y dot tools can be used to simulate keystrokes. But at the time of writing, we found some issues with it. So we're just going to use W type instead. We'll start by creating yet another shell script. And then in here, we're going to sleep it for a little bit just to give the pie time to open everything. That's why we've been sleeping it, by the way. And then we will enter into a loop. And in here, we're going to press control tab and then sleep for 20 seconds. And we're going to keep doing that over and over.

You can replace this 20-second sleep with however long, however many seconds you want between tabs being cycle, save and exit that. And then we're going to run that CH mod line again to give it permissions and make it an executable. And then you guessed it. We're going to open up our way fire initialization script, go all the way to the bottom and add outline there to open it. And again, you need to change the path. And this first word out in front before the equal sign doesn't really matter. It's kind of just the name of the process, but I'm just naming them something relevant so I can know what's going on. Save that. And if we reboot that like so and it booted into full screen, no cursor, and it's now switching between tabs like so beautiful. Now, this is just one example of simulating keystrokes. And we can go back and edit that file in the nano editor. And by the way, we also have the choice to go into our home folder and open up keystrokes. There it is. And if we open it instead of executing it, this text file editor might be easier for you than the nano editor. And we can just save that exit like so. But I like using the nano editor. You can even get creative and hit control tab to move into a new tab and then immediately refresh it as you go into it to keep it updated.

This might be helpful because not every web page you use might get live data. The time. is is obviously always accurate and live. But that weather map, it needs to be refreshed to get real-time data. Or if you need to hit keys to toggle settings in your web page or navigate and zoom or whatever you need to do, we now have the skills to simulate keystrokes or mouse movement, put it in a shell script and run that script on launch. And with that, you now have the skills to make a custom pie kiosk for whatever you need. All right. That is the software side of it. For those of you that want to make this nice little case, let's go through assembling it. First, we'll unscrew the mounting brackets and the rear panel from the case. Do not lose these screws. On the back of the touch screen, we'll remove these standoffs completely. These are not needed anymore, so you can just put them in a safe place. Take the mounting plates and slip them under the display board like so. The tabs on the side should be facing down. In the bag of screws, you should find eight that are a bit longer than the rest of them. Use four of them to screw down that display board. You will also have four screws that have a bit of a larger head than the rest. Use these to mount the brackets. Then mount the Pi 5 using the four remaining long screws.

This is probably the easiest time to insert the microSD card. Four of the remaining screws to hold on the side panel. And now is a good time to plug in the cables. Just be careful with the display ribbon cable and the connectors as they can often be fragile. Pull out the connector tab and insert the ribbon cable, making sure that the pins are facing up here. Then push back down on the connector tab to lock it into place. Repeat this process on the other end and ensure that these cables sit nice and square in the connector. Now we'll need to connect power to the display. They're marked on the board and we'll connect the ground of the display to a ground pin of the Pi and the 5V to the 5V of the Pi. And we'll also connect the SCL and SDA I2C pins to the Pi. Here is a side-by-side of what all of these connections look like. Insert the power button extender into the back panel and 10 screws will hold it in place. And we are done. And here is our kiosk in action. We have a nice and sleek little device that provides us humans with a way to interact with a web page. There are some fantastic potential applications for this. The first that comes to my mind is a home assistant dashboard or really any webpage-based dashboard. I think this would work really well with something like Adafruit IO to control all of your MQTT devices.

Or we can display YouTube videos and playlists and you can write code to press F in YouTube to go into full-screen mode. Maybe you want to display a live cam stream from anywhere in the world. Or how about Luke the editor here having one set up with our YouTube subscriber count. Or you could even open a web page you are hosting locally, maybe from something like a Pico microcontroller which will let you interact with it. Link below if you want to learn how to do this. Whatever you want to use it for, you now have the skills to make it. So go out and build something cool. Till next time.

Comments


Loading...
Feedback

Please continue if you would like to leave feedback for any of these topics:

  • Website features/issues
  • Content errors/improvements
  • Missing products/categories
  • Product assignments to categories
  • Search results relevance

For all other inquiries (orders status, stock levels, etc), please contact our support team for quick assistance.

Note: click continue and a draft email will be opened to edit. If you don't have an email client on your device, then send a message via the chat icon on the bottom left of our website.

Makers love reviews as much as you do, please follow this link to review the products you have purchased.