Make awesome effects using physics and javascript

The Physics library

Elastic smooth movement is everywhere and I wanted to experiment with it a bit for my consultancy little web page at incoding.ztp.pt. Besides I had this effect in my head for some time now. I wanted to blow my divided photo away and reunite it again in different combinations, as you will see below.

Final attract example snapshot

I started to look around for a physics simulation library. It should be fast, in other words, it should have only exactly what I needed for accomplishing those effects and not much more that would slow the computations. And I really found it on this physics javascript library by Jono Brandel.

The library is pretty straightforward: setup 2D particles and forces between them and hit “go”.

The effects

Besides the effects that I have described for my photo, I wanted a similar effect for a word cloud. In fact the effect is the inverse of the one on my photo: instead of the mouse repel stuff, mouse pointer would attract stuff!
[…]


Read the full article.

IgniteUI™ controls on AngularJS with generated unique IDs

The control library from Infragistics, IgniteUI™, is tailored for general Javascript usage under JQuery. To use it within an AngularJS web app, they have made a directive wrapper called “Ignite UI directives for AngularJS” available on GitHub.

At the time of this writing I’m using IgniteUI version 15.1.20151.1005 and V1.0.0 of ignite-angularjs.js.

Directive without ID

The following code snippet uses the IgniteUI angular directives as indicated on its instructions. It declares the directive for an igGrid and configures it all using custom HTML elements. At the bottom of this article there is the full code for the final version.

<div ng-controller="ctrl1">
<ig-grid data-source="dataJS" auto-generate-columns="true" event-data-binding="gridCreated">
<features>
<feature name="Selection" mode="row"></feature>
</features>
</ig-grid>
</div>
<script>
angular.module('app', ['igniteui-directives']).controller('ctrl1', ['$scope', ctrl]);
function ctrl($scope)
{
$scope.dataJS = [
{"title":"This is the title 1", "subtitle":"This is the subtitle 1", "id":1},
{"title":"This is the title 2", "subtitle":"This is the subtitle 2", "id":2},
{"title":"This is the title 3", "subtitle":"This is the subtitle 3", "id":3}];

$scope.gridCreated =
function(evt, ui)
{
$scope.grid1 = ui.owner.element;
$scope.dataJS[0].title = "created!";
};

$scope.$watch('grid1',
function()
{
if ($scope.grid1)
$scope.grid1.igGridSelection('selectRow', 1);
});
}
</script>

One thing that is missing from the IgniteUI directives is to store the created object on some angular scope so it can be later accessed to issue commands or get information from it. 
[…]


Read the full article.

Using AngularJS directives to simplify the DIV hell

Using bootstrap to build a prototype for a web app is really handy. Everything gets a decent look pretty fast. This applies greatly if you are  are not in a web design phase, just want to deal with the proof of concept or want to lay the interface and components without worrying with the design and layout details.

My current web app project has many editing panels like this:

image

In these panels several features of bootstrap are used: panels, forms and accordion.

And it gets pretty messy very fast:

 
<div id="bl-mytemplates-editor" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading"><a href="#bl-mytemplates-editor-properties" data-toggle="collapse" data-parent="bl-mytemplates-editor">Template Properties</a></div>
<div id="bl-mytemplates-editor-properties" class="panel-collapse collapse">
<div class="panel-body form-horizontal">
<div class="form-group form-group-sm row">
<label class="control-label col-sm-4"><span>Name</span></label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" placeholder="name" data-ng-model="templateData.name" />
</div>
</div>
<div class="form-group form-group-sm row">
<label class="control-label col-sm-4"><span>Width</span></label>
<div class="col-sm-8">
<input type="number" class="form-control input-sm" placeholder="width" data-ng-model="templateData.width" />
</div>
</div>
<div class="form-group form-group-sm row">
<label class="control-label col-sm-4"><span>Height</span></label>
<div class="col-sm-8">
<input type="number" class="form-control input-sm" placeholder="height" data-ng-model="templateData.height" />
</div>
</div>
<div class="form-group form-group-sm row">
<label class="control-label col-sm-4"><span>Margin</span></label>
<div class="col-sm-8">
<input type="number" class="form-control input-sm" placeholder="margin" data-ng-model="templateData.margin" />
</div>
</div>
<div class="form-group form-group-sm row">
<label class="control-label col-sm-4"><span>Border</span></label>
<div class="col-sm-8">
<input type="number" class="form-control input-sm" placeholder="border" data-ng-model="templateData.border" />
</div>
</div>
<div class="form-group form-group-sm row">
<label class="control-label col-sm-4"><span>Back</span></label>
<div class="col-sm-8">
<input type="color" class="form-control input-sm" placeholder="background color" data-ng-model="templateData.backgroundColor" />
</div>
</div>
</div>
</div>
</div>
</div>
 

I see three problems in here:

  • Verbosity.

[…]


Read the full article.