« Posts tagged jquery

MineCraft Math

So, I tend to now and again do random bits and pieces to MineCraft Servers.

Of late I have been working with ZimDoorCraft, took the existing relatively static site, and flipped it over to a Mini PHP Powered Content Management System, that I wrote and roll out to smaller sites.
Couple of MySQL powered bits to make updates easier (Staff list and the like).

In time more complex and interesting things will be added (it was for a while running a Login with Mojang/MineCraft account, but that means you type your MineCraft login into the site…), how that works is a subject for another post. As is what ever I build next :-D

The MineCraft server in this case is running a derivative of Bukkit, which means it supports plugins, so we are using the JSON Api plugin, and making a call to the getWorld() data resource.
Which passes back information about the world in a nice handy format.

Heres an example

    [world] => stdClass Object
            [remainingWeatherTicks] => 14670
            [hasStorm] => 
            [time] => 4964
            [environment] => normal
            [isThundering] => 
            [name] => world
            [fullTime] => 2903932964

If your running Vanilla you can grab the same information just by decoding the level.dat file in the World Directory, however opening a file currently being written to, is not often a good idea, and the level.dat is written to a lot.

Like a lot of games, Minecraft uses ticks, in this case operating at 20 ticks per second, and running to 24000 ticks per Minecraft day, which means a Minecraft day is about 20mins.

Just to be interesting 0 ticks is Sunrise, rather than midnight. And midnight itself is 18000 ticks.

Also contained in the data packet is a count down to when the weather changes, in this case there are 7500 (ish) ticks to go.

Which works out as

14670 / 20 to get Real Seconds = 733.5 Seconds, and then its arbitrary to flip this to a human readable time. We have about 12 minutes, or half a MineCraft day, until the weather changes.

Reading out a more recent packet

    [world] => stdClass Object
            [remainingWeatherTicks] => 7339
            [hasStorm] => 1
            [time] => 3827
            [environment] => normal
            [isThundering] => 
            [name] => world
            [fullTime] => 3902379827

Looks like there is a storm on…. But its only Rain no Thunder and Lighting. With 6 mins to go.

On a side note!, watch out for FullTime, as its likely to run away, on a long running server, to something a 32 bit system might not be able to handle! Refer to my Post on Facebook and the Order ID on some thoughts about dealing with that.

Using Tick to Seconds math, means that it is also possible to display the current server time and weather on the website.

I’m using a bit of CSS, and the MineCraft time piece (craftable in game) to show the current time visually. In this case I’ve taken the 16×16 PNG’s and expanded them (by hand) to 32×32, finally converting the time from ticks to the relevant chunk of 360 degrees, offsetting as needed to account for the fact that Sunrise is 0 instead of Midnight.

I do this by adding 6000 ticks and from there treating the ticks complete as a percentage and scaling to meet 360 degrees. Some of the code involved needs a little tweaking and tidying to improve efficiency, but the angle is being calculated by a CRON Job powered script and stored with the full World JSON packet, in an extended object and cached in a file on the file system ready to be read by the web server when a request comes in. So it’s not a top priority to clean up yet.

I was finding that after taking into account the addition 6000 ticks to offset for Sunrise, the whole Sun Moon picture was upside down. So I just added 180 degrees, and corrected it when the angle was greater that 360. Since why bother rotating thru a whole 360 degrees?

$time = $world->time;// grab from data packet from JSON Api Call
$time += 6000;// add 600 for sunrise

// work out the scale factor 360 degrees / ticks in a Minecraft day
$scale = 360 / 24000;
$angle = $scale * $time;// calculate the <span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre="">angle
$angle</span></span></span> = number_format($angle, 0);// clean up
// correct
$angle = $angle + 180;// the image is upside down :-(
if ($angle >= 360) {// clean up again
	$angle -= 360;

The rotation component was quite difficult to initially decide how to do, PHP wasn’t quite cutting it so switched to a CSS Transform.
HTML wise it consists of a pair of divs, a pair of images, and a chunk of CSS.

<div class="worldtime"><div class="inner"></div></div>

WorldTime being the one behind contains the Sun Moon Picture as a background image.

And Inner contains the Watch overlay also as a background image.

Apply the CSS transformation to rotate the Sun Moon Picture is just a little nasty, because in rotating the Sun Moon picture it also rotated the overlay (inner).
I decided to apply rotation to the overlay, in the reverse direction (so just sticking a negative sign in front).
Works quite well, but if you can think of a better way to spit out this with the rotation please comment below.

Heres my current Style Code

<style type="text/css">
	.worldtime .inner {
		width: 32px;
		height: 32px;
		background: url('large_watch.png') left top no-repeat;
	    /* CSS3 then proprietary code */
	    rotation: -336deg;
	    -webkit-transform: rotate(-336deg);
	    -moz-transform: rotate(-336deg);
	    filter: progid: DXImageTransform.Microsoft.BasicImage(-rotation=4);
	.worldtime {
		float: left;
		width: 32px;
		height: 32px;
		margin: 0 10px;
		background: url('large_inner.png') left top no-repeat;
	    /* CSS3 then proprietary code */
	    rotation: 336deg;
	    -webkit-transform: rotate(336deg);
	    -moz-transform: rotate(336deg);
	    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);

The whole WorldTime Div is then wrapped in another Div and jQuery used to once per minute go and fetch the updated time, weather and CSS rotation.

At first I did try using the PHP function to rotate the image, but the quality drop off when rotating by an angle not divisible by 90 was shocking.
So ended up resorting to CSS, which does work a hell of a lot better.

This only covers how to do this using the JSON API, in a future post I’ll talk about decoding level.dat and other Minecraft Files.

SOLD and All Change!

So I left my job at Vanguard SEO as the start of this year for two reasons, one got a better job offer, and two the company went bankrupt. Not very lolworthy.

Anywho, I have been contracting for NewMedias, as a PHP Developer, since September Freelance style, and more 9-5 contracting during January and then NewMedias overlord Apeei, sold the company for mere bananas to CodingFutures, and then they offered me a job, so there I am now as a PHP Developer! And now we are nearly at the end of week two of my new job.

This week we had some nice photos done heres me and the rest of the team!

So these days I find myself working on YourMembers a WordPress plugin for Subscription and post control among other things. As well as the plugins for it. I built from the ground up YSS – Your Secure Stream, which can create links with expiry for Amazon S3 Hosted content, so people who use WordPres can provide Audio and Video, whilst protecting that content too! It plugs in to FlowPlayer and Longtails JWPlayer, some of the more commonly used players.

This week I’ve been working on the Mail/AutoResponder Plugin. Its been going well and should hopefully be finished soon :-D

Thru my work I’ve been getting to know WordPress more and the most useful link I’ve found today, is how to integrate TinyMCE, the Visual/HTML editor for WordPress, into your own Plugins. I’ve expanded on some of the code from the second link for the Visual/HTML editor switch, in order to handle multiple instances of TinyMCE on a page, as well as the core code. Mainly since the page I am using TinyMCE on, is generated thru a Form Generation Class I didn’t write and should at some point redo, its a nice class but has some interesting caveats and limitations. Let along the fact I havn’t managed to get WordPress using my usual jQuery DateTime Picker I like, since WordPress uses a old version of jQuery and jQuery UI, and if you load latest, its gonna break someone else’s plugin, installed on a client site, and to top it all WordPress loads the jQueryUI CSS for the latest version for Google CDN.

On a side note using Google CDN’s jQuery is very good and better, check this link for reasoning, and this one for implementation (in general not just WordPress).

I think the key point for using Google Code hosted jQuery, is that pages will load quicker, since more domains mean more open HTTP connections, as browsers limit the connections open to a single domain at once. About 6 according to the reasoning link, so more domains means more open HTTP connections which means pages can load more quickly. Let alone the fact that if everyone loads from Google Code, then its cached on the users machine, which means from site a to site b, on site b, user doesn’t have to load jQuery as its already in the Cache. Thus making page loads quicker!

Still need to find a link explaining how to use the WordPress collapse a box, that all the WP-Admin grey bars and boxes do. I have built my own function in jQuery to do it, but it doesn’t (yet) have the cookie elements that WordPress’es own has to remember which are open/closed when the page reloads. Since seem there is no easy documented way on how to use the in built functionality.

Either that or I’ve missed it.

Also lately been working with the MailChimp API, had to laugh at the URL: http://apidocs.mailchimp.com/rtfm/.

On that bomb shell, catch you later, I’ve felt like I’ve rambled on a lot when this post was looking quite short…. Must blog more. Keep an eye on my Tumblr for more real time snippets of stuff, I’m assuming you already follow me on Twitter…..

Some Random Useful Things

Some random useful things:

Twitter, is scrapping Basic Auth! Which means no more simple curl calls, its on to OAuth.

Check out http://dev.twitter.com/pages/basic_to_oauth for how to update your Apps/Usage, and http://countdowntooauth.com/ for a handy countdown.

In other twitter news, I use Notifo to forward my twitter replies to my iPhone, which uses Push.ly to grab the stream. Twitter has currently borked @Replies both in apps and on the website, however Notifo announced they have updated their website with a new design, (hurrah), and a desktop client (further hurrah).
So with my mac and growl I now get Growl @ Responses….. SUCCESS!

Thats enough twitter! I was linked in a random IRC channel to http://jsfiddle.net/, which is a sort of real time code and run/test interface for several different javascript libs, including MooTools, and jQuery. Its currently in Alpha and under “heavy development”, so far I have found it quite useful, since it saves a lot of time in prototyping something. Looking forward to when they add user accounts, will be easier to track my own fiddles, heres the 5th version of me fiddling with jQuery UI tabs yes it has basic version control!

Facebook next, came across this today: http://developers.facebook.com/roadmap pretty much nails the coffin shut on FBML and suggests that we will all be using iFrames instead….

Not sure if this is a good thing or a bad thing, since iFrames are not always the most secure of things, but will make sending more upto date stuff to a Facebook page easier. And no longer stuck with Facebook caching, which in itself is a useful thing….

Also they are moving to a larger oauth setting with the use of oauth version 2! And scrapping their Rest API.

So there is a lot of change going on within two of the larger things I have been involved with (in terms of building things for clients), so in this vein when is the Last.FM api moving to oAuth too, tho it does use a token based Auth now?!

I’m gonna need to do a lot of recoding/refactoring for things that use FBML and basic Auth….

Is oAuth the future for all API’s? What do you think?


O and I am going to invest in one of these!

jQuery Coverflow, my First Plugin

So I’ve been working on this for a while, based on a few googles searches (see this post for details.

Thru other posts on this subject I’ve chronicled my work, and youtubed a few videos, I’ve now deployed it and re factored it to a jQuery plugin. And fixed a bug so it works in IE as well as other browsers, was throwing a odd childelement error in IE8 of all things.

So, my jQuery Coverflow is live at the LSRfm.com Podcasts Page, I’ll probably be fiddling with the code locally to tidy it and make it better, but it works quite happily as a jQuery plugin now.

Heres how to use it on your site, if you are so inclined, stay tuned for updates :-).

The Plugin requires jQuery UI for the Slider, and jCarousel for the Flowy-ness, it relies on the jQuery stock animation suite as well.

In the head

<script src="/path_to_js/jquery.coverflow.js" type="text/javascript"></script>

In the Body

<ul id="coverflow">
        <li><a href="/some_link/"><img src="/someimage.png" alt="A Title" /></a></li>

<script type="text/javascript">

Like with any jQuery Plugin you can pass it some options/settings.

  • total_items – total items in the carousel/flow, if 0 auto determines
  • sider_start – the start point, leave null for middle, or number for that number or rnd for random
  • targetflow – id of the ul with the items in
  • sliderflow – id of the div to hold the slider
  • titleflow – id to hold the title elements
  • largesize – size as a int, so 200 for 200px, of the image currently in the middle of the flow
  • smallsize – smaller size
  • speed – speed in microseconds so 3s is 3000
  • scroll – leave this as one
  • visible – how many items to be in the viewing pane at once default 3
  • animation – animation speed, if 0 takes it from speed

Essentially all the needs to be set is the names for targetflow, sliderflow, and titleflow, tho if you use the default names (coverflow, slider, coverflow_title) you don’t even need that.

Things I need to add to the plugin.

Auto generate the slider div if not present and add the relevant css to it.
Do a check to see if the item about to be highlight contains an image or not, and animate accordingly.

In theory this can support any type of content but an item of:

<li><a><img /></a></li>

works best.

You can grab a tar of the file at Coverflow_001 (383)

Questsions? Feedback? Suggestions?

Comments below :-)


Currently there is a small bug where in some browsers (so far Chrome and Safari), post load and setup, its not sliding to the desired element, the slider is moved, but the carousel does not.

Coverflow with jQuery V1.5 (an Update)

So been working on my coverflow from: This post.

Been trying to make it a better replication, tho have some problems with reflections, so decided to skip that for a bit and work on scrolling, with steps greater than one.
I’ve had some hiccups with the animation again, so will have to consider ripping that out and redoing it.

The animation being the size alterations to the podcast cover images.

So heres the YouTube Demo of the Coverflow with the Slider working, and the traditional links updating the slider value.

Also when I get this to a working level, gonna need to redo the Version Numbers :-P

When I get this working nicely, it will be rather useful, both for LSRfm.com and personal use, since it will rotate any content inside a li, tho if theres an img it will do the resizing.

Perhaps drawing inspiration from the game covers rotator on Game.co.uk as well, we shall see….