SimRacing-Tools.de
english
deutsch
home » Dashboard » Documentation » JavaScript functions

Introduction

That often needed JavaScript functions have not to be created frequently from scratch, there are the three libraries utils.js, track.js and buttonbox.js existing. Each of the libraries can be easily integrated into the index.html of a style and provides the required funtionality. A good example is the output of the lap time, which is transmitted as a float number in the unit of seconds in the JSON (eg. 71.102), but the output should be a string in form of 1:11.102. Therefore the function SecondsToTimeString(seconds) will format the transfered seconds into the desired output format.

To use the libraries two steps are required:

  1. Integrate the library in index.html of the styles
  2. Call the function in JavaScript (script.js) of the styles

Example for the output of the lap time:

index.html

script.js

 

The functions of the following libraries are described:

  • utils.js - general things like formatting of times or color formatting depending on tyre temperature and type
  • track.js - functions for creating track maps and track maps with sector markers
  • buttonbox.js - funktion, to transmit keyboard inputs via style

 

Utils functions (utils.js)

The utils.js contains functions for commonly neeeded things, such as formatting of times or color formatting of elements.

The following functions are available:

  • SecondsToGapTimeString(seconds)
  • SecondsToTimeString(seconds)
  • SecondsToTime(seconds)
  • GetSessionString(session_id)
  • GetSimString(sim_id)
  • SetTyreTemperatureColor(id, temp)

 

SecondsToGapTimeString(seconds)

  • Parameter: seconds (float) - seconds
  • Return: String for temporal distance (positive or negativ)

Example:

  • Parameter: 60.750
  • Return: +1:00.750

 

SecondsToTimeString(seconds)

  • Parameter: seconds (float) - seconds
  • Return: String for lap time

Example:

  • Parameter: 60.750
  • Return: 1:00.750

 

SecondsToTime(seconds)

  • Parameter: seconds (float) - seconds
  • Return: String for time (HH:MM:SS)

Example:

  • Parameter: 3671.5
  • Return: 1:01.11

 

GetSessionString(session_id)

  • Parameter: session_id (int) - Session-ID
  • Return: String of session

Example:

  • Parameter: 3
  • Return: Practice 3

 

GetSimString(sim_id)

  • Parameter: sim_id (int) - Simulation-ID
  • Return: String of simulation

Example:

  • Parameter: 4
  • Return: RaceRoom Racing Experience

 

SetTyreTemperatureColor(id, temp)

  • Parameter: id (int) - ID of HTML element
  • Parameter: temp (float) - temperature
  • Result: the background color of the HTML element will be set depending on the tyre temperature and type (blue, green, red)

 

Track functions (track.js)

The track.js contains functions for creating track maps, which are scaled automatically depending on the canvas size.

The following functions are available:

  • drawLine(canvasID,x,y,lineWidth,strokeStyle)
  • drawTrackMap(canvasID, points, lineWidth, strokeStyle)
  • drawInitalTrackMap(canvasID, points, marginX, marginY, lineWidth, strokeStyle)
  • drawInitalTrackMapSectors(canvasID, points, marginX, marginY, lineWidth, strokeStyles)
  • clearTrackMap(canvasID)

 

drawLine(canvasID,x,y,lineWidth,strokeStyle)

  • Parameter: canvasID (string) - ID of canvas element
  • Parameter: x (float) - x-Coordinate
  • Parameter: y (float) - y-Coordinate
  • Parameter: lineWidth (int) - Stroke width
  • Parameter: strokeStyle (string) - Stroke color
  • Result: draws a line from the previous point, if initDriverTrackPosition = true only the starting point will be set

 

drawTrackMap(canvasID, points, lineWidth, strokeStyle)

  • Parameter: canvasID (string)- ID of canvas element
  • Parameter: points (array) - Array of points
  • Parameter: lineWidth (int) - Stroke width
  • Parameter: strokeStyle (string) - Stroke color
  • Result: draws a track map for the given points

 

drawInitalTrackMap(canvasID, points, marginX, marginY, lineWidth, strokeStyle)

  • Parameter: canvasID (string) - ID of canvas element
  • Parameter: points (array) - Array of points
  • Parameter: marginX (int) - margin in x-direction
  • Parameter: marginY (int) - margin in y-direction
  • Parameter: lineWidth (int) - Stroke width
  • Parameter: strokeStyle (string) - Stroke color
  • Result: draws a initial track map for the given points

 

drawInitalTrackMapSectors(canvasID, points, marginX, marginY, lineWidth, strokeStyles)

  • Parameter: canvasID (string) - ID of canvas element
  • Parameter: points (array) - Array with point and sector information
  • Parameter: marginX (int) - margin in x-direction
  • Parameter: marginY (int) - margin in y-direction
  • Parameter: lineWidth (int) - Stroke width
  • Parameter: strokeStyles (array) - Array with stroke colors
  • Result: draws a initial track map for the given points and colors the sectors

 

clearTrackMap(canvasID)

  • Parameter: canvasID (string) - ID of canvas element
  • Ergebnis: clears the canvas element, removes the track map

 

ButtonBox functions (buttonbox.js)

The buttonbox.js contains functions to transmit keyboard inputs via style.

The following functions are available:

  • sendKey(key)

 

sendKey(key)

A List of all possible key codes can be found in the FAQs.

  • Parameter: key (string) - key code
  • Return: responseText (optional)
  • Result: sends the key code

example:

bind sendKey('e') to your elements onclick event ==> <div id="mybutton" onclick="sendKey('e');"></div>

')