Forem: Halldor Stefansson

Smartphone Controlled Arduino Car via Bluetooth

Halldor Stefansson — Tue, 08 Feb 2022 21:27:02 +0000

Required Components

A chassis
Arduino Uno
Maker Drive driver
Adafruit Bluefruit LE UART Friend
Smartphone (Android or iPhone)
Batteries (Example: 1 x 9V and 4 x AAA (1.5V))
Servo Motor
2 x DC Motors

Circuit Diagram

Code

The software is based on the Adafruit Bluefruit and Cytron Motor Driver libraries.

You can check out the code here at GitHub.

Note

The Chassis

You could use most chassis with this tutorial. However, you might need to make some changes to the code where relevant. For example, if you only have two wheels, you need to change the servo code to make the motors turn the robot.

The chassis I used is based on this Robot Chassis Kit. I took the top plate and connected it with the bottom, sort of like an extension.

I built a custom steering system and joined that with the chassis. The steering system is not particularly good, but it does the job for now. I’m planning on building a better one later.

9V Battery

I used a 9V battery to power some of the peripherals in this project. The 9V battery seems to be a perfect power source for Arduino projects. But, reading a bit upon power source uses for Arduino, the battery is OK to use but inefficient. I recommend researching the subject if you want to use a 9V battery in your projects.

Setting up Bluefruit LE UART Friend

These steps are based on the official documentation, and I recommend going through those as well.

Download the app

Start by downloading the Bluefruit iOS App or Android App. Easily and quickly done.
Solder the pins - IMPORTANT!

The module comes with pins to make it easier to connect with a breadboard. I highly recommend soldering those pins to the module. The connection can be flaky otherwise and cause the module to be unreliable.
Wiring

I suggest starting with the default pinout in the documentation. That’s to make sure it works as intended. Then later, when adding peripherals to the project, test out other pins if needed.

Software Configurations

The code I used is built on the supplied Adafruit code. There are a few code changes that are needed for this project.

First, make sure to uncomment this part in the controller.ino file:

// Create the bluefruit object, either software serial...uncomment these lines
SoftwareSerial bluefruitSS = SoftwareSerial(BLUEFRUIT_SWUART_TXD_PIN, BLUEFRUIT_SWUART_RXD_PIN);

Adafruit_BluefruitLE_UART ble(bluefruitSS, BLUEFRUIT_UART_MODE_PIN,
                      BLUEFRUIT_UART_CTS_PIN, BLUEFRUIT_UART_RTS_PIN);

To match the wiring setup, you must adjust the PIN variables in BluefruitConfig.h.

Default setup:

// SOFTWARE UART SETTINGS
#define BLUEFRUIT_SWUART_RXD_PIN       9    // Required for software serial!
#define BLUEFRUIT_SWUART_TXD_PIN       10   // Required for software serial!
#define BLUEFRUIT_UART_CTS_PIN         11   // Required for software serial!
#define BLUEFRUIT_UART_RTS_PIN         8   // Optional, set to -1 if unused

Final setup for the project:

// SOFTWARE UART SETTINGS
#define BLUEFRUIT_SWUART_RXD_PIN       2   // Required for software serial!
#define BLUEFRUIT_SWUART_TXD_PIN       7   // Required for software serial!
#define BLUEFRUIT_UART_CTS_PIN         4   // Required for software serial!
#define BLUEFRUIT_UART_RTS_PIN         5   // Optional, set to -1 if unused

Hardware Configuration

This simple step is also critical and can easily be missed.

Set the MODE switch on the module to CMD mode.

Upload (and Update)

Once everything has been connected and configured, it’s time to upload the code to the Arduino.

When you first connect to the module, it will most likely need updating. An update notification will pop automatically up in the app when you connect to it, and it won’t take long.
Control servo motor (for Front Wheel Steering)

I used a servo motor to control the front-wheel steering in this project.

The DC motors can steer the car if you’re not using front-wheel steering. See this tutorial as an example.

Connecting the servo motor and adding relevant code changes is relatively straightforward.

Before fastening the servo motor down, double-check everything works and what angles to use. Finding the correct angles for the servo motor to work well with the steering can be a bit of trial and error.

These are the variables I added in BluefruitConfig.h:
```
// SERVO SETTINGS
#define SERVO_PIN                     6
#define DEFAULT_ANGLE                 90
```
A servo motor object needs to be added to the main .imo file, just under the Bluefruit object is good:
```
// Create a new servo object:
Servo servoSteering;
```
In the setup(void) method, we need to initialise it:
```
// Attach the Servo variable to a pin:
  servoSteering.attach(SERVO_PIN);
  servoSteering.write(DEFAULT_ANGLE);
```
Finally, we can add the code to change the angle of the motor, for steering, based on which buttons are pressed in the app, for example:
```
if (pressed) {
      Serial.println(" pressed");
      if (buttnum == 7) {
        servoSteering.write(45);
      }
      if (buttnum == 8) {
        servoSteering.write(120);
      }
}
```

Warning! - Be aware that when using the Servo Arduino library, it disables analogWrite()
(PWM) functionality on pins 9 and 10, whether or not there is a Servo on those pins. This took me a bit of time to figure out. ☹️

Running Servo Motor, Two DC Motors & Bluetooth Module At The Same Time

Now to the fun part. Make the car drive.

Connect motors

The documentation for the Maker Drive motor driver is also superb. In addition, it has this tutorial that can be helpful as a guideline to connect everything correctly.

Modify software

We need to add a few bits to our code to get the motors to run. We can use the Cytron Motor Driver library to help us with that.

Similarly, as before, we add some settings for the pins in BluefruitConfig.h:

// MAKER DRIVE MOTOR SETTINGS
#define DRIVE_MOTOR_MODE              PWM_DIR
#define 1A_PIN                        11
#define 1B_PIN                        10
#define 2A_PIN                        3
#define 2B_PIN                        9

We also create the motor objects at a similar place we added the servo object:

// Configure the motor driver.
CytronMD motor1(DRIVE_MOTOR_MODE, 1A_PIN, 1B_PIN);
CytronMD motor2(DRIVE_MOTOR_MODE, 2A_PIN, 2B_PIN);

We then add a few methods to change the speed and directions of the motors:

void robotStop()
{
  motor1.setSpeed(0);
  motor2.setSpeed(0);
}

void robotForward()
{
  motor2.setSpeed(100);
  motor1.setSpeed(100);
}

void robotReverse()
{
  motor1.setSpeed(-100);
  motor2.setSpeed(-100);
}

And finally, we update the loop(void) method where the buttons are pressed with the servo code changes:

if (pressed) {
      Serial.println(" pressed");
      if (buttnum == 7) {
        servoSteering.write(45);
      }
      if (buttnum == 8) {
        servoSteering.write(120);
      }
      if (buttnum == 5) {
        robotForward();
      }
      if (buttnum == 6) {        
        robotReverse();
      }
    } else {
      Serial.println(" released");
      if (buttnum == 7 || buttnum == 8) {
        servoSteering.write(DEFAULT_ANGLE);
      }

      if (buttnum == 5 || buttnum == 6) {
        robotStop();
      }
    }
}

Once that’s set up, built and uploaded, we’re almost ready to start driving around.

Have multiple power sources

We need to make sure everything runs simultaneously alongside the Arduino. At first, I only had the 4 x AA batteries, but every time I tried to make a turn, the car just froze.

That was because we have many peripherals and not enough power to supply them all.

So I added a 9V battery to run the servo motor and Bluetooth module, while the AA batteries ran the DC motors, motor driver and the Arduino.

Voila!

It drives and turns 😃

Engineer-A-Car

@engineer_a_car

@cytrontech And voila!
It drives and steers through Bluetooth 🥳

20:35 PM - 08 Feb 2022

I enjoyed working on this project, and I'm excited to start on the next one.

Thank you for reading!

If you have any suggestions on improving, please don't hesitate to get in touch. I'm always keen on learning what can be done better.

How to Design REST API Guidelines for Your Team (For the First Time)

Halldor Stefansson — Mon, 23 Nov 2020 19:32:09 +0000

Photo by John Barkiple on Unsplash

I recently took part in creating API guidelines for the company I work for. Even though I had little experience in working with APIs, I was trusted to lead the work. I want to share with you how that worked out.

You don't have to be an expert to join

Less than two months after joining Muddy Boots, I got an email saying there was a piece of work kicking off around designing the company's API guidelines, and if anyone was interested in joining that work.

Even though I was new to the company, and with minimal knowledge on APIs, I expressed my interest immediately.
I had worked on integrations before and was educating myself more and more on APIs. I thought that being part of this work and learning from others within that group would help me increase my knowledge of APIs.

However, I had my doubts about whether I would be able to contribute anything instead of just sitting there and taking space.

To calm those doubts, I started researching APIs as much as I could in my free time. Both by reading articles and creating a new API from scratch to get some hands-on experience.

So at least I would be able to understand what was being talked about and occasionally be able to add in some comments or ideas.

Taking the lead

The initial working group included around nine people, mostly either architects or team/tech leads or representatives. And me.

In the first few meetings, we worked on the scope, expected outcome and some basic definitions. We also started going through the first couple sections of the Microsoft API Guidelines, since we were going to be using that as our base.

I was pleased that I was able to contribute and bring in some thoughts in those initial meeting, mainly just based on some things that I had recently read.

Then after a few meetings, I was approached by one of the architects, who lead the work, and asked if I wanted to take the lead of it.

It was a big surprise to me.

I initially had doubts about whether I should be taking part in this work at all initial, but now I was being asked to lead the work - Hello, imposter syndrome!

Who am I to lead a group of creating API guidelines for the company?

The architect currently had a lot on his plate, and based on the contributing I had made in the first meetings; he was confident that I would be able to step up.

I was delighted with being trusted with this assignment and took the challenge. Thankfully I knew I had good people around me that would be able to help me.

10 steps to defining API guidelines for a company

Now that I was in the lead of defining the API guidelines, I needed to figure out how to do just that.

So, of to Google/Bing/DuckDuckGo - "How to design API guidelines for a company."

And what do you know, "Defining API guidelines for a company: What works?", popped up, thankfully.

So I decided I could use this guide as my cornerstone on how to define the API guidelines.

Stepping through each step of the guide, here's how we did it.

Start with one API style and add more

In our case, it made the most sense to start creating a REST-ish (without hyperlinks) API guidelines.
Gather a small working group

After I took the lead, I brought this idea to the working group that we would minimize the group to create the first draft and then get that draft to the broader group for a review.
The group accepted that idea, and we ended up a small core team of three.
Stand on the shoulders of giants

As mentioned, we used the Microsoft API Guidelines as our base. We had meetings every week, where we would go through the section(s) and modify for our purpose.
Along with that, we had a small backlog where we would note down ideas, thoughts or concepts that we would need to discuss later on.
Once we finished going through the Microsoft guidelines, we went through the backlog and added/modified sections based on our discussions.
Take an open-source approach

Confluence stored the guidelines because that's our collaboration tool. So anyone could have a look and review if interested.
Review and debate with a broad audience

Once we finished our initial draft, we brought it to the broader group, that included architects and team leads or representatives, to review and discuss the draft.
There were a few things that needed a bit of ironing out, but all in all, it was well-received.
Get formal sign-off

Once the wider group was happy and signed it off, we brought it to an even wider group that included, for example, the head of production and head of technology, and more senior developers to get a formal sign-off.
Disseminate widely

After the guidelines were signed-off, we distributed the guidelines in all of the relevant Teams channels, with a small summary.
Create a Slack/Teams channel for support

There previously did exist a channel within Teams for APIs, so we were able to use that.
Make the guidelines available in PDF format

We didn't create a PDF of the guidelines since our guidelines live in Confluence and are easily accessible, and you're able to see the history of changes.
But we did restructure the guidelines a bit better, so it would be easier to consume and find relevant sections.
Train and socialize

Work in progress. We have yet to work out how to do this, but it might be a small workshop or something.

We still need to increase awareness and drive adoption of it. Hopefully, automated tools and processes can help with that.

I'm delighted with how well this went and that we were able to deliver.

I'm grateful for the opportunity to take part in and lead this work. I had great people around me who were able to help me, and I didn't feel uncomfortable when I thought my questions were stupid.
Thanks to all who contributed to this work.

Thank you for reading. For weekly updates from me, you can sign up to my newsletter.

Using pyboard to control two DC motors

Halldor Stefansson — Mon, 09 Nov 2020 19:24:05 +0000

This is part three in my series of building a small robot car. You can find the previous articles below:

Part One: First Steps Creating a Robot with MicroPython and Pyboard

Part Two: My First Arduino Built Robot Car

I ended the last part wondering whether I should add some sensors to my robot, or replace the Arduino controller for a pyboard controller.

Because my initial idea for this project was to use the pyboard, I decided I would start by replacing the controller and then later I could add some sensors.

Updating pyboard firmware

I've owned the pyboard for a few years now, but I've never really done much with it. I, therefore, suspected that the firmware might be out of date. So, the first item on the list was to update the firmware.

The documentation for this is excellent, but I did run into a minor problem because I kept downloading the firmware for pyboard v1.0, but I had v1.1. Once I figured that out, it was quick and easy.

Running one motor

Once the pyboard was up to date, it was time to find out how to control one of the DC motors with it.

After a bit of research, I found this article. Using that and the offical documentation for PWM, my initial code in micropython looked like this:

from pyb import Pin, Timer

p1 = Pin('X1')
tim2 = Timer(2, freq=1000)
ch1 = tim2.channel(1, Timer.PWM, pin=p1)
ch1.pulse_width_percent(50)

And this is how I connected it together, with the Maker Drive:

And this worked perfectly!

Adding the second motor

Based on the fact that I was using the X1 and X2 pins to run the first motor, and the layout, I reckoned I could use the X3 and X4 pins for the second motor.

So after adding the second motor, I made some changes to the code:

from pyb import Pin, Timer

p1 = Pin('X1')
tim2 = Timer(2, freq=1000)
ch1 = tim2.channel(1, Timer.PWM, pin=p1)
ch1.pulse_width_percent(50)

p3 = Pin('X3')
ch3 = tim2.channel(1, Timer.PWM, pin=p3)
ch3.pulse_width_percent(50)

And voila! Both motors were running. What a beauty!

Final touches

Once everything was working correctly, I put it together with the chassis and updated the code a bit to make it drive into a kind of a circle :D

You can see the current code and setup on my GitHub.

I'm really pleased how well this went and honestly thought it would take longer.

I'm going to put this project on to the side for a bit now. But the next item on the agenda for this project is to add some sensors to it and make them influence the driving.

Thank you for reading. For weekly updates from me, you can sign up to my newsletter.

My First Arduino Built Robot Car

Halldor Stefansson — Mon, 19 Oct 2020 15:56:24 +0000

Originally published on my blog at halldorstefans.com on October 19, 2020

This post is kind of a sequel to my previous post, First Steps Creating a Robot with MicroPython and Pyboard.

First Steps Creating a Robot with MicroPython and Pyboard

Halldor Stefansson ・ Jul 20 '20 ・ 3 min read

#microcontrollers #python #hardware

I know you'll see straight away that there's a contradiction between using Arduino vs Pyboard, but I'll get to that later, I promise.

Running the motor(s)

Continuing from where we left off in the last article, I was wondering how I could control two DC motors.
After a bit of research, I found out that I could use an H-bridge chip to do that. How to Build an H-bridge Circuit to Control 2 Motors.

Lucky me, I owned an Arduino starter kit, which included an H-bridge motor driver L293D.

Using the above article, about building an H-bridge circuit, and the project book included in the Arduino kit, I started connecting everything up and looking forward to seeing the motors run.

I started by connecting just one motor to make sure I got that right. Since the project book had one project doing precisely that, it was relatively straightforward, and the motor ran. Yay!

Since that was pretty painless, then surely all I had to do was to connect the second motor, and that would be that, right?

But, of course, it wasn't. Unfortunately, I couldn't get both motors running with the H-bridge I owned. Maybe it was broken, or I did something wrong, either way, I wasn't sure what to do.

Maker Drive saves the day

So I started to search for a new one and see what it would cost. I also searched for some alternatives.
That's when I found Maker Drive, a simplified H-bridge motor driver.

Even though it's a simplified H-bridge and I'm confident I could figure out how to use a standard H-bridge to run the motors, it would be easier to get the motors running and then later I could upgrade to a standard H-bridge.

Once the new motor driver arrived, it didn't take me long to get both motors running - credit to good documentation.

Halldór Stefánsson

@halldorstefans

Back at it 😊
Motors working with the new motor driver ✅

10:58 AM - 20 Sep 2020

Connecting to an Arduino

Ok, now the motors were running, but I needed something to control them. That's where I decided to go for Arduino over the Pyboard. For the same reason I chose Maker Drive over a standard H-bridge, I wanted the car up and running as soon as possible and then I could switch change the controller later.

And after watching this video, Getting Started with Maker Drive and Arduino, it was pretty straightforward. I just followed the video and a few moments later, my car was running in circles just like the code implied. :D

Halldór Stefánsson

@halldorstefans

It's alive!

18:37 PM - 28 Sep 2020

What next?

Woohoo, it works! Now what?

Well, I've two possible next steps, and I'm not sure which way to go. Either I could make it more fun by adding some sensors to it, so it could drive around without crashing or drive around a track, or I could switch out the Arduino for the Pyboard.

Since that was my initial idea, I'm leaning towards that. I could then later add the sensors, but I'm not sure.

What do you think?

Thank you for reading. For weekly updates from me, you can sign up to my newsletter.

Tips and Actions to Build your Network

Halldor Stefansson — Wed, 05 Aug 2020 13:03:12 +0000

Photo by Alina Grubnyak on Unsplash

I just recently watched a YouTube video from Noah Kagan called "How to Build a Million Dollar Network?".
It appealed to me since building a network is something I've recently started thinking more about.

What I love about Noah is that he gives action steps on how to do something.
And in this post, I want to follow one of his action and share with you the notes I took from that video.

Some of the actions might not be possible at this moment in time, but you'll definitely find something you can act on today.

Ask interesting friends for referrals

Be specific:

In what city/school/company?
Gender/personal specification
Category/niche
Whatever else

Examples:

"I'm in London for a month, who is the one person you hang out with when you come to London?"
"Who is the most amazing person from city/school/company/category/niche that I should have lunch with?"

Reach out to one impressive/up-and-coming person weekly

Start building the relationship early on

Do exciting stuff (and people might come to you)

Start a blog/YouTube/newsletter
Publish once a week for at least 90 days

Make an intentional list of people you want to connect with:

A. Who has a career you like?
B. Who's working on something you're curious about?
C. Who's working in an exciting company?

Take notes on podcasts/YouTube/webinars/posts and put online

Send the notes to the creator and let them know (without expecting anything back)

Financially support someone

Examples:
A. Buy their stuff (Products, books, courses, etc.)
B. Support their charity

Add value to someone without expectations

A. Create something for them
B. Look at how they are spending their time (and assist them)
C. Compliment without expectations

Keep a list of cool people in cities

Then contact them when you're in that city

Organize an online event

Identify someone you want to connect with
Make it worth it for them to sign up
Promote and make a great event

Join online communities

Pick one of your passions
Find 3 online groups
Post and engage at least once a week for 90 days

Hope you found this useful, have a great week!

If you liked what you read, please consider signing up to my newsletter.

Clean Inbox with 1 Email Rule and 1 Rule of Thumb

Halldor Stefansson — Mon, 27 Jul 2020 18:53:21 +0000

Photo by Davide Baraldi on Unsplash

I'm a big fan of keeping things clean and simple and love finding ways that help me focus or be more productive.

And keeping my inbox as clean as possible is one of those. Making sure I focus on the right things and find them easily.

The Email Rule

The email rule that I have in Outlook is this one:

Whenever I'm CC'd in an email, the sender has decided for me that it's not a priority for me. Unless it's marked as 'High Importance'.

This is great because then I don't have to waste time reading an email that has low relevance to my current task(s).

Then when I have the time, I can read it.

If I want to respond, I can do so without the guilt that my response is late since they weren't expecting an answer from me.

My Rule of Thumb

For every email I receive, I ask myself "Does this need a response from me, or do I need the information in this week?"

If the answer is "No", I archive it.

If I need to answer it, I archive the email once I've responded.

If I get a response from my reply, I ask the above question again.

If I need the information in the email for my current task(s), I keep it in the inbox until I no longer need it.

If it's information that I will need later, for example, in two or three weeks, I archive it.

Then when I need it, I'll search for it. And if I need to keep that for a few days, I move it to the inbox folder and then archive it when it's no longer needed.

I'm Not a CEO

These rules are the foundation for my clean inbox and have served me well.

On the other hand, I don't receive hundreds of emails per day. So that also helps to keep the inbox clean. 😅

Hope these rules will help you find rules to keep you focused and productive.

If you liked what you read, please consider signing up to my newsletter

First Steps Creating a Robot with MicroPython and Pyboard

Halldor Stefansson — Mon, 20 Jul 2020 18:02:05 +0000

Photo by Alexandre Debiève on Unsplash

What are MicroPython and PyBoard

MicroPython is a software implementation of the Python 3 programming language, written in C, that is optimised to run on a microcontroller.

It was Damien George who created MicroPython. He developed it along with running a Kickstarter campaign to fund it and the pyboard.

The pyboard is a compact and powerful electronics development board that runs MicroPython.

The aim of MicroPython is not to replace C, but to provide a way to program microcontrollers using Python.

Why Build a Robot

After finishing the 'Intro to Self Driving Cars' program, I wanted to build something, like a small car.

And I wanted it to be able to drive around without crashing by sensing its environment.

I started by buying a small robot kit, which included a chassis, two DC motors, wheels, and a caster ball for balance.
But of course, I would need something that would control the motors, and be the "driver".

Why Use MicroPython

I already owned a pybord that I had bought about four or five years ago. But, since then, it had been a dust collector.

I had written some small programs to turn the LEDs on and off, but that was it. I never tried to connect a component to it, and get that to work.

I thus thought this would be an excellent opportunity to finally use the pyboard. But I didn't know how it worked.

Therefore I didn't know how to get it to control my car.

First steps

I needed to get familiar with the board and came across these tutorials for the pyboard.
The first ten tutorials are good to get started, needing only the pyboard, a USB cable and a computer. It's a helpful introduction to the board and its possibilities.

In the second part of the tutorials, you'll need some components. But I didn't have them all so; I did only the ones where I did have the elements.
It was a good feeling to get something physical to work.

But the motors in the robot kit I bought are DC motors, and none of the tutorials demonstrated how to control them.

So I wondered how to use the pyboard to control a DC motor.

Next steps

Reading the description for the robot kit, I saw that run motors will need ~5V and 1.5 A.
But according to this response on the MicroPython forum, the max current per pin is 25mA.
We see there's a considerable gap between what the motors need and what the pyboard can provide.

After a bit of research, I realised that I needed something to control the motors.

So my next steps are to understand better what I need and how to use it.

If you liked what you read, please consider signing up to my newsletter

Why I took Udacity's 'Intro to Self-Driving Cars' Nanodegree, and was it worth it?

Halldor Stefansson — Tue, 07 Jul 2020 19:53:06 +0000

Photo by Dhruv Mehra on Unsplash

I've long been interested in cars, ever since collecting toy cars and playing on the classic road carpet.

I also love everything that's automated. So I'm indeed curious about the self-driving technology and thought this program would be a good starting point.

To buy or not to buy

However, there was still the question of investing time and money into it.

Even though I had more free time due to the lockdown situation, the estimated time to finish was 2-3 months.
Could I be using my time in something else?
I already have a bachelor's degree in Mechatronics Engineering, would I be learning something new or just wasting my time and money?
Should I maybe just straight to the 'Self Driving Car Engineer' program?

When investing your time and money into something, it isn't easy to know whether it will be worth it in the end.

So, what to do?

To help me decide, I made a pros/cons list, did some research for online reviews and studied the program's syllabus and overview.

I didn't find many reviews, but I did see this one. It's quite a thorough review, and I recommend you read it if you're considering joining the program.

Taking the plunge

I decided to give it a go.

My main reasons were that it would help me refresh my Python and C++ skills, which I hadn't used much since university, and learn the basic concepts behind the self-driving technology.

After a couple of weeks, things were going better than I had expected.

I was dedicating at least an hour most weekdays on it, and also a few hours during the weekend.
It also helped me that the material wasn't new to me; I had learned most of it in university.

I'm not going to go into the material, but if you're curious about it, I suggest reading the above mentioned review.

Halfway through the program, I realised this wasn't going to take me 2-3 months, and before I knew it, I had completed the program in about a month and a half.

Conclusion

Even though most of the content wasn't new to me, I don't regret investing in this program. It was nice to see that I was still able to program in Python and C++, and seeing that I hadn't forgotten everything on statistics and probability from the university.

I also liked the tasks of optimising my LinkedIn and GitHub profiles. It forced me to go over those profiles and improve them.

Overall I happy with the program, how it's structured and the quizzes and projects in the program.

I'll definitely consider Udacity's programs again in the future, but I think for now I want to try to do some personal side-projects by my self.

If you liked what you read, please consider signing up to my newsletter

How I Customized The Swagger UI In ASP.NET Core

Halldor Stefansson — Mon, 11 May 2020 11:43:38 +0000

Photo by Ern Gan on Unsplash

Originally published on my blog at halldorstefans.com on May 11, 2020

Many of us use Swagger and Swashbuckle on ASP.NET Core to have some minimal documentation for our API.
It's really easy to integrate with your API and gives a good overview of the available endpoints in the API.

But you might find that the Swagger UI doesn't fit your colour scheme and/or want to replace the Swagger branding with your own. Thankfully the steps to change that are rather simple.

Below are the changes I made in order to make the UI more fitting for my API.

Route Update

The default Swagger UI page is under myapp.com/swagger/index.html. But you can change the /swagger/ part.
I, for example, changed my route to /docs/.
This can be done with few simple changes in the Startup file:

public void Configure(...)
{
    ...
    app.UseSwagger(options =>
    {
        options.RouteTemplate = "docs/{documentName}/docs.json";
    });

    app.UseSwaggerUI(options =>
    {
        options.SwaggerEndpoint("/docs/v1/docs.json", "My API V1");

        options.RoutePrefix = "docs";
    });
}

Replace Swagger Icon/Logo

The Swagger logo can be seen both in the favicon and in the topbar, on the top left corner of the site.

1. Favicon

To change the favicon, the first step is to make sure you have your favicon. RealFaviconGenerator is a great favicon generator if you need one.

Once you have your favicon, you need the create the directory wwwroot/docs where the docs part is from the Route Change above. So if you haven't changed your route, the directory would be wwwroot/swagger.

You then copy-paste your favicon in that folder. Make sure the files favicon.ico, favicon-16x16.png, and favicon-32x32.png are included.
So, you should see something like this:

Also make sure that the application uses static files configuration:

public void Configure(...)
{
    ...
    app.UseStaticFiles();
    ...
}

You might need to press Ctrl + F5 for cache refresh for the favicon change to appear.

2. Topbar Logo

Replacing the logo in the topbar means we need to do a little bit of CSS magic.

A custom CSS file is needed under wwwroot/swagger-ui/custom.css.

In that CSS file I added the following:

.topbar-wrapper img[alt="Swagger UI"], .topbar-wrapper span {
    visibility: hidden;
}

.topbar-wrapper .link:after {
    content: 'Unoffical McLaren F1 API';
    color: #fff;
    visibility: visible;
    display: block;
    position: absolute;
    padding: 15px;
}

This replaced the logo with a text, but you should be able to replace it with your own logo.

Once that is ready, the following code needs to be added to include the custom CSS changes.

public void Configure(...)
{
    ...
    app.UseStaticFiles();
    ...
    app.UseSwaggerUI(options =>
    {
        ...
        options.InjectStylesheet("/swagger-ui/custom.css");
        ...
    });
}

Change The Green Colour

This part builds on the last one. I wanted to replace the default Swagger green colour with something else. In my case I replaced it with a red colour.

So here I added to the custom CSS file created earlier.

    .swagger-ui .topbar .download-url-wrapper .select-label select {
        border-color: #EF1C25;
    }

    .swagger-ui .info .title small:last-child {
        background-color: #EF1C25 !important;
    }

What Else?

It's also possible to inject a custom JavaScript, in the same way as the CSS.

public void Configure(...)
{
    ...

    app.UseSwaggerUI(options =>
    {
        ...
        options.InjectJavascript("/swagger-ui/custom.js");
        ...
    });
}

So with the custom CSS and JavaScript you can really customize the UI to your liking.

You can see my outcome here and the source code here.

Hopefully this helped.
Have a great day.

Thank you for reading. For weekly updates from me, you can sign up to my newsletter.

Using SQLite in .NET Core Azure Web App

Halldor Stefansson — Mon, 27 Apr 2020 11:34:09 +0000

Photo by Verne Ho on Unsplash

Originally published on my blog at halldorstefans.com on 27. April 2020

This is going to be a short demonstration on how I use SQLite in my API hosted in Azure.

Few assumptions I'm making:

Your application is finished and you're ready to deploy to Azure
Your database is not big

This demonstration is based on this tutorial from Microsoft

Create a Release Package

Open your terminal and make sure you're in the right folder.
In my case, that was at the same level as the '.sln' file was.
If you don't have a '.sln' file, maybe your have a '.csproj' file.

Run the following command to create a release package in a subfolder called publish:
```
dotnet publish -c Release -o ./publish
```
Copy database to the new folder

This step is kinda the only difference versus the Microsoft tutorial :)

Copy-Paste your database, for example 'my.db', into the newly created 'publish' folder.
Publish to Azure

There are few ways to publish to Azure.

I usually start in the portal and create what I need there.

Then, since I'm using Visual Studio Code and have the Azure App Service extension, I do the following:
1. Right-click the publish folder and select Deploy to Web App...
2. Select the subscription I want to use to create the Web App
3. Select the Web App I want to deploy to
4. Hit 'deploy' in the pop-up window
Set Connection String

Once the app has been deployed to Azure, you set your connection string in the Azure App Service.

You can find the setting under Settings -> Configuration -> Connection strings.

There you create a new connection string, for example:

Name SQLiteConnection

Value Data Source=mydb.db;

Type Custom
Ready

Your application will now use the database in the publish folder that was deployed to Azure.


Name	SQLiteConnection
Value	Data Source=mydb.db;
Type	Custom

Hope this helped.

If you want to migrate from SQLite to Azure SQL Database, you can use this tutorial for that.
I did try to do this, but I was in a hurry and it failed. Might try again later.

Thank you for reading. For weekly updates from me, you can sign up to my newsletter.

Building My First API From Scratch

Halldor Stefansson — Mon, 20 Apr 2020 15:31:00 +0000

Photo by Glen Carrie on Unsplash

Originally published on my blog at halldorstefans.com on April 20, 2020

Recently I joined a small group within my company, and we aimed to improve the Integration API for a specific product.

The problem was that under a specific load, the API threw a bunch of errors.

But I had a problem of my own.
The API architecture was way more complicated than I had encountered in online tutorials.
I, therefore, didn't understand how it all worked and wondered if I would be able to contribute anything to this task.

How do I get the knowledge I need?

This opportunity was something I found interesting and had offered my help, so I was eager to contribute to it.
But seeing that it was going to be more complicated than I thought, I wondered if I was going to be wasting everyone's time.

I knew that I learn things quicker if I'm able to build them on my own.
But was there going to any time for me to do that? What would I even build?

Building the whole API, similar or part of it would be too big and time-consuming. And I would probably end up copy-pasting already existing code and learn nothing.

So I started to exploring online what kind of API projects people were doing.
It was hard to find a project of the right size. Too small and straightforward and I wouldn't learn much, but too big would be time-consuming and the high possibility of being way over my head and drop the project.
I then came across the Pokémon API by Paul Hallett.
A project like these seemed to be an ideal fit as a side project for me.
Even though the API only has GETs, I was confident that I could create an API with a bit more complicated architecture than the typical beginners' tutorials. Might be overkill, but so be it.

How am I going to build it?

I still had some questions that I needed to figure out. What data could I provide? How could I build this API similar to my company's API?

During my research on API projects, I came across something called "Clean Architecture".
Being somewhat of a minimalized and having read Clean Code by Robert Martin not long ago, this appealed to me straight away.
Plus this architecture was not far from how my company's API was structured.

I found all kinds of articles, videos, and GitHub repos. I gathered as much as I could find on the topic, to help me understand it.

But still, I wasn't programming anything yet because I hadn't figured out what my API would produce.
It needed to be something I would be interested in; otherwise, I had the feeling I wouldn't be able to follow this project through.
I looked at my interests and what data was available in those areas.

Being a football(soccer)/Manchester United fan, I started looking in that area. Just looking at the English Premier League, I thought that was way too big.
I could narrow it down just to Man United. But even then, I wondered how much data I needed to gather. All the players in the clubs' history, their stats, all the games? Even that seemed too big.

What other interested to I have? Cars, I like cars. Could I gather information about one manufacturer and all the models that manufacture has created? Maybe.
How about racing? Formula 1, perhaps? Is there any data on my favourite team in F1, McLaren? Hmm... this Wikipedia page is interesting.

When I saw this page, I thought this could be perfect. I had all the races McLaren has taken part in and their result.
I could even have a separate table for the cars and drivers, and have some information on them.

I then noticed where Wikipedia was getting this data from, and ended up on STATS F1.
It was perfect. There was the data I wanted and structured.
I, therefore, used that as my data structure. Awesome

Now, I could start programming

So I started on the Core layer.
Investigating all the Github repos I had found, and figuring out what was supposed to be where and how.

Once I had roughly finished that part, I moved to the Infrastructure layer and then eventually the Web layer.
Developing this was, of course, a bit of iterative progress, going back and forth in layers, fixing, adjusting and such.

But, all this helped me better understand how the different layers were connected, deepening my knowledge of interfaces, getting more familiar with Entity Framework and LINQ.

There was also a bit of frustration in this process (like always), especially around the naming of things.

For example, items named 'UseCases', 'Services' and 'Supervisor' in different Github repos, all seemed to be doing the same action.
But why are they named differently? Is there no convention on the naming of items or standards? I don't understand.

It can sometimes be hard to identify if things are doing the same thing, or something completely different when trying to learn new things.
In cases like this, I usually then focus on one solution and follow that. Once I understand that solution, I review the other solutions and see if they start making sense.

I was finally able to make everything work together. It was such a great feeling when I was finally able to get that 200 response back.
What a beauty!

Job done, almost

It was a little bit tempting to say the project was over at that time.
I had achieved what I wanted.
Learned more about APIs and understood better what I was working on in work.

But I wanted to keep the momentum going, so I decided to add versioning, Swagger documentation and some tests.

The versioning and Swagger part was pretty straight forward. I found useful documentation from Microsoft, and it helped a lot.

Finding this was great because one of the tasks of improving the Integration API at work was to research and possible implement versioning. Which in the end I did implement :)

Now toward the last bit, testing.

Adding testing to the project was going to be the final piece of the puzzle.
I had never used xUnit before but wanted to learn more, so this seemed like an excellent opportunity.

Even though the repositories I found on Clean Architecture had some tests, I wanted to see also other examples.
I did a bit of research and found some great resources, for example, this article and this repository.

I then started on the unit tests.
After some time working on them, they weren't producing the results I wanted, so I wanted to skip doing the tests.
Creating some tests, when the fun part is done, on some side project that possible no know is going to use. Why am I doing this?
But I managed to plough through and get them to work.
I still have some doubts about my unit tests and if they are entirely acceptable tests, but better than nothing, right?

Keep going

In the end, I managed to build an API with clean architecture. I even managed to have versioning, documentation and tests. If you're curious how it looks at the moment, here is the GitHub repo

Damn, I was proud.

I know building a project can be frustrating but don't give up. It's such a great feeling when you finally manage to finish it.
Thank you for reading and keep ongoing

Thank you for reading. For weekly updates from me, you can sign up to my newsletter.

Personal Dashboard Showing Calendar Events & Weather Forecast Using .NET Core

Halldor Stefansson — Thu, 24 Oct 2019 16:18:27 +0000

Idea

I had this idea in my head that I want to display my calendar, the local weather forecast, and possibly some other things, on some screen.

At first, I was thinking of doing a smart mirror (Example 1, Example 2). But I wasn't sure if I wanted to put in all that work for something I might not use. Plus, since my woodworking skills aren't at the highest level, it would have been a pretty clumsy-looking mirror. :/

Hardware

A couple of months ago, I came across this touchscreen display for Raspberry Pi and a case for it. I thought they were pretty neat-looking and would be perfect for my idea. So I ordered the display, the case and a new Raspberry Pi :)

The first order of business was to connect and set up the screen. However, that was not as straight forward as I had hoped. I followed the assembly guide, but after powering on the Pi, the screen was just white, and nothing happened.

I wondered if the Pi was broken or maybe the screen. Yet, the Pi worked if I connected it to a regular PC monitor. So, either the display was broken, or I was missing something.

Finally, I found the solution on StackExchange, and the problem was that I was missing the drivers. Once I installed them, everything worked 'almost' perfectly.

The screen was upside down, but that was an easy fix.

Software

After the display was up and running correctly, I needed to figure out how I was going to display the information I wanted.

We all know that there are loads of tools available to do this, but I wanted to grow my .NET skills. And I came across a tutorial on building an application using ASP.NET Core called "The Little ASP.NET Core Book".

Once I had gone through the tutorial, creating a to-do application, I figured I would be able to use this for my idea.

The main items I wanted to display were my calendar and the weather forecast. I found this quickstart from Google for the Google Calendar API and used that as my base.

I then found a .NET library for the Dark Sky API. Along with the forecast, I wanted to display a small image that would represent the forecast. I discovered these awesome icons by Adam Whitcroft and managed to integrate them into my solution.

Design

Once I was able to get all the data I needed, next on the agenda was to try to make it pretty.

I was delighted when I encountered freefrontend.com and some CSS examples. I found examples for calendars, weather widgets and I also added the current date and time to my display.

I haven't done much HTML/CSS work, so it took me some time to get everything to work together. But I was satisfied with the result once I ironed that out.

"Deployment"

In "The Little ASP.NET Core Book" the author goes through two different deployment scenarios. On the one hand, using Azure, and on the other with Docker.

Both deployment strategies failed for me.

Once I had deployed the application in Azure, I was unable to open the page and got a "Timed Out" error. And my Dockerfile always failed when building.

Because I wanted to test this as soon as possible on my Raspberry Pi display, I didn't bother to figure out what went wrong at this time. So, I used a USB stick to move the solution.

However, my Raspberry didn't have .NET Core, so I was unable to run it there. Thankfully I found a guide on how to install it on a Raspberry Pi in a blog post by Scott Hanselman.

Once that was installed, I was able to run the application. I needed to make minor CSS adjustments so it would fit the smaller screen better.

Future Updates

I'm pleased about how good it looks, and how neat the display is. And it fits well on top of the shoe cabinet.

I'm not 100% sure at the moment if I'll make some improvements but examples of the things I could do/add are:

Add/update more data from Dark Sky
Fix the deployment process
Display my ToDoist list
Motion sensor
Voice assistant (Mycroft?)

Thank you for reading :D

PS Here is a similar project I found, using Python and an E-Ink display: Dresser Top Dashboard.

Thank you for reading. For weekly updates from me, you can sign up to my newsletter.