# Configuring a Mosaic App

## Prerequisites <a href="#prerequisites" id="prerequisites"></a>

Before configuring a Mosaic App, the following perquisites must be satisfied:

1. You've already added a Mosaic App to configure
2. You have discovered or added device points to the Cloud
3. The device you added supports BACnet&#x20;
4. The BACnet device is connected to the same local area network as the Motion Hub with which it is associated

## **Configuring App Settings** <a href="#step_1-_open_the_mosaic_app_that_you_wish_to_configure" id="step_1-_open_the_mosaic_app_that_you_wish_to_configure"></a>

### **Step 1:** Open the Mosaic App that you wish to configure <a href="#step_1-_open_the_mosaic_app_that_you_wish_to_configure" id="step_1-_open_the_mosaic_app_that_you_wish_to_configure"></a>

Using the search bar, type in the name of the Mosaic App you have already added. Users can find a Mosaic App in two separate views:

1. Apps
2. Manage Apps&#x20;

| Views                                                                     | Screenshots                                                                                                                                                                                                         |
| ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Search for the Motion App you'd like to configure in the Apps view        | ![](https://3085605247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRIDUOppGMO2NaZpQxdch%2Fuploads%2Fz8pCEsQeRXRpEEvLqjXn%2Fimage.png?alt=media\&token=ab601b9a-ea05-4c90-bcda-df49d1be30f1) |
| Search for the Motion App you'd like to configure in the Manage Apps view | ![](https://3085605247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRIDUOppGMO2NaZpQxdch%2Fuploads%2FHQqDMMEnpoKfm3ua4d9v%2Fimage.png?alt=media\&token=3df349e4-eeed-4ee9-9999-1389e9693f6f) |

### **Step 2:** Click the Configuration menu option <a href="#step_2-_click_the_configuration_view" id="step_2-_click_the_configuration_view"></a>

| Steps                                                                                            | Screenshots                                                                                                                                                                                                         |
| ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Click the "Configuration" option on the left-hand vertical menu to access the Configuration view | ![](https://3085605247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRIDUOppGMO2NaZpQxdch%2Fuploads%2FcGo8kN4BiGP4ZFVvGIHF%2Fimage.png?alt=media\&token=7736cdf9-fe3a-4654-82df-2228631a3673) |

### **Step 3:** Input details in App Settings

Click the "App Settings" view. You are able fill in the following inputs:

1. Name
2. Subtitle
3. Weather Postal Code
4. App Image

| App Setting Windows                                                                                                                                                                                                                                                                                                | Screenshots                                                                                                                                                                                                         |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <h4 id="name">Name</h4><p>Input the desired name of the App to easily identify it. <br><br>This will be the name that you see appear in the Motion Apps view.<br></p><p>Click "Save"</p>                                                                                                                           | ![](https://3085605247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRIDUOppGMO2NaZpQxdch%2Fuploads%2FMUxcbja23ia6wiY9YMlT%2Fimage.png?alt=media\&token=4b5c119a-273e-407a-9171-7ddc5b451c6a) |
| <h4 id="subtitle">Subtitle</h4><p>If desired, input a subtitle to further identify the App</p><p><br>This will be the subtitle that you see appear on the Motion Apps view</p><p><br>Click "Save"</p>                                                                                                              | ![](https://3085605247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRIDUOppGMO2NaZpQxdch%2Fuploads%2FpDzLmT7IAavfqrNeO0Yu%2Fimage.png?alt=media\&token=95cf528f-fdd4-4f22-a9d9-12e0c08416dd) |
| <h4 id="weather_postal_code">Weather Postal Code</h4><p>A user's Motion App can have a weather postal code associated with it if desired <em>(Figure 6)</em>.  This will link the app with local weather information.</p><p><br>Input the postal code associated with the site location</p><p><br>Click "Save"</p> | ![](https://3085605247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRIDUOppGMO2NaZpQxdch%2Fuploads%2FxMiS5WJ6UZcpWRZAtC41%2Fimage.png?alt=media\&token=457e6e3b-6a6e-4c05-a365-264f7add2399) |
| <h4 id="app_image">App Image</h4><p>If desired, give the Mosaic App an image which will be displayed in the Apps view.<br></p><p>Save image file to desktop</p><p><br>Click "Upload File" button</p><p><br>Locate and open image from saved files</p>                                                              | ![](https://3085605247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRIDUOppGMO2NaZpQxdch%2Fuploads%2FUrcnE92CCwc0hp2yPZFX%2Fimage.png?alt=media\&token=f43d954e-2f9f-421c-b15b-b70f9b9b0552) |

## **Configuring Tiles & Tile Groups**

### **Step 1:** Click on "Tile Groups" to configure dashboard layout

These configuration settings allows you to organize and group Motion Tiles in a way that is preferred by the user. In the steps below, we are going to discuss the following dashboard configuration options/topics:

1. Ungrouped Tiles
2. Creating a new Tile Group
3. Adding Ungrouped Motion Tiles to a newly created Tile Group
4. Relocating a Motion Tile from one Tile Group to another Tile Group
5. Repositioning Motion Tiles within a single Tile Group
6. Shuffling Tile Groups around&#x20;

### **Step 2:** Identify Ungrouped Tiles <a href="#step_5-_identify_ungrouped_tiles" id="step_5-_identify_ungrouped_tiles"></a>

When a new Motion Tile is created and linked to a Motion App, the Motion Tile will, by default, display at the top of the Mosaic Dashboard. These are considered **"Ungrouped Tiles".** They do not have a group name assigned to it.

In the same manner, new Motion Tiles will, by default, display at the top of the "Tile Group" view in the configuration settings as "Ungrouped tiles".

These ungrouped Motion Tiles will stay ungrouped until they are assigned to a tile group.

| Ungrouped Tiles       | Screenshots                                                                                                                                                                                                         |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Mosaic Dashboard view | ![](https://3085605247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRIDUOppGMO2NaZpQxdch%2Fuploads%2Fhth3xEceW65ZLJk81HyH%2Fimage.png?alt=media\&token=b0ace057-3fc2-48ac-a5b6-6d4126a39a63) |
| Tile Groups view      | ![](https://3085605247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRIDUOppGMO2NaZpQxdch%2Fuploads%2FM5Kv9MXlUxgInOUScCqb%2Fimage.png?alt=media\&token=4a24825f-4023-4bad-8bc6-fede138a40e4) |

### **Step 3:** Create a new Tile Group  <a href="#step_5-_create_a_new_tile_group_" id="step_5-_create_a_new_tile_group_"></a>

In the steps below, we will show users how to create a new Tile Group to group the ungrouped Motion Tiles discussed above.  In this example, we are going to name this new Tile Group "Refrigeration".

| Steps                                                                                                                                                                                                                                                                                                                               | Screenshots                                                                                                                                                                                                         |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| To create a new Tile Group, locate and click the green "Add Group" button at the top of the page                                                                                                                                                                                                                                    | ![](https://3085605247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRIDUOppGMO2NaZpQxdch%2Fuploads%2FeavDB9lceI5JuzpVLrsW%2Fimage.png?alt=media\&token=a54f2b76-af4c-4f3b-bee7-8e14c5544601) |
| <p>When this button is clicked, a new Tile Group will appear at the bottom of the Tile Group list. The default name of the tile group you created reads "New Group" <br><br>Locate the newly created Tile Group at the bottom of the view <em>(red box)</em></p><p><br>Give the Tile Group a name <em>(lime green box)</em><br></p> | ![](https://3085605247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRIDUOppGMO2NaZpQxdch%2Fuploads%2F3UA7djD3p2V8jEsozzoo%2Fimage.png?alt=media\&token=0df7d12b-2f52-4403-adc7-f0afd6fceb4e) |

### **Step 4a:** Add Motion Tiles to a Tile Group  <a href="#step_6a-_add_motion_tiles_to_a_tile_group_" id="step_6a-_add_motion_tiles_to_a_tile_group_"></a>

*Preliminary Assumption:  You are grouping Motion Tiles that have already been linked to this Mosaic App.*

Next to each Motion Tile, you will identify the blue chocolate bar ico&#x6E;*.*

| Steps                                                                                                                                                                                                                                                                                                                                                                     | Screenshots                                                                                                                                                                                                         |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>Click the blue chocolate bar icon (red box), and drag the Motion Tile into a Tile Group of your choice.  Repeat for all other tiles that need to be grouped. </p><p><br>NOTE: You can use this same method to move individual Motion Tiles from one Tile Group to another.</p><p><br>Click the "Save" button at bottom of page to save your configuration changes.</p> | ![](https://3085605247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRIDUOppGMO2NaZpQxdch%2Fuploads%2FNI1Y2WnFunCrrRK9VM4U%2Fimage.png?alt=media\&token=be21e0ad-557f-4f8a-a65d-afe2d087b761) |
| <p>In this example, we added all eight of the ungrouped tiles to the newly created Tile Group, which we have labeled "Refrigeration".  <br><br>As you can see, there exist no tiles to click and drag from the "Ungrouped Tiles" at the top of the page <em>(Figure 13)</em></p>                                                                                          | ![](https://3085605247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRIDUOppGMO2NaZpQxdch%2Fuploads%2FXbHupzpoizmVCzbNpGZl%2Fimage.png?alt=media\&token=1917d24e-69d9-4359-b7aa-8268e0b4b028) |

### **Step 4b:** Add Motion Tiles to a Tile Group from another Mosaic App <a href="#step_6b-_add_motion_tiles_to_a_tile_group_from_another_mosaic_app" id="step_6b-_add_motion_tiles_to_a_tile_group_from_another_mosaic_app"></a>

*Preliminary Assumption:  You are grouping Motion Tiles that have already been created but do **NOT** exist in this Mosaic App*

Alternatively, you can add Motion Tiles from another Mosaic App to a Tile Group by clicking the "Add Tiles" button that appears at the bottom left corner of each Tile Group.

| Steps                                                                                                                                                            | Screenshots                                                                                                                                                                                                         |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>Click "Add Tiles" button <em>(red box)</em></p><p><br>Type in the tile name or tile ID in the pop-up search window that appears <em>(lime green box)</em></p> | ![](https://3085605247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRIDUOppGMO2NaZpQxdch%2Fuploads%2FBcoeDvUygb4NQvJd0FyQ%2Fimage.png?alt=media\&token=4945014a-95b3-4be1-a951-47a17c0c5f03) |

### **Step 5 (Optional):** Follow instructions for additional configuration options <a href="#step_7_-optional-_follow_instructions_for_additional_configuration_options" id="step_7_-optional-_follow_instructions_for_additional_configuration_options"></a>

You have successfully created a Tile Group and added the ungrouped Motion Tiles to this Tile Group.  Now, you can select from additional configuration settings for the Mosaic dashboard.

1. Repositioning tile groups
2. Deleting tiles from Mosaic App
3. Ungrouping tiles

#### Repositioning Tile Groups <a href="#repositioning_tile_groups" id="repositioning_tile_groups"></a>

For organizational preferences, you may want to reposition the order of the Tile Groups.  The order of the Tile Groups from top-to-bottom in this configuration view will be reflected in the order of the Tile Groups that are displayed from top-to-bottom on the Mosaic Dashboard view.&#x20;

| Steps                                                                                                                                                                                                                                                                                      | Screenshots                                                                                                                                                                                                         |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>Locate the Tile Group you wish to reposition</p><p><br>Click the black chocolate bar icon next to the title of the Tile Group <em>(red box)</em></p><p><br>Click and drag the selected Tile Group to a placement of your liking</p><p><br>Click the "Save" button at bottom of page</p> | ![](https://3085605247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRIDUOppGMO2NaZpQxdch%2Fuploads%2FmN0ych5wDDCPz3wK5Ms4%2Fimage.png?alt=media\&token=1fec8482-f797-4a63-8221-21997cb7fd2f) |

#### Deleting Motion Tiles from Mosaic App <a href="#deleting_motion_tiles_from_mosaic_app" id="deleting_motion_tiles_from_mosaic_app"></a>

You have the option to delete individual Motion Tiles completely from the Mosaic App.  This will unlink the Motion Tile from this Mosaic App.

| Steps                                                      | Screenshots                                                                                                                                                                                                         |
| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| At the right hand side of the view, click the red "X" icon | ![](https://3085605247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRIDUOppGMO2NaZpQxdch%2Fuploads%2F5dxVvUe1edxx8p6fiHWu%2Fimage.png?alt=media\&token=958935fd-64eb-44ce-a952-e1e19820c836) |

#### Ungrouping Motion Tiles  <a href="#ungrouping_motion_tiles_" id="ungrouping_motion_tiles_"></a>

Users have the ability to delete a Tile Group. This consequently ungroups each individual Motion Tile that was in that deleted group.  After deleting a Tile Group, the ungrouped tiles will reappear at the top of the view.

| Steps                                   | Screenshots                                                                                                                                                                                                         |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Locate and click the red Group "X" icon | ![](https://3085605247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRIDUOppGMO2NaZpQxdch%2Fuploads%2F9EGEutVSVF19H1soZe4u%2Fimage.png?alt=media\&token=9470a640-4489-40e8-8ca3-cc40fc1985b7) |

### **Step 8:** Save Configuration Changes <a href="#step_8-_save_configuration_changes" id="step_8-_save_configuration_changes"></a>

Your changes will not be reflected in the Mosaic Dashboard view unless you save them.&#x20;

| Steps                                                                                                                                                                          | Screenshots                                                                                                                                                                                                         |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| When your configuration settings are complete, click the save button at the bottom of the view *(lime green box)*                                                              | ![](https://3085605247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRIDUOppGMO2NaZpQxdch%2Fuploads%2FZ7upqPrjZMxdjNZmTMkQ%2Fimage.png?alt=media\&token=10553089-1310-49f9-b9fe-2b674048219e) |
| NOTE: If you accidentally made configuration changes that were not meant to be saved, you can start over by clicking the "Revert" button at the bottom of the page *(red box)* | ![](https://3085605247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRIDUOppGMO2NaZpQxdch%2Fuploads%2FuJuVFW9NzHdj2rinnkBz%2Fimage.png?alt=media\&token=5f1f51f6-fbdc-4814-ba7b-00fb4826fec4) |

<br>
