CODEWITHSUNDEEP
javascriptc#htmlunity-game-enginewebgl
Baranskii
Baranskii

Reputation: 45

Sending Data from Unity C# code to my WebGl index html

I have a project, where you use a stacker. thats how it looks in the browser

I want to send Data from the C# code like the name of the selected object and so on, to the webgl index html to showcase the Data on the right side where the data table is.

I have already tried to use a jslib file but i could not really save the data i got, i could just show an alert with the name of the object i selected

this is my jslib code, where i tried it with alert.

mergeInto(LibraryManager.library, {

    SendData: function (data){
        window.alert(Pointer_stringify(data));
    },
});

This is my C# code where i just send the name of the object to test it.

[DllImport("__Internal")]
   private static extern void SendData(string data);

   void OnMouseDown(){
      string data = gameObject.name;
      Debug.Log("Sending message to Js: "+ data);
      #if UNITY_WEBGL && !UNITY_EDITOR
      SendData(data);
      #endif
   }

I want to get Data into this table in the index.html

<table>
    <tr>
      <th class="type">Data</th>
      <th>Value</th>
    </tr>
    <tr>
      <td>Name:</td>
      <td id="name"></td>
    </tr>
    <tr>
      <td>ID:</td>
      <td id="ID"></td>
    </tr>
    <tr>
      <td>PNr:</td>
      <td id="PNr"></td>
    </tr>
    <tr>
      <td>Color:</td>
      <td id="color"></td>
    </tr>
  </table>

Upvotes: 4

Views: 1619

Answers (1)

stazik
stazik

Reputation: 313

You can use native JavaScript to work with DOM elements:

mergeInto(LibraryManager.library, {
    SendData: function (json) {
        const data = JSON.parse(UTF8ToString(json));
        
        const nameField = document.getElementById("name");
        const idField = document.getElementById("ID");
        const pnrField = document.getElementById("PNr");
        const colorField = document.getElementById("color");
        
        nameField.innerText = data.Name;
        idField.innerText = data.Id;
        pnrField.innerText = data.Pnr;
        colorField.innerText = data.Color;
    },
});

and on managed code side:

using System;
using System.Runtime.InteropServices;
using UnityEngine;
using Random = UnityEngine.Random;

public class Sender : MonoBehaviour
{    
    [DllImport("__Internal")]
    private static extern void SendData(string json);
    
    private readonly string[] colors = { "black", "blue", "cyan", "white" };
    
    [Serializable]
    private struct Info
    {
        public int Id;
        public string Name;
        public string Pnr;
        public string Color;
    }

    private void Update()
    {
        if (Input.GetKeyDown(KeyCode.Space))
        {
            var info = new Info();
            info.Name = "player_" + Random.Range(0, 1000);
            info.Id = Random.Range(0, 1000);
            info.Pnr = "pnr_" + Random.Range(0, 1000);
            info.Color = colors[Random.Range(0, colors.Length)];

            var json = JsonUtility.ToJson(info);
#if !UNITY_EDITOR && UNITY_WEBGL
            SendData(json);
#endif
        }
    }
}

I used JSON and a structure for transfer to JS, but it is possible to pass each parameter separately or create your own parser instead of JSON.

We should use UTF8ToString instead of Pointer_stringify because JavaScript function 'Pointer_stringify(ptrToSomeCString)' is obsoleted and will be removed in a future Unity version.

Native JS isn't very convenient if you need to update a lot of elements. It is better to use JQuery or other libs.

Upvotes: 1

Related Questions