Jump to: navigation, search

Difference between revisions of "HowTo:Configure Start Screen Content"

(→‎Buttons)
 
(57 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
== Introduction ==
 
== Introduction ==
−
The Dynamic Configurable start screen feature allows the UBIK Service engineer to tailor the buttons on the start screen according to the needs of the customer.
+
The Dynamic Configurable start screen feature allows the {{UBIK}} user to tailor the buttons on the start screen according to the needs of the customer.
  
 
== Setup ==
 
== Setup ==
−
* The first step is to configure the start screen data using an xml in order for UBIK® to recognize the different tabs and buttons. The xml file should be placed in a subfolder under the "UBIK" folder on the device's SD card.  
+
* The first step is to configure the start screen data using an xml in order for {{UBIK}} to recognize the different tabs and buttons. The xml file, which must have the name '''css_config.xml''', should be placed in the [[UI_Configuration_(Mobile_Client)|UI Configurations folder]].
  
−
* After the folder is configured, the next step is to validate the XML configuration file against the [[File:Start_Screen_Configuration_Schema.xml|schema]] using an online validator. A solution can be found at [http://www.utilities-online.info/xsdvalidation/ Online XML Schema Validator]. The schema used to validate against will be found inside the UBIK Folder and is named ConfigurableStartScreenSchema.
+
* After the folder is configured, the next step is to validate the XML configuration file against the [http://wiki.augmensys.com/index.php/File:Start_Screen_Configuration_Schema.zip schema] using an online validator. A solution can be found at [http://www.utilities-online.info/xsdvalidation/ Online XML Schema Validator].
−
The following xml shows an example configuration (also can be downloaded as [[File:Start_Screen_Configuration.xml|an xml file]]):
+
The following xml shows an example configuration (also can be downloaded as {{FileLink|Start_Screen_Configuration.zip|Start_Screen_Configuration.zip}} an xml file):
 
<source lang="xml">
 
<source lang="xml">
 
   <StartScreenConfiguration>
 
   <StartScreenConfiguration>
 
     <Tab caption="Content">
 
     <Tab caption="Content">
−
       <ContentBrowserButton caption="Content Browser"  UBIK-UID="2ccd91c0-9cee-42f3-9d1d-be745908457d"/>
+
       <ContentBrowserButton caption="Content Browser"/>
−
       <ContentBrowserButton caption="Events" UBIK-UID="31aaa5c9-85dd-4243-9cf8-89d712d32405" iconPath="/sdcard/Augmensys/events.png"/>
+
       <ContentBrowserButton caption="Events" UBIK-UID="31aaa5c9-85dd-4243-9cf8-89d712d32405" iconPath="events.png"/>
 
     </Tab>
 
     </Tab>
−
 
+
 
     <Tab caption="AR1">
 
     <Tab caption="AR1">
 
       <MapsButton/>
 
       <MapsButton/>
 
       <POIViewButton caption="AR View"/>
 
       <POIViewButton caption="AR View"/>
−
       <CustomIntentButton caption="Map of Linz">
+
       <CustomIntentButton caption="Map of Linz" iconPath="linz.png">
 
         <TargetURI>
 
         <TargetURI>
 
           https://www.google.com/maps/place/Linz/@48.295065,14.327405,12z/data=!3m1!4b1!4m2!3m1!1s0x47739595fa99854d:0x7c53292c577975c4
 
           https://www.google.com/maps/place/Linz/@48.295065,14.327405,12z/data=!3m1!4b1!4m2!3m1!1s0x47739595fa99854d:0x7c53292c577975c4
 
         </TargetURI>
 
         </TargetURI>
 +
      </CustomIntentButton>
 +
      <CustomIntentButton caption="Skype">
 +
        <TargetClass>
 +
          com.skype.raider.Main
 +
        </TargetClass>
 +
      </CustomIntentButton>
 +
      <CustomIntentButton caption="Maps">
 +
        <TargetClass>
 +
        com.augmensys.ubik.demo.lib.ui.activities.ar.map.UBIKMapActivityDemo
 +
        </TargetClass>
 
       </CustomIntentButton>
 
       </CustomIntentButton>
 
       <TargetMapsButton caption="Flow Controller 213"  UBIK-UID="2ccd91c0-9cee-42f3-9d1d-be745908457d"/>
 
       <TargetMapsButton caption="Flow Controller 213"  UBIK-UID="2ccd91c0-9cee-42f3-9d1d-be745908457d"/>
 
     </Tab>
 
     </Tab>
−
+
 
     <Tab caption="AR2">
 
     <Tab caption="AR2">
 
       <IDMarkerScanButton caption="ID Marker Scan"/>
 
       <IDMarkerScanButton caption="ID Marker Scan"/>
Line 32: Line 42:
 
       <ARNavigationButton caption="Flow Controller 213" UBIK-UID="2ccd91c0-9cee-42f3-9d1d-be745908457d"/>
 
       <ARNavigationButton caption="Flow Controller 213" UBIK-UID="2ccd91c0-9cee-42f3-9d1d-be745908457d"/>
 
       <NavigationMapsButton caption="Flow Controller 213" UBIK-UID="2ccd91c0-9cee-42f3-9d1d-be745908457d"/>
 
       <NavigationMapsButton caption="Flow Controller 213" UBIK-UID="2ccd91c0-9cee-42f3-9d1d-be745908457d"/>
 +
      <DemoMapsButton caption="Flow Controller 213" UBIK-UID="2ccd91c0-9cee-42f3-9d1d-be745908457d"/>
 +
      <RFIDScanButton caption="RFID Scan" />
 
     </Tab>
 
     </Tab>
 
   </StartScreenConfiguration>
 
   </StartScreenConfiguration>
 
</source>
 
</source>
  
−
== Tab Groups ==
+
{{Hint|The config file has to be named '''css_config.xml'''. }}
−
The user can configure tab groups in the XML, however the allowed number of tabs to configure may vary depending on the screen size of the device. As parameters, the caption is mandatory.
+
 
 +
 
 +
== Tab groups ==
 +
The user can configure tab groups in the XML. They will be used as groupings for buttons.
  
 
== Buttons ==
 
== Buttons ==
 
Buttons should be placed inside tab elements and can be parameterized. Buttons are configurable in terms of
 
Buttons should be placed inside tab elements and can be parameterized. Buttons are configurable in terms of
−
* Icon
+
* Icon (Parameter: ''iconPath'')
−
* Caption
+
* Caption (Parameter: ''caption'')
−
* Group/tab
+
* Group/tab (name of tab group)
−
* Action + Parameters if needed
+
* Object UID if needed (Parameter: ''UBIK-UID'')
  
−
For now, the supported button types are as follows: (The buttons demonstrated in the screenshots are the results of the example XML configuration.)
+
{{Hint|The icons are specified by their relative paths under '''''SD_CARD''/Android/data/''APP_PACKAGE_NAME''/files/UIConfigurations/CSSButtonIcons''' }}
  
−
* Content Browser Button : Opens a content browser for displaying an object or the root if no object/uid is specified.
+
The supported button types are as follows:
−
<br/>[[File:UI_Android_CSS_Buttons_Content_Browser.jpg|border|alt=Content Browser Button|Content Browser Button]][[File:UI_Android_CSS_Buttons_Content_Browser_Events.jpg|border|alt=Content Browser Button For Events|Content Browser Button For Events]]
+
−
* Custom Intent Button (using a customized intent URI or target class) : Launches a certain application for the specified Intent.
+
−
<br/>[[File:UI_Android_CSS_Buttons_Custom_Intent.jpg|border|alt=Custom Intent Button|Custom Intent Button]]
+
  
−
* Maps Button : Opens {{UBIK}} map.
+
<gallery heights="100">
−
<br/>[[File:UI_Android_CSS_Buttons_Maps.jpg|border|alt=Maps Button|Maps Button]]
+
File:UI_Android_CSS_Buttons_Content_Browser.jpg‎|Content Browser Button
−
* Target Maps Button : Opens {{UBIK}} map for a target object.
+
File:UI_Android_CSS_Buttons_Custom_Intent.png‎|Custom Intent Button
−
<br/>[[File:UI_Android_CSS_Buttons_Target_Maps.jpg|border|alt=Target Maps Button|Target Maps Button]]
+
File:UI_Android_CSS_Buttons_Maps.jpg|Maps Button
−
* ID Marker Scan Button : Starts ID marker scanning.
+
File:UI_Android_CSS_Buttons_Maps.jpg|Target Maps Button
−
<br/>[[File:UI_Android_CSS_Buttons_ID_Marker_Scan.jpg|border|alt=ID Marker Scan Button|ID Marker Scan Button]]
+
File:UI_Android_CSS_Buttons_ID_Marker_Scan.jpg|ID Marker Scan Button
−
* QR Scan Button : Starts QR code scanning.
+
File:UI_Android_CSS_Buttons_QR_Code_Scan.jpg|QR Code Scan Button
−
<br/>[[File:UI_Android_CSS_Buttons_QR_Code_Scan.jpg|border|alt=QR Code Scan Button|QR Code Scan Button]]
+
File:UI_Android_CSS_Buttons_POI_View.jpg|POI View Button
−
* POI View Button : Opens {{UBIK}} POI view.
+
File:UI_Android_CSS_Buttons_Config_AR.jpg|Configurable AR Button
−
<br/>[[File:UI_Android_CSS_Buttons_POI_View.jpg|border|alt=POI View Button|POI View Button]]
+
File:UI_Android_CSS_Buttons_Config_Image.jpg|Configurable Image Marker Button
−
* Configurable AR Button : Opens the markerless view.
+
File:UI_Android_CSS_Buttons_Nav_Maps.jpg|Navigation Button
−
<br/>[[File:UI_Android_CSS_Buttons_Config_AR.jpg|border|alt=Configurable AR Button|Configurable AR Button]]
+
File:UI_Android_CSS_Buttons_AR_Navigation.jpg|AR Navigation Button
−
* Configurable Image Marker Button : Opens the ID marker 3D view.
+
File:UI_Android_CSS_Buttons_Barcode.png|Barcode Scan Button
−
<br/>[[File:UI_Android_CSS_Buttons_Config_Image.jpg|border|alt=Configurable Image Marker Button|Configurable Image Marker Button]]
+
File:UI_Android_CSS_Buttons_RFID_Scan.jpg|RFID Scan Button
 +
File:UI_Android_CSS_Buttons_OCR_Scan.png|OCR Scan Button {{Version/AndroidSince|2.5.0}}
 +
</gallery>
  
−
* AR Navigation POI View Button : Opens {{UBIK}} POI view with the AR navigation support.
 
−
<br/>[[File:UI_Android_CSS_Buttons_AR_Navigation.jpg|border|alt=AR Navigation Button|AR Navigation Button]]
 
−
* AR Navigation Maps Button : Starts navigating to the specified object.
 
−
<br/>[[File:UI_Android_CSS_Buttons_Nav_Maps.jpg|border|alt=Navigation Button|Navigation Button]]
 
  
−
Additionally, Button parameter configurations should maintain the following guidelines:
+
{| class="wikitable sortable" | width = "70%"
−
* When either the caption parameter or the icon parameter is not explicitly customized in the xml file, default caption and icons, specific to each button, are used.
+
|-
−
* While configuring the custom intent button, either target class or target URI should be specified, but not both and not neither. The later two cases will result in an error.
+
! Button!! Purpose !! Parameters
−
* The configuration of the UID parameter is obligatory for AR Navigation POI View Button, AR Navigation Maps View Button, RAG Navigation Maps View Button and Demo Navigation Maps View Button.
+
|-
 +
| ''ContentBrowserButton''|| Opens a content browser for displaying an object or the root if no object/uid is specified. || ''UBIK-UID'': UID of object to be shown on map
 +
|-
 +
| ''[[Custom_Intent_Button|CustomIntentButton]]'' || Launches a certain application or URI for the specified intent (using a customized intent URI or target class). || ''TargetClass'': name of an activity or an application<br />''TargetURI'': link information
 +
|-
 +
| ''MapsButton''|| Opens {{UBIK}} map. || -
 +
|-
 +
| ''TargetMapsButton''|| Opens {{UBIK}} map for a target object. || ''UBIK-UID'': UID of object to be shown on map
 +
|-
 +
| ''ID MarkerScanButton''|| Starts ID marker scanning. || -
 +
|-
 +
| ''QRScanButton''|| Starts QR code scanning. || -
 +
|-
 +
| ''POIViewButton''|| Opens {{UBIK}} POI view. || -
 +
|-
 +
| ''ConfigurableARButton''|| Opens the ID marker 3D view. || -
 +
|-
 +
| ''ConfigurableImageMarkerButton''|| Opens the markerless view. || -
 +
|-
 +
| ''ARNavigationPOIViewButton''|| Opens {{UBIK}} POI view with the AR navigation support. || ''UBIK-UID'': UID of object to be navigated to
 +
|-
 +
| ''ARNavigationMapsButton''|| Opens {{UBIK}} map for the specified object.Starts navigating to the specified object. || ''UBIK-UID'': UID of object to be navigated to
 +
|-
 +
| ''BarcodeScanButton''|| Starts barcode scanning. || -
 +
|-
 +
| ''RFIDScanButton''|| Starts RFID scanning. || -
 +
|-
 +
| ''OCRScanButton''|| Starts OCR scanning. {{Version/AndroidSince|2.5.0}} || -
 +
|}
 +
 
 +
=== Color of Buttons ===
 +
 
 +
If no user is logged in the buttons are de-saturated. Once a user is logged in the buttons are colored according to following behaviour:
 +
* If default buttons are used the buttons are colored programmatically. The button and the color can be customized by the Development.
 +
* If custom buttons are used (specified by the parameter "iconPath") the original color of the button is retained.
 +
 
 +
[[Category:Android|Configure Start Screen Content]]
 +
[[Category:How-To|Configure Start Screen Content]]
 +
[[Category:Publishing|Configure Start Screen Content]]
 +
 
 +
== Configuration guidelines ==
 +
 
 +
* See [[UI_Configuration_(Mobile_Client)]]
 +
* The '''maximum number of tabs is 6'''. Once this limit is exceeded, the configuration is invalid and won't be shown.
 +
* The captions of tabs are optional. In case there's only one tab, the tab will be invisible.
 +
* The '''buttons''' should always be '''nested inside tabs'''. Otherwise, the configuration is also invalid.
 +
* Captions and icons of buttons are optional. Default values are used for the unspecified ones.
 +
* While configuring the [[Custom Intent Button|custom intent button]], one should always specify one and only one of the target class and the target URI. Otherwise, the button is invalid and an error will be shown.
 +
* The configuration of the ''UBIK-UID'' parameter should always be specified for AR Navigation POI View Button, AR Navigation Maps Button, Demo Maps Button and Target Maps Button.
 +
 
 +
 
 +
{{Attention|The configuration is only applied when the app starts. Close the app completely (not only move it to the background) and restart it to make sure the configuration is read.}}
 +
 
  
 
== Results ==
 
== Results ==
 
The result is that the tabs and buttons configured in the XML file will be visible and open the right activity once they are clicked.
 
The result is that the tabs and buttons configured in the XML file will be visible and open the right activity once they are clicked.
  
−
[[Category:How-To]]
+
The following screenshots demonstrate the results of the example XML configuration.
−
[[Category:UBIK Client]]
+
<br/>[[File:UI_Android_CSS_Buttons_Tab1.png|500px|border|alt=The First Tab|The First Tab]]
 +
<br/>[[File:UI_Android_CSS_Buttons_Tab2.png|500px|border|alt=The Second Tab|The Second Tab]]
 +
<br/>[[File:UI_Android_CSS_Buttons_Tab3.png|500px|border|alt=The Third Tab|The Third Tab]]
 +
 
 +
After users log in, the buttons are enabled and colored. Upon being clicked, they should trigger different actions.
 +
<br/>[[File:UI_Android_CSS_Buttons_After_Login.png|500px|border|alt=Buttons After Login|Buttons After Login]]
 +
 
 +
== See also ==
 +
* [[UI_Configuration_(Mobile_Client)]]
 +
* [[Custom_Intent_Button]]
 +
 
 +
[[Category:Android|Configure Start Screen Content]]
 +
[[Category:How-To|Configure Start Screen Content]]
 +
[[Category:Publishing|Configure Start Screen Content]]

Latest revision as of 09:18, 31 August 2016

Introduction

The Dynamic Configurable start screen feature allows the UBIK® user to tailor the buttons on the start screen according to the needs of the customer.

Setup

  • The first step is to configure the start screen data using an xml in order for UBIK® to recognize the different tabs and buttons. The xml file, which must have the name css_config.xml, should be placed in the UI Configurations folder.
  • After the folder is configured, the next step is to validate the XML configuration file against the schema using an online validator. A solution can be found at Online XML Schema Validator.

The following xml shows an example configuration (also can be downloaded as IC FileLink Download.png Start_Screen_Configuration.zip an xml file):

  <StartScreenConfiguration>
    <Tab caption="Content">
      <ContentBrowserButton caption="Content Browser"/>
      <ContentBrowserButton caption="Events" UBIK-UID="31aaa5c9-85dd-4243-9cf8-89d712d32405" iconPath="events.png"/>
    </Tab>
 
    <Tab caption="AR1">
      <MapsButton/>
      <POIViewButton caption="AR View"/>
      <CustomIntentButton caption="Map of Linz" iconPath="linz.png">
        <TargetURI>
          https://www.google.com/maps/place/Linz/@48.295065,14.327405,12z/data=!3m1!4b1!4m2!3m1!1s0x47739595fa99854d:0x7c53292c577975c4
        </TargetURI>
      </CustomIntentButton>
      <CustomIntentButton caption="Skype">
        <TargetClass>
          com.skype.raider.Main
        </TargetClass>
      </CustomIntentButton>
      <CustomIntentButton caption="Maps">
        <TargetClass>
         com.augmensys.ubik.demo.lib.ui.activities.ar.map.UBIKMapActivityDemo
        </TargetClass>
      </CustomIntentButton>
      <TargetMapsButton caption="Flow Controller 213"  UBIK-UID="2ccd91c0-9cee-42f3-9d1d-be745908457d"/>
    </Tab>
 
    <Tab caption="AR2">
      <IDMarkerScanButton caption="ID Marker Scan"/>
      <QRCodeScanButton caption="QR Code Scan"/>
      <ConfigurableARButton caption="Configurable AR"/>
      <ConfigurableImageMarkerButton caption="Configurable Image Marker"/>
      <ARNavigationButton caption="Flow Controller 213" UBIK-UID="2ccd91c0-9cee-42f3-9d1d-be745908457d"/>
      <NavigationMapsButton caption="Flow Controller 213" UBIK-UID="2ccd91c0-9cee-42f3-9d1d-be745908457d"/>
      <DemoMapsButton caption="Flow Controller 213" UBIK-UID="2ccd91c0-9cee-42f3-9d1d-be745908457d"/>
      <RFIDScanButton caption="RFID Scan" />
    </Tab>
  </StartScreenConfiguration>
IC Hint square.pngThe config file has to be named css_config.xml.


Tab groups

The user can configure tab groups in the XML. They will be used as groupings for buttons.

Buttons

Buttons should be placed inside tab elements and can be parameterized. Buttons are configurable in terms of

  • Icon (Parameter: iconPath)
  • Caption (Parameter: caption)
  • Group/tab (name of tab group)
  • Object UID if needed (Parameter: UBIK-UID)
IC Hint square.pngThe icons are specified by their relative paths under SD_CARD/Android/data/APP_PACKAGE_NAME/files/UIConfigurations/CSSButtonIcons

The supported button types are as follows:

  • Content Browser Button

  • Custom Intent Button

  • Maps Button

  • Target Maps Button

  • ID Marker Scan Button

  • QR Code Scan Button

  • POI View Button

  • Configurable AR Button

  • Configurable Image Marker Button

  • Navigation Button

  • AR Navigation Button

  • Barcode Scan Button

  • RFID Scan Button

  • OCR Scan Button


Button Purpose Parameters
ContentBrowserButton Opens a content browser for displaying an object or the root if no object/uid is specified. UBIK-UID: UID of object to be shown on map
CustomIntentButton Launches a certain application or URI for the specified intent (using a customized intent URI or target class). TargetClass: name of an activity or an application
TargetURI: link information
MapsButton Opens UBIK® map. -
TargetMapsButton Opens UBIK® map for a target object. UBIK-UID: UID of object to be shown on map
ID MarkerScanButton Starts ID marker scanning. -
QRScanButton Starts QR code scanning. -
POIViewButton Opens UBIK® POI view. -
ConfigurableARButton Opens the ID marker 3D view. -
ConfigurableImageMarkerButton Opens the markerless view. -
ARNavigationPOIViewButton Opens UBIK® POI view with the AR navigation support. UBIK-UID: UID of object to be navigated to
ARNavigationMapsButton Opens UBIK® map for the specified object.Starts navigating to the specified object. UBIK-UID: UID of object to be navigated to
BarcodeScanButton Starts barcode scanning. -
RFIDScanButton Starts RFID scanning. -
OCRScanButton Starts OCR scanning. -

Color of Buttons

If no user is logged in the buttons are de-saturated. Once a user is logged in the buttons are colored according to following behaviour:

  • If default buttons are used the buttons are colored programmatically. The button and the color can be customized by the Development.
  • If custom buttons are used (specified by the parameter "iconPath") the original color of the button is retained.

Configuration guidelines

  • See UI Configuration (Mobile Client)
  • The maximum number of tabs is 6. Once this limit is exceeded, the configuration is invalid and won't be shown.
  • The captions of tabs are optional. In case there's only one tab, the tab will be invisible.
  • The buttons should always be nested inside tabs. Otherwise, the configuration is also invalid.
  • Captions and icons of buttons are optional. Default values are used for the unspecified ones.
  • While configuring the custom intent button, one should always specify one and only one of the target class and the target URI. Otherwise, the button is invalid and an error will be shown.
  • The configuration of the UBIK-UID parameter should always be specified for AR Navigation POI View Button, AR Navigation Maps Button, Demo Maps Button and Target Maps Button.


IC Attention.pngThe configuration is only applied when the app starts. Close the app completely (not only move it to the background) and restart it to make sure the configuration is read.


Results

The result is that the tabs and buttons configured in the XML file will be visible and open the right activity once they are clicked.

The following screenshots demonstrate the results of the example XML configuration.
The First Tab
The Second Tab
The Third Tab

After users log in, the buttons are enabled and colored. Upon being clicked, they should trigger different actions.
Buttons After Login

See also

Retrieved from "https://wiki.augmensys.com/index.php?title=HowTo:Configure_Start_Screen_Content&oldid=19660"