C3Fire

C3Fire Module Communication UI

From C3LearningLabs


Communication UI Panel

Value

Description

IDName

The name used to identefy the panel in the configuration.

Pos

Position in the C3Fire UI.

X, Y coordinates based from top left corner.
Measured in pixels.

RoleIDName

The ID name of the user that will have the panel displayed in their UI.

Size

Size of the element"

Measured in pixels.


Text

The header of the panel,


Configuration example: 

  ...
  <ComunicationUIs>
    ...
    <ComunicationUI
      IDName = "Manager_TestUIPanel"
      Pos = "300,100"
      RoleIDName = "Manager"
      Size = "200,100"
      Text = "Test Panel" >

    </ComunicationUI>
    ...
  </ComunicationUIs>
  ...

Comunication UI Elements

Value

Description

IDName

The name used to identify the element in the configuration.

Value example = "ManagerTestUIMissionPanel"

Type

This value desides the element type.

Value example = "Button"
"TextAria" , "Button", "Checkbox", "Slider"

Color


Value example = "Default"

Enabled

This value is a boolean deciding if the user can interact with the element.

Value example = "True", "False"

Event

This value should contain the IDName of any events that should occur when the element is interacted with

Value example = "ConfirmationLightOn"

Pos

Position on the Panel UI.

Measured in pixels.

Size

Size of the element"

Measured in pixels.

SliderPos

This value is specific to the Slider Type and decides the current position of the slider

Status

This value decides what the current status of the element type

Value example = "1"

Text

links to a text string in the language configs.

Value example = "ConfirmationButton"


Configuration example: 

  ...
  <ComunicationUIs>
    ...
    <ComunicationUI
      ... >
      ...
      <Element
        IDName = "Manager_TestUIPanel_Button"
        Type = "Button"
        Color = "Default"
        Enabled = "True"
        Event = "Manager_TestUIPanel_Button_Event"
        Pos = "0,0"
        Size = "80,20"
        SliderPos = "0"
        Status = "True"
        Text = "Lorem Ipsum" />
      ...
    </ComunicationUI>
    ...
  </ComunicationUIs>
  ...

Communication UI Event

Example UI

In this example i will be showing you how to create a simple UI that attempts to display the basic functions of the system. The UI will have 3 users the Commander, Pilot 1 and Pilot 2.


C3fire-doc-module-comui-example-commander.png

C3fire-doc-module-comui-example-pilote-1.png

C3fire-doc-module-comui-example-pilote-2.png

C3fire-doc-module-comui-example-main-all.png

C3fire-doc-module-comui-example-main-compact.png


Commander

Mission Panel

The first panel in the UI will be called "Mission Panel".
The panel will contain 5 buttons, 2 text arias and 6 checkboxes.
The buttons will be used to send information regarding the current mission from the commander to the pilots.
The checkboxes will display if the pilots are done with the mission.

C3fire-doc-module-comui-example-commander.png



Panel


The first step is to add a panel <ComunicationUI ..... > </ComunicationUI>, the dots should be replaced by the values below.

IDNameFor the program to function properly and for your own ease of use make sure you give the panel a unique and accurate name.
In this case the name will be structured like this "RoleIDName_UniquePanelName"

Pos is were you add decide panels position, while testing i recommend putting it in a open aria.

RoleIDName is how you decide what user will see the panel on their UI in this case the user will be the "manager".

Size decides the panel size 170,130 will fit all the elements of this panel.

Text is the last data value the panel needs, this will be the title of the panel that the user can read.


Configuration


Elements


Now it is time to add the elements <Element .../>, all the elements should be placed in between <ComunicationUI ..... > and </ComunicationUI>.
Similarly to the panel the dots should be replaced by the elements values, however unlike the panel the events do not need a separate end bracket you instead end the first bracket with /> instead of >

For the elements to function properly you will need to give them four values IDName, Type, Pos and Size

IDName is the name used to identefy the element in the configuration.
In this example the IDName will be structured like this "PanelIDName_UniqueElementName_Type".

Type defines what functionality the element will have.

Pos and Size determine the element's position inside the panel, note that values larger then the panel size will be placed outside the panel.

There are also some other values that are not necessary for every event but will be used in the panels events.

Enabled determine if the element can be interacted with.

Event contains the IDName of the event that will be called when the element is interacted with.
In this example the Event IDName will be structured like this "CallerElementIDName_EventName_Event".

Text contains any text the element displays.

Status a boolean value that determines the state of one of the elements functions in this case if the checkbox is checked or not.

Configuration


Pilot 1 Status Panel

Configuration


Pilot 2 Status Panel

The Pilot 2 Status Panel is a copy of Pilot 1 Status Panel the only difference is the panel position and all the names will have pilot 1 and 2 swapped out for each other.

Configuration


Pilot 1

C3fire-doc-module-comui-example-pilote-1.png


Mission Panel

Configuration


Status Panel

Configuration


Copilot Panel

Configuration


Pilot 2

C3fire-doc-module-comui-example-pilote-2.png

The all three Pilot 2 Panels are a copy of Pilot 1s Panels the only difference is the panel position and all the names will have pilot 1 and 2 swapped out for each other.

Configuration


Events

Commander Mission Panel Events

the Commander Mission Panel have five buttons eatch one will have one event.


Configuration


Pilot 1 Mission Panel Events

Configuration


Pilot 2 Mission Panel Events

Configuration


Pilot 1 Status Panel Events

Configuration


Pilot 2 Status Panel Events

Configuration


Example Code

Commander Mission Panel

Configuration


Commander Pilot 1 Status Panel

Configuration


Commander Pilot 2 Status Panel

Configuration


Pilot 1 Mission Panel

Configuration


Pilot 1 Status Panel

Configuration


Pilot 1 Copilot Panel

Configuration


Pilot 2 Mission Panel

Configuration


Pilot 2 Status Panel

Configuration


Pilot 2 Copilot Panel

Configuration


Event Example Code

Commander Mission Panel Events

Configuration


Pilot 1 Mission Panel Events

Configuration


Pilot 2 Mission Panel Events

Configuration


Pilot 1 Status Panel Events

Configuration


Pilot 1 Status Panel Events

Configuration


Retrieved from "http://192.168.1.141:36040/w/index.php?title=Config/Config_ComunicationUI&oldid=1504"