aviate/reallife-gamemode
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added speedometer

Browse Source
This commit is contained in:
hydrant
2018-10-28 17:27:17 +01:00
parent 4d02755642
commit e35a64c606
6 changed files with 1840 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1628
Client/Speedometer/cef/css/style.css Normal file
View File

File diff suppressed because it is too large Load Diff

3
Client/Speedometer/cef/js/gauge.js Normal file
View File

File diff suppressed because one or more lines are too long

170
Client/Speedometer/cef/speedometer.html Normal file
View File

@@ -0,0 +1,170 @@
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css\style.css">
<script src="js\gauge.js"></script>
<script>
function update(speed, rpm, gas)
{
updateSpeed(speed);
updateKM(speed);
updateRpm(rpm);
updateGas(gas);
}
function updateSpeed(speed)
{
document.getElementById("tacho").dataset.value = speed;
}
function updateKM(km)
{
var kilometerstandt = ( km )
document.getElementById("tacho").dataset.valueText = kilometerstandt.toFixed(1) + " km/h";
}
function updateRpm(rpm)
{
document.getElementById("rpm").dataset.value = rpm;
}
function updateGas(gas)
{
document.getElementById("gas").dataset.value = gas;
//if(gas >= 15){
// document.getElementById("gasState").innerHTML = ""
//}
//if(gas < 15){
// document.getElementById("gasState").innerHTML = "<img src=\"..\\Images\\gas_critical.png\" width=\"22px\">";
//}
//if( gas > 15 && gas < 50 ){
// document.getElementById("gasState").innerHTML = "<img src=\"..\\Images\\gas_low.png\" width=\"22px\">";
//}
}
function updateHealth(rotation)
{
if(rotation >= 50){
document.getElementById("repairState").innerHTML = ""
}
if(rotation < 25){
document.getElementById("repairState").innerHTML = "<img src=\"..\\Images\\engine_critical.png\" width=\"18px\">";
}
if( rotation > 25 && rotation < 50 ){
document.getElementById("repairState").innerHTML = "<img src=\"..\\Images\\engine_soft.png\" width=\"18px\">";
}
}
function showSpeedo()
{
document.body.className = "";
}
function hideSpeedo()
{
document.body.className = "fade";
}
</script>
<style>
.blinker_arrow{
color: #FFF;
}
body {
font-family: Arial !important;
}
</style>
</head>
<body onload="hideSpeedo()">
<div class="w3-container" style="width:350px; position:fixed; bottom: 60px; right:20px;">
<div class="w3-display-container" style="height:200px">
<div class="w3-display-middle">
<canvas id="tacho" data-type="radial-gauge"
data-width="200"
data-height="200"
data-units="Km/h"
data-title="false"
data-value="0"
data-min-value="0"
data-max-value="320"
data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220,240,260,280,300,320"
data-minor-ticks="2"
data-stroke-ticks="false"
data-highlights='[
{ "from": 200, "to": 320, "color": "rgba(255, 0, 0, .25)" }
]'
data-border-outer-width=1
data-border-middle-width=1
data-animation="false"
data-color-plate="#222"
data-color-major-ticks="#f5f5f5"
data-color-minor-ticks="#ddd"
data-color-title="#fff"
data-color-units="#ccc"
data-color-numbers="#eee"
data-color-needle-start="rgba(240, 128, 128, 1)"
data-color-needle-end="rgba(255, 160, 122, .9)"
data-value-box="true"
data-value-text="0 Km/h"
data-font-value="Arial"
></canvas>
</div>
<div class="w3-display-bottomleft" style="z-index:-5;">
<canvas id="gas" data-type="radial-gauge"
data-width="100"
data-height="100"
data-start-angle="20"
data-ticks-angle="140"
data-title="false"
data-value="0"
data-min-value="0"
data-max-value="100"
data-major-ticks="E,F"
data-minor-ticks="2"
data-stroke-ticks="false"
data-value-box="false"
data-animation="false"
data-highlights='[
{ "from": 0, "to": 15, "color": "rgba(255,0,0,.25)" }
]'
data-border-outer-width=1
data-border-middle-width=1
data-color-plate="#222"
data-color-major-ticks="#f5f5f5"
data-color-minor-ticks="#ddd"
data-font-numbers-size="32"
data-color-title="#fff"
data-color-units="#ccc"
data-color-numbers="#eee"
data-color-needle-start="rgba(240, 128, 128, 1)"
data-color-needle-end="rgba(255, 160, 122, .9)"
></canvas>
</div>
<div class="w3-display-bottomright" style="z-index:-5;">
<canvas id="rpm" data-type="radial-gauge"
data-width="100"
data-height="120"
data-units="RPM"
data-title="false"
data-value="0"
data-min-value="0"
data-max-value="1000"
data-major-ticks="0,1,2,3,4,5,6,7,8,9,10"
data-minor-ticks="2"
data-stroke-ticks="false"
data-value-box="false"
data-animation="false"
data-highlights='[
{ "from": 800, "to": 1000, "color": "rgba(255,0,0,.25)" }
]'
data-border-outer-width=1
data-border-middle-width=1
data-font-numbers-size="32"
data-color-plate="#222"
data-color-major-ticks="#f5f5f5"
data-color-minor-ticks="#ddd"
data-color-title="#fff"
data-color-units="#ccc"
data-color-numbers="#eee"
data-color-needle-start="rgba(240, 128, 128, 1)"
data-color-needle-end="rgba(255, 160, 122, .9)"
data-font-value="Led"
></canvas>
</div>
</div>
</div>
</body>
</html>

30
Client/Speedometer/index.js Normal file
View File

@@ -0,0 +1,30 @@
let speedo = mp.browsers.new("package://speedometer/CEF/speedometer.html");
let showed = false;
let player = mp.players.local;
mp.events.add('render', () =>
{
if (player.vehicle && player.vehicle.getPedInSeat(-1) === player.handle && !globalData.InTuning) // Check if player is in vehicle and is driver
{
if(showed === false) // Check if speedo is already showed
{
speedo.execute("showSpeedo();");
showed = true;
}
/*Get vehicle infos*/
let vel = player.vehicle.getSpeed() * 3.6; //Doc: https://wiki.rage.mp/index.php?title=Entity::getSpeed
let rpm = player.vehicle.rpm * 1000; //Doc: https://wiki.rage.mp/index.php?title=Vehicle::rpm
let gas = player.vehicle.getPetrolTankHealth(); //Doc: https://wiki.rage.mp/index.php?title=Vehicle::getPetrolTankHealth
gas = gas < 0 ? 0: gas / 10;
speedo.execute(`update(${vel}, ${rpm}, ${gas});`); // Send data do CEF
}
else
{
if(showed)
{
speedo.execute("hideSpeedo();");
showed = false;
}
}
});

3
Client/Tuning/main.js
View File

@@ -100,6 +100,7 @@ mp.events.add('hideTuningInfo', (unbind) => {
if (typeof mainMenu !== "undefined" && unbind) {
mainMenu.Visible = false;
globalData.InTuning = false;
}
if (keyBound && unbind) {
@@ -123,6 +124,7 @@ mp.events.add("showTuningMenu", () => {
return;
}
globalData.InTuning = true;
mainMenu = new Menu("Fahrzeugwerkstatt", "Modifiziere dein Fahrzeug", new Point(50, 50));
@@ -186,6 +188,7 @@ mp.events.add("showTuningMenu", () => {
});
mainMenu.MenuClose.on(() => {
globalData.InTuning = false;
mp.events.call("hideTuningInfo", false);
});

5
Client/index.js
View File

@@ -4,6 +4,9 @@
* @copyright (c) 2008 - 2018 Life of German
*/
let globalData = {
InTuning: false
};
require('./CharCreator/index.js');
@@ -20,3 +23,5 @@ require('./Player/keys.js');
require('./FactionManagement/main.js');
require('./Tuning/main.js');
require('./Speedometer/index.js');