Probably most of you have heard or visited hackathons. I'd like to tell you about the unusual one. CanonHackathon is a first projector hackathon in Poland, organized by Google Developers Group Warsaw and Canon. The rules were easy: teams had 24 hours to make a video mapping project.
The goal of CanonHackathon was to prove that video projectors can be used not only for watching movies.
Teams came up with different ideas. Above you can see the team that created an interactive art installation made out of 3 projectors and Arduino and a plant. Another team created a project that helped people to connect a lot of projectors together in an easy way.
My favorite project used projectors for controlling smart home devices. Projector, Microsoft Kinect, and a team of smart people were the keys to success.
There was a team that created a music visualizer. Imagine yourself playing piano and your whole room changing colors and reacting visually to you performing. You could also play your favorite song and literally "see the beat".
Here we'll discuss the Instagram slideshow app we've created. It helps event organizers to make a slideshow with pictures that have a particular Instagram tag. Pictures are mapped on a cube, so it looks more interesting than just a flat wall, commonly used during events. A user doesn't need any PC. All you need is an Android phone and a Chromecast. In the next section, we'll overview the technical part of the application.
Let's make an app. Architecture setup
We'll use the InFullMVP library for implementing a Model View Presenter architecture in our app.
Moving, scaling and rotating imageView
Alright, now we have an MVP app with an empty activity. Let's give it some content.
Imagine yourself a cube in front of you. Projectors are displaying an image from your phone on this cube. And to fit a picture in a cube we have to move our picture around, scale it to make it fit in a cube, or any other object in front of you. So after it'll have the same effect as in the picture above. For that, we can use an open-source library called TNImageView.
Add the TNImageView library to your project. Add jitpack.io to your root build.gradle at the end of repositories:
Include the following dependency:
Create an activity layout so it looks like this:
Now let's initialize a TNImageView:
Matrix transformation for imageView
Imagine a situation when a cube in front of you is rotated ~30°. Now we have to skew an image to fit. Here is how we do it.
So now we can skew our ImageView
Fetching images from Instagram by tag name
Finally, we can fit our Instagram picture on a surface of a cube or a backpack for example. But our app is kind of boring because it has only 1 picture. Let's fetch images from Instagram by a tag and show it.
First, we have to get an Instagram Access Token. The fastest way is to use Elfsight token generation service: All instructions are here
1. Generate POJOs from JSON that Instagram returns you. Here is more info on how to do it. Your code should look like this, after removing all unused properties:
2. Define API service interface:
3. Initialize HTTP client Retrofit. The whole main module should look like this:
4. Fetch images from Instagram:
5. For starting slideshow we can use Interval
operatorObservable.interval(delaySlideshow, TimeUnit.SECONDS. It will run loadImage() method every 3 seconds. Please pay attention to that we first load a picture and after we make a skew transformation on it. Why? Because if we'll not transform picture, we'll lose the previous state of a transformation. Add this code to MainActivityPresenter
6. Show loaded and transformed pictures on a screen. Add this code to MainActivityView:
7. Always remember to dispose of disposables in a Presenter class to avoid memory leaks:
8. Connect Chromecast to the projector. In your phone go to Settings -> Connected devices -> Cast -> Select your Chromecast.
So now we have a slideshow on almost any 3d object in our room.
Organizers have told that that's not the last CanonHackathon in Poland. A lot of teams had few ideas but had time to implement only one.
Have you ever tried to do some video mapping projects? Would you like to try? Do you find Instagram API easy to use? What would you change or add in that prototype app? Feel free to share your experience.