This week in my open source class, I was tasked with the job of adding a functionality to an open source project called bridge-troll created by my professor David Humphrey. The feature that was requested to be added to this project can be seen here. So basically what this feature revolves around is that currently the bridge-troll project only renders the background on the map as a light colour which is not very optimal for night time usage. So what was requested was to add a dark theme that will be adjusted based on the user’s current time, relative to the sunset at their location.
First step was to fork the repository and clone it locally. After that I had to run the commands shown below.
All of these commands were successful and did not cause any problems for me. So the first thing I had to research was the SunCalc repository that my professor recommended in his issue. This repository can be seen here. So this repository contains a lot of functions which can be used to calculate sun position, sunlight phases, moon position, and etc. based on a location and time.
After npm installing this repository, I realized that I needed to use var
returnedTime = suncalc.getTimes(currentTime, lat, lng); since this will return an object with many properties that I can use. The properties that I needed to use were
sunsetStart since this indicates when nighttime starts and when daylight starts respectively. Once I compare this to the currentTime located, I can decide whether a dark theme or a light theme should be rendered.
So my changes can be seen in the screenshots below.
As you can see, in the
base-ui.js I called a method, theme, which took in the latitude and the longitude already defined in this function. It was calling the function in the
theme.js file and based on that it would get the sunCalc object stored in
returnedTime, and a regular date object in
currentTime. The if statement checks if its nighttime and if any of the conditions are true then it will set the
titleURL to the dark theme. If it is not true then it will set the
titleURL to the light theme.
This lab was a good learning experience for me in terms of adding functionality to existing repositories. I also worked with two of my peers which helped to have more ideas bounced around between us, making the learning experience even better. This issue wasn’t a hard one to fix, however it required learning the SunCalc library and all of the properties associated with a SunCalc object. This was important to note since we had to run a few console.logs to understand how the properties were stored in the object, since we needed to access the
sunsetStart properties for our code. Anyways that’s it for this week and see you on my next blog post!