daniel woolston

software developer | hockey dad | photographer | author | instigator

[danielwoolston]

Here we go!

Resurrecting the blog - exciting things ahead!

[danielwoolston]

Scraping EXIF Location Info

In my AngularJS side project, I needed to upload an image and if it has location information embedded within (EXIF), extract and use it for mapping. I tried a few options but landed on the exif.js.  You can find it here:

https://github.com/exif-js/exif-js

you can install it with bower:

bower install exif-js

Add the js file to your project (I use GULP) and you should be all set to pull out EXIF data if it exists.  

this code below was proof of concept code. be sure to add your defensive coding on the lon/lat objects before interrogating them.

function uploadFiles (files){    if (!files) return;    angular.forEach(files, function(file){        if (file && !file.$error) {            //scrape exif            EXIF.getData(file, function(){                //uncomment the alert to get a feel for what data is being pulled.                //alert(EXIF.pretty(this));                var lon = EXIF.getTag(this, 'GPSLongitude');                var lat = EXIF.getTag(this, 'GPSLatitude');                var latRef = EXIF.getTag(this, 'GPSLatitudeRef') || "N";                var lonRef = EXIF.getTag(this, 'GPSLongitudeRef') || "W";                lat = (lat[0] + lat[1]/60 + lat[2]/3600) * (latRef == "N" ? 1 : -1);                lon = (lon[0] + lon[1]/60 + lon[2]/3600) * (lonRef == "W" ? -1 : 1);                addToMap(lat,lon);            });        }    }); }

Hope this helps someone! If you have tweaks or a completely better way to do this, drop me a comment.

[danielwoolston]

this explains why many full stack devs don't sleep much. #shiny #coding #techaddict source: https://medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0#.sh83phoyb

[danielwoolston]

found this online. time to get at it.

[danielwoolston]

iot core install. here we goooooo

[danielwoolston]

new toy showed up today. this will be built into a win10 IOT project. #morepi

[danielwoolston]

picked up an @stmbags 'trust' laptop bag today. love this bag. built like a truck but an easy carry when its fully packed.

[danielwoolston]

#premierepro is starting to grow on me. very intuitive.

[danielwoolston]

fire up the #atari 810 and load up #ssi goodies. #retro #wargaming

[danielwoolston]

red light #happydance

[danielwoolston]

#futurehome #rockford (at The Rockford Dam)

[danielwoolston]

New legs for an old dog. Dropped a brand spankin' new power supply board and CPU card into the Atari 800 today. Running smooth now. Time to fire up some Star Raiders and ruin a few joysticks.

[danielwoolston]

#offseason #training #begins #hap (at Walker Ice & Fitness Center)

[danielwoolston]

Passing parameters on events - React.JS

maybe this was in the documentation and I just skimmed over it, but this seemed harder than it needed to be.

Inside a .map iteration I had an <li> that I was looking to handle the click event on for an internal process. Original, I was adding an ID to the element properties and grabbing that in the event:

function handleMyClick (element){

    if(element.target.attributes['data-scale-id']){  // do stuff }

}

the function would be called with something like:

identifierItem = <li data-scale-id={ scale.scaleID } key={scale.scaleID}  onClick={thisComponent.handleMyClick} className="scale-item"></li>;

I would take the ID and do a .props lookup to find the object I needed. It works but it doesn’t feel intuitive for someone that is accustomed to passing parameters to event handlers.

but then I came across this on the internets:

function handleMyClick (scale){

 if(scale){  // do stuff with the object -- no lookup needed }

}

identifierItem = <li key={scale.scaleID}  onClick={ () => thisComponent.handleMyClick(scale) } className="scale-item"></li>;

Now I can use the object from the .map - no lookup needed and its more inline with what I’m used to seeing. 

Hope this helps.

[danielwoolston]

#iamcaptainkirk

[danielwoolston]

It’s Alive!

It’s time to resurrect the blog! Lots of things to cover this summer: Angular 2, React.JS, Loopback.IO with a few other front end technologies thrown into the mix just for good measure. I’ve missed tech writing and would like to work my way back into it. No shortage of evolving tech to cover...

Stay Tuned!

[danielwoolston]