I am trying to use Cui to display a ton of dynamic text and inline images. Looking through the code and documentation I have found that a CuiTextComponent uses UnityEngine.UI.Text which supports Styled Text.

Inside a styled text it's possible to use a quad tag (bottom of the documentation page) to display an inline image by specifying a material (id?).

Testing this using a couple of different materials (1, 2, 3, ...) only yields this same image:



I thought that maybe I can use FileStorage.server.Store to retrieve a material (id?) that I can use for the material attribute of the quad tag, but that also only yields the same results.

Is there any way I can load an image (from byte[] or url or whatever) for use in this quad tag inside a CuiTextComponent?

Alternatively, I don't HAVE to use inline images, I could break up text with CuiRawImageComponents too, that wouldn't be too bad. However haven't been able to figure out how to vertically autosize CuiTextComponents and place CuiRawImageComponents relative to it to dynamically structure the content. Maybe someone knows of an example on how to do this?

Here's my code that I'm testing with:

Help.json:

{"example":["Example","This is an example"]}

Help.example.json:

"We are <color=green>green</color> with envy
and stuff
test image: <quad material=3 size=200 x=0.1 y=0.1 width=0.5 height=0.5 />
second test image: <quad material=%IMAGE:https://upload.wikimedia.org/wikipedia/commons/6/62/NTV7_Testpattern.png% size=200 x=0.1 y=0.1 width=0.5 heigh
t=0.5 />"

Plugin code:

// "topicKey" => ["topicName", "topicTitle"]
Dictionary<string, string[]> topics;
// "topicKey" => topicContent
Dictionary<string, string> topicContent;
// "topicKey" => material (id?)
Dictionary<string, uint> images;

private void Loaded()
{
    this.topics = Interface.Oxide.DataFileSystem.ReadObject<Dictionary<string, string[]>>("Help");
    this.topicContent = new Dictionary<string, string>();
    ServerMgr.Instance.StartCoroutine(initialiseTopics());
}

private IEnumerator initialiseTopics()
{
    EnvSync env = EnvSync.FindObjectOfType<EnvSync>();
    foreach (string topic in this.topics.Keys)
    {
        string topicContent = Interface.Oxide.DataFileSystem.ReadObject<string>($"Help.{topic}");
        MatchCollection matches = Regex.Matches(topicContent, "%IMAGE:(.*)%");
        foreach (Match match in matches)
        {
            string url = match.Groups[1].Value;
            Puts($"Downloading image {url} for topic {topic}...");
            WWW www = new WWW(url);
            yield return www;
            uint material = FileStorage.server.Store(www.bytes, FileStorage.Type.png, env.net.ID);
            topicContent = Regex.Replace(topicContent, "%IMAGE:(.*)%", $"{material}");
        }
        this.topicContent.Add(topic, topicContent);
    }
    env.SendNetworkUpdate();

    Puts($"Loaded {this.topics.Count} topics.");
}

Basically, I load a list of topics and for each topic I will load a content json file which contains a string of Styled Text, and any %IMAGE:something% gets downloaded and stored for a material (id?) and is replaced with its material (id?) so that it says <quad material=955774645 size=200 x=0.1 y=0.1 width=0.5 height=0.5 />. The use of EnvSync to get a usable net.ID for FileStorage is of a recent test and can generally be ignored, before I have supplied 0 as the entity which yielded no different results. I'm out of ideas.

Thanks for your time!

Not that I am aware of.

So where does my train of thought go awry? Am I mixing up material (ids?) with something else when using FileStorage? I know the quad thing is not umod specific but from Unity but I'm having trouble understanding where the disconnect is between my generated IDs and what should be displayed on a quad. I think my approach is theoretically sound but since it's not working I'd like to understand why so I can maybe find a different solution.

I just don't think the game works with the quad styling. I tinkered with it in the past, but could never get it to work anywhere properly.