I just saw it works perfect with GUI Buttons in Unity.
I mixed it now… HTML overlay input field, and Unity GUI buttons.
jslib:
var MyPlugin = {
ShowOverlay: function()
{
if (!document.getElementById('overlay')) {
var myoverlay = document.createElement('div');
myoverlay.setAttribute('id', 'overlay');
myoverlay.setAttribute('style', 'text-align:center');
document.body.appendChild(myoverlay);
}
document.getElementById('overlay').innerHTML = "<div style='position: fixed; z-index: 1; top:50%; display:inside-block; width:100%; height:100px; background-color: yellow;'><input type=text id=link size=100></div>";
document.getElementById('overlay').focus();
},
HideDiv: function()
{
document.getElementById('overlay').innerHTML = "";
},
UpdateImage: function()
{
var UrlString = document.getElementById('link').value;
SendMessage ('Pocket', 'FileSelected', UrlString);
document.getElementById('overlay').innerHTML = "";
}
};
mergeInto(LibraryManager.library, MyPlugin);
jslib2: source: How do I let the user load an image from their harddrive into a WebGL app? - Unity Engine - Unity Discussions
var ImageUploaderPlugin = {
ImageUploaderCaptureClick: function() {
if (!document.getElementById('ImageUploaderInput')) {
var fileInput = document.createElement('input');
fileInput.setAttribute('type', 'file');
fileInput.setAttribute('id', 'ImageUploaderInput');
fileInput.style.visibility = 'hidden';
fileInput.onclick = function (event) {
this.value = null;
};
fileInput.onchange = function (event) {
SendMessage('Canvas', 'FileSelected', URL.createObjectURL(event.target.files[0]));
}
document.body.appendChild(fileInput);
}
var OpenFileDialog = function() {
document.getElementById('ImageUploaderInput').click();
document.getElementById('canvas').removeEventListener('click', OpenFileDialog);
};
document.getElementById('canvas').addEventListener('click', OpenFileDialog, false);
}
};
mergeInto(LibraryManager.library, ImageUploaderPlugin);
c#:
[DllImport("__Internal")]
private static extern void ShowOverlay();
[DllImport("__Internal")]
private static extern void HideDiv();
[DllImport("__Internal")]
private static extern void UpdateImage();
[DllImport("__Internal")]
private static extern void ImageUploaderCaptureClick();
void FileSelected (string url) {
pleaseWait = true;
StartCoroutine(LoadTexture (url));
}
public void OnButtonPointerDown () {
#if !UNITY_EDITOR && UNITY_WEBGL
WebGLInput.captureAllKeyboardInput = false;
ShowOverlay();
overlayButtons = true;
showColorSelector = false;
#endif
}
void enableInputs(string url)
{
#if !UNITY_EDITOR && UNITY_WEBGL
WebGLInput.captureAllKeyboardInput = true;
#endif
}
void updateUserImage(string link)
{
#if !UNITY_EDITOR && UNITY_WEBGL
WebGLInput.captureAllKeyboardInput = true;
#endif
}
IEnumerator LoadTexture (string url) {
GuiHandler.addConsoleText("Loading Image... " + url);
string format = "";
string firstFour = "";
if(url.Length > 4)
{
format = url.Substring(url.Length - 4);
firstFour = url.Substring(0,4);
if(format == ".jpg" || format == ".png")
{
if(firstFour == "http")
{
WWW image = new WWW (url);
yield return image;
Texture2D texture = new Texture2D (1, 1);
image.LoadImageIntoTexture (texture);
Debug.Log ("Loaded image size: " + texture.width + "x" + texture.height);
GuiHandler.addConsoleText("Loaded image size: " + texture.width + "x" + texture.height);
myMaterial2 = new Material(Shader.Find("Standard"));
myMaterial2.mainTexture = texture;
//textures.Add (texture);
//colors.Add (Color.white);
Pocket.colorObject.GetComponent<Manipulate>().Highlight.GetComponent<MeshRenderer>().material = myMaterial2;
}
else
{
errorText = "No valid URL. A http adress is required.";
showErrorLabel = true;
Debug.Log (errorText);
}
}
else
{
errorText = "Please use .JPG or .PNG images only.";
showErrorLabel = true;
Debug.Log (errorText);
}
}
else
{
errorText = "No valid URL. To short.";
showErrorLabel = true;
Debug.Log (errorText);
}
pleaseWait = false;
showColorSelector = false;
}
gui:
if(overlayButtons)
{
if(GUI.Button (new Rect(Screen.width * 0.5f, Screen.height * 0.5f + 100, Screen.width * 0.5f, 100), "Back", "PocketClose"))
{
HideDiv();
overlayButtons = false;
enableInputs("");
}
if(GUI.Button (new Rect(0, Screen.height * 0.5f + 100, Screen.width * 0.5f, 100), "Update", "PocketClose"))
{
UpdateImage();
overlayButtons = false;
enableInputs("");
}
}
if(pleaseWait)
{
GUI.Label (new Rect(Screen.width * 0.5f - Screen.width * 0.25f, Screen.height * 0.5f - 50, Screen.width * 0.5f, 100), "Please wait...", "PocketClose");
}
if(showErrorLabel)
{
GUI.Label (new Rect(0, Screen.height * 0.5f - 100, Screen.width, 100), errorText, "PocketClose");
if(GUI.Button (new Rect(0, Screen.height * 0.5f, Screen.width, 100), "OK", "PocketClose"))
{
showErrorLabel = false;
errorText = "";
}
}