Introduction: Turn an Unused Smartphone Into a Smart Display

By www.davidverweij.com
About: PhD Student at Newcastle University, United Kingdom
Deze tutorial is in het Engels, voor de Nederlandse versie klik hier.

Do you have an (old) unused smartphone? Turn it into a smart display using Google Sheets and some pen and paper, by following this easy step-by-step tutorial.

When you have finished the tutorial, you will have turned your phone into ‘smart display’. The screen of your phone will then change colour depending on what you want the display to represent. For example, the screen could turn blue on the left when it will rain, and turn yellow on the right when the temperature is high (see also the picture at the top). Now, when you add a little drawing in front of your phone it shows you, and anyone else at home, what the colours mean.

Since your choice of data and your creativity with drawing allows for countless possibilities, we just can’t imagine what you will use your smart display for!

Supplies

  • Roughly 1 hour of time (a bit longer if you want to experiment some more)
  • A smartphone that can connect to your Wi-Fi (preferably one you don’t need for a while)
  • Some pen and paper
  • A computer/laptop to set things up
  • A Google account(for using Google Sheets - you need to be ~16 years or older)
  • An IFTTT.com account(for connecting it to data - you need to be 18 years or older)

If you can, follow this tutorial with someone else - perhaps with the whole family. After all, if you place your smart display in, for example, the living room, everyone will be able to enjoy it! You can follow all steps together, or divide some tasks (such as drawing or setting it up). The images should give you a rough idea of each step, but don't contain all details. Make sure to read the textual steps as well!

Younger than 18 years? Please be aware that for the use of IFTTT.com you need to be at least 18 years old. If you are younger, ask your parent or guardian to do these steps together on their account. The age limit for Google services, varies per country, but is generally 16. We suggest that, if you are 18 years or younger, to follow this tutorial together with a parent or guardian.

Reset your phone if you can. If you are using an older smartphone, consider resetting it to factory settings (warning, this will delete everything on the phone!). Either way, it is always good practice to update the software and security features to the latest version (as far as it goes). We wrote a bit more info about the safety of older phones here.

Step 1: Copy the Google Sheet

For this step, you only need a laptop/computer (unfortunately, a phone or tablet won't work).

Normally, Google Sheets is mainly used for storing numbers in large tables - but because it is online and very flexible, you can do quite interesting things with it. For this tutorial, we will use it as the 'brain' of your smart display. We have prepared a Sheet for you with everything you need - which works almost like an app. With it, you can create the colourful backgrounds for your phone and easily set up rules depending on the data you'd like (for example, 'turn blue when it rains'). We need to copy this Sheet using the link below and prepare it in a few quick steps.

  • Step 1.1 - On a laptop/computer (unfortunately this doesn't work on a phone) go, copy the Google Sheet from here. This will probably ask you to log in to a Google Account.

'Publish' your Google Sheet

The following steps will connect the Sheet to the internet, which helps you to connect your phone in the next section. We only have to click a few buttons, but it might look somewhat messy. This is because we are basically turning your Sheet into a little app. Most likely you have never done this before, and that is why Google will show you a warning at some point. If you copied the Google Sheet from the link above - it is safe to continue. However, if you want to know precisely what your app will do, we explain it in more detail on our website here. At any point in time, you can always undo the 'publishing' of your app by following these steps.

Once you have the Google Sheet in front of you:

  • Step 1.2 - Move the Sheet into a folder on your Google Drive, by going to File > Move. Enter a name for the folder, such as 'phonegrown', click the tick box and Move Here.The Sheet needs to be within a folder to work appropriately with the IFTTT website.Write this name down somewhere, we will need it later.
  • Step 1.3 - Press the red Help / About button. This will ask you to Authorise the script. You might need to log in with your Google Account
  • Step 1.4 - Click Advanced (in the bottom left) and then, at the bottom, click on Go to phonegrown (unsafe). It considers it 'unsafe' since it doesn't know you - as a developer - and Google has not reviewed this script.
  • Step 1.5 - By clicking on Allow, you allow (or authorise) your Google Sheet to connect to other services on the internet (including your phone in the next step).
  • Step 1.6 - Click the purple Setup button. You should see a popup saying 'Setup step 1 complete!'.
  • Step 1.7 - Go to Tools > Script Editor in the Google Sheet menu bar. This opens a new tab.
  • Step 1.8 - Click on Publish > Deploy as web app in the menu bar on that tab.
  • Step 1.9 - Click Update, and
  • Step 1.10 - Copy the long URL link shown in the popup, and
  • Step 1.11 - Paste this next to the PASTE APP LINK on the Home screen of your Google Sheet.

That's all set! You can now close the extra tab, but keep the Google Sheet tab handy.

Step 2: Setup the Phone

For this step, you only need a mobile phone that is connected to your Wi-Fi and its charger.

Once you found an unused phone for this project (don't worry about cracked screens), we need to change some of its settings and connect it to your Google Sheet.

Adjust phone settings

Normally, phones dim their screen in dark spaces or when you don't use it for a minute or so. But, to make it into a smart display we need to make sure its screen always stays on. This won't consume much energy, but we wrote more details about that here. Adjusting your phone's settings can be different per phone, but will most likely be something like this:

  • Step 2.1 -
    • For Android phones, enable the developer mode by tapping 7 times on the build number in Settings > About Phone. Then in Settings > System > Developer Options turn on Stay Awake (when charging).
    • For Apple devices, we can set the Auto-Lock to Never, which you can find in Settings > Display & Brightness for newer models, or Settings > General > Auto Lock for older ones.
    • Here are more details and pictures on how to do this for Android or iOS.
  • Step 2.2 - Make sure you disable the Adaptive brightness (or Auto-Brightness) of your phone. We want to make sure the screen is always visible through the paper.
    • For Android, you can most likely change this in Settings > Display > Sleep. On newer devices, you can't set the sleep time to 'never'. In that case: download a simple app to keep your screen on and bright, we used this Keep Screen On app that worked for us!
    • For Apple devices, this is often in Settings > General > Accessibility > Display > Auto Brightness.

Don't forget to set the screen brightness to 100% and, of course, plug in a charger!

Connect it to the Google Sheet

On the phone,

  • Step 2.3 - Go to davidverweij.com/phone-grown/phone and enter your Phone Grown ID which you can find in the top of your Google Sheet at the Home tab.
  • Step 2.4 - You should now be connected! If your phone supports it, you can click on Toggle Fullscreen to go fullscreen.
  • Step 2.5 - On the Google Sheet on your laptop/computer, go to the [BG] 1 tab (see bottom of the webpage) and click on Test in the top left. Did your phone's screen change colour?

That's it!

Step 3: Add Some Data

For this step, we only need the laptop/computer, and possibly a parent/guardian if you are 18 or younger.

There are various ways in which we could let your phone respond to different types of data, but in this tutorial, we will be using a website called IFTTT, or "If This, Then That". This website allows us to create connections with different types of data, which they call Applets. Lucky for us, they support Google Sheets! With a free account, we can make up to three of these Applets. If you don't have an IFTTT account yet, you can sign up at ifttt.com/join. Note that through IFTTT.com you might need to log in to other services (such as Google). Read more on IFTTT's privacy policy and Google's advice on third party access.

Create a weather applet

On IFTTT.com we can create applets. These are little recipes that tell the IFTTT service what to do. An applet consists of a Trigger that 'triggers' when something happens, and an Action, that 'acts' when that happens.

For this tutorial, we will create two applets that will both influence the phone. One will look at your local temperature, and the other will let you respond when you send your smart display an email. First, let's set up the weather applet.

First this:

  • Step 3.1 - On IFTTT.com, go to Create Applet.
  • Step 3.2 - Click on If This, andsearch (and click) for Weather Underground.
  • Step 3.3 - Choose the Current temperature rises above trigger, and fill in the details. For example a temperature of 15 degrees Celsius at your hometown. Press Create Trigger to save this.

Then that:

  • Step 3.4 - Click of Then That andsearch (and click) for Google Sheets.
  • Step 3.5 - Choose the Add row to spreadsheet action and fill in the details. These details need to be very accurate (At this point, you might need to approve IFTTT access to your Google (Drive) Account to read and write to the Google Sheet) :
    • Spreadsheet name should be identical to the name of your copy of the Google Sheet we made earlier. You can find (and, if you want, change) this name on the very top left of your Google Sheet. If you haven't changed it yet, it will be something like 'Copy of Phone Grown'.
    • Remove everything in the Formatted row, and replace it with something more readable, such as 'temperature'. Write this name down somewhere, we will need it later.
    • Remove everything in the Drive folder path, and replace it with the name of the folder you moved the Sheet into, for example, 'phonegrown'.
  • Step 3.6 - Press Create Action, then Continue, and then Finish to finish your Applet!

It should now show you a Connected Applet. Nicely done.

Create an email applet

Now, we will set up the email applet. These are the same steps as above, but for the If This we now look for Email > Send IFTTT any Email

First this:

  • Step 3.7 - On IFTTT.com, go to Create Applet, Click on If This and search (and click) for Email followed by Send IFTTT any Email trigger.

Then that:

  • Step 3.8 - Click of Then That and search (and click) for Google Sheets followed by Add row to spreadsheet action and fill in the details. These details need to be very accurate:
    • Spreadsheet name should be identical to the name of your copy of the Google Sheet.
    • Remove everything in the Formatted row, and replace it with something more readable, such as 'email'. This needs to be different than the other applet you created. Write this name down somewhere, we will need it later.
    • Remove everything in the Drive folder path, and replace it with the name of the folder you moved the Sheet into, for example, 'phonegrown'.
  • Step 3.9 - Press Create Action, then Continue, and then Finish to finish your Applet!

Great! We should now have two IFTTT applet that both tell your Google Sheet when something happens. We won't be able to see any effects from the weather applet the temperature actually rises, but we can test the email applet!

  • Step 3.10 - On the Home tab of your Google sheet, enter the names you used for the formatted rows in your IFTTT applets, in the first rule the 'email' and the second rule the 'temperature' one, and activate the rules by ticking the tickboxes under Activate. The background colour of the rules should now turn orange.
  • Step 3.11 - Using your Google email account, send an email to trigger@applet.ifttt.com. It will recognise your email, since you logged in to IFTTT with Google. The subject and content of the email don't matter.
    • Give it a minute or two, did your phone change colour? You can check the [Data] History tab on your Google Sheet to see if the email data was received.

That's it! Now let's prepare the screen itself.

If you do not see an email entry with timestamp in the [Data] History tab, but do see it in the [Data] New tab, press the purple Setup button, and try again by sending another email. If you don't see any text coming into your Google Sheet, double check the details of the email 'applet' on IFTTT.com, and make sure the folder path and name of the Google Sheet are identical.

Step 4: Draw a Display

For this step, grab your phone, a piece of thin (or standard printing) paper and a pen or pencil.

What we like about smart displays is that they add something visually to the home. They can tell everyone in the home when something is happening, without a loud 'beep' from someone's phone. To make sure your smart display fits your home, skills and style, we will create our own! Instead of fiddling digitally, we are going to create a drawing, physically. If you are doing this tutorial with the family, try to get everyone to add something to it! Before we draw, we first need a holder for our phone.

Decide how to display your smart display

To make sure that your smart display can be seen from different places in the room, we need to make it stand vertically. This is entirely up to you and depends on where you want to have it. With permission of your parent or guardian, you could, for example, hang the phone on the wall with some hooks and wire, attach it to your fridge or perhaps place it in a phone stand. Either way, make sure the phone is plugged in and charging. If you don't have a phone stand, we found and followed a quick and easy tutorial on folding a phone stand out of an A4 sheet of paper by Wellington Oliveira (@Easy Origami) on Youtube. It takes no more than 10 minutes and fits nicely with the paper drawing in the next step.

Start drawing

At the end of this tutorial the phone will highlight areas of your drawing to indicate something happened, or in our case, when the temperature rises and when an email has been sent. Think about a drawing that could represent both of these things at the same time, or perhaps create two separate drawings on the same paper. The drawing doesn't have to be literal, it can also be abstract - anything you want really! Since the background highlights will be quite colourful, we suggest sticking to a line drawing with a pen or pencil. Don't worry about getting it right the first time, you can easily try a few drawing or change the drawing later!

  • Step 4.1 - Once you have found a stand or location for your phone,
  • Step 4.2 - Place a piece of white paper a bit larger than your phone, over the phone. Use thin, standard copier thickness (~70/80gsm) so that the phone's screen can shine through. Roughly mark the corners of the screen with some dots.
  • Step 4.3 - Take the paper off the phone, and start drawing! You can use the marked corners to know where the screen lights up later on.
  • Step 4.4 - Place it back in front of the phone, and press Clear Phone on the Home tab of your Google Sheet.

You can always come back and change or redo the drawing if you feel like it!

Step 5: Create and Connect Backgrounds

This step is on the laptop/computer, but keep your phone and drawing close by.

All that is left to do is to highlight your drawing when the data says something is happening. Using the Google Sheet, we will now indicate which areas should light up, and in which colours, using backgrounds. Let's first focus on the part of your drawing that indicates the high temperature.

Design two backgrounds

Once you have the Google Sheet in front of you:

  • Step 5.1 - Go to the [BG] 1 tab (on the bottom) and change the background colour of the cells/squares within the 'phone frame' that roughly corresponds with the part of your drawing that has something to do with the weather.
    • You can do this by selecting (click and drag) the cells/squares, and clicking on the fill colour tool: the little paint bucket in the toolbar.
    • The colour is totally up to you! You can even give different cells/squares different colours.
  • Step 5.2 - Click on the Test button to test the colours on your phone. Adjust the background and keep testing until you are satisfied.
  • Step 5.3 - Now, do the same for the email applet, on the [BG] 2 tab (on the bottom). Repeat the steps above but now focus on the parts of your drawing that have something to do with emails.

On the phone, if two or more backgrounds are shown, overlapping coloured cells/squares will mix their colours. If you don't want this, leave the cells/square black if you use them in another '[BG]' tab.

Connect the data to the backgrounds

With your backgrounds ready to go, we need to tell the Google Sheet which one to show on your phone when something happens, the rise in temperature or receiving an email. We have done this partially in step 3.10. On your Google Sheet:

  • Step 5.4 - Go to the HOME tab (on the bottom) and fill in the dotted cells/squares for rule 1 and 2.
    • In the first dotted cell, enter the name that you entered for the Formatted row for your email and weather 'applet' in Step 3, for example, 'email' for rule one, and 'temperature' for rule two. This needs to be exactly the same.
    • In the second, choose the background you created for the weather, most likely [BG] 1 and [BG] 2.
    • In the third and fourth, enter how long you want these backgrounds to show on your phone when an applet 'activates'. For example, if 'temperature' then show '[BG] 1' for '20' 'minutes'.
    • Activate the rules by ticking the left tick-box on the right.

If your click on the most-right tick-box you can test a rule. This will pretend that the data was received by the Google Sheet, and instruct the phone to show that background for the duration that you indicated. If you want to 'undo' that test, click on 'Clear Phone'.

Step 6: Enjoy and Experiment!

Your smart display is now ready to go! Place it in a location where you and your household can see and notice when different backgrounds are triggered. Of course, you can experiment a bit more with different types of data using IFTTT, different drawings and different backgrounds. Just follow the steps above for any of these if you'd like.
Also, at any given time, you can visit the Google Sheet and browse through the [DATA] History tab. This will show you all past times when one of your IFTTT applets told your Google Sheet that something happened.

Other features

There are a few additional options and features you could explore:

  • You can create more backgrounds (up to 10) by clicking the blue New Background button on the Home tab. You can reset a background by clicking on the green Clear button on the background tab itself.
  • You can set times for the phone to 'turn off' by changing the from and to times in the 3rd, green, bar on the Home tab. During these times, the phone will not respond to data and only show a black screen. This might be useful for during the night when you don't want your smart display to light up.

Data suggestions

There are a lot of things you could use your smart display for, and because of that, you might not see the wood for the trees. With IFTTT, some applets are designed to work with specific devices and brands. We have listed several things that we think might be a bit more relatable and more common to use. Have a look at these, but foremost, explore, try out and be creative!

For example, you could let your smart display show ...

If you have a smart device, you could connect your smart display to your ...

Deleting your smart display

When you are finished with your smart display, you can easily undo the web app, Google Sheet and phone connections.

  1. In the Google Sheet, go to Tools > Script Editor. On this new tab’s menu bar, go to Publish > Deploy as web app and choose Disable web app in the top right of the popup.
  2. On your phone, go to davidverweij.com/phone-grown/phone If it is connected to your Google Sheet, press Reset Connection.
  3. For any data (or ‘applets’) you made wit IFTTT, go to IFTTT.com and ‘disconnect’ these applets.

You have now removed any connections we have set up in this tutorial.

More info

If you are curious about the background behind this project, how your privacy is ensured or how the smart display works, visit davidverweij.com/phone-grown/.