If you've ever been to a Walt Disney World Resort, you're probably familar with the image above (and you've probably heard the music associated with it). This is the Walt Disney World Today Channel. It is streamed on every TV unit in each individual hotel room. It plays themed music, and presents live data to resort guests about their stay, and resort information. The data is constantly updated, and themed to perfection
Some data involved in the WDW Today channel includes:
Today's Park Hours
Current Date/TIme
Live Weather
Forecasted Weather
I set out a challenege to try and develop something similar in terms of look and functionality, and that is what inspired this project which I call Romankiw Today.
Designing a Concept
I started in Adobe Illustrator, sketching different layouts for the user experience. I based the general layout from the WDW Today version, but added a few different elements that I felt would be helpful for guests in my house.
The main feature of my layout is the background image. A side bar provides key information while a personalized feel is given to the guest in the bottom left hand corner. WiFi information about my house is also made available in the bottom right hand corner of the screen.
Initial concept layout of Romankiw Today user experience.
One element I wanted to add was the Guest Information to the screen. When I was braintstorming ways to simulate this project with my own piece of software, I first wanted to focus on Guest Experience. My goal was to display "Welcome, *Guest Name*" where I could change Guest Name at any time AND schedule Guest Names to appear during certain time periods.
Displaying Guest Information
My challenge however is that I don't have experience with SQL servers, but most importantly, I didn't want to set up a specific server for this service. So I had to think hard about what I needed to do to solve this challenege.
I developed a solution based on Google Calendar. I figured if I could enter guests who are coming into some form of calendar, set a duration of stay, and a room location, I would be able to achieve my goal.
Google Calendar
I created different calendars for each room in my house that I plan on displaying the 'Romankiw Today' dashboard. So far, I have created 3 calendars:
Guest Bedroom
Living Room
Master Bedroom
Guests names are entered as the title of the event, and time span of the stay is entered. Time can be entered based on when the guest arrives, and when they will leave. The time assigned to the calendar value will tell Romankiw Today when to display/not display the guests name on the TV.
Google Sheets
After events are created in the calendar, I leveraged a Google Script to automatically import the Google Calendar events into a spreadsheet as shown below. The function automatically triggers any time an event is added/deleted/edited on the calendar. Therefore, the script only runs when it needs to rather than having a time based script run every 60 seconds.
The output of the script creates the following Google Sheet.
The next task is to filter the data. Part of the filtering process includes determining the Guests that are currently staying (meaning the current date in time is somewhere between the range of check in and check out time) and applying the Guest Name to the Room Location where they are staying. Using multiple different algorithms within Google Sheets, the data can be summarized in the following table.
Passing to Google Sheets API
The data stored in a Google Sheet can then be converted to a JSON call by using the Google Sheets API service. Calling my Google Sheet via the Google Sheets API provides the following output, which I can easily fetch using JavaScript within my HTML webpage.
The even better news about Google Sheets API is that the only limitation is 1000 calls/minute, which is overkill for my project. I call the API every second to update my guest information, even though that is overkill.
Fetching Park Hour Information
The next hurdle in the process was fetching accurate park hour data from the Walt Disney World website. The even cooler part of Google Sheets, is there is an IMPORTXML function to crawl webpages in order to piggyback data that is being pushed to them. Since WDW updates their park hours on their website, I decided to call the <div> the data was stored in and pass it through to Romankiw Today.
Like I said, this was all achieved using IMPORTXML and the following inputs. I basically call the park hours from the WDW website using the Park Names and Park Hours <div> class names they specify within their source code. I then parse through the data for the relevant parks and create a summary table. The data in the summary table is then passed through the Google Sheets API just like the Guest Names.
Fetching Weather Data
The final piece of data that needed to be fetched was weather data. I opted for OpenWeatherMap since their platform is very established, and used by a lot of big name developers. Calling the data only requires location, and units, which I assigned based on my current living arrangements.
Bringing everything together
Now I have my guest information, park hours, and weather data, so I started building a webpage based on the Adobe Illustrator concept I had made originally. I linked my API calls to different text IDs within the webpage, and the data passes through accurately.
I then developed the following 'webpage' in HTML, CSS and fetched my API with JavaScript.
Remember, all the data is dynamic so changing any 1 data source applies itself automatically to the webpage including if park hours are updated, guest information is changed, or the weather changes.
Below is a video of me filling out the form, and sending data to the webpage via my Google Form about updated guest information. As you can see, the transfer of information is almost instantaneous.