Features

– Flot Charts
– Dynamic jQuery Gauges using Easy Pie Charts
– Responsive One Page Theme
– Mini Bar, Line and Pie Charts
– Signup Modal Support
– Font Awesome 3.0.1
– More Features

Gauge Admin One Page Responsive Theme comes complete with awesome charts gauges and micro bar charts. Gauge is a super clean elegant theme suitable for displaying your dashboard, app, business, portfolio or service. Created using the latest HTML5 and CSS3 features. With full responsive design which works great on any device.

Sign in dropdown

Sign up Modal

Complete pricing table

Once your order has been sent you will receive an email with the theme files attached within 8 hours.

jQuery Timelinr

After including the timelinr.js plugin file, to get it working all you need to do is call the basic method below and include the setup HTML at the bottom of the page. Checkout the horizontal and vertical demos

$(function(){
   $().timelinr();
});

$(function(){
   $().timelinr({
      orientation: 'horizontal',
      // value: horizontal | vertical, default to horizontal
      containerDiv: '#timeline',
      // value: any HTML tag or #id, default to #timeline
      datesDiv: '#dates',
      // value: any HTML tag or #id, default to #dates
      datesSelectedClass: 'selected',
      // value: any class, default to selected
      datesSpeed: 'normal',
      // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal
      issuesDiv : '#issues',
      // value: any HTML tag or #id, default to #issues
      issuesSelectedClass: 'selected',
      // value: any class, default to selected
      issuesSpeed: 'fast',
      // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast
      issuesTransparency: 0.2,
      // value: integer between 0 and 1 (recommended), default to 0.2
      issuesTransparencySpeed: 500,
      // value: integer between 100 and 1000 (recommended), default to 500 (normal)
      prevButton: '#prev',
      // value: any HTML tag or #id, default to #prev
      nextButton: '#next',
      // value: any HTML tag or #id, default to #next
      arrowKeys: 'false',
      // value: true/false, default to false
      startAt: 1,
      // value: integer, default to 1 (first)
      autoPlay: 'false',
      // value: true | false, default to false
      autoPlayDirection: 'forward',
      // value: forward | backward, default to forward
      autoPlayPause: 2000
      // value: integer (1000 = 1 seg), default to 2000 (2segs)< });
   });

The HTML

<div id="timeline">
   <ul id="dates">
      <li><a href="#2013">2013</a></li>
      <li><a href="#2014">2014</a></li>
   </ul>
   <ul id="issues">
      <li id="2013">
<h1>Title</h1>
         <p>Lorem ipsum.</p>
      </li>
      <li id="2014">
         <p>Lorem ipsum.</p>
      </li>
   </ul>
   <!-- optional buttons -->
   <a href="#" id="next">Next</a>
   <a href="#" id="prev">Previous</a>
</div>

What is Responsive web design?

Responsive design is all about building a project that will respond and adapt to any number of user devices. since the early days of CSS style sheets have enjoyed to some extent device awareness through media types. If you’ve ever coded a print style sheet, chances are you’re already familiar with the concept:

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

View more examples at http://mediaqueri.es

Top 4 Frameworks for building a responsive site.

1. Bootstrap – Simple, fluid HTML/CSS/JS framework from Twitter.
2. Goldilocks – Fixed width for medium & large screens, fluid single column for small devices.
3. Foundation – Flexible 6 and 12-grid framework from Zurb.
4. Skeleton – Minimal responsive framework. Includes WordPress theme.

Adaptive vs Responsive

The adaptive layout is based on a simple idea. instead of using percentages we give our layout fixed sizes but adapt these sizes depending on the width of the browser/viewport, this then creates a layout with different “break points”. The responsive layout is a mix between a fluid and adaptive layout. It uses the relative units of the fluid layout and the break points of the adaptive.

Getting Started

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Flexible Images

There are a number of techniques to resize images proportionately, the most popular option, noted in Ethan Marcotte’s article on fluid images but first experimented with by Richard Rutter, is to use CSS’s max-width for an easy fix as shown below.

img { max-width: 100% }

We now have web browsers on Playstation’s and Xbox’s, and even some television are able to connect to internet. Maybe tomorrow you we’ll have a web browser in our coffee machine, who knows! If we use responsive layouts to optimise for smaller screens, we can also use them to optimise for bigger ones.

In the demo you’ll notice the whole space containing the particles rotates slowly around a vertical axis giving the animation a 3d feel. by tinkering with the code below you should be able to come up with some interesting experiments. The origina code is based on an example by Rectangle World

(function() {

window.addEventListener("load", windowLoadHandler, false);
var sphereRad = 280;
//for debug messages
var Debugger = function() { };
Debugger.log = function(message) {
	try {
		console.log(message);
	}
	catch (exception) {
		return;
	}
}

function windowLoadHandler() {
	canvasApp();
}

function canvasSupport() {
	return Modernizr.canvas;
}

function canvasApp() {
	if (!canvasSupport()) {
		return;
	}

	var theCanvas = document.getElementById("particles");
	var context = theCanvas.getContext("2d");

	var displayWidth;
	var displayHeight;
	var timer;
	var wait;
	var count;
	var numToAddEachFrame;
	var particleList;
	var recycleBin;
	var particleAlpha;
	var r,g,b;
	var fLen;
	var m;
	var projCenterX;
	var projCenterY;
	var zMax;
	var turnAngle;
	var turnSpeed;
	var sphereCenterX, sphereCenterY, sphereCenterZ;
	var particleRad;
	var zeroAlphaDepth;
	var randAccelX, randAccelY, randAccelZ;
	var gravity;
	var rgbString;
	//we are defining a lot of variables used in the screen update functions globally so that they don't have to be redefined every frame.
	var p;
	var outsideTest;
	var nextParticle;
	var sinAngle;
	var cosAngle;
	var rotX, rotZ;
	var depthAlphaFactor;
	var i;
	var theta, phi;
	var x0, y0, z0;

	init();

	function init() {
		wait = 1;
		count = wait - 1;
		numToAddEachFrame = 5;

		//particle color
		r = 150;
		g = 3;
		b = 177;

		rgbString = "rgba("+r+","+g+","+b+","; //partial string for color which will be completed by appending alpha value.
		particleAlpha = 0.9; //maximum alpha

		displayWidth = theCanvas.width;
		displayHeight = theCanvas.height;

		fLen = 100; //represents the distance from the viewer to z=0 depth.

		//projection center coordinates sets location of origin
		projCenterX = displayWidth/2;
		projCenterY = displayHeight/2;

		//we will not draw coordinates if they have too large of a z-coordinate (which means they are very close to the observer).
		zMax = fLen-2;

		particleList = {};
		recycleBin = {};

		//random acceleration factors - causes some random motion
		randAccelX = 0.1;
		randAccelY = 0.1;
		randAccelZ = 0.1;

		gravity = -0; //try changing to a positive number (not too large, for example 0.3), or negative for floating upwards.

		particleRad = 5;

		sphereCenterX = 0;
		sphereCenterY = 0;
		sphereCenterZ = -3 - sphereRad;

		//alpha values will lessen as particles move further back, causing depth-based darkening:
		zeroAlphaDepth = -750;

		turnSpeed = 2*Math.PI/2000; //the sphere will rotate at this speed (one complete rotation every 1600 frames).
		turnAngle = 0; //initial angle

		timer = setInterval(onTimer, 10/24);
	}

	function onTimer() {
		//if enough time has elapsed, we will add new particles.
		count++;
			if (count >= wait) {

			count = 0;
			for (i = 0; i < numToAddEachFrame; i++) {
				theta = Math.random()*2*Math.PI;
				phi = Math.acos(Math.random()*2-1);
				x0 = sphereRad*Math.sin(phi)*Math.cos(theta);
				y0 = sphereRad*Math.sin(phi)*Math.sin(theta);
				z0 = sphereRad*Math.cos(phi);

				//We use the addParticle function to add a new particle. The parameters set the position and velocity components.
				//Note that the velocity parameters will cause the particle to initially fly outwards away from the sphere center (after
				//it becomes unstuck).
				var p = addParticle(x0, sphereCenterY + y0, sphereCenterZ + z0, 0.005*x0, 0.002*y0, 0.002*z0);

				//we set some "envelope" parameters which will control the evolving alpha of the particles.
				p.attack = 120;
				p.hold = 120;
				p.decay = 460;
				p.initValue = 0;
				p.holdValue = particleAlpha;
				p.lastValue = 0;

				//the particle will be stuck in one place until this time has elapsed:
				p.stuckTime = 120 + Math.random()*20;

				p.accelX = 0;
				p.accelY = gravity;
				p.accelZ = 0;
			}
		}

		//update viewing angle
		turnAngle = (turnAngle + turnSpeed) % (2*Math.PI);
		sinAngle = Math.sin(turnAngle);
		cosAngle = Math.cos(turnAngle);

		//background fill
		context.fillStyle = "#000000";
		context.fillRect(0,0,displayWidth,displayHeight);

		//update and draw particles
		p = particleList.first;
		while (p != null) {
			//before list is altered record next particle
			nextParticle = p.next;

			//update age
			p.age++;

			//if the particle is past its "stuck" time, it will begin to move.
			if (p.age > p.stuckTime) {
				p.velX += p.accelX + randAccelX*(Math.random()*2 - 1);
				p.velY += p.accelY + randAccelY*(Math.random()*2 - 1);
				p.velZ += p.accelZ + randAccelZ*(Math.random()*2 - 1);

				p.x += p.velX;
				p.y += p.velY;
				p.z += p.velZ;
			}

			/*
			We are doing two things here to calculate display coordinates.
			The whole display is being rotated around a vertical axis, so we first calculate rotated coordinates for
			x and z (but the y coordinate will not change).
			Then, we take the new coordinates (rotX, y, rotZ), and project these onto the 2D view plane.
			*/
			rotX = cosAngle*p.x + sinAngle*(p.z - sphereCenterZ);
			rotZ = -sinAngle*p.x + cosAngle*(p.z - sphereCenterZ) + sphereCenterZ;
			m = fLen/(fLen - rotZ);
			p.projX = rotX*m + projCenterX;
			p.projY = p.y*m + projCenterY;

			//update alpha according to envelope parameters.
			if (p.age < p.attack+p.hold+p.decay) {
				if (p.age < p.attack) {
					p.alpha = (p.holdValue - p.initValue)/p.attack*p.age + p.initValue;
				}
				else if (p.age < p.attack+p.hold) {
					p.alpha = p.holdValue;
				}
				else if (p.age < p.attack+p.hold+p.decay) {
					p.alpha = (p.lastValue - p.holdValue)/p.decay*(p.age-p.attack-p.hold) + p.holdValue;
				}
			}
			else {
				p.dead = true;
			}

			//see if the particle is still within the viewable range.
			if ((p.projX > displayWidth)||(p.projX<0)||(p.projY<0)||(p.projY>displayHeight)||(rotZ>zMax)) {
				outsideTest = true;
			}
			else {
				outsideTest = false;
			}

			if (outsideTest||p.dead) {
				recycle(p);
			}

			else {
				//depth-dependent darkening
				depthAlphaFactor = (1-rotZ/zeroAlphaDepth);
				depthAlphaFactor = (depthAlphaFactor > 1) ? 1 : ((depthAlphaFactor<0) ? 0 : depthAlphaFactor);
				context.fillStyle = rgbString + depthAlphaFactor*p.alpha + ")";

				//draw
				context.beginPath();
				context.arc(p.projX, p.projY, m*particleRad, 0, 2*Math.PI, false);
				context.closePath();
				context.fill();
			}

			p = nextParticle;
		}
	}

	function addParticle(x0,y0,z0,vx0,vy0,vz0) {
		var newParticle;
		var color;

		//check recycle bin for available drop:
		if (recycleBin.first != null) {
			newParticle = recycleBin.first;
			//remove from bin
			if (newParticle.next != null) {
				recycleBin.first = newParticle.next;
				newParticle.next.prev = null;
			}
			else {
				recycleBin.first = null;
			}
		}
		//if the recycle bin is empty, create a new particle (a new ampty object):
		else {
			newParticle = {};
		}

		//add to beginning of particle list
		if (particleList.first == null) {
			particleList.first = newParticle;
			newParticle.prev = null;
			newParticle.next = null;
		}
		else {
			newParticle.next = particleList.first;
			particleList.first.prev = newParticle;
			particleList.first = newParticle;
			newParticle.prev = null;
		}

		//initialize
		newParticle.x = x0;
		newParticle.y = y0;
		newParticle.z = z0;
		newParticle.velX = vx0;
		newParticle.velY = vy0;
		newParticle.velZ = vz0;
		newParticle.age = 0;
		newParticle.dead = false;
		if (Math.random() < 0.5) {
			newParticle.right = true;
		}
		else {
			newParticle.right = false;
		}
		return newParticle;
	}

	function recycle(p) {
		//remove from particleList
		if (particleList.first == p) {
			if (p.next != null) {
				p.next.prev = null;
				particleList.first = p.next;
			}
			else {
				particleList.first = null;
			}
		}
		else {
			if (p.next == null) {
				p.prev.next = null;
			}
			else {
				p.prev.next = p.next;
				p.next.prev = p.prev;
			}
		}
		//add to recycle bin
		if (recycleBin.first == null) {
			recycleBin.first = p;
			p.prev = null;
			p.next = null;
		}
		else {
			p.next = recycleBin.first;
			recycleBin.first.prev = p;
			recycleBin.first = p;
			p.prev = null;
		}
	}
}
var asd = 12;

})();

Getting Started

Ratchet is not a complicated framework only for advanced developers. You can get up and running with it in minutes. It requires zero knowledge of any iOS programming and really only the tiniest bit of JavaScript.

1. All fixed bars (.bar-title, .bar-tab, .bar-header-secondary, .bar-footer) should always be the first thing in the of the page. This is really important!

2. Anything that’s not a .bar- should be put in a div with the class “content”. Put this div after the bars in the tag. The .content div is what actually scrolls in a Ratchet prototype.

3. They’re included in the template.html page included in the download, but make sure they stay in the page. They are important to Ratchet working just right.

The Title Bar

The header is the container element for the title.

<header class="bar-title">
  <h1 class="title">Papermashup</h1>
</header>

Adding A Popover

Popovers are designed to only fire from the title bar. Set the value of the title href to the id of a popover as shown below:

<!-- The Header Title Bar -->

<header class="bar-title">
  <a href="#myPopover">
    <h1 class="title">Title</h1>
  </a>
</header>

<!-- The Popover -->

<div id="myPopover" class="popover">
  <header class="popover-header">
    <a class="button" href="#">
      Left
    </a>
    <h3 class="title">Popover title</h3>
    <a class="button" href="#">
      Right
    </a>
  </header>
  <ul class="list">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
  </ul>
</div>

Slider

The slider can be used for any type of content but it works great with images.

<div class="slider">
  <ul>
    <li>
      <img src="img/slide1.jpg">
      <span class="slide-text">← Slide me</span>
    </li>
    <li>
      <img src="img/slide2.jpg">
    </li>
    <li>
      <img src="img/slide3.jpg">
    </li>
  </ul>
</div>

Linking Pages with Push.js

No working iPhone app prototype would be any good without the standard iPhone page transition. Fortunately the Push.js file takes care of this for you when you link pages together. You can even set up different transitions: without writing any JavaScript for example:

<a href="page-one.html" data-transition="fade">One</a>
<a href="page-two.html" data-transition="slide-in">Two</a>

The Conclusion

Ratchet is an amazing tool to put together prototypes. It’s effortless to get started with and i’d recommend it to anyone wanting to build an iPhone app demo. We’ve just touched the surface of what Ratchet can bo but it’s truly awesome.

The Code

So once you’ve included the javascript plugin files, all you need to do is call the plugin as shown below. You’ll see that in the demo below we’re refreshing the data every 1.5 seconds and generating a random number but this could easily be fed with live data from say a database or ajax feed.

      var g1, g2, g3;

      window.onload = function(){
        var g1 = new JustGage({
          id: "g1",
          value: getRandomInt(0, 32),
          min: 0,
          max: 100,
          title: "CPU",
          label: "load",
          levelColorsGradient: false
        });

        var g2 = new JustGage({
          id: "g2",
          value: getRandomInt(34, 65),
          min: 0,
          max: 100,
          title: "RAM",
          label: "load",
          levelColorsGradient: false
        });

        var g3 = new JustGage({
          id: "g3",
          value: getRandomInt(66, 100),
          min: 0,
          max: 100,
          title: "Network",
          label: "connections",
          levelColorsGradient: false
        });

        setInterval(function() {
          g1.refresh(getRandomInt(0, 42));
          g2.refresh(getRandomInt(34, 65));
          g3.refresh(getRandomInt(66, 100));
        }, 1500);
      };

The HTML

Simply define the div elements where you want the gauges to be injected into and that’s it. This is just a quick introduction into how the gauges work, and there’s far more customisation that can be done.

    <div id="g1"></div>
    <div id="g2"></div>
    <div id="g3"></div>

The Code

// link to the font file no the server
$fontname = 'font/Capriola-Regular.ttf';
// controls the spacing between text
$i=30;
//JPG image quality 0-100
$quality = 85;

function create_image($user){

		global $fontname;	
		global $quality;
		$file = "covers/".md5($user[0]['name'].$user[1]['name'].$user[2]['name']).".jpg";	
	
	// if the file already exists dont create it again just serve up the original	
	if (!file_exists($file)) {	
			
			// define the base image that we lay our text on
			$im = imagecreatefromjpeg("pass.jpg");
			
			// setup the text colours
			$color['grey'] = imagecolorallocate($im, 54, 56, 60);
			$color['green'] = imagecolorallocate($im, 55, 189, 102);
			
			// this defines the starting height for the text block
			$y = imagesy($im) - $height - 365;
			 
		// loop through the array and write the text	
		foreach ($user as $value){
			// center the text in our image - returns the x value
			$x = center_text($value['name'], $value['font-size']);	
			imagettftext($im, $value['font-size'], 0, $x, $y+$i, $color[$value['color']], $fontname,$value['name']);
			// add 32px to the line height for the next text block
			$i = $i+32;	
			
		}
			// create the image
			imagejpeg($im, $file, $quality);
			
	}
						
		return $file;	
}

function center_text($string, $font_size){

			global $fontname;

			$image_width = 800;
			$dimensions = imagettfbbox($font_size, 0, $fontname, $string);
			
			return ceil(($image_width - $dimensions[4]) / 2);				
}

	$user = array(
	
		array(
			'name'=> 'Ashley Ford', 
			'font-size'=>'27',
			'color'=>'grey'),
			
		array(
			'name'=> 'Technical Director',
			'font-size'=>'16',
			'color'=>'grey'),
			
		array(
			'name'=> 'ashley[at]papermashup.com',
			'font-size'=>'13',
			'color'=>'green'
			)			
	);

// run the script to create the image
$filename = create_image($user);

Running the code

I’ve created two functions to make it as simple as possible. to run the code simply pass the $user array data to the function and it’ll save the new image in the folder ‘covers’ on your server. The function returns the file url so you just need to echo it into an image tag as shown below. Check out the demo where you can create your own.

$filename = create_image($user);

<img src="<?=$filename;?>" width="800" height="600"/>

GD vs ImageMagick

On a performance level there’s not much between the two libraries ImageMagick has more options for example text rotation. you can find out more about ImageMagick here and GD here.

//get the last-modified-date of this very file
$lastModified=filemtime(__FILE__);
//get a hash of this file
$etagFile = md5_file(__FILE__);
//get the HTTP_IF_MODIFIED_SINCE header if set
$ifModifiedSince=(isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) ? $_SERVER['HTTP_IF_MODIFIED_SINCE'] : false);
//get the HTTP_IF_NONE_MATCH header if set
$etagHeader=(isset($_SERVER['HTTP_IF_NONE_MATCH']) ? trim($_SERVER['HTTP_IF_NONE_MATCH']) : false);

//set last-modified header
header("Last-Modified: ".gmdate("D, d M Y H:i:s", $lastModified)." GMT");
//set etag-header
header("ETag: \"$etagFile\"");
//make sure caching is turned on
header('Cache-Control: public');

//check if page has changed If not send 304 header and exit
if (@strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE'])==$lastModified || $etagHeader == $etagFile)
{
       header("HTTP/1.1 304 Not Modified");
       exit;
}

echo "Page last modified: ".date("d.m.Y H:i:s",time());

This method uses a CSS sprite image, you could easily use two images but it’s best to save them in one file so we only make one HTTP request to the server.

The Code

.button{
	height:47px;
	width:156px;
	background:url(images/hover_sprite.png) top center;
	position: relative;
	cursor:pointer;
}

.button span{
	position: absolute;
	top:0;
	left:0;
	height:47px;
	width:156px;
	background:url(images/hover_sprite.png) bottom center;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}

.button span:hover{
	opacity: 1;
}

The Code

It’s worth pointing out you must have CURL enabled on your web server, I believe it’s enabled by default on PHP5 setups. Also the Key below Isn’t a unique API key you must leave the key as is to ensure the code works properly.

function gplus_shares($url){

	// G+ DATA
	$ch = curl_init();  
	curl_setopt($ch, CURLOPT_URL, "https://clients6.google.com/rpc?key=AIzaSyCKSbrvQasunBoV16zDH9R33D88CeLr9gQ");
	curl_setopt($ch, CURLOPT_POST, 1);
	curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
	curl_setopt($ch, CURLOPT_POSTFIELDS, '[{"method":"pos.plusones.get","id":"p",
"params":{"nolog":true,"id":"' . $url . '","source":"widget","userId":"@viewer","groupId":"@self"},
"jsonrpc":"2.0","key":"p","apiVersion":"v1"}]');
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-type: application/json'));
	  
	$result = curl_exec ($ch);
	curl_close ($ch);
	return json_decode($result, true);
	
}

Example Usage

$gplus = gplus_shares('https://facebook.com');

echo $gplus[0]['result']['metadata']['globalCounts']['count'];