HTML5 Canvas – Mouse Wheel Zoom In/Out on Point

I’ve created a new demo that allows you to zoom in and out based on where you use the mouse-wheel on the image.

This will keep your image and cursor on the same spot while mouse-wheeling up or down.

View Demo:

http://dayobject.me/canvas/demo12/

Source for Demo 12:

https://github.com/dimxasnewfrozen/Panning-Zooming-Canvas-Demos

For more demos check out:

http://dayobject.me/2015/07/02/html5-canvas-demos-panning-and-zooming-an-image/

HTML5 Canvas – Touch Gesture & Pinch Zooming

I’ve create two new demos that work with gestures on mobile devices. I can’t always rely on a javascript library to take care of everything so I mostly have to write things from scratch.

Here are two examples.

Demo 1 – If using a mobile device/browser you can pinch and move around with two fingers. It will plot on the canvas where your two fingers are moving relative to your starting center point.

https://github.com/dimxasnewfrozen/Panning-Zooming-Canvas-Demos.git

 

Demo 2 – This demo takes the above logic and adds to it. It will track your total distance moved by using the euclidean distance formula on your two points. It will then calculate a ratio based on the distance moved and scale the original image up or down.

https://github.com/dimxasnewfrozen/Panning-Zooming-Canvas-Demos.git

Fun and Simple Message Encryption

A very basic encryption mechanism.

encrypt

Generating a random key

$bytes = openssl_random_pseudo_bytes(16, $cstrong);
$key = bin2hex($bytes);
$encoded = $crypt->encrypt($message, $key);

Encrypting the message using PHP and mcrypt

$data = mcrypt_encrypt(MCRYPT_RIJNDAEL_256, $key, $message, MCRYPT_MODE_ECB, 'keee');
return base64_encode($data);

Try it out for yourself. Decrypt this message!

http://dayobject.me/encrypt/decrypt.html

Key: 888dc8c57e490b3988a0d5bbb3282d58

Message: pkwtyehxkHvRhWQ0RVTcdR0kqROR/mLaDf9bxcKaKTA=

 

HTML5 Canvas Demos: Panning and Zooming an Image.

I have been doing a lot of work in javascript/html5 canvas lately. I have written a tile generating API in PHP and Google Protocol Buffers. Once that was completed, I need to request these tiles so I wrote a tile render engine using HTML5 canvas and Javascript.

I have been slaving over all of this for about a year and I think it’s time to share some basic information about it.

I’ve put together some demos. It starts off dead simple: how to initialize a canvas and draw a rectangle.

Currently, I’m on demo 9 which shows how to zoom in to the center of an image.

You can check out the code on Github:
https://github.com/dimxasnewfrozen/Panning-Zooming-Canvas-Demos

You can also browse all of the demos individually:

Demo 1

Introduction to HTML5 canvas. How to initialize a canvas object and draw a colored rectangle.

Demo 2

How to intialize an image object and draw it inside of the canvas

Demo 3

How to calculate the scaling of an image given a predefined width and draw it to the canvas

Demo 4

Initialize a bunch of canvas events: clicking (mousedown), dragging (mousemove), letting go (mouseup) and write a simple log of the events.

Demo 5

Grab the coordinates of mousedown, initialize the drag event and update the distanced moved from dragging. Update the canvas image based on distanced moved/dragged.

Demo 6

Keep track of how far the image moved based on previous drag events instead of resetting the image position to 0,0 every time.

Demo 7

Incorporate jQuery to quickly handle/access button events for new Zoom in and Zoom out options. Use a basic 2x zoom scale and multiply the size by 2 when zooming in. Divide by 2 when zooming out. Redraw the canvas with new sizes for each zoomin/zoomout event.

Demo 8

All zoom in/zoom out events were initially being draw to 0,0 for the upper left coordinate. Zoom in/out to the center of image instead of the top left.

Demo 9

Since we’re calculating the center frequently, create a method that can be used throughout instead of calculating it every event. Also set the initial image display to be centered.

The source of the image that I use for the demos comes from:
https://commons.wikimedia.org/wiki/File:ESO_Very_Large_Telescope.jpg

Pellet Stove Usage Chart in D3.js

My wife and I recently purchased our first home. The primary source of heat is the pellet stove. As of two weeks ago, I didn’t know how to operate a pellet stove. We bought a couple tons of pellets and figured how to use the stove. My problem was that I felt like I was burning too many bags of pellets. I was burning a littler over a bag a day (40lb bags) and wasn’t sure exactly if that would last me all winter at that rate.

I wanted to know at what rate I could burn the pellets and how far my pellet stock pile would last at that particular rate. You can calculate this a few ways:

1) total number of bags / bags burns per day = # of days from today.
100 / 1.5 = 66.6 — the number of days from today that your pellets will run out if you burned 1.5 bags per day.

 

2) total number of bags / # of days from today = bags burned per day
100 / 66.6 = 1.5 — the number of bags burned per day to reach 66.6 days from now

 

I didn’t want to run this calculation every time I wanted to figure this out. I wanted a quick reference to something since this is a pretty constant calculation. The only variable is the temperature that you want to heat at and how cold is is outside.

graph

I created this graph that will run this calculation based on wherever you hover over.

View Graph

The graph was written using the D3 javascript library.

 

A Simple Personal Finance Simulator for Monthly Expenses

I’ve always loved to crunch numbers, ever since I was a kid. I wasn’t terrific at math but I’ve had an odd interest in manipulating numbers to see what the outcome is.

Since I’ve graduated college and was able to work full time as a software developer, I’ve always run different financial scenarios to see how much I could save a month, how much more I could afford to pay off student loan debt per month, how quickly I could pay of my car with the left over monthly income I have, etc…

Running these scenarios was time consuming at best. I always relied on the Windows calculator and had to keep track of the numbers on a spreadsheet.

I finally got around to creating a web app that can crunch these numbers more efficiently and effectively.

Quickly run monthly financial scenarios.
Quickly run monthly financial scenarios.

The app features:

  • Add and edit your monthly income
  • Add or edit monthly expenses
  • Auto calculate: total debt, total monthly expenses and remaining monthly income.
  • Save data locally without sharing it with the rest of the web
  • Quickly reset your data to start over

The app technology:

RUN THE APP

CODE

jQuery UI Sortable and Droppable Helper Handler With Multiple Objects

jquery_drag_multiple_with_helper

This script combines many different aspects of Javascript, jQuery and jQuery UI:

  • Sortable: ui helpers, array manipulation, class manipulation
  • Droppable: acceptable items, class manipulation, animations

I’ve been working extensively on an image management application. I’ve been using jQuery and jQuery UI to handle dragging of images. I put together this script to show some of the fundamental processes in creating such an app.

One UX issue I had was when users selected multiple items and dragging them to a image group. The jQuery UI helper only showed one image upon dragging which is misleading to the user since they checked off multiple images.

To show the user that they are indeed dragging multiple images, I stacked the selected images on top of each other using css3’s rotate transforms. I created a div object and replaced the jQuery UI helper with this object.

View Code

View Demo

 

Handlebars.js: {{#each}} example with jQuery ajax data

Handlebars.js is a powerful template engine for javascript/html. It cleans up your javascript code by splitting up the DOM manipulation in your html files (like it should be).

This is an example of using the {{#each}} block to loop through a json object returned by a jQuery ajax request.

index.html

<!-- The DOM element that will hold our results -->
<div id="results"></div>

<!-- The handlebar template -->
<script id="results-template" type="text/x-handlebars-template">
{{#each items}}
<iframe width="420" height="315" src="//www.youtube.com/embed/{{id}}" frameborder="0" allowfullscreen></iframe>
{{/each}}
</script>

<!-- include dependencies -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
<script src="js/handlebars.js"></script>
<script src="js/main.js"></script>

main.js

$(document).ready(function () {

var templateSource = $("#results-template").html();
var template = Handlebars.compile(templateSource);
var resultsPlaceholder = $("#results");

var q = "charlie";

$.ajax({
url: 'http://gdata.youtube.com/feeds/api/videos?q=' + q + '&max- results=5&v=2&alt=jsonc',
success: function (response) {
data = response.data;
resultsPlaceholder.html(template(data));
}
});
})

I apologize for the formatting of this syntax highlighter. It’s not the cleanest code to look at but it should get you going in the right direction.