Coding better widgets

The best way to be consistent in coding repetitive things, is to create libraries. Think of a library as a piece of a puzzle. The puzzle piece doesn't know anything about the whole picture, but it knows it's job. If you use a clock in your lockscreen or widget why not make a library you can include on all your projects. I was stubborn and usually just wrote a function whenever I wanted a clock. It failed a few times, I would forget to pad the minutes or something trivial like that. With a library this wouldn't happen. You also remove the issue of creating multiple global variables.

After creating these libraries, I cannot think of why I ever did it any other way. Below I will explain the libraries I have created and their purpose. (I am working on a site to put this info, for now there is this blog).

Lets talk about clock.js first. Clock.js contains many of the things you would need when adding a clock or date to any widget. The reason I created clock.js is there is many things you must thing of when writing a clock widget. You must decide wether to pad the hours with a 0, you must pad the minutes with a zero, and have a choice between 12 and 24 hour. Clock.js handles all of this.

How to use Clock.js

Clock.js is an object and to retrieve information from within the object we will use dot notation. 

clock.hour();

clock.minute();

clock.am();

clock.date();

clock.month();

Hour

Example: To get the current hour, I would simply type. clock.hour(); Since the hour is what defines 12 or 24 hr and wether to pad with a zero, we need to pass it parameters. First parameter defines wether it's 24/12 hour and the second defines wether you want to pad the hour with a zero.

clock.hour(true,false);

This tells the clock object to give you the hour for 24hr and do not pad with a zero.

clock.hour(false,true);

You will get back 12hr with the hour padded with a 0. If it was 3 oClock you would get back 03

Minute

clock.minute(); // gives current minutes (padding of the minutes is already taken care of).

AM

clock.am(); //returns either am or pm depending on the time.

Date

clock.date(); //returns the current date

Month

clock.month(); // return the month in number form.

-UPDATES-

hourtext(true); // returns hour in text form, if it was 5 it will return Five. parameter is for 12/24 hour.

minuteonetext(); //returns the first part of the minute in text if it was 12:35 this would return thirty

minutetwotext(); //retunrs the second part of the minute in text if it was 12:35 this would return five.

daytext(); //returns today in text if it was Wednesday it will return Wednesday.

monthtext(); //returns month in text if it was January it will return January

dateplus(); //returns todays date plus its extension if the date was 20 it will return 20th.

How to use sJS.js

sJS.js is a library similar to jQuery, it allows you to get elements and set other values with a very short syntax. You can use $$() or sJS();

$$('el').sel(); // returns the element

$$('el').inner(); // returns the element's innerHTML

$$('el').set('Test'); //sets the current elements innerHTML to Test.

$$('el').append('Test'); // will add Test to the current innerHTML

$$('el").clear(); // clear the elements innerHTML.
$$('el").color('red'); // set the current element's color to red

How to use sizing.js

sizing.js allows you to size your widget to many devices. If you create a document at 320px (iPhone5) and use sizing.js it will size it to iPhone 6 and 6plus.

For this to work all you have to do is add sizing.js to your project and have the meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1">

How to use lang.js

lang.js is a collection of languages i've collected from numerous people. It contains language translations for weekdays, month, short month, short weekday, conditions, and a few others.

Declare lang.js at the top of your document and add the meta tag.

<meta charset="utf-8">

An example of using lang.js is this.

month[clock.month()];

clock.month() if you are using clock.js returns a number, if you add that to month[] then it will pick the month name from the month array. Since lang.js auto detects the browser language it will give you that translation if available.

How to use helper.js

Helper.js is very cool. Basically it gets all the html elements and wraps a border around them showing you the padding or width of the element. It also makes all elements draggable, when you drag them and stop it will alert you the current location (top and left) of where that element is. It will also alert the div id and class if those are available. This is very helpful when mocking up a widget.

How to use sset.js
sset.js allows you to create switches for settings. Lets say you want a toggle for 12/24 hr. With this library and sset.css you can create these switches as easy as.

sset.create('TwentyFour','twentyfour','#29999f');

It takes 3 parameters. First is the name of the element that will be created, second is the localStorage name, and third is the color of the on switch.

To get information from this switch create a variable and pass it the localStorage name.

var twenty = (localStorage.twentyfour) ? JSON.parse(localStorage.twentyfour) : false;

Example Project using clock.js, sjs.js, sset.js, and sizing.js : Download

Here is a video where I use the libraries.

http://junesiphone.com/libraries for more info and downloads.

Weather Libraries coming soon:)

This is not the final stage of the libraries, if you want to get updated information I will tweet when I update them. Twitter

Follow

Previous Article - 7 Free Lockscreens

miWeather Forecast

Zen8

Alizhe

JunesiPhone.com