Chromatics - Developers

Introduction

Developing with Chromatics

Logitech ARX is a second-screen mobile application developed by Logitech to allow game data to be displayed on your devices while playing the game. Each of these apps is built in HTML, CSS and JavaScript and game data can be passed into these web files from Chromatics. Note that Logitech Gaming Software (LGS) must be running for ARX to work. Currently iOS and Android devices are supported.

To develop a plugin for Chromatics, you must have some entry-level HTML, CSS and JavaScript knowledge and a testing device.

Please keep in mind that Logitech ARX support in Chromatics is still in alpha and as such is still in development. We will be adding more functionality, commands and documentation in later releases as we go.
Plugin Setup
Creating a new Plugin

To create a new plugin you need to make a new folder in the plugin directory of your Chromatics installation (the directory where Chromatics.exe is located). Name this folder what you wish to name your plugin.

Once your plugin folder has been made, three additional folders must be created within your plugin folder.
- /css
- /img
- /js
Important: Even if you are not using any of these folders, all must be present for your plugin to work.

When developing your plugin - CSS, JavaScript and images must be stored in their respected directories or they will not load.

Creating a Manifest file

A manifest file must be created in the root directory of your plugin folder which contains information about your plugin. Create a new text file in notepad or other text editor and write a single-line with the plugin name.
This plugin name MUST match the plugin folder name.

Save the file as plugin.manifest, renaming the file extension to .manifest.

Creating an index file

The default plugin web app shown in ARX is loaded from an index.html file. You can create other html files and link to them but users must start on an index home page.

All HTML files created must contain opening and closing HTML, Head and Body tags.
Accessing FFXIV Data
Reading data from Final Fantasy XIV (Concept)

FFXIV is inserted into a number of hidden <div> tags at the top of the HTML file after the opening <body> tag. The contents of each of these values can be read in using JavaScript. While Chromatics will automatically keep these values updated with the latest data, a page refresh would normally be required to get the latest data; as this is quite inefficient to do, wrapping your JavaScript functions in a setInterval() call is the preferred method to update your plugin data.

Setup your plugin to read FFXIV data

To access the FFXIV data within your plugin, you need to include two JavaScript files into your HTML file. The first is the JQuery library. You can do this by linking directly to the latest dist inline:
```
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
```
Or alternatively, you can download the latest version and store it in your /js folder:
```
 <script src="js/jquery.min.js"></script>
```
Secondly you must include a JavaScript reference to the ffxivsetup.js file which Chromatics generates. You can do this by adding the following JavaScript include after the above JQuery line:
```
 <script src="ffxivsetup.js" type="text/javascript"></script>
```
Both these files must be inserted before the closing </head> tag.
```
 <head>
  <script src="js/jquery.min.js"></script>
  <script src="ffxivsetup.js" type="text/javascript"></script>
 </head>
```
Accessing the Data

Once JQuery and ffxivsetup.js have been loaded in the page, you can add an in-line <script> section just before the closing </body> tag to fetch the data into variables. We recommend using the following technique to do so:
```
 <body>
   //Your plugin HTML

   <script type="text/javascript">
     window.setInterval(FetchData, 500);
     FetchData();

     function FetchData() {
        var myplayername = $("#playername").text();
        //Player name value is now stored into myplayername variable.
     }

   </script>

 </body>
```
Important: We recommend not setting an interval time of less than 300 milliseconds.

List of ID's

ID Value Example
Short description of ID.

#hp_percent 70%
Returns the percentage of HP the player currently has. (Value between 0% and 100%).

#mp_percent 90%
Returns the percentage of MP the player currently has. (Value between 0% and 100%).

#tp_percent 10%
Returns the percentage of TP the player currently has. (Value between 0% and 100%).

#hp_current 20000
Returns the current HP value the player has.

#mp_current 10000
Returns the current MP value the player has.

#tp_current 1000
Returns the current TP value the player has. (Value between 0 and 1000).

#hp_max 20000
Returns the maximum HP value the player currently has.

#mp_max 10000
Returns the maximum MP value the player currently has.

#tp_max 1000
Returns the maximum TP value the player currently has. (Always 1000).

#hud_type TBC
TBC.

#current_location 10
Returns the Map ID of the location you are currently in.

#hud_mode TBC
TBC.

#target_hppercent 90%
Returns the percentage of HP your direct target currently has.

#target_hpcurrent 100000
Returns the current value of HP your direct target has.

#target_hpmax 900000
Returns the max value of HP your direct target has.

#target_name Striking Dummy
Returns the full name of your direct target.

#target_name Striking Dummy
Returns the full name of your direct target.

#target_engaged true/false
Returns the true or false if the target is currently engaged with a player or NPC.

#playerposX TBC
Returns your current X coordinate on the map.

#playerposY TBC
Returns your current Y coordinate on the map.

#playerposZ TBC
Returns your current Z coordinate on the map.

#actionstatus TBC
TBC.

#castperc 50%
Returns the percentage value of your current cast.

#castprogress 0.5
Returns the current progress value of your cast. (Value between 0.0 and 1.0).

#casttime 8.2
Returns the full cast time of your cast.

#castingtoggle true/false
Returns true or false if you are currently casting or not.

#hitboxrad TBC
Returns your current hitbox radius value.

#playerclaimed true/false
Returns true or false if you are currently engaged or not.

#playername John Smith
Returns the current player name for the logged-in account.

#playerjob BRD
Returns your current job or class in abbreviated form.

#mapid 84
Returns the current map ID for the zone you are in.

#mapindex TBC
Returns the current map index for the zone you are in.

#mapterritory TBC
Returns the current map territory for the zone you are in.

#targettype Enemy
Returns the current target type. (Enemy, NPC, PC, etc).
Testing & Debug

Loading Chromatics Plugins

If the plugin directory have been setup correctly and a plugin.manifest and index.html exist, your plugin will appear in the ARX template selector in Chromatics on next launch. Upon selecting your plugin it will be loaded in your ARX application for testing.

Please note that ARX support in Chromatics is still in Alpha stages of testing so bugs may be present. Please contact us if you have any questions or enquiries regarding developing plugins for Chromatics.

Debugging

You can use the provided ARX console that is included with Logitech Gaming Software (LGS) to parse console.log and console.error commands from your code. For more information, please download the Logitech ARX developer documentation and read the AppletDevelopmentGuide.pdf that is provided with it.
Publishing

Sharing your plugins on this site

If you have developed a plugin you wish to share on this site, please contact us and let us know. We are keen to see what people are making and share it with the community.

Developers

Developing with Chromatics

Creating a new Plugin

Creating a Manifest file

Creating an index file

Reading data from Final Fantasy XIV (Concept)

Setup your plugin to read FFXIV data

Accessing the Data

List of ID's

Loading Chromatics Plugins

Debugging

Sharing your plugins on this site