This demo associate a tune to a Beacon. If you consider 3 individual carrying each one beacon, this demo will play the tune of that individual when the closest to that person.
The app is setup to trigger one of 3 audio files when the device is in the proximity of one of 3 Beacons.
This is just one of many ways you can configure the iBeacon triggers.
When the large button to start monitoring beacon is pressed in the proximity of an iBeacon then it will trigger a series of events that match the ID of the iBeacon.
When a Beacon is nearby , the app will display the name of the song, start playing the song attached to the Beacon ID.
Setting up Beacons
In order to use the demo you first need to set up the Beacons.
There are 2 important parameters that you will be able to get from the software associated to the Beacon.
The Beacon management software is provided by the Beacon vendor.
It will let you set (or provide):
- The Beacon UUID
- The major & minor ID
Use can use the Beacon software from Kontakt.io or Radius Networks or any other Beacon vendor.
You'll need to have an account with the Beacon vendor to view or change your iBeacon Minor/Major and UUID. Use the applications these vendor provide to configure your beacon with:
How does the iBeacon Demo work?
The app monitors Beacon use the 'Start Monitoring Beacons' action.
When a Beacon is detected, an App Level Event "Beacon Updated" is triggered.
That Event starts a Script which looks for a song in a Cloud Collection associated to that Beacon ID.
The app starts playing that song.
Then start monitoring Beacon again.
We first setup a Cloud Collection data source for this app, but this can be any type of data source, local or remote. We use three columns in our data source: Title, AudioFile and Beacon Minor.
- The Title is the Title of the audio file to display in the Text Block.
- The AudioFile is an MP3 that has been uploaded to the Cloud Collection but this could be a URL or a filename that references a local media file in the Media Folder.
- Beacon Minor is the number assigned to the iBeacon by the Beacon software.
The View "Beacon" is setup with 3 Blocks. A Button Block and 2 Text Blocks.
The Button Block is set to "Toggle" so that each time it's tapped it goes to "Up" or "Down" state.
We attach Actions to the "Button Down" and "Button Up" in the Events tab of the Button Block:
For the "Button Down" Event we add the Action "Start Monitoring Beacon". Here we add the Beacon's UUID.
For the "Button Up" Event we add the Action "Stop Monitoring Beacon". In this Action we put the same UUID as we did in the Action "Start Monitoring Beacon". We also use the Action to "Remove a Layer". This removes the Audio layer we create below in this document and that then stops the audio from playing.
There are also 2 Text Blocks in the View "Beacon". Both Blocks are set to refresh when you are in the proximity of the Beacon (explained in the Script Action below). One Text Block "Text 4" points to the Title of the audio file in the data source:
The other Text Block "Text 3" uses the following value to pull in the Minor iD of the Beacon: [[beacon:minor]]
The app also has a Layer called "Audio Player". The only thing in this Layer is an Audio Player Block that points to the MP3 in the Cloud Collection data source:
We need to create a Custom Script so on the left in The Navigation Panel click on Custom Scripts and choose the New Custom Script icon at the top. Then you can define the script with the following actions.
"NewClosestBeacon" contains 7 Actions:
- Set a Variable. This sets a Variable of the Beacon minor ID.
- Go to Matching Record. This uses the Beacon Minor ID to go to the matching record of the data source. This also sets a Variable for that matching record called "found".
- Remove a Layer. This removes the Layer with the Audio Player if it is currently loaded
- Add a Layer. This adds the Layer with the Audio Player that will play the Matching Record of the Beacon trigger. This is only added if the Variable [[var:found]] is equal to true. This is the Variable of the Matching Record set above. So the Layer will only load if a matching record in the data source was found.
Finally we use the Action "Refresh Block" for 3 Blocks. The 2 Text Blocks in the "Beacon View" and the Audio Player Block in the Layer. The also only trigger if a Matching Record was found in the data source.
Now we need to go to the "Edit App" tab of the app we find the place where we can configure what happens when the iBeacon is updated. In this example we load the Custom Script called "NewClosestBeacon" which runs only when the current beacon is not the closest beacon. To do this we only run this script when the following condition occurs: When [[var:closestBeacon]] not equal [[beacon:minor]].