ETS2/ATS Telemetry Web Server + Mobile Dashboard

sketch
Posts: 83
Joined: 07 Mar 2015 01:16
Location: New Orleans, Louisiana

Re: ETS2/ATS Telemetry Web Server + Mobile Dashboard

#891 Post by sketch » 31 May 2017 13:26

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();
    });
}

User avatar
m4rc10w
Posts: 95
Joined: 15 Feb 2015 17:52

Re: ETS2/ATS Telemetry Web Server + Mobile Dashboard

#892 Post by m4rc10w » 03 Jun 2017 12:43

@sketch I guessed wrong :mrgreen:, 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 :(
My ETS2/ATS Custom/Edited Dashboards for Funbit ETS2/ATS Telemetry Server
https://www.worldoftrucks.com/en/online ... p?id=25089
Sorry my bad English, it´s no my native language, then most my posts have help from Google Translate.

User avatar
airbus_sai
Beta tester
Posts: 590
Joined: 14 Jan 2013 17:15

Re: ETS2/ATS Telemetry Web Server + Mobile Dashboard

#893 Post by airbus_sai » 03 Jun 2017 14:59

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.
"Now, I am become Death, the destroyer of squirrels."

sketch
Posts: 83
Joined: 07 Mar 2015 01:16
Location: New Orleans, Louisiana

Re: ETS2/ATS Telemetry Web Server + Mobile Dashboard

#894 Post by sketch » 04 Jun 2017 15:57

m4rc10w, thanks for trying. Not all of the data is in tables--in fact, only the middle portion is a table, with the ETA, distance to go, bed time, etc.; the other stuff is just positioned manually.

I just looked at the code a little deeper and realized... oh boy, this is a total amateur mistake :D I am using position: absolute when what I really want is position: fixed.

Does not solve the hasJob problem but I can live with that. I can't live with it totally being in the wrong place when the truck is off!

airbus_sai, I think those are unchanged from the default/generic. They don't seem to be doing anything at all. The dual classes are only on a couple of things...

edited to add: By the way, is there any way to add differential lock icon? I know it has been asked before, but not sure if there were any updates since then.

User avatar
siedlecki95
Posts: 6
Joined: 26 Aug 2016 20:09

Re: ETS2/ATS Telemetry Web Server + Mobile Dashboard

#895 Post by siedlecki95 » 15 Jun 2017 21:38

Connecting...Disconected.. ahh why its not working for me?? i tried by browser and no result
Android 4.4.2 Galaxy S4 Wi-Fi connection

User avatar
airbus_sai
Beta tester
Posts: 590
Joined: 14 Jan 2013 17:15

Re: ETS2/ATS Telemetry Web Server + Mobile Dashboard

#896 Post by airbus_sai » 16 Jun 2017 06:46

siedlecki95, did you launch the application? Did application install a DLL into the game (will be yes if the game asks you about SDK each launch)? Did you approve SDK usage in the game? Is correct network interface chosen in the application? Does it work on the same computer using 127.0.0.1? Does it work on the same computer using correct local address (192.168.*.*, or 172.16.*.*, or 10.*.*.*)? Does the site appear on your device where you can select the skin?

May be a lot of questions, but one of them will definitely tell about your issue. From what I can tell, the Telemetry DLL is not installed in your game, or you didn't approve it after launching the game.
"Now, I am become Death, the destroyer of squirrels."

Nickm28
Posts: 2
Joined: 12 Feb 2017 05:40

Re: ETS2/ATS Telemetry Web Server + Mobile Dashboard

#897 Post by Nickm28 » 22 Jun 2017 04:31

Anyone got a Kenworth W900 Skin and a Peterbilt 389 skin?

sketch
Posts: 83
Joined: 07 Mar 2015 01:16
Location: New Orleans, Louisiana

Re: ETS2/ATS Telemetry Web Server + Mobile Dashboard

#898 Post by sketch » 23 Jun 2017 20:20

No one has done a W900 or 389 mostly because the dashboards are too wide to render on a normal display. But I find that the T680 and 579 skins are close enough to use with the W900 and 389 trucks, really.

User avatar
m4rc10w
Posts: 95
Joined: 15 Feb 2015 17:52

Re: ETS2/ATS Telemetry Web Server + Mobile Dashboard

#899 Post by m4rc10w » 23 Jun 2017 21:29

Hello guys, I'd like you help me decide on my next dashboard, poll link is below
http://www.ferendum.com/en/PID78747PSD46022
I'm going to leave the vote open for 2 weeks from today (until July 8). I will try to make it as realistic as possible, as long as I can find enough data for reference (images and videos), otherwise I will do as the panel appears in the game itself, okay?
My ETS2/ATS Custom/Edited Dashboards for Funbit ETS2/ATS Telemetry Server
https://www.worldoftrucks.com/en/online ... p?id=25089
Sorry my bad English, it´s no my native language, then most my posts have help from Google Translate.

Nickm28
Posts: 2
Joined: 12 Feb 2017 05:40

Re: ETS2/ATS Telemetry Web Server + Mobile Dashboard

#900 Post by Nickm28 » 24 Jun 2017 04:58

Yeah true i didnt think of that. They do work and are close.

Post Reply

Return to “General discussion about game”

Who is online

Users browsing this forum: No registered users and 15 guests