Introduction

This article explains how the Task Board sample experience was built and how you can reuse it for your own needs. To access this sample, use the Marketplace tab of the Experiences panel in Composer or Player. You can also download a play-only version of the experience by clicking this link

About the "Task Board" experience

In this experience, a task is represented by a card. A task card includes the task description, task status, owner and a unique ID.

Cards are organized by subject area. For example, tasks concerning user interface design are placed in the "Graphic Design" column. There is a different column for each subject area on the board.

To edit the task description, status or owner, tap the corresponding item on a card.

A toolbar at the bottom of the experience enables you to:

• create a new card
• draw on the screen
• display a QR code for the Intuiface remote control, IntuiPad
• share a snapshot of the entire board
• open the Excel spreadsheet containing all task information

This sample is an only-slightly simplified version of an experience the Intuiface staff uses every morning in stand-up meetings focused on the progress of the current Intuiface release under development. Our internal version contains more dynamic information like the number of pending support threads, the days planned for each task, etc.

Global Architecture of the sample

This sample is comprised of a single scene. The main board uses a Scroll collection to contain all dynamic objects. A toolbar, housed within a Group collection, always remains on the bottom edge of the scene.

In the front layer are all of the pop-up Group collections associated with different buttons in the toolbar.

The main board

The "Main Scroll" Scroll collection in the middle layer is the same size as the experience itself - 1920 x 1080 - and it contains a Group collection - the Whole Board collection - which has a size of 3000 x 1200 pixels. By putting this wide Group collection in the Scroll collection, the group becomes scrollable when the experience is running. You can of course change the size of this group if you need more or less on-screen real estate to organize your cards. The "Whole Board" group contains:

• "Board Background" group containing rectangular shapes and text defining each subject area columns .
• "Tasks Data" Pinboard collection that contains:
  • Excel data feed containing all of the tasks.
  • "Status Menu" group containing the list of possible task states
  • "People Menu" group containing the list of employees who can be assigned to a task.
• "Last Update Timestamp** group containing the current date
• Transparent Annotation Image image for use with the drawing tools

All task information is stored in an Excel file used as a data feed displayed in the "Tasks Data" pinboard. Each card is represented by a data template that is filled on the fly, one instance of the card for each row of the spreadsheet.

The Excel-based data feed within the "Tasks Data" pinboard - i.e. the task card - contains an Edit Toggle Button that, when touched, displays a currently hidden "Edit Group" group within the same data feed. This group contains a Text Input asset and Buttons used to either edit the name of the task or to remove that task from the Excel file and - thus - the board.

Editing or removing a task is made possible through use of the Edit actions available with the Excel Interface Asset.

About the Excel spreadsheet use to store task information

The tasks displayed in the board are stored in an Excel workbook containing two worksheets, both of which are used as a data source. The structure of the first worksheet, Tasks, is captured in the image below:

• ID: Computed automatically when creating a new card. When deleting a task, all cards are renumbered so they are always in order from 1 to n
• Name: Name of the task
• Who: URL of photo of the task owner
• Status, Status Title, Status Color: information about the tasks status. The "Status" number refers to the appropriate row on the "Status List" worksheet.
• X & Y: Position of the card in the pinboard

The second worksheet, Status List, lists all of the available statuses to be displayed in the the Status Menu group, enabling the user to select a status for a specific task. This menu is displayed on demand when clicking the Select Status button in the task template.

The Status fields are saved each time a status is selected in the Status Menu group, using the Update cell action of the Excel Interface Asset.

The X & Y fields of a task are updated each time a task is manipulated in the pinboard.

Airtable database used for the employee directory

To illustrate how you can work with data sources other than an Excel workbook, we used an Airtable database to create a simulated employee directory for this sample.

The connection is established through a custom Interface Asset using the REST Web services supported by Airtable.

You could replace our Airtable table with your own, substitutiing the "Authorization" header and "Vie" name properties while keeping the same database structure. Alternatively, you could use an Excel file to locally store images for potential task owners.

The bottom toolbar

The bottom toolbar is made of a Group collection that contains

• combination of 5 action and toggle buttons
• title text
• session length displayed using a Chronometer Interface Asset that is started as soon as Play Mode begins
• current date & time using a Clock Interface Asset

Adding a card to the board

When checked, the Add Task Toggle Button unhides Create New Item Group in the front layer. In the panel that appears, a user can enter a new task name and use the Create Task Button to add a new row in the Excel file, with the following parameters

• ID: one more than the current number of rows in the "Tasks" worksheet, using an Add converter
• Name; the text entered by the user
• Who: empty at creation
• Status: 0 (= Stand By)
• X & Y: the current position of the Scroll collection + an offset

Drawing tool

Since the board is larger than the scene, we couldn't use the scene drawing tool as it could be scrolled out of view. Instead, we placed a transparent image over the entire Scroll collection - named "Annotation Image" - and recreated a drawing tool panel that is visible when the Drawing tool toggle button is checked.

Each button calls actions on the Annotation Image to turn drawing mode on / off, change drawing color or erase all drawings.

Remote control

Since the Intuiface staff have been using this sample on very large non-touch display, we wanted to add a reminder that such an experience running on a Windows machine can be remotely controlled using an iPad or Android tablet. This is why we added the IntuiPad Group that displays a QRCode so you can download the IntuiPad app on any iPad or Android tablet.

These QR codes are generated on the fly using the QR Code Generator Interface Asset and URLs we've supplied.

Exporting the board

Once your team meeting is finished, you might want to export these updated tasks and email a global view to someone (your boss?) or retrieve it quickly on your smartphone.

The Send button will take a snapshot of the Whole Board group so it contains the entire board, not just the visible part. The Snapshot is taken trigger on the scene changes the Snapshot Placeholder image to the new snapshot.

The user can then decide to either send the snapshot via email or upload it to the cloud and retriev in the hidden "Export Snapshot Group"e it via a QR code.

Via Email

If the user enters his email address and clicks the Send button, the following actions are called:

• The Snapshot Placeholder image, located in the hidden "Export Snapshot Group", is placed in the sharing queue
• The Excel file containing the tasks data is also placed in the sharing queue (see this article for details)
• The email is sent to the entered address
• Hide the Send Email Group and show the Send In Progress Group.

The Email Sent Group will be displayed if the "Email sent" trigger of the Share via Email interface asset is raised.

To a smartphone using a QR code

If the user clicks the "Upload and get QR code" button, Intuiface will upload the image to a cloud service and then generate a QR code that could be used to download the snapshot to a phone.

Using the QR Code Interface Asset combined with a URL Shortener Converter will create an easy-to-scan QR code from what could be a long URL returned by the image uploading service.

Opening the Excel file

As explained earlier in this article, the entire logic of this task board relies upon an Excel workbook. The "Open Excel" button uses the "Launch application" action to open Microsoft Excel (if installed on your machine) with a the path to the Excel spreadsheet as a parameter.

Feel free to customize the Status List worksheet, adding, removing or modifying existing entries as you prefer.