Introduction

This tutorial is about the QR/Audio App, and includes an introduction to the platform and a walk-through of the app.  Together, they are meant to teach you about both this app individually and its capabilities, and also how apps are composed in the EachScape ecosystem.  

 

EachScape is a powerful platform that allows incredible flexibility in app creation.  Learning a little about this app will help you understand how to create your own Pixel-Perfect app!  EachScape is the platform that can help bring the vision in your head into a click-and-drag reality without writing a line of code.

 

The QR/Audio App

A QR code is a mobile-phone readable barcode.  It operates just like bar codes at the grocery store.  In this app, we use it to input a streaming audio endpoint into the app, which is then used by the Audio Player to play the audio stream.

 

If you want details about the QR code and what it represents, go to the final section of this document entitled “QR Code”

App details

This app does a few things mean to instruct you in some of the capabilities of EachScape.  You can click on and inspect the blocks. 

  • QR Code Scanner Block

    • Reads a QR code

    • Sets a variable

    • Creates a popup

  • Image Block 1

    • Uses a URL to display an image

    • Functions like a button (has a ‘Tap’ event)

    • Reads a variable

    • Creates a popup

    • Starts an audio stream

  • Image Block 2

    • Uses a URL to display an image

    • Stops an audio stream

    • Creates a popup

  • Text Blocks (4 of them)

    • Displays text on-screen

 

App Walk-Through

  • To get an idea of the general areas of functionality of the EachScape App Studio, be sure to use the Guided Tour 

Interacting with App Components

The EachScape App Studio provides multiple methods to interact with the blocks that comprise every EachScape app.  The App Tree allows you to see a hierarchical tree showing the components and their hierarchal relations.  The Layout View allows you to interact with the blocks and select them based on how they appear on-screen
 

  • The Layout View

    • Left-mouse click on the PLAY button.  It highlights to show the limits of the block.  Right-mouse click on the PLAY button.  You’ll see a context-sensitive Right-mouse menu that allows you to Edit the Canvas (the parent of the block you selected) or Edit Image 2 (the block you selected).

      • Choose to Edit Image 2

      • The Image 2 Configuration Slider will slide out from the right-hand side.

      • BEFORE YOU SELECT ANOTHER 

      • Then Right-Mouse-Click it and scroll down to EDIT and you’ll notice the Block Configuration panel slides out from the right.  

        PLEASE BE AWARE that sometimes, in order to select a block, you’ll have to click “CANCEL” on the Block Configuration Slider
         

  • The App Tree on the left shows you a hierarchical “tree” display of the composition of the app.  

    • “First” is the name of the only view in this app.  In EachScape parlance, a “View” is one screen of your app.  For instance, a splash-screen is a “View”, as is the “Home” screen of your app (In EachScape, the Splash Screen can be configured in the “App Edit” tab).  In the case of this app, there is only one view, and that view is called “First”.

    • The “First” view has one child.  That child is the “Canvas”.  A canvas allows EachScape GUI components (we call them ‘blocks’) to be dragged in from the Block Drawer.


    • Click on “Text (4.10): Text 1.  You’ll see the component properties panel slide out from the right. (AKA “Block Properties”)

      Component Properties

      • Help

        • Help for this Block

      • Notes

        • Add any notes here you’d like.

      • Events

        • You’ll see there are a couple of events available here: “Before Draw” and “Tap”.  Clicking the Edit button here (the pencil icon) allows you to add sets of actions to an event.  

        • Click on the Edit icon for “Tap”

          • Click on Add Action “+ Action”

            • Scroll down to “Show Alert Popup”

            • Click in the Text Field

            • The Text Entry modal will pop up.  In the bottom box, enter this string: “Tap action, <your name>”

            • Click “Apply”

            • Click “Add”

            • Click “Apply”

            • Click “Update”

      • Specific Tab

        • All the block-specific settings are here (the rest of the tabs are shared among all blocks, whereas the ‘Specific’ tab is unique to THIS block)

        • “Text” is the text rendered on the display.  Click in the box

          • The “Edit Value” modal will pop up.

            • On the upper-left you can see at least four available items: System Values, Variables, Formatters, and Format Control.

            • Click on System Values

            • Scroll down & click on “Device Orientation”

            • You’ll notice that in the “Edit” frame on the Edit Value modal, the system value [[sys:orientation]] has been inserted.  In the future, if you want to use SYSTEM VALUES in your text fields, this is how you insert them.

            • For now, we don’t want to do this.  Click in Edit frame and remove the [[sys:orientation]].

            • Modify the string to read: “Streaming Audio player” (instead of “Play audio URL from QR code”)

            • Click Apply on the Edit Value modal

        • Click “Update” on the Specific tab of Component Properties

      • General Tab

        • If you want to save this block to be re-used in this app, you’ll want to give the block a name here on the “Create MyBlock Name:” input field.

        • “Fill Color” is useful to differentiate this block on the preview window so you can see its borders more easily

        • You probably won’t use most of the other items on this tab

  • The App Tree is essential for navigation of your app on the EachScape platform.  As you float over each item, you’ll notice that that item is highlighted in the Layout View, showing you exactly which component is being floated over
     

Installing the app onto your device

  • iPhone/iPad/iPod users:

    • NOTE: Android is a lot more developer-friendly than iOS.  iOS requires a complex set of operations to be performed before you can install apps that don’t originate in the app store.  That process is called “Provisioning”, and we have a help article to help you with that process.

    • Apple makes it REALLY hard to get apps onto your phone if they DON’T come from the Apple store.  To do so involves provisioning, which you can do, or we can do it for you (check our store!).
       

  • If you have an Android device, it’s time to get this app ready to use on your device. 
     

    • ANDROID -- You’ll have to make an adjustment on your device

      • → Settings

      • → Security

      • → “Unknown Sources” 
         

  • Check the box to allow installations from Unknown Sources.

 

  • For now, let’s get the app ready to install on your mobile device!

    • Go to the “Generate” page (toward the right of the Navigation frame)

    • Check the box for Android 4.4

    • Check the box for HTML5 (if it’s already checked, that’s great)

    • → Generate

      • You’ll get redirected back to the Develop Tab and you’ll get a popup that your builds are queued (there are two builds queued: the HTML5 build + the Android build you specified)

      • Click OK
         

    • → Build History (next to the Generate button)

      • You’ll see a list of your available builds.  On the left-hand side you’ll see your app name and a listing of its available builds.  In your case, you should see an “0.0.1 Android” build and a “0.0.2” HTML build.

      • → 0.0.1 Android (the one with the robot)
         

      • When the build is complete, EachScape has collected all the information about your app and compiled it into an APK, the Android Package format for apps.  

        FYI: Every app you’ve ever installed to your Android device has arrived to your mobile phone in the APK format, though those details are hidden from you when you use Google Play.

        If you want to download the EachScape App APK to your computer, you can click on the DOWNLOAD button.  If you do that, you’ll have an APK on your hard drive that you’ll THEN have to move over to your device.  However, there’s a MUCH EASIER WAY using our QR codes!
         

      • Install a QR reader to your Android Device

        • → Google Play

        • → Search for “RedLaser” 

        • → Install

        • → Agree

        • → Open 

 

  • Run RedLaser

    • Start the QR scanner (lower-left hand corner is a red lightning bolt)

    • → Scan the QR code on the EachScape Build Success screen

    • → OK the install

    • → Open the EachScape app on your device

Running the App

 

  • Once running, you’ll notice the PLAY and STOP buttons and also the video box showing what you’re aiming at with your rear-facing camera

  • Point your phone’s rear-facing camera at the QR barcode: 
     

    • Hold your device still, and you’ll see a popup that says “QR Scanned!...”

      • the barcode has been read

    • → Tap OK

    • → Tap the Play button

    • You’ll see a popup indicating that the app is now going to try to play audio

    • Turn your volume up and enjoy listening to WFJJ!

QR Code Details

This is the process of finding an audio endpoint and then using a QR generator to create the QR code that was used in this app.  This section is not necessary to use the app successfully, though reading it will give you a more complete understanding of the technology.

 

  1. Find an audio endpoint.  A friend works with WJFF, so I used their webpage that has help on their streaming audio.

  2. I downloaded the .pls file for WinAmp

  3. Once the .pls file had downloaded to my computer, I opened the file in a text editor and snatched the URL for the stream, which in this case is “http://amber.streamguys.com:4510”

  4. Next, I used an online QR code generator to create a QR code for that URL.  In this case I used “http://www.qr-code-generator.com/”.  I just pasted in the URL from step 3 and clicked “Generate”.  Viola!  I got a QR code!

  5. QR code for WJFF Audio Stream: