Is this the real life? Is this just fantasy?

We are entering an age of immersive technologies. Virtual Reality, 360 degree videos, real life simulators and augmented reality. Where did all this begin? For me, it was the introduction of google street view. Launched in 2007 in the United States, included with Google earth in 2008 before being added to Google maps in 2009. We had to the option to go anywhere in the world, right from our living rooms, so where did we all decide to go? Outside our own house. Amazing isn’t it! Below is me touring the external office right from my desk.

streetview

Virtual Reality allows you to become immersed into an environment right from your home. By now everyone has seen the virtual reality headsets that you can get, which allow you to be placed into environments such as games or movies. It can either fall into two categories: simulation of real environment or an imagined environment I.e. a game. The BBC have offered virtual reality technology for the world cup, which allows you to be on the pitch in various locations.

image-1

Augmented Reality allows for a mixture of real world and computer generated overlays. A major example of this is the Pokemon go app, which overlays Pokemon in real life and became a worldwide phenomenon in 2017. The Ikea augmented reality app allows you to place pieces of furniture in your home before actually buying them.

image-2

 

360 Degrees images and videos now enable you to get full immersive views of pretty much everywhere. Companies are now taking full advantage of this technology to. It all began with a panorama image but now you can go up, down, left and right or a complete circle if you so wish. A couple of interesting examples are the Emirates ‘immersive experience’ which allows you to explore different seating classes for the A380 and the deadliest catch 360 website that allows you to explore various boats 360 degrees.
image-4

Lastly I would just like to mention the Magic Leap company website. Magic Leap are an augmented reality company looking to release their own headset this year and I think the desktop version of their website is awesome.

image-3

Thanks for reading,

Andy

We have recently been tasked to build an app for one of our clients. So I am going to provide you with a basic outline of creating a Xamarin android app. Why Xamarin and not straight up android you ask? Here at QuayTech one of our specialisms is .Net and because .Net is a Microsoft technology they like to use either C# or Visual basic as a programming language. So we have chosen to use Xamarin as it is a framework written in C# that will allow us to write apps in C# as opposed to Java which standard Android apps are written in.

Getting Started

To begin open Microsoft Visual Studio, select New Project and choose Android on the left hand side and a blank android app as the project type. Note: As a pre-requisite you will need to have Xamarin installed for your visual studio (). You can then name your app and choose the location to save the app to.
image-1

The Layout
image-2

I’m going to talk to you about the basic overview layout of the Xamarin android project. The Assets folder is where you store assets that aren’t images for example database files. Inside the resources folder the drawable section is where you can store any images you have that are not icons. The various mipmap folders are designed for storing different icons and splashscreen images at different resolutions as outlined in this blog here. Inside the layout folder are .axml files. These are essentially different views, if you double click on you’ll see that it opens a designer in visual studio as I’ll demonstrate in a minute. Inside the values folder, the Strings.xml folder is used to store constants that are used throughout your app, for example the app name, a company slogan, etc i.e. things that may need updating throughout the app. The last important part of the layout is the MainActivity.cs file at the bottom. As you can see the convention here is that the activity matches to a designated layout file. The activity file essentially acts as your code behind for the layout.

The Designer
image-3

After double clicking on a .axml file you are presented with this screen. In the centre you can see the view that you are currently working with and the left is a toolbox which houses different components. As you can see in the bottom left of the centre screen you can switch between the design and the source of the view. It is now a case of dragging and dropping your components onto the page and editing the properties for each.

The Activity
image-4

As I said earlier the activity files are designed to act as the code behind for the views. For example this is the one for the Main layout which is created by default. At the top we can see that the title for the page is set, and we have told the application that this is the first page that we want to load by the MainLauncher flag being set. Inside the ‘oncreate’ method we can see that we have told the activity to link to the Main layout that we spoke about earlier.

So there you have it a basic overview of the Xamarin Android project. Now it’s time for you to go off and experiment with hopefully this very helpful tutorial/overview.

Andy

 

 

 

On the 5th June 2018 MapQuest are retiring their JavaScript Maps API which is currently being used by a major client of ours to handle all of their logistics. Lucky for me the task fell on my list however, unlucky for me their documentation to help you migrate was none to great. MapQuest provided the basics as to what to do to migrate the main features i.e. overlays, markers, etc over to their new ‘MapQuest.js’ but we had some functions that required a little more work, to find out how to alter them.  These I have shared below, to assist in your migration to the new MapQuest API.

 

New Icons

The new icons are outlined as above, you define the icon object itself and then you assign that icon object to that of a marker you want to place.

  • The icon size – defines the size of the icon.
  • The icon URL – defines the URL of the icon image (here I’ve used the icon API provided by mapquest whereby you specify what you want, what colour you’d like and what number to be displayed on it).
  • The popup Anchor – defines where you’d want to offset the popup too, if your icon was to have a popup.

 

Popups

In the previous example we had spoken about popup anchors to allow the positioning of popups to be designated, I’m now going to give an example of how we actually create popups.

As you can see here we have binded a popup to the marker object and in order to open it we have to create a JavaScript function that we allow for the popup to open when the mouse is over the top of the marker, as opposed to having it open all the time.

 

Centering a Map

Previously all you would need to do to centre a map would be to call map.bestFit(); mapquest have removed this simple function and instead made it a little more work to centre your map, especially when you have multiple items on the page such as icons, overlays, etc.

As you can see you now have to build up an array of the coordinates present on the map and then pass that into the fitBounds method which then adjusts the map accordingly.

 

Drawing Lines

Drawing lines have been made easier!  Whereby you pass a set of coordinates into a function it is the same with drawing lines. This is one of the best things I have found with the migration the simplicity of drawing lines.

 

Spidering

The final migration item I am going to talk about is the situation where you can have multiple markers at the same location. In the old API this was simple, you had to set the marker to .setDeclutterMode(true); this would allow for it to work out by itself if there were multiple markers at that location and spider out accordingly. They haven’t written this functionality in the new API so I had to use a plugin (https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet) to give me the ability to this.

As you can see you create a new overlapping marker spiderfier object and pass in the map that you are currently working with. You then add the markers to the object and it works out for itself which ones overlap. I had to tweak the library slightly because it hadn’t been worked on since 2013 and I wanted the functionality to keep the spiderfied markers showing. So I removed the functionality to close the spiderfy and wrote a piece of JavaScript that would click all the icons open on load.

 

In Summary

So as you can see the migration was not as straightforward as I had hoped and more annoyingly the migration ‘guide’ (http://marketing.mapquest.com/rs/099-SNC-768/images/MQ_B2B_Migration-Guide.pdf) provided was not as complete as it needed to be!  Hopefully some of the examples I have provided here will help you migrate your MapQuest solutions.

Happy Migrating!

Andy

  1. Thou Shalt add Comments

Who knows what is going on in your code if you don’t tell anyone. A good developer will make sure they add descriptive comments to help anyone who looks at their code to understand.

 

  1. Thou Shalt do Testing

Testing is imperative from Test driven development(TDD) to simple unit tests, although in the short term they might take longer to implement, in the long run they will be hugely beneficial. A good developer will start writing test as they go along sometimes even before they have even started writing any code.

 

  1. Thou Shalt Try and break

If you don’t try and break your own code someone else will. A good developer will add unexpected inputs, click in places that you wouldn’t expect, enter unknown web address, etc try and do whatever they can to break their own code to make sure that it is robust.

 

  1. Thou Shalt use good communication

There’s always this conception that developers are introvert and live in the dark, this isn’t the case in the majority. A good developer has the ability to communicate with not only another developer but various stakeholders in the project, from the end user to the project manager and not with the use of ‘technical jargon either’.

 

  1. Thou Shalt think about their end user

So the software is fantastic, does everything it was meant to do and more, yet it’s bright yellow and all the buttons are placed all over the screen. if your user can’t use what you have created what is the point? A good developer will make sure that they validate their  design choices with an end user.

 

  1. Thou Shalt be Full Stack

Yes developers can have particular areas of expertise: front-end, back-end, databases. A good developer should be rounded enough to be able to work with all of these areas. They can still have an area of expertise but being able to work on multiple areas is very important.

 

  1. Thou Shalt help thy fellow developer

Suppose you have a variable that determines whether a tap is on, if you call it tapOn, perfect. However if you call it longPieceOfMetalOnOrOff that isn’t going to help anyone, especially when it comes to the maintenance of your code. A good developer will make sure that things are named appropriately and logically.

 

  1. Thou Shalt make things simple

This comes to down to code structure and simplicity. If you have five methods all doing the same little bit of logic, turn that logic into one method and have all the methods call that same method, that way should you need to modify this it is all editable in one place. In a house you have separate rooms for separate things, you don’t do everything in the same room. A good developer will apply this principle to their code, they won’t put it all in one file, they will break it down and separate it out.

 

  1. Thou Shalt use source control

Source control, through the means of git, is very important. It has three main properties: as a form of backup, to allow multiple people to work on the same piece of code and to see the changes that have been made to code files. A good developer will regularly commit to their git branches to allow for their changes to be protected.

 

  1. Thou Shalt evolve

In such a fast moving industry constant learning is very important. A good developer will keep himself up to speed with the latest technologies and practices to allow themselves to have all the tools in their arsenal to tackle any problems.

 

Happy Easter Everyone!

Andy

We’ve got Saturday night fever here at QuayTech!  One of our clients requires a live sales dashboard that would essentially be ‘staying live’ ensuring it is constantly refreshing to show real-time data.  Live polling is the ability for a page to maintain/update itself without the need for user interaction.  The dashboard is utilising the DataTables widget (https://datatables.net/) to group the sales data, in different ways, tailored to the currently loggedin user.  How could we achieve live polling datatables to refresh the data currently being displayed on our dashboard?

THE How?

First things first your Datatable needs to be populated through a json web service call to return the data, as opposed to a model being passed to the view (if using C#).  In the code below you will see a URL is called, this endpoint needs to return the json object to the Datatable.  The data NEEDS to be returned in this format “{\”data\”: ” + jsonData + “}”; this allows the Datatable to see that the data being passed back is data for the Datatable.

Note: The “bDestroy” : true variable that is being set here, this tells the Datatable that it is allowed to be destroyed and remade as necessary.

As long as we can identify the Datatable through an id, we are then able to call a reload on the ajax which will update the rows. The setInterval method is where the magic really happens, this sends a call to the method every 20 seconds in order for the datatables to poll.

As a little bit of an extra, a count of the rows on the table is taken before the call and after, it is then noted if there is a difference and if so a notification is displayed to the user that a new order has been received as seen in the code below. I have added a two second delay on this check to allow the table to sort itself out before checking, else it is too fast to see any row changes.

Note: datatableIDs is a string array of the IDs of the datatables that you are polling. Timing in JavaScript is in milliseconds so 20000 in the setInterval is actually 20 seconds.

So there you have it, how to live poll a datatable.

LIKE A BATCH OUT OF HELL

Today’s Blog, Like a BATch Out of Hell, has been written based on some experience I’ve recently had with building and debugging a Windows Service.

Recently we have been tasked with building a windows service for a client that would use multi-threading to continuously poll between two databases. We chose to create a windows service for this solution as we felt it would be the most efficient approach.  However, having never built a windows service before, debugging and creating the service was a little more tricky than simply clicking start and running with breakpoints … This is where the magic batch file came into play.

To test a windows service first you need to make your necessary changes, build the project and then install it onto your computer.  Making sure you are logged in as an administrator else you won’t get anything done! We added a “nice to have feature” whereby the service will write to the windows Event Log – something we made sure to get setup properly before deploying the service.

Key batch file commands to stream line your windows service developing:

wevtutil cl logName – this command clears the log for the windows service, replace logName with that of your log.

call “C:\Program Files (x86)\Microsoft Visual Studio\2017\Professional\Common7\Tools\VsDevCmd.bat” – this command opens the visual studio command prompt that is necessary to begin the installation.

 cd C:\YourFileLocation\YourSolutionFolder\bin\Debug – change the directory into the bin – debug folder where you have built your windows service to.

installutil.exe /u YourWindowsService.exe
– This will uninstall the windows service that you are working with (always good to start a fresh right?).

cd C:\YourFileLocation\YourSolutionFolder\bin\Debug – double check that you are back in the same directory as your windows service again

installutil.exe YourWindowsService.exe – final command to reinstall the windows service to your machine

 

Just for ease of reading a code snippet is here.

 

Just to clarify a batch file is saved ‘.bat’, to clear up the title.  Right-click on the file and click run as administrator else your batch commands won’t work.

blog-batchoutofhell-batch-image-file-screen-shot

 

To begin running your service, search for services in your start-up and then start your service.  To attach your debugger to your installed service, select debug in visual studio, and then attach to process. Search for your process in the list of running processes and attach to the process you have installed (note: it HAS to be running to show up in this list) it should then hit any set breakpoints that you have set, fingers crossed.

blog-batchoutofhell-batch-out-of-hell-visual-studio

Happy Batching!