Solved Cui image rendering

Good day,

I am currently creating a GUI for my plugin and are having some rendering issues. I currently have an element on my UI that displays an image and block (progress bar like) [doing something similar to zLevels with a percentage that goes up].

Now, the problem I am having is that when the progress bar is suppose to update and I destroy and render the UI it creates a block where the image is for a split second before rendering it properly.

Steam Community :: Screenshot is how it looks after the render has completed, but as the UI should update each time a player gathers something it renders like Steam Community :: Screenshot for a short period of time.

Below is the code that is used to render the UI which is called at OnDispencerGather:

Code:

    private void ProfessionRenderUI(BasePlayer player, string pName) {
      Dictionary<string, Dictionary<string, string>> uiFrameData = new Dictionary<string, Dictionary<string, string>>();
      uiFrameData["Gathering"] = new Dictionary<string, string>();
      uiFrameData["Gathering"]["Frame"] = "uiProfessionGathering";
      uiFrameData["Gathering"]["Color"] = "0.1 0.1 0.1 0.9";
      uiFrameData["Gathering"]["RTMin"] = "0.7 0.126"; // left, bottom
      uiFrameData["Gathering"]["RTMax"] = "0.8175 0.1625"; // right, top
      uiFrameData["Gathering"]["PRBar"] = "1 0 0 0.75";      uiFrameData["Harvesting"] = new Dictionary<string, string>();
      uiFrameData["Harvesting"]["Frame"] = "uiProfessionHarvesting";
      uiFrameData["Harvesting"]["Color"] = "0.1 0.1 0.1 0.9";
      uiFrameData["Harvesting"]["RTMin"] = "0.7 0.087";
      uiFrameData["Harvesting"]["RTMax"] = "0.8175 0.1215";
      uiFrameData["Harvesting"]["PRBar"] = "0 0 1 0.75";      if (!uiFrameData.ContainsKey(pName)) {
        SendReply(player, pName);
        return;
      }      CuiHelper.DestroyUi(player, uiFrameData[pName]["Frame"]);      var elements = new CuiElementContainer();
      var mainName = elements.Add(new CuiPanel {
        Image = {
          Color = uiFrameData[pName]["Color"]
        },
        RectTransform = {
          AnchorMin = uiFrameData[pName]["RTMin"],
          AnchorMax = uiFrameData[pName]["RTMax"],
        }
      }, "HUD/Overlay", uiFrameData[pName]["Frame"]);      var uiIcon = new CuiElement {
        Name = CuiHelper.GetGuid(),
        Parent = uiFrameData[pName]["Frame"],
        Components = {
          new CuiRawImageComponent {
            Url = "http://i.imgur.com/CJihxEt.png",
            Color = "0.47 0.48 0.49 1"
          },
          new CuiRectTransformComponent {
            AnchorMin = "0.035 0.15", AnchorMax = "0.15 0.85"
          }
        }
      };
      elements.Add(uiIcon);      long eMax = 1500;
      long.TryParse(Config["ExperienceMax"].ToString(), out eMax);      double pProgress = 0.25;
      if (pProfessionData[player.userID].ContainsKey(pName)) {
        pProgress = (0.725 * ((double)pProfessionData[player.userID][pName] / (double)eMax)) + 0.25;
      }      var uiProgress = new CuiElement {
        Name = CuiHelper.GetGuid(),
        Parent = uiFrameData[pName]["Frame"],
        Components = {
          new CuiImageComponent { Color = uiFrameData[pName]["PRBar"] },
          new CuiRectTransformComponent { AnchorMin = "0.25 0.15", AnchorMax = pProgress.ToString() + " 0.85" }
        }
      };
      elements.Add(uiProgress);      CuiHelper.AddUi(player, elements);
    }

Any advice on how I should go about to resolve the issue would be appreciated.

Regards

 

I actually figured this out at once point but I forget how I did it. I will have to go through my plugins and find it.

 

Just an update for others coming across the same problem on how I was able to get past this problem.

I created two containers.

One is rendered/destroyed once. I am currently using the plugin Init function (for testing) to render it. In the end I would probably render it once with OnPlayerInit and destroy in OnPlayerDisconnected.

The second ui is destroyed and rendered each time I want the bars to update. Still need to test it with text in it which is the next part

Marking as solved as it is the only way I have found so far to make it work as intended.

Thanks

 

There's another way to fix it. I highlighted the fix and some other stuff regarding images in UI elements here: Cuihelper hide/update instead of remove | Oxide

Most, if not all, should still work today! Hope that helps.

 

Thanks for point that out. It does help to not flash to the color of the image (the silver color in the picture). It does however flash to a transparent image if the Gui is destroyed and rendered. But it is a massive improvement.

I have gone the route to have each box consist of 3 panels (CuiPanel). The container (or out box) parented to the HUD/Overlay and then 1 panel for the icon and one panel for the progress bar (both parented to the container).

Thus when ever I need to update my UI all I do is re-render the panel for the progress bar. This ends up with not having the image in the icon panel flash when ever it happens.

My previous approach for some reason kept throwing out rpc gui errors while in game and causing me to crash. This so far seems to work pretty well.