How to create favorites on the menu

As of version 1.1, favorites have been supported. But to date, I have not completed the front end code to create them. But, if you follow these instructions, you can create them manually very easily. The main reason for doing this is to change or add arguments to control the options documented in the help of each Widget that are not already in the main menu itself. The other reason is to simply bring your favorites to the top of the menu.

Documents\SIMRacingApps\favorites

First of all, all the favorite files must be saved in the Documents\SIMRacingApps\favorites folder. If that folder doesn't exist, you can create it manually or it will create it when you upload the sample favorite.

Sample file

There is an example favorite found on the downloads page called favorites-sample.sra at http://downloads.SIMRacingApps.com. To install it follow these steps.

1. Download the sample file from http://downloads.SIMRacingApps.com.
2. With the SIMRacingApps Server running, connect to the main menu using a standard browser.
3. Go all the way to the bottom of the main menu and click "Choose File".
4. Select the favorites-sample.sra file you downloaded in step 1.
5. Click "Upload".

This will create the following files in the favorites folder. Feel free to modify these files or copy them as a template for creating your own.

Documents\SIMRacingApps\favorites\MyFuelTank.json
Documents\SIMRacingApps\favorites\MyFuelTank-icon.png

Format of the .json file

The .json file contains the information to name the favorite, and what options you want to use. The sample file looks like this. Note that all the paths are relative to the Documents\SIMRacingApps folder.

{
"doc": "JavaScriptDoc/sra-fuel-tank.html",
"name": "MyFuelTank",
"description": "Displays Fuel Remaining using worst lap and last 2 laps averaged",
"url": "apps/WidgetLoader?widget=FuelTank&",
"icon": "favorites/MyFuelTank-icon.png",
"width": 360,
"height": 480,
"args": "PitCommandsSIMController=N&LAPSTOAVERAGE=0&ALTLAPSTOAVERAGE=2&SHOWLAPSTOAVERAGE=Y&SHOWALTLAPSTOAVERAGE=Y&SHOWTABLE=Y&SHOWTOGOLAPS=Y&SHOWINTANKLAPS=Y&SHOWPERTANKLAPS=Y&SHOWTOFINISH=Y&SHOWINTANK=Y&SHOWNEEDED=Y&SHOWADDING=Y&SHOWPITSTOPS=Y&INTERVAL=100"
}

Be careful with the format of this file or it will not load. If it doesn't, look at this page to help you diagnose what's wrong, https://github.com/SIMRacingApps/SIMRacingApps/wiki/How-to-validate-a-JSON-file-format.

doc

This is the path to the documentation file that launches when the user clicks on the name/description of your favorite from the main menu. The format of the help file can be any format the browser can display. In the sample file, the path to the help is "JavaScriptDoc/sra-fuel-tank.html". You will not find this file on your harddrive. It is embedded in the Server's .exe file. To find the names of the standard help files, you can browse the source files at https://github.com/SIMRacingApps/SIMRacingApps.github.io/tree/master/docs/JavaScriptDoc.

name

The name of your favorite must be unique. You can call yours anything you want. In the sample file, I called it "MyFuelTank". The name is display on the main menu.

description

The description of your favorite can be anything you want. In the sample file, I used "Displays Fuel Remaining using worst lap and last 2 laps averaged" to describe what by favorite will do.

description-countrycode

If you want to have your description displayed in different languages, then you will need to add a description for each language. Here is an example of German.

"description-de": "Tank Reichweite / Rechner, bezieht sich auf schlechteste und letzte 2 Runden-Durchschnitt",

url

The url is the path to the WidgetLoader. The url in the sample file is "apps/WidgetLoader?widget=FuelTank&". The best way to get this information, is to run the standard Widget and look at the URL. For example, this is what you get when you launch the standard FuelTank Widget.

apps/WidgetLoader?widget=FuelTank&PitCommandsSIMController=false&SHOWALTLAPSTOAVERAGE=true

Note how you only need what's relative to "SIMRacingApps" with only the "widget" argument listed followed by an ampersand(&).

External URLs

As of version 1.6, external URLs are supported. This way you can have any website in an SRA window while you are racing. One use for this is to display the Discord Overlay. Please see this post in the SIMRacingAppsBETA group, https://www.facebook.com/groups/SIMRacingAppsBETA/931302117027930/

icon

The icon is the path to the image to display on the main menu. The icon path in the sample file is "favorites/MyFuelTank-icon.png". You can use any image format the browser can display, like png, jpg, gif, etc. You can create them using any tool, but what I do, is simply take a screen grab of the widget using a tool like "Snipping Tool", which comes with Windows 10. If you prefer to just use the existing icon, use this as the path. Just replace "FuelTank" in this example, with the widget name you are using.

"icon": "widgets/FuelTank/icon.png",

width and height

I apologize in advance that I have not made these numbers easier to get. I do not recommend changing these numbers from what the standard widget uses. Although, it might work if you keep the aspect ratio the same. The only way to get them is to look at the source code. Here is the link to the widget's source code, https://github.com/SIMRacingApps/SIMRacingAppsWebContent/tree/master/widgets. Just navigate into the widget you are using, and look at the "listing.json" file. Also note, the format of this file is similar to the favorites format and could be useful in extracting some information.

args

The args is a list of all the options and their values separated with ampersands(&). In the sample file, I listed out all of the arguments for the FuelTank widget that was known at the time I created it. Please refer to the help for the standard widget for the most current options available. Here is the sample file's value:

"args": "PitCommandsSIMController=N&LAPSTOAVERAGE=0&ALTLAPSTOAVERAGE=2&SHOWLAPSTOAVERAGE=Y&SHOWALTLAPSTOAVERAGE=Y&SHOWTABLE=Y&SHOWTOGOLAPS=Y&SHOWINTANKLAPS=Y&SHOWPERTANKLAPS=Y&SHOWTOFINISH=Y&SHOWINTANK=Y&SHOWNEEDED=Y&SHOWADDING=Y&SHOWPITSTOPS=Y&INTERVAL=100"

Note, as this is the last variable in the file, it does not need a trailing comma on the end.

Faster Compteur

You can take any listing.json file found in the source code and copy it the favorites folder. Just be sure to give it a different name. The source for the widgets can be found here, https://github.com/SIMRacingApps/SIMRacingAppsWebContent/tree/master/widgets. I added the &INTERVAL=16 to the args to make it go faster.

{
"name": ["Compteur 16ns","CompteurF1 16ms"],
"description": ["Display various driver inputs",
                "Display various driver inputs, F1 version"
],
"description-de": ["Zeigt Fahrereingaben an",
                   "Zeigt Fahrereingaben an, F1-Version"
],
"description-es": ["Display various driver inputs",
                "Display various driver inputs, F1 version"
],
"url": "apps/WidgetLoader?widget=Compteur&",
"doc": "JavaScriptDoc/sra-compteur.html",
"icon": ["widgets/Compteur/icon.png","widgets/Compteur/iconF1.png"],
"width": 480,
"height": 480,
"args": ["SHOWF1COMPTEUR=false&INTERVAL=16",
         "SHOWF1COMPTEUR=true&INTERVAL=16"
]
}