There are a few things that should be noted here, this is not just a simple stepper controller it's a smart controller which can be easily updated and changed.

Some advantages of the driver :

• more drive modes selectable by jumpers or program (normal, half step,  high torque)
• power saving mode
• ability to add temperature sensors, limit sensors to protect the machine

The driver is built around a pic16f84 microcontroller, basically the circuit is a tension stabilizer, an oscillator for the pic microcontroller, some components to set pin B0 as interrupt and all the ports pins are connected to pins so they can be easily connected.

WARNING: to create this you will need to program the pic microcontroller, and for that you need a programmer, you can see how to build one on this blog, here : pic 16f84 jdm programmer

Here is a picture with the final product :

stepper driver front view

stepper driver back view

2 controllers in an 2 axis driver

For the pcb design i used the eagle software (great software) to create first a schematic then the board and then the print files,

here is the schematic :

Stepper controller schematic

The huge advantage for this is that you have all the port pins connected to pins, and all of them except the pin b0 (which is made to be kept low or high) can be used for anything.

In this case we have pins bo - tact, pin b1 - direction, pins b2- b5 as phases selection.

And now here are the designs for this schematic :

bottom view

top view

And here is the file ready to be printed, this file is at the actual dimensions :

stepper controller print

In the above image the top layer is already mirrored so all you have to do is print it and follow the instructions from this post : How to create PCB’s using toner transfer method

All you have to do now is to program the pic, here is the compiled version : Compiled program

The program is compiled using ccs compiler, if you are interested here is the  source code : source code

And this is is.... have fun.

Related posts:

1. Stepper motor inteligent driver and controller
2. programming the pic16f84
3. Testing my stepper motor driver and software

As you can see I created a paper cube and inserted the led into it to have a diffuse light, or else the 3 basic colors  will appear as 3 red circles, and we don't want that.

Here are some pictures too :

Mood light

the paper cube inside which the led is inserted

the rgb led

And if you are interested in building the paper cube here is the plan (print on an A4 sheet of paper) :

Paper cube

If you are interested here is some theory :

Each color is build using 3 base colors : red, green and blue, the led has 4 pins, a comon one and one for each color, so you can individualy turn on and off each color, so we will use 4 pins from the paralel port.

In my program (which is not yet optimized) each component (rgb) can have a value between 0 and 255, to do this we have a huge while cycle where we show the colors, here is a diagram to make it easier.

Diagram

So from diagram is pretty clear, based on each color value we show that color an amount of time, as bigger the value, more the time and brighter the color, a resolution of 255 values for each color is more then enough for this case.

There are more things in the program, for example you can increase or decrease the value for each color using the keyboard to see how diferent colors look like.

Also from the setR, setG, setB functions you can customize what to do for each color, in case you use diferent pins i used pin0: red, pin1:common, pin2: blue, pin3: green, feel free to use any other combination but remember to change those functions.

Any questions are welcome.

Related posts:

1. Stepper motor inteligent driver and controller
2. Stepper motor controller

Web 2.0 is more about user experience and seeing the web as a platform, make the user feel like he is using a very complex, fast and easy to use at the same time application, and for that wizards are great.

In this tutorial i will explain the basic concepts and give an basic wizard example for user authentication and sign up, here is how i wanted the wizard to work :

Wizard steps

this wizard will only have 3 pop ups, here they are, to be more clear :

Wizard starts

Login popup on wizard

Create account in wizard

As you can see each popup is clear and you can navigate back and forward between them.

Now, some of the advantages of using those wizards :

• no extra html is loaded when the page loads, all popups are loaded dinamicaly
• no extra load on browser to create all the popups at load time
• all have the same style
• they are very easy to open (just call a function with the popup name)
• they are stored in a xml file and very easy to change
• they are very user frendly
• popups are destroyed on close so no extra load on browser

There are also a lot o feature that i want to implement but they are missing...

So here how it's done in a few easy steps

1. make sure that you added jquery, and jqueryUI with the dialog functionality

2. create a custom jQuery theme, just in case you want to change the design at a later date.

3. create the function that loads and shows a popup, here is the entire file. Just make sure that you change the APP_URL in the file with the url to your project.

4. Create the php file which will send the data to the client (in my case that file is index.php) also you can send more parameters to that if you want only name is mandatory in my case, the name must be the same as the .xml file in which the popup is stored (i'll show the xml file later). Here is the php code which wil generate the data for the javascript part, this is json data :

 
$content = file_get_contents ("popups/".$_POST['name'].".xml");
			$xml =  new SimpleXMLElement($content);
			$res = array();
 
			$res['count'] = $vars['count'];
			$res['title'] = (string)$xml->title;
 
			$res['content'] = (string)$xml->body[0];
			$res['content'] = str_replace("{[","<",$res['content']);
			$res['content'] = str_replace("]}",">",$res['content']);
 
			$res['buttons'] = array();
			foreach($xml->buttons->button as $button)
			{
				$res['buttons'][]=array("label"=>trim((string)$button->label),"action"=>trim((string)$button->action));
			}
 
			die(json_encode($res));
 

As you can see here the xml files are stored in a separate folder to make them easier to organize. Also you need to have the simpleXML (php extension) installed on your server but this is there on 99% of the cases, so no need to worry.

5. The last thing is the xml file that will store the popup, this is my login popup :

 
<?xml version='1.0' standalone='yes'?>
<content>
	<body>
		{[div class='error' id='login_errors']}{[/div]}
		Enter your credentials here :
		{[form]}
			{[div class='form_line']}{[div class='form_label']}Username:{[/div]}{[input type='text' id='login_username' class='form_input'/]}{[/div]}
			{[div class='form_line']}{[div class='form_label']}Password:{[/div]}{[input type='password' id='login_password' class='form_input'/]}{[/div]}
		{[/form]}
	</body>
	<title>Login</title>
	<buttons>
		<button>
			<label>Login</label>
			<action>
				data = new Object();
 
				data.action = "User::auth";
				data.username = $('#login_username').val();
				data.password = $('#login_password').val();
				data.ajax = 1;
 
				$.post(APP_URL+"index.php",data,function(data){
					$('#login_errors').html(data.content);
				},"json");
			</action>
		</button>
		<button>
			<label>Close</label>
			<action>$(this).dialog('close')</action>
		</button>
		<button>
			<label>Back</label>
			<action>
				DialogsManager.getInstance().loadDialog('auth_method');
				$(this).dialog('close');
			</action>
		</button>
	</buttons>
</content>
 

One problem with this is that you can't use "<" and ">" in your xml so you need to replace them, i used "{[" and "]}" so a <div> now it's {[div]}.

And this is it, you should try it and let me know if there are any problems.

Related posts:

1. Greasemonkey, create a options panel using jQuery
2. Autoupdate on greasemonkey script, example from “mousehunt improvements” script.
3. GreaseMonkey, Jquery and the greatest mouse hunt script.

greasemonkey options panel with jquery

Hi, this tutorial is also based on the mouse hunt script "facebook mousehunt improvements" created by me, and in this one i will explain how to create an options panel (only check boxes at this time) and save it.

Here is my final result with this script :

If you want to try this, remember to load jquery correctly as described in this post at number #4.

First of all, the data is saved in a cookie as JSON, i have an object where i save all my data and i save that object as JSON on a cookie. Because javascript does not know to convert an object to a json string i used a class which does that, the class is not created by me, I just use it as it is, here is the fie : json
I copied the content of the file inside my script so i don't have to load it remotely, anyway it's just a line , so you should also copy this at the beginning of your greasemonkey script.

As i said the data is saved as cookie, here is the functions which will create, and read a cookie :

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

Also in my program i read the cookie when the script starts so the data object "myData" in my case will be populated and available in the entire script :

var myData = new Object();
try {
	if(readCookie("gm_pl_data")!=null)
	{
		myData = JSON.parse(readCookie("gm_pl_data"));
	}
	else
	{
		//if there is no cookie we initialize it
		initCookie();
	}
}catch (err)
{
	initCookie();
}

In my case gm_pl_data is the name of the cookie in which i save the data. Here is the initCookie() function, this will just initialize the objects inside the myData object :

function initCookie ()
{
	myData = new Object();
	myData.allLogs = new Object();
	myData.allChese = new Object();
 
	savePersistentData();
}
 
//will be valid 1000000 days
function savePersistentData ()
{
	createCookie("gm_pl_data",JSON.stringify(myData),1000000);
}

I let in there all my init objects so io can see how to initialize them if you have more. You can also notice the savePersistentData function which will update the cookie and save the persistent data .

Until here we only had generic information about how data is saved and the functions which save the data. Now I'll go in more details for the actual options panel. The panel is actually a div in which you can enter any thing you want, but the values of the check boxes will be saved  and their status restored when the page reloads.

So here is how my panel looks like :

jQuery("#gm_pl_options_container").append("Show the timer
<input id="gm_pl_check_show_timer" type="checkbox" />
");
	jQuery("#gm_pl_options_container").append("Automaticaly sound the horn
<input id="gm_pl_check_sound_horn" type="checkbox" />
");
	jQuery("#gm_pl_options_container").append("<strong>Kings rewared options</strong>
");
	jQuery("#gm_pl_options_container").append("Play youtube on kings reward
<input id="gm_pl_play_sound_on_reward" type="checkbox" />
");
	jQuery("#gm_pl_options_container").append("Play midi on kings reward
<input id="gm_pl_play_sound_midi_on_reward" type="checkbox" />
");
	jQuery("#gm_pl_options_container").append("Show alert on kings rewared
<input id="gm_pl_show_alert_on_reward" type="checkbox" />
");
 
	setOptions();
 
jQuery("#gm_pl_options_container input").click(function () {saveOptions()});

in this case the id of the div inside which i enter the options is "gm_pl_options_container", and i you can see that setOptions() is called, this will set the default options for the check boxes based on the myData object, here's the code :

function setOptions ()
{
	if(typeof myData["options"] == "object")
	{
		for(i in myData["options"])
		{
			jQuery("#"+i).attr("checked",myData["options"][i]);
		}
	}
}

In my case the options are saved in myData["options"] the myData object is the main script object and all the scripts data is saved there, not just the options.

And after the setOptions function is called we also have an intresting line, this will add an onclick function to each input on that div, and in this function we call saveOptions(), this function will get all the inputs in that div, and save the values in myData['options'] object, and also write the cookie to make sure that the values are not lost on page refresh :

function saveOptions ()
{
	if(!(typeof myData["options"] == "object"))
	{
		myData["options"] = new Object();
	}
	jQuery.each(jQuery("#gm_pl_options_container input"),function () {
		if(this.checked == true)
		{
			myData["options"][this.id] = true;
		}
		else
		{
			myData["options"][this.id] = false;
		}
	});
	savePersistentData();
}

Every thing you have to do now is use those options, there are 2 ways to do this, you can check the status of the check box or you can get the value from the myData['options'] object, they are the same, i use the object :

if(myData["options"]['gm_pl_show_alert_on_reward'] == true)
		{
			alert("You have a king's reward!");
		}

And this is it, if you have any questions let me know, and remember, if you use mouse hunt don't forget to use my script : Facebook mousehunt improvements

Related posts:

1. GreaseMonkey, Jquery and the greatest mouse hunt script.
2. Autoupdate on greasemonkey script, example from “mousehunt improvements” script.
3. jQuery popups wizard, web 2.0 ideea and usability

The idea behind this is, that the user will install the script and most probably will never go back and check if there is an update to that script, so you, the developer, will have to fix this problem for the user. I didn't wanted to automatically install software or updates on a users PC so i'm notifying the user that there is an update available, so he can install it by hand (only click on the link).

There are 2 parts for this, the Javascript part (inside the greasemokney script) and the server part (php in my case). The principle is simple, we have a variable inside the gresemonkey script which will contain the version of that script :

var cVersion = "1.14b";

and we have a function which will call an url giving that version as a parameter :

//check if a new version is availble.
	GM_xmlhttpRequest({
method: 'GET',
url: 'http://path.to.your.script.php?version='+cVersion,
headers: {
'User-agent': 'Mozilla/4.0 (compatible) Greasemonkey',
'Accept': 'application/atom+xml,application/xml,text/xml',
},
onload: function(responseDetails) {
$("#gm_pl_version_container").html(responseDetails.responseText);
}
});
 

What this function does is pretty straight forward, will call an url (passing the script's version as a parameter) and put all the returning content (presumed html) inside a div.

Now, we have the server script, which we called earlier. This script also has a variable inside :

$local_version = "1.14b";

which contains the latest version of the script. This script is also pretty straight forward, will compare the latest version of the script, defined here, with the version provided as a parameter, and based on that will return an html, here is the entire script :

 
<?php
$local_version = "1.14b";
if($_GET['version']!= $local_version)
{
	print "
<div style='padding:3px'>
	A new version of this script is available.<br>
	Click <a href='http://userscripts.org/scripts/source/57446.user.js'>here to upgrade</a>
	</div>
 
	";
}
else
{
	print "your script is up to date ($local_version)";
}
?>
 

And this is it.
If you don't want to use Jquery, no problem you will have to replace this :

 $("#gm_pl_version_container").html(responseDetails.responseText);

with :

document.getElementById("gm_pl_version_container").innerHTML(responseDetails.responseText);

where gm_pl_version_container is the id of the element where you want to insert the content.

Related posts:

1. GreaseMonkey, Jquery and the greatest mouse hunt script.
2. Greasemonkey, create a options panel using jQuery
3. jQuery popups wizard, web 2.0 ideea and usability

I started working on ma spare time in this... was not easy because some things ware hard to test... bunt eventually i did it.

You can see the script here : http://userscripts.org/scripts/show/57446 the script has been around for about a month and already has 1200 installs and going up, and it's becoming "the mouse hunt script" .

Now i will explain some of the problems i encountered on creating the script.

1. Saving persistent data, grease monkey does not have a very good way for this, so i decided to create an object where i save all the data and then save the object as JSON in a cookie

2. Updates, i was thinking that it would be nice to notify users when an update is available, so i did this by creating a .php file in a server and store there the latest version number, the script checks that version with it's current version and if is different will show a message

3. Passing parameters on a function attached to an event, this was the most tricky one... was pretty complicated... here is the solution :

$.each($(".huntername"), function (i,o) {
 
			var id = 0;
			var childs = $(o).children("a");
			var link = $(childs[0]).attr("href");
			var name = $(childs[0]).html();
 
			id = link.substr(link.indexOf("=")+1);
 
			$(o).html($(o).html()+"<a id="gmpl_af_&quot;+i+&quot;" onclick="return false" href="#">(add to links)</a>");
			_e("gmpl_af_"+i+"").addEventListener("click",function () {gmpl_addFriend(id,name)},false);
		});

4. How to use jquery in a grese monkey script, actually for this i fond the solution somewhere on the internet... : http://joanpiedra.com/jquery/greasemonkey/

// Add jQuery
    var GM_JQ = document.createElement('script');
    GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
    GM_JQ.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(GM_JQ);
 
// Check if jQuery's loaded
    function GM_wait() {
        if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
    else { $ = unsafeWindow.jQuery; letsJQuery(); }
    }
    GM_wait();
 
// All your GM code must be inside this function
    function letsJQuery() {
        alert($); // check if the dollar (jquery) function works
    }

And all your code should go where the alert($) is. Only if you have some functions you should put them outside that function.

Related posts:

1. Autoupdate on greasemonkey script, example from “mousehunt improvements” script.
2. Greasemonkey, create a options panel using jQuery
3. jQuery popups wizard, web 2.0 ideea and usability

and here is a unipolar motor controlled by the driver.

Also in this second video i use different sources for powering the circuit board and the power source for the motor.

Related posts:

1. Stepper motor inteligent driver and controller
2. Stepper motor controller
3. My CNC machine, the beginnings, the X axis working

So the tip from today is about using some tools available on the web to find the right keywords in your optimization work, more specifically will tell you how you can find synonyms for your keywords.

The most important tool is google search itself, if you didn't know you can do a search for results that contains synonyms too, not just the keyword you can do that by adding the Tilda character in front of your search "~" so in stead of entering "cars" you should enter "~cars". You would say that this does not return the synonyms but searches for the synonyms, actually it does return the synonyms, they are the words in bold in your results. Those are very important in your search optimization words, because you can use synonyms when optimizing a page.

An other tool is google translate, for many words will return synonyms to.

And the last but not the less important is Microsoft Thesaurus which will return the actual synonyms for your word.

There are some other tools availeble on the internet, but thery are not so important as this one.

Related posts:

1. Seo Tip of the day !
2. subdomains in SEO
3. jQuery popups wizard, web 2.0 ideea and usability

I know that the internet is full with lots of seo tips or search engines optimization tips but the tips on this blog will help you much more to optimize your site and will help you rank high in the search engines. The tips here will be targeted more for the google search engine because it's the most used by the internet users.

So enough talking let's get straight to our seo tip of the day.

Seo tip number 1 :

when calculating the value of a keyword you can use both KEI (keyword effectiveness  index) and KOI (keyword opportunity index) to sort your keywords by relevance. Try to find the key words that have a good score for both of them, but usually KOI shows the difference better.

Here is how you can calculate KEY versus KOI for your keywords :

KEY = <number of motley searches>/<number of competitors>

KOI = <number of motley searches>*<number of motley searches>/<number of competitors>

I hope that this seo tip will be useful for you in your quest for the first position on google or any other search engine.

And remember, come back tomorrow for an other useful seo tip, because as i said above, we have lots of tips coming up each day.

You can also follow us on twitter to find more useful information about search engine optimization http://twitter.com/rsergiu2003.

The umkk SEO Team (me) !

Also if you have any comments or questions please do not esitate to post a comment, i'll reply  as quiqk as i can !

Because many people did not understood how the key efectivnes index and key opportunity index are calculated i'll post an example image bellow, ofcourse i covered the keywords. Any way, as those values are very important in your search engine optimization work, again if you have any questions please let me know.

keyword tables

Related posts:

1. Seo tip of the day – using the free tools on the web
2. subdomains in SEO

There is no straight answer, because is not that easy, there are a lot of factors which you need to take in considerations when you decide that sub domains are good for your SEO strategy and how search engines will see your site. I hope that the lines bellow will help you make a good decision and get the best results with your site.

The first thing which is long debated is if google treats sub domains as different sites, the answer to this is very simple : NO, google does not treat sub domains as different sites, and this comes from an google engineer (Matt Cutts).

An other thing is if using sub domains will help your site to be indexed better, this answer is also NO, using sub domains will not help you get indexed better.

Now, things that do changes when you use sub domains is page rank, the page rank of your main site will drop but the rank of the sub domains will be higher than without sub domains, so there will be more people going to the sub domains pages and less people going to the main page, than without using sub domains, the idea is that page rank will be shared between all the sub domains and the main domain.

As a conclusion I would say that you should use sub domains only if you know exactly why (for example have a better structure of the page) and if your target is not to get the users to a single page but to more pages inside your site. But if you don't know exactly what to do I suggest to use directories (www.yoursite/directory/page.html).

Related posts:

1. Seo Tip of the day !
2. Seo tip of the day – using the free tools on the web