Useful Developer Tools #6: App Icons and Resizers

Finding the right icons for your applications can be a tough task. Especially resizing them for the different platforms is super annoying. That is why I would like to share my favorite icon sources and resizing tools with you.

Finding icons

There are many different icon sources in the web with different quality and range. These are my favorites.

The Noun Project
Pros: Icons for literally everything, CC and paid licenses
Cons: Account required, CC icons come with attribution inside the image

Flaticon
Pros: iOS Style mainly, dimensions and color can be modified online, no account
Cons: iOS Style mainly

Resizing icons

Finding icons is only the first step. In most cases (especially when developing for mobile) icons have to be resized for different screen resolutions and densities. Here are my favorite tools for doing this:

App Icon Resizer
Pros: Resizes for iOS and Android, web-tool
Cons: No Windows, only for toolbar and application icons

Final Android Resizer
Pros: Resizes everything for Android
Cons: No iOS or Windows, Java tool (has to be downloaded)

I hope that helps to find a smarter and faster way through the icon jungle. If you know some other cool icon sources or tools, please reveal them in the comments!

Move your Xamarin.Forms Toolbar to the bottom on Windows

While iOS and Android typically have their toolbars and menus at the top of the page, on Windows you will find it at the bottom in most cases. Unfortunately, Xamarin.Forms renders all toolbar to the top of the page per default, even on Windows. So if you define a toolbar like this, it will appear at the top of the page, when running the Winows application, which is very uncommon there and might look strange to a Windows user.

Previously, you had to write a custom renderer, to modify the toolbar. Xamarin.Froms 2.3.3, which has faced its stable release a couple of days ago, introduces Platform-Specifics, that can modify some UI elements for specific platforms. The toolbar is one of them and we can attach a ToolbarPlacement to it with a single line of code.

However, these Platform-Specifics are still very limited, so we have to keep in mind that

  • Toolbar Placement can only be set application wide, not per page
  • Toolbar Placement can only be set on a NavigationPage

xamFormsBottomToolbar

But it works and it is only one single line, that gives a Xamarin.Forms app on Windows a way more natural look!

Wallpaper of the month (November 2016): Purple Wolf

I love minimalism and clean desktops and a strong wallpaper without any overlapping icons makes me happy every time I start my computer. That is why I started this series of beautiful wallpapers that I find on my travels through the world wide web. This beauty here makes the start!

You can find all wallpapers of this series inside this OneDrive folder.

wallhaven-409338

Source: Wallheaven

Different ways to register devices to the Azure IoT Hub

The Azure IoT Hub is Microsoft’s Internet of Things solution in the cloud. Beside the common event message endpoints, it contains a device management system, which allows to register and manage devices that may send data to the IoT Hub. This increases security by generating a unique access key for every single device that ensures, that devices can only do what they are supposed to allows to disable single devices when they get corrupted. Due to different scenarios, there are several ways to register devices at the IoT Hub.

Windows IoT Core Dashboard

If you are running Windows, the easiest way to register a new device might be the Windows 10 IoT Core Dashboard. It contains a section called Connect to Azure, that allows you to log in with your Microsoft Azure credentials and select an IoT Hub in your subscription, that you want to connect your device to. Once you created a new device, you can get its Security Key inside the Azure Portal or directly write it to a Windows 10 IoT core device’s TPM storage.

iotdashboardnewdevice

Hint: The connection from the IoT Dashboard to Microsoft Azure currently only works with the public datacenters. If your IoT Hub lives in restricted datacenters like the German ones, you currently need to choose one of the other options below.

Device Explorer for IoT Hub

The easiest and at the same time most flexible way to register a device when running on Windows might be the Device Explorer which is an open source tool that manages IoT Hub connected devices simply with the respective connection string. This also works with restricted datacenters like the German ones.

Once you entered the connection string for your IoT Hub, that can be found inside the Azure Portal at your IoT Hub’s Shared access policies section at you iothubowner policy, hit the Update button and switch to the tool’s Management tab. Here you can manage all of your devices and their security tokens.

deviceexplorernewdevice

Command Line Tool

To manage an IoT Hub platform independent and automate things, command line interfaces based on Node.js are always a good choice. Beside, typing commands in a terminal window looks a lot cooler than clicking things on a UI. The iothub-explorer cli is exactly this. It can be installed easily as a Node module and works on every platform.

If you just want to add and delete devices, you could also take a look at a small command line interface, I created. It is much more lightweight than the official one and maybe exactly what you need.

Using code (C# or JavaScript)

Beside all that, Microsoft also offers libraries for several development frameworks to register a device. Especially when you want to automate device registration or you are not working on a Windows machine, this might be an interesting way for you to go.

Hint: Due to security reasons, devices should never register themselves at the IoT Hub. For the device registration, are registry write permissions (typically the iothubowner policy) required, that should not be given to a single device. Especially in case of a stolen or corrupted device, it is important, to exclude the device without giving it the chance to re-register.

.NET

When using .NET, you simply need to add the Azure.Devices NuGet Package to your project. Unfortunately, when writing this article, the package is not compatible with .NET core yet, so it only works on Windows at the moment. Register your device with these simple lines of code:

Start the console application and the device’s primary key will be printed out at the console and can also be seen inside the Azure Portal, of course.

Node.js

To register devices on other platforms than Windows, Microsoft also offers a Node.js package to work with the Azure IoT Hub. For this, simply add the azure-iothub package to your project and register a new device with the following code:

Same as above, the device’s primary key will be printed out at the console and can also be seen inside the Azure Portal, when running the application. Of course, both libraries also offer methods to delete or update devices.

Useful Developer Tools #5: Facebook’s Device Sketches

When creating mockup images for your product presentations, finding cool device images to put your screenshots in can be challenging. Especially, when you are looking for license free images that can be used commercially. Good thing, that Facebook now opened their device mockups to be downloaded for free.

While Facebook has redrawn and shares these assets for the benefit of the design community, Facebook does not own any of the underlying product or user interface designs. Please do not repackage and redistribute these as your own.

devices_header

 

Useful Developer Tools #4: f.lux

It is no secret, that most developers are nocturnal. That’s why there are many tools that makes a coder’s nightlife easier. Dark Mode in IDEs is a good example. But did you know f.lux? This tiny tool makes the color of your computer’s display adapt to the time of day, warm at night and like sunlight during the day. Simply by filtering your display’s blue colors at when it gets darker, which is super healthy as it reduces eye-strain and makes you even sleep better!

Sounds super weird and looks crazy when you try it out first but believe me: If you used it once for a day or two, you’ll never wanna go without again! It is completely free and works on most OS, even (rooted) Android or iOS devices. Give it a try!

Screenshot of f.lux app

 

 

Manually connect and send data to an Azure Event Hub

Azure Event Hubs provide a neat way to collect loads of data that is pushed against them and holds it until its processing. Microsoft offers an SDK to work with Event Hubs for most platforms including .NET, of course. Unfortunately, the provided NuGet package does not work on all .NET platforms, so when targeting UWP for example, you have to implement the Event Hub connection by yourself, which can be a little bit tricky. Here is how to manually connect and send data to an Azure Event Hub.

Get the connection information

Once the Event Hub has been created, open the Service Bus section in the Azure Portal and navigate to your Event Hub. Select the Configure tab and scroll down to the Shared access policies section. Make sure, you created a policy that has the permission to send data to the Event Hub and note its Name and Primary Key. You need both later.

Besides, we need the base address of the Event Hub, that we can find at the Dashboard tab. The base address is everything before the first slash. In my case it’s https://dachautemp-ns.servicebus.windows.net.

Azure Event Hub Shared Access Keys

Establish a connection

Now you are ready to connect. For better separation and reusability, I have created an EventHubService class in my project. You will need the following variables:

With these you are able to authenticate at the REST endpoint of your Event Hub. You need to authenticate to send data and identify yourself so make sure, that you call the authentication process at least once. To authenticate, I created the following method that you can simply copy. It defines an expiry for the access token, which is mandatory and renders the Primary Key to a SHA256 hash that gets the expiry date appended. With this hash we can generate a token with all the other values. This token will be set as the Authorization header of the HttpClient and will be used for the next requests.

Send data to the Event Hub

As soon as you are authenticated, data can be sent. For this, I recommend writing another simple method that simply transforms an object into JSON and sends it to the Event Hub. For the JSON transformation, I used the popular JSON.NET NuGet package. Once the content is in the right format, you can create a StringContent out of it and send it to the /messages endpoint of your Event Hub. That’s it.

Sometimes, it might happen, that you get a 401 error (unauthorized) as response. If this happens, your access  token might be expired. That’s why I simply regenerate it and try to send the request again when this happens, as you can see below.

You can find the full code at GitHub. Hope that helps!

Fixing the Windows IoT Core Dashboard device detection when running Windows on Parallels

Just a short tip: When you are running on a Mac Book (like I do) and use Parallels for all your Windows related stuff, you might run into the problem that the Windows IoT Core Dashboard does not find your Windows IoT Core devices.

If so, the problem often seems to be, that the virtualised Windows machine is unable to scan the network for other devices due to restrictions of the network connection that is shared between your Mac and Windows VM. To solve this, simply change the virtual machine’s network source to a Bridged Network in the Parallels settings. No your VM should be able to see the Windows IoT Core device.

Screen Shot 2016-08-20 at 17.20.25

How to upload your UWP app to HockeyApp right

HockeyApp provides a neat and easy to use service for developers to provide apps to their testers and track anonymous usage data, crashes and feedback. As the Windows 10 (UWP) support is still in preview, the documentation on how to provide a Universal Windows App to your testers right is quite poor. So let’s take a look at the easiest way.

The problem

hockeyapplogoTo install a Windows 10 application without the official store but via side-loading, multiple files are needed: The application package, of course and a certificate that the user needs to install previously. Some Windows platforms also need a specific PowerShell Script to install the app. When creating an App Package with Visual Studio, all these files will be generated but HockeyApp only accepts one single file per release to distribute.

Additionally, Windows apps are getting installed differently regarding to the platform. On Windows Desktop systems, the user can simply run the PowerShell Script and follow its instructions. Other platforms like Windows 10 Mobile for example, do not support PowerShell and the user needs to install the certificate and application manually. So in contrast to Android for example, where developers can pack all these into one APK file, Windows developers need to consider different scenarios.

The solution

Unfortunately, the solution to this problem is not very satisfying but it works and is the only way at the moment to target both, Desktop and Mobile with one HockeyApp project. After creating the App Package, pack all its outcomes into one single ZIP file and send this to HockeyApp. Desktop users can simply unzip it and run the PowerShell script, Mobile users have to download a Zipping app first (yep, that really sucks) to unpack the file and can install the certificate and app manually then.

CreateUWPAppPackageFast

The zipping and uploading of the app can completely be done in Visual Studio with the integrated HockeyApp tools. Simply right-click on your project, and select the Distribute App… option. The following dialog guides you through the process.

Please notice that the dialog selects the most recent app package but does not create a package for you! You definitely need to create an App Package on your own, first.

UploadUwpToHockey

Recently I wrote an article for users about how to install a UWP app distributed by HockeyApp that I link in the release notes of all my UWP HockeyApp projects, so that users get a tutorial on how to install it. You can check it out here.

Analyze a photo with Microsoft’s Cognitive Services Vision API on Xamarin.Android

Microsoft’s Cognitive Services are intelligent machine trained APIs that analyzed text, images, videos and more for you in the cloud and sends you back meta information about the provided content. They are free to use until a specific threshold and a nice easy to use thing to integrate in your applications. You can either use classic REST calls or the client SDK (NuGet) if it is available for your platform. I just stumbled on providing the right picture format to the Computer Vision API and decided to write this blog post.

So if you want to get your picture analyzed, you need to give a Stream object to the VisionServiceClient.AnalyzeImageAsync() method. On Android, you mostly work with streams when accessing the file system but not when taking pictures. In these cases you often need to deal with byte[] or Android.Graphics.Bitmap objects. You can convert both to a Stream easily, if you know how:

Converting a byte[] or Bitmap to a Stream

Especially when working with the camera, you might end up with a Bitmap object. You streamify it with the Compress() method, but as you already used the stream once then, you need to “revert” it afterwards (that’s where I stumbled). Otherwise the SDK will throw an exception.

If you already have a byte[] you don’t need the first two lines of the using statement and can create the MemoryStream directly out of it with var stream = new MemoryStream(yourByteArray).
Hope that helps somebody to save time.