Add cities to the World Clock widget

If one of the MacOS users is forced to monitor 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.

However, unfortunately, this widget does not allow you to display the time for all the cities you need, for example, it does not have Minsk from birth! Out of the corner of my ear, I heard that widgets for dashboards are navraichi on javascript / css / html. So, it's time to see if this is so, and to correct the misunderstanding with the lack of cities. I didn’t set out to study widget APIs, but 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 found quickly in the directory / Library / Widgets /. I'm new to makoshi, the idea with directories as packages seemed interesting to me.

Find:


Open:


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

We open the file, we see approximately the following lines:



We are interested in two things: a

Region, for example 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 daylight saving time and vice versa, this offset must be specified for normal or "winter" time, as it is also called, time. Indicate in minutes. For an offset of +03: 00 it will be 180, for -01: 30 it will be -90;
• Timezone: here some strange format is used for me, I honestly did not understand why this item should be indicated separately at all;
• Id: so far incomprehensible numbers.

Let's figure out why we need Timezone and Id. Judging by a quick look at the code, we drag the time data (winter / summer) by the timezone, and by id we save information about the widget settings. I would have removed all this information about the timezone and UTC offset to hell. In general, the entire code makes a depressing impression of student work. You can get acquainted with its contents at:

gist.github.com/1284923 We deal

with the time zone: I stupidly drove in there data according to the sample from the file: "Continent / City". If someone tells me what format it is, I will gladly complete the article. The id in the code is also called GeoId, let's see ... It is:



You can find the geoid of your city on the geonames.org website, although, in the current implementation of the widget, it’s possible, with a clear conscience, to drive the first set of numbers that does not coincide with other cities.



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

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

We save the file, create a new widget ... voila, Minsk is with us!



Of course, the best solution would be to make it possible to add any city to your liking, but this is a completely different work effort, 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 a subdirectory with the name of your locale. For example, for the Russian locale it will be / Library / Widgets / World \ Clock /ru.lproj /localizedStrings.js.

Add a line of the form to the file:

    localizedCityNames['Minsk'] = 'Мiнск';

If this is too complicated for you, just write the name of the city in your preferred language in the line from the WorldClock.js file:

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