Dream.In.Code -> An image to go!

Subscribe to kiwi2's Blog

An image to go!

16 August 2009

Leave Comment

Posted by kiwi2

Everybody wants to make quick and easy mobile applications, but "whoa", maybe you've got to know java atleast to get it going!. Well no, actually all you need is javascript, a little php and a bit of html, granted this does'nt work on a phone without a javascript enabled browser so two options exist build one(but then yo'll need to know a little more than javascript and php) or use a ready built one like, opera mobile which may be downloaded to almost any phone, allowing your application a fairly wide audience(I have'nt tested it on the iphone, somebody should).
This example will, in keeping with other entries on this blog, produce a very simple image, and "put" it on localhost via AJAX, please bear in mind that this example does not do anything fancy, but merely attempts to give you a few tools.
The method is the salient factor here since any realtime app could be constructed in this manner.
1.the php file to create a basic image.
2.the html file on localhost(mobile phone)
on your website
im.php

<?php
header("Content-type: image/png");
$width = $_GET[g];
$height = $_GET[p];
$na = $_GET[m];
$im = imagecreate($width, $height);
imagecolorallocate($im, 255, 255, 255);
imagepng($im, $na);
imagedestroy($im);

?>

in a directory on your phone.
now the html, javascript & ajax

<style>
#for2{display: none;
position: absolute;
top: 40px;
left: 10px;
background-color: black;
color: white;
padding: 5px;
border: 1px solid blue;} 

#showim{
position: absolute;
top: 250px;
left: 50px;
background-color: black;
color: white;
padding: 5px;
border: 1px solid blue;}

#ot{
position: absolute;
top: 180px;
left: 50px;}
</style>
<script src='colors.js'></script>
<script>
var obj2;
var obj;

function ne() { 

obj2 = document.getElementById("for2");
obj2.style.display = 'block';

  }

function colim() 
{ 
var x =document.form3.width.value;
var y =document.form3.height.value;
var z =document.form3.name.value;


obj = document.getElementById("for2");
obj.style.display = 'none';



var fep = null; 
document.getElementById
("showim").innerHTML ='loading...';
if(window.XMLHttpRequest)
fep = new XMLHttpRequest(); 
else if (window.ActiveXObject)
fet  = new ActiveXObject(Microsoft.XMLHTTP); 
fep.onreadystatechange = function()
{ 

if(fep.readyState == 4) 
{
if(fep.status == 200)
				{ 


document.getElementById
("ot").src = "http://www.adminsqlite.com/game/" + document.form3.name.value;

	
				}	
				else	
				{

document.getElementsById("showim").innerHTML ="Error: returned status code " + fep.status + " " + fep.statusText;
				}	
			} 
		};

fep.open("GET", "http://www.adminsqlite.com/game/im.php?g="+x+"&&p="+y+"&&m="+z, true); 
		fep.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
		fep.send(null); 
	} 

</script><body bgcolor='black'>
<input type='button' id='new' style='background-color: blue;' value='new' onclick='ne();' />

<div id='for2'><form name='form3'><b>Enter Width</b><br /><input type='text' id='width' /><br /><b>Enter Height</b></br><input type='text' id='height' /><br /><input type='text' id='name' /><br /><input type='BUTTON' name='submit' value='create new' style='background-color: blue;' onclick='colim();' /></form></div>
<div id='showim'></div><img src="http://www.adminsqlite.com/zzbg.png" id='ot' />

Hope someone can do something with it.

Share This Entry: