# Interacting with the user

The mission app is available on the tablet and is used to start missions as well as interact with the mission throughout the duration of its execution.

# Main display Widgets

The Main Display widgets are available on top of the mission map. You can configure the elements as needed at anytime.

Element	Description
Mission Briefing	Opens the briefing page (see below)
Mission Dispatch Briefing	Opens the briefing page (see below)
User Actions	Generic commands which the user may also bind to a button on their controller and activate without the tablet open.
Hover Target Display	Provides guidance cross-hair UI to a specific location (target)
Message	Provides text for the user to guide them at this stage of the mission
Progress Bar	Provides status information regarding the current objective or overall mission
Objective Title	Provides information regarding the current main objective
Modal Dialog	Requests the user to make a choice

Each widget is covered in the test program below.

To start you can use set_message.

{"set_message": "hello world"}

And this message will be visible at the bottom of the mission app.

# Briefing & Dispatch Widgets

These widgets are available for the dispatch and briefing pages. The briefing is static and defined with the mission, while the dispatch is dynamic and may be changed at anytime.

Element	Description
#comment	human-readable description, no effect
title	Display large heading text
text	Display text with various formatting
textbox	Allow the user to type free-form text
buttonbar	Create a row of buttons
buttonbar.button	Create clickable button (with `select_condition`)
link	Create clickable link
image	Draw an image
describe_icon	Draw a small image with text to the right of it
iframe	Display an IFrame
slider	Display an slider which the user may use to pick from a range of values
progressbar	Display a range of values

Each widget has show_condition and disabled_condition:

show_condition: Optional. QUERY which determines if the element should be visible.
disabled_condition: Optional. QUERY which determines if the element should be non-interactive and visibly disabled.
select_condition: Optional. QUERY which determines if the element should be visually selected. (buttonbar.button only)

# Map Widgets

Map widgets enable you to place elements onto the mission map (and also available on DMAP/NAVD on the aircraft MFDs).

You can add points with icon and/or text, and draw lines. You can also draw a precise range circle around a point.

Examples:


{"copy_location":{"bearing":330,"dist":500},"to":"P1"},
{"copy_location":{"bearing":30,"dist":500},"to":"P2"},
{"copy_location":{"bearing":120,"dist":500},"to":"P3"},
{"copy_location":{"bearing":240,"dist":500},"to":"P4"},
{"set_map":{"add":{"line":{ "points":["P1","P2","P3","P4", "P1"], "stroke":{"color":"#4287f5", "width":4}}}}},

{"set_map":{"add":{"point":{"location":"P1","text":"waypoint text"}}}},
{"set_map":{"add":{"point":{"location":"P4","icon":"ki_helipad"}}}},

You may monitor the user's map selection by looking at the location $MISSION_SELECTED_POI_LOCATION and L:MISSION_SELECTED_POI_TYPE (zero if not selected).

This program has an example of each of the widgets.

{
  "title": "Widget Test Program",
  "briefing": [
    {"title": "Briefing Title"},
    {"text": "pagraph text"},
    {"text": "pagraph text with params {0} {1}", "params":[99, 100]},
    {"text": "red text", "color": "red"},
    {"text": "centered text", "align": "center"},
    {"text": "Text input: (value: {0})", "params": [{"local": "my_textbox"}]},
    {"textbox": "my_textbox"},
    
    {"text": "Button bar (button clicked count={0})", "params":[{"local":"test_local"}]},
    {"buttonbar":[
      {"title":"add", "commands":[
        {"set": {"local":"test_local"}, "value": {"add":[{"local":"test_local"}, 1]}}
      ]},
      {"title":"subtract", "commands":[
        {"set": {"local":"test_local"}, "value": {"add":[{"local":"test_local"}, -1]}}
      ]},
      {
        "title":"my button (with conditions)", 
        "commands":[
          {"set": {"local":"test_local"}, "value": {"add":[{"local":"test_local"}, 1]}}
        ],
        "show_condition":{"require":{"local":"test_local"}, "gt":0},
        "select_condition":{"require":{"local":"test_local"}, "eq":2},
        "disabled_condition":{"require":{"local":"test_local"}, "eq":3}
      }
    ]},
    
    {"link":"my link", "commands": [
      {"set": {"local":"test_local"}, "value": {"add":[{"local":"test_local"}, 1]}}
    ]},
    
    {"image": "https://www.hypeperformancegroup.com/cdn/shop/files/HPG_Solid_Transparent_180x.png"},
    
    {"describe_icon": "fire_station", "description": "icon description here"},
    
    {"iframe": "https://davux.com/docs", "height": 400},

    {"slider":{ "min":0, "max":100, "var":["L:TEST","number"] }},

    {"progressbar":{ "min":0, "max":100, "color":"red", "var":["L:TEST","number"] }},

    {"#comment":"you may add comments as needed"}
  ],
  "objectives": [
    {
      "title": "Done",
      "commands": [
        {"set": {"local":"test_local"}, "value":0},
        {"set":{"var":["L:TEST","number"]},"value":45},
        {"set_modal":{}},
                
        {"create_user_action": {
          "id": "user_action_1", 
          "title": "User Action 1",
          "click_commands": [ {"destroy_user_action":"user_action_1"} ] 
        }},
        {"create_user_action": {
          "id": "user_action_2", 
          "title": "User Action 2",
          "click_commands": [ {"destroy_user_action":"user_action_2"} ] 
        }},
        {"create_user_action": {
          "id": "user_action_3", 
          "title": "User Action 3",
          "click_commands": [ {"destroy_user_action":"user_action_3"} ] 
        }},
        {"create_user_action": {
          "id": "user_action_3", 
          "title": "User Action 4",
          "click_commands": [ {"destroy_user_action":"user_action_4"} ] 
        }},
        {"create_user_action": {
          "id": "user_action_5", 
          "title": "User Action 5",
          "click_commands": [ {"destroy_user_action":"user_action_5"} ] 
        }},
        {"create_user_action": {
          "id": "user_action_6", 
          "title": "User Action 6",
          "click_commands": [ {"destroy_user_action":"user_action_6"} ] 
        }},
        
        {"set_hover_display":{"target":"$USER","range":0.1}},
        
        {"set_message": "This is the user message area, the primary way to give insturctions without digging into the dispatch or briefing"},
        {"set_objective_title":"Main Objective Directive"},
   
        {"set_progressbar":{"min":0,"max":100,"var":["L:TEST","number"], "color":"green"}},
        
        {"set_dispatch":[
          {"text":"Example dispatch"}
        ]},
        
        {"set_modal": {
          "title": "Modal Dialog", 
          "text": "Description of the modal dialog and the actions below.<br /><br /> The modal dialog may be used to request a choice from the user, without them needing to interact with the breifing or dispatch.", 
          "options": [
            {"text": "Option 1", "style": "primary", "commands": [
              {"#comment": "use a sleep 0 here to make sure button with empty list still executes"},
              {"sleep": 0}
            ]},
            {"text": "Option 2", "style": "secondary", "commands": [
              {"#comment": "use a sleep 0 here to make sure button with empty list still executes"},
              {"sleep": 0}
            ]},
            {"text": "Option 3", "style": "danger", "commands": [
              {"#comment": "use a sleep 0 here to make sure button with empty list still executes"},
              {"sleep": 0}
            ]},
            {"text": "Option 4", "style": "subtle", "commands": [
              {"#comment": "use a sleep 0 here to make sure button with empty list still executes"},
              {"sleep": 0}
            ]},
            {"text": "Option 5", "style": "", "commands": [
              {"#comment": "use a sleep 0 here to make sure button with empty list still executes"},
              {"sleep": 0}
            ]}
          ]
        }},
        
        {"copy_location":{"bearing":330,"dist":500},"to":"P1"},
        {"copy_location":{"bearing":30,"dist":500},"to":"P2"},
        {"copy_location":{"bearing":120,"dist":500},"to":"P3"},
        {"copy_location":{"bearing":240,"dist":500},"to":"P4"},
		    {"set_map":{"add":{"line":{ "points":["P1","P2","P3","P4", "P1"], "stroke":{"color":"#4287f5", "width":4}}}}},
        
        {"set_map":{"add":{"point":{"location":"P1","text":"waypoint text"}}}},
        {"set_map":{"add":{"point":{"location":"P4","icon":"fire_station"}}}},
        
        {"sleep": "forever"}
      ]
    }
  ],
  "icons": {
    "fire_station": "data:image/png;base64,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"
  }
  
}

← Working with Data Working with AI objects →

# Interacting with the user

# Main display Widgets

# Briefing & Dispatch Widgets

# Map Widgets

# Widget Test Program