The application settings panel has been created to configure specific app elements, choose buttons, set colours, etc. This way you can customise your Live or virtual race app as much as possible.
Access to the panel
Click on “Applications” in the Sportmaniacs top menu and find the race you want to work on, then click on the pencil icon to edit.
The following gif shows how to do it:
In the application control panel you will find three tabs:
-
Application configuration
En esta pestaña puedes configurar:
- Events: This allows you to enable the event as a virtual event, configure the dates of participation and decide whether the event is a fixed or free route.
- Form fields: you can configure how participants are validated in the application by selecting any of the fields available in the registration panel, for example, Identification Document, bib number, date of birth, etc. You can also change the name of the field to make it easier for participants to understand what data to enter, for example, “ID” can be called “Identification”.
- Home buttons. There are 4 types of buttons:
- Info: goes to “Race information”.
- Live: goes to “Ranking”.
- Training: goes to “Training”.
- Custom: directs to a URL that you configure.
The Info, Live and Training buttons are customisable but their predefined action cannot be changed. These buttons are visible depending on the moment the race is in progress and this visibility is not configurable. For example, if the training period has ended, the “Training” button will not be visible. Although you can create several buttons of each of these types, only one will be visible, so there is no point in creating more than one button of each type.
The Custom button type allows you to create a button from scratch and link it to any URL. You can create as many as you need. For example, you can link the registration button and allow registrations at the same time as the event is in progress.
What can be customised on each of the buttons?
You can customise different components of the buttons:
- Title: main text of the button.
- Subtitle: secondary text of the button. It is smaller than the title and allows you to explain or describe.
- Image: display on the right side of the button. It can be used to add the image of a sponsor, for example
- Image text: This allows you to put text at the bottom of the image.
Component management
A component is an area within the app screen, which will be filled with an image or a video that you define for a brand or sponsor: it is advertising space and you can use it for your own brand or company.
There are 3 types of components:
- Image: inserts an image.
- Webview: loads the content of a website into the application.
- Youtube: inserts a youtube video in the predefined space for it.
Please note:
- For each screen only one of the components can be visible: if you have several images with advertisements, you can only upload one of them to each screen
- Not all components are visible in all areas of the application. For example, you cannot upload a video on the home screen of the test.
How is each of the components configured?
Each component is configured differently although the fields to be filled in are the same.
Image
- Id: is how you want to name the component. An identifier for you.
- Type: you must select the image type.
- Background: you can set a background colour for the component.
- Title: add a title to the image.
- Link: if they tap on the image, this is the URL you want to redirect to.
- Value: you must add the URL where the image is hosted. For now, you will have to upload the image to a server and link to it.
- The image is the component that can be used on most screens. It is the most versatile.
Video
- Id: is how you want to name the component. An identifier for you.
- Type: you must select the video type.
- Background: you can set a background colour for the component. By default, it will be white.
- Title: add a title to the video.
- Link: to the youtube video. In the example: https://www.youtube.com/watch?v=fWmNxhB_TgA
- Value: must match the last letters after the equal sign “=”. In the example: fWmNxhB_TgA
The most common screen to add a video is the GPS calibration screen used to compete in virtual races.
Webview
Webview is a component that allows other applications on your device to display web content, without having to open a browser. Open a URL in the application.
- Id: is how you want to name the component. An identifier for you.
- Type: you must select the webview type.
- Background: in this case, it would not be necessary.
- Title: add a title.
- Link: URL that you want to be displayed when you add the webview.
- Value: URL that you want to load when adding the webview.
The Webview type component, for the moment, can only be used in the “customisable tab in live”. Once configured, when the user touches this button, he/she accesses the website that you have indicated in the value field without leaving the application.
In the following images, you can see the example. The Webview has been configured with the title WEBTS:
And, by tapping on the button, the timingsense website opens in the application.
Component display
In this tab, you can choose where each previously created component will be displayed. You can have several images and you may want each of them to be displayed in a different area or screen within the application.
To configure the visualisation of each item created:
- Select the screen or location where you want to add the mobile schema component on the right. For example the race home.
- In the central part, all the components that have been created will be available: you can identify them by the title you have given them.
- Drag the component to the mobile mockup on the right.
- Click on the “Save” button.
Remember:
- Only one of the components can be visible on each of the screens.
- Not all components are visible in all areas of the application.
- If the screen already has a component or a component type cannot be added, it will have a lock icon.
