From 085fadb633f81c3005c48bd2640c8904eb664c92 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 13 Nov 2019 11:07:35 +0000 Subject: [PATCH] Updated UI, added custom font Font link: https://fontlibrary.org/en/font/segment7 --- nui/Segment7Standard.otf | Bin 0 -> 10464 bytes nui/radar.css | 48 +++++++++++++++++---------------------- nui/radar.html | 30 +++++++----------------- 3 files changed, 29 insertions(+), 49 deletions(-) create mode 100644 nui/Segment7Standard.otf diff --git a/nui/Segment7Standard.otf b/nui/Segment7Standard.otf new file mode 100644 index 0000000000000000000000000000000000000000..7429b0d7e62c0e7f33b0b8893bb343d4af50c8c2 GIT binary patch literal 10464 zcmdT~3wRS%+WyX@Y15<)?U@9Xtr!s%R4ze;6mcyDs%VvJ5m75p+LTu5W!sXLiv`7B zi{(;Lk$**L5d^$&6A(}k6crIg!F63&cHLD#>Wa#$lhR`MJ#%J~v|I#r|L6IWCpl-% z<$J&TcP5je!-fqdCru>_jZPhqIhbN8is+ITiO4xHEzPsxsXd%1=3hkTZ%j)YcGJC! zza516*D#-S-Jro~$|_|c(Zx$~eZzGbLo=6uv*}~ZUxDkY>oRXk9rS7XLCk-TYv0h! z9=%3w`o}TE0I!SIJ2kiaFp>pL`6&WYQ?C?~Lot`Gw_` z?RPu#LH|>%k1ouvEMYn+c0J~!i?R#-k2v4C8|zmRS$3Bcmz86jf&ZOoJ)$Q*2Zld6 zY*f4cKaj)nB}Qo1`l{*Sw#8@p$l@V|Z1~6*_EJN##^Z1(bt!98G`(W#p#- zK1I|`?~kQI{i+;uU8n@B#$()rUNQC+VP98ViTzVl)>k%JemPtb>9b-emomk_cH1I5>@nGECDfWAy4KHYlkKp81 zj0qi;>RJ+Xi@>wcQ9txE(S|kF7kenPytE*veB1<2nLpq!>Q?3-Tj(z;_jD;4H@?hM zQe03}-qn+nJuYYbxa{)cQcrF{S;@HU37)*{9RC%byn;%9Znuhp-12-+c2TY;uhj4F z?(uZV>FOEi&jn%6jYS1x^UFQGdU|_fBE2BTUsUGL^^7md^_O}whopOkmiUW2X~lrl zCv*IsfVaCBYj5?J`AY*>E8?=BCsQ)kSFqeh3Nq)!RJmcIY^WethzGv1OVKkmDB4nJ zLFld*G|&_6$#f$}`@;Tx@G-4Ng4ML*(y@L|ukJlPVZPAq+pSMGA?Rs291h@8n5aNE zs4y7~_m`Fx6c>5WZ7bS|@)&9e%Y|@5%*aoY5t02x6k#k0+1P_N3U6`U($a!&G`JGi z$a;!hG`L{M4i>DlQZ(|84Vm0d4vM3AWQ=x{K#9ajB^SA=J)J}6(s|T@eg}l}sUuwg zlnbd7T|}MfV!DJbMMQL^%jj~%Qa9+hhwl5m=t}tiRnTW&@=-Fhel_){Yv}iMEv3)^ zN~M7`hz7$_*U|NefEy4&>2wp_j5x@kTj1N7G>mSe;dDEVpgZVJx{I>tZW@UkKN@Bq zgNVw7dh_&{E1-MmUc`GLBA^&?^aow-<%qKYBDxY0KanQUWV(;4XbMfGx9DwT%pJ6w z{!IJnpY#vL!1$q^oL)1uHXd%56nt72#jjX4ww2eLq zjhdaHZZY%9Y}Xr|H|afkgLcxp^a1Un59xjSnEr&hJ+zPhN_&k}sB!vhgVE|9)FR}N zFXTjp!8KCg0yo3dSup86FkK}~^bpOY z$LT4kX&J4AiZ{b#J0a9wnCeTIn4& zXOq|iY&xrDPqJs&V)i0?nQdfS*><*zeZuy$FW6V?C_Ab=tGuARth_qDsGuiavhm8M zmu#+-O>fy;C7V97=_?zbY?5U&KsKqe87P}UvKcI!G`;akJg>y_N<6Q`^GZCg#Pdo# zuf+38Jg>y_N<6Q`^GZCg#Pdo#uf*#s8=r*rNm!qR^+{Ntg!M^SpM>>ESf7OTNm!qR z^+{Ntg!M^SpM>>Eykv=&Eb)>hUb4hXmUzh$FInOxOT1)>mn`v;C0??`OO|-a5-(Ze zB}=>k5^sQ^Hl_DA*WiZJ=tR0Ot!EoIBt^Xvr# z`Acj$TftVcRcti^ehpj8*0EREdbR<<|0;WpZDO0*>ud`W!5i#NwvD~T-e&Kx?M77@ zi>gwGsxl23y$0#%N%k%+M#ZS7`D_P!kM3hTQP4~2f7tsp8>#9UB&lanTb9!c^deH# zOQ;2ppgOEY1$dd(&<0e1S7<%`kv1ZUy^2i#I&DJTn2B7!6`A`@B(|sN31so@$l>p! zCheqJ^G_tn&zYW+z80%E) zYHLgMfar&#H%9*y(=X=Un3XYK+hT30wu!cS+XmZru_>{WV^_z%XOFk1+8?yP?Ks!b z$5H8c-myQ9;`+vA#pTCMirXIVjPDem7ynZH-<(~YcRCB43!Qu0v39<8BihYu_ih49 z=#Vfn;jx6RiI&9M66Yj-lGwtDC-L+7P@chW;kWWkK8)YShx6O{2!02@li$U&_}zRY zAH_%WY(9qP@LcZad3-F-=LP&8elH)#3waSQ<|X_Oyp)&maz361cm=QI6Zk|viBIPD z@hU!rPvtB4O1_G(<}dRG{uTch|C%4+-|%nwcl;>-H~*ghz<=Z#5AsHSj5qOSew_cr zTU1h+s;CwsT;UE54!WBM$2d`&C$pMkeoIqU)G`0D$v^p{oj>;qe4`zx)81OZ zgIE7Ju|X{f);G>_d+ciUs^izXFSI*@Lju~?iUk!rE4cdM{>E%~C%e}8t@|RobNXTJ zsfGf5uR2w`;E=nsUER`DsU34)Y*$xmaoSGM!K%zUt*K6%(coLa)jF|G9es&it-I8& zc4^w(XazyFXO-q~cd_R-pX2UoS4Uqaw&e$c7YDTZhID|R#l{tN+GdlhEm}%&IJo)f zCimrF>8W5(!I6;Yh#(4y)ejAM0XQX~eO|FcLUIV8OVspd?G5)8cD1CNUG1F~bO>&J zlG_L#C!B=Go=wvm2elGP?P74CYp%-R;xxM37SQ%Igw~y08lfmIX{agC>(oo_pJ=ZM zHKss~n%2M!B{&1$u;3F7mf$;kgrs9L(^Y`w@HR|Z_77yCbkO4(Knl#QEi4% zLR;Y)QdO!e#Gq8V>GW%))2rKNH;pxYNi2nW78&Z%K0XX9)gR2z5mSOC!Smd=W>qy+ zzJJa9#m{JKt$;gl#O<{=&D8e0hm5wWwqADC)jTl6eI+bb*!+RJw^a1HfVTPY*Z}k` zs0r>n9>Sbz)g$FfdzBWe?^m!t0n+aU(LFayFsqt!6=JG+&|3Gy_dj(1!}r@JHNACc z^OM?rR;SdusguvN9*uQ|YeMrMhBTiqkVCpp*Moj4>BdeW;anu5mP|WX$uPG<(%xzU z8749GO0ay?)Cl@gw=$}QC$%<@%S;G1gPv*Ou$dAKVy!*<^f@ddl)Kxdha-5Ay_hj0 zlNQD@>)Nms5li8Sk#1RM#7wo}jay7_d^|Gu&8*XwG+eu&USvQ&GGJ?gyO^p}3?jm) z!llCkTMdD?oy0aD8Z7KE?6A#H+h<`au!Qje(E zksQf-d`1ogb(kg>PP0BDoKP7nyBT_SO6fu-l=1*p_uNov6;c1KVSw)q0|cc3ME!@q z9zBVif?c7)Ur~8ldx0QkM)0ZpK%HYovU#d7*;r~6h1xcr1J8v3iwpq_#4ym7Q1Zc{ z==H-mJk2=RAB>o3Ugp1Wnipk4q`(u>yflfCScFj?ltxj9wT+Sa{ILkOzqj`I}G(u`cW|P3K}DxR{1Cba`75VjzMV z3KQ@%Fq9c$^vr-vu1yIgb9wACGN3NAJP}HXbw#Ozfb}4-lFWi*s7Pj>K_U7s(2w*R zk-<%`IbGg2<3&c<8Kg+_s3%Sx$f<^VZ3#(zdE`l2=R((+d6GWOVN)D;!}Ye#q-;2D z_1r3PCXTG8!QL|QT>YaZd^m1>G6?AIu`-?JRH-JyPt6?D`lN6MMp0R}z&$zxs0t=VJ9ix%xPkTTCpn2~l*ga)^3F~yLelmTr zja>5~*G?&yc>^;a@f+eQ%+6;KMamRc9D7fBJWB{|K>86kR$*R*pu$Oh&cfkhV#azn zDo0nluPN8Un`-IQ6yj67(N4eA7 zhoAOH7!gA9=Hw(L$7kGP^p+|A=YAMEVIDO?99WEl*i_?Z1^xKFK>RE++9)a4hv|n) zr!2l_7_lcnpK`!BkNh@wSidPTgJu2b9AZzNVfDm*cID*c3JC6Z)wrjxYP@Fs{29?5 z?Mjch*qS(dgMGn_k7muNJ$7zf+%dnS;j!8C8xP0D<0+j==ZHsi9q=sIhv%?W^eBGe z-l{)(`zxM|9;Id$&s=!m)(;QchO+zELu|I!JEiHKH?xOaa_Ke2vt{RExSbwj}Dz7g7-nga)|j>%0+pD5k8ajte3xF1$C z9pcwk&w5x0KWCb4PmOk=6n}PD{O8J+1fH`w%%6`OA+_ocZ{?F*Cmyqk{{x7>5{Zuu z{~YND>!#qX;CV|bzSHnl@XUQEzVEQybFoW28Mfoee@9}2($a^4hM*_@ zRUlq?OpK4s_~3s$=qY%ddm~!0uOs}Z?LINX?)8@zVV|HNc0}WU2l_bvdmvHU;~H4U z*Xb*I;JdSqENGtiX4C^Kh35(h#Y<2V^rifw6(h9snuWVWyKBX+Oub!Sb)opDmiYYI z7h3|2_R!y1=o>w>Sqk{09&D~YmWuyKbjN=h#C&+2T;1y1SRWn})W!cRTEE3;>d7db e(SE`z0)_wnD>Vf1-$4^vY5i(@-Fo(ftN#G(;k%~* literal 0 HcmV?d00001 diff --git a/nui/radar.css b/nui/radar.css index d3f8d13..a86e968 100644 --- a/nui/radar.css +++ b/nui/radar.css @@ -1,18 +1,17 @@ +/* Set all div elements to use the box-sizing property of border-box */ div { box-sizing: border-box; } +/* Here we set all of the main style properties for the main radar container */ #radar { transform: scale( 2 ); width: 550px; - height: 210px; + height: 200px; padding: 0; - /* Temp border and pos - border: 1px solid black;*/ - position: absolute; margin: auto; @@ -24,7 +23,8 @@ div { background-color: rgb(30, 33, 38); display: grid; - grid-template-columns: 50px repeat( 6, auto ); + grid-template-columns: 40px 160px auto; + column-gap: 5px; } #radar > div { border: 1px solid orange; @@ -35,7 +35,7 @@ div { display: grid; grid-template-rows: 50% 50%; } - #radar .modes div { + #radar .modes .modes_container { display: grid; grid-template-rows: repeat( 3, auto ); @@ -48,7 +48,7 @@ div { width: 100%; font-family: Verdana; - font-size: 12px; + font-size: 10px; text-align: center; @@ -58,25 +58,19 @@ div { } #radar .speeds { - + display: grid; + grid-template-rows: 50% 50%; } + #radar .speeds .speed_display { + display: flex; - #radar .dirs { - - } - - #radar .fast_modes { - - } - - #radar .fast_speeds { - - } - - #radar .fast_dirs { - - } - - #radar .patrol { - - } \ No newline at end of file + margin: 15px 0; + background-color: orange; + } + #radar .speeds .speed_display .speed_number { + /* width: 100%; + margin: 0; */ + margin: auto; + font-size: 50px; + text-align: center; + } \ No newline at end of file diff --git a/nui/radar.html b/nui/radar.html index 0d90a3e..5f8c585 100644 --- a/nui/radar.html +++ b/nui/radar.html @@ -7,13 +7,13 @@
-
+

SAME

OPP

XMIT

-
+

SAME

OPP

XMIT

@@ -21,27 +21,13 @@
+
+

000

+
-
- -
- -
- -
- -
- -
- -
- -
- -
- -
- +
+

000

+