Added speedometer
This commit is contained in:
hydrant
1628
Client/Speedometer/cef/css/style.css
Normal file
1628
Client/Speedometer/cef/css/style.css
Normal file
File diff suppressed because it is too large
Load Diff
3
Client/Speedometer/cef/js/gauge.js
Normal file
3
Client/Speedometer/cef/js/gauge.js
Normal file
File diff suppressed because one or more lines are too long
170
Client/Speedometer/cef/speedometer.html
Normal file
170
Client/Speedometer/cef/speedometer.html
Normal 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
30
Client/Speedometer/index.js
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
@@ -100,6 +100,7 @@ mp.events.add('hideTuningInfo', (unbind) => {
|
|||||||
|
|
||||||
if (typeof mainMenu !== "undefined" && unbind) {
|
if (typeof mainMenu !== "undefined" && unbind) {
|
||||||
mainMenu.Visible = false;
|
mainMenu.Visible = false;
|
||||||
|
globalData.InTuning = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (keyBound && unbind) {
|
if (keyBound && unbind) {
|
||||||
@@ -123,6 +124,7 @@ mp.events.add("showTuningMenu", () => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
globalData.InTuning = true;
|
||||||
|
|
||||||
mainMenu = new Menu("Fahrzeugwerkstatt", "Modifiziere dein Fahrzeug", new Point(50, 50));
|
mainMenu = new Menu("Fahrzeugwerkstatt", "Modifiziere dein Fahrzeug", new Point(50, 50));
|
||||||
|
|
||||||
@@ -186,6 +188,7 @@ mp.events.add("showTuningMenu", () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
mainMenu.MenuClose.on(() => {
|
mainMenu.MenuClose.on(() => {
|
||||||
|
globalData.InTuning = false;
|
||||||
mp.events.call("hideTuningInfo", false);
|
mp.events.call("hideTuningInfo", false);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -4,6 +4,9 @@
|
|||||||
* @copyright (c) 2008 - 2018 Life of German
|
* @copyright (c) 2008 - 2018 Life of German
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
let globalData = {
|
||||||
|
InTuning: false
|
||||||
|
};
|
||||||
|
|
||||||
require('./CharCreator/index.js');
|
require('./CharCreator/index.js');
|
||||||
|
|
||||||
@@ -20,3 +23,5 @@ require('./Player/keys.js');
|
|||||||
require('./FactionManagement/main.js');
|
require('./FactionManagement/main.js');
|
||||||
|
|
||||||
require('./Tuning/main.js');
|
require('./Tuning/main.js');
|
||||||
|
|
||||||
|
require('./Speedometer/index.js');
|
||||||
Reference in New Issue
Block a user