Display Public IP (sample Widget)

This widget makes a call to a page that shows your Public IP address (the IP address that you use for Internet access), parses its HTML and displays it in our player.

The Widget’s HTML code

The following widget does the following:

  1. reads the widget’s configuration and applies the required CSS for background color, font color, font family, font style, font weight
  2. resizes text to fit the available window
  3. requests the HTML from http://www.showmyip.gr/
  4. parses the HTML and displays the IP

We also include a “js” folder with the jQuery library for easier HTML DOC manipulation.

what is my ip index.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>get ip</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
      html, body {
        background-color: transparent;
        height:100%;
      }
      #container{
        height:100%;
        text-align: center;
      }
    </style>
    
    <!--  include jquery library for easier html manipulation--> 
	<script src="js/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
	
	/*
	the function that will get the ip from http://www.showmyip.gr/
	*/
	function get_ip(){
		/*
		Crete an iframe element where we will append the returned html data for parsing
		*/
		var $el = $('<iframe></iframe>')
		if(window.t)
			clearTimeout(window.t)
		
		/*
		ajax call for retrieving html
		Important !!!!!!
		This will not work in normal browsers as it will trhrow a cors error
		*/
		$.ajax({
					url : 'http://www.showmyip.gr/',
					method : 'GET',
					success : function(data) {
						
						/*append html to our iframe element*/
						$el.html(data);
						
						/*retrieve item that contains the ip string*/
						var ipbox = $el.find('.ip_address')
						
						/*clean and append string to our container*/
						$('#myip').html('')
						$('#myip').append(ipbox.text())
						
						/*repeat after 30 seconds*/
						window.t = setTimeout(get_ip,30000);
					},
					error : function(xhr) {
						/*retry after 30 seconds*/
						window.t = setTimeout(get_ip,30000);
					},
				});
	}
	  
	function init_widget(config) {
		if (!config) {
			return;
		}
		if("bgcolor" in config){
            var bgcolor = hexToRGBA(config.bgcolor)
            if (bgcolor) {
                $('container').css('background-color', bgcolor)
                
            }
        }
        if("color" in config){
            var color = hexToRGBA(config.color)
            if (color) {
                $('#container').css('color', color)
                
            }
        }
        
        if('fontfamily' in config){
            $('#container').css('font-family', config['fontfamily'])
        }
        
        if('fontstyle' in config){
            $('#container').css('font-style', config['fontstyle'])
        }
        
        if('fontweight' in config){
            $('#container').css('font-weight', config['fontweight'])
        }
		
	}

	function start_widget() {
		get_ip()
		
		/*fit text to size of widget*/ 
		$('#container').textfill({maxFontPixels:$('#container').height()})
	}

	function stop_widget() {

	}
	  
	function test_widget() {
		init_widget({
	        bgcolor:"00000055",
	        color: "ff0000cc",
	        fontfamily : "arial",
	        fontstyle : "normal",
	        fontweight : "bold",
	        })
		start_widget()
	}
	
	
    
	/*function that turns an rgba hex to rgba css*/
    function hexToRGBA(hex){
        var r = parseInt(hex.substr(0,2),16);
        var g = parseInt(hex.substr(2,2),16);
        var b = parseInt(hex.substr(4,2),16);
        var a = Math.round((parseInt(hex.substr(6,2),16) / 255)*100);
        
        a= a/100
        
        var rgba='rgba('+r+','+g+','+b+','+a+')'
        return rgba;
    }
	
	
	/*function to resize text so tah it fits to its container*/
	(function($) {
	    $.fn.textfill = function(options) {
	        var fontSize = options.maxFontPixels;
	        var ourText = $('span:first', this);
	        var maxHeight = $(this).height();
	        var maxWidth = $(this).width();
	        var textHeight;
	        var textWidth;
	        do {
	            ourText.css('font-size', fontSize);
	            textHeight = ourText.height();
	            textWidth = ourText.width();
	            fontSize = fontSize - 1;
	        } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
	        return this;
	    }
	})(jQuery);


	
	  
    </script>
  </head>
  <body>
    <noscript><div id='box'>Please, enable JavaScript and refresh page.</div></noscript>
    <div id="container"><span id="myip">255.255.255.255</span></div>
  </body>
</html>


The Widget’s JSON Schema

We need the declare a schema for the required configuration fields:

  1. bgcolor: a color picker field that defines the widget’s background color.
  2. color: a color picker field that defines the widget’s font color.
  3. fontfamily: a select field with the available fonts
  4. fontstyle: a select field with the available font styles (normal, italic …)
  5. fontweight: a select field with the available font weight (normal, bold …)
  6. fields: a list defining the order of the above fields (json objects have no order)

schema.json

{
  "fields": [
    "bgcolor",
    "color",
    "fontfamily",
    "fontstyle",
    "fontweight"
  ],
  "schema": {
    "bgcolor": {
      "title": "Background Color",
      "type": "SpectrumColorPicker"
    },
    "color": {
      "title": "Font Color",
      "type": "SpectrumColorPicker"
    },
    "fontfamily": {
      "options": [
        "Arial",
        "Courier",
        "Comic Sans MS",
        "Georgia",
        "Times New Roman",
        "Trebuchet MS",
        "Verdana"
      ],
      "title": "Font",
      "type": "Select",
      "validators": [
        "required"
      ]
    },
    "fontstyle": {
      "options": [
        "normal",
        "italic",
        "oblique"
      ],
      "title": "Font Style",
      "type": "Select",
      "validators": [
        "required"
      ]
    },
    "fontweight": {
      "options": [
        "normal",
        "bold",
        "bolder",
        "lighter"
      ],
      "title": "Font Style",
      "type": "Select",
      "validators": [
        "required"
      ]
    }
  }
}

Download ZIP file

In the upload widget page we create a new widget, upload the attached zip file and enter the schema given above.

After that we can create what is my IP widgets with the desired styling/configuration.

You can download the widgets zip file from here:

what_is_my_ip.zip

For any questions you may have, reach out and our dev team can help you out.