Game's UI changes

README.md

@@ -4,8 +4,8 @@ Merged set of MelonLoader mods for ChilloutVR.
 | Full name | Short name | Latest version | Available in [CVRMA](https://github.com/knah/CVRMelonAssistant) | Current Status | Notes |
 |-----------|------------|----------------|-----------------------------------------------------------------|----------------|-------|
 | Avatar Change Info | ml_aci | 1.0.1 | Yes | Working |
-| Avatar Motion Tweaker | ml_amt | 1.0.2 | Pending approval | Working |
+| Avatar Motion Tweaker | ml_amt | 1.0.3 | Pending approval | Working |
 | Desktop Reticle Switch | ml_drs | 1.0.0 | Yes | Working |
-| Four Point Tracking | ml_fpt | 1.0.1 | Yes | Working |
+| Four Point Tracking | ml_fpt | 1.0.2 | Pending approval | Working |
-| Leap Motion Extension | ml_lme | 1.1.4 | Pending approval | Working |
+| Leap Motion Extension | ml_lme | 1.1.5 | Pending approval | Working |
-| Server Connection Info | ml_sci | 1.0.1 | Pending approval | Working |
+| Server Connection Info | ml_sci | 1.0.1 | Yes | Working |

ml_amt/Properties/AssemblyInfo.cs

@@ -1,10 +1,10 @@
 using System.Reflection;
 
 [assembly: AssemblyTitle("AvatarMotionTweaker")]
-[assembly: AssemblyVersion("1.0.2")]
+[assembly: AssemblyVersion("1.0.3")]
-[assembly: AssemblyFileVersion("1.0.2")]
+[assembly: AssemblyFileVersion("1.0.3")]
 
-[assembly: MelonLoader.MelonInfo(typeof(ml_amt.AvatarMotionTweaker), "AvatarMotionTweaker", "1.0.2", "SDraw", "https://github.com/SDraw/ml_mods_cvr")]
+[assembly: MelonLoader.MelonInfo(typeof(ml_amt.AvatarMotionTweaker), "AvatarMotionTweaker", "1.0.3", "SDraw", "https://github.com/SDraw/ml_mods_cvr")]
 [assembly: MelonLoader.MelonGame(null, "ChilloutVR")]
 [assembly: MelonLoader.MelonPlatform(MelonLoader.MelonPlatformAttribute.CompatiblePlatforms.WINDOWS_X64)]
 [assembly: MelonLoader.MelonPlatformDomain(MelonLoader.MelonPlatformDomainAttribute.CompatibleDomains.MONO)]

ml_amt/resources/menu.js

@@ -21,19 +21,31 @@ function inp_slider_mod_amt(_obj, _callbackName) {
     this.dragActive = false;
     this.name = _obj.id;
     this.type = _obj.getAttribute('data-type');
-    this.caption = _obj.getAttribute('data-caption');
+    this.stepSize = _obj.getAttribute('data-stepSize') || 0;
+    this.format = _obj.getAttribute('data-format') || '{value}';
 
     var self = this;
 
+    if (this.stepSize != 0)
+        this.value = Math.round(this.value / this.stepSize) * this.stepSize;
+    else
+        this.value = Math.round(this.value);
+
+    this.valueLabelBackground = document.createElement('div');
+    this.valueLabelBackground.className = 'valueLabel background';
+    this.valueLabelBackground.innerHTML = this.format.replace('{value}', this.value);
+    this.obj.appendChild(this.valueLabelBackground);
+
     this.valueBar = document.createElement('div');
     this.valueBar.className = 'valueBar';
     this.valueBar.setAttribute('style', 'width: ' + (((this.value - this.minValue) / (this.maxValue - this.minValue)) * 100) + '%;');
     this.obj.appendChild(this.valueBar);
 
-    this.valueLabel = document.createElement('div');
+    this.valueLabelForeground = document.createElement('div');
-    this.valueLabel.className = 'valueLabel';
+    this.valueLabelForeground.className = 'valueLabel foreground';
-    this.valueLabel.innerHTML = this.caption + Math.round(this.value);
+    this.valueLabelForeground.innerHTML = this.format.replace('{value}', this.value);
-    this.obj.appendChild(this.valueLabel);
+    this.valueLabelForeground.setAttribute('style', 'width: ' + (1.0 / ((this.value - this.minValue) / (this.maxValue - this.minValue)) * 100) + '%;');
+    this.valueBar.appendChild(this.valueLabelForeground);
 
     this.mouseDown = function (_e) {
         self.dragActive = true;
@@ -49,10 +61,17 @@ function inp_slider_mod_amt(_obj, _callbackName) {
             var value = self.percent;
             value *= (self.maxValue - self.minValue);
             value += self.minValue;
-            self.value = Math.round(value);
+            if (self.stepSize != 0) {
+                value = Math.round(value / self.stepSize);
+                self.value = value * self.stepSize;
+                self.percent = (self.value - self.minValue) / (self.maxValue - self.minValue);
+            }
+            else
+                self.value = Math.round(value);
 
             self.valueBar.setAttribute('style', 'width: ' + (self.percent * 100) + '%;');
-            self.valueLabel.innerHTML = self.caption + self.value;
+            self.valueLabelForeground.setAttribute('style', 'width: ' + (1.0 / self.percent * 100) + '%;');
+            self.valueLabelBackground.innerHTML = self.valueLabelForeground.innerHTML = self.format.replace('{value}', self.value);
 
             engine.call(self.callbackName, self.name, "" + self.value);
             self.displayImperial();
@@ -73,10 +92,14 @@ function inp_slider_mod_amt(_obj, _callbackName) {
     }
 
     this.updateValue = function (value) {
-        self.value = Math.round(value);
+        if (self.stepSize != 0)
+            self.value = Math.round(value * self.stepSize) / self.stepSize;
+        else
+            self.value = Math.round(value);
         self.percent = (self.value - self.minValue) / (self.maxValue - self.minValue);
         self.valueBar.setAttribute('style', 'width: ' + (self.percent * 100) + '%;');
-        self.valueLabel.innerHTML = self.caption + self.value;
+        self.valueLabelForeground.setAttribute('style', 'width: ' + (1.0 / self.percent * 100) + '%;');
+        self.valueLabelBackground.innerHTML = self.valueLabelForeground.innerHTML = self.format.replace('{value}', self.value);
         self.displayImperial();
     }
 
@@ -104,11 +127,15 @@ function inp_slider_mod_amt(_obj, _callbackName) {
 {
     let l_block = document.createElement('div');
     l_block.innerHTML = `
-        <h2>Avatar Motion Tweaker</h2>
+        <div class ="settings-subcategory">
+            <div class ="subcategory-name">Avatar Motion Tweaker</div>
+            <div class ="subcategory-description"></div>
+        </div>
+
         <div class ="row-wrapper">
             <div class ="option-caption">Legs locomotion upright limit: </div>
             <div class ="option-input">
-                <div id="CrouchLimit" class ="inp_slider" data-min="0" data-max="100" data-current="65"></div>
+                <div id="CrouchLimit" class ="inp_slider no-scroll" data-min="0" data-max="100" data-current="65"></div>
             </div>
         </div>
     `;

ml_fpt/Main.cs

@@ -71,6 +71,9 @@ namespace ml_fpt
                     PlayerSetup.Instance._trackerManager.trackers[m_hipsTrackerIndex].ShowLine(false);
                     CVR_InteractableManager.enableInteractions = true;
 
+                    if(PlayerSetup.Instance._avatar.GetComponent<ABI.CCK.Components.CVRAvatar>().avatarUsesAdvancedSettings)
+                        PlayerSetup.Instance.LoadCurrentAvatarSettingsDefault();
+
                     Reset();
 
                     ShowHudNotification("Calibration completed");

ml_fpt/Properties/AssemblyInfo.cs

@@ -1,10 +1,10 @@
 using System.Reflection;
 
 [assembly: AssemblyTitle("FourPointTracking")]
-[assembly: AssemblyVersion("1.0.1")]
+[assembly: AssemblyVersion("1.0.2")]
-[assembly: AssemblyFileVersion("1.0.1")]
+[assembly: AssemblyFileVersion("1.0.2")]
 
-[assembly: MelonLoader.MelonInfo(typeof(ml_fpt.FourPointTracking), "FourPointTracking", "1.0.1", "SDraw", "https://github.com/SDraw/ml_mods_cvr")]
+[assembly: MelonLoader.MelonInfo(typeof(ml_fpt.FourPointTracking), "FourPointTracking", "1.0.2", "SDraw", "https://github.com/SDraw/ml_mods_cvr")]
 [assembly: MelonLoader.MelonGame(null, "ChilloutVR")]
 [assembly: MelonLoader.MelonPlatform(MelonLoader.MelonPlatformAttribute.CompatiblePlatforms.WINDOWS_X64)]
 [assembly: MelonLoader.MelonPlatformDomain(MelonLoader.MelonPlatformDomainAttribute.CompatibleDomains.MONO)]

ml_fpt/Utils.cs

@@ -1,13 +0,0 @@
-using UnityEngine;
-
-namespace ml_fpt
-{
-    static class Utils
-    {
-        // Extensions
-        public static Matrix4x4 GetMatrix(this Transform p_transform, bool p_pos = true, bool p_rot = true, bool p_scl = false)
-        {
-            return Matrix4x4.TRS(p_pos ? p_transform.position : Vector3.zero, p_rot ? p_transform.rotation : Quaternion.identity, p_scl ? p_transform.localScale : Vector3.one);
-        }
-    }
-}

ml_fpt/ml_fpt.csproj

@@ -72,11 +72,6 @@
     <Reference Include="UnityEngine.CoreModule">
       <Private>False</Private>
     </Reference>
-    <Reference Include="UnityEngine.InputLegacyModule, Version=0.0.0.0, Culture=neutral, processorArchitecture=MSIL">
-      <SpecificVersion>False</SpecificVersion>
-      <HintPath>C:\Games\Steam\common\ChilloutVR\ChilloutVR_Data\Managed\UnityEngine.InputLegacyModule.dll</HintPath>
-      <Private>False</Private>
-    </Reference>
   </ItemGroup>
   <ItemGroup>
     <Compile Include="Main.cs" />

ml_fpt/resources/menu.js

@@ -1,8 +1,12 @@
 {
-    var l_block = document.createElement('div');
+    let l_block = document.createElement('div');
     l_block.innerHTML = `
-        <h2>4-Point Tracking</h2>
+        <div class ="settings-subcategory">
-        <div class ="action-btn" onclick="engine.trigger('MelonMod_FPT_Action_Calibrate');"><img src="gfx/recalibrate.svg">Calibrate</div>
+            <div class ="subcategory-name">4-Point Tracking</div>
+            <div class ="subcategory-description"></div>
+        </div>
+
+        <div class ="action-btn button" onclick="engine.trigger('MelonMod_FPT_Action_Calibrate');"><img src="gfx/recalibrate.svg">Calibrate</div>
     `;
     document.getElementById('settings-implementation').appendChild(l_block);
 }

ml_lme/Properties/AssemblyInfo.cs

@@ -1,10 +1,10 @@
 using System.Reflection;
 
 [assembly: AssemblyTitle("LeapMotionExtension")]
-[assembly: AssemblyVersion("1.1.4")]
+[assembly: AssemblyVersion("1.1.5")]
-[assembly: AssemblyFileVersion("1.1.4")]
+[assembly: AssemblyFileVersion("1.1.5")]
 
-[assembly: MelonLoader.MelonInfo(typeof(ml_lme.LeapMotionExtension), "LeapMotionExtension", "1.1.4", "SDraw", "https://github.com/SDraw/ml_mods_cvr")]
+[assembly: MelonLoader.MelonInfo(typeof(ml_lme.LeapMotionExtension), "LeapMotionExtension", "1.1.5", "SDraw", "https://github.com/SDraw/ml_mods_cvr")]
 [assembly: MelonLoader.MelonGame(null, "ChilloutVR")]
 [assembly: MelonLoader.MelonPlatform(MelonLoader.MelonPlatformAttribute.CompatiblePlatforms.WINDOWS_X64)]
 [assembly: MelonLoader.MelonPlatformDomain(MelonLoader.MelonPlatformDomainAttribute.CompatibleDomains.MONO)]

ml_lme/resources/menu.js

@@ -68,19 +68,31 @@ function inp_slider_mod_lme(_obj, _callbackName) {
     this.dragActive = false;
     this.name = _obj.id;
     this.type = _obj.getAttribute('data-type');
-    this.caption = _obj.getAttribute('data-caption');
+    this.stepSize = _obj.getAttribute('data-stepSize') || 0;
+    this.format = _obj.getAttribute('data-format') || '{value}';
 
     var self = this;
 
+    if (this.stepSize != 0)
+        this.value = Math.round(this.value / this.stepSize) * this.stepSize;
+    else
+        this.value = Math.round(this.value);
+
+    this.valueLabelBackground = document.createElement('div');
+    this.valueLabelBackground.className = 'valueLabel background';
+    this.valueLabelBackground.innerHTML = this.format.replace('{value}', this.value);
+    this.obj.appendChild(this.valueLabelBackground);
+
     this.valueBar = document.createElement('div');
     this.valueBar.className = 'valueBar';
     this.valueBar.setAttribute('style', 'width: ' + (((this.value - this.minValue) / (this.maxValue - this.minValue)) * 100) + '%;');
     this.obj.appendChild(this.valueBar);
 
-    this.valueLabel = document.createElement('div');
+    this.valueLabelForeground = document.createElement('div');
-    this.valueLabel.className = 'valueLabel';
+    this.valueLabelForeground.className = 'valueLabel foreground';
-    this.valueLabel.innerHTML = this.caption + Math.round(this.value);
+    this.valueLabelForeground.innerHTML = this.format.replace('{value}', this.value);
-    this.obj.appendChild(this.valueLabel);
+    this.valueLabelForeground.setAttribute('style', 'width: ' + (1.0 / ((this.value - this.minValue) / (this.maxValue - this.minValue)) * 100) + '%;');
+    this.valueBar.appendChild(this.valueLabelForeground);
 
     this.mouseDown = function (_e) {
         self.dragActive = true;
@@ -96,10 +108,17 @@ function inp_slider_mod_lme(_obj, _callbackName) {
             var value = self.percent;
             value *= (self.maxValue - self.minValue);
             value += self.minValue;
-            self.value = Math.round(value);
+            if (self.stepSize != 0) {
+                value = Math.round(value / self.stepSize);
+                self.value = value * self.stepSize;
+                self.percent = (self.value - self.minValue) / (self.maxValue - self.minValue);
+            }
+            else
+                self.value = Math.round(value);
 
             self.valueBar.setAttribute('style', 'width: ' + (self.percent * 100) + '%;');
-            self.valueLabel.innerHTML = self.caption + self.value;
+            self.valueLabelForeground.setAttribute('style', 'width: ' + (1.0 / self.percent * 100) + '%;');
+            self.valueLabelBackground.innerHTML = self.valueLabelForeground.innerHTML = self.format.replace('{value}', self.value);
 
             engine.call(self.callbackName, self.name, "" + self.value);
             self.displayImperial();
@@ -120,10 +139,14 @@ function inp_slider_mod_lme(_obj, _callbackName) {
     }
 
     this.updateValue = function (value) {
-        self.value = Math.round(value);
+        if (self.stepSize != 0)
+            self.value = Math.round(value * self.stepSize) / self.stepSize;
+        else
+            self.value = Math.round(value);
         self.percent = (self.value - self.minValue) / (self.maxValue - self.minValue);
         self.valueBar.setAttribute('style', 'width: ' + (self.percent * 100) + '%;');
-        self.valueLabel.innerHTML = self.caption + self.value;
+        self.valueLabelForeground.setAttribute('style', 'width: ' + (1.0 / self.percent * 100) + '%;');
+        self.valueLabelBackground.innerHTML = self.valueLabelForeground.innerHTML = self.format.replace('{value}', self.value);
         self.displayImperial();
     }
 
@@ -252,88 +275,92 @@ function inp_dropdown_mod_lme(_obj, _callbackName) {
 {
     let l_block = document.createElement('div');
     l_block.innerHTML = `
-        <h2>Leap Motion tracking</h2>
+        <div class ="settings-subcategory">
+            <div class ="subcategory-name">Leap Motion tracking</div>
+            <div class ="subcategory-description"></div>
+        </div>
+
         <div class ="row-wrapper">
             <div class ="option-caption">Enable tracking: </div>
             <div class ="option-input">
-                <div id="Enabled" class ="inp_toggle" data-current="false"></div>
+                <div id="Enabled" class ="inp_toggle no-scroll" data-current="false"></div>
             </div>
         </div>
 
         <div class ="row-wrapper">
             <div class ="option-caption">Tracking mode: </div>
             <div class ="option-input">
-                <div id="Mode" class ="inp_dropdown" data-options="0:Screentop,1:Desktop,2:HMD" data-current="1"></div>
+                <div id="Mode" class ="inp_dropdown no-scroll" data-options="0:Screentop,1:Desktop,2:HMD" data-current="1"></div>
             </div>
         </div>
 
         <div class ="row-wrapper">
             <div class ="option-caption">Desktop offset X: </div>
             <div class ="option-input">
-                <div id="DesktopX" class ="inp_slider" data-min="-100" data-max="100" data-current="0"></div>
+                <div id="DesktopX" class ="inp_slider no-scroll" data-min="-100" data-max="100" data-current="0"></div>
             </div>
         </div>
 
         <div class ="row-wrapper">
             <div class ="option-caption">Desktop offset Y: </div>
             <div class ="option-input">
-                <div id="DesktopY" class ="inp_slider" data-min="-100" data-max="100" data-current="-45"></div>
+                <div id="DesktopY" class ="inp_slider no-scroll" data-min="-100" data-max="100" data-current="-45"></div>
             </div>
         </div>
 
         <div class ="row-wrapper">
             <div class ="option-caption">Desktop offset Z: </div>
             <div class ="option-input">
-                <div id="DesktopZ" class ="inp_slider" data-min="-100" data-max="100" data-current="30"></div>
+                <div id="DesktopZ" class ="inp_slider no-scroll" data-min="-100" data-max="100" data-current="30"></div>
             </div>
         </div>
 
         <div class ="row-wrapper">
             <div class ="option-caption">Attach to head: </div>
             <div class ="option-input">
-                <div id="Head" class ="inp_toggle" data-current="false"></div>
+                <div id="Head" class ="inp_toggle no-scroll" data-current="false"></div>
             </div>
         </div>
 
         <div class ="row-wrapper">
             <div class ="option-caption">Head offset X: </div>
             <div class ="option-input">
-                <div id="HeadX" class ="inp_slider" data-min="-100" data-max="100" data-current="0"></div>
+                <div id="HeadX" class ="inp_slider no-scroll" data-min="-100" data-max="100" data-current="0"></div>
             </div>
         </div>
 
         <div class ="row-wrapper">
             <div class ="option-caption">Head offset Y: </div>
             <div class ="option-input">
-                <div id="HeadY" class ="inp_slider" data-min="-100" data-max="100" data-current="-30"></div>
+                <div id="HeadY" class ="inp_slider no-scroll" data-min="-100" data-max="100" data-current="-30"></div>
             </div>
         </div>
 
         <div class ="row-wrapper">
             <div class ="option-caption">Head offset Z: </div>
             <div class ="option-input">
-                <div id="HeadZ" class ="inp_slider" data-min="-100" data-max="100" data-current="15"></div>
+                <div id="HeadZ" class ="inp_slider no-scroll" data-min="-100" data-max="100" data-current="15"></div>
             </div>
         </div>
 
         <div class ="row-wrapper">
             <div class ="option-caption">Offset angle: </div>
             <div class ="option-input">
-                <div id="Angle" class ="inp_slider" data-min="-180" data-max="180" data-current="0"></div>
+                <div id="Angle" class ="inp_slider no-scroll" data-min="-180" data-max="180" data-current="0"></div>
             </div>
         </div>
 
         <div class ="row-wrapper">
             <div class ="option-caption">Fingers tracking only: </div>
             <div class ="option-input">
-                <div id="FingersOnly" class ="inp_toggle" data-current="false"></div>
+                <div id="FingersOnly" class ="inp_toggle no-scroll" data-current="false"></div>
             </div>
         </div>
 
         <div class ="row-wrapper">
             <div class ="option-caption">Model visibility: </div>
             <div class ="option-input">
-                <div id="Model" class ="inp_toggle" data-current="false"></div>
+                <div id="Model" class ="inp_toggle no-scroll" data-current="false"></div>
             </div>
         </div>
     `;