Quaintproject

How to load text for GUI from the Internet in Unity 3D

2 Comments


header

Gioacchino Giuseppe Serangeli [Public domain], via Wikimedia Commons

In this short article I am going to show you how to load text from the internet in your application created with Unity 3D. That means with the help of this short guide you will be well prepared for loading the text of GUI Labels etc. from an online hosted .txt file. We will write scripts, which allow us to turn a URL to a document into a text. 🙂

Why should I load Text for GUI from the Internet?

Pro

  • You can skip doing an update, because whenever the user wants to read e. g.  the credits he/ she will always get an actual and updated version.
  • Spelling errors can be corrected immediately by editing the uploaded text file.

Con

  • Internet connection is required.
  • It is computationally intensive.

The simple method:

The following script which is rather well-commented should give you a basic understanding for the WWW Class in Unity. Though if you need further information, you may want to visit the Unity scripting reference. The following script turns the URL into a text for the GUI. The text itself will be placed in a label that can be adjusted with horizontal and vertical scroll bars. If there is an available internet connection, then the text will be viewed as expected. If the Internet is disabled a short notification will appear close to the bottom edge of the screen. Attach this script to a game object.

For the Notification I have used a texture with a warning sign. If you also want to use icons like the warning triangle, you might want to visit some of the following resources:

I have used a tango Icon. The Tango Desktop Project is an open source initiative to create a set of design guidelines and to provide a consistent user experience for applications on desktop environments. You find some of these Icons in GIMP, Open Office etc.

Click on the picture below or on this link if you want to use the same icon. Is it boring for you to use  prefabbed symbols or does it not fit your game’s theme, why don’t you go ahead  and create your own icons? 🙂

By The people from the Tango! project  [Public domain or Public domain], via Wikimedia Commons

This is the script you’ll need:

var error: String;
 private var url;//Link to your online hosted document
 private var connection :boolean = true;//Is there an available connection?
 // The variable to control where the scrollview 'looks' into its child elements.
 var scrollPosition : Vector2;
 // The string to display inside the scrollview. 2 buttons below add & clear this string.
 private var lbl_web : String;// This is our placeholder for the text from the document
 var www : WWW = new WWW (url);// Creating a variable which is an URL
 var notificationTexture : Texture;
//#######
 function Start()
 {
 url= "web113.nclabs01.netcup.net/upload.txt";// Paste your URL here
 www = new WWW(url);//Let's add the properties of your URL to the variable WWW
 yield www;
 lbl_web = www.text;
 if (www.error != null)//If there was an error during download...
 Debug.Log(www.error);//Print error
 connection = true; //Set connection to be false
 if(www.error == null)//Otherwise...Set connection to false
connection = false;

}

function OnGUI () {
 if(connection == true)// If there is no Internet connection
 {
 GUI.DrawTexture(Rect(Screen.width*0.1,Screen.height*0.92,25,25), notificationTexture);
 GUI.Label (Rect ((Screen.width *0.1+50), Screen.height *0.92, Screen.width *0.8, Screen.height *0.8), "Please connect to the internet");
 }
 if(connection == false)// Connection established
 {
 scrollPosition = GUI.BeginScrollView (Rect ((Screen.width*0.1),(Screen.height*0.1),(Screen.width*0.8),(Screen.height*0.8)),
 scrollPosition, Rect (0, 0,(Screen.width*2), (Screen.height*2)));
 GUILayout.Label (lbl_web);
 GUI.EndScrollView ();
}
}
//#####created by quaintproject####

The script from above should create something like this:

Screenshot from Unity 3D:

screenshot simple

The advanced method:

If you want to go more advanced you could replace the WWW.error  with a ping function like in the following example. You will get more control over loading the text. Further more you will have two Notifications: One for the connecting process and a second one for the internet connection. Again I am using Tango symbols.

  var url;
       // The variable to control where the scrollview 'looks' into its child elements.
    var scrollPosition : Vector2;
    // The string to display inside the scrollview. 2 buttons below add & clear this string.
    var longString = "This is a long-ish string";
    private var lbl_web : String;
 var guiwww : WWW;
     var notificationTexture : Texture;
     var notificationString : String;

private var startTime : float;
     private var TimeOut : int = 5;// for how long the website is requested.
     private var connection : boolean = true;

    function Start () {

startTime = Time.time;
PingMe();

}
function PingMe()
{
 var iPing : Ping = new Ping("37.221.192.160");// paste the IP-Address of your server here

    while(!iPing.isDone)
    {
    var guiTime = Time.time - startTime;
        yield;
        notificationString = "Connect to the internet.";

        if(guiTime % 60 >= TimeOut)
        {
       notificationString = "Server Time Out!";
      connection = false;
        break;
        }
    }
    //Debug.Log(googPing.time);
    if(iPing.isDone && connection == true)
    {
  Download();
     notificationString = ""; //empty notification string

}
}
 function Download()
 {
 url= "web113.nclabs01.netcup.net/upload.txt";
    guiwww = new WWW(url);

 Debug.Log("Download");
 yield guiwww;

         lbl_web = guiwww.text;
 }

    function OnGUI () {

    if(connection == false)
    {
        GUI.DrawTexture(Rect(Screen.width*0.1,Screen.height*0.92,25,25), notificationTexture );
        GUI.Label (Rect ((Screen.width *0.1+50), Screen.height *0.92, Screen.width *0.8, Screen.height *0.8), notificationString);
     }
   else
   {
   scrollPosition = GUI.BeginScrollView (Rect ((Screen.width*0.1),(Screen.height*0.1),(Screen.width*0.8),(Screen.height*0.8)),
	scrollPosition, Rect (0, 0,(Screen.width*2), (Screen.height*2)));

GUILayout.Label (lbl_web);
        GUI.EndScrollView ();

    GUI.Label (Rect ((Screen.width *0.1+50), Screen.height *0.92, Screen.width *0.8, Screen.height *0.8), notificationString);
}
}

View our gallery:

Thanks for visiting our website. If you have questions, feel free to post a comment. 🙂

Advertisements

2 thoughts on “How to load text for GUI from the Internet in Unity 3D

  1. hello, thanks for this tutorial..
    is it should be done with Js? after that, where should i put this script?
    thanks again, i’m sorry for this noob question

    Like

    • Thanks for your reply! You have to connect to your pi either using ssh or VNC. SSH should be fine for what we want to do so. Connect via ssh to your pi and create a new script by typing nano TemperatureScript.py Then copy and paste the updated version of script from above and adjust the lines for the smtp server, your username and password and the email you want to send it to. Close by hitting Ctrl+X and then Y. You can now run this script to see if its working. (You might wann lower the threshold value for testing)

      The best way to make sure that the script is running regularly is by using crown job. You can find a tutorial about it here: https://quaintproject.wordpress.com/2013/09/29/how-to-schedule-a-job-on-the-raspberry-pi/

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s