My DIY Personalized Interactive Disney World Gift
In August of 2021, I had the absolute blessing and time of my life going to Disney World with 3 close friends for almost a week. During the trip, I came up with giving them a special gift. Even while in line for the Tower of Terror, I began to secretly plan out my present. We had taken a ton of selfies as a group, and I wanted to make those a centerpiece of the surprise. That following Christmas, I gave them the special gift: An NFC enabled Disney World poster that launches an interactive map containing the pictures.
The gift
The 16x20" custom designed posters feature NFC tags that allow my friends to hold up their phones to any of the parks to open a custom web app.
Here is a video demo of how the mobile portion works:
Making the gift
I want to share the process so that others are also able to make gifts like these for their trips! The project underwent many different iterations before it finally reached where it is now. I believe the current design is extensible and reproducible for a vast amount of trips and locations.
Creating the poster design
The limitations of the size of the poster really impacted what I was capable of doing with the design. Initially, I wanted all the pictures to be on the poster, but then I quickly realized that photographs would be too small and would clutter up the design. Instead, I opted to include a map of each of the four parks with the date that we first visited them.
To create the images of the parks, I began with screenshots of Apple Maps. The “Explore” mode design was modern with an adequate level of detailing to recognize the different parts of the park, however, it included too many labels. To fix this, I created a simple custom Xcode project for MacOS and inserted a MKMapView view. Using this custom program, I took the screenshots of the maps. I then manually cropped out the park shapes, keeping only the visible parts of the parks, and then applied some color correction to make it pop. I also used the map shapes as a mask for the poster design.
With these completed for every park, the final design came along quite quickly. The addition of a Disney-like font gave it a special touch.
Adding NFC
Now the question was how to be able to have phones open up the appropriate webpage without having to install additional apps. I wanted something native that would work for almost anyone, iPhone or Android alike. One option was to include a QR code, but I felt this would break the clean simplistic design of the poster. I opted to use NFC technology instead, putting it behind the poster inside the frame. At first, I tried these round circle NFC tags. However, I found that they were inconsistent when using during my testing. I ended up buying a different larger rectangular NFC tag and these worked perfect. I positioned one behind every park in the design, covering as much surface area of the map as possible.
To program these, I used my iPhone and the free NFC Tools app by wakdev. I programmed the tags with a single URL record, pointing to my hosted web app.
Making the web app
The final part of the project was creating the interactive map to show the pictures. This was actually quite simple to achieve using SVG images. In Adobe Illustrator, I would place the image of the park that I made earlier, and then add a circle to the positions in the park that corresponded to pictures I wanted to include.
With the locations laid out in Illustrator, I exported the whole thing as a single SVG and embed it into my HTML as such:
To have the circles interact, I added onclick attributes and a special id to identify them:
When clicked, the called function would read the id of the circle and open the appropriate image using the basicLightbox library.
To create a thematic connection from the poster to the web app, I added the park cover image that fades out when opening the webpage. This was accomplished using simple CSS animations.
The result
I ended up with a really personalized Disney present, at a not-Disney cost. My friends loved the gift, and I still use my poster every time I want to relive that special week. Having specific spots associated with pictures allows me to replay the entire days in my head. This gift was a wonderful touch to finalize our magical trip together!
