From 07df20d8221f40f367963cfa093c252e2dbc27a4 Mon Sep 17 00:00:00 2001 From: renzuzu <82306584+renzuzu@users.noreply.github.com> Date: Thu, 30 Sep 2021 21:07:23 +0800 Subject: [PATCH] tweak(client): retweak UI --- renzu_hud/conf/main.lua | 4 +- renzu_hud/conf/status.lua | 40 ++++++++--------- renzu_hud/ui/index.html | 2 +- renzu_hud/ui/js/demo.js | 95 ++++++++++++++++++++------------------- 4 files changed, 71 insertions(+), 70 deletions(-) diff --git a/renzu_hud/conf/main.lua b/renzu_hud/conf/main.lua index 44f8e6ca..10370ed7 100644 --- a/renzu_hud/conf/main.lua +++ b/renzu_hud/conf/main.lua @@ -9,7 +9,7 @@ ---------------------------------------------------------https://github.com/renzuzu/renzu_hud------------------------------------------ config = {} config.gamebuild = 'auto' -- if 2189 pedshot transparent and 1604 or < 2000 = Enter vehicle game event will not work, we will use normal pedshot ( gamebuild is what you set on your server start example: +set sv_enforceGameBuild 2189, available build 1604, 2060, 2189 and more.) this is important if you are using UI Normal with Ped Face. -config.framework = 'STANDALONE' -- ESX | QBCORE | VRP | STANDALONE (VRP not supported yet, but you can use standalone, it will work!) +config.framework = 'ESX' -- ESX | QBCORE | VRP | STANDALONE (VRP not supported yet, but you can use standalone, it will work!) config.Mysql = 'mysql-async' -- 'ghmattisql' | 'mysql-async' config.weight_type = false -- ESX item weight or limit type config.vehicle_table = 'owned_vehicles' -- change this if you use different sql table for player vehicles (note identifier steam is always being used here) @@ -36,7 +36,7 @@ config.enable_commands_as_item = true -- if you are not using ESX, you can enabl config.commanditem_permission = { -- item command permission -- standalone purpose! 'steam:11000013ec77a2e', -- steam hex id, change this to yours, you can add as many as you want 'steam:11000013ec77a2e', - 'steam:11000013ec77a2e', + 'df845523fc29c5159ece179359f22a741ca2ca9a', } config.identifier = 'license:' -- standalone purpose, ignore if using framework --MULTI CHARACTER START -- set config.multichar = false if you are not using any multi character ( configuring this is needed to avoid problems saving to database ) diff --git a/renzu_hud/conf/status.lua b/renzu_hud/conf/status.lua index c4eaaea0..d00d5e7a 100644 --- a/renzu_hud/conf/status.lua +++ b/renzu_hud/conf/status.lua @@ -4,9 +4,9 @@ config.registerautostatus = true -- register all status from config.statusorderi config.statusui = 'simple' -- UI LOOK ( simple, normal ) -- NORMAL = with pedface, Simple = Only Icons config.status_type = 'progressbar' -- circle progress bar = progressbar, fontawsome icon = icons config.statusv2 = true -- enable this if you want the status toggle mode (TOGGLE VIA INSERT) (THIS INCLUDE RP PURPOSE HUD like job,money,etc.) -config.statusplace = 'bottom-left' -- available option top-right,top-left,bottom-right,bottom-left,top-center,bottom-center +config.statusplace = 'bottom-right' -- available option top-right,top-left,bottom-right,bottom-left,top-center,bottom-center config.uidesign = 'circle' -- octagon (default), circle, square -config.QbcoreStatusDefault = true -- if true will use metadatas as default you can stop renzu_status +config.QbcoreStatusDefault = false -- if true will use metadatas as default you can stop renzu_status --CHANGE ACCORDING TO YOUR STATUS ESX STATUS OR ANY STATUS MOD --STATUS ( disabled v2 if you want the optimize version ( FETCH ONLY The Player Status if Toggled ) else v2 is running loop default of 1sec) @@ -70,20 +70,20 @@ config.status_animation = { -- status = the status name -- OTHER OPTION ARE ICON CUSTOMIZATION for Colors, Fontawsome etc.. config.statusordering = { -- SET enable = false to disable the status (the status must be registered from your esx_status) i highly suggest to use my standalone_status (https://github.com/renzuzu/renzu_status) so you wont have to edit the special events and exports needed for the status System! - [0] = {type = 1, enable = true, status = 'health', hideifmax = false, custom = false, value = 100, notify_lessthan = false, notify_message = 'i am very hungry', notify_value = 20, display = 'none', offset = '275', i_id_1_color = 'rgb(251, 29, 9)',bg = 'rgb(11, 39, 63)', fa = 'fas fa-heartbeat', i_id_2_color = 'rgba(251, 29, 9, 0.3)'}, - [1] = {type = 1, enable = true, status = 'armor', hideifmax = true, custom = false, value = 0, notify_lessthan = false, notify_message = 'i am very hungry', notify_value = 20, display = 'none', offset = '275', i_id_1_color = 'rgb(1, 103, 255)', bg = 'rgb(11, 39, 63)',fa = 'far fa-shield-alt', i_id_2_color = 'rgb(0, 41, 129)'}, - [2] = {type = 1, enable = true, status = 'hunger', hideifmax = false, custom = true, value = 0, startvalue = 1000000, statusremove = 100, notify_lessthan = false, notify_message = 'i am very hungry', notify_value = 20, display = 'block', offset = '275', i_id_1_color = 'rgb(221, 144, 0)',bg = 'rgb(11, 39, 63)', fa = 'fad fa-cheeseburger', i_id_2_color = 'rgb(114, 68, 0)'}, - [3] = {type = 1, enable = true, status = 'thirst', hideifmax = false, custom = true, value = 0, startvalue = 1000000, statusremove = 100, notify_lessthan = false, notify_message = 'i am very thirsty', notify_value = 20, display = 'block', offset = '275', i_id_1_color = 'rgb(36, 113, 255)',bg = 'rgb(11, 39, 63)', fa = 'fad fa-glass', i_id_2_color = 'rgb(0, 11, 112)'}, - [4] = {type = 1, enable = true, status = 'stress', hideifmax = false, min_val_hide = 50, custom = true, value = 0, startvalue = 0, statusremove = 0, notify_lessthan = true, notify_message = 'i see some dragons', notify_value = 80, display = 'block', offset = '275', i_id_1_color = 'rgb(255, 16, 68)',bg = 'rgb(11, 39, 63)', fa = 'fad fa-head-side-brain', i_id_2_color = 'rgba(35, 255, 101, 0.84)'}, - [5] = {type = 1, enable = true, status = 'stamina', hideifmax = true, min_val_hide = 100, custom = false, value = 0, notify_lessthan = false, notify_message = 'running makes me thirsty', notify_value = 20, display = 'block', offset = '275', i_id_1_color = 'rgb(16, 255, 136)',bg = 'rgb(11, 39, 63)', fa = 'fad fa-running', i_id_2_color = 'rgba(0, 119, 57, 0.94)'}, - [6] = {type = 1, enable = true, status = 'oxygen', hideifmax = true, min_val_hide = 100, custom = false, value = 0, notify_lessthan = false, notify_message = 'my oxygen is almost gone', notify_value = 20, display = 'block', offset = '275', i_id_1_color = 'rgb(15, 227, 255)',bg = 'rgb(11, 39, 63)', fa = 'fad fa-lungs', i_id_2_color = 'rgba(8, 76, 85, 0.78)'}, - [7] = {type = 1, enable = true, status = 'energy', hideifmax = true, min_val_hide = 50, custom = true, value = 0, startvalue = 1000000, statusremove = 100, notify_lessthan = false, notify_message = 'i am very tired', notify_value = 20, display = 'block', offset = '275', i_id_1_color = 'rgb(233, 233, 233)',bg = 'rgb(11, 39, 63)', fa = 'fas fa-snooze', i_id_2_color = 'color:rgb(243, 57, 0)'}, - [8] = {type = 1, enable = true, status = 'voip', hideifmax = false, custom = false, value = 0, notify_lessthan = false, notify_message = 'silent mode', notify_value = 0, display = 'block', offset = '275', i_id_1_color = 'rgb(251, 29, 9)',bg = 'rgb(11, 39, 63)', fa = 'fas fa-microphone', i_id_2_color = 'rgba(251, 29, 9, 0.3)'}, + [0] = {type = 1, enable = true, status = 'health', hideifmax = false, custom = false, value = 100, notify_lessthan = false, notify_message = 'i am very hungry', notify_value = 20, display = 'none', offset = '275', i_id_1_color = 'rgb(101, 255, 131)',bg = 'rgb(57,59,60)', fa = 'fas fa-heartbeat', i_id_2_color = 'rgba(251, 29, 9, 0.3)'}, + [1] = {type = 1, enable = true, status = 'armor', hideifmax = true, custom = false, value = 0, notify_lessthan = false, notify_message = 'i am very hungry', notify_value = 20, display = 'none', offset = '275', i_id_1_color = 'rgb(1, 103, 255)', bg = 'rgb(57,59,60)',fa = 'far fa-shield-alt', i_id_2_color = 'rgb(0, 41, 129)'}, + [2] = {type = 1, enable = true, status = 'hunger', hideifmax = false, custom = true, value = 0, startvalue = 1000000, statusremove = 100, notify_lessthan = false, notify_message = 'i am very hungry', notify_value = 20, display = 'block', offset = '275', i_id_1_color = 'rgb(255, 155, 39)',bg = 'rgb(57,59,60)', fa = 'fas fa-cheeseburger', i_id_2_color = 'rgb(114, 68, 0)'}, + [3] = {type = 1, enable = true, status = 'thirst', hideifmax = false, custom = true, value = 0, startvalue = 1000000, statusremove = 100, notify_lessthan = false, notify_message = 'i am very thirsty', notify_value = 20, display = 'block', offset = '275', i_id_1_color = 'rgb(36, 113, 255)',bg = 'rgb(57,59,60)', fa = 'fad fa-glass', i_id_2_color = 'rgb(0, 11, 112)'}, + [4] = {type = 1, enable = false, status = 'stress', hideifmax = false, min_val_hide = 50, custom = true, value = 0, startvalue = 0, statusremove = 0, notify_lessthan = true, notify_message = 'i see some dragons', notify_value = 80, display = 'block', offset = '275', i_id_1_color = 'rgb(255, 16, 68)',bg = 'rgb(57,59,60)', fa = 'fad fa-head-side-brain', i_id_2_color = 'rgba(35, 255, 101, 0.84)'}, + [5] = {type = 1, enable = true, status = 'stamina', hideifmax = true, min_val_hide = 100, custom = false, value = 0, notify_lessthan = false, notify_message = 'running makes me thirsty', notify_value = 20, display = 'block', offset = '275', i_id_1_color = 'rgb(16, 255, 136)',bg = 'rgb(57,59,60)', fa = 'fad fa-running', i_id_2_color = 'rgba(0, 119, 57, 0.94)'}, + [6] = {type = 1, enable = true, status = 'oxygen', hideifmax = true, min_val_hide = 100, custom = false, value = 0, notify_lessthan = false, notify_message = 'my oxygen is almost gone', notify_value = 20, display = 'block', offset = '275', i_id_1_color = 'rgb(15, 227, 255)',bg = 'rgb(57,59,60)', fa = 'fad fa-lungs', i_id_2_color = 'rgba(8, 76, 85, 0.78)'}, + [7] = {type = 1, enable = true, status = 'energy', hideifmax = true, min_val_hide = 50, custom = true, value = 0, startvalue = 1000000, statusremove = 100, notify_lessthan = false, notify_message = 'i am very tired', notify_value = 20, display = 'block', offset = '275', i_id_1_color = 'rgb(233, 233, 233)',bg = 'rgb(57,59,60)', fa = 'fas fa-snooze', i_id_2_color = 'color:rgb(243, 57, 0)'}, + [8] = {type = 1, enable = true, status = 'voip', hideifmax = false, custom = false, value = 0, notify_lessthan = false, notify_message = 'silent mode', notify_value = 0, display = 'block', offset = '275', i_id_1_color = 'rgb(255, 255, 255)',bg = 'rgb(57,59,60)', fa = 'fas fa-microphone', i_id_2_color = 'rgba(251, 29, 9, 0.3)'}, --SAMPLE ONLY [9] = { type = 1, -- 1 = circle progress or 0 = flat progress bar - enable = true, -- enable or disable status + enable = false, -- enable or disable status status = 'poop', -- status name from esx_status or renzu_status hideifmax = false, -- hide the status if its max (stress and armor is inverted) min_val_hide = 50, -- works only if hideifmax == true (show/hide the status if value is met) @@ -97,13 +97,13 @@ config.statusordering = { -- SET enable = false to disable the status (the statu display = 'block', -- dont change offset = '275', -- default offset fa = 'fas fa-poo', -- font awsome - i_id_1_color = 'rgb(124, 119, 56)', -- progress color + i_id_1_color = 'rgb(255, 199, 102)', -- progress color i_id_2_color = 'rgba(251, 29, 9, 0.3)', -- use if icons type - bg = 'rgba(11, 39, 63, 0.707)', + bg = 'rgb(57,59,60)', }, [10] = { type = 1, - enable = true, + enable = false, status = 'pee', hideifmax = false, min_val_hide = 50, @@ -117,13 +117,13 @@ config.statusordering = { -- SET enable = false to disable the status (the statu display = 'block', offset = '275', fa = 'fas fa-restroom', -- font awsome - i_id_1_color = 'gold', -- progress color + i_id_1_color = 'rgb(255, 245, 112)', -- progress color i_id_2_color = 'rgba(251, 29, 9, 0.3)', -- bg color - bg = 'rgba(11, 39, 63, 0.707)', + bg = 'rgb(57,59,60)', }, [11] = { type = 1, - enable = true, + enable = false, status = 'hygiene', hideifmax = false, min_val_hide = 50, @@ -137,9 +137,9 @@ config.statusordering = { -- SET enable = false to disable the status (the statu display = 'block', offset = '275', fa = 'fad fa-shower', -- font awsome - i_id_1_color = 'skyblue', -- progress color + i_id_1_color = 'rgb(102, 196, 255)', -- progress color i_id_2_color = 'rgba(251, 29, 9, 0.3)', -- bg color - bg = 'rgba(11, 39, 63, 0.707)', + bg = 'rgb(57,59,60)', }, } diff --git a/renzu_hud/ui/index.html b/renzu_hud/ui/index.html index cd6098f3..e069fdff 100644 --- a/renzu_hud/ui/index.html +++ b/renzu_hud/ui/index.html @@ -50,7 +50,7 @@
- +
diff --git a/renzu_hud/ui/js/demo.js b/renzu_hud/ui/js/demo.js index 00253ff6..f2f3191c 100644 --- a/renzu_hud/ui/js/demo.js +++ b/renzu_hud/ui/js/demo.js @@ -275,7 +275,7 @@ function setStatus(t) { document.getElementById(table[i].status+'blink').style.setProperty("-webkit-filter", "drop-shadow(5px -1px 5px rgba(255, 5, 5, 1.0)"); } } else if (document.getElementById(table[i].status+'blink')) { - document.getElementById(table[i].status+'blink').style.color = "rgba(151, 147, 147, 0.623)"; + document.getElementById(table[i].status+'blink').style.color = "rgb(177 177 177 / 13%)"; document.getElementById(table[i].status+'blink').style.setProperty("-webkit-filter", "drop-shadow(15px -1px 22px rgba(255, 5, 5, 0.0)"); } if (setting['status'] && setting['status'][table[i].status] !== undefined && setting['status'][table[i].status].hideifmax && setting['status'][table[i].status].type == 1 && document.getElementById(table[i].status+'div')) { @@ -284,6 +284,7 @@ function setStatus(t) { document.getElementById(table[i].status+'div').style.display = 'none' } else if (table[i].type == 1 && document.getElementById(table[i].status+'div')) { document.getElementById(table[i].status+'div').style.display = 'block' + //console.log(table[i].status,table[i].value) if (table[i].status == 'armor' && statusui !== 'simple' || table[i].status == 'armor' && statusui == 'simple' && table[i].value == 0) { document.getElementById(table[i].status+'div').style.display = 'none' } else if (table[i].status == 'armor' && statusui == 'simple' && table[i].value > 0) { @@ -509,7 +510,7 @@ function setShow(table) { if (table['bool']) { invehicle = true $("#"+carui+"").animate({ - opacity: "1" + opacity: "0.65" },400); setHeadlights(0) if (carui == 'modern') { @@ -852,7 +853,7 @@ function setMode(value,c) { document.getElementById("modediv").style.fontSize = '0.5vw'; } document.getElementById(""+carui+"").style.display = ''+carui+''; - document.getElementById(""+carui+"").style.opacity = '1.0'; + document.getElementById(""+carui+"").style.opacity = '0.65'; } function setDifferential(value) { @@ -1808,45 +1809,45 @@ values="1.000 0.000 0.000 0.000 0.000 - - + + - - + + - - + + - - + + - - + + - - + + - - + + @@ -1855,8 +1856,8 @@ values="1.000 0.000 0.000 0.000 0.000 - - + + @@ -1980,38 +1981,38 @@ values="1.000 0.000 0.000 0.000 0.000 - - + + - - + + - - + + - - + + - - + + @@ -2208,7 +2209,7 @@ function setCompass(bool) { } var logostring = `` -var voipstring = ` +var voipstring = ` ` var uibarstring = `
@@ -2541,61 +2542,61 @@ function setKeyless(table) { var clothes = `
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - + @@ -2612,7 +2613,7 @@ function setKeyless(table) {
  • - +
    • ` @@ -3303,16 +3304,16 @@ function setKeyless(table) { } if (setting['statusver'] == 'icons') { if (appendto) { - $("#statusv3").append(' '); + $("#statusv3").append(' '); } else { - $("#statusv3").prepend(' '); + $("#statusv3").prepend(' '); } } else { if (appendto) { float = 'right' - $("#statusv3").append('
    '); + $("#statusv3").append('
    '); } else { - $("#statusv3").prepend('
    '); + $("#statusv3").prepend('
    '); } } statusbars[statuses[i].status] = false