milosev.com
  • Home
    • List all categories
    • Sitemap
  • Downloads
    • WebSphere
    • Hitachi902
    • Hospital
    • Kryptonite
    • OCR
    • APK
  • About me
    • Gallery
    • Curriculum vitae
      • Resume
      • Lebenslauf
    • Social networks
      • Facebook
      • Twitter
      • LinkedIn
      • Xing
      • GitHub
      • Google Maps
      • Sports tracker
    • Adventures planning
  1. You are here:  
  2. Home
  3. JavaScript
  4. JavaScript

Stroke style

Details
Written by: Stanko Milosev
Category: JavaScript
Published: 06 August 2015
Last Updated: 06 August 2015
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:

Getters and setters

Details
Written by: Stanko Milosev
Category: JavaScript
Published: 30 May 2015
Last Updated: 23 March 2016
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

Few things which I learned

Details
Written by: Stanko Milosev
Category: JavaScript
Published: 24 May 2015
Last Updated: 26 May 2015
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"

Reading EXIF meta data from JPEG image files

Details
Written by: Stanko Milosev
Category: JavaScript
Published: 30 January 2015
Last Updated: 01 February 2015
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.

  1. Javascript is not executed in background
  2. To prototype or not
  3. Private and public methods
  4. Another way of introducing methods

Page 3 of 8

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8