Add cities to the World Clock widget

If someone from MacOS users has to keep track of the time in different time zones (well, or enjoys this globalization process), he may want to use the Dashboard and the standard World Clock widget for this purpose.

However, unfortunately, this widget does not allow to display time for all the necessary cities, for example, there is no Minsk from birth! By the way , I heard that widgets for dashboards are written in javascript / css / html. So, it's time to see if this is true and correct a misunderstanding with a shortage of cities. I did not set out to learn the widget API, it’s rather a tutorial for people who are not quite close to programming.
')

Let's get started

So, the first task was to find the location of the widgets in the system. They were quickly found in the directory / Library / Widgets /. I am new to makosi, the idea with directories like packages seemed interesting to me.

Find:


Open:


Actually, further we are met by the structure of a static site, familiar to many. Our client is in the WorldClock.js file. If your editor allows you to elevate user privileges to write to system directories after editing, you don’t need to read further. If you do not know how to do this, I advise you to copy the WorldClock.js file somewhere else to another place, for example, on your desktop, edit it there and then transfer it back to the / Library / Widgets / World Clock / directory before editing. Just in case, back up the source file somewhere else.

Open the file, we see about the following lines:



We are interested in two things:

A region such as Europe or Asia, and a city that we lack so much.

It looks like this:

var Europe = [ {city:'Amsterdam', offset:120, timezone:'Europe/Amsterdam', id:"2759794"}, // … //   ] 

So, we understand what is written here.

• Region: Europe;
• City: Amsterdam;
• Offset: This is the UTC offset for your time zone. If you have a translation for summer time and back, this offset should be specified for normal or “winter” time, as it is also called. Specify the need in minutes. For offset +03: 00 it will be 180, for -01: 30 it will be -90;
• Timezone: some strange for me format is used here, I honestly did not understand why you need to specify this item separately at all;
• Id: yet incomprehensible numbers.

Let us see what we need Timezone and Id for. Judging by a quick review of the code, by the timezone, we carry time data (winter / summer), and by id we save information about the settings of the widget. I would remove all this information about the time zone and UTC offset. In general, all the code makes depressing impressions of student work. You can get acquainted with its content at:

gist.github.com/1284923

We understand the timezone: I stupidly drove there data on the sample from the file: "Continent / City". If someone tells you what the format is, I’m happy to add an article. Aidi in the code is also named GeoId, let's see ... So it is:



You can find the geo-location of your city on the site geonames.org, although, in the current implementation of the widget, you can, with a clear conscience, drive in the first set of numbers that do not coincide with other cities.



In general, the line for Minsk will look like this (people who are not familiar with javascript will advise people not to forget the comma at the end of the line):

 {city:'Minsk',offset:180,timezone:'Europe/Minsk',id:"625144"}, 

Save the file, create a new widget ... voila, Minsk with us!



Of course, the best solution would be to make it possible to add any cities to taste, but these are completely different labor costs, agree. Thank you for your attention, I hope this will make life easier for someone.

PS If you want a localized city name, you need to edit the localizedStrings.js file, which is located in the directory with the widget and in the subdirectory with the name of your locale. For example, for the Russian locale it will be / Library / Widgets / World \ Clock / ru.lproj / localizedStrings.js.

In the file you need to add a line like:

 localizedCityNames['Minsk'] = 'i'; 

If this is too difficult for you, just write the name of the city in your own language in a line from WorldClock.js:

 {city:'i',offset:180,timezone:'Europe/Minsk',id:"625144"},