Phillip Trelford's Array

POKE 36879,255

Fable DJ Drops

This post is part of the F# Advent Calendar in English 2020 series organized by Sergey Tihon on behalf of the F# Programming Language community.

Earlier in the year I picked up a Revo radio for the DAB+ and stayed for the Internet Radio stations, that open up the world of radio, and am now tuning in using an old Raspberry Pi running Pi Music Box connected to the stereo system.

I’ve been enjoying quite a lot of Dub Reggae particularly King Dub Radio which is produced by King Dub Records based out of Marseille, France. Unfortunately it appears to be overloaded right now, so here’s another great station Real Roots Radio coming out of the UK:


To enjoy the rest of this post please crank up your volume and press play on the Internet Radio.

Fable

This month saw the official release of Fable 3 Nagareyama, Alfonso’s F# to JavaScript compiler. Fable itself has been around for a long time, and it’s been my pleasure to contribute a few games samples over the years.

Yesterday I set up and started a new project, which was very easy with only a few command line commands required to create a new project, which sits waiting for you to make changes, a bit like CodePen but running locally.

Web Audio API

The Fable Browser packages provide typed access to most of the browser Web APIs, however unfortunately the Web Audio API is not there yet, but I did find bindings in a massive file in the Fable Import project from Fable 2, which I copied and pasted from and fortunately it just worked!

The Web Audio API lets you generate sounds or play samples, and apply effects, in fact everything you need to augment your Dub, check out the Zongo Dub Siren to enjoy some real-time generated siren effects over your dub music. This is something I’d like to go deeper on in a later post.

DJ Drops

Another common part of Reggae, Dub and Dance Hall music is DJ Drops over the sound. To get some authentic Jamaican drops I commissioned Neil Hype via Fiverr, to produce 4 unique DJ Drops for your enjoyment.

Putting it all together

Follow the link to http://trelford.com/dub select a radio station and hit play, and hit the buttons to play seasonal drops.

Source code: http://trelford.com/dub/FableDub.zip

F#unctional Londoners Meetup activity

This post is part of the F# Advent Calendar in English 2017 series organized by Sergey Tihon.

A while back I used the Meetup API to build a timeline of F# Meetup events across the globe

The timeline (circa May 2016): http://trelford.com/timeline/ 

You can find the source code in this Gist: https://gist.github.com/ptrelford/75fdf3f4c5dc9254736d88d35551c116

For this post I thought it would be fun to use the same Meetup API to focus in on the activity of the F#unctional Londoners Meetup group with an F# script.

The Meetup API returns a JSON response, making it an ideal place to use the FSharp.Data JSON Type Provider:

#r "../packages/FSharp.Data.2.4.3/lib/net45/FSharp.Data.dll"

 

let [<Literal>] auth= "&sig_id=10286388&status=past%2Cupcoming&sig=19c35f766e5b7a8cc163d2711749d8510a91de33"

let [<Literal>] url="https://api.meetup.com/fsharplondon/events?desc=true&photo-host=public&page=200"+auth

 

type Events = FSharp.Data.JsonProvider< url >

let events = Events.GetSamples()

 

This gives us types (and intellisense) over the JSON data, so I can make simple queries like the number of events per year:

let eventsbyYear =

    events

    |> Seq.countBy (fun e-> e.LocalDate.Year.ToString())

    |> Seq.sortBy fst

 

Which returns:

Year Meetups
2010 7
2011 9
2012 11
2013 28
2014 30
2015 26
2016 17
2017 12

 

Next it would be interesting to get a plot, which can be easily achieved using XPlot:

#r "../packages/Google.DataTable.Net.Wrapper.3.1.2.0/lib/Google.DataTable.Net.Wrapper.dll"

#r "../packages/XPlot.GoogleCharts.1.4.2/lib/net45/XPlot.GoogleCharts.dll"

open XPlot.GoogleCharts

 

let years = eventsbyYear |> Chart.Bar |> Chart.WithTitle "F#unctional Londoners Meetups"

years.Show()

Here’s the nice bar chart result:

image

And for more detail down to the day we can use a Google Calendar chart:

let options = Options(title = "F#unctional Londoners Meetups", height = 1200)

let activity=

    [for e in events -> e.LocalDate, 1] |> Chart.Calendar |> Chart.WithOptions options

activity.Show()

 

The white squares indicate a meetup event:

image

Looking at the data, we can see there’s been a meetup almost every month since the group started back in 2010, and back in April 2016 we managed 5 events in just one month!

We can also see that there’s been slightly less meetups over the last year and a half. This roughly coincides with the fact that I stopped working in London in early 2016. To this end, if somebody who is interested in F# AND lives or works in London would like to get involved in organizing the group, then please do get in touch.

That said the show will still go on (just a little less frequently), and we have a meetup scheduled this week on Thursday 7th December with Jorge Gueorguiev Garcia on Functional Calisthenics, so please do register and come along.

X-Platform development with Xamarin.Forms & F#

This post is part of the F# Advent Calendar in English 2016 series organized by Sergey Tihon.

Last month on November 16 – 17, IDTechEx held their largest annual conference and tradeshow on emerging technologies in California with over 200 speakers and close to 4,000 attendees.

exhibition

The show covers a wide variety of topics including electric vehicles, energy harvesting, energy storage, IoT, graphene, printed electronics, robotics, sensors, AR, VR and wearables. Coming from a software background, I couldn’t help but marvel at the size of the event and the level of genuine innovation and entrepreneurship on show. If you’re based in Europe I’d highly recommend attending the Berlin event in May 2017.

IDTechEx wanted an app where users can easily browse information, including research, journals and upcoming webinars, when they’re out and about, even in a WiFi dead spot. The app needed to be released before the show in California so that at a minimum users could download and browse the conference agenda, list of exhibitors and easily find the venue on a map. Xamarin.Forms and F# were successfully used to build the app which was published in the iTunes and Google Play stores a week before the conference, and well received by attendees:

This post will talk about some of the development process and some of the design decisions for this app.

Xamarin.Forms

IDTechEx wanted a native business app that targeted the vast majority of mobile users which concretely meant iOS and Android support. Xamarin.Forms was chosen as it allows business style apps to be built for both iOS and Android where most of the code can be shared. It is hoped that over the life of the product that the use of Xamarin.Forms should help reduce maintenance costs and improve time-to-market.

Check out Xamarin’s pre-built examples for sample code and to see what can be done: https://www.xamarin.com/prebuilt

Why F#

Xamarin’s ecosystem, including Xamarin.Forms, supports both the C# and F# programming languages. F# is a pragmatic, low ceremony, code-oriented programming language, and the preferred language choice for IDTechEx and it’s development staff.

If you’re new to F# and interested in learning more, I’d recommend checking out these resources:

Creating an F# cross platform Xamarin.Forms solution

To get started I followed Charles Petzold’s detailed article on Writing Xamarin.Forms Apps with F#, where the steps for creating a cross platform solution can be briefly summarised as:

  • Make sure you’re on the latest and greatest stable version of Xamarin (and Visual Studio if you’re on Windows)
  • Create a C#/.Net >> Cross Platform >> Blank App (Xamarin.Form Portable)
  • Replace the C# Portable library with an F# one

Development environments

During development I used 2 environments off of the same code base:

  • Visual Studio 2015 and Windows for testing and deploying the Android version
  • Xamarin Studio and Mac for testing and deploying the iOS version

Switching between Xamarin Studio and Visual Studio on the respective operating systems was seamless.

Build one to throw away

Initially I built a couple of very simple prototype apps using only a a subset of the data, one using XAML and data binding and another using just code. After some playing I came down on the side of the code only approach.

Xamarin.Forms is quite close to WPF, Silverlight and Windows Store application development. I built a working skeleton/prototype as an F# script using WPF and the F# REPL which gives incredibly fast feedback during development.

Once the flow and views of the application were better defined, and I’d received early feedback from users, I threw away the prototype and rebuilt the app fully in Xamarin.Forms.

Note: the plan to throw one away referenced in this section heading refers to Fred Brooks Jr’s suggestion in his seminal book The Mythical Man Month.

Forms DSL

During development in both WPF and Xamarin.Forms I built up a minimal domain-specific language to simplify form building, for example:

    let label text = Label(Text=text)

    let bold (label:Label) = label.FontAttributes <- FontAttributes.Bold; label

    let italic (label:Label) = label.FontAttributes <- FontAttributes.Italic; label

    let namedSize name (label:Label) = label.FontSize <- Device.GetNamedSize(name, typeof<Label>); label

    let micro label = label |> namedSize NamedSize.Micro

    let small label = label |> namedSize NamedSize.Small

    let medium label = label |> namedSize NamedSize.Medium

    let large label = label |> namedSize NamedSize.Large

 

With this the exhibitor page could be written as:

    let exhibitorPage (exhibitor:json) =

        let program = exhibitor?memberOf?programName.AsString()

        let layout =

            StackLayoutEx(VerticalOptions = LayoutOptions.FillAndExpand, Padding=Thickness 10.0)

            + (cachedImage (exhibitor?logo.AsString(), 130.0, 78.0))

            + (exhibitor?name.AsString() |> label |> bold |> medium)

            + (program |> label |> color (programColor program))

            + (exhibitor?location?name.AsString() |> label)

            + ("Company Profile" |> label |> bold)

            + (exhibitor?description.AsString() |> label)

        let url = exhibitor?url.AsString()

        if not <| System.String.IsNullOrEmpty(url)

        then

            let action () = Device.OpenUri(System.Uri(url))

            Button(Text="Website", Command=Command(action)) |> layout.Children.Add

        ContentPage(Title="Exhibitor", Content=layout)

 

Below is a screen shot from the Android App of a exhibitor page generated by the code above:

 

 image

 

Lists

For lists of items, for example exhibitors or presentations, I used Xamarin.Form’s built-in ListView control and the ImageCell and TextCell, along with a custom cell providing more subheadings.

The screen shot below is from the iOS version and shows a list of presentations using a custom cell:

 

presentations

 

Other Libraries

For image loading I used the excellent FFImageLoading which can cache image files on the user’s device.

To show a map for the venue I used Xamarin.Forms.Maps control:

iPhone Screenshot 5

Summary

Using Xamarin.Forms and F# allowed be to successfully build and publish a cross platform mobile app targeting iOS and Android in a short time frame. F# allowed fast prototyping and quick feedback while building the app. Xamarin.Forms worked well and meant that almost all of the code was shared between the platforms. I’d whole heartedly recommend this approach for similar business applications and we plan to extend the app heavily in future releases.