Prototyping With Meteor
Meteor is far more than a quick prototyping tool, but it sure is great for prototyping. In this tutorial, we’ll walk through the process of turning a simple HTML wireframe into a functional application in a surprisingly simple number of steps.
We’ll be creating a simple wireframe of a chatroom application. The process we are trying to demonstrate is starting with a pure HTML/CSS wireframe, done in Meteor for convenience, which can then very easily be transformed into a real application, thanks to the ease of Meteor development.
Note: This tutorial is adapted from The Meteor Book, an upcoming step by step guide to building Meteor apps from scratch. The book will walk you through building a complete multi-user social news site (think Reddit or Digg), starting from setting up user accounts and user permissions, all the way to managing real-time voting and ranking.
Setting up a More Complex App
A previous Meteor tutorial here on Nettuts+ demonstrated how to install Meteor and build a simple application using the meteor command line tool. In this tutorial, we are going to do things a bit differently, and use Meteorite.
Meteorite is a community created wrapper for Meteor that allows us to use non-core packages created by other members of the Meteor community. Although a built-in third party package system is planned for Meteor itself, as of the time of this writing, there is no support, bar the set of packages that are supported by the Meteor core team. So Meteorite was created to allow us (the community) to work around this limitation, and publish our packages on Atmosphere, the Meteor package repository.
For this tutorial, we are going to use some of those community written packages, so we are going to need to use Meteorite. To begin, let’s get it installed, using npm.
Note: You’ll need to have a copy of Node and npm installed on your system. If you need assistance with this process, Meteorite’s install instructions is a good place to start.
npm install Meteorite -g
If you’re on Windows, setting things up is a bit more complex. We’ve written a detailed tutorial on our site to help you out.
Now that Meteorite is installed, we use the mrt command-line tool (which it installs for us) in place of meteor. So let’s get started! We’ll create an app:
mrt create chat
Packages and Wireframes
To create our wireframe app, we’ll use some basic packages that allow us to develop simple laid out pages quickly and route between them. Let’s add the packages now:
mrt add bootstrap-updated
mrt add font-awesome
mrt add router
Step 1: A Front Page
Now that we’ve picked up some nice styling for our app, we can make a mockup of the landing screen. Delete the initial HTML, CSS and JS files created by Meteor and create the following two files within a client directory (we aren’t doing anything on the server yet).
(Alternatively, follow along with the steps from this repository.)
<head>
<title>chat</title>
</head>
<body>
<div class="row">
{{> rooms}}
<div class="span6">
<h1>Welcome to Meteor Chat</h1>
<p>Please a select a room to chat in, or create a new one</p>
</div>
</div>
</body>
<template name="rooms">
<form name="new_row">
<table id="rooms" class="table table-striped span6">
<thead>
<tr>
<th>Room Name</th>
<th>Members online</th>
<th>Last activity</th>
</tr>
</thead>
<tbody>
{{#each rooms}}
<tr>
<td>{{name}}</td>
<td>{{members}}</td>
<td>{{last_activity}}</td>
</tr>
{{/each}}
<tr>
<td colspan="3">
<input type="text" name="name" placeholder="Enter your chatroom name"></input>
<button type="submit" class="btn btn-primary pull-right">
<i class="icon-plus"></i> Create Room
</button>
</td>
</tr>
</tbody>
</table>
</form>
</template>
client/chat.html
var rooms = [
{name: 'Meteor Talk', members: 3, last<em>activity: '1 minute ago'},
{name: 'Meteor Development', members: 2, last</em>activity: '5 minutes ago'},
{name: 'Meteor Core', members: 0, last_activity: '3 days ago'}
];
Template.rooms.helpers({
rooms: rooms
});
client/chat.js
After adding this, you should see the following simple (if fake) application, when you browse to http://localhost:3000:
The data in the table of rooms is fixed data that we have manually entered into client/chat.js, but the advantage to this approach is that it allows us to repeat HTML in our wireframe without having to cut and paste (which is almost universally a bad idea).
Step 2: A Chat Room Page
Now, let’s hook up a second page. We are going to use the router to select between two page templates; one with the welcome message, and the other with a message list for the selected room.
Let’s start by adding some simple routes. The Router works by mapping URLs to template names. Our case is fairly simple; here’s what we add:
Meteor.Router.add({
'/': 'home',
'/rooms/:id': 'room'
});
client/chat.js
<body>
<div class="row">
{{> rooms}}
{{renderPage}}
</div>
</body>
<template name="home">
<div class="span6">
<h1>Welcome to Meteor Chat</h1>
<p>Please a select a room to chat in, or create a new one</p>
</div>
</template>
client/chat.html
We use the {{renderPage}} helper in our HTML file to indicate where we want that selected template to draw, and, just like that, we can browse between the two URLs and see the content on the right-hand side change. By default, we see the 'home' template, which is mapped to the route /, and shows us a nice message.
If we add a template from the 'room' route and add some links to specific rooms, we can now follow links:
<td><a href="/rooms/7">{{name}}</a></td>
client/chat.html ‘rooms’ template
<template name="room">
<div class="span6">
<h1>Welcome to a chatroom!</h1>
</div>
</template>
client/chat.html
This works because the router maps urls, like localhost:3000/rooms/7, to the 'room' template. For now, we won’t look at the id (7, in this case), but we will soon!
Step 3: Putting Some Data in the Chat Room
Now that we’ve routed a URL chatroom, let’s actually draw a chat in the room. Again, we are still mocking up, so we’ll continue to create fake data in our JavaScript file, and draw it with Handlebars:
var rooms = [
{name: 'Meteor Talk', members: 3, last<em>activity: '1 minute ago',
messages: [
{author: 'Tom', text: 'Hi there Sacha!'},
{author: 'Sacha', text: 'Hey Tom, how are you?'},
{author: 'Tom', text: 'Good thanks!'},
]},
{name: 'Meteor Development', members: 2, last</em>activity: '5 minutes ago'},
{name: 'Meteor Core', members: 0, last_activity: '3 days ago'}
];
Template.room.helpers({
room: rooms[0]
});
client/chat.js
So we’ve added some chat data to the first room, and we’ll simply render it every time (for the moment) on the room template. So:
<template name="room">
<div class="span6">
{{#with room}}
<h1>Welcome to {{name}}</h1></p>
<table id="chat" class="table table-striped">
<tbody>
{{#each messages}}
<tr>
<td>{{author}} :</td>
<td>{{text}}</td>
</tr>
{{/each}}
<tr>
<td colspan="2">
<form name="new_message">
<input type="text" name="text"></input>
<button type="submit" class="btn btn-primary pull-right">
<i class="icon-envelope"></i> Send message
</button>
</form>
</td>
</tr>
</tbody>
</table>
{{/with}}
</div>
</template>
client/chat.html
Voila! A working demonstration of our chatroom application:
Step 4: Using Real Data Backed by a Collection
Now comes the fun part; we’ve built a simple wireframe of static data simply enough, but thanks to the power of Meteor Collections, we can make it functional in no time at all.
Remember that a Collection takes care of syncing data between the browser and the server, writing that data to a Mongo database on the server, and distributing it to all other connected clients. This sounds like exactly what we need for a chat room!
First, let’s add a collection on the client and server, and add some simple fixture data to it:
(Note: We’ll put the collections file in the lib/ directory, so that the code is available both on the client and the server.)
var Rooms = new Meteor.Collection('rooms');
if (Meteor.isServer && Rooms.find().count() == 0) {
var rooms = [
{name: 'Meteor Talk', members: 3, last<em>activity: '1 minute ago',
messages: [
{author: 'Tom', text: 'Hi there Sacha!'},
{author: 'Sacha', text: 'Hey Tom, how are you?'},
{author: 'Tom', text: 'Good thanks!'},
]},
{name: 'Meteor Development', members: 2, last</em>activity: '5 minutes ago'},
{name: 'Meteor Core', members: 0, last_activity: '3 days ago'}
];
_.each(rooms, function(room) {
Rooms.insert(room);
});
}
lib/collections.js
We’ve moved our data into the collection, so we no longer need to manually wire it up within our template helpers. Instead, we can simply grab what we want out of the collection:
Meteor.Router.add({
'/': 'home',
'/rooms/:id': function(id) {
Session.set('currentRoomId', id);
return 'room'
}
});
Template.rooms.helpers({
rooms: function() { return Rooms.find(); }
});
Template.room.helpers({
room: function() { return Rooms.findOne(Session.get('currentRoomId')); }
})
client/chat.js
We’ve made a couple of changes here; Firstly, we use Rooms.find() to select all rooms to pass into the 'rooms' template. Secondly, in the 'room' template, we just select the single room that we are interested in (Rooms.findOne()), using the session to pass through the correct id.
Hold on! What’s the session? How did we pass the id? The session is Meteor’s global store of application state. The contents of the session should contain all that Meteor needs to know in order to re-draw the application in exactly the same state as it is in right now.
One of the primary purposes of the router is to get the session into such a state when parsing URLs. For this reason, we can provide routing functions as endpoints for URLs; and we use those functions to set session variables based on the content of the URL. In our case, the only state our app requires is which room we are currently in – which we parse out of the URL and store in the 'currentRoomId' session variable. And it works!
Finally, we need to get our links right; so we can do:
<td><a href="/rooms/{{_id}}">{{name}}</a></td>
client/chat.html
Modifying the data
Now that we have a collection holding our room data, we can begin changing it as we see fit. We can add new chats to a room, like so:
Rooms.update(Session.get('currentRoomId'), {$push: {messages: {author: 'Sacha', text: 'Good to hear..'}}});
Or, we can even add a new room:
Rooms.insert({name: 'A New Room', members: 0, last_activity: 'Never'});
The next challenge is to wire up the forms to perform such transformations, which we’ll leave as an exercise to the reader (or perhaps the next tutorial)!
If you’d like to learn more about Meteor, be sure to check out our upcoming book!
]]>
Meteor is far more than a quick prototyping tool, but it sure is great for prototyping. In this tutorial, we’ll walk through the process of turning a simple HTML wireframe into a functional...
http://feedproxy.google.com/~r/nettuts/~3/EmKMFI-lvBM/
https://my3.my.umbc.edu/api/v0/pixel/news/26764/guest@my.umbc.edu/51496e558feee7db998193f19f91ca25/api/pixel
css
development
html
javascript
javascript-and-ajax
meteor
mysql
php
sql
wed
Web Developer - Build Group
https://my3.my.umbc.edu/groups/retired-583
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197
Web Developer - Build Group
0
0
true
Tue, 26 Mar 2013 15:36:23 -0400
Tue, 26 Mar 2013 15:36:23 -0400
Biotech & Cybersecurity Grad Programs Arrive at Shady Grove
Learn about the Programs on April 24
The University of Maryland, Baltimore County (UMBC) will offer two new Master of Professional Studies (M.P.S) programs in
Biotechnology and
Cybersecurity at the USG campus, beginning Fall 2013. With a focus on management, these programs will prepare local students for leadership roles in two of the region’s fastest growing industries.
The M.P.S. in Biotechnology will provide students with advanced knowledge of the life sciences as well as highly developed organizational and project management skills. Graduates of this program will be prepared to fill the growing need for managerial professionals in Montgomery County’s concentration of life-science oriented businesses and agencies.
“UMBC at the Universities at Shady Grove is the ideal location for the M.P.S. in Biotechnology because two-thirds of Maryland’s biotech industry is in Montgomery County, along the I-270 corridor,” said Dr. Sheldon Broedel, associate graduate program director for the M.P.S. in Biotechnology program. “With over 50,000 life sciences professionals in this region, UMBC is poised to educate and train individuals in the science and business of biotechnology, breaking the mold of classic academic training. Our faculty consists of full-time industry professionals who bring tremendous background and experience in the life sciences and management.”
Students will graduate as experts in the fundamentals that underlie biotechnology applications and product development. They will be able to analyze and interpret emerging technologies and lead commercial development, including clinical trials, inspections, and regulatory filing processes as well as budget and resource allocation.
The M.P.S. in Cybersecurity will follow a similar model in preparing students with the most up-to-date subject knowledge, combined with managerial skills. This curriculum will allow graduates to serve in leadership and operational roles throughout Montgomery County and the national capital region’s roster of government and industrial entities with deep interests in Cybersecurity.
"Through a combination of dynamic, adaptable program offerings and a highly recognized faculty consisting of thought leaders and industry practitioners, this program will serve a critical need in Montgomery County,” said Dr. Rick Forno, graduate program director for the M.P.S. in Cybersecurity program. “Cybersecurity is risk management at the highest level, and we are here to develop the next generation of professionals managing those risks.”
Gruaduates of the M.P.S. Cybersecurity program will be equipped with precise knowledge of the origins, nature, and current issues in cyberscecurity, and be able to identify ways to mitigate risks. They will be prepared to advance and manage cybersecurity capabilities and standards, including the development of an effective workforce in this rapidly expanding field.
Attend an Information Session!
Join UMBC staff and faculty to learn more about these exciting programs and career paths.
Biotechnology and Cybersecurity Information Session
Wednesday, April 24th
6:30 pm - 8:00 pm
]]>
The University of Maryland, Baltimore County (UMBC) will offer two new Master of Professional Studies (M.P.S) programs in Biotechnology and Cybersecurity at the USG campus, beginning Fall 2013....
http://www.umbc.edu/shadygrove/rsvp/
https://my3.my.umbc.edu/api/v0/pixel/news/26748/guest@my.umbc.edu/5e4bb9eda453b7d72d2c7e91a90fe97f/api/pixel
bio
cyber
grove
masters
shady
UMBC Professional Programs
https://my3.my.umbc.edu/groups/dps
https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/513/2e72ed76b7b3b9ce2f15fce64178dfaf/xsmall.png?1642086701
https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/513/2e72ed76b7b3b9ce2f15fce64178dfaf/original.png?1642086701
https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/513/2e72ed76b7b3b9ce2f15fce64178dfaf/xxlarge.png?1642086701
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/513/2e72ed76b7b3b9ce2f15fce64178dfaf/xlarge.png?1642086701
https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/513/2e72ed76b7b3b9ce2f15fce64178dfaf/large.png?1642086701
https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/513/2e72ed76b7b3b9ce2f15fce64178dfaf/medium.png?1642086701
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/513/2e72ed76b7b3b9ce2f15fce64178dfaf/small.png?1642086701
https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/513/2e72ed76b7b3b9ce2f15fce64178dfaf/xsmall.png?1642086701
https://assets1-my.umbc.edu/system/shared/avatars/groups/000/000/513/2e72ed76b7b3b9ce2f15fce64178dfaf/xxsmall.png?1642086701
Division of Professional Studies
https://assets1-my.umbc.edu/system/shared/thumbnails/news/000/026/748/d37a4794d6e3e3136f27b5e6ac12aca1/xxlarge.jpg?1364321270
https://assets4-my.umbc.edu/system/shared/thumbnails/news/000/026/748/d37a4794d6e3e3136f27b5e6ac12aca1/xlarge.jpg?1364321270
https://assets1-my.umbc.edu/system/shared/thumbnails/news/000/026/748/d37a4794d6e3e3136f27b5e6ac12aca1/large.jpg?1364321270
https://assets3-my.umbc.edu/system/shared/thumbnails/news/000/026/748/d37a4794d6e3e3136f27b5e6ac12aca1/medium.jpg?1364321270
https://assets4-my.umbc.edu/system/shared/thumbnails/news/000/026/748/d37a4794d6e3e3136f27b5e6ac12aca1/small.jpg?1364321270
https://assets4-my.umbc.edu/system/shared/thumbnails/news/000/026/748/d37a4794d6e3e3136f27b5e6ac12aca1/xsmall.jpg?1364321270
https://assets3-my.umbc.edu/system/shared/thumbnails/news/000/026/748/d37a4794d6e3e3136f27b5e6ac12aca1/xxsmall.jpg?1364321270
0
0
false
Tue, 26 Mar 2013 14:08:31 -0400
Dynamic jQuery Image Avatar Cropping Effect
I can still remember the old digg.com user profiles with dynamic avatar cropping via JavaScript. Their user interface was clean, easy to use, displayed a sample before you cropped, and would auto-update as you changed the selection box. I have always admired this design and have been on the lookout for a great jQuery plugin which can offer similar features with less custom code.
After toying with Jcrop I have come to really support this plugin. The codes are very small and do not require a whole lot of setup (although there are plenty of optional settings). My demo example will include dynamic avatar updating in real-time, along with a PHP rendering script. I think the amount of new social networks and websites offering user profiles should definitely take this UX technique into consideration.
Live Demo – Download Source Code
Setup the Project
First you should download a copy of Jcrop which includes a series of files we will need. The core will require a CSS and JS file, along with a copy of jQuery. The plugin will require more JavaScript for running the plugin and I have moved these codes into a separate file named cropsetup.js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
<title>Jcrop Dynamic Avatar JS/PHP Demo</title>
<link rel="shortcut icon" href="http://teamtreehouse.com/assets/favicon.ico">
<link rel="icon" href="http://teamtreehouse.com/assets/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/jquery.Jcrop.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Wellfleet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.js"></script>
<script type="text/javascript" src="js/cropsetup.js"></script>
</head>
This is my document header which contains a decent number of resources we need to include. Notice I have split everything into folders using js and css which typically makes organizing projects a whole lot easier. The crop.php file is only in the root for convenience of this demo.
<div id="wrapper">
<div class="jc-demo-box">
<header>
<h1><span>Jcrop Live Avatar Demo</span></h1>
</header>
<img src="images/cropimg.jpg" id="target" alt="[Jcrop Example]" />
<div id="preview-pane">
<div class="preview-container">
<img src="images/cropimg.jpg" class="jcrop-preview" alt="Preview" />
</div>
</div><!-- @end #preview-pane -->
<div id="form-container">
<form id="cropimg" name="cropimg" method="post" action="crop.php" target="_blank">
<input type="hidden" id="x" name="x">
<input type="hidden" id="y" name="y">
<input type="hidden" id="w" name="w">
<input type="hidden" id="h" name="h">
<input type="submit" id="submit" value="Crop Image!">
</form>
</div><!-- @end #form-container -->
</div><!-- @end .jc-demo-box -->
</div><!-- @end #wrapper -->
The code block above holds the entirety of my demo page body content. I have setup an outer wrapper and I’ve kept the container class .jc-demo-box as well. This could be changed to anything as long as the image and preview page will fit properly within the content area. Just reuse the same CSS properties and it will be all set. The img tag with the ID #target will display the full-sized image where a Jcrop selection can be drawn.
Underneath the main image there is a div with the ID #preview-pane and this holds another image tag. For this demo I set the aspect ratio at 1:1 so the avatar will always come out square. This aspect ratio requires an avatar container with the same square dimensions. We can see how this is accomplished in the stylesheet.
Common Page CSS
I will not go over much in the jquery.Jcrop.css file because these codes are traditional for the crop interface, so there are no customizations required, but elements within the content area need to be styled in a very specific fashion. )As a side note, the background tiling is called Mocha Grunge downloaded from Subtle Patterns.
)
/* jcrop styles */
.jc-demo-box {
position: relative;
text-align: left;
margin: 1.5em auto;
background: #fff;
-webkit-box-shadow: 0 3px 9px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0 3px 9px -1px rgba(0,0,0,0.75);
box-shadow: 0 3px 9px -1px rgba(0,0,0,0.75);
padding: 1em 2em 2em;
}
/* Apply these styles only when #preview-pane has
been placed within the Jcrop widget */
.jcrop-holder #preview-pane {
display: block;
position: absolute;
z-index: 2000;
top: 10px;
right: -210px;
background-color: #fff;
padding: 6px;
border: 1px solid #bcbcbc;
}
/* The Javascript code will set the aspect ratio of the crop
area based on the size of the thumbnail preview,
specified here */
#preview-pane .preview-container {
width: 150px;
height: 150px;
overflow: hidden;
}
These blocks are default settings which can be found in the original Jcrop demo page. The #preview-pane div is specifically important because we are using absolute positioning on the element. The internal preview div is fixed at 150×150 pixels so this is ultimately our final avatar size. We can always go back and edit the values to fit another style, just be sure and update the .preview-container properties.
#form-container {
display: block;
position: absolute;
top: 300px;
right: 35px;
}
#submit {
color: #fff;
font-size: 1.3em;
text-shadow: 1px 1px 1px #131313;
border: 7px solid #b0e49f;
padding: 14px 9px;
cursor: pointer;
background-color: #62be46;
background-image: -webkit-gradient(linear, left top, left bottom, from(#62be46), to(#41a62b));
background-image: -webkit-linear-gradient(top, #62be46, #41a62b);
background-image: -moz-linear-gradient(top, #62be46, #41a62b);
background-image: -ms-linear-gradient(top, #62be46, #41a62b);
background-image: -o-linear-gradient(top, #62be46, #41a62b);
background-image: linear-gradient(top, #62be46, #41a62b);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#submit:hover {
background-color: #72ce54;
background-image: -webkit-gradient(linear, left top, left bottom, from(#72ce54), to(#49b233));
background-image: -webkit-linear-gradient(top, #72ce54, #49b233);
background-image: -moz-linear-gradient(top, #72ce54, #49b233);
background-image: -ms-linear-gradient(top, #72ce54, #49b233);
background-image: -o-linear-gradient(top, #72ce54, #49b233);
background-image: linear-gradient(top, #72ce54, #49b233);
}
#submit:active {
-webkit-box-shadow: inset 0 2px 13px -1px rgba(0,0,0,0.35);
-moz-box-shadow: inset 0 2px 13px -1px rgba(0,0,0,0.35);
box-shadow: inset 0 2px 13px -1px rgba(0,0,0,0.35);
}
Since the container div is set to a relative position we are using substantial absolute positioning to squeeze the dynamic elements inside any layout. Particularly the preview image and crop button which are both located to the right-hand side. I have attached the attribute target=”_blank” so the cropped avatar PHP script will open in a new browser tab.
Configuring the jQuery Method
This final chunk of code is what will get Jcrop running and working properly in the layout. I have copied over the basic function template from the original demo, but I’ve enhanced the features so we can see a live update preview along with the final cropped image. This is my default method call but you may implement something much simpler if needed:
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
bgOpacity: 0.5,
aspectRatio: xsize / ysize
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
jcrop_api = this; // Store the API in the jcrop_api variable
// Move the preview into the jcrop container for css positioning
$preview.appendTo(jcrop_api.ui.holder);
});
Inside the method I am passing a number of unique parameters. Specifically these are onChange, onSelect, bgOpacity, and aspectRatio. The first two will call the custom function updatePreview() every time the user changes or adjusts the crop selection. bgOpacity allows you to set the level of transparency for the darker background. And obviously aspectRatio will configure the selection box dimensions. We are passing in some variables for this setting which can be explained by the earlier setup variables.
// Create variables (in this scope) to hold the API and image size
var jcrop_api,
boundx,
boundy,
// Grab some information about the preview pane
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
Inside the Jcrop API we can use a number of these variables for handling custom data. The final function clause from earlier will only call after the user has finished making their selection. It will update the preview image so that we can see it resized properly on the screen in real time.
function updatePreview(c) {
if (parseInt(c.w) > 0) {
var rx = xsize / c.w;
var ry = ysize / c.h;
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
$pimg.css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
}
The updatePreview() function is long-winded but necessary for getting the form inputs to work properly. I am targeting a series of hidden input fields which get passed along into PHP on submission. We can check the x/y coordinates and the width/height values to determine where PHP should crop the new avatar image.
Cropping and Saving in PHP
Although you do not need to use PHP as the backend language I chose this because of its popularity among open source web developers. Also the demo Jcrop files will include a similar crop file which is mixed inside another webpage. My edits have removed this PHP process into a new script that the user would likely never see(if using Ajax).
$targ_w = $targ_h = 150;
$jpeg_quality = 90;
if(!isset($_POST['x']) || !is_numeric($_POST['x'])) {
die('Please select a crop area.');
}
$src = 'images/cropimg.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor($targ_w, $targ_h);
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);
header('Content-type: image/jpeg');
imagejpeg($dst_r,null,$jpeg_quality); // NULL will output the image directly
exit;
The code is a lot easier than it looks since we do not need to perform much functionality. After creating a variable to hold the image contents via imagecreatefromjpeg() then we can make a copy and further clip out exactly what we need for the avatar. I want to focus on the final two lines which send out a header of image/jpeg followed by the image itself.
The header() function is only needed because the page isn’t outputting text/HTML code, it is outputting JPEG information. Otherwise we would not need to include this at all. If we look at the imagejpeg() function there are 3 parameters being passed – the newly cropped image, the save path, and the quality. Using NULL for the path will output the image directly but you can include a local relative path like /public_html/avatars/newimg1.jpg.
The only problem is that you also need a method of distinguishing various avatars from each other. The folder will appear crowded and confusing if you just append another number to the end of the filename. Even organizing by user ID can get messy. However this is obviously a much deeper topic, so I hope this tutorial can offer a good starting point for developers interested in creating such a dynamic user interface. Be sure to check out my live demo and catch a glimpse of this effect in action.
Live Demo – Download Source Code
Closing
Be aware that this script does require hosting on some type of PHP-supported web server to handle the actual image cropping, and please note the demo PHP script uses imagejpeg() to output the codes directly to the browser, instead of saving to a new image file. This was done to spare my server from handling loads of new files and HDD space. But these minor changes would require just a few code edits and the whole script is versatile enough for porting into your own website layout with ease.
The post Dynamic jQuery Image Avatar Cropping Effect appeared first on Treehouse Blog.
]]>
I can still remember the old digg.com user profiles with dynamic avatar cropping via JavaScript. Their user interface was clean, easy to use, displayed a sample before you cropped, and would...
http://feedproxy.google.com/~r/teamtreehouse/~3/0qWOhf1E-F0/dynamic-jquery-image-avatar-cropping-effect
https://my3.my.umbc.edu/api/v0/pixel/news/26761/guest@my.umbc.edu/3e208d9b06e36f7ac58cbcf6892d810f/api/pixel
android
cropping
css
css3
design
development
dynamic
html
images
ios
javascript
jquery
learn-to-code
php
responsive
ui
web
Web Developer - Build Group
https://my3.my.umbc.edu/groups/retired-583
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197
Web Developer - Build Group
0
0
true
Tue, 26 Mar 2013 13:30:38 -0400
Tue, 26 Mar 2013 13:30:38 -0400
