Baronen » Javascript

iPhonebilder på Google Maps via GPS-tag

Baronen — Sun, 17 Jan 2010 16:27:39 +0000

Det var ett tag sedan jag skrev en guide inom PHP nu, därför tänkte jag skriva lite Google Maps och PHP:s funktion exif_read_data.

Jag kommer i detta exemplet visa hur du plockar ut GPS-information från bilder tagna med en iPhone för att sedan visa vart bilden är tagen på Google Maps. Som nämnt tidigare kommer jag använda funktionen exif_read_data som hämtar ut exif-information från jpg bilder.

Beroende på vilken kamera bilden är tagen med kan man få ut information om bilden, till exempel GPS position, när bilden är tagen, vilken bländarinställning som användes med mera, men nu ska vi fokusera på att hämta ut GPS position.

Se demo eller ladda ner källkoden här.

Hämta bildens GPS position

Vi börjar med att hämta all information om bilden.

$metaData = exif_read_data('bild.jpg', 'ANY_TAG', 0);
print_r($metaData);

Detta resulterar i att vi får ut all meta information om bilden. Men det vi är ute efter är GPS informationen, här hittar vi GPSLongitud och GPSLatitud.

Ändra GPS format

Nackdelen är vi inte får ut GPS informationen i samma format som Google Maps använder, utan vi måste konvertera information till formatet DD (Decimal Degress).
Jag är ingen expert på GPS format med formeln ser ut enligt följande:
DD = Grader + (Minuter / 60).
Om vi tar exemplet från bilden så blir det: 56 + (39,92 / 60) = 56.6653333333

Jag har två funktioner för att returnera positionen.

public function convertToDecimalDegress($values)
{
	return $this->divide($values[0]) +  ($this->divide($values[1]) / 60) ;
}
 
public function divide($value)
{
	$values = explode("/", $value);
	return $values[0] / $values[1];
}

Som vi ser på bilden har vi värden i arrayen som till exempel, 3992/100, denna uträkning måste göras innan vi kan konvertera till DD formatet. Funktionen divide gör detta.
Funktionen convertToDecimalDegress gör uträkningen till formatet DD.

Resten av klassen

Vi har två klasser som tar hand om uträkningen. Nu är det dags att fylla på klassen med mer funktioner.

class MetaReader
{
	private $metaData = array();
	public function __construct($imageName)
	{
		$this->metaData = exif_read_data($imageName, 'ANY_TAG', 0);
	}
	public function getLatitude()
	{
		if(!isset($this->metaData['GPSLatitude'])) {
			return false;
		} else {
			return $this->convertToDecimalDegress($this->metaData['GPSLatitude']);
		}
	}
	public function getLongitude()
	{
		if(!isset($this->metaData['GPSLatitude'])) {
			return false;
		} else {
			return $this->convertToDecimalDegress($this->metaData['GPSLongitude']);
		}
	}
	public function convertToDecimalDegress($values)
	{
		return $this->divide($values[0]) +  ($this->divide($values[1]) / 60) ;
	}
	public function divide($value)
	{
		$values = explode("/", $value);
		return $values[0] / $values[1];
	}
}

Det vi har lagt till är en konstruktor som tar emot filnamnet som parameter, sen har vi två funktioner för att returnera latitud och longitud, getLatitude(), getLongitude().

Visa bilderna på Google Maps

Det första du måste göra för att använda Google Maps är att hämta en API-nyckel, detta kan du göra hos Google.

När du väl har fått din nyckel från Google är det dags att hämta GPS informationen från en bild.

$metaObj = new MetaReader('bild.jpg');
$latitude = $metaObj->getLatitude();
$longitude = $metaObj->getLongitude();

Nu får vi ut GPS-information från bilden i samma format som krävs för Google Maps. Nu är det bara att skicka in värdena till Google Maps javascript.

<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=DIN_API_NYCKEL" type="text/javascript">script>
<script language="JavaScript" type="application/javascript">
function initialize()
{
	var map = new GMap2(document.getElementById("map_canvas"));
	map.setCenter(new GLatLng(php echo $latitude?>, php echo $longitude?>), 12);
	var point = new GLatLng(php echo $latitude?>,php echo $longitude?>);
	map.addOverlay(new GMarker(point));
	map.openInfoWindowHtml(map.getCenter(), document.createTextNode(""));
	map.setUIToDefault(); 
}
script>

Här är javascript-koden för att placera ut en markering samt en textruta på kartan. För att köra denna javascriptfunktion kallar vi på den:

Ladda gärna ner källkoden för att studera koden närmare.
Jag hoppas du får lite nytta av detta exemplet.

Demo och källkod

Se demo eller ladda ner källkoden här.

Relaterade poster:

Google lanserar Go Language Google verkar aldrig sluta att lansera nya produkter, den senaste...
Doogle 4 Google kommer till Kalmar Den 21 Juli kommer Doogle 4 Google till larmtorget i...

Twitter på din webbplats med PHP och jQuery

Baronen — Thu, 20 Aug 2009 18:11:59 +0000

Aktiviteten på Twitter har ökat lavinartat den senaste tiden, inte minst i Sverige. Många som bloggar använder även twitter. Jag tänker i denna post beskriva hur du med hjälp av PHP och simpleXML hämtar ditt twitter-flöde och publicerar det på din egen webbplats.

När sedan biten med PHP och SimpleXML är färdig, kommer jag gå igenom hur man kan använda jQuery för att snurra twitter-flödet.

Enkel Steg för steg

Jag kommer börja med att hämta twitter-flödet med hjälp av funktionen file_get_contents. Denna funktion läser in en fil till en textsträng.

Steg två att att använda simpleXML för att tolka strängen som XML, samt plocka ut de delar i flödet jag är intresserad av.

Steg tre är att göra om flödet till XHTML och publicera det på webbplatsen.

Börja koda

Jag börjar med att skapa klassen Twitter.php. Denna klass sköter hämtningen av flödet samt hantering av XML. Klassen innerhåller en egenskap, en konstruktor och en funktion.

class Twitter
{
	private $twitterFeed;
	public function __construct($twitterFeed, $numberOfTweets = 10)
	{
		$this->twitterFeed = $twitterFeed . "?count=".$numberOfTweets;
	}
	public function processFeed()
	{
		$twitterXml = file_get_contents($this->twitterFeed);
		$xml = simplexml_load_string($twitterXml);
		$feedArray = array();
		foreach ($xml->channel[0]->item as $item) {
			$feedArray[] = array('title' => $item->title,
					 'pubDate' => $item->pubDate,
					 'link' => $item->link);
 
		}
		return $feedArray;
	}
}

Om vi går igenom koden lite kort så har vi en privat egenskap, $twitterFeed, denna innehåller adressen till flödet. Konstruktorn tar två parametrar, detta är alltså adressen till flödet samt hur många twitterposter vi ska hämta.

Det är funktionen processFeed som gör grovjobbet. Det första vi gör i funktionen är att läsa in hela flödet med funktionen file_get_contents. För att hantera flödet som XML används funktionen simplexml_load_string.

Efter vi läst in flödet som xml är det dags att iterera igenom det och spara undan de värden vi vill använda, i detta fall titeln, publiceringsdatumet samt länken till inlägget. Dessa värden sparar vi undan i en array, till sist returnerar vi hela arrayen.

Publicera Twitter på din sida

Jag har skapat index.php som jag kommer visa innehållet på.


$twitterObject = new Twitter('http://twitter.com/statuses/user_timeline/17820230.rss', 5);
$allItems = $twitterObject->processFeed();
?>
 


foreach ($allItems as $item) {
	echo "";
	echo "]."'>".$item['title']." - ".date('Y-m-d H:i', strtotime($item['pubDate']));
	echo "
";
}
?>

Vi börjar helt enkelt med att instansiera ett Twitterobjekt och skickar med adressen till flödet samt hur många poster vi ska hämta, i detta fallet fem. Efter vi skapat objektet anropas funktionen processFeed som returnerar arrayen med twitterposter. Därefter kan vi iterera igenom de posten med foreach.

Eftersom datumet från Twitter se ut som följande, Thu, 20 Aug 2009 10:23:23 +0000 använder jag funktionen strtotime för att göra om datumet till en timestamp. Därefter kan jag fomeratera det som jag vill med funktionen date.

Nu har vi alltså skapat en Twitter-klass som kan hämta ett visst antal poster, samt en webbsida där vi kan publicera twitterflödet.

I mitt demo har jag lagt på en stillmall för att snygga till flödet en aning. Denna CSS-fil ingår även när du laddar hem filerna.

Resultat

Se Demo av resultatet så här långt.

Snurra flödet med jQuery

Jag tänkte visa hur man kan snurra posterna med hjälp av javascript och jquery. Det jag tänkte fixa till nu är att endast visa två åt gången för att sedan animera posterna. Se demo.

  $(document).ready(function() {
	var slideInterval = 3000;
	var animationSpeed = 500;	
 
	window.setInterval(function() {
	  	var firstItem = $('#ul_list2 > li:first ');
		var itemHeight = firstItem.height() + 
				parseInt(firstItem.css("paddingTop")) + 
				parseInt(firstItem.css("paddingBottom") +
				parseInt(firstItem.css("marginTop")));
 
		$('#ul_list2 > li:first ')
			.animate({
				marginTop: (-itemHeight - parseInt(firstItem.css("marginBottom")))
			}, animationSpeed, "linear", function() {
				$('#ul_list2 > li:first ').remove()
				firstItem.css("marginTop", 0)
				$('#ul_list2').append(firstItem)
			})
	}, slideInterval);
  });

Var tredje sekund animerar vi flödet uppåt. För att veta hur långt vi ska flytta det uppåt räknar vi ut höjden på en post inklusive margin och padding. Sen använder vi jQuerys animate. När väl animeringen är klar, tar vi bort det översta elementet, som alltså ligger utanför boxen och flyttar ner det längst ner i listan igen.

Demo och källkod

Nu har jag visat hur man hämtar Twitter-flöde med PHP och sedan snurra posterna med jQuery.

Exempel utan javascript
Visa Demo eller Ladda ner källkoden här

Exempel med javascript
Visa Demo eller Ladda ner källkoden här

Relaterade poster:

Bing och Twitter slår sig ihop Idag har det blivit officiellt att Bing och Twitter har...

Hängde in en 5a på javascripten

Baronen — Wed, 09 Apr 2008 21:06:16 +0000

Som jag nämnt tidigare så har vi under de senaste veckorna haft ett sista projekt i javascriptkursen. Projektet gick ut på att skapa ett “skrivbord” med hjälp av javascript. Man kan öppna fönster, flytta och förstora, mitt innehåller också ett bildgalleri, en RSS-läsare och en “webbläsare”.

Idag redovisade jag alltså detta och hängde in maxbetyg. Känns riktigt skönt, avvaktar nu bara resultatet från tentan. Kan tillägga att detta var helt klart det roligaste projekt vi haft, men visst, ibland har jag blivit riktigt frustrerad när saker inte fungerar jag vill. Men så är det väl med all programmering.

Slänger med lite skärmdumpar från mitt skrivbord också. Enjoy!

Relaterade poster:

ASP.Net och Databas på schemat Nu är det slut med internetteknik och javascript, iallafall på...
MDI och webbprojekt Tänkte skriva lite om läget i skolan just nu. Händer...
Webbskrivbord i javascript Som rubriken antyder så är detta slutprojektet i javascriptkursen. Men...

ASP.Net och Databas på schemat

Baronen — Thu, 03 Apr 2008 13:04:52 +0000

Nu är det slut med internetteknik och javascript, iallafall på schemat. Efter denna kurs kommer jag faktiskt att använda javascript mer eller mindre på mina framtida sidor. Innan denna kurs har jag alltid varit mycket tveksam till användning av javascript på webbsidor men har nu fått ett mer öppet sinne.Hur schysst är det inte att göra ett trevligt valideringsscript, eller ladda in innehåll asynkront med AJAX. Visst, det finns alltid en gräns hur mycket man ska använda saker.

Men ett citat som jag hörde i skolan va “If all you have is a hammer, everything looks like a nail.” det passar ganska bra in kanske.

Såhär i slutet av javascriptkursen så måste jag säga att det va lätt den roligaste kursen vi haft hittils, ev den bästa också, konkurrerar lite med C# kursen också. Innan kursen började trodde jag att jag aldrig skulle kunna göra validering, lightbox, drag ‘n drop men men, underskattade mig själv lite. Har ett projekt kvar att redovisa sen tänkte jag lägga ut alla javascript applikationer på sidan.

Men nu är de över iallafall, med blandade känslor, iofs kommer väl javascript och AJAX fortsätta under året. I måndags började vi de nya kurserna som vi ska ha fram till slutet av maj. Kurserna är ASP.net och Databasteknik.

Det känns som dessa kurser kommer gå hand i hand, allt flyter ihop i ett projekt om ca 7 veckor. Vilket ska bli riktigt kul faktiskt, det är ju nu man får sätta ihop allt man har lärt sig under ett år.

ASP.net ska bli extra intressant eftersom jag inte ens kollat på det hittils. PHP har jag använt en del och känner mig inte helt vilsen. Men ASP.net är helt nytt, vid en första föreläsning visade läraren hur man skapar validering av ett formulär, man drog helt enkelt in en kontroll och klickade lite sen var det färdigt.

Själv har jag aldrig riktigt jobbat på de sättet så det kändes nästan som fusk. Visst det snabbar upp arbetet avsevärt men den där känslan av fusk när man drar in nåt och sen sköter programmet resten kommer förhoppningsvis försvinna. Men tror kursen kommer bli riktigt bra.

Den andra kursen är databasteknik där vi kommer gå igenom MS-SQL och MySQL. Hittils har det bara handlat om databasmodellering vilket jag kan känns är lite segt, vill gärna sätta mig och dra igång direkt med någor kreativt.

Men denna läsperiod kommer bli kul och också kanske lite tuff, men kommer lätt vara värt det.

Relaterade poster:

Nu börjar det hända, ASP.NET och Databas Det är egentligen nu det börjar hända grejer på webbprogrammering....
Lördagsnöje Tänkte skriva lite om vad som händer i skolan i...
Webteknik och Internetteknik – Nya kurser Tiden på högkolan i Kalmar rullar på som vanligt. Under...

Webbskrivbord i javascript

Baronen — Tue, 11 Mar 2008 12:13:33 +0000

Som rubriken antyder så är detta slutprojektet i javascriptkursen. Men innan jag berättar om det så har jag lovat att visa den föregående laborationen som va att skriva ett formulärvalideringscript. Här kan du läsa mer om vad den labben gick ut på. Jag har denna gång valt att spela in en film på denna uppgift.

Formulärvalidering i javascript

Den sista laborationen är alltså att skriva ett eget “skrivbord” i javascript. Det ska helt enkelt fungera som ett skrivbord gör i tex Windows eller Linux. Det ska finnas ikoner, man ska kunna öppna nya fönster, förstora fönster, hämta data asynkront med AJAX. Denna uppgiften blir lite att bita i men också den roligaste, vi har ganska fira händer och utveckla som vi vill. Väldigt spännande.

Återkommer med mer information om detta.

Lite annat som har hänt att jag har införskaffat mig ett Nintendo Wii. Helt klart en annorlunda konsol.

Läs även andra bloggares åsikter om Javascript, validering

Relaterade poster:

Laboration 5 i javascript färdig Har idag lyckats göra klart den femte laborationen i javacriptkursen....
Memory och Shoppingvagn i javascript Har idag redovisat laboration 4 i javascript-kursen nu. Överlag har...