Programming
Exploring programming possibilities.
Syntax highlighting by Prettify.
Nested Sortables
Summary
Testing to see if I can have many levels of inter-list sorting with the jQuery UI. I can!
jQuery Font Size Animate
Summary
Just testing to see if jQuery can animate font size. It can!
Notes
The actual animation only requires the .animate({fontSize: "(size)px"},duration); line, but I added more code like callbacks so the button can work more than once.
Reusable Calendar Project Update 4
Summary
Added the pre-Oct 1582 restriction on the reusable calendar. (Working version, Update 4 version)
Essentially, the addition from Update 3 is the function checkRestraint(), where it checks the date being dragged or clicked on to see if it should be set to Oct 1582 or let it be.
I also used the checkRestraint() function to make the cursor look normal when the mouse is over a date that should not be available, even though they can click on it, but it would just move to Oct 1582.
Check it out and let me know if it the functions don’t work properly or intuitively.
Read the rest of this entry »
Calendar Strips Drag on a Grid
Summary
I isolated the dragging portion of update 3 of the reusable calendar project to show what options under the draggable jQuery UI to use.
In the draggable() function, I used the grid: [0, 15] to restrict its movement to 15 px vertical, then I used containment: [0, y1, 0, y2], where y1 is the offsetTop value of the strip itself when it’s at the last month/digit, and y2 is at the first month/digit, to restrict its range so the strip won’t go past the first and last value.
Reusable Calendar Project Update 3
Summary
Adding more functionalities to the date display to the reusable calendar. Now you can click on the months or year digits, or you can drag the strips to change the date. (Before, you can only click on the arrows move forward or backward one month at a time.)
This dragging function was made easily possible by the jQuery UI. It takes a lot of the grunt work out of the process.
Notes
The current range is Jan 1000 to Dec 9999. But technically, the calendar doesn’t apply before October 15, 1582, since that’s when the Gregorian calendar was first adopted. So I will add that restriction in the next or upcoming updates.
Reusable Calendar Project Update 1
I mentioned in my latest monthly update on Flush that I am working on a special calendar that I will hopefully display on the home page of the website when it’s all done. Here is a screenshot of the basic set up I have so far:
It might look a bit complicated, but the concept is delightfully simple (to me at least). I will probably explain more in detail later on, but basically, the idea is that with the set up on the left, you can generate any layout of the month we see in practically all calendars in the world.
jQuery UI Drag/Drop Basics
Summary
Moving into the jQuery UI section and testing the dragging and dropping functions.
Notes
Notice in the demo that the box on the right is set to float:right, so if you supposedly dropped the green box into it, and change your window width, the green (turned light grey) box stays at the same place while the right box moves to the left. Got to fix that experience in future, more complex versions.
Slideshow with Controls
Summary
A continuation of the previous slideshow demo but with controls to play, stop, advances, and select slides.
Notes
The images in this demo stack one on top of another from 1 to 9, which is why the top image starts with 9 and plays down to 8, 7, 6, etc.
3D Basics
Summary
Testing the box, sphere, and camera features in Processing. In the camera demo, I tried to create a box with six squares, but they don’t seem to fix nicely together nor perfectly aligned to the sphere with the same center.
Screenshots
Word It: Flies All Around
Summary
Using Processing to go beyond the Word It medium to learn many functions of the programming language.
This month’s theme is Fly, so I decided to go semi-obvious and spell the word by filling the negative space using images of flies. It sort of reminds me of the Orkin poster where it collects pests with adhesive printed in the Orkin logo pattern on the poster.
Here is my entry on Word It.
Read the rest of this entry »
Classes in Processing
Summary
Learning how to write a class in Processing while having fun with time-based and mouse-based movements.
Basic movements determined by time.
Tracking the movements, still based on time.
Tracking the movement, based on time and mouse position.
These examples don’t really do much, except create interesting forms. And it’s different every time since they’re based on the current time and mouse position. At least I learned about classes in Processing.
Augmented Reality Initial Test
No programming in this post, but it’s the product of it.
A while ago, I saw a post on my friend Law’s blog where he played with this “augmented reality” toy using a visual marker. I thought it was cool but didn’t think much of it because I was a bit more busy at the time to look into it. Well, now that I’m beginning to be more interested in ActionScript and other programming languages again, I thought I’d give it a second look.
Processing Geometric Form
Summary
Using Processing to automatically generate the forms of connections of regular polygons instead of manually drawing them as I had two weeks ago.
Here are three screenshots of the animations at different point-number (8, 50, 200, respectively) definitions. Each of these “animations” runs with the same number of starting points and animates by upping the number of points it skips before drawing a line.
iPhone Web App Icon
Summary
Testing adding a custom image as the “web app” icon. This is the image to be used for the icon:
querySelectorAll()
Summary
Basically, bringing in the power of jQuery selection without using jQuery. Only works in Safari for now.
@font-face
Summary
Testing Safari font import function without Flash or the user downloading the font. Works in Safari 4 but not in iPhone.
Webkit CSS Transitions
Summary
Testing Safari/Webkit’s CSS Transitions, where you can create smooth object animation and effects without Flash or jQuery, and very minimal JavaScript, if any. You need Safari 3.1+ to see at least some of these effects. In some cases, the effects only works on the iPhone.
Console Profile
Summary
Testing how the console.profile() method works. Even though I’ve had Firebug for months, I learned how to use it from watching tutorials of Safari’s Web Inspector tool.
To see how it works. You’ll need to have a developer tool that has a console profile function. Firefox has a Firebug add-in. Safari has one build-in.
Video and Audio Tags
Summary
Testing the simplified method of putting video and audio on web pages. The <video> and <audio> tags are supported in HTML5. If your browser does not support HTML5, then you can’t see the videos. In which case, you’ll have to include a fallback code.
Programming Section Prettified
Just integrated the Prettified script to the programming section. Instead of me fading only the comment lines in the code, Prettified color-codes everything for me!
Before
