Need help editing the UI config
It's been 2 days I've been trying my best to figure out how to move and relocate my Infopanels elsewhere but its very confusing and i can't understand even with the help of http://rust-cui.surge.sh/#!/editor. Can someone explain it to me please. I really need an assist for this plugin. 
That editor will not work with most plugins.
Then how?
I wanted to reply to this post with an example but cannot see how i can add screenshot by using "browse" function (?).
I have attached my edited config which you can load and see how it looks on your server, before you do just change the line that contains the
text (your server name) .
All you have to do is compare the original with this one and you can work out what to move, The great thing with this plugin is that you can change
settings and see the results as soon as you reload plugin and then make/unmake changes.
{
  "CompassDirections": {
    "e": "East",
    "n": "North",
    "ne": "NorthEast",
    "nw": "NorthWest",
    "s": "South",
    "se": "SouthEast",
    "sw": "SouthWest",
    "w": "West"
  },
  "Docks": {
    "BottomLeftDock": {
      "AnchorX": "Left",
      "AnchorY": "Bottom",
      "Available": true,
      "BackgroundColor": "0 0 0 0.4",
      "Height": 0.06,
      "Margin": "0.001 0.162 0.005 0.005",
      "Width": 0.18
    },
    "BottomRightDock": {
      "AnchorX": "MiddleCenter",
      "AnchorY": "Bottom",
      "Available": false,
      "BackgroundColor": "0 0 0 0",
      "Height": 0.03,
      "Margin": "0.02 0.55 0.12 0.02",
      "Width": 0.19
    },
    "TopLeftDock": {
      "AnchorX": "Left",
      "AnchorY": "Top",
      "Available": true,
      "BackgroundColor": "0 0 0 0.4",
      "Height": 0.05,
      "Margin": "0.045 0.200 0.006 0.006",
      "Width": 0.220
    },
    "TopRightDock": {
      "AnchorX": "Right",
      "AnchorY": "Top",
      "Available": true,
      "BackgroundColor": "0 0 0 0.4",
      "Height": 0.07,
      "Margin": "0.005 0.005 0.005 0.005",
      "Width": 0.35
    }
  },
  "Messages": [
     "Welcome to (your server name)    A great place to die !",
    "Type  /help for usefull information"
  ],
  "Panels": {
    "AirdropEvent": {
      "AnchorX": "Left",
      "AnchorY": "Bottom",
      "Autoload": true,
      "Available": true,
      "BackgroundColor": "0 0 0 0.4",
      "Dock": "TopLeftDock",
      "FadeOut": 0.0,
      "Height": 0.95,
      "Image": {
        "AnchorX": "Left",
        "AnchorY": "Bottom",
        "Available": true,
        "BackgroundColor": "0 0 0 0.4",
        "Height": 0.8,
        "Margin": "0 0.1 0.1 0.1",
        "Order": 1,
        "Url": "http://i.imgur.com/dble6vf.png",
        "Width": 0.8
      },
      "Margin": "0 0 0 0.01",
      "Order": 4,
      "PanelSettings": {
        "ActiveColor": "0 1 0 1",
        "InactiveColor": "1 1 1 0.1"
      },
      "Width": 0.1
    },
    "Balance": {
      "AnchorX": "Left",
      "AnchorY": "Bottom",
      "Autoload": false,
      "Available": false,
      "BackgroundColor": "0 0 0 0.4",
      "Dock": "BottomLeftDock",
      "FadeOut": 0.0,
      "Height": 0.95,
      "Image": {
        "AnchorX": "Left",
        "AnchorY": "Bottom",
        "Available": false,
        "BackgroundColor": "0 0 0 0.4",
        "Height": 0.8,
        "Margin": "0 0.01 0.1 0.01",
        "Order": 1,
        "Url": "http://i.imgur.com/HhL5TvU.png",
        "Width": 0.1
      },
      "Margin": "0 0 0 0.01",
      "Order": 7,
      "PanelSettings": {
        "RefreshRate(s)": "5"
      },
      "Text": {
        "Align": "MiddleCenter",
        "AnchorX": "Left",
        "AnchorY": "Bottom",
        "Available": false,
        "BackgroundColor": "0 0 0 0.4",
        "Content": "No Content",
        "FadeIn": 0.0,
        "FadeOut": 0.0,
        "FontColor": "1 1 1 1",
        "FontSize": 12,
        "Height": 1.0,
        "Margin": "0 0.02 0 0",
        "Order": 2,
        "Width": 0.848
      },
      "Width": 0.8
    },
    "Clock": {
      "AnchorX": "Left",
      "AnchorY": "Bottom",
      "Autoload": true,
      "Available": true,
      "BackgroundColor": "0 0 0 0.4",
      "Dock": "BottomLeftDock",
      "FadeOut": 0.0,
      "Height": 0.95,
      "Margin": "0 0 0 0.01",
      "Order": 1,
      "PanelSettings": {
        "ClockUpdateFrequency (seconds)": 4,
        "TimeFormat": "HH:mm"
      },
      "Text": {
        "Align": "MiddleCenter",
        "AnchorX": "Left",
        "AnchorY": "Bottom",
        "Available": false,
        "BackgroundColor": "0 0 0 0.4",
        "Content": "No Content",
        "FadeIn": 0.0,
        "FadeOut": 0.0,
        "FontColor": "1 1 0 1",
        "FontSize": 17,
        "Height": 1.05,
        "Margin": "0 0.01 0 0.01",
        "Order": 0,
        "Width": 1.0
      },
      "Width": 0.2
    },
    "Compass": { 
     "AnchorX": "Left",
      "AnchorY": "Bottom",
      "Autoload": true,
      "Available": true,
      "BackgroundColor": "0 0 0 0.4",
      "Dock": "TopLeftDock",
      "FadeOut": 0.0,
      "Height": 0.95,
      "Image": {
        "AnchorX": "Left",
        "AnchorY": "Bottom",
        "Available": true,
        "BackgroundColor": "0 0 0 0.4",
        "Height": 0.8,
        "Margin": "0 0.01 0.1 0.03",
        "Order": 1,
        "Url": "http://i.imgur.com/dG5nOOJ.png",
        "Width": 0.188
      },
      "Margin": "0 0.086 0 0.01",
      "Order": 8,
      "PanelSettings": {
        "RefreshRate(s)": "1",
        "TextOrAngle": "text"
      },
      "Text": {
        "Align": "MiddleCenter",
        "AnchorX": "Left",
        "AnchorY": "Bottom",
        "Available": true,
        "BackgroundColor": "0 0 0 0.4",
        "Content": "No Content",
        "FadeIn": 0.0,
        "FadeOut": 0.0,
        "FontColor": "1 1 0 1",
        "FontSize": 18,
        "Height": 1.0,
        "Margin": "0 0.02 0 0",
        "Order": 2,
        "Width": 0.76
      },
      "Width": 0.5
    },
    "Coordinates": {
      "AnchorX": "Left",
      "AnchorY": "Bottom",
      "Autoload": true,
      "Available": true,
      "BackgroundColor": "0 0 0 0.4",
      "Dock": "TopLeftDock",
      "FadeOut": 0.0,
      "Height": 0.95,
      "Image": {
        "AnchorX": "Left",
        "AnchorY": "Bottom",
        "Available": true,
        "BackgroundColor": "0 0 0 0.4",
        "Height": 0.8,
        "Margin": "0 0.01 0.1 0.01",
        "Order": 1,
        "Url": "http://i.imgur.com/Kr1pQ5b.png",
        "Width": 0.13
      },
      "Margin": "0 0.086 0 0.01",
      "Order": 7,
      "PanelSettings": {
        "RefreshRate(s)": "3"
      },
      "Text": {
        "Align": "MiddleCenter",
        "AnchorX": "Left",
        "AnchorY": "Bottom",
        "Available": true,
        "BackgroundColor": "0 0 0 0.4",
        "Content": "No Content",
        "FadeIn": 0.0,
        "FadeOut": 0.0,
        "FontColor": "1 1 0 1",
        "FontSize": 17,
        "Height": 1.0,
        "Margin": "0 0.02 0 0",
        "Order": 2,
        "Width": 0.848
      },
      "Width": 0.5
    },
    "HelicopterEvent": {
      "AnchorX": "Left",
      "AnchorY": "Bottom",
      "Autoload": true,
      "Available": true,
      "BackgroundColor": "0 0 0 0.4",
      "Dock": "TopLeftDock",
      "FadeOut": 0.0,
      "Height": 0.95,
      "Image": {
        "AnchorX": "Left",
        "AnchorY": "Bottom",
        "Available": true,
        "BackgroundColor": "0 0 0 0.4",
        "Height": 0.8,
        "Margin": "0 0.15 0.1 0.1",
        "Order": 1,
        "Url": "http://i.imgur.com/hTTyTTx.png",
        "Width": 0.75
      },
      "Margin": "0 0 0 0.01",
      "Order": 5,
      "PanelSettings": {
        "ActiveColor": "0.7 0.2 0.2 1",
        "InactiveColor": "1 1 1 0.1"
      },
      "Width": 0.1
    },
    "MessageBox": {
      "AnchorX": "Right",
      "AnchorY": "Bottom",
      "Autoload": true,
      "Available": true,
      "BackgroundColor": "0 0 0 0.4",
      "Dock": "TopRightDock",
      "FadeOut": 0.0,
      "Height": 0.95,
      "Margin": "0 0 0.200 0.005",
      "Order": 7,
      "PanelSettings": {
        "MessageUpdateFrequency (seconds)": 90,
        "MsgOrder": "normal"
      },
      "Text": {
        "Align": "MiddleCenter",
        "AnchorX": "Left",
        "AnchorY": "Bottom",
        "Available": false,
        "BackgroundColor": "0 0 0 0.4",
        "Content": "No Content",
        "FadeIn": 0.0,
        "FadeOut": 0.0,
        "FontColor": "1 1 1 1",
        "FontSize": 14,
        "Height": 0.95,
        "Margin": "0 0 0 0.005",
        "Order": 0,
        "Width": 1.0
      },
      "Width": 1.0
    },
    "OPlayers": {
      "AnchorX": "Left",
      "AnchorY": "Bottom",
      "Autoload": true,
      "Available": true,
      "BackgroundColor": "0 0 0 0.4",
      "Dock": "TopLeftDock",
      "FadeOut": 0.0,
      "Height": 0.95,
      "Image": {
        "AnchorX": "Left",
        "AnchorY": "Bottom",
        "Available": true,
        "BackgroundColor": "0 0 0 0.4",
        "Height": 0.8,
        "Margin": "0 0.05 0.1 0.05",
        "Order": 1,
        "Url": "http://i.imgur.com/n9EYIWi.png",
        "Width": 0.35
      },
      "Margin": "0 0 0 0.01",
      "Order": 2,
      "Text": {
        "Align": "MiddleCenter",
        "AnchorX": "Left",
        "AnchorY": "Bottom",
        "Available": false,
        "BackgroundColor": "0 0 0 0.4",
        "Content": "No Content",
        "FadeIn": 0.0,
        "FadeOut": 0.0,
        "FontColor": "1 1 1 1",
        "FontSize": 14,
        "Height": 1.0,
        "Margin": "0 0 0 0.005",
        "Order": 2,
        "Width": 0.68
      },
      "Width": 0.31
    },
    "Radiation": {
      "AnchorX": "Left",
      "AnchorY": "Bottom",
      "Autoload": true,
      "Available": true,
      "BackgroundColor": "0 0 0 0.4",
      "Dock": "TopLeftDock",
      "FadeOut": 0.0,
      "Height": 0.95,
      "Image": {
        "AnchorX": "Left",
        "AnchorY": "Bottom",
        "Available": true,
        "BackgroundColor": "0 0 0 0.4",
        "Height": 0.8,
        "Margin": "0 0.15 0.1 0.1",
        "Order": 1,
        "Url": "http://i.imgur.com/owVdFsK.png",
        "Width": 0.75
      },
      "Margin": "0 0 0 0.01",
      "Order": 6,
      "PanelSettings": {
        "ActiveColor": "1 1 0 1",
        "InactiveColor": "0 1 0 1",
        "RefreshRate(s)": "3"
      },
      "Width": 0.1
    },
    "Sleepers": {
      "AnchorX": "Left",
      "AnchorY": "Bottom",
      "Autoload": true,
      "Available": true,
      "BackgroundColor": "0 0 0 0.4",
      "Dock": "TopLeftDock",
      "FadeOut": 0.0,
      "Height": 0.95,
      "Image": {
        "AnchorX": "Left",
        "AnchorY": "Bottom",
        "Available": true,
        "BackgroundColor": "0 0 0 0.4",
        "Height": 0.8,
        "Margin": "0 0.05 0.1 0.05",
        "Order": 1,
        "Url": "http://i.imgur.com/XIIZkqD.png",
        "Width": 0.4
      },
      "Margin": "0 0 0 0.01",
      "Order": 3,
      "Text": {
        "Align": "MiddleCenter",
        "AnchorX": "Left",
        "AnchorY": "Bottom",
        "Available": false,
        "BackgroundColor": "0 0 0 0.4",
        "Content": "No Content",
        "FadeIn": 0.0,
        "FadeOut": 0.0,
        "FontColor": "1 1 1 1",
        "FontSize": 14,
        "Height": 1.0,
        "Margin": "0 0 0 0.005",
        "Order": 2,
        "Width": 0.63
      },
      "Width": 0.17
    }
  },
  "ThirdPartyPanels": {},
  "TimeFormats": [
    "H:mm",
    "HH:mm",
    "h:mm",
    "h:mm tt"
  ]
}​

Have fun with it,
BTW it does not show icon for cargo heli only the Patrol one, The Rads icon goes green when safe, Yellow when active, The Heli goes red when active and "grey" when inactive. The Airdrop goes green when active and "grey" when inactive.
In response to pookins ():
I wanted to reply to this post with an example but cannot see how i can add screenshot by using "bro...
Gosh pookins, thanks for the explaination. appreciate it! you have discord? so i can ask you directly if i need help?
Sorry but I dont use it, just post any other queries here
alright