Raspberry Pi 4 Data Visualization GUI On 7" Touchscreen Display | FullPageOS

in this video I'll go over the process of building a data visualization display using a Raspberry Pi for an ATAR screen display as usual I'll go over the hardware assembly process step by step I'll then move on to explaining the software that we're going to need for setting up what we want to display as an example I'll be using the data reported by the World Health Organization as to the number of cases reported for a current global epidemic this will show how to use an API to query the data store it locally and then have it display using the Google charts API on the Raspberry Pi touchscreen display alright let's do this [Music] this video is sponsored by next PCB they're currently offering a free PCB prototype with your first order the ordering process in the website is pretty straightforward they offer a wide variety of options for manufacturing your PCBs as well as short lead times and very fast shipping now when you log in you're able to accumulate reward points that you can use to get discounted or free products with outstanding manufacturing capabilities and the excellent products that we sold I highly recommend next PCB for manufacturing and assembling your PCBs for this project I'll be using the Raspberry Pi for a blank micro SD card the Raspberry Pi official seven inch touchscreen display as well as a protective case to hold both the PI on the screen I'll of course use some additional hardware so that I can assemble and connect everything together as usual you can find all of this component in my little Amazon shop I'll leave a link to it in the description of the video my absolute favorite way for displaying anything on a screen that's connected to the Raspberry Pi is by using full-page OS I'll go ahead and download the latest image connect the micro SD card to the USB port of my computer and as I've shown before flash the downloaded image to the SD card this process is no different than if I were setting up raspbian as I've shown in another video after a few minutes was the image finish flashing we'll want to modify a couple of text files we'll want to edit the file name full-page OS WPA supplicant which contains the network credentials so that the operating system can connect to our local Wi-Fi as soon as it boots up I'll also change the country setting to match my own one more change I'll make is in the config file I'll set the LCD rotate parameter T twos so that the screen displays the image with the right-side up with those changes in place I can go head and eject the SD card and move on to assembly in the hardware this is a very straightforward process that you're welcome to follow along or skip ahead to get on with the rest of the video [Music] [Applause] [Music] [Applause] [Music] once we've assembled hardware and connected power to the pi the full-page OS should run immediately after a short boot up time we'll be able to see the welcome screen of the operating system displaying our own web page is pretty straightforward as well I'll go ahead and log in remotely using SSH from my computer and if you're unfamiliar with how to do this I have a couple of videos where I explain it in more detail once I'm logged in I'm able to see the default scripts that come with the operating system we'll be using one of them later so that we can refresh the screen periodically for serving the web page full page OS uses light httpd as its default web server I can request any of the default web pages by using the web browser running on my macbook in order to change the page that's displayed i'll start by navigating into the HTML directory making a director of my own that i'll call test and adding my own index.html file now if i add the name of the directory as the URL path i'll be able to see the page i created if i want to display the page on the screen itself i'll need to modify the full page OS text file inside the boot directory now when i reboot the page i just created is the one that will be displayed on the screen [Music] so now I can move on to display a data visualization page that I've been working on over the past few days I'll clone my demos repository for the raspberry pi and move the kovat 19 demo to the HTML subdirectory this is an example for visualizing data on a web page the first part of it is using a Python script to gather the data from an online API the API provides a useful way to query the data reported by the Center for System science and engineering at john hopkins university the data is both publicly available and has also been published in a peer-reviewed scientific journal the online API returns the reported data in JSON format but instead of querying the API every time I want to display data on the page I use the Python script to downloaded locally it goes back to the first day when data became available up to the time that the script was run if the data is already available locally doesn't query the API but if it isn't then it goes ahead and fetches it because the API doesn't report the number of cases reported by a country for a particular day I have to do additional processing you're welcome to go over the script and ask me any questions if you have them I'll go ahead and run the script so I can gather the data and if I go back to the browser running on my macbook I can point it to the directory unload at the included web page I'll spur you of the nitty-gritty details of what's going on behind the scenes but I will give an overview I'm using the bootstrap CSS framework for the styling and a Google charts API for creating the graph that you see in the body of the page I have the HTML elements that contain the information and the data is filled in by quickly using javascript the plot is created inside a function that I named generate plots using the line chart plot from the Google charts API in order to give the data to the plot I use an ajax request that sent to the web server running on the pi the request goes to the get data PHP script that I've written and whose contents are very straightforward it simply reads the text file that the Python script created and returns it to the client making the request now if I want this page to be displayed when the system boots up I'll have to go back and modify the full page os file once again now when the system boots up I should be able to see the changes what's great about using a web page is that the touch capabilities are already built in so with everything working the last two things I want to do are making sure that the data is fetch on a daily basis and refreshing the page every 5 minutes or so to make it a little more interactive to do that I'll edit the operating system scheduler that is called cron by using the chrome tab utility I'll add two entries to it one for running the Python script every day at midnight and the other for running the script I mentioned in our home directory this will refresh the page periodically which makes the system just slightly more interactive with those changes in place I don't even need to reboot the system to see them in action for example I can wait five minutes and see that the screen refreshes all by itself so there you have it I've shown you my preferred way to have a roster API displaying data on any screen that's connected to it and as an example I've used it to visualize the data for the number of cases reported for the country I live in during this worldwide epidemic please remember the basic things stay home if you can wash your hands for longer than 20 seconds and resist the urge to come in close contact with the elderly if you like my videos I invite you to my patreon page where you can chip in a buck or two that really helps me put in more time into the videos and release them quicker but whatever you do don't forget to Like subscribe or leave me a comment you can also interact with me on social media I'm on Instagram Twitter and Facebook and you can even use the community tab of the channel thank you for watching my videos and I will see you next time [Music]

Channel: ACROBOTIC

Views: 19,840

Keywords: ESP32, ESP8266, Arduino, IDE, NodeMcu, Tutorials, Makers, Learn, Guide, IoT, Internet Of Things, Raspberry Pi, Wireless, Communication, Weather, Creative, Sensor, Python, Programming, C++, Beginner, Electronics, DIY, MicroPython, 3d Printing, CAD, Fusion 360, Education, Tutorial, Intro, Introduction, Web, Developer, HTML, Datalogger, Project, Sensors, Data, Visualization, Webserver, Server, Client, App, WebApp, Wemos, Robot, Robotics, Robots, Easy, Adafruit, Sparkfun, OS X, Windows, Linux, Embedded, Kickstarter, RC, Fun, Build, Engineering

Id: rHwrwz3kv5o

Length: 10min 45sec (645 seconds)

Published: Mon Mar 23 2020