Max/Main
1
0
Fork 0
Code Pull requests Activity

ed

Browse source
This commit is contained in:
Nordi98 2025-07-16 23:40:23 +02:00
parent 2d9b0a1afb
commit d7ad6fb4bd
50 changed files with 9668 additions and 30515 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
resources/[tools]/jordqn_hud/web/armor.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
resources/[tools]/jordqn_hud/web/arrow.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
resources/[tools]/jordqn_hud/web/battery.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
resources/[tools]/jordqn_hud/web/beam.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
resources/[tools]/jordqn_hud/web/engine.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
resources/[tools]/jordqn_hud/web/food.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
resources/[tools]/jordqn_hud/web/gas.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
resources/[tools]/jordqn_hud/web/health.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

71
resources/[tools]/jordqn_hud/web/index.html Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="./style.css" rel="stylesheet">
<script defer src="script.js"></script>
</head>
<body>
<section id="speedometer">
<span id="speedtextkm">0</span>
<span id="speedtextmiles">0</span>
<img id="fuel-icon" class="fuel" src="gas.png">
<img id="beam" class="beam" src="beam.png">
<img id="engine" class="engine" src="engine.png">
<img id="seatbelt" class="seatbelt" src="seatbelt.png">
<svg id="speed" viewbox="0 0 200 120">
<path class="speedpath" d="M 20 90 A 50 50 0 1 1 100 90" fill='none' />
<path id="speed-svg" fill='none' class="speedvalue" d="M 20 90 A 50 50 0 1 1 100 90" />
<path id="fuel-path" class="fuelpath" d="M 109 90 A 20 20 0 1 0 118 58" fill='none' />
<path id="fuel-svg" fill='none' class="fuelvalue" d="M 109 90 A 20 20 0 1 0 118 58" />
</svg>
</section>
<section id="location">
<img id="arrow" src="arrow.png">
<span id="zone">Terminal</span>
<span id="streetname">Buccaneer Way</span>
<div class="bottom">
<span id="direction">NW</span>
<span id="zipcode">CP 8090</span>
<span id="distance">20m</span>
</div>
</section>
<section id="status">
<img id="voice" class="voice" src="mic_mute.png">
<div id="oxygencontainer" class="oxygen">
<span class="title">Oxygen</span>
<img src="oxygen.png">
<hr id="oxygen">
<span id="oxygentext">100%</span>
</div>
<div id="armorcontainer" class="armor">
<span class="title">Armor</span>
<img src="armor.png">
<hr id="armor">
<span id="armortext">100%</span>
</div>
<div id="thirstcontainer" class="thirst">
<span class="title">Thirst</span>
<img src="thirst.png">
<hr id="thirst">
<span id="thirsttext">100%</span>
</div>
<div id="foodcontainer" class="food">
<span class="title">Hunger</span>
<img src="food.png">
<hr id="food">
<span id="foodtext">100%</span>
</div>
<div id="healthcontainer" class="health">
<span class="title">Health</span>
<img src="health.png">
<hr id="health">
<span id="healthtext">100%</span>
</div>
</section>
</body>
</html>

BIN
resources/[tools]/jordqn_hud/web/mic_mute.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
resources/[tools]/jordqn_hud/web/mic_one.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
resources/[tools]/jordqn_hud/web/mic_radio.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
resources/[tools]/jordqn_hud/web/mic_three.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
resources/[tools]/jordqn_hud/web/mic_two.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
resources/[tools]/jordqn_hud/web/oxygen.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 35 KiB

227
resources/[tools]/jordqn_hud/web/script.js Normal file
View file

@ -0,0 +1,227 @@
const locationWindow = document.getElementById("location");
const statusWindow = document.getElementById("status");
const speedometerWindow = document.getElementById("speedometer");

const arrow = document.getElementById("arrow");
const direction = document.getElementById("direction");
const zipcode = document.getElementById("zipcode");
const distance = document.getElementById("distance");
const streetname = document.getElementById("streetname");
const zone = document.getElementById("zone");

const thirstcontainer = document.getElementById("thirstcontainer");
const foodcontainer = document.getElementById("foodcontainer");
const armorcontainer = document.getElementById("armorcontainer");
const oxygencontainer = document.getElementById("oxygencontainer");

const healthtext = document.getElementById("healthtext")
const armortext = document.getElementById("armortext")
const thirsttext = document.getElementById("thirsttext")
const foodtext = document.getElementById("foodtext")
const oxygentext = document.getElementById("oxygentext")
const healthbar = document.getElementById("health")
const armorbar = document.getElementById("armor")
const thirstbar = document.getElementById("thirst")
const foodbar = document.getElementById("food")
const oxygenbar = document.getElementById("oxygen")
const voice = document.getElementById("voice")

const speed = document.getElementById("speed-svg");
const speedtextkm = document.getElementById("speedtextkm")
const speedtextmiles = document.getElementById("speedtextmiles")
const fuel = document.getElementById("fuel-svg");
const fuel_path = document.getElementById("fuel-path");
const fuel_icon = document.getElementById("fuel-icon");

const seatbelt = document.getElementById("seatbelt");
const engine = document.getElementById("engine");
const highbeams = document.getElementById("beam");

let left = 0

window.addEventListener('message', (event) => {
if (event.data.component == "position") {
if (event.data.visible == null) {
left = 1
locationWindow.style.opacity = 1
arrow.style.rotate = -event.data.heading + "deg"

direction.innerText = event.data.direction
zipcode.innerText = event.data.postal
distance.innerText = event.data.distance
streetname.innerText = event.data.street
zone.innerText = event.data.zone
} else {
left = 0
locationWindow.style.opacity = 0
}
}

if (event.data.component == "status") {
if (event.data.visible == null) {
statusWindow.style.opacity = 1
if (event.data.hungerVisible) { foodcontainer.style.display = "block" } else { foodcontainer.style.display = "none" }
if (event.data.thirstVisible) { thirstcontainer.style.display = "block" } else { thirstcontainer.style.display = "none" }
if (event.data.voiceVisible) { voice.style.display = "block" } else { voice.style.display = "none" }

if (event.data.voiceTalking == true) {
if (voice.classList.contains("disabled")) {
voice.classList.remove("disabled")
}
} else {
if (!voice.classList.contains("disabled")) {
voice.classList.add("disabled")
}
}

voice.src = event.data.voiceType

let health = Math.round((event.data.health * 100) / event.data.maxhealth)
if (health > 100) { health = 100 }
let armor = Math.round((event.data.armor * 100) / 100)
if (armor > 0) {
armorcontainer.style.display = "block"
} else {
armorcontainer.style.display = "none"
}
let thirst = Math.round((event.data.thirst * 100) / 100)
let food = Math.round((event.data.hunger * 100) / 100)

let oxygen = Math.round((event.data.oxygen * 100) / 40)

if (event.data.framework == "qbcore" || event.data.framework == "esx") {
oxygen = Math.round((event.data.oxygen * 100) / 10)
}

if (oxygen < 0) { oxygen = 0 }

if (oxygen != 100) {
oxygencontainer.style.display = "block"
} else {
oxygencontainer.style.display = "none"
}

healthtext.innerText = health + "%"
healthbar.style.width = (health * 150) / 100 + "px"
healthbar.style.setProperty('--size', 150 - ((health * 150) / 100) + "px");
armortext.innerText = armor + "%"
armorbar.style.width = (armor * 150) / 100 + "px"
armorbar.style.setProperty('--size', 150 - ((armor * 150) / 100) + "px");

thirsttext.innerText = thirst + "%"
thirstbar.style.width = (thirst * 150) / 100 + "px"
thirstbar.style.setProperty('--size', 150 - ((thirst * 150) / 100) + "px");

foodtext.innerText = food + "%"
foodbar.style.width = (food * 150) / 100 + "px"
foodbar.style.setProperty('--size', 150 - ((food * 150) / 100) + "px");

oxygentext.innerText = oxygen + "%"
oxygenbar.style.width = (oxygen * 150) / 100 + "px"
oxygenbar.style.setProperty('--size', 150 - ((oxygen * 150) / 100) + "px");
} else {
if (event.data.visible == true) {
statusWindow.style.opacity = 1
} else {
statusWindow.style.opacity = 0
}
}
}

if (event.data.component == "speedometer") {
if (event.data.visible == null) {
if (event.data.seatbeltVisible) { seatbelt.style.display = "block" } else { seatbelt.style.display = "none" }
if (event.data.fuelVisible) { speedometerWindow.style.marginLeft = '0px'; fuel.style.display = "block"; fuel_path.style.display = "block"; fuel_icon.style.display = "block"; } else { speedometerWindow.style.marginLeft = '10px'; fuel.style.display = "none"; fuel_path.style.display = "none"; fuel_icon.style.display = "none"; }
speedometerWindow.style.opacity = 1
let percent_speed = (event.data.speed * 100) / (event.data.maxspeed + 50)
let percent_fuel = (event.data.fuel * 100) / (event.data.maxfuel)
if (event.data.framework == "qbcore") {
percent_fuel = event.data.fuel
}
setDashedGaugeValue(speed, percent_speed, 219.911485751);
setDashedGaugeValue(fuel, percent_fuel, 87.9645943005);
speedtextkm.innerText = Math.round(event.data.speed)
speedtextmiles.innerText = Math.round(event.data.speed)

if (event.data.iselectric == true) {
fuel_icon.src = "battery.png"
} else {
fuel_icon.src = "gas.png"
}

if (event.data.useMiles == true) {
speedtextkm.style.display = "none"
speedtextmiles.style.display = "block"
} else {
speedtextkm.style.display = "block"
speedtextmiles.style.display = "none"
}

if (event.data.hasmotor == true) {
highbeams.style.display = "block"
engine.style.display = "block"
speedometerWindow.style.marginLeft = '0px'
speedometerWindow.style.marginBottom = '0px'
} else {
highbeams.style.display = "none"
engine.style.display = "none"
seatbelt.style.display = "none"
fuel.style.display = "none"
fuel_path.style.display = "none"
fuel_icon.style.display = "none"
speedometerWindow.style.marginLeft = '10px'
speedometerWindow.style.marginBottom = '-10px'
}

if (event.data.highbeams == 1) {
if (highbeams.classList.contains("disabled")) {
highbeams.classList.remove("disabled")
}
} else {
if (!highbeams.classList.contains("disabled")) {
highbeams.classList.add("disabled")
}
}

if (event.data.engine == 1) {
if (engine.classList.contains("disabled")) {
engine.classList.remove("disabled")
}
} else {
if (!engine.classList.contains("disabled")) {
engine.classList.add("disabled")
}
}

if (event.data.seatbelt == true) {
if (seatbelt.classList.contains("disabled")) {
seatbelt.classList.remove("disabled")
}
} else {
if (!seatbelt.classList.contains("disabled")) {
seatbelt.classList.add("disabled")
}
}
} else {
speedometerWindow.style.opacity = 0
}
}

if (event.data.component == "configuration") {
locationWindow.style.left = event.data.locationleft + "px"
locationWindow.style.bottom = event.data.locationbottom + "px"
statusWindow.style.right = event.data.statusright + "px"
statusWindow.style.bottom = event.data.statusbottom + "px"
speedometerWindow.style.bottom = event.data.speedometerbottom + "px"
}
})

function setDashedGaugeValue(gaugeDOMElement, percentage, arcLength) {
const emptyDashLength = 500;
const filledArcLength = arcLength * (percentage / 100);
gaugeDOMElement.style.strokeDasharray = `${filledArcLength} ${emptyDashLength}`;
gaugeDOMElement.style.strokeDashoffset = filledArcLength;
}

setDashedGaugeValue(speed, 0, 219.911485751);
setDashedGaugeValue(fuel, 0, 87.9645943005);

BIN
resources/[tools]/jordqn_hud/web/seatbelt.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

19
resources/[tools]/jordqn_hud/web/style.css Normal file
View file

File diff suppressed because one or more lines are too long

BIN
resources/[tools]/jordqn_hud/web/thirst.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB