New REM client: REM-Client 34f8df7, 64-bit (HUD ship status with soft edges - no stairs on ultrawide screens; REM settings: ship status ring or bars)

EXE/remui/hud.rml

@@ -41,18 +41,8 @@
         .core .pc { position: absolute; left: 242dp; top: 114dp; width: 136dp; text-align: center; font-weight: 600; font-size: 11dp; letter-spacing: 1dp; }
         .core .pc .s { color: #4fc6ee; margin-right: 8dp; }
         .core .pc .h { color: #e0484e; }
-        .sg2 { position: absolute; }
+        /* the segments as soft-edged geometry (<segarc>: centre, radius and size in dp from the panel's corner) */
-        .ring.sg2 { left: 304.75dp; top: 88.5dp; width: 10.5dp; height: 7dp; background-color: #4fc6ee26; }
+        .core segarc { display: block; position: absolute; left: 0; top: 0; width: 1dp; height: 1dp; }
-        .ring.sg2.lit { background-color: #4fc6ee; }
-        .hring.sg2 { left: 306dp; top: 90.5dp; width: 8dp; height: 3dp; background-color: #e0484e33; }
-        .hring.sg2.lit { background-color: #e0484e; }
-        .parc.sg2 { left: 305dp; top: 416dp; width: 10dp; height: 8dp; background-color: #f0943c26; }
-        .parc.sg2.lit { background-color: #f0943c; }
-        .tarc.sg2 { left: 305dp; top: 418dp; width: 10dp; height: 4dp; background-color: #dbe6f026; }
-        .tarc.sg2.lit { background-color: #dbe6f0; }
-        .tarc.low.sg2.lit { background-color: #ef6a5b; }
-        .sarc.sg2 { left: 305dp; top: 414dp; width: 10dp; height: 12dp; background-color: #5cc8f026; }
-        .sarc.sg2.lit { background-color: #5cc8f0; }
         .core .side { position: absolute; top: 106dp; width: 180dp; }
         .core .side.l { left: 50dp; text-align: right; }
         .core .side.r { left: 390dp; text-align: left; }
@@ -62,6 +52,16 @@
         .core .big .u { font-weight: 400; font-size: 12dp; color: #8fb3d0; margin-left: 4dp; }
         .core .pw { display: block; font-weight: 600; font-size: 13dp; color: #f0943c; }
         .core .pw .cap { color: #f0943c; }
+        /* the other ship status (REM settings: Ship status "bars"): thrust | shield / hull / power | speed, one panel */
+        .fp.coreb { left: 50%; margin-left: -240dp; bottom: 8dp; width: 480dp; height: 66dp; padding: 0 16dp; display: flex; flex-direction: row; align-items: center; }
+        .coreb .val { width: 76dp; text-align: center; font-weight: 600; font-size: 22dp; color: #e8f4ff; }
+        .coreb .val .u { font-weight: 400; font-size: 11dp; color: #8fb3d0; margin-left: 4dp; }
+        .coreb .cap { display: block; font-weight: 600; font-size: 9dp; letter-spacing: 1.5dp; color: #8fb3d0; }
+        .coreb .thrust.low { color: #ef6a5b; }
+        .coreb .sep { width: 1dp; height: 42dp; background-color: #2b6f9e; margin: 0 10dp; }
+        .bars { flex: 1; display: flex; flex-direction: column; justify-content: center; }
+        .brow { display: flex; flex-direction: row; align-items: center; height: 15dp; }
+        .brow .l { width: 52dp; font-weight: 600; font-size: 10dp; letter-spacing: 1.5dp; color: #b9d4ea; }
         .bar { position: relative; flex: 1; height: 8dp; }
         .chips { position: absolute; left: 0; top: 0; right: 0; height: 8dp; display: flex; flex-direction: row; }
         .sg { flex: 1; height: 8dp; margin-right: 2dp; }
@@ -161,16 +161,17 @@
 
     <!-- bottom centre -->
     <div class="grp g1" data-grp="1" data-style-transform="grp[1].tf" data-class-gone="!grp[1].shown && !editing" data-class-faded="!grp[1].shown && editing">
-    <div class="tag" data-if="editing" style="left: 50%; margin-left: -310dp; bottom: 184dp;"><span class="eye" data-action="eye" data-arg="1">{{ grp[1].shown ? 'Hide' : 'Show' }}</span>Ship status</div>
+    <div class="tag" data-if="editing &amp;&amp; core_ring" style="left: 50%; margin-left: -310dp; bottom: 184dp;"><span class="eye" data-action="eye" data-arg="1">{{ grp[1].shown ? 'Hide' : 'Show' }}</span>Ship status</div>
-    <div data-if="core || editing">
+    <div class="tag" data-if="editing &amp;&amp; !core_ring" style="left: 50%; margin-left: -240dp; bottom: 82dp;"><span class="eye" data-action="eye" data-arg="1">{{ grp[1].shown ? 'Hide' : 'Show' }}</span>Ship status</div>
+    <div data-if="(core || editing) &amp;&amp; core_ring">
         <div class="fp all core">
             <div class="disc"></div>
             <shipwire class="ship"/>
-            <div class="sg2 ring" data-for="i : seg32" data-class-lit="shield_n * 2 &gt; i" data-style-transform="'rotate(' + (i * 11.25 + 5.6) + 'deg) translateY(-60dp)'"></div>
+            <segarc cx="310" cy="92" r="60" w="10.5" h="7" n="32" a0="5.6" da="11.25" data-attr-lit="shield_n * 2" on="#4fc6ee" off="#4fc6ee26"/>
-            <div class="sg2 hring" data-for="i : seg32" data-class-lit="hull_n * 2 &gt; i" data-style-transform="'rotate(' + (i * 11.25 + 5.6) + 'deg) translateY(-48dp)'"></div>
+            <segarc cx="310" cy="92" r="48" w="8" h="3" n="32" a0="5.6" da="11.25" data-attr-lit="hull_n * 2" on="#e0484e" off="#e0484e33"/>
-            <div class="sg2 parc" data-for="i : seg16" data-class-lit="power_n &gt; i" data-style-transform="'rotate(' + (i * 2 - 42) + 'deg) translateY(-370dp)'"></div>
+            <segarc cx="310" cy="420" r="370" w="10" h="8" n="16" a0="-42" da="2" data-attr-lit="power_n" on="#f0943c" off="#f0943c26"/>
-            <div class="sg2 tarc" data-for="i : seg16" data-class-lit="thrust_n &gt; i" data-class-low="thrust_low" data-style-transform="'rotate(' + (i * 2 - 42) + 'deg) translateY(-384dp)'"></div>
+            <segarc cx="310" cy="420" r="384" w="10" h="4" n="16" a0="-42" da="2" data-attr-lit="thrust_n" data-attr-on="thrust_low ? '#ef6a5b' : '#dbe6f0'" off="#dbe6f026"/>
-            <div class="sg2 sarc" data-for="i : seg16" data-class-lit="speed_n &gt; i" data-style-transform="'rotate(' + (42 - i * 2) + 'deg) translateY(-372dp)'"></div>
+            <segarc cx="310" cy="420" r="372" w="10" h="12" n="16" a0="42" da="-2" data-attr-lit="speed_n" on="#5cc8f0" off="#5cc8f026"/>
             <div class="pc"><span class="s">{{ shield_t }}%</span><span class="h">{{ hull_t }}%</span></div>
             <div class="side l">
                 <span class="cap">THRUST</span><span class="big" data-class-low="thrust_low">{{ thrust }}</span>
@@ -181,6 +182,19 @@
             </div>
         </div>
     </div>
+    <div data-if="(core || editing) &amp;&amp; !core_ring">
+        <div class="fp all coreb">
+            <div class="val thrust" data-class-low="thrust_low"><span class="cap">THRUST</span>{{ thrust }}</div>
+            <div class="sep"></div>
+            <div class="bars">
+                <div class="brow power"><span class="l">POWER</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="power_n &gt; 0"></div><div class="sg" data-class-lit="power_n &gt; 1"></div><div class="sg" data-class-lit="power_n &gt; 2"></div><div class="sg" data-class-lit="power_n &gt; 3"></div><div class="sg" data-class-lit="power_n &gt; 4"></div><div class="sg" data-class-lit="power_n &gt; 5"></div><div class="sg" data-class-lit="power_n &gt; 6"></div><div class="sg" data-class-lit="power_n &gt; 7"></div><div class="sg" data-class-lit="power_n &gt; 8"></div><div class="sg" data-class-lit="power_n &gt; 9"></div><div class="sg" data-class-lit="power_n &gt; 10"></div><div class="sg" data-class-lit="power_n &gt; 11"></div><div class="sg" data-class-lit="power_n &gt; 12"></div><div class="sg" data-class-lit="power_n &gt; 13"></div><div class="sg" data-class-lit="power_n &gt; 14"></div><div class="sg" data-class-lit="power_n &gt; 15"></div></div></div></div>
+                <div class="brow shield"><span class="l">SHIELD</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="shield_n &gt; 0"></div><div class="sg" data-class-lit="shield_n &gt; 1"></div><div class="sg" data-class-lit="shield_n &gt; 2"></div><div class="sg" data-class-lit="shield_n &gt; 3"></div><div class="sg" data-class-lit="shield_n &gt; 4"></div><div class="sg" data-class-lit="shield_n &gt; 5"></div><div class="sg" data-class-lit="shield_n &gt; 6"></div><div class="sg" data-class-lit="shield_n &gt; 7"></div><div class="sg" data-class-lit="shield_n &gt; 8"></div><div class="sg" data-class-lit="shield_n &gt; 9"></div><div class="sg" data-class-lit="shield_n &gt; 10"></div><div class="sg" data-class-lit="shield_n &gt; 11"></div><div class="sg" data-class-lit="shield_n &gt; 12"></div><div class="sg" data-class-lit="shield_n &gt; 13"></div><div class="sg" data-class-lit="shield_n &gt; 14"></div><div class="sg" data-class-lit="shield_n &gt; 15"></div></div></div></div>
+                <div class="brow hull"><span class="l">HULL</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="hull_n &gt; 0"></div><div class="sg" data-class-lit="hull_n &gt; 1"></div><div class="sg" data-class-lit="hull_n &gt; 2"></div><div class="sg" data-class-lit="hull_n &gt; 3"></div><div class="sg" data-class-lit="hull_n &gt; 4"></div><div class="sg" data-class-lit="hull_n &gt; 5"></div><div class="sg" data-class-lit="hull_n &gt; 6"></div><div class="sg" data-class-lit="hull_n &gt; 7"></div><div class="sg" data-class-lit="hull_n &gt; 8"></div><div class="sg" data-class-lit="hull_n &gt; 9"></div><div class="sg" data-class-lit="hull_n &gt; 10"></div><div class="sg" data-class-lit="hull_n &gt; 11"></div><div class="sg" data-class-lit="hull_n &gt; 12"></div><div class="sg" data-class-lit="hull_n &gt; 13"></div><div class="sg" data-class-lit="hull_n &gt; 14"></div><div class="sg" data-class-lit="hull_n &gt; 15"></div></div></div></div>
+            </div>
+            <div class="sep"></div>
+            <div class="val speed"><span class="cap">SPEED</span>{{ speed }}<span class="u">m/s</span></div>
+        </div>
+    </div>
 
     </div>