ETS2/ATS Telemetry Web Server + Mobile Dashboard

[Rybak04]

Wish I could get a copy of this skin....Love it.

I will try to remember to upload it somewhere over the weekend!

I understand that this will send dashboard info over the net to your mobile phone, has the developer tried doing this with the minimap, has the developer tried this with a laptop.

You can do it on any browser as well, whether on a laptop or even on the same computer in a different display.

Someone created a "Mobile Route Advisor", I think the link is somewhere in this thread. Be aware, the minimap only works on ETS2. Something about the map projection in ATS is weird, and the developer hasn't figured out how to make it work.

Were you able to upload it?

[sketch]

Sorry for the delay, my modification of the Kenworth T680 skin is available here: https://www.dropbox.com/sh/j7cnend0gg5o ... _i1Xa?dl=0

For reference, screenshot is included again below. I added another page to the trip info, which is still changed using the Beacon key (default O). The new page includes ETA, distance to destination, bed time, and job income. I also added job info to the bottom edge of the screen -- job source and destination (city and company), time until deadline, and weight + contents.

[ external image ]

I have done similar modifications to the Peterbilt 579 (ATS, mph) and Mercedes Atego (ETS2, km/h) if anyone is interested.

Currently I'm working on a modification of m4rc10w's Scania skin, but I'm having some trouble making it work properly (mostly CSS problems, I don't really know what I'm doing, lol). With the Scania, instead of trying to alter the main display (I like the graphs that are there already!), I am just adding job info tables below the dashboard in the blank space. I can't get the .hasJob.yes stuff in the .css to work properly (code taken from the generic skin; .js includes "data.hasJob = data.trailer.attached", etc.), and further, everything goes to hell when the electricity is off Oh well, I'll keep trying. I'm still using the New Actros in game so I will probably wait until I actually buy a Scania before developing it further.

[m4rc10w]

@sketch what kind of problems you are having to change the Scania panel? if you want to list then maybe I can help you, if you want and I can, of course.
My new VGA arrived (GTX1070) can now turn to travel the virtual roads again (and 'manufacture' new panels for trucks as well ).

[Rybak04]

Currently I'm working on a modification of m4rc10w's Scania skin, but I'm having some trouble making it work properly (mostly CSS problems, I don't really know what I'm doing, lol). With the Scania, instead of trying to alter the main display (I like the graphs that are there already!), I am just adding job info tables below the dashboard in the blank space. I can't get the .hasJob.yes stuff in the .css to work properly (code taken from the generic skin; .js includes "data.hasJob = data.trailer.attached", etc.), and further, everything goes to hell when the electricity is off Oh well, I'll keep trying. I'm still using the New Actros in game so I will probably wait until I actually buy a Scania before developing it further.

Would love a 579 as well!!

[sketch]

@sketch what kind of problems you are having to change the Scania panel? if you want to list then maybe I can help you, if you want and I can, of course.

I would be grateful for your help

So, I am just pretending that I know CSS

I have two big problems: position, and trailer detection.

First, position. I did my additions while the truck ignition ("electric") was ON, and I noticed that all the top and left measurements were measured from the top left corner of the center graphic, not the top left corner of the background as usual. So I set all my positions relative to that, and it works okay when the electric is on. But when the electric is OFF, the positions move, and it is now measured relative to the top left corner of the background like normal. I am not sure what in the code causes this. I thought that using position: absolute might help, but it doesn't seem to do anything.

Second, trailer detection. In the JS I put data.hasJob = data.trailer.attached; which I think I took from the generic skin. Coupled with things in the CSS like,

Code: Select all

._jobRemaining,
._jobSource,
._jobDestination,
._trailerInfo {
  visibility: hidden;
}

.hasJob.yes ._jobRemaining,
.hasJob.yes ._jobSource,
.hasJob.yes ._jobDestination,
.hasJob.yes ._trailerInfo {
  visibility: visible;
}

It works in the generic, but not in here. Actually, this is not unique to the Scania skin, I noticed that I also commented out the visibility: hidden part in my Mercedes Atego skin. Maybe there is something in the generic that I did not notice... It would be nice to hide the "from ()", "to ()", "remaining", "€0", "0 tonnes", etc., when there is no trailer.

I put the screenshots in an album so you can see what I mean: http://imgur.com/a/6AKpH

[dave_th]

Has anyone been able to get an audible warning sound to work with this? Would like to set up a 'Your speeding' signal functional.

[m4rc10w]

@sketch Can you put all code here for me to analyze? I think know what the problem, but to make sure need to see how your code is now (place all content of js, html and css files in separate 'code' tags how I do, or embed into zip file, upload somewhere and place link here)

[sketch]

Yep, thanks for the help!

CSS

Code: Select all

@keyframes blinker {  
  50% { z-index: -1; }
}

body {
  cursor: pointer;}

.isNight {
  background-image: url("images/bg-on.jpg");
  position: fixed;
  left: 0px;
  top: 0px;
  width: 2030px;
  height: 1035px;
  z-index: 1;}

.isNight.yes {
  background-image: url("images/bg-on-dark.jpg");
  position: fixed;
  left: 0px;
  top: 0px;
  width: 2030px;
  height: 1035px;
  z-index: 1;

}

.isNight.yes .dashLights.yes {
  background-image: url("images/parklights-on.jpg");
  position: fixed;
  left: 0px;
  top: 0px;
  width: 2030px;
  height: 1035px;
  z-index: 1;
}

.navigation-speedLimit {
  color: white;
  font-family: -apple-system, Arial;
  font-weight: normal;
  font-size: 35px;
  position: fixed;
  left: 1100px;
  top: 240px;
  width: 120px;
  height: 48px;
  text-align: center;
  z-index: 5;
}

.speeding.yes .navigation-speedLimit {
animation: blinker 1s linear infinite;
color: red;
}

.navigation-speedLimit:before {
	display: inline;
	content: url("images/limit.png");
	margin-right: 5px;
	filter: grayscale(100%) brightness(500%);
}

.speeding.yes .navigation-speedLimit:before {
animation: blinker 1s linear infinite;
filter: none;
animation: blinker 1s linear infinite;
}

.navigation-speedLimit[data-value=''] {
display: none;
}

.navigation-speedLimit:after {
display: block;
content: " km/h";
color: white;
font-family: -apple-system, Arial;
font-weight: normal;
font-size: 20px;
text-align: center;
}

.speeding.yes .navigation-speedLimit:after {
animation: blinker 1s linear infinite;
color: red;
animation: blinker 1s linear infinite;
}

.truck-cruiseControlSpeed {
  color: white;
  font-family: -apple-system, Arial;
  font-weight: normal;
  font-size: 35px;
  position: fixed;
  left: 794px;
  top: 240px;
  width: 120px;
  height: 48px;
  text-align: center;
  z-index: 5;
}

.truck-cruiseControlSpeed:before {
	display: inline;
	content: url("images/cruise.png");
	margin-right: 5px;
}

.truck-cruiseControlSpeed:after {
display: block;
content: " km/h";
color: white;
font-family: -apple-system, Arial;
font-weight: normal;
font-size: 20px;
text-align: center;
}

.truck-cruiseControlSpeed[data-value=''] {
	display: none;
}

.truck-speedRounded {
  color: white;
  font-family: -apple-system, Arial;
  font-weight: normal;
  font-size: 50px;
  position: fixed;
  left: 947px;
  top: 230px;
  width: 87px;
  height: 73px;
  text-align: center;
  z-index: 5;
}

.truck-speedRounded[data-value=''] {
	display: none;
}

.truck-speedRounded:after {
	display: block;
content: " km/h";
color: white;
font-family: -apple-system, Arial;
font-weight: normal;
font-size: 20px;
text-align: center;
}

.truck-speed[data-type="meter"] {
  z-index: 5; 
  position: fixed;
  left: 1580px;
  top: 180px;
  width: 79px;
  height: 299px;
  background-image: url("images/gauge-arrow.png");
  -webkit-transform: rotate(-114deg);
  -moz-transform: rotate(-114deg);
  -ms-transform: rotate(-114deg);
  -o-transform: rotate(-114deg);
  transform: rotate(-114deg);
  -webkit-transform-origin: 50% 247px;
  -moz-transform-origin: 50% 247px;
  -ms-transform-origin: 50% 247px;
  -o-transform-origin: 50% 247px;
  transform-origin: 50% 247px;
  -webkit-filter: brightness(100%);

}

.isNight.yes .dashLights .truck-speed[data-type="meter"] {
-webkit-filter: brightness(20%);
}

.isNight.yes .dashLights.yes .truck-speed[data-type="meter"] {
-webkit-filter: brightness(150%);
}

.truck-engineRpm {
  z-index: 5;
  position: fixed;
  left: 360px;
  top: 180px;
  width: 79px;
  height: 299px;
  background-image: url("images/gauge-arrow.png");
  -webkit-transform: rotate(-97deg);
  -moz-transform: rotate(-97deg);
  -ms-transform: rotate(-97deg);
  -o-transform: rotate(-97deg);
  transform: rotate(-97deg);
  -webkit-transform-origin: 50% 247px;
  -moz-transform-origin: 50% 247px;
  -ms-transform-origin: 50% 247px;
  -o-transform-origin: 50% 247px;
  transform-origin: 50% 247px;
}

.isNight.yes .dashLights .truck-engineRpm {
-webkit-filter: brightness(20%);
}

.isNight.yes .dashLights.yes .truck-engineRpm {
-webkit-filter: brightness(150%);
}

.truck-fuel1 {
  z-index: 5;
  position: fixed;
  left: 1501px;
  top: 790px;
  width: 62px;
  height: 171px;
  background-image: url("images/gauge-arrow-s.png");
  -webkit-transform: rotate(-96deg);
  -moz-transform: rotate(-96deg);
  -ms-transform: rotate(-96deg);
  -o-transform: rotate(-96deg);
  transform: rotate(-96deg);
  -webkit-transform-origin: 50% 141px;
  -moz-transform-origin: 50% 141px;
  -ms-transform-origin: 50% 141px;
  -o-transform-origin: 50% 141px;
  transform-origin: 50% 141px;
  -webkit-transition-duration: 0.7s;
}
.isNight.yes .dashLights .truck-fuel1 {
-webkit-filter: brightness(20%);
}

.isNight.yes .dashLights.yes .truck-fuel1 {
-webkit-filter: brightness(150%);
}

.truck-waterTemperature {
  z-index: 5;
  position: fixed;
  left: 457px;
  top: 790px;
  width: 62px;
  height: 171px;
  background-image: url("images/gauge-arrow-s.png");
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: 50% 141px;
  -moz-transform-origin: 50% 141px;
  -ms-transform-origin: 50% 141px;
  -o-transform-origin: 50% 141px;
  transform-origin: 50% 141px;
  -webkit-transition-duration: 0.7s;
}

.isNight.yes .dashLights .truck-waterTemperature {
-webkit-filter: brightness(20%);
}

.isNight.yes .dashLights.yes .truck-waterTemperature {
-webkit-filter: brightness(150%);
}

.truck-oilPressure {
  z-index: 5;
  position: fixed;
  left: 1580px;
  top: 535px;
  width: 69px;
  height: 170px;
  background-image: url("images/gauge-arrow-s2.png");
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: 50% 133px;
  -moz-transform-origin: 50% 133px;
  -ms-transform-origin: 50% 133px;
  -o-transform-origin: 50% 133px;
  transform-origin: 50% 133px;
  -webkit-transition-duration: 0.7s;
}

.isNight.yes .dashLights .truck-oilPressure {
-webkit-filter: brightness(20%);
}

.isNight.yes .dashLights.yes .truck-oilPressure {
-webkit-filter: brightness(150%);
}

.truck-electricOn.yes ._fuelConsBar {
background-image: url("images/sidebar02.png");
position: fixed;
left: 886px;
top: 612px;
height: 50px;
z-index: 5;
}

.truck-electricOn.yes ._fuelConsBar2 {
background-image: url("images/sidebar01.png");
position: fixed;
left: 886px;
top: 628px;
height: 34px;
width: 258px;
z-index: 4;
filter: grayscale(100%);
opacity: 0.3;
}

.truck-digfuelConsumption {
color: white;
  font-family: -apple-system, Arial;
  font-weight: bold;
  font-size: 30px;
  position: fixed;
  left: 1150px;
  top: 615px;
  width: 78px;
  height: 50px;
  text-align: left;
  text-indent: 0%;
  z-index: 3;
}

.truck-fuelAverageConsumption[data-type="meter"] {
  z-index: 5;
  position: fixed;
  left: 365px;
  top: 535px;
  width: 69px;
  height: 170px;
  background-image: url("images/gauge-arrow-s2.png");
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: 50% 133px;
  -moz-transform-origin: 50% 133px;
  -ms-transform-origin: 50% 133px;
  -o-transform-origin: 50% 133px;
  transform-origin: 50% 133px;
  -webkit-transition-duration: 0.7s;
}

.isNight.yes .dashLights .truck-fuelAverageConsumption {
-webkit-filter: brightness(20%);
}

.isNight.yes .dashLights.yes .truck-fuelAverageConsumption {
-webkit-filter: brightness(150%);
}

.truck-electricOn.yes {
background-image: url("images/infodash.png");
position: fixed;
left: 785px;
top: 146px;
width: 449px;
height: 792px;
text-indent: -9999px;
z-index: 1;
}

.truck-shifterType {
  text: "AC";
  color: white;
  font-family: -apple-system, Courier New, Courier, monospace;
  font-weight: regular;
  font-size: 50px;
  position: fixed;
  left: 811px;
  top: 161px;
  width: 62px;
  height: 75px;
  text-align: center;
  text-indent: 0%;
  z-index: 3;
}



.truck-gear {
  color: black;
  font-family: Courier New, Courier, monospace;
  font-weight: bold;
  font-size: 50px;
  position: fixed;
  left: 960px;
  top: 161px;
  width: 62px;
  height: 75px;
  text-align: center;
  text-indent: 0%;
  z-index: 3;
}

.truck-gear[data-value="N"] {
  color: green;
}

.truck-gear[data-value="R"] {
  color: red;
}
.truck-odometer {
  color: white;
  font-family: -apple-system, Helvetica, Arial;
  font-weight: normal;
  font-size: 37px;
  position: fixed;
  left: 793px;
  top: 896px;
  width: 185px;
  height: 40px;
  text-align: left;
  text-indent: 0%;
  z-index: 3;
}

.truck-blinkerLeftOn {
  background-image: url("images/blinker-left-on.png");
  position: fixed;
  left: 580px;
  top: 133px;
  width: 140px;
  height: 83px;
  opacity: 0.04;
}

.truck-blinkerLeftOn.yes {
  opacity: 1.0;
}

.truck-blinkerRightOn {
  background-image: url("images/blinker-right-on.png");
  position: fixed;
  left: 1297px;
  top: 133px;
  width: 140px;
  height: 83px;
  opacity: 0.04;
}

.truck-blinkerRightOn.yes {
  opacity: 1.0;
}

.truck-lightsBeamHighOn {
  background-image: url("images/highbeam-on.png");
  position: fixed;
  left: 177px;
  top: 748px;
  width: 75px;
  height: 53px;
  opacity: 0.04;
}
.truck-lightsBeamHighOn.yes {
  opacity: 1;

}

.truck-lightsBeamLowOn {
  background-image: url("images/lowbeam-on.png");
  position: fixed;
  left: 267px;
  top: 742px;
  width: 75px;
  height: 73px;
  opacity: 0.03;

}

.truck-electricOn.yes .truck-lightsBeamLowOn.yes {
opacity: 1;

}

.truck-electricOn.yes .game-time2 {
  color: white;
  font-family: -apple-system, Arial, Tahoma;
  font-size: 50px;
  font-weight: bold;
  position: fixed;
  left: 1087px;
  top: 158px;
  width: 134px;
  height: 61px;
  text-align: center;
  text-indent: 0%;
  z-index: 3;
}

.truck-parkBrakeOn {
  z-index: 4;
  background-image: url("images/handbrake.png");
  position: fixed;
  left: 1315px;
  top: 753px;
  width: 75px;
  height: 55px;
  opacity: 0.1;
}

.truck-electricOn.yes .truck-parkBrakeOn.yes {
  opacity: 1;
}

.truck-airSym {
  z-index: 4;
  background-image: url("images/airwarning.png");
  position: fixed;
  left: 631px;
  top: 751px;
  width: 75px;
  height: 56px;
  opacity: 0.1;
}

.truck-electricOn.yes .truck-airSym.yes {
  opacity: 1;
}

.truck-motorBrakeOn {
  z-index: 4;
  background-image: url("images/mbrake.png");
  position: fixed;
  left: 1315px;
  top: 830px;
  width: 74px;
  height: 47px;
  opacity: 0.04;
}

.truck-electricOn.yes .truck-motorBrakeOn.yes {
  opacity: 1;
}

.retarderSym {
  z-index: 4;
  background-image: url("images/retarder.png");
  position: fixed;
  left: 285px;
  top: 340px;
  width: 75px;
  height: 55px;
  opacity: 0.1;
}

.truck-electricOn.yes .retarderSym.yes {
  opacity: 1;
}

.truck-airPressureEmergencyOn {
  background-image: none;
  position: fixed;
  left: 613px;
  top: 676px;
  width: 74px;
  height: 57px;
}
.truck-electricOn.yes .truck-airPressureEmergencyOn.yes {
  background-image: url("images/warning.png");
}
.truck-airPressureEmergencyOn {
  background-image: url("images/warning-off.png");
  position: fixed;
  left: 631px;
  top: 678px;
  width: 75px;
  height: 55px;
}
.truck-fuelWarningOn.yes {
  background-image: url("images/fuel-warning.png");
}
.truck-fuelWarningOn {
  background-image: none;
  position: fixed;
  left: 1409px;
  top: 888px;
  width: 41px;
  height: 46px;
}



/* rest time warning */

.restWarning[data-value='off'] {
background-image: url("images/RestWarning.png");
position: fixed;
left: 278px;
top: 827px;
width: 56px;
height: 42px;
color: rgba(0, 0, 0, 0);
visibility: hidden;
}

.truck-electricOn.yes .restWarning[data-value="blue"] {
background-image: url("images/RestWarning.png");
position: fixed;
left: 278px;
top: 827px;
width: 56px;
height: 42px;
color: rgba(0, 0, 0, 0);
visibility: visible;
-webkit-filter: hue-rotate(230deg);
}

.truck-electricOn.yes .restWarning[data-value='red'] {
background-image: url("images/RestWarning.png");
position: fixed;
left: 278px;
top: 827px;
width: 56px;
height: 42px;
color: rgba(0, 0, 0, 0);
visibility: visible;
-webkit-filter: hue-rotate(0deg);
}


.truck-electricOn.yes .restWarning[data-value='blinking'] {
background-image: url("images/RestWarning.png");
position: fixed;
left: 278px;
top: 827px;
width: 56px;
height: 42px;
color: rgba(0, 0, 0, 0);
visibility: visible;
-webkit-filter: hue-rotate(0deg);
animation: blinker 1.5s linear infinite;
}

.truck-electricOn.yes ._wearBar {
	background-image: url("images/sidebar02.png");
	position: fixed;
	left: 886px;
	top: 766px;
	height: 50px;
	z-index: 5;
}

.truck-electricOn .truck-healthNum {
display: none;
}

.truck-electricOn.yes .truck-healthNum {
  display: inline;
  font-family: -apple-system, Arial;
  font-weight: bold;
  font-size: 30px;
  position: fixed;
  left: 1155px;
  top: 782px;
  width: 61px;
  height: 37px;
  text-align: left;
  text-indent: 0%;
}

.truck-electricOn.yes .truck-healthStatus[data-value='OK'] {
	background-image: url("images/sidebar01.png");
	filter: hue-rotate(90deg) brightness(200%);
	position: fixed;
	left: 886px;
	top: 782px;
	height: 34px;
	width: 258px;
	z-index: 4;
}

.truck-electricOn.yes .truck-healthStatus[data-value='attention'] {
background-image: url("images/sidebar01.png");
	filter: hue-rotate(60deg) brightness(800%) contrast(200%);
	position: fixed;
	left: 886px;
	top: 782px;
	height: 34px;
	width: 258px;
	z-index: 4;
}


.truck-electricOn.yes .truck-healthStatus[data-value='bad'] {
background-image: url("images/sidebar01.png");
	filter: none;
	position: fixed;
	left: 886px;
	top: 782px;
	height: 34px;
	width: 258px;
	z-index: 4;
}



.truck-electricOn.yes ._airPressureBar {
	background-image: url("images/sidebar02.png");
	position: fixed;
	left: 886px;
	top: 368px;
	height: 50px;
	z-index: 5;
}

.truck-electricOn.yes .truck-airPressureWarningOn {
	background-image: url("images/sidebar01.png");
	position: fixed;
	left: 886px;
	top: 384px;
	height: 34px;
	width: 258px;
	filter: hue-rotate(90deg) brightness(200%);
	z-index: 3;
}

.truck-electricOn.yes .truck-airPressureWarningOn.yes {
	filter: none;
}

.truck-electricOn .truck-airGauge {
	display: none;
}

.truck-electricOn.yes .truck-airGauge {
  display: inline;
  font-family: -apple-system, Arial;
  font-weight: bold;
  font-size: 30px;
  position: fixed;
  left: 1155px;
  top: 384px;
  width: 61px;
  height: 37px;
  text-align: left;
  text-indent: 0%;
}

.truck-electricOn.yes ._fuelPercentBar {
	background-image: url("images/sidebar02.png");
	position: fixed;
	left: 886px;
	top: 478px;
	height: 50px;
	z-index: 5;
}

.truck-electricOn.yes .truck-fuelWarningOn {
	background-image: url("images/sidebar01.png");
	position: fixed;
	left: 886px;
	top: 494px;
	height: 34px;
	width: 258px;
	filter: hue-rotate(90deg) brightness(200%);
	z-index: 3;
}

.truck-electricOn.yes .truck-fuelWarningOn.yes {
	filter: none;
}

.truck-electricOn .truck-fuelPercentNum {
	display: none;
}

.truck-electricOn.yes .truck-fuelPercentNum {
  display: inline;
  font-family: -apple-system, Arial;
  font-weight: bold;
  font-size: 30px;
  position: fixed;
  left: 1150px;
  top: 494px;
  width: 74px;
  height: 37px;
  text-align: left;
  text-indent: 0%;
  z-index: 5;
} 

.game-time,
.game-nextRestStopTime {
  color: #C2D8ED;
}
.job-remainingTime,
._jobETA {
  color: #54d9a8;
}
.truck-gear,
.truck-cruiseControlOn,
.truck-odometer,
.truck-speedRounded,
.truck-cruiseControlSpeedRounded[data-value="0"],
.navigation-speedLimitRounded[data-value="0"],
.truck-retarderBrake[data-value="0"],
.trailer-mass,
.trailer-name,
._truckWearInfo,
._trailerWearInfo,
.job-remainingTime,
._jobIncome,
._jobSource,
._jobDestination,
.game-nextRestStopTime {
  visibility: hidden;
}
.dashboard.game-connected.yes .truck-gear,
.dashboard.game-connected.yes .truck-cruiseControlOn,
.dashboard.game-connected.yes ._truckWearInfo,
.dashboard.game-connected.yes ._trailerWearInfo,
.dashboard.game-connected.yes .truck-odometer,
.dashboard.game-connected.yes .truck-speedRounded,
.dashboard.game-connected.yes .truck-cruiseControlSpeedRounded:not([data-value="0"]),
.dashboard.game-connected.yes .navigation-speedLimitRounded:not([data-value="0"]),
.dashboard.game-connected.yes .truck-retarderBrake:not([data-value="0"]),
.dashboard.game-connected.yes .game-nextRestStopTime {
  visibility: visible;
}
.hasJob.yes .trailer-mass,
.hasJob.yes .trailer-name,
.hasJob.yes .job-remainingTime,
.hasJob.yes ._jobIncome,
.hasJob.yes ._jobSource,
.trailer-attached.yes ._jobDestination,
.trailer-attached.yes ._jobETA {
  visibility: visible;
}
table._job {
  border-collapse: collapse;
  font-family: -apple-system, Helvetica, Arial, sans-serif;
  font-size: 30px;
  position: absolute;
  left: 0px;
  top: 900px;
  width: 440px;
  height: 100px;
  overflow: hidden;
}
table._job th {
  color: #aaaaaa;
  width: 260px;
  text-align: left;
  text-indent: 0px;
}
table._job td {
  padding-left: 6px;
  text-align: right;
  width: 400px;
}
._jobSource,
._jobDestination,
._jobRemaining {
  color: #efbd3a;
  font-family: -apple-system, Avenir, Futura, Helvetica, Arial, sans-serif;
  font-size: 30px;
  position: absolute;
  left: -700px;
  top: 920px;
  width: 600px;
  height: 50px;
  text-align: left;
  text-indent: 0px;
  visibility: visible;
}
._jobDestination {
  top: 975px;
}
._jobRemaining {
	top: 1030px;
}
._trailerWearInfo {
  color: #aaaaaa;
  visibility: visible;
}
.trailer-wear {
  color: #dd7777;
  visibility: visible;
}
._jobIncome {
  color: #5dd954;
  visibility: visible;
}

.trailer-mass,
.trailer-name {
  color: #6eaa55;
  font-family: -apple-system, Menlo, Courier New, Courier, monospace;
  font-weight: bold;
  font-size: 30px;
  position: absolute;
  left: 650px;
  top: 950px;
  width: 500px;
  height: 50px;
  text-align: right;
  visibility: visible;
  text-indent: 0px;
}
.trailer-name {
  color: #cfcfcf;
  font-family: -apple-system, Helvetica, Arial, sans-serif;
  top: 1010px;
  overflow: hidden;
}

HTML

Code: Select all

<div class="dashboard game-connected">
	<div class="isNight">
		<div class="dashLights">	
			<div class="truck-speed" data-type="meter" data-min="12" data-max=	"129.301" data-min-angle="-122" data-max-angle="+123"></div>
			<div class="truck-speedRounded"></div>
			<div class="truck-engineRpm" data-type="meter" data-min="4" data-max="24" data-min-angle="-122" data-max-angle="+104"></div>
			<div class="truck-fuel1" data-type="meter" data-min="0" data-max="truck.fuelCapacity" data-min-angle="-55" data-max-angle="+53"></div>
			<div class="truck-waterTemperature" data-type="meter" data-min="40" data-max="100" data-min-angle="-55" data-max-angle="+40"></div>
			<div class="truck-oilPressure" data-type="meter" data-min="0" data-max="95" data-min-angle="-60" data-max-angle="+68"></div>
			<div class="truck-fuelAverageConsumption" data-type="meter" data-min="0"data-max="120" data-min-angle="-57" data-max-angle="+56"></div>
			<div class="truck-odometer"></div>
			<div class="truck-gear"></div>
			<div class="truck-shifterType"></div>
			<div class="truck-cruiseControlSpeed"></div>
			<div class="truck-digfuelConsumption"></div>
			<div class="speeding">
					<div class="navigation-speedLimit"></div>
				</div>
			<!-- indicators -->
			<div class="truck-electricOn">
				<div class="truck-blinkerLeftOn"></div>
				<div class="truck-blinkerRightOn"></div>
				<div class="truck-lightsBeamHighOn"></div>
				<div class="truck-lightsBeamLowOn"></div>
				<div class="_airPressureBar"></div>
				<div class="truck-airGauge"></div>
				<div class="truck-airPressureWarningOn"></div>
				<div class="truck-airSym"></div>
				<div class="_fuelPercentBar"></div>
				<div class="_fuelConsBar"></div>
				<div class="_fuelConsBar2"></div>
				<div class="truck-fuelWarningOn"></div>
				<div class="truck-fuelPercentNum"></div>
				<div class="truck-parkBrakeOn"></div>
				<div class="truck-retarderBrake"></div>
				<div class="truck-motorBrakeOn"></div>
				<div class="game-time2"></div>
				<div class="_wearBar"></div>
				<div class="truck-healthStatus"></div>
				<div class="truck-healthNum"></div>
				<div class="restWarning"></div>
				<div class="truck-airPressureEmergencyOn"></div>
				<div class="truck-fuelWarningOn"></div>
				<div class="retarderSym"></div>
				
			<!-- new stuff below this line -->
        <div class="trailer-attached"></div>
        <div class="trailer-mass"><span class="ton"> tonnes</span></div>
        <div class="trailer-name"></div>
        <div class="hasJob _jobSource">from <span class="job-sourceCity"></span> (<span class="job-sourceCompany"></span>)</div>
        <div class="hasJob _jobDestination">to <span class="job-destinationCity"></span> (<span class="job-destinationCompany"></span>)</div>
		<div class="hasJob _jobRemaining"><span class="job-remainingTime"></span> remaining</div>
        <!-- job information -->
        <table class="_job">
            <!-- <tr>
                <th>$$$:</th>
                <td><span class="job-remainingTime"></span> <span class="_jobIncome"></td>
            </tr> -->
			<tr>
				<th>ETA</th>
				<td><span class="_jobETA"><span class="navigation-estimatedTime"></span></td>
			</tr>
			<tr>
				<th>Distance</th>
				<td><span class="_jobETA"><span class="navigation-estimatedDistanceKmRounded"></span> km</span></td>
			</tr>
			<tr>
				<th>Bed time</th>
				<td><span class="game-nextRestStopTime"></span></td>
			</tr>
			<tr>
				<th>Pay</th>
				<td><span class="_jobIncome">€<span class="job-income"></span></span></td>
			</tr>
			<tr>
				<th>Trailer</th>
				<td><span class="_trailerWearInfo"><span class="trailer-wear">%</span></td>
			</tr>
        </table>   
		
			</div>
		</div>
	</div>
</div>

JS

Code: Select all

// SEE Dashboard Skin Tutorial FOR MORE INFORMATION ABOUT THIS FILE

Funbit.Ets.Telemetry.Dashboard.prototype.filter = function (data, utils) {
	var electric = data.truck.electricOn;
	var engine = data.truck.engineOn;
    data.dashLights = data.truck.lightsParkingOn;
   // motor brake
   data.truck.motorBrakeOn = (engine == true && (data.truck.gameThrottle < 0.1)) ? ((data.truck.gameClutch < 0.9 && data.truck.gear != 0) ? data.truck.motorBrakeOn : false) : false;
   // speed gauge (only test)
   data.truck.speed = engine == true ? data.truck.speed : 0;
   // retarder
   data.retarderSym = data.truck.retarderBrake > 0 ? true : false;
    // convert fuel average consumption to * 100
    data.truck.fuelAverageConsumption = engine ? (data.truck.fuelAverageConsumption * 100) : 0;
    data.truck.digfuelConsumption = electric ? utils.formatFloat(data.truck.fuelAverageConsumption, 1) : '';
    // round truck speed
    var SpeedRounded = Math.abs(data.truck.speed > 0
        ? Math.floor(data.truck.speed)
        : Math.round(data.truck.speed));
	data.truck.speedRounded = electric ? SpeedRounded : '';
	// cruise control
	var cruise = Math.floor(data.truck.cruiseControlSpeed);
	data.truck.cruiseControlSpeed = (electric && cruise > 0) ? cruise : '';
	
	// truck wear
    var wearSumPercent = Math.max(data.truck.wearEngine,
                    data.truck.wearTransmission,
                    data.truck.wearCabin,
                    data.truck.wearChassis,
                    data.truck.wearWheels) * 100;
    data.truck.wearSum = Math.floor(wearSumPercent);
    var wearSub = 100 - Math.floor(wearSumPercent);
	var wearSubStr = String(wearSub);
	data.truck.Health = wearSub;
	data.truck.healthNum = wearSub >= 75 ? wearSubStr.fontcolor('#00FF00') : (wearSub < 75 && wearSub >= 50) ? wearSubStr.fontcolor('yellow') : wearSubStr.fontcolor('red');
	data.truck.healthStatus = wearSub >= 75 ? 'OK' : (wearSub < 75 && wearSub >= 50) ? 'attention' : 'bad';
	
	// digital fuel gauge
	data.truck.fuelPercent = utils.formatFloat((utils.formatFloat(data.truck.fuel, 1)/utils.formatFloat(data.truck.fuelCapacity, 1))*100, 1);
	var percentfuel = data.truck.fuelPercent;
	data.truck.fuelPercentNum = (data.truck.fuelWarningOn) ? percentfuel.fontcolor('red') : percentfuel.fontcolor('#00FF00');
	
	// numeric air pressure gauge
	var airgauge1 = utils.formatFloat((data.truck.airPressure/14), 1);
	data.truck.airSym = data.truck.airPressureWarningOn;
	data.truck.airGauge = (data.truck.airPressureWarningOn) ? airgauge1.fontcolor('#FF0000') : airgauge1.fontcolor('#00FF00');
    // convert kg to t
    data.trailer.mass = electric == true? Math.round((data.trailer.mass / 1000.0)) + ' tonnes' : "";
    // format odometer data as: 00000.0
    data.truck.odometer = electric ? (Math.floor(data.truck.odometer)) : '';
    // convert gear to readable format
 var FwGears = ["N", "1L", "1H", "2L", "2H", "3L", "3H", "4L", "4H", "5L", "5H", "6L", "6H", "7L", "7H", "8L", "8H"];
 data.truck.gear = data.truck.displayedGear;
 data.truck.gear = electric == true ? 
	((data.truck.gear >= 0) ? FwGears[data.truck.gear] : 'R' ): "";
	var shiftertype = data.truck.shifterType;
 data.truck.shifterType = electric ? (shiftertype == 'arcade' ? 'AC' : shiftertype == 'automatic' ? 'AT' : shiftertype == 'manual' ? 'SQ' : shiftertype == 'hshifter' ? 'HS' : '') : '';
    // convert rpm to rpm * 100
    data.truck.engineRpm = engine == true ? (data.truck.engineRpm / 100) : 0;
    // change speed limit color when above truck speed
    data.navigation.speedLimit = (electric == true && data.navigation.speedLimit > 0) ? data.navigation.speedLimit : "";
    data.speeding = electric == true ? (((data.navigation.speedLimit > 0) && (data.navigation.speedLimit < data.truck.speedRounded)) ? true : false) : false;
    // enable this gauges and indicators when electric or engine (according with case) is on
    data.truck.fuel1 = electric == true ? data.truck.fuel : 0;
    data.truck.waterTemperature = engine == true ? data.truck.waterTemperature : 0;
    data.truck.oilPressure = engine == true ? data.truck.oilPressure : 0;
    data.truck.lightsBeamHighOn = (electric == true && data.truck.lightsBeamLowOn == true) ? data.truck.lightsBeamHighOn : false;
    // time comparison to dim dashboard according with game time (day = bright, night = dark)
   var time1 = data.game.time;
  var  timestr = time1.substr(11, 5);
  var timeH = Number(timestr.substr(0, 2));
  data.isNight = ((timeH >= 00 && timeH <= 07) || (timeH >= 20	 && timeH <= 23)) ? true : false;
  data.game.time2 = electric ? timestr : '';
  // rest stop time warning
var enableSleep = true; // disable this (change "true" to "false" - without quotes) if you dont want use in-game sleep
var RestTime = data.game.nextRestStopTime; // is only to clear code below
data.restWarning = enableSleep == true ? ((RestTime <= "0001-01-01T02:00:00Z" && RestTime > "0001-01-01T01:30:00Z") ? 'blue' : ((RestTime <= "0001-01-01T01:30:00Z" && RestTime > "0001-01-01T01:00:00Z") ? 'red' : ((RestTime <= "0001-01-01T01:00:00Z" && RestTime >= "0001-01-01T00:00:00Z") ? 'blinking' : 'off'))) : '';
data.restWarning = electric ? data.restWarning : '';
	
	//has job?
    data.hasJob = data.trailer.attached;
	// trailer wear
    data.trailer.wear = Math.floor(data.trailer.wear * 100) + '%';
	// navigation info
    data.navigation.estimatedDistanceKm = data.navigation.estimatedDistance / 1000;
    data.navigation.estimatedDistanceKmRounded = Math.floor(data.navigation.estimatedDistanceKm);
    var timeToDestinationArray = getDaysHoursMinutesAndSeconds(data.navigation.estimatedTime);
	timeToDestinationArray[1] += (timeToDestinationArray[0] - 1) * 24;
	if (timeToDestinationArray[1] == 0) {
		data.navigation.estimatedTime = timeToDestinationArray[2] + ' min';
	} else {
		data.navigation.estimatedTime = timeToDestinationArray[1] + ' hr ' + timeToDestinationArray[2] + ' min ';
	}
	// next rest stop time
	var nextRestArray = getDaysHoursMinutesAndSeconds(data.game.nextRestStopTime);
	if (nextRestArray[1] == 0) {
		data.game.nextRestStopTime = nextRestArray[2] + ' min';
	} else {
		data.game.nextRestStopTime = nextRestArray[1] + ' hr ' + nextRestArray[2] + ' min';
	}
    // return changed data to the core for rendering
    return data;
};

Funbit.Ets.Telemetry.Dashboard.prototype.render = function (data, utils) {
	
	$('._airPressureBar').width(data.truck.airPressure*1.4);
	$('._airPressureBar').css( "maxWidth", "258px" );
	$('._fuelPercentBar').width(data.truck.fuelPercent*2.58);
	$('._fuelConsBar').width(data.truck.fuelAverageConsumption*1.61);
	$('._fuelConsBar').css( "maxWidth", "223px" );	
	$('._wearBar').width(data.truck.Health*2.58);
}

function getDaysHoursMinutesAndSeconds(time) {
    var dateTime = new Date(time);
    var days = dateTime.getUTCDay();
    var hour = dateTime.getUTCHours();
    var minute = dateTime.getUTCMinutes();
    var second = dateTime.getUTCSeconds();
    return [days, hour, minute, second];
}

function addTime(time, days, hours, minutes, seconds) {
    var dateTime = new Date(time);

    return dateTime.addDays(days)
        .addHours(hours)
        .addMinutes(minutes)
        .addSeconds(seconds);
}

function processTimeDifferenceArray(hourMinuteArray) {
    var day = hourMinuteArray[0];
    var hours = hourMinuteArray[1];
    var minutes = hourMinuteArray[2];

    hours += (day - 1) * 24;

    if (hours <= 0 && minutes <= 0) {
        minutes = g_translations.XMinutes.replace('{0}', 0);
        return minutes;
    }

    if (hours == 1) {
        hours = g_translations.XHour.replace('{0}', hours);
    } else if (hours == 0) {
        hours = '';
    } else {
        hours = g_translations.XHours.replace('{0}', hours);
    }

    if (minutes == 1) {
        minutes = g_translations.XMinute.replace('{0}', minutes);
    } else {
        minutes = g_translations.XMinutes.replace('{0}', minutes);
    }
    return hours + ' ' + minutes;
}

function getTime(gameTime, timeUnits) {
    var currentTime = new Date(gameTime);
    var currentPeriod = timeUnits === 12 ? ' AM' : '';
    var currentHours = currentTime.getUTCHours();
    var currentMinutes = currentTime.getUTCMinutes();
    var formattedMinutes = currentMinutes < 10 ? '0' + currentMinutes : currentMinutes;
    var currentDay = '';


    switch (currentTime.getUTCDay()) {
        case 0:
            currentDay = g_translations.SundayAbbreviated;
            break;
        case 1:
            currentDay = g_translations.MondayAbbreviated;
            break;
        case 2:
            currentDay = g_translations.TuesdayAbbreviated;
            break;
        case 3:
            currentDay = g_translations.WednesdayAbbreviated;
            break;
        case 4:
            currentDay = g_translations.ThursdayAbbreviated;
            break;
        case 5:
            currentDay = g_translations.FridayAbbreviated;
            break;
        case 6:
            currentDay = g_translations.SaturdayAbbreviated;
            break;
    }

    if (currentHours > 12 && timeUnits === 12) {
        currentHours -= 12;
        currentPeriod = ' PM';
    }
    if (currentHours == 0) {
        currentHours = 12;
    }
    var formattedHours = currentHours < 10 && timeUnits === 24 ? '0' + currentHours : currentHours;

    return currentDay + ' ' + formattedHours + ':' + formattedMinutes + currentPeriod;
}

Date.prototype.addDays = function(d) {
    this.setUTCDate(this.getUTCDate() + d - 1);
    return this;
}

Date.prototype.addHours = function(h) {
   this.setTime(this.getTime() + (h*60*60*1000));
   return this;
}

Date.prototype.addMinutes = function(m) {
    this.setTime(this.getTime() + (m*60*1000));
    return this;
}

Date.prototype.addSeconds = function(s) {
    this.setTime(this.getTime() + (s*1000));
    return this;
}

Funbit.Ets.Telemetry.Dashboard.prototype.initialize = function (skinConfig, utils) {
    utils.preloadImages([
'gauge-arrow.png', 'gauge-arrow-s.png', 'gauge-arrow-s2.png', 'lowbeam-on1.png', 'warning.png', 'warning-off.png', 'bg-on.jpg', 'bg-on-dark.jpg', 'parklights-on.jpg', 'blinker-left-on.png', 'blinker-right-on.png', 'fuel-warning.png', 'highbeam-on.png', 'lowbeam-on.png', 'mBrake.png', 'retarder.png', 'gauge-arrow-bright.png', 'gauge-arrow-s-bright.png', 'gauge-arrow-s2-bright.png', 'handBrake.png']);
    $(document).add('body').on('click', function () {
        window.history.back();
    });
}

[m4rc10w]

@sketch I guessed wrong , I not use tables to position text (I do not know how do it, at least not yet), what I do is to manage and position EACH text item INDIVIDUALLY (may take more time, but it's the only way I learned to do, for now). I applied your code here to check, but the way you did, I can not find a solution, sorry

[airbus_sai]

m4rc10w, his tables work fine, it seems. The stuff just above the table does not.

sketch, I will not even pretend that I know CSS, but gamble and tell you to try <div class="hasJob"> instead of <div class="hasJob _jobSource"> and <div class="hasJob _jobDestination">. Maybe multiple classes don't work somehow. It's easier to make a single two-line <div> and hide it.