Table of Contents
This app is called a page that shows your public IP address (the IP address you use for Internet access), parses its HTML, and displays it in our player.
The App’s HTML code
The following app does the following:
- reads the app’s configuration and applies the required CSS for background color, font color, font family, font style, font weight
- resizes text to fit the available window
- requests the HTML from https://www.showmyip.gr/
- 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 https://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 : 'https://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 App’s JSON Schema
We need to declare a schema for the required configuration fields:
- bgcolor: a color picker field that defines the widget’s background color.
- Color: a color picker field that defines the widget’s font color.
- font-family: a select field with the available fonts
- font style: a select field with the available font styles (normal, italic …)
- fontweight: a select field with the available font weight (normal, bold …)
- 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
On the upload app page, we create a new app, upload the attached zip file and enter the schema given above.
After that, we can create my IP widgets using the desired styling/configuration.
You can download the app zip file from here: