|
Developer Blog
05.05.09
Soft-I/O Online
For the last three years, I have been the lead UI engineer for the development of an application
called Soft-I/O (http://www.soft-io.com) which is embedded on a device which allows users to connect devices to interact
with other devices through a web based software. Learn More
04.29.09
Robot Control Panel
Designed and developed a control panel with graphical enhancements for usability integraded with
a controller which connects to a touch screen panel and joystick to control the robots.
I have the robots displayed on a radar like screen, the direction they are facing is represented by a pointer. I got it so the robots can smoothly fly round the radar screen and rotate the pointer by their angle degree. Interesting thing was I took the image of a circle with a pointer of it, and using php graphic library I would rotate the image by a degree and save it, thus creating 360 degrees of the circle image. View demo
03.14.09
Massive ECommerce Data Handling
At the beginning of the year, I contracted for a ECommerce company here that
had a very large set of data which needed to be reformatted, validated, processed, filtered, etc...
Previous to me, two other engineers failed to complete this task and three months have past.
I am proud to say I completed the task in two weeks, on the day of successfully submitting the data,
my clients received orders INSTANTLY. He was back in business and I was glad I could help.
The task consisted of a lot of PHP and EXCEL and DB work.
12.31.08
CyberENA Relaunched
I had a hard time releasing a first version of CyberENA because I have so many ideas and work I wanted to constantly add to this site, but as an old codemaster friend of mine shared with me - "Dont get it RIGHT, get it WRITTEN". Thus, I bring to you, CyberENA Version 1 Project Alive. Imagination is my only limitation, I try to bring to reality whatever I can see. This site contains several innovative special effects I create, check out the lab section to learn more.
Services
Over 10 years of web based software application development experience.
Skills: Javascript (AJAX / DHTML / Object Oriented) - HTML - CSS - PHP - JSP - SQL - PHOTOSHOP
Portfolio
Contact
Email: production@cyberena.com
Laboratory
The laboratory will constantly be updated with new tips and tricks to more innovative ideas, useful tips and research.
More coming soon, check back for updates.
Laboratory - Soft-I/O
For the last three years, I have been the lead UI engineer for the development of an application
called Soft-I/O (http://www.soft-io.com) which is embedded on a device which allows users to connect devices to interact
with other devices through a web based software.
The application is heavily web 2.0 based, with AJAX front end, RSH for history management, jQuery, javascript animations effects and all done in object oriented javascript design. The application consists of approximately 25,000 lines of code (approximately 10,000 javascript, 15,000 DHTML) hand written majority by me. Configuring Devices - View Configuration Page  This is a page where you can configure a device. For this demo, use your mouse and drag and drop
the colored circled on top into the section below. You can easily use GUI to make assignments of pins here.
There are also a lot of other validation logic, for example, some pins must be adjacent to each other.
You can play with that on this very screen, you will see the enforcement automatically happen as you drag
all four pins. Finally, another thing you can do is share certain pins. In this example, if you want to share
a pin, drag and drop the blue one over another blue one to watch how it is handled. These are just a few examples
of making something that was originally difficult to configure easily done through graphical enhancements.
Custom Visual IDE design page - View Visual IDE Page
On the left, you'll have a list of devices with possible data items you can add. For an example, Click on one of the devices like RTD. Then click the + button, you will see it thrown on to the page on the right. You can drag and drop where you like that value to be displayed, change it into a chart format, change the font, color, whatever. Then if you wanted to put a label on it, click on the "T" button on the top of the options box to add TEXT and type in your text, format it, and drag and drop it. I could go on forever. In the background, it is saving what you are doing through AJAX calls and the data is converted and saved by JSON Objects.
Programming devices using graphical user interface wizards - View Configure Sequences Page
Laboratory - Robot Radar
This is one piece of a control panel I created for controlling robots that fly round in a massive pool. This "radar" shows the location of the robots and the direction they maybe facing. This is connected to a backend controller which has a joystick and touch screen buttons enabling the user to control the robots. The backend controller would send up positioning data to tell the UI where the robot is located in scale to reality. Essentially I did this by creating a radar like background, making two ball images with transparent png backgrounds. The tricky part was one of them needed to display which direction the robot is facing. I couldnt think of any way to easily make the image rotate dynamically and quickly so I used PHP GD library and had the image rotated 360 degrees and saved 360 times. So there is an image for each degree, referenced by "smallCircleAngle.90.png". The 90 is the angle of the image to be loaded. This worked out great, though its tricky because you have to make sure the image's center point is in the center correctly for the script to rotate from. In the script, we save it as transparent background around the ball.
Laboratory - Glowing Fog
This effect gives off a glowing fog effect. Step 1: You will need at LEAST two images. This effect works best if its images of fog to give an effect that looks as if its almost animated, when really all we are doing is fading one image to another. Load the image on your page somewhere using absolute or fixed positioning. img src="images/fog1.jpg" style="position:absolute;top:30px;left:30px;z-index:1"Step 2: You'll need to edit the same image with photoshop, modifying it so the fog is larger, smaller, shifted a little to the right or left. The image has to be saved in the same size as the first one. Once you have this second image created, also place it on the page using absolute or fixed positioning, also setting display to none and zindex a little higher. img src="images/fog2.jpg" id="fog2" style="position:absolute;top:30px;left:30px;z-index:2;display:none;"Step 3: Now the concept is to fade one into the other. One way you could do it is have the first image already displayed, then using JQuery fadeIn command fade in the second one. This will fade it in over the first one giving a somewhat animated glowing smoke like feel if you did the photoshop alright.
function fade1() {
$("#fog2").fadeIn(3000);
}
function fade2() {
$("#fog2").fadeOut(3000);
}
function startFogRotation() {
setTimeout(fade1, 3100);
setTimeout(fade2, 6100);
setTimeout(startFogRotation, 9100); //repeat
}
This design sets fog1.jpg as the image always displayed on the very bottom, while fading into fog 2 in and out simulating an animated transition making fog look like its moving.
What I did for my fog is added a total of 3 fog images, so it moved slowly from small to medium to large fog design.
Laboratory - Broken Light
This effect simulates something you may see on a old neon sign that maybe found in front of a bar which says "Open".
The sign would sometimes flicker and blink every once in a while, almost as if it may not continue to stay on.
I used this effect to make the horses eye glow and also to fade in and out images in the background lightly just to have some special effects which I thought added to a ghost like theme. Instructions Step 1: You will need a minimum of two images. In my case, I used an image with the horses eyes colored gray, and another image with the horses eyes colored white. Load the first image setting its CSS position attribute to be fixed or absolute. Set a TOP and LEFT point and set a z-index. img src="images/horse1.jpg" style="position:absolute;top:30px;left:30px;z-index:1" Step 2: Load the second image also setting the position of it to the exact same location as the first image with a z-index greater then the first image (i.e. 2). Also make sure you set the display of this to none and include an ID on this image. An ID on the first image is not required. img src="images/horse2.jpg" id="horseEyes" style="position:absolute;top:30px;left:30px;z-index:2;display:none;" Step 3: Include the script below
function BrokenLight() {
var that = this;
var g_imgID1 = null;
this.start = function(imgID, bRepeatForever, repeatTimer) {
g_imgID = imgID;
setTimeout(show, 100);
setTimeout(hide, 250);
setTimeout(show, 200);
setTimeout(hide, 250);
setTimeout(show, 320);
setTimeout(hide, 400);
setTimeout(show, 450);
setTimeout(hide, 750);
setTimeout(show, 850);
setTimeout(hide, 950);
setTimeout(show, 1000);
setTimeout(hide, 1100);
setTimeout(fadeIn, 1500);
//hack: bl.start(), if you know how to call itself within itself here without referring to the instantiated class name, plesae let me know
bRepeatForever ? setTimeout(function() { bl.start(imgID, true, repeatTimer); }, repeatTimer) : null;
};
function show() {
$("#" + g_imgID).show();
}
function hide() {
$("#" + g_imgID).hide();
}
function fadeIn() {
$("#" + g_imgID).fadeIn(1000);
}
}
var bl = new BrokenLight();
Step 4: Run the start() function sending in the second image ID.
bl.start("horseEyes");
You can also send in params if you want to repeat forever and how often to repeat
bl.start("horseEyes", true, 60000)
Laboratory - Ghost Writer
The Ghost Writer is a script which types a string one character at a time at variable speeds to
simulate a human is typing. Since there is no human actually typing, it can give off a ghost like
feeling. Thus, I named it the Ghost Writer.
I integrated this script into a website I created with music, photos and a deep personal message using the ghost writer effect in an attempt to reconcile with my ex-girlfriend. I wanted to give the text a much more human, personal and thoughtful touch (girls like thoughtfulness!). The reconcilation attempt FAILED, but the script was not a total loss and now it remains savaged from the crash and burn ex-girlfriend experience. Though I would not recommend using this for relationship enhancement purposes. Instructions Step 1: Create a DIV with an ID. Step 2: Add this script to your page
function HumanTyper() {
var that = this;
this.type = function(txt, outputArea, callback, callbackTimer, bClear, clearTimer) {
var interval = 1000;
var output = "";
var randomnumber = 0;
for (var i = 0; i < txt.length; i++) {
output += txt.charAt(i);
setTimeout("ht.writeText('" + output + "', '" + outputArea + "')", interval);
randomnumber = Math.floor(Math.random()*11)
interval += randomnumber*80;
}
bClear ? setTimeout("clearType('" + outputArea + "')", (interval + clearTimer)) : null;
callback ? setTimeout(callback, (interval+clearTimer+callbackTimer)) : null;
};
this.writeText = function(output, area) {
document.getElementById(area).innerHTML = output;
};
}
var ht = new HumanTyper();
Step 3: Run the function type() sending in the text you want to print out and the DIV ID to print it out to. Example: ht.type("Hello World", "humanTextDiv") There are additional parameters you can send in such as what function to call once this script is done (callback), how long to wait before calling the callback function (callbackTimer), whether or not you want the text to disappear after a certain time (bClear) and how long before the text should disappear (clearTimer). COPYRIGHT NOTICE Copyright 2009 Philip Lee All Rights Reserved. CyberENA (http://www.cyberena.com) CyberENA content / source code / graphics may be used and modified free of charge by anyone so long as this copyright notice remains intact. |
