Shaun Hevey | Blog

Fixing .NET SDK error when using GitHub actions

Sun, 12 Dec 2021 00:00:00 GMT

I have just started exploring GitHub actions, and in this post, I will talk about an error I came across trying to build a .NET application and how I fixed it.

I am not going to detail what GitHub actions are, but at a high level, they are a feature of GitHub that allows you to run other applications or scripts over a GitHub repo. These actions can be triggered manually by a user, or they can set up to start when a specific event occurs, an example being when you commit code and push it up to GitHub on a specific branch of your repo.

If you would like to deep dive into GitHub Actions, you can read all about them over at the GitHub docs website.

The error

The error that I was getting when running any dotnet command was the following.

1>/usr/share/dotnet/sdk/5.0.403/Sdks/Microsoft.NET.Sdk/targets/Microsoft.NET.TargetFrameworkInference.targets(141,5): error NETSDK1045: The current .NET SDK does not support targeting .NET 6.0.  Either target .NET 5.0 or lower, or use a version of the .NET SDK that supports .NET 6.0.

As you can see, the error is that the runner that my action was being executed on did not contain the correct version of .NET. The application I was trying to build was targeting .NET 6, and this is not currently installed by default on the hosted runners provided out of the box by GitHub.

It turns out that GitHub has documented what is installed on the hosted runners that they provide, and you can find them here and as an example, the list of .NET SDKs that come preinstalled on the Ubuntu 20.04 runner here and at the time of writing it only goes up to .NET 5.0.403.

How to fix this error?

Reading through the documentation, GitHub actually recommend the use of actions to interact with preinstalled software so that you can make sure the version you are expecting to be on the runner is available for you to use and that it won't change when GitHub update the runner images.

With that in mind, there is an action that you can add to your action YAML definition that will install and select the version of .NET that will be used with the dotnet command. You can add it to your own GitHub actions by using the following snippet. This snippet will need to be added to your action definition before using the dotnet command to set up and select the correct version.

- name: Setup dotnet
    uses: actions/setup-dotnet@v1
    with:
        dotnet-version: '6.0'

As you can see from the snippet above that it will make sure the .NET 6 SDK is available on the runner. This action can do a lot more than install a version of .NET, so be sure to check out its GitHub repo for more information.

First look at ASP.NET Core minimal API

Sun, 28 Nov 2021 00:00:00 GMT

In this post, I wanted to take a quick look at how you can get started with the newly released with .NET 6, which is ASP.NET Core minimal API. What is a minimal API, you might be wondering? Well, it is a new way to write your ASP.NET API endpoints with very little ceremony. Let's take a look at what I mean.

//Program.cs
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
app.MapGet("/", () => "Hello World!");
app.Run();

That is a fully complete Program.cs in .NET 6 using C# 10 and ASP.NET Minimal APIs. This was generated from the new template. If you want to follow along at home, you can run the command dotnet new web -o MinimalAPI replace MinimalAPI with the name of your application.

This post isn't about that other feature that allows the code to be only four lines. As you can see, Microsoft has made many improvements across the board to remove some of the ceremony that is required to get started building applications with C# and .NET.

Note: if you want to put the using statements or the namespace back in, you can include them, and the compiler will still be happy.

The out of the box template seen above creates an API that contains one GET endpoint that returns "Hello World!". Let's take a quick look at this example.

app.MapGet("/", () => "Hello World!");

As this example calls the MapGet method, this will create a GET endpoint on your API. This method takes two parameters; the first is the route to add to your API (in this case, '/' is the base address), and the second is the code to invoke when a request is made to this API endpoint. In my mind, this is a pretty dull API so let's go about adding some of our endpoints and dive a little deeper into how minimal APIs work.

I am going to demonstrate this by creating some developer tool-focused endpoints. I will add a short explanation and comments as required, but all of these examples will show you the code needed to add each of these types of endpoints. If you want to add each of these manually, replace the Program.cs from the template above with the following code.

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
app.UseHttpsRedirection();

//Add endpoint code here

app.Run();

GET request

This simple endpoint returns a new guid as a string.

app.MapGet("/guid", () => Guid.NewGuid().ToString());

GET request with a parameter

For completeness, you are getting two endpoints this time. These endpoints are will either encode a string to base64 or decode the provided base64 string. These demonstrate the ability for you to add a query parameter to your GET requests.

//The {data} format in the string gets mapped to the data parameter
app.MapGet("/encode-base64/{data}", (string data) =>
{
    var bytesArray = System.Text.Encoding.UTF8.GetBytes(data);
    return Convert.ToBase64String(bytesArray);
});
//The {data} format in the string gets mapped to the data parameter

app.MapGet("/decode-base64/{data}", (string data) =>
{
    var base64EncodedBytes = Convert.FromBase64String(data);
    return System.Text.Encoding.UTF8.GetString(base64EncodedBytes);
});

POST request with extras

This endpoint shows you how to add another HTTP VERB, in this case, POST. It is also showing you how to inject built-in objects, as well as how to read the body of the request directly. This post endpoint will take any valid JSON and return it nicely formatted (I have excluded checking if the JSON is valid to keep the example small).

Other HTTP VERBs are available; check out the official docs linked at the end of the post to find out how to use them.

//The built-in HttpRequest object that ASP.NET creates when a request comes in can be given to your endpoint by just adding it as a parameter. From that request object, you can read the body. I have included the full namespaces on these objects, so the code isn't complicated with adding using, but you could easily add the correct Using statements and make this code easier to read.
app.MapPost("/format-json", async (HttpRequest request) =>
{
    using var reader = new StreamReader(request.Body, System.Text.Encoding.UTF8, true, 1024, true);
    var jDoc = System.Text.Json.JsonDocument.Parse(await reader.ReadToEndAsync());
    return System.Text.Json.JsonSerializer.Serialize(jDoc, new System.Text.Json.JsonSerializerOptions { WriteIndented = true });
});

Injecting DI data into your endpoint

This example demonstrates how you can use the built-in DI container to inject objects into code at runtime. The endpoint should return the IP address that the request came from.

var builder = WebApplication.CreateBuilder(args);

//this line adds the required object with the correct lifetime scope to the DI container.
builder.Services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();

...

//To have ASP.NET inject the required object from the DI container, just add it as a parameter (in this example, it is IHttpContextAccessor).
app.MapGet("/current-ip", (IHttpContextAccessor request) => request.HttpContext?.Connection?.RemoteIpAddress?.ToString());

Final thoughts

These are just some things you can achieve with minimal APIs if you want to dive deeper into what else can be achieved, including authentication and authorizing endpoints, returning different status codes, etc. Check out the offical docs.

You can find the complete code from the examples above right below.

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
var app = builder.Build();

app.UseHttpsRedirection();

app.MapGet("/guid", () => Guid.NewGuid().ToString());
//The {data} format in the string gets mapped to the data parameter
app.MapGet("/encode-base64/{data}", (string data) =>
{
    var bytesArray = System.Text.Encoding.UTF8.GetBytes(data);
    return Convert.ToBase64String(bytesArray);
});
//The {data} format in the string gets mapped to the data parameter
app.MapGet("/decode-base64/{data}", (string data) =>
{
    var base64EncodedBytes = Convert.FromBase64String(data);
    return System.Text.Encoding.UTF8.GetString(base64EncodedBytes);
});
//The built-in HttpRequest object that ASP.NET creates when a request comes in can be given to your endpoint by just adding it as a parameter. From that request object, you can read the body. I have included the full namespaces on these objects, so the code isn't complicated with adding using, but you could easily add the correct Using statements and make this code easier to read.
app.MapPost("/format-json", async (HttpRequest request) =>
{
    using var reader = new StreamReader(request.Body, System.Text.Encoding.UTF8, true, 1024, true);
    var jDoc = System.Text.Json.JsonDocument.Parse(await reader.ReadToEndAsync());
    return System.Text.Json.JsonSerializer.Serialize(jDoc, new System.Text.Json.JsonSerializerOptions { WriteIndented = true });
});
//To have ASP.NET inject the required object from the DI container, just add it as a parameter (in this example, it is IHttpContextAccessor).
app.MapGet("/current-ip", (IHttpContextAccessor request) => request.HttpContext?.Connection?.RemoteIpAddress?.ToString());

app.Run();

How to use FFmpeg on iOS

Sun, 07 Nov 2021 00:00:00 GMT

Every once in a while, I am amazed by some fantastic developer that changes my mind about what I can achieve on my iPhone or iPad. This is usually because they have made an application that I would have thought would never make it through Apple and their reviewers. One of these developers is Nicolas Holzschuch, and the application they have created called a-Shell

What is a-shell and FFmpeg

a-Shell is a terminal-based application for iOS and iPadOS that allows you to run many applications in a terminal environment like Python, JavaScript, and several terminal commands that you typically expect in a terminal like ping, md5 and ssh. That isn't all it does but this post isn't about a-Shell, just one of the applications it comes with, FFmpeg. If you have not come across FFmpeg before, here is a little description from the ffmpeg website

FFmpeg is the leading multimedia framework, able to decode, encode, transcode, mux, demux, stream, filter and play pretty much anything that humans and machines have created. It supports the most obscure ancient formats up to the cutting edge.

In short, it allows you to convert between various audio and video formats, extract audio from video or even combine audio and video files together.

How to use FFmpeg in a-Shell

Ok, so how do you go about using FFmpeg in a-Shell? Well, it is as simple as opening a-Shell and typing the command ffmpeg. You can see the output of the command in the image below.

That isn't very interesting and doesn't show you how to use FFmpeg with your files.

FFmpeg in a-Shell in-app example

Now you might be aware that each application on iOS is running in its own sandbox, this means they can't just go and get files from other applications, but Apple has created ways for applications to break out of their sandboxes in controlled ways with interaction from the user and a-Shell has these functions built-in, so let's take a look.

As you can see in the image below, I have a folder that contains a "gif" file called Test.gif, and I want to use FFmpeg to convert it to an mp4 file. As this folder is outside of a-Shell's sandbox, we need to use the command pickFolder to choose the folder that contains this file to process it with FFmpeg. When you run the command pickFolder, a-Shell will present the iOS folder picker, so select the folder you want to use and then you will be returned to a-Shell with the terminal context now pointing to that folder you selected. You can see that I can see Test.gif when I run the ls command now.

Now to convert the gif to an mp4, you can run the following FFmpeg command. ffmpeg -i Test.gif -pix_fmt yuv420p output.mp4

Let's take a look at the command and break it down into its parts. ffmpeg tells a-Shell to run this application -i Test.gif is telling ffmpeg that we want it to use the Test.gif file in this folder as the file to work on. -pix_fmt yuv420p tells ffmpeg to convert the input file the yuv420p format. The last part is output.mp4; this tells FFmpeg to save the converted video as output.mp4 in the same folder.

As you can see in the last part of the image, the folder contains a file named output.

FFmpeg in a-Shell shortcuts example

Here is a bonus if you have gotten this far into the post. a-Shell also has excellent iOS Shortcuts support, which means we can do a similar conversion from within the Shortcuts application. Let's look at an example shortcut, first and then I will share how you can also achieve this.

The steps in this shortcut that I will share at the bottom of this post are;

Search Giphy for a gif to process.
Set the name of the chosen gif to input.gif to be processed by the command in a-Shell.
Sends the file to a-Shell so that it can be processed within the application.
It then executes a list of commands in a-Shell
- rm output.mp4 (this is cleanup any previous runs)
- ffmpeg -i input.gif -pix_fmt yuv420p output.mp4 (this is the same ffmpeg conversion command as above)
- open shortcuts:// (return to the Shortcuts application)
Wait to return (this tells Shortcuts to wait until the application is opened again)
Get file (this command is configured to get the file converted output.mp4 file from a-Shell and return it to be used in the Shortcuts application)

You can get a copy of this Shortcut from here As you can see, you are now able to use the power of FFmpeg on your iOS or iPadOS device with a little bit of help from a-Shell.

Create Video from HTML Canvas

Sun, 31 Oct 2021 00:00:00 GMT

In this post, I will discuss another little feature that you might be unaware of available in most major browsers called MediaRecorder. If the name didn't give away what it allows you to record media. If you want to dive into what MediaRecorder has to offer, you can read all about it here. In this post, I will show you how you can use MediaRecorder to record a canvas. Let's dive in.

Canvas to MP4

If you want to skip the explanation and see a complete working example (tested in chrome 95), just head to the bottom of the page, otherwise read on.

The first thing you need to do is set you some variables, check out the comments for some context.

let frames = []; //This is used to store the captured frames.
let mediaRecorder; // This is the variable that stores the mediaRecorder object.

Next, we need to get a reference to the canvas that you want to create the video from.

let canvas = document.getElementById('canvas');

Ok, the last thing that needs to happen is to create a couple of functions to start and end the recording and just a utility function. Again check out the comments for a little bit of context.

function startRecording() {
    //Let's create the MediaRecorder object. This needs a "stream" that it will use to create the frames for the video in our context.
    //It just so happens that the canvas object has the perfect function to allow it to be used with MediaRecorder, which is the captureStream function.

    mediaRecorder = new MediaRecorder(canvas.captureStream());

    //The next thing you need to do is set a function so that when some event is fired (like a frame update) 
    //then you can capture the data from that event to later be turned into a video.
    mediaRecorder.ondataavailable = (event) => {
        if (event.data)
            frames.push(event.data);
    }

    //I am using the "onstop" event to call the method to populate the video player with the data that has been captured.	
    mediaRecorder.onstop = showVideo;

    //This method start the MediaRecorder recording.
    mediaRecorder.start();
}

//This is just a utility function to stop the MediaRecorder recording.
function endRecording() {
    mediaRecorder.stop();
}

//This is the function that takes the frames that are captured above and turns them into a blob object, which is passed to the video player that has been created previously.
function showVideo() {
    video.src = URL.createObjectURL(new Blob(frames, { type: mediaRecorder.mimeType }));
    video.setAttribute("controls","controls")   
}

There you have a quick and easy way to record the output of a canvas object. In this example, I only showed how you could populate a video player, but you could easily take the blob object and use it with an "a" tag so that the user could download it to be used outside of the browser.

The complete example below also contains some code to animate a box moving across the canvas. This was only used to demonstrate an animation on the canvas. I found this webkit blog post very helpful with creating this example.

<html>
<body>
    <canvas id="canvas" height="300" width="600"></canvas>
        
    <button onclick="startRecording()">start</button>
    <button onclick="endRecording()">end</button>
    <video id="video"></video>
    <script>
        let frames = [];
        let mediaRecorder;

        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');        
			let video = document.getElementById('video');

        let x = 0;

        function startRecording() {
            mediaRecorder = new MediaRecorder(canvas.captureStream());
            mediaRecorder.ondataavailable = (event) => {
            if (event.data)
                frames.push(event.data);
            }
            mediaRecorder.onstop = showVideo;
            mediaRecorder.start();
        }
        function endRecording() {
            mediaRecorder.stop();
        }
        function showVideo() {
            video.src = URL.createObjectURL(new Blob(frames, { type: mediaRecorder.mimeType }));
            video.setAttribute("controls","controls")   
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillRect(x++, 50, 50,50);
            requestAnimationFrame(draw);
        }

        draw()
    </script>
</body>
</html>

Convert SVG to PNG with HTML Canvas and JavaScript

Mon, 25 Oct 2021 00:00:00 GMT

In this post, I will show you how to take an SVG file and turn it into a PNG. Before diving into how you convert and SVG, let's look at SVG and PNG file formats.

The battle of the file formats

Let's start with what both these file formats are and what they have in common. Essentially both are types of image formats, though they are very different. SVG is a vector-based image format, and PNG is a raster-based image format.

Now, if you are not familiar with what these are, here is a very quick definition. Vector files store image data using shapes such as lines, circles and paths. In comparison, raster files store image data as a grid of pixels (tiny squares) and each of these pixels stores which colour should be displayed by the program rendering the image.

This means raster images are fixed in size, and you can't upscale them without losing image quality. On the other hand, though vector images can be scaled up and down and they will retain the image quality as the shapes internally to the image will just be scaled.

Converting with Canvas and Javascript

Now that little lesson about what SVG and PNG file formats are, let's move on to using canvas and javascript. Here is the complete code, and then I will break it down and explain each step.

<canvas id="myCanvas" style="display:none;"></canvas>
<p id="imageOutput"></p>

<script>
let svg_data = `<!-- INSERT SVG DATA HERE -->`;

var canvas = document.getElementById("myCanvas");
            
canvas.width = 1170;
canvas.height = 2532;
function drawImage(imageObj) {
    var context = canvas.getContext('2d');
    var x = 0;
    var y = 0;
    context.drawImage(imageObj, 0,0);
    var imageData = context.getImageData(0, 0, imageObj.width, imageObj.height);
    var data = imageData.data;
    context.putImageData(imageData, 0, 0);
}
                
window.onload = function() {
    var imageObj = new Image();
    imageObj.onload = function() {
        drawImage(this);
        document.getElementById("imageOutput").appendChild(convertCanvasToImage(canvas));
    };
    imageObj.src = "data:image/svg+xml," + encodeURIComponent(svg_data);
}
        
function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;

}
</script>

Let's start with the first section with all the required html tags. The first tag is the canvas tag that will do the work, and in my example I am hiding it as it is not required to be shown. This requires an id attribute so that it can be referenced in the JavaScript code.

The second tag is the placeholder section where the converted imaged will be stored. In my example, this is the paragraph tag; the only thing to make sure you include is the id attribute again to be referenced in the JavaScript code later.

<canvas id="myCanvas" style="display:none;"></canvas>
<p id="imageOutput"></p>

Ok, the rest of the code does the work of converting the SVG image with JavaScript. I have commented this code section as required.

<script>
//1. this is the variable where the contents of the SVG file needs to be stored.
let svg_data = `<!-- INSERT SVG DATA HERE -->`;

//2. This gets a reference to the canvas mentioned above.
var canvas = document.getElementById("myCanvas");

//3. The canvas needs to be set to the width and height of the image.
canvas.width = 1170;
canvas.height = 2532;

//4. This function does the hard work of drawing the SVG image to the canvas.
function drawImage(imageObj) {
    var context = canvas.getContext('2d');
    var x = 0;
    var y = 0;
    context.drawImage(imageObj, 0,0);
    var imageData = context.getImageData(0, 0, imageObj.width, imageObj.height);
    var data = imageData.data;
    context.putImageData(imageData, 0, 0);
}

//5. This function is set to be called with the window is loaded.
// It sets up a new Image and sets a onload to that image to call the drawImage function explained above and then calls the function to convert to canvas to image and stores it in placeholder tag. 
// It also sets the source of the newly created image to be the SVG data stored in the svg_data variable.
window.onload = function() {
    var imageObj = new Image();
    imageObj.onload = function() {
        drawImage(this);
        document.getElementById("imageOutput").appendChild(convertCanvasToImage(canvas));
    };
    imageObj.src = "data:image/svg+xml," + encodeURIComponent(svg_data);
}

//6. This function takes the canvas object as returns a new png image using the toDataURL method.
function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;

}
</script>

As you can see, in less than 30 lines of code, you can convert an SVG file into a PNG so that it can be used where SVG files are not supported.

JetBrains Rider tips and tricks

Sun, 17 Oct 2021 00:00:00 GMT

For those that use JetBrains Rider to develop your .NET applications, in this post, I have three tips and tricks that you might not have known about to help improve your productivity.

NuGet Tools

The first tip I have is around NuGet tooling in Rider. You might have already known that Rider has a NuGet client built into it to allow you to install and manage your NuGet packages in your solution. The tooling though isn't just limited to managing your NuGet packages. Rider has a menu with several NuGet commands like NuGet Restore that forces NuGet to download the required packages for your solution to compile. As well as Upgrade all packages in Solution which will tell Rider to upgrade all the packages in your solution to the latest published versions. You can find all of these commands under the following menu Tools > NuGet.

It also contains a quick menu to allow you to access the same commands with keyboard shortcuts. You can see in the previous image that it is called NuGet Quick List, and the keyboard shortcut is currently set on my system. If you select it, you get the following popover to access the same NuGet commands, and you can use the numbers to run the command in that popover. An example is if I type 1 on my keyboard, then it will run the NuGet restore command.

Productivity Guide

The next feature I want to explore is an analytics feature that is built into Rider. As you are using features within Rider, it keeps track of what feature you are using and when you last used a feature.

With this data, you can get Rider to show you the information to analyse what features you are using and ones you might not know about. This feature is called the Productivity guide and is available under the following menu Help > My Productivity.

When you select this command, a new popover will appear and show you a list of the features, how many times you have used them and the last time you used them.

If you select one of the features in the list, it will give you a description of the feature and how you invoke it.

Keyboard Shortcuts PDF

The last one I want to discuss is not a feature built into Rider but a series of PDFs that JetBrains have created to help you learn the keyboard shortcuts you have configured in Rider to make you the most productive developer you can be.

These don't live within Rider, but there is a menu option, Help > Keyboard Shortcuts PDF, that will take you to the JetBrains website where the PDFs are hosted.

Below is a screenshot of the Website where the links are located.

If you need to know which keyboard scheme you have configured, you can find it in the Preferences menu JetBrains > Preferences > Keymap Below is a screenshot showing the location of the keymap setting.

This is just a quick look at a few features of JetBrains Rider that will hopefully make you more productive while you are developing in JetBrains Rider.

Backup, Restore and Sharing Shortcuts in iOS 15

Mon, 04 Oct 2021 00:00:00 GMT

In a previous post, I wrote about how you could backup and restore Shortcuts. In that post, I had to use several applications to achieve this as Apple didn't allow you to backup and restore without importing from an iCloud link.

In this post, I will share with you how to backup and restore your shortcuts. I will also show that you can share shortcuts without going through iCloud links anymore, as all of these have now improved with iOS 15.

Backup

In iOS 15, Apple doesn't require you to import Shortcuts anymore just through an iCloud link but more on that later in the post. Backing up in a way that allows you to restore them is as simple as saving the Shortcut file to any folder on your device. To demonstrate this, I have created a simple Shortcut that allows you to backup all the available Shortcuts currently in your library. You can select a single Shortcuts folder, and all the Shortcuts in that folder will be backed up.

Let's take a quick look at this in action.

As you can see, the Shortcut allows you to choose any folder available in the files app. This means you are not just limited to your device or even to just iCloud. You can save them to any app that supports folder sharing via the files app. A great example of this is Working Copy; with Working Copy installed, you could back up all your Shortcuts to a Git repository if you wanted to.

If you would like to use this Shortcut, you can find it here

Restore

In iOS 15, Apple has allowed signed Shortcuts to be imported from a file. You can achieve this by tapping on a Shortcut file. Let's take a look at how you go about restoring a Shortcut backed up from the previous step.

Now that you have seen how to backup and restore your Shortcuts, how about sharing your Shortcuts.

Sharing

In iOS 15, Apple now allows you multiple ways to share your Shortcuts. Previously you could only share Shortcuts via an iCloud link. This option is still available in iOS 15, but you can also share your Shortcut as a file.

Here are the steps to allow you to share your Shortcut as a file.

Open the Shortcuts application.
Open the Shortcut that you want to share in the editor.
Click the share button.
When the share sheet has been presented, click the Options > link at the top under the Shortcut title.
Choose "file" from the menu.
It will then present you with two options
- Anyone (this one will be importable by anyone on iOS 15 or later but is signed by Apple)
- People Who Know Me (this one will include your contact information and will only be importable by people that have you in their contacts and is not signed by Apple)
Click done and choose the application that you want to use to share your Shortcut.

Check out the image below to see these steps in action.

As you can see, Apple has made improvements with iOS 15 to make it easier for you to backup, restore and share your Shortcuts.

Creating Gradients in Shortcuts

Mon, 25 May 2020 00:00:00 GMT

I have been looking for a while for a way to create images that contained a gradient from within Shortcuts. The reason is to be able to use them with other actions to achieve the some examples below. The first is to create gradient icons like these with the help of Toolbox Pro.

It would also allow you to create the following gradient screenshots.

The possibilities are endless, now it has been possible through the use of html and canvas element and then using a series of encoding the html as a base64 string and getting a web view and getting images from it, etc. This is not the ideal work flow though.

If you do want to see how I did this with something similar make sure you check out this post Extending iOS Shortcuts with Javascript.

That has worked great but the setup of this has meant I have not really wanted to share a lot of these add ons I have been creating. So for a while I have been looking for a way I can improve this experience and I think I have come up with a better way to achieve this with the help of Scriptable.

Scriptable to the rescue

I want to start by saying this method is still using html and the canvas element to actually create the gradient but I a different method to expose this in Shortcuts. This is where Scriptable comes in very handy.

If you haven't used Scriptable before it is a fantastic free (with a tip jar) application for iOS that allows you to write JavaScript that can interact with some internals of iOS itself. It is created by Simon Støvring and you can read all about it here

To actually talk about how I am creating the gradient images I am using the Run Inline Script action that Scriptable exposes in Shortcuts.

One of the benefits of the Run Inline Script action is the code required to perform the action can be shared with your shortcut and you don't have to ask the user to create a module with in Scriptable to expose this functionality in Shortcuts.

One thing to note you have to set the action to "Run in app" as it was not able to generate the gradient image if it ran just shortcuts.

var wv = new WebView()
wv.loadHTML(`<html>
    <body>
        <canvas id="myCanvas"></canvas>
        <script>
            var width = 1920;
            var height = 1080;
			var colours = ["orange", "red", "purple"];

            var points = 1 / (colours.length - 1)
            var c = document.getElementById("myCanvas");
            c.width = width;
            c.height = height;
            var ctx = c.getContext("2d");

            var grd = ctx.createLinearGradient(0, 0, width, 0);                    

            for(var i = 0; i < colours.length; i++) {
                var offset = 0;
                if(i == colours.length -1) {
                    offset = 1;
                }
                else {
                    offset = points * i;
                }
                grd.addColorStop(offset, colours[i]);
            }

            ctx.fillStyle = grd;
            ctx.fillRect(0, 0, width, height);
        </script>
    </body> 
</html>`)


var js = `var gradCanvas = document.getElementById("myCanvas");
completion(gradCanvas.toDataURL())`;
await wv.waitForLoad()
var data = await wv.evaluateJavaScript(js, true);
var b64Data = data.replace('data:image/png;base64,','');
var img = Image.fromData(Data.fromBase64String(b64Data));
Pasteboard.copyImage(img)
Safari.open("shortcuts://")

The high level steps of the following code are

Create a Webview
Load the HTML that will create the gradient (out of scope of this post)
Inject some JavaScript in to the HTML to pull the image data out with the evaluateJavaScript method
Turn the image data that was extracted from the HTML into an Image object and the copy that Image to the clipboard.
Open the Shortcuts app

The reason that second last step is important is because you can't return an image object from the Scriptable Shortcuts action so putting the image in to the clipboard means it will be available to your shortcut after it is generated.

If you do want to use the image that has been generated by this action you will need to pair this action with a Wait to return Shortcut action so Shortcuts won't continue to run while Scriptable is creating the image. Then once you return you can just get the image with the Get from clipboard action.

If you want to see this in action I have created a shortcut that has a list of gradients that have been submitted to UIGradients.com It then presents a menu for you to select one and creates an image of it. You can find that shortcut from the link below

Create UIGradient Image

There are many improvements that could be made with the above example like passing parameters in to the script instead of changing the text like it is to pick the colours, but I decided to leave that for another post 😀

Scriptable and Shortcuts

Mon, 10 Feb 2020 00:00:00 GMT

Lately I have been playing around with Scriptable and running these scripts from within the Shortcuts application.

If you haven't played around with running your Scriptable scripts in Shortcuts, Scriptable allows you to run scripts in Shortcuts without leaving the Shortcuts application. You can read more about this feature in the docs checkout the args section to find out how you can pass information to your script from shortcuts and the Script section to find out how to pass information from your script to Shortcuts.

Let's create a basic script that can transfer data to and from Shortcuts

For this tutorial I want to create a script that takes some text and formats the text and passes it back to the Shortcut action. Let's start with creating the script and then how you set up a Shortcut to use this script.

Creating the script

Let's start by Creating a new script and calling it `ShortcutsTextFormatter`

Now add the following functions these are the functions that will actually format the text

const UpperCase = (text) => {
	return text.toUpperCase();
};

const LowerCase = (text) => {
	return text.toLowerCase();
};

These two functions are pretty simple the both take a simple parameter and the return the parameter with upper cased or lower cased.

Allow Shortcuts to interact with the script

By default any script in Scriptable can be run in the Shortcuts app but if you want to be able to provide data to the script or return data from the script to Shortcuts you will need to add a few more lines of code.

Let's add the following lines to the script.

var actionParam = args.shortcutParameter;

var text = args.plainTexts[0];
						
if (actionParam == "uppercase") {
	Script.setShortcutOutput(text.toUpperCase());
}
else if (actionParam == "lowercase") {
	Script.setShortcutOutput(text.toLowerCase());
}

Script.complete();

Let's look at this code block by block.

The following line of code gets the parameter that was passed from the Shortcuts action.

var actionParam = args.shortcutParameter;

This is mapped to this parameter in the Shortcuts action.

Scriptable has a number of options for passing data in from Shortcuts to your script the following line is passing text data in. This code will only work on the first item that is passed in.

var text = args.plainTexts[0];

This is mapped to this parameter in the Shortcuts action.

The next block of code is actually doing the work on the data that is passed in. This code is only handling the two cases of 'uppercase' and 'lowercase' but it isn't handling if any other parameter is passed in it wont be handled.

This block is also setting the output of the script for Shortcuts with the `Script.setShortcutOutput' method.

if (actionParam == "uppercase") {
	Script.setShortcutOutput(text.toUpperCase());
}
else if (actionParam == "lowercase") {
	Script.setShortcutOutput(text.toLowerCase());
}

This last block of code tells the Shortcuts action that the script has been completed, if you don't add this line of code then Shortcuts has to use heuristics to work out when it has been completed.

Script.complete();

A few notes about this code it is doing the minimum to actually be able to pass data in and out to Shortcuts but there is a whole lot more you should do. That is where this next module I have created comes in.

ShortcutActions module

This module has been created to make it easy to expose actions from your script to Shortcuts.

To use this module you have to import the module and then you use the AddAction method to expose an action to Shortcuts but more on that later in this post. When you have defined all your actions, you need to call the Run method.

Here is the preceding code example now using this module to expose the same functionality. As you can see it is slightly different to previous example as it will handle multiple parameters passed in.

let sa = importModule('ShortcutActions');

sa.AddAction("Uppercase", "text", function(text) {
	var results = [];
	text.forEach(function(item, index) {
	var data = item.toUpperCase();
	results.push(data);
	});

	return results;
});
sa.AddAction("Lowercase", "text", function(text) {
	var results = [];
	text.forEach(function(item, index) {
	var data = item.toLowerCase();
	results.push(data);
	});

	return results;
});

sa.Run();

Let's take a look at the AddAction method in depth. This method takes three parameters the first is the name of the action that you want to expose. This is the text that needs to be passed in to the script in this parameter.

The second parameter is to define the parameters that will be passed in to the method for the action. This can either be an array of identifiers or a single identifier. The following identifiers are available text, url, image, file or null if no parameters are to be passed in. Your function that you have defined for the action must have the same number of parameters as identifiers defined. Note: The order of the identifiers defined will be the order the arguments will be passed in the action function.

Each of the identifier map to the four optional parameters from the Shortcut action see the image below for the mapping.

The last parameter is the function that will be called by the module if it is called by the Shortcuts action. As defined above the number and order of the parameters must match the identifiers passed in for the second parameter. This method must return the data that you want to be passed back to Shortcuts.

This module also has the ability to expose the list of actions that have been defined to Shortcuts. This will happen if you pass no parameter to the script (this can be turned off by the following line. sa.exposeHelpAsDefault = false) or by passing the following text in as the parameter Script:GetActions.

Let's take a look at what this looks like in Shortcuts.

If you would like to grab a copy of this module then you can find it here or from the script below.

Once you have saved it in to your Scriptable library then you can import it in to any script to start exposing actions easily.

var actionList = [];
	
const AddAction = (name, inputType, callback) => {
	if(actionList == undefined) {
		actionList = [];
	}
	
	var inputTypesArr = [];
	
	if(Array.isArray(inputType)) {
		inputTypesArr = inputType;
	}
	else if(inputType != undefined && inputType != null) {
		inputTypesArr.push(inputType);
	}
	
	
	inputTypesArr.forEach(function (item, index) {
		if (["text","url","image","file","name"].indexOf(item) == -1) {
			throw new Error("Incorrect input type provided: " + item);
		}
	});
	
	actionList.push({"name": name, "inputType": inputTypesArr, "callback":callback});
}

const GetActions = () => {
	var actions = [];
	if(actionList != undefined) {
		for(var i = 0; i < actionList.length; i++) {
			var action = actionList[i];
			actions.push(action.name);
		}
	}
	return {"Actions":actions};	

}

const RunAction = async (name) => {
	if(actionList == undefined) {
		throw new Error("No actions have been defined");
	}
	
	for(var i = 0; i < actionList.length; i++) {
		var action = actionList[i];
		if(action.name == name) {
			var params = [];
			action.inputType.forEach(function (item, index) {
				switch (item) {
					case "text":
						params.push(args.plainTexts);
						break;
					case "url":
						params.push(args.urls);
						break;
					case "image":
						params.push(args.images);
						break;
					case "file":
						params.push(args.fileURLs);
						break;
					case "name":
						params.push(name);
						break;
				};
			});
			
			switch(params.length) {
				case 0:
					return await action.callback();
					break;
				case 1:
					return await action.callback(params[0]);
					break;
				case 2:
					return await action.callback(params[0], params[1]);
					break;
				case 3:
					 return await action.callback(params[0], params[1], params[2]);
					break;
				case 4:
					return await action.callback(params[0], params[1], params[2], params[3]);
					break;
				case 5:
					return await action.callback(params[0], params[1], params[2], params[3], params[4]);
					break;
			}
		}
	}
}

const Run = async () => {
	var actionParam = args.shortcutParameter;
	if (actionParam == "Script:GetActions" || (module.exports.exposeHelpAsDefault && actionParam == undefined)) {
		Script.setShortcutOutput(JSON.stringify(GetActions()));
	}
	else {
		var result = await RunAction(actionParam);
		if(result != undefined) {
			var output = result;
			if(Array.isArray(result)) {
				if(result.length > 1) {
					output = {"Values":result};	
				}
				else {
					output = result[0];
				}
			}
			Script.setShortcutOutput(JSON.stringify(output));
		}
		else {
			Script.setShortcutOutput("No output");
		}
	}

	Script.complete();
}

module.exports.exposeHelpAsDefault = true;
module.exports.AddAction = AddAction;
module.exports.Run = Run;

Shaun Hevey | Blog

Fixing .NET SDK error when using GitHub actions

The error

How to fix this error?

First look at ASP.NET Core minimal API

GET request

GET request with a parameter

POST request with extras

Injecting DI data into your endpoint

Final thoughts

How to use FFmpeg on iOS

What is a-shell and FFmpeg

How to use FFmpeg in a-Shell

FFmpeg in a-Shell in-app example

FFmpeg in a-Shell shortcuts example

Create Video from HTML Canvas

Canvas to MP4

Convert SVG to PNG with HTML Canvas and JavaScript

The battle of the file formats

Converting with Canvas and Javascript

JetBrains Rider tips and tricks

NuGet Tools

Productivity Guide

Keyboard Shortcuts PDF

Backup, Restore and Sharing Shortcuts in iOS 15

Backup

Restore

Sharing

Creating Gradients in Shortcuts

Scriptable to the rescue

Scriptable and Shortcuts

Let's create a basic script that can transfer data to and from Shortcuts

Creating the script

Let's start by Creating a new script and calling it ShortcutsTextFormatter

Now add the following functions these are the functions that will actually format the text

Allow Shortcuts to interact with the script

ShortcutActions module

Let's start by Creating a new script and calling it `ShortcutsTextFormatter`