- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 3342
Idea is to display image as a "brush", which means instead of black (or any other color) line to have image.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="/index.css"> <meta charset="UTF-8"> <title></title> </head> <body> <div class="bg sprites sprite_338x338_gc4_ring"></div> <canvas id="myCanvas" width="338" height="338"></canvas> </body> <script> var myImage = new Image(); myImage.src = "338x338_repeating_gc4_dim_hatch.png"; myImage.onload = function () { var myCvns = document.getElementById("myCanvas"); var myCntx = myCvns.getContext("2d"); var pat = myCntx.createPattern(myImage, "no-repeat"); myCntx.lineWidth = 10; //myCntx.strokeStyle = "red"; myCntx.strokeStyle = pat; myCntx.arc(168, 170, 165, 0, 8, false); myCntx.stroke(); } </script> </html>
Notice line:
myCntx.strokeStyle = pat;
With that we are actually using our pattern to display image. Instead of pat write "red", for example, to see the difference.
Live example:- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 3485
This morning I was reading this web site, about getters and setters in JavaScript, and here I want to copy / paste code which I saw there:
function wrapValue(_value) { return { get value() { return _value; }, set value(newValue) { _value = newValue; } }; } var x = wrapValue(5); console.log(x.value); // output 5 x.value = 7; console.log(x.value); // output 7
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 3570
I just want to write few things which I learned these days.
$.Callbacks - sort of a queue of functions, where all be executed at once on fire. Example:
function consoleLogtestOne() { console.log("test one") } function consoleLogtestTwo() { console.log("test two") } var myCallbacks = $.Callbacks(); myCallbacks.add(consoleLogtestOne); myCallbacks.add(consoleLogtestTwo); myCallbacks.fire();
With line of code:
myCallbacks.fire();
we are executing both functions at once.
Array.prototype.map(Function) - executes callback function for each member in array. Example:
/*global console*/ (function () { "use strict"; var myNumbers = [1, 4, 9], variableWhichWillDoNothing; variableWhichWillDoNothing = myNumbers.map(function (currentValue, index, array) { console.log("currentValue: " + currentValue); console.log("index: " + index); console.log("array: " + array); console.log("---"); return "nothing"; }); console.log("Just to do something with doubles (to satisfy jsLint): " + variableWhichWillDoNothing); }())
Result will be something like:
Function.prototype.apply() - provides arguments as array to function.
Check these two examples:
function applyLog() { console.log.apply(console, arguments); } function justLog() { console.log(arguments); }
If you execute justLog like this:
justLog("test1", "test2")
Result will something like this:
As you can see result is an array.
Now lets execute applyLog:
applyLog("test1", "test2")
Result is something like:
As you can see no array.
Using apply and map you can generate array of elements, for example:
Array.apply(null, Array(24)).map(function (_, i) {return ('0' + i)});
Result:
["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "010", "011", "012", "013", "014", "015", "016", "017", "018", "019", "020", "021", "022", "023"]
slice - select elememts
Check this example:
('stanko').slice(-1)
Result:
"o"
Another:
('stanko').slice(-2)
Result:
"ko"
One more:
('stanko').slice(2)
Result:
"anko"
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 8701
I was using this JS library, and google maps.
Exif library will extract GPS location as a Degree-Minute-Second, while Google uses Decimal degrees, that is why we need first converter:
function ConvertDMSToDD(degrees, minutes, seconds, direction) { var dd = degrees + minutes/60 + seconds/(60*60); if (direction == "S" || direction == "W") { dd = dd * -1; } // Don't do anything for N or E return dd; }
Next thing we need to load the image, in my case I did it with simple Ajax request (no jQuery):
var http = new XMLHttpRequest(); http.open("GET", "IMG_20150103_154405.jpg", true); http.responseType = "blob"; http.onload = function(e) { if (this.status === 200) { var image = new Image(); image.onload = function() {
Then reading EXIF data is simple:
EXIF.getData(image, function() { myData = this; var mapCanvas = document.getElementById('map-canvas'); var latDegree = myData.exifdata.GPSLatitude[0].numerator; var latMinute = myData.exifdata.GPSLatitude[1].numerator; var latSecond = myData.exifdata.GPSLatitude[2].numerator / 1000; var latDirection = myData.exifdata.GPSLatitudeRef; var gLat = ConvertDMSToDD(latDegree, latMinute, latSecond, latDirection); var lonDegree = myData.exifdata.GPSLongitude[0].numerator; var lonMinute = myData.exifdata.GPSLongitude[1].numerator; var lonSecond = myData.exifdata.GPSLongitude[2].numerator / 1000; var lonDirection = myData.exifdata.GPSLongitudeRef; var gLon = ConvertDMSToDD(lonDegree, lonMinute, lonSecond, lonDirection);
Notice that latSeconds I had to divide with 100, mapCanvas I need for google maps, an code for google maps looks like this:
var myLatlng = new google.maps.LatLng(gLat, gLon); var mapOptions = { center: myLatlng, zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(mapCanvas, mapOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Hello World!' }); google.maps.event.addListener(marker, 'click', function() { alert("Hello world") });
To center google maps I needed myLatlng which I also used to place a marker, and here you can notice example how to add event to marker:
google.maps.event.addListener(
marker, 'click', function() {
alert("Hello world")
});
Example download from here. Also, don't forget this example requires IIS, or some other web server.