Coding Grounds

Sunday 17 September 2017

HTML 5 Geolocation introduction

This article will introduce you to HTML 5 Geolocation API.

First off, test the browser for support of HTML 5 Geolocation. The first call to get the location of the client / user will also prompt a dialog that the user must usually confirm to to allow getting the location.
The following Javascript is necessary to get the latitude and longitude of the client :


 function getLocation() {
  if (navigator.geolocation){
   var position = navigator.geolocation.getCurrentPosition(showPosition);
  }
 }
        
 function showPosition(position){
  console.log(position);
  $("#demo").html(position.coords.latitude + " " + position.coords.longitude);
 }

Note that you can retrieve additional information such as altitude, heading and speed if the client got positioning hardware supporting this.
Mozilla Developer Network - Coordinates object
In Firefox, you have to use HTTPS to use Geolocation in newer versions of this browser. The client must agree to share the current location. A demo of Geolocation is here:

HTML 5 Geolocation demo - Plunk

Let us also use a map to show the location of the user. We can use Google Maps API. To use this API, request a Google API Key from here:

Google API Key site

We plot the current location with some script below using the Google Maps API, adding a Marker that is bouncing on top of the current location.


  function getLocation() {
   if (navigator.geolocation){
    var position = navigator.geolocation.getCurrentPosition(showPosition);
   }
  }
        
  function showPosition(position){
        
   var mapCanvas = document.getElementById("demo");
   var myCenter = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
   var mapOptions = {center: myCenter, zoom: 12};
   var map = new google.maps.Map(mapCanvas,mapOptions);
   var marker = new google.maps.Marker({
    position: myCenter,
    animation: google.maps.Animation.BOUNCE
   });
    marker.setMap(map);
        
  }

The current location is displayed using Google Maps as displayed here:

Support for Geolocation in Firefox is limited to HTTPS and recent version of Firefox may not function with Geolocation in Linux, newer than Firefox version 20. If so, downgrade to Firefox Version 20. I have tested the code above using Opera web browser in Linux Mint 15.

Note that we here added Google Maps Javascript source reference and an Google API key.


  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAeymq4mlrbKoBUhU3LdegaudQDnY7MFPo&callback=myMap"></script>

Sunday 3 September 2017

Modernizr feature discovery demo

I just made a Modernizr feature discovery demo! It lists up the features Modernizr looks for and tests the browser you are running if it supports that feature! Plunk - Modernizr demo



<html class="no-js">

<head>
<meta charset="utf-8"/>
<title>Modernizr browser feature detection</title>
<script data-require="modernizr@*" data-semver="2.6.2" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.js"></script>
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="underscore.js@*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
</head>

<style>

.greenlight {

}

.yellowlight {

}

.redlight {

}

.trafficlight {


}

.trafficlight:after {
    background-color: #10AF20;
 border-radius: 10px;
 padding-left: 5px;
 padding-right: 5px;
}

.redlight:after {
 content: "UNSUPPORTED ";
    color: #f0f0af;
    background-color: #AF1020;
}

.yellowlight:After {
 content: "PERHAPS SUPPORTED";
 color: #f0f0af;
    background-color: #AFAF10;
}

.greenlight:after{
 content: "SUPPORTED ";
 color: #f0f0af;
 background-color: #10AF20;
}

.underlight{
 margin-left:30px;
}

li {
 font-family: Trebuchet, Verdana;
 margin: 4px;
}

</style>

<body>
<h2>Modernizr browser feature detection</h2>


<ul id="ModernizrFeatureList">
<script>

function displayfeature(feature, isSubfeature){
   var isFeaturePartiallySupported = false;
   var isFeatureSupported = false; 
   if (eval("Modernizr." + feature) === true){
    isFeatureSupported = true;
   }
   if ((eval("Modernizr." + feature) === "probably") | (eval("Modernizr." + feature) === "maybe")){
    isFeaturePartiallySupported = true;
   }

   //debugger;

   var trafficlight = "trafficlight" + " ";
   if (isFeatureSupported)
    trafficlight += "greenlight"; 
   if (isFeaturePartiallySupported)
    trafficlight += "yellowlight"; 
   if (!isFeatureSupported && !isFeaturePartiallySupported){
    trafficlight += "redlight";
   }

   if (isSubfeature)
    trafficlight += " underlight";

   var featureToShow = "<li class='" + trafficlight + "'>" + feature + ": " + eval("Modernizr." + feature) + " </li>";

   return featureToShow;
}

var modernizrProps = _.sortBy(Object.keys(Modernizr), function(key){ return key; });


modernizrProps.forEach(function(feature, index){

  var modernizrFeatureType = eval("typeof Modernizr." + feature); 

   if (modernizrFeatureType == "boolean"){
     var f = displayfeature(feature, false);
     $("#ModernizrFeatureList").append(f);
   }
   else if (modernizrFeatureType === "object"){
    try {
     //debugger;
     for (var subfeature in  eval("Modernizr." + feature)){
     var subf = displayfeature(feature + "." + subfeature, true);
     $("#ModernizrFeatureList").append(subf);
    }

    }
    catch (Error){

    }
   }
 
});


</script>

</ul>
</body>
</html>

Thursday 24 August 2017

Getting started with CSS3 Animations

CSS3 animations can give your web sites dynamic effects and visual queues for added user friendly navigation. Of course, such effects could quickly become noisy if exaggerated. I have added a sample demo of a Bookshelf with HTML and CSS3 below.

CSS3 Animated Bookshelf (Plunk)

The following HTML builds up the user interface - that is, the Bookshelf itself.


<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>CSS3 Animations - Bookshelf</h1>
    
    <div id="box1" class="box">
      <p>HTML 2.0 for beginners</p>
    </div>
    
     <div id="box2" class="box">
      <p>Internet Relay Chat Powertips</p></p>
    </div>
    
     <div id="box3" class="box">
      <p>MS-DOS 5.0 Masterclass</p>
    </div>
    
     <div id="box4" class="box">
      <p>QBasic Game Coding</p>
    </div>
    
  </body>

</html>

To animate these "Books", that is the < div > elements, CSS3 rules are added. The following CSS3 style sheet was added:


  /* Styles go here */

@keyframes FocusBook {
  0% { 
    transform: scale(1.1);
  }
100% {
    transform: scale(1.8) rotate(90deg);
    box-shadow: 8px 8px 8px #8080af;
    text-shadow: 1px 1px #102030;
    top: 50%;
    left: 50%;
    position: fixed;
    color: white;
    background:linear-gradient(90deg, peru, brown);
  }
}

.box {
    width:50px;
    height:250px;
    border:1px solid black;
    box-shadow: 2px 2px 2px #808080;
    background:linear-gradient(peru, burlywood);
    transform: rotate(0deg);
    transition: all 1s;
    float: left;
    opacity:0.9;
    margin: 2px;
    user-select: none;
}

.box:hover {
  transform: translate(2px, 0px) rotate(2deg) scale(1.1);
  cursor: pointer;
  box-shadow: 2px 2px 2px yellow;
  color:black;
  background:linear-gradient(45deg, peru, brown);
  z-index:20;
}

.box p {
  font-family: Verdana;
  color: charcoal;
  font-size:10pt;
  white-space: nowrap;
  transform: rotate(-90deg) translate(-190px, -10px);
}

.box:active {
  animation: FocusBook 1.0s infinite alternate;
}

To support transitions with CSS, you add the CSS attribute transition with a comma-separated list of css attributes to allow transitioning and the time the transition should take. We add first all here to allow transition all attribute changes:

.box {
    width:50px;
    height:250px;
    border:1px solid black;
    box-shadow: 2px 2px 2px #808080;
    background:linear-gradient(peru, burlywood);
    transform: rotate(0deg);
    transition: all 1s;
    float: left;
    opacity:0.9;
    margin: 2px;
    user-select: none;
}

The transition is then in effect for the hover transition.


.box:hover {
  transform: translate(2px, 0px) rotate(2deg) scale(1.1);
  cursor: pointer;
  box-shadow: 2px 2px 2px yellow;
  color:black;
  background:linear-gradient(45deg, peru, brown);
  z-index:20;
}

Now, let's take a look at the animation effect when the user clicks on one "Book". We define key frames first.

@keyframes FocusBook {
  0% { 
    transform: scale(1.1);
  }
100% {
    transform: scale(1.8) rotate(90deg);
    box-shadow: 8px 8px 8px #8080af;
    text-shadow: 1px 1px #102030;
    top: 50%;
    left: 50%;
    position: fixed;
    color: white;
    background:linear-gradient(90deg, peru, brown);
  }
}

Then we play the animation after defining the key frames (note the percentage to specify keys at a relative elapsed time of the animation):


.box:active {
   animation: FocusBook 1.0s infinite alternate; 
}

Note that the CSS attribute animation now points to the @keyframes defined. In addition, the animation uses the keywords infinite and alternate.

The best use of CSS3 animations is most likely subtle changes in color and size, and using CSS transforms. You can define many keys in @keyframes definition for complex animations.