Category Archives: Experiments

HTML5 local storage

I have developed a simple HTML5 application that uses the HTML5 local storage is a list of “buy”, and can work offline, once loaded in the browser of an android phone or iPhone, you can work without internet connection:

Go to my example

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Read More ...

Mega Pairs Game

game

Introduction:

This game a”pairs game” features multiplayer possibilities of Sockets.io, is was made only for show  the features and  architecture of a multiplayer development, not for real production game,it uses a Sing in feature to login with Facebook, Google o Twitter credentials ( no need to register), the base is a canvas control that is named “arena” of the game, and only a bar menu to make all tasks.

 technologies used:

this are the architecture components used to develop the game:

at the server side:

  • node.js server
  • sockets.io
  • sqlite database

at the client side:

  • Javascript
  • Mootools
  • Bootstrap
  • HybridAuth

 How it works:

The first time when a user opens the page, observe mode is enabled for default, in this mode you can see all the movements of the game, but you can not interact or flip any card. when the user are sing in, then a new user appears at the left side and the user can flip 2 cards, once the user are in the game his score is saved for the next time game.

Collaboration:

My next goal is that any user can modify the cards images, how to do it?:

To Test the Game

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Read More ...

Slide Puzzle Plugin for WordPress

Hi guys!!

This is my first plugin for WordPress: slide-puzzle It’s really simple to use, only install it, and enable, I have developed to learn about wordpress plugins architecture.

It uses one shortcode generate slide puzzle from any image that you want, as follows:

 [slide-puzzle pieces=X  myimage=’{url}‘ message=’{message}]

Where X are the number of pieces ( be careful 🙂 ), {url} is the image url that can be absolute or relative of  your site, and you can specify one {message} when users completes the slide puzzle.

For example:

 [slide-puzzle pieces=4  myimage=’http://puzle.colome.org/img001.jpg’ message=’It was easy! congratulations’]

 [slide-puzzle pieces=10  myimage=’http://puzle.colome.org/img001.jpg’ message=’You are an ace!’]

It not uses Flash!!  it works on an IPAD or an IPHONE too!!!


 New in version 1.1.0 

[slide-puzzle pieces=X  myimage=’{image_url}‘ message=’{message}‘ backcolor=’{color}‘ endimage=’{final_image_url}‘]

Added two new variables

  • color: in format ‘#rrggbb’ of the background puzzle
  • endimage : url of another image, if you want to show another image when completes the puzzle

sample:

[slide-puzzle pieces=4  myimage=’http://wp.colome.org/wp-content/uploads/2013/06/IMAGE0027-e1370813449218.jpg’ message=’It was easy! congratulations’ backcolor=’#ff0000′ endimage=’http://wp.colome.org/wp-content/uploads/2013/07/1.jpg’]
You can use without new variables and message too:
[slide-puzzle pieces=4  myimage=’http://wp.colome.org/wp-content/uploads/2013/06/IMAGE0027-e1370813449218.jpg’ message=” ]

see this Video about new features


Is based on a canvas element ( only for modern browsers: check), you can customize the default options on plugins management of wordpress

 

If you want to see a demo page for test the plugin, go to: puzle.colome.org

there is a video explain install procedure and use Video

Try it! if you like, post a comment!

link to download  http://www.colome.org/slide-puzzle.zip

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Read More ...

Multiplayer Online Game

Introduction:

I was develop one multiplayer online game “pairs game” with a node.js server , the purpose of this development is to test node.js powerfull features and asyncronous programming techniques.

this project does not uses socket.io (that is the best option to develop whit node.js) becose the “logic” of the game is very simple and with ajax long poll technique is enough to acomplish the goal. The engine of the game works with memory variables( no mysql calls)  and is very fast!!, is a multi game/player server,

About the html of the page, is only one HTML file with his CSS and JS files, all the elements are stored in memory at first load page, after all is done directly with ajax calls (if you press F5 the game restarts)

The engine of the game incorporates one control that checks the origin of the url  for each ajax call, to prevent using the engine to another not autorized sites.

general shema:

The logic is very simple:

  • one user creates one game ( private or public)
  • another user joins to this game.
  • another user joins to this game
  • … (max 4)
  • only the user that creates the game can start de game.
  • the user that have the turn, have 15 seconds to move one chart, if the time expires, then the turn goes to the next user
  • Every movement is distributed to all the users of the game.
  • when one change is done at the game (  2 open cards, and pairs match or not match) , all users that are playing are notified, scoreboard are updated
  • the users that wins the game, is automatically added or updated (+) his general score ( visible at main site)

On the client’s side, a long poll call is done recursively, until game is finished.

If you want to test multiplayer features or view a demo, you can simulate 2 users open 2 browser sessions, or with your friends, enjoy it:   http://fyp.colome.org

this video demostrates the multiplayer features: https://www.youtube.com/watch?v=TzJ2n7D_hxU

 

If you want to send me a feedback or you like to add this game in your site (fully css customizable), and view only your active games and your global scorelist, I can authorize your domain,  contact me: colome.disco@gmail.com

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Read More ...

Asus WL-500gp-V2

Invention with  WL-500gP V2

Meteorology: Experiment Asus WL-500Gp V2

Features:

  • Creating a system for sending automated weather data without the need to have your computer running
  • It consists of a telephone DSL router (Comtrend) in bridge mode, an Asus router, which in turn makes firewalls, ftp server, and server for other wireless devices (mobile, portable, …)
  • there is a USA hosting with unlimited space and bandwidth : Bluehost

Planning:

Firmware of the router:

After trying many frimwares: openwrt,ddwrt,… I have finally decided on Oleg’s firmware, more information about the project:

http://code.google.com/p/wl500g/ , is best adapted to me the router, specifically: WL500gpv2-1.9.2.7-d-r2624.trx becose my router is V2 with 16 MB ram, for a novice like me, with linux, it was quite complicated, the main steps:

  • Download and install Optware to compile programs from the router itself, an alternative is to compile out by a cross-compile with a colinux for example, but is much more complex set you build modules to the router, also with 16 mb compiled ram pretty fast. if you seek on google: optware-install-oleg.sh You will find several links on how to do
  • Mount a usb memory stick as / opt and start it at the beginning:

mount /opt at start up:

[admin@asus sbin]$ pwd

/usr/local/sbin

[admin@asus sbin]$ cat post-mount

#!/bin/sh

mount -o bind /tmp/mnt/disca_1/opt /opt

/opt/sbin/cron

/usr/sbin/wl radio off

  • Disable USB 2.0 support in the web console of the router (if enabled, does not work)
  • Install the following ipkg packages:

ipkg list_installed

buildroot – 4.1.1-13 – uClibc compilation toolchain
bzip2 – 1.0.6-1 – Very high-quality data compression program
ipkg-opt – 0.99.163-10 – The Itsy Package Manager
libdb – 4.2.52-3 – Berkeley DB Libraries
libusb – 0.1.12-2 – Library for interfacing to the USB subsystem.
make – 3.82-1 – examines files and runs commands necessary for compilation
ncurses – 5.7-1 – NCurses libraries
ncursesw – 5.7-1 – NCurses libraries with wide char support
openssl – 0.9.7m-5 – Openssl provides the ssl implementation in libraries libcrypto and libssl, and is needed by many other applications and librari
py-usb – 0.4.1-1 – PyUSB is a native Python module written in C that provides USB access for it.
python24 – 2.4.6-2 – Python is an interpreted, interactive, object- oriented programming language.
readline – 6.1-2 – The GNU Readline library provides a set of functions for use by applications that allow users to edit command lines as they are
uclibc-opt – 0.9.28-13 – micro C library for embedded Linux systems
zlib – 1.2.5-1 – zlib is a library implementing the ‘deflate’ compression system

  • Be sure to record the flash every time: flashfs save && flashfs commit && flashfs enable
  • Modify crontab: one task that makes every minute shipping and another that clears the log every 2 hours to the minute 1

[admin@asus etc]$ pwd
/opt/etc
admin@asus etc]$ cat crontab
SHELL=/bin/sh
PATH=/sbin:/bin:/usr/sbin:/usr/bin:/opt/sbin:/opt/bin
MAILTO=””
HOME=/
# ———- ———- Default is Empty ———- ———- #
*/1 * * * * admin /opt/jordi/jww/envio.sh
1 */2 * * * admin /opt/jordi/jww/borralog.sh

  • Details of the scripts:
  • envio.sh: (script to send the data, explained later)

[admin@asus jww]$ cat envio.sh
#!/bin/sh
wsr=”/opt/jordi/jww/wwsr”
u2=$($wsr)
url=”wget -O /dev/null http://www.weboriginal.org/new09oeo/live.php?C=colotyuor_r1$u2″
echo $url
$url

[admin@asus jww]$ cat borralog.sh
#!/bin/sh
rm /tmp/syslog.log

  • borrarlog.sh: (scipt that deletes the log file of submittals)
  • set the red button to enable-disable wifi ez-setup in the same directory as post-boot /usr/local/sbin:

#!/bin/sh
TIMEOUT=4
if [ $(wl radio) = “0x0000” ]; then wl radio off; exit; fi
wl radio on

Development:

if (showraw==1)
{
printf(“&HI=%d&”, buf5.hindoor);
printf(“HO=%d&”, buf5.houtdoor);
remain = buf5.tindoor%10;
if ((signed) remain<0) remain = remain * -1;
printf(“TI=%d.%d&”, buf5.tindoor / 10 ,remain);
remain = buf5.toutdoor%10;
if ((signed) remain<0) remain = remain * -1;
printf(“TO=%d.%d&”, buf5.toutdoor / 10 ,remain);
remain = buf5.swind%10;
printf(“W=%d.%d&”, buf5.swind / 10 , remain);
remain = buf5.swind2%10;
printf(“G=%d.%d&”, buf5.swind2 / 10 , remain);
printf(“D=%s&”, buf5.winddirection);
printf(“R=%d&”, buf5.rain );
remain = buf5.pressure%10;
printf(“B=%d”, buf5.pressure / 10 , remain);
}

  • Como he comentado, basandome en el programa creado por Michael Pendec, añadi la siguiente opción al ejecutar el programa sin parámetros:
  • This causes the generation of a string of the form: &TO=15.7&TI=15.7&HO=66&HI=45&B=1024&D=NNW&W=20&R=56 that added to get the query string, as shown in the script allows us to send data every minute.
  • In the hosting, I have the page live.php which processes the request i add the record in the mysql database, I leave the code example to give you an idea:
</p>
<p style="padding-left: 60px;">
	.!--?php<br />
	$timezone = +0;<br />
	if (substr($_GET['C'], 0, 9)=='csdfr_')<br />
	{<br />
	$con = mysql_connect("localhost",$_GET['C'],"password");<br />
	if (!$con)<br />
	{<br />
	die('Could not connect: ' . mysql_error());<br />
	}<br />
	$loop=gmdate("Hi", time()+ 3600*($timezone+date("I")));<br />
	$hora=gmdate("H:i:s", time()+ 3600*($timezone+date("I")));<br />
	mysql_select_db($_GET['C'], $con);<br />
	// borro el registre anterior -<br />
	$q="DELETE FROM `live` WHERE `LOOP`='".$loop."'";<br />
	mysql_query($q);<br />
	$raina=$_GET['R'];<br />
	$pluja=0.0;<br />
	<br />
	// busco el valor anterior de pluja -<br />
	$result = mysql_query("SELECT `RAINC` FROM `live` ORDER BY `YMDHMS` DESC LIMIT 1"); while($row = mysql_fetch_array($result))<br />
	{<br />
	// - si ha plogut i vigilo el loop del contador<br />
	if ($_GET['R'] &gt;$row['RAINC'])<br />
	{<br />
	$pluja= ($_GET['R'] - $row['RAINC']) * 0.3;<br />
	}<br />
	else<br />
	{<br />
	$pluja=0.0;<br />
	}<br />
	}<br />
	// insercio principal<br />
	$q="INSERT INTO `live` (`TO`,`TI`,`HO`,`HI`,`BAR`,`WND`,`RAC`,`DIR`,`RAINC`,`DATE`,`TIME`,`YMDHMS`,`H10M`,`LOOP`,`RAIN`) VALUES (".<br />
	$_GET['TO'].",".$_GET['TI'].",".$_GET['HO'].",".$_GET['HI'].",".$_GET['B']. ",".$_GET['W'].",".$_GET['G'].",'".$_GET['D']."',".$_GET['R'].<br />
	",'".gmdate("Y-m-d", time()+ 3600*($timezone+date("I")))."','".$hora. "','".gmdate("YmdHi", time()+ 3600*($timezone+date("I"))) ."','".substr($loop,0,3) .<br />
	"','".$loop."',".$pluja.")" ;<br />
	mysql_query($q);<br />
	mysql_close($con);<br />
	// aqui cada 10 minuts , gravo els registres<br />
	if(substr($loop,2,1)=="0" )<br />
	{ $q="";<br />
	}<br />
	}<br />
	//else<br />
	//echo 'Error';<br />
	?&gt;</p>
<p>
	

publication:

  • The last step is to publish the data online, this is accomplished with a script “cron” which runs every 10 minutes i used to publish data on 5 sites :
  • Meteoclimatic: from a template generated a meteoclimatic.html file and the configuration of the station, put the url where I created the file
  • Awekas: I generate a file at the station awekas.txt i configure the url where you have to go to see
  • Weather Undergroud: By sending an HTTP GET request data
  • Personal Weather Stations: same as Weather underground.
  • My own page

 

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Read More ...

Categories

Subscribe to my Newsletter