Monthly Archives: January 2015

Edit Files Live on the Server

I've been a web developer for many  years now and I must say I feel a little foolish for not thinking of this earlier. I've been wasting countless amounts of time waiting for files to upload and doing the mundane tasks involved in updating files and uploading them to a server when I didn't really have to. Here's why.

Today I got fed up with editing my file in Notepad++, switching to Filezilla,  finding the file in a folder on my desktop, uploading the file by dragging it to Filezilla and finally testing my online website or app. I decided to Google the term "Edit files live on server" and found https://cyberduck.io/ that has an amazing product which allows you to type in your FTP details, just like I used to in Filezilla, and open a connection to my server. Then it gives me a directory tree on my server. CyberDuck allows me to click on any file on my server and open it in Notepad++ on my desktop, edit it and save it right back to the server without having to click and drag it to another program like I used to do for so many years.

This is the best program for a developer I have found in years. Traditionally I do not favor fancy programs to help you write code or frameworks to make things "easier" because I found that they only complicate matters in the long run, CyberDuck is the exception however. It is great so far, but I've only been using it for an hour now, so if I find any flaws, I will report them here asap. I just wanted to share this. If you are interested in downloading the CyberDuck app for yourself, simply CLICK HERE or the link above and look for the two download links on the left side of the page. Do not use the first download link you see at the top of the page because it is a sponsored ad and will try to trick you into downloading something else. I hate those types of ads, but none-the-less, I still recommend CyberDuck!

Like I said, it's great when used with Notepad++, so if you'd like the experience I had, download Notepad++ too. Just google it, it's easy to find.

The New Ajax

Okay, as a developer, I've been using Ajax for years. To be honest, it gives me a new ulcer every time I have to use it. Well, it still does lol, but not quite as bad. Today Ajax technology mixed with jQuery makes it almost tolerable to code with. Also, what's important, is that it is a very necessary technique if you want to go anywhere at all with your coding skills. Let me demonstrate how to make it easier for everyone. It is not really that hard if you break it down into the simplest form possible and then expand from there. Here is a simple Ajax call to get the results of a PHP script:

Update - I've decided to expand this article to include just about every way possible to send data to a PHP script and get a response, so I've include the JavaScript/Ajax method, the jQuery/Ajax method and the CURL method of sending data to a PHP script and getting back other data or manipulated data.

Simple JavaScript Ajax call to PHP script:

<!DOCTYPE html>
<html>
<head>
<script>
function get_txt(){
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }else{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    var returnval=xmlhttp.responseText;
alert(returnval);
    }
  }
xmlhttp.open("GET","phpscript.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<input type="button" value="TEST" onclick="get_txt()" />
</body>
</html>

The above Ajax example will only retrieve data from the declared file. It could be altered to send data to it and receive a response, but I'm saving that gem for my next example using jQuery and Ajax to send a variable to a PHP file and get back a response.

Simple jQuery Ajax call to PHP Script that Returns Data:

The following jQuery and Ajax script will send the "user" variable holding the text "Ian" to the PHP script which will read the "user" variable with $_POST['user'] and send the results of the PHP code back to the Ajax script!

<script type="text/javascript" src="jquery.js"></script>
<div id="status"></div><hr>
<div id="rez"></div>
<script>
//var $j = jQuery.noConflict();//use j. instead of $ if needed

$.ajax({               
    type: "POST", // the kind of data we are sending
    url: "update_scores.php", // this is the file that processes the form data
    data: {user:'ian'}, // this is our serialized form-like data to pass to php
    success: function(msg){    // this function runs when the data has been successfully processed
        // this sets up our notification area for error / success messages
        $( document ).ajaxComplete(function( event,request, settings ) {
            $( "#status" ).append( "<p>Request Complete.</p>" );
            preresult = msg;
            $( "#rez" ).append( "<p>"+msg+"</p>" );
        });
            

    }
});
</script>

Sending Data to a PHP script and getting a response using CURL

Note that you could use CURL to do the same thing still using:

        $data = array('username' => 'ian');
        $results= curlPost('http://www.jafty.com/job.php', $data);

function curlPost($url, $data){
// check for URL and data:
    if(empty($url)){
        return 'Error: missing URL';
    }
    if(empty($data)){
        return 'Error: missing Data';
    }
//get the data for the POST and put in URL:
$fields_string = '';
foreach($data as $key=>$value) { $fields_string .= $key.'='.$value.'&'; }
$fields_string = rtrim($fields_string,'&');
//open connection
$ch = curl_init();
//Set the URL, no. of POST vars and POST data:
curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch,CURLOPT_POST,count($data));
curl_setopt($ch,CURLOPT_POSTFIELDS,$fields_string);
//timeout after 10 secs(change as needed):
curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,10);
//curl_setopt($ch,CURLOPT_HEADER,false);
//Set to return data instead of printing:
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
//pass user agent:
curl_setopt($ch,  CURLOPT_USERAGENT , "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1)");
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
//execute post:
$result = curl_exec($ch);
//close connection:
curl_close($ch);
return $result;
}//end curlPost function

...to pass a variable to a PHP script and save the PHP script's results in $results.

JavaScript Remove Item from Array

Here is my quick and dirty, but good and intuitive, method for deleting an item from an array. The example below is given in a loop and also demonstrates how to build an array and get an array's length. Three in one, you can't loose with this demo!

<!DOCTYPE html>
<html>
<body>

<p>Click the button to remove two elements from the array.</p>

<button onclick="myFunction('Banana')">-Banana</button>
<button onclick="myFunction('Orange')">-Orange</button>
<button onclick="myFunction('Apple')">-Apple</button>
<button onclick="myFunction('Mango')">-Mango</button>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction(frt) {
//iterate over array:
for(i=0;i<fruits.length;i++){
    if(fruits[i]==frt){
    fruits.splice(i, 1);
    }
}//end foreach
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

To make the above work, simply save it in a file and call it anything.html and open it in your favorite, javascript enabled, browser such as Firefox. Then click on "-Apple"(minus Apple) and it will remove the Apple. Click on other buttons it will remove the specified item from the array and print the results to the screen for you to confirm.

Note that this demo show you can remove an item from an array by doing this:

fruits.splice(position, number-to-remove);

...where position is the position of the item you wish to start removing items and number-to-remove is the number of items to remove starting at that position. Simple! Play with it and get used to it and it'll make more sense.

Also note that we demonstrated how to build an array like:

var fruits = ["Banana", "Orange", "Apple", "Mango"];

...and we all know that JavaScript uses Objects instead of traditional Arrays like PHP and other languages use, but it's all the same for the purposes of this demo.

One more thing this demo shows people is how to get the number of items of an array or the length of an array in JavaScript. That is accomplished like this:

var arrayLength = fruits.length;

Summary

Ab-a-dee-ab-ah-dee, that's all folks!

 

JavaScript Get Random Number Between X and Y

This is a short demonstration on how you can get a random number between any two numbers specified using JavaScript. Here is my random number generating function I use often during 3D game development:

function randomNo(x,y){
return Math.floor(Math.random() * ((y-x)+1) + x);
}//end randomNo

A very simple function that gets the job done while saving you some thinking time! You can make pass any number you want, positive or negative, to the randomNo function shown above. For example:

for(i=0;i<100;i++){
var ans = randomNo(-25, 25);
document.write(i+") "+ans+"<br>");
}

The above usage case would return something like this:

0) 14
1) -16
2) -13
3) -10
4) 22
5) 17
6) -3
7) 20
8) 22
9) -25
10) 14
11) -16
12) 18
13) 14
14) -7
15) 10
16) -19
17) 11
18) 10
19) -21
20) -20
21) -6
22) -3
23) 12
24) 5
25) 21
26) -23
27) -6
28) 17
29) -9
30) 10
31) -4
32) -14
33) -7
34) -20
35) 8
36) 7
37) 0
38) 21
39) -17
40) 6
41) 4
42) -1
43) 10
44) 12
45) 16
46) 18
47) -12
48) 9
49) 21
50) -6
51) 19
52) -23
53) 9
54) 17
55) -2
56) 9
57) -21
58) -18
59) 19
60) -24
61) -10
62) -20
63) 19
64) 0
65) 0
66) 8
67) -9
68) -15
69) -13
70) 11
71) 22
72) -7
73) 16
74) -16
75) 2
76) 19
77) -25
78) -3
79) -19
80) -23
81) 13
82) 17
83) 8
84) -15
85) -19
86) 22
87) -1
88) 12
89) 14
90) -11
91) 24
92) 12
93) 9
94) 9
95) 18
96) 22
97) -5
98) -25
99) 25

The above results are from an actual deployment of the code shown above.

To understand how my random function works, you should know that the Math.random() function returns a value between 1 and 0. You should also know that the Math.floor(x) function returns the largest integer less than or equal to the number "x".

JavaScript Play Two Sounds at Once

Anyone following my blog may know I have undertaken 3D web development. This includes games and other 3D content for websites. Sound is particularly important to video game development. When it comes to building games with JavaScript, we have to know how to handle multiple sound files at once.  I actually tried a lot of tricks before I found this simple jQuery solution that works:

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function() {
console.log( "Ian says the document is ready!" );
var audio = new Audio('sounds/beat.mp3');
audio.play();
var audio2 = new Audio('sounds/song.mp3');
audio2.play();
});//end doc ready fun
</script>

Three.js Rotate 3D Text by its Center Point

It took me a few hours to solve the issue of how to rotate text generated by three.js and the THREE.TextGeometry function. That is why I am posting the final solution here for others to find when they have the same issue. When you simply create a 3D text model with THREE.TextGeometry and add rotation to it it will rotate on it's default pivot point which will be on the first letter of the text. That means it will not rotate according to a center pivot which is what I needed. I tried several types of three.js functions and mods to get it to work that all failed except one. I eded up creating a new pivot object to contain the text object and rotating that. Here is the complete code followed by an explanation of how it works.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Jafty 3D Gallery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background: transparent;
padding: 0;
margin: 0;
font-family:sans-serif;
}

#canvas {
margin:10px auto;
width:800px;
height:350px;
margin-top:-44px;
}

</style>
</head>
<body>
<div id="canvas"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/janda_manatee_solid_regular.js"></script>
<script>
// standard global variables
var container, scene, camera, renderer, controls, textMesh2;
//var axis = new THREE.Vector3(0,1,1);

function init() {
// SCENE
scene = new THREE.Scene();

// CAMERA
var SCREEN_WIDTH = 800, SCREEN_HEIGHT = 300;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
camera.position.set(0,0,1000);
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container = document.getElementById( 'canvas' );
container.appendChild( renderer.domElement );

// CONTROLS
controls = new THREE.OrbitControls( camera, renderer.domElement );

// LIGHT
var light = new THREE.PointLight(0xffffff);
light.position.set(0,0,1000);
scene.add(light);

// add 3D text beveled and sized
var material2 = new THREE.MeshPhongMaterial({
    color:0xff4444,//default is 0xffffff
    //vertexColors: THREE.FaceColors,//THREE.VertexColors,
    //morphTargets: true,//? doesn't work here
    shading: THREE.FlatShading,//comment out for other default shading type
    //shading:THREE.NoShading,//uncomment for no shading at all.
    wireframe: false,
    wireframeLinewidth: 1,//windows is always 1, but macs/linux will change line width
    //emissive: 0xFF0300,//color of the material, essentially a solid color unaffected by other lighting. Default is black.
    specular: 0xFF0300,//color of shine
    shininess: 65,//default is 30, higher the shinier
    //reflectivity: 100,//not sure what values are, but didn't make diff
    //opacity: 0.4,//0.0 - 1.0
    transparent: true,
});

var textGeom2 = new THREE.TextGeometry( 'Jafty 3D Gallery', {
    size: 120, //text size
    height: 80, //thicknes of text's extrude!
    curveSegments: 3,
    font: 'janda manatee solid',
    weight: 'normal',//normal or bold(both don't always work with all fonts)
    style: 'normal',//normal or italics(both don't always work with all fonts)
    bevelThickness: 12, //how deep bevel goes into text
    bevelSize: 8, //dist of bevel from text outline
    bevelEnabled: true
});
textMesh2 = new THREE.Mesh( textGeom2, material2 );

textGeom2.computeBoundingBox();
var textWidth2 = textGeom2.boundingBox.max.x - textGeom2.boundingBox.min.x;

textMesh2.position.set( -0.5 * textWidth2, 0, 60 );//left-rt/high/far
scene.add( textMesh2 );

pivot = new THREE.Object3D();
pivot.add( textMesh2 );
scene.add( pivot );
}//end init function

function render() {
renderer.render(scene, camera);
}

function animate() {
window.requestAnimationFrame(animate);
render();
pivot.rotation.y += 0.015;
}

init();
animate();
</script>
</body>
</html>

What part of the above code makes it work?

Good question. All goes according to a normal 3D text reduring until after where I added the textMesh2 object to the scene. Look at the line that starts with the word piviot. Here's the functional code that allows us to rotate the text by it's center axis instead of an axis off to the left of center:

Put this in your init function:

pivot = new THREE.Object3D();
pivot.add( textMesh2 );
scene.add( pivot );

Then, place this in your animate or update function:

pivot.rotation.y += 0.015;

What we are doing here is adding a new Object3D to the scene and then adding our textMesh2 object to the pivot object and finally in our update or animate function, we rotate the pivot object containing the text object which rotates on it's center axis now! You can change the no. in pivot.rotation.y += 0.015; to make it rotate faster or slower. Make it a negative no. to rotate the other direction.