ed
This commit is contained in:
Nordi98
parent
2d9b0a1afb
commit
d7ad6fb4bd
50 changed files with 9668 additions and 30515 deletions
BIN
resources/[tools]/jordqn_hud/web/armor.png
Normal file
BIN
resources/[tools]/jordqn_hud/web/armor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
resources/[tools]/jordqn_hud/web/arrow.png
Normal file
BIN
resources/[tools]/jordqn_hud/web/arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
resources/[tools]/jordqn_hud/web/battery.png
Normal file
BIN
resources/[tools]/jordqn_hud/web/battery.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
resources/[tools]/jordqn_hud/web/beam.png
Normal file
BIN
resources/[tools]/jordqn_hud/web/beam.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
resources/[tools]/jordqn_hud/web/engine.png
Normal file
BIN
resources/[tools]/jordqn_hud/web/engine.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
resources/[tools]/jordqn_hud/web/food.png
Normal file
BIN
resources/[tools]/jordqn_hud/web/food.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
resources/[tools]/jordqn_hud/web/gas.png
Normal file
BIN
resources/[tools]/jordqn_hud/web/gas.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
resources/[tools]/jordqn_hud/web/health.png
Normal file
BIN
resources/[tools]/jordqn_hud/web/health.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
71
resources/[tools]/jordqn_hud/web/index.html
Normal file
71
resources/[tools]/jordqn_hud/web/index.html
Normal 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
BIN
resources/[tools]/jordqn_hud/web/mic_mute.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
resources/[tools]/jordqn_hud/web/mic_one.png
Normal file
BIN
resources/[tools]/jordqn_hud/web/mic_one.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
resources/[tools]/jordqn_hud/web/mic_radio.png
Normal file
BIN
resources/[tools]/jordqn_hud/web/mic_radio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
resources/[tools]/jordqn_hud/web/mic_three.png
Normal file
BIN
resources/[tools]/jordqn_hud/web/mic_three.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
BIN
resources/[tools]/jordqn_hud/web/mic_two.png
Normal file
BIN
resources/[tools]/jordqn_hud/web/mic_two.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
resources/[tools]/jordqn_hud/web/oxygen.png
Normal file
BIN
resources/[tools]/jordqn_hud/web/oxygen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
227
resources/[tools]/jordqn_hud/web/script.js
Normal file
227
resources/[tools]/jordqn_hud/web/script.js
Normal 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
BIN
resources/[tools]/jordqn_hud/web/seatbelt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
19
resources/[tools]/jordqn_hud/web/style.css
Normal file
19
resources/[tools]/jordqn_hud/web/style.css
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
*{
|
||||
--variable-main-color: #ffffff;
|
||||
--variable-zonename-color: #ffffff;
|
||||
--variable-streetname-color: #ffffff;
|
||||
--variable-direction-color: #ffffff;
|
||||
--variable-zipcode-color: #ffffff;
|
||||
--variable-distance-color: #ffffff;
|
||||
|
||||
--variable-health-color: #ffffff;
|
||||
--variable-hunger-color: #ffffff;
|
||||
--variable-thirst-color: #ffffff;
|
||||
--variable-armor-color: #ffffff;
|
||||
--variable-oxygen-color: #ffffff;
|
||||
|
||||
--variable-speed-color: #ffffff;
|
||||
--variable-fuel-color: #ffffff;
|
||||
}
|
||||
|
||||
* {--size: 0px;-webkit-user-drag: none;user-select: none;}body {overflow: hidden;}#location {display: flex;position: absolute;bottom: 30px;left: 310px;padding: 10px 20px;opacity: 0;transition: .2s;width: 300px;}#location > img {width: 40px;height: 40px;}#location > #zone {font-family: 'Hanken Grotesk';font-weight: 200;font-style: italic;font-size: 12px;color: var(--variable-zonename-color);position: absolute;left: 70px;top: 0px;}#location > #streetname {font-family: 'Hanken Grotesk';font-weight: 600;color: var(--variable-streetname-color);position: absolute;padding-bottom: 2px;left: 70px;top: 15px;border-bottom: 1px solid rgba(255, 255, 255, 0.425);}.bottom {position: absolute;top: 40px;left: 70px;}.bottom > #direction {font-family: 'Hanken Grotesk';font-weight: 200;font-size: 12px;color: var(--variable-direction-color);}.bottom > #zipcode {font-family: 'Hanken Grotesk';font-weight: 200;font-size: 12px;color: var(--variable-zipcode-color);margin-left: 10px;}.bottom > #distance {font-family: 'Hanken Grotesk';font-weight: 300;font-size: 12px;color: var(--variable-distance-color);margin-left: 10px;}#status {width: 300px;height: 150px;border-radius: 10px;position: absolute;bottom: 30px;right: 20px;overflow: hidden;display: flex;justify-content: flex-end;flex-direction: column;opacity: 0;}#status img {height: 20px;width: 20px;}#status > .health, #status > .thirst, #status > .food, #status > .armor, #status > .oxygen {position: relative;height: 30px;}.health > img, .armor > img, .thirst > img, .food > img, .oxygen > img {position: absolute;right: 10px;top: 4px;}.health > hr, .armor > hr, .thirst > hr, .food > hr, .oxygen > hr {position: absolute;transition: .2s;right: 40px;top: 13px;width: 150px;height: 2px;border-radius: 10px;outline: none;border: none;overflow: visible;background-color: var(--variable-main-color);}.health > hr::before, .armor > hr::before, .thirst > hr::before, .food > hr::before, .oxygen > hr::before {content: "";position: absolute;left: calc(-1 * var(--size));transition: .2s;width: var(--size);height: 2px;border-radius: 10px;outline: none;border: none;background-color: #6b6b6bbe;}.health > span, .armor > span, .thirst > span, .food > span, .oxygen > span {position: absolute;font-family: 'Hanken Grotesk';font-weight: 400;font-size: 12px;color: var(--variable-main-color);right: 40px;top: 3px;}.health > .title, .armor > .title, .thirst > .title, .food > .title, .oxygen > .title {position: absolute;font-family: 'Hanken Grotesk';font-weight: 200;font-size: 12px;color: var(--variable-main-color);left: 110px;top: 3px;}.health > hr {background-color: var(--variable-health-color);}.armor > hr {background-color: var(--variable-armor-color);}.food > hr {background-color: var(--variable-hunger-color);}.thirst > hr {background-color: var(--variable-thirst-color);}.oxygen > hr {background-color: var(--variable-oxygen-color);}#speedometer {position: absolute;bottom: -50px;left: calc(50% - 125px);width: 250px;transform: scale(0.5);transition: .2s;opacity: 0;}#speedometer #speed {height: 200px;margin: 20px auto;display: block;}#speedometer .fuel {position: absolute;bottom: 77px;right: 25px;height: 30px;width: 30px;}#speedometer .beam {position: absolute;bottom: 30px;right: 90px;height: 30px;width: 30px;}#speedometer .engine {position: absolute;bottom: 30px;right: 180px;height: 30px;width: 30px;}#speedometer .seatbelt {position: absolute;bottom: 20px;right: 135px;height: 30px;width: 30px;}.disabled {opacity: 0.4;}#speedometer .speedpath {stroke: #6b6b6bbe;stroke-width: 4;stroke-linecap: round;}#speedometer .fuelpath {stroke: #6b6b6bbe;stroke-width: 3;stroke-linecap: round;}#speedometer .fuelvalue {stroke-width: 4;stroke: var(--variable-fuel-color);stroke-dasharray: 126 500;stroke-dashoffset: 126;animation: dash 3s 0.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;stroke-linecap: round;}#speedometer .speedvalue {stroke-width: 5;stroke: var(--variable-speed-color);stroke-dasharray: 126 500;stroke-dashoffset: 126;animation: dash 3s 0.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;stroke-linecap: round;}#speedometer span {position: absolute;font-family: 'Hanken Grotesk';font-weight: 400;font-size: 40px;left: 30px;top: 85px;width: 140px;text-align: center;color: var(--variable-speed-color);}#speedometer #speedtextkm::after {content: "kmh";font-weight: 300;font-style: italic;font-size: 20px;}#speedometer #speedtextmiles::after {content: "mph";font-weight: 300;font-style: italic;font-size: 20px;}@keyframes dash {to {stroke-dashoffset: 1;}}#status > .voice {width: 25px;height: 17px;align-self: flex-end;margin-bottom: 20px;margin-right: 20px;}
|
||||
BIN
resources/[tools]/jordqn_hud/web/thirst.png
Normal file
BIN
resources/[tools]/jordqn_hud/web/thirst.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Loading…
Add table
Add a link
Reference in a new issue