Replay system for KineticJS and HTML5 Canvas

I have been struggling with the lack of replay procedures in HTML5 gaming, with flash things were quite easy because we could save all of our game sessions as movies or swf files that could be later on viewed. With HTML5 we don’t quite have that, or it is not as easy. So I was thinking of ways to produce movies from canvas.
And then it hit me… images can produced as urls and canvas can be exported as an image, and what are continuously changing images? A movie!

So I went on and made a codepen about this. And quite frankly it kinda looks awesome. Of course some more brilliant minds than mine could dig into this and help me make it truly useful for all.

So let’s see the pen first. The procedure is as follows:

We click record and move the box around
Then we stop and we watch the movie that was produced.

See the Pen Record & playback for canvas by Michael Dobekidis (@netgfx) on CodePen.

Continue reading

Adobe Air , export data to .ics and import to google Calendar

Let’s assume you have a dataGrid with some data, and they are categorized by date. Then you wanted to import those data/notes to google calendar (create one and name it “sample Calendar”, or change the calendar name below to match one of your already created calendars.

note:

/* This functionality is implemented in my Calendar Application, and the source code including these functions will be available in the following days at: Google Code
*/

Here is how:

first of you will need the place to save the file…

public function saveAs():void

{

var docsDir:File = File.documentsDirectory;

var typeArr:Array=[“.ics”,”.txt”];

try

{

docsDir.browseForSave(“Save As: || Type only name without extension”);

docsDir.addEventListener(Event.SELECT, saveICS);

}

catch (error:Error){

trace(“Failed:”, error.message);

}

}

//then you will need the google Calendar .ics structure

public function saveICS(event:Event)

{

var newFile:File = event.target as File;

newFile.nativePath +=”.ics”;

var arr:Array=[];

var FINAL_STR:String =””;

/*initialization options, no need to recreate. use as is. */

arr[0]=

[
“BEGIN:VCALENDAR”+”\n”+

“PRODID:=//Google Inc//Google Calendar 70.9054//EN”+”\n”+

“VERSION:2.0″+”\n”+

“CALSCALE:GREGORIAN”+”\n”+

“METHOD:PUBLISH”+”\n”+

“X-WR-CALNAME:sample Calendar”+”\n”+

“X-WR-TIMEZONE:Europe/Athens”+”\n”

];

//to go through the whole dataGrid

for (var i=1;i {

arr[i] = [

“BEGIN:VEVENT”+”\n”+

“DTSTART:”+dg.dataProvider[i-1].year+formatMonth(reverseMonth(dg.dataProvider[i-1].month))+formatMonth(dg.dataProvider[i-1].date)+”T”+formatTime(‘s’,dg.dataProvider[i-1].time)+”\n”+

“DTEND:”+dg.dataProvider[i-1].year+formatMonth(reverseMonth(dg.dataProvider[i-1].month))+formatMonth(dg.dataProvider[i-1].date)+”T”+formatTime(‘e’,dg.dataProvider[i-1].time)+”\n”+

“DTSTAMP:20100123T152831Z”+”\n”+

“UID:”+”\n”+

“CREATED:20100123T101105Z”+”\n”+

“DESCRIPTION: “+String(stripHtmlTags(dg.dataProvider[i-1].comments).replace(/”/g,” “))+”\n”+

“LAST-MODIFIED:20100123T1001105Z”+”\n”+

“LOCATION: – “+”\n”+

“SEQUENCE:0″+”\n”+

“STATUS: CONFIRMED”+”\n”+

“SUMMARY:”+String(dg.dataProvider[i-1].comments)+”\n”+

“TRANSP:OPAQUE”+”\n”+

“END:VEVENT”+”\n”

];

FINAL_STR += arr[i];
}
arr[dg.dataProvider.length] =
[
“END:VCALENDAR”
];

// Save the file

var stream:FileStream = new FileStream();
stream.open(newFile, FileMode.WRITE);
stream.writeUTFBytes(arr[0]+FINAL_STR+arr[dg.dataProvider.length]);
stream.close();
}

/* some formation functions. depends on the format you use on the dataGrid, you might or might not need them. */

public function formatTime(pos,str:String):String
{
var timeArr:Array=[];
var hh = “”;
var mm = “”;
var ss = “00”;
var FINAL_TIME;

timeArr = str.split(“–“);
if (pos == “s”)
{
hh = String(timeArr[0]).slice(0,2);
mm = String(timeArr[0]).slice(-2);

FINAL_TIME = hh+mm+ss;
}
else if(pos == “e”)
{
hh = String(timeArr[1]).slice(0,2);
mm = String(timeArr[1]).slice(-2);

FINAL_TIME = hh+mm+ss;
}
return FINAL_TIME
}

public function formatMonth(str)
{

if (Number(str)<10) str = "0">