Make your own Chrome start up page weather forecast

Tram Ho

Preamble

As mentioned in the previous lesson, this article will use what we learned in the previous lesson to make a start up weather page. In fact, this start up page is just my original intention, because the start up page is so boring, thinking about what to paint to make it less boring, then think of the weather display game outside (handy at If you come out of the door and see a big rain alert, you will have an umbrella / raincoat ? ). But the display was still boring, I thought of adding a weather animation, so there was another song, as a prerequisite for this article.

My basic way is to use css + jquery / ajax, get the weather data with ajax and then based on the corresponding weather animation result. Mostly will use the replace HTML method after receiving the returned data.

In addition, as you can see, I also added some miscellaneous things like date and time, with a good link to be mail and drive, people can add or remove according to their needs, I’ll leave the demo link and reference sources at the end of the article.

The work consists of the following main parts:

  • Change the start up default chrome page to mine
  • Create skins and prepare weather effects
  • Get weather information via API
  • Processing received information and put on the interface, active corresponding information effects

Replace Start up page

The first of course is to make instead of displaying the boring start up page, chrome will show its colorful page. First of all, create a Project folder with an html file.

Next, to be able to replace the chrome start up, an additional manifest.json file is needed. The content of this file will be as follows:

The next step is to enable the application on the Chrome extension. Access the link: chrome://extensions/ to go to the list page to turn on / off the extension. However, my application has not been seen in this yet, so I need to ‘load’ it into the list already.

First, you need to turn on Developer Mode to be able to manually download the extensions outside the chrome store (specifically, to use the extension I built on the local).

Then you can click on ‘Load unpacked’ to get your PJ listed

And every last step is active PJ extension it up.

Now you can open a new tab, and see that instead of the image you used to see every day, now the clean white newtab looks even more boring =)). If you write a few words in the html file, it will display the new tab just now ? . But that means it is already possible to replace the start up page.

Little nice drawing

Once you have activated your extension, now do 2 things:

  • Determine what function you want on it
  • Draw your page well. Because after drawing the page, you can do steps like replace HTML, replace animation according to your conditions.

Like my site, I want to display the date and time, the weather with effects, and even some links I visit often without wanting to type the link anymore (actually, I’m used to clicking those on the old start page, now open). See missing, and lazy to type the link ? ). Well, the sun and my background also change over time ?

Then, after finding that beautiful mountain range (stealing an image from https://offset.earth/artilleryio ), drawing and determining where to display each and all the animations, I was able to Know what class / item to replace the value in.

Although I have used weather effects, I still use more weather icons, I use this set of icons: https://www.iconfinder.com/iconsets/weather-color-2

By the way, I define these images to always call the icon easily:

When starting to write js, I note a bit that with the start up page, it will not be possible to get js written in the same html file, to add JS, you must write your own js file and declare it in your index.html file. Please

Easy to do in advance: Define effects and use

Effects corresponding time

As mentioned above, first I want to display the time and then change the background color and position of the sun. So I choose some background color patterns for each time: early morning, full morning, noon, afternoon, evening, evening. As for the sun, I’ll move it halfway through the center bottom of the screen to be the center bottom . The color problem is simple, apply background-color by the hour to finish. As for the position of the sun, I apply this to position the sun, of course it also depends on the time. Here I define changing the background color will be at the same time with changing the sun position => determine the position corresponding to the time of changing the background color above.

Corresponding weather effect

Next, I will rely on the weather to get an animated rain / snow / thunder … to make the page more vivid. To do this, you need to prepare some corresponding effects from the previous lesson : light rain (using only 1 rain layer), heavy rain (use 1 – 2 more rain layers with faster falling speed, bigger raindrops to look like heavy rain); it’s windy (I’m lazy to do it yet); thunder (remember to put the lightning layer on the bottom, just above the background color layer); snow (in Hanoi there is no snow but in Sapa you can have snow ? ); fog and thick fog (2 pieces are common, only different from blur and opacity to have different density only)

So something like this will look like HTML:

Of course initially all the other weather div will set display: none . Corresponding to the weather retrieved will choose which display: block to run the effect.

Handling date and time

It’s probably too simple to get the current date and time, but for the full article, I still instruct lazy people to find a way:

After finishing the date, time has time, based on that and processing the background and the sun, everyone can choose the time markers, or skip this one as well:

A little reminder: The above code I wrote is as explicit as possible, so it looks verbose and duplicated, so to optimize the code, you can refer to this article: Reduce if else to clean code than

Get weather information from API

API source

After searching some sources for the weather forecast API, I found it almost impossible to use. Most of the sources that page types: “The free weather forecast API” offers “free” type for several hundred requests per day, then will charge for the next request. Which I use, for Chrome start up page, it is very expensive to request a lot of opening days for tabs, so using the free style for the first requests, charging the following requests is not good.

And I chose openweathermap , which allows up to 60 requests per minute, with personal use that’s enough, unless you want to challenge the click speed of new pages. ? . As far as I read, OpenWeatherMap has about 11 different APIs for us to use. All you need to do is register your account to get API keys only.

Open weather map

To register for an account, visit this link: https://home.openweathermap.org/users/sign_up and register your account with your email. Then will be sent a confirmation email to the email you registered, click the verify link to be.

After registering successfully, you only need to get API key to use it! On the home screen, select the API key tab to get your key:

Now that we have the API key to use, temporarily assign the key chain as: 122333444455555abcdef .

Connect to API

Read the API

Depending on the purpose of use, we will need different APIs: weather of the day, weekday, … You can go to https://openweathermap.org/api to refer to the doc and Choose to suit the purpose. I will take an example with ‘Current weather forecast’ (because the main purpose is to check the current weather so that the start up page animate it) ? )

According to doc, the API call will look like this:

Here city name if not sure key city name then go to https://openweathermap.org/city to search city name. And the appid is the API key just now: 122333444455555abcdef

Also can get by city ID, zip code … but that way is not as simple as the city name, so whatever is easy to use only ?

OK, now try to access the API. You should see data that looks like this:

In which attention should be paid:

  • dt is the date and time of each forecast item (For example, at 9am on 12/2/2020, the weather in Hanoi is like that). This time is in unix format, so if you want to convert to normal time, you can use the moment.js library:

  • weather.description is the weather information we care about
  • name : The name of the city to get the weather. There is sys.country again as the name
  • main contains specific information about the weather: temperature (Fahrenheit scale), How many degrees it feels, the highest heat, the lowest heat, …

Oh, but my Vietnamese people use Fahrenheit temperature (Fahrenheit), it is not used to it. To convert to Celsius is also simple, you subtract 30 minus F and divide 2 by the Celsius (F = (C x 2) + 30 according to the document ). Or simply add &units=metric at the end of the request API =))

Also at the bottom of the API is the location information for the weather:

Create a request to retrieve data with ajax

I used a very basic way to get

And then open it up and the thing you need is pulled out:

Data processing to be ready for use

Leave it as it is, the insert is not very convenient, so I modified it a bit for ease of use:

According to the above, I only get data as date, time, current temperature, maximum temperature, min temperature and current weather only. So there is already enough information.

Assign weather information

The required information, the corresponding effects have been prepared, is now incorporated. For the information: temperature, city name, just replace directly as the date and time information above is done: $(".weather .curr-temp span").html(weather.temp); . However, the status of the weather needs a bit of handling.

In Openweathermap, they define many weather conditions (item data.weather[0].description ): cloud clusters, little cloud, light drizzle, drizzle, light rain, cold rain, pouring rain, .. .. so it is necessary to group the statuses returned, with which groups to handle the effect, or can add the corresponding weather icons as well. To view all the weather conditions and choose the appropriate group, you can go to this link: https://openweathermap.org/weather-conditions

So I have 1 general map conditions corresponding as follows:

Sort of the map above is like this:

Inside:

  • weather_id: need not explain, is the id taken from API via ajax above
  • icon_image_variable: varisable contains the image icon defined above: Eg var windy = '<img src="images/windy.png">';
  • weather_action_for_screen: choose the effect of rain or snow, blah blah … for the screen

The above code is quite long and has not been “beautiful”, I do not know how to handle it so neatly so, you can optimize it.

checkWeather (weather_id)

This function will work select icons and effects according to weather_id.

Here actions.get(status) will run into the map actions above, based on status to match the weather_id in the map and retrieve the corresponding icon + weather action. The return value will then be

So the icon (action [0]) function is to insert the icon into the location of the weather icon:

and activate the corresponding effect:

Conclusion

People can watch the code directly at https://github.com/BunnyPi04/weather-start-up-page if you follow the above tutorial but too vague offline.

And here is the demo page: https://bunnypi04.github.io/weather-start-up-page/

Or: https://weather.tothemoon-min.com/

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo