ETS2 Telemetry Skin for broadcasting (WIP)

config.json

{
    "comments": [
        "==============================",
        "     SKIN CONFIGURATION       ",
        "==============================",

        "Required properties:",

        "           name: name of the skin (directory name: /skins/name)",
        "          title: human readable skin title",
        "         author: author name",
        "          width: width of the skin in pixels (same as defined in the CSS)",
        "         height: height of the skin in pixels (same as defined in the CSS)"
    ],

    "config": {
        "name": "broadcast_widget_thin",
        "title": "Inline html widget for broadcast (nodecg)",
        "author": "Philmist",        
        "width": 0,
        "height": 0
    }    

}

dashboard.css

/*
    Dashboard skin template.

    If you want to create your own dashboard skin (or tweak something)
    create a copy of the "/skins/template" directory and rename it
    to something like: "/skins/your_skin_name" and edit config.json file inside.

    See skin tutorial PDF file for more information.

    CSS naming convention:

    - Dashboard core script maps all telemetry data properties to respective class names,
      so truck's speed will be .truck-speed and current gear is .truck-gear (see JSON).
    - All boolean telemetry properties will have a special ".yes" class added
      when the value is true (will be removed if value is false).
    - When dashboard core script updates DOM it will always add
      data-value attribute containing current value, so you
      can use it to have custom css selectors based on the actual data
      (for example, this skin uses .truck-gear[data-value="N"] to define
      different style for neutral or reverse gear, see below).

    For more information go to home page: https://github.com/Funbit/ets2-telemetry-server

*/


body {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.3);
  height: auto;
  overflow: visible;
  text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.4),
               1px 1px 1px  rgba(255, 255, 255, 0.4),
               -1px 1px 1px  rgba(255, 255, 255, 0.4),
               1px -1px 1px  rgba(255, 255, 255, 0.4);
}

.dashboard {
  height: 100vh;
  width: 100vw;
}

.dashboard.game-connected {
  visibility: hidden;
}

.dashboard.dashboard.game-connected.yes {
  visibility: visible;
}

.rows {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.steer {
  flex: 1;
  background: linear-gradient(to right,rgba(0, 0, 255, 0.2), rgba(0, 0, 0, 0), rgba(0, 0, 255, 0.2));
  margin: 0;
  padding: 0;
  display: block;
  font-size: 10vmin;
}

.pedal {
  flex: 2;
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
}

.nav-info {
  flex: 2;
  margin: 0;
  padding: 0;
}

.game-steer-position,
.user-steer-position {
  position: absolute;
  right: 50%;
  width: min-content;
  height: auto;
  padding: 0;
  margin: 0;
  transform: translateX(50%);
  font-size: 4vw;
}

.game-steer-position {
  z-index: 2;
}

.user-steer-position {
  z-index: 1;
}

.throttle-background {
  background: linear-gradient(to right, rgba(0, 128, 0, 0.8), rgba(1, 34, 1, 0.8));
  flex: 1;
  display: block;
  contain: content;
}

.throttle-foreground {
  background: rgba(0, 0, 0, 0.9);
  color: black;
  position: absolute;
  left: 0%;
  width: 100%;
  content: "";
  margin: 0;
  padding: 0;
  z-index: 1;
  display: block;
  height: 100%;
}

.speed,
.fuel {
  background: transparent;
  font-family: "Courier New", monospace;
  color: black;
  text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.5),
               1px 1px 1px rgba(255, 255, 255, 0.5),
               -1px 1px 1px rgba(255, 255, 255, 0.5),
               1px -1px 1px rgba(255, 255, 255, 0.5);
  height: auto;
  align-items: center;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3vw;
}

.speed {
  margin-right: 1em;
  padding: 0;
  right: 0%;
  position: absolute;
  z-index: 2;
  font-size: 4vw;
}

.truck-cruiseControlOn {
  color: blue;
  visibility: hidden;
}

.truck-cruiseControlOn.yes {
  visibility: visible;
}

.brake-background {
  background: linear-gradient(to left, rgba(255, 0, 0, 0.8), rgba(65, 0, 0, 0.8));
  flex: 1;
  display: block;
  contain: content;
}

.brake-foreground {
  background: rgba(0, 0, 0, 0.9);
  color: black;
  position: absolute;
  right: 0%;
  width: 100%;
  content: "";
  margin: 0;
  padding: 0;
  z-index: 1;
  display: block;
  height: 100%;
}

.fuel {
  margin-left: 1em;
  padding: 0;
  left: 0%;
  position: absolute;
  z-index: 2;
}

.nav-info {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: rgba(105, 105, 105, 0.2);
  color: black;
  font-weight: bold;
  font-size: 4vw;
  letter-spacing: 0.2rem;
}

.sleeptime {
  flex: 1;
  font-weight: normal;
}

.estimatetime {
  flex: 1;
}

.job {
  flex: 1;
}

.trailer-attached {
  visibility: hidden;
}

.trailer-attached.yes {
  visibility: visible;
}

.job-destinationCity {
  font-size: 2vw;
}

dashboard.html

<div class="dashboard game-connected">
    <div class="rows">
        <div class="steer">
            <div class="game-steer-position" id="game-steer-position">⬆</div>
            <div class="user-steer-position" id="user-steer-position">🎮</div>
        </div>
        <div class="pedal">
            <div class="throttle-background">
                <div class="throttle-foreground" id="inverse-throttle"></div>
                <div class="speed">
                    <span class="truck-cruiseControlOn">▶</span>
                    <span class="truck-speedRounded"></span>kmh
                     <span style="color:red;">⚠</span><span class="navigation-speedLimit"></span>kmh
                </div>
            </div>
            <div class="brake-background">
                <div class="brake-foreground" id="inverse-brake"></div>
                <div class="fuel">
                    ⛽
                    <span class="truck-fuel"></span>L
                    (<span class="truck-fuelAverageConsumption"></span>L/km)
                </div>
            </div>
        </div>
        <div class="nav-info">
            <div class="sleeptime">🛏<span class="game-nextRestStopTimeString"></span></div>
            <div class="estimatetime">⏲<span class="navigation-estimatedTimeString"></span></div>
            <div class="job">
                <div class="trailer-attached">
                    🚛→<span class="job-destinationCity"></span>
                </div>
            </div>
        </div>
    </div>
</div>

dashboard.js

Funbit.Ets.Telemetry.Dashboard.prototype.initialize = function (skinConfig, utils) {
    //
    // skinConfig - a copy of the skin configuration from config.json
    // utils - an object containing several utility functions (see skin tutorial for more information)
    //

    // this function is called before everything else, 
    // so you may perform any DOM or resource initializations / image preloading here

    utils.preloadImages([
        'images/bg-off.jpg', 'images/bg-on.jpg'
    ]);

}

Funbit.Ets.Telemetry.Dashboard.prototype.filter = function (data, utils) {
    //
    // data - telemetry data JSON object
    // utils - an object containing several utility functions (see skin tutorial for more information)
    //

    // This filter is used to change telemetry data 
    // before it is displayed on the dashboard.
    // You may convert km/h to mph, kilograms to tons, etc.

    // round truck speed
    data.truck.speedRounded = Math.abs(data.truck.speed > 0
        ? Math.floor(data.truck.speed)
        : Math.round(data.truck.speed));
    
    // round fuel
    data.truck.fuel = utils.formatFloat(data.truck.fuel, 2);
    data.truck.fuelAverageConsumption = utils.formatFloat(data.truck.fuelAverageConsumption, 2);
    
    // rest time
    let nextRestStopTimeDate = new Date(data.game.nextRestStopTime);
    let restHours = nextRestStopTimeDate.getUTCHours();
    let restMinutes = nextRestStopTimeDate.getUTCMinutes();
    data.game.nextRestStopTimeString = `${restHours}h${restMinutes}m`;

    // EST
    let estTimeDate = new Date(data.navigation.estimatedTime);
    let estHours = estTimeDate.getUTCHours();
    let estMinutes = estTimeDate.getUTCMinutes();
    data.navigation.estimatedTimeString = `${estHours}h${estMinutes}m`;

    // other examples:

    // convert kilometers per hour to miles per hour
    data.truck.speedMph = data.truck.speed * 0.621371;
    // convert kg to t
    data.trailer.mass = (data.trailer.mass / 1000.0) + 't';
    // format odometer data as: 00000.0
    data.truck.odometer = utils.formatFloat(data.truck.odometer, 1);
    // convert gear to readable format
    data.truck.gear = data.truck.gear > 0 ? 'D' + data.truck.gear : (data.truck.gear < 0 ? 'R' : 'N');
    // convert rpm to rpm * 100
    data.truck.engineRpm = data.truck.engineRpm / 100;
    // return changed data to the core for rendering
    return data;
};

Funbit.Ets.Telemetry.Dashboard.prototype.render = function (data, utils) {
    //
    // data - same data object as in the filter function
    // utils - an object containing several utility functions (see skin tutorial for more information)
    //

    // we don't have anything custom to render in this skin,
    // but you may use jQuery here to update DOM or CSS

    let steerPositionPercentage = (data.truck.gameSteer + 1.0) * 50.0;
    let steerUserPositionPercentage = (data.truck.userSteer + 1.0) * 50.0;
    let gameThrottleInversePercentage = 100.0 - data.truck.gameThrottle * 100.0;
    let gameBrakeInversePercentage = 100.0 - data.truck.gameBrake * 100.0;

    document.getElementById("game-steer-position").style.right = `${steerPositionPercentage}%`;
    document.getElementById("user-steer-position").style.right = `${steerUserPositionPercentage}%`;
    document.getElementById("inverse-throttle").style.width = `${gameThrottleInversePercentage}%`;
    document.getElementById("inverse-brake").style.width = `${gameBrakeInversePercentage}%`;
}