Kategorie: Ralf

Ralfs Blogeinträge

Veröffentlicht am

Zifferblatt-Designer: Ein eigenes Zifferblatt erstellen

Designer

6 Schritte, zum eigenen Zifferblattt

Auf den ersten Blick sieht der Zifferblattdesigner ein wenig kompliziert aus, aber keine Angst: Es ist ein sehr einfacher Vorgang und der Designer ist leicht zu bedienen.

Simple sample

1. Mit dem Zeichenprogramm der Wahl die Zifferblattdateien erstellen

Für eine 12-Stundenuhr wird eine Datei für den Zifferblatthintergrund und drei Dateien für die Zeiger benötigt: Stunden-, Minuten- und Sekundenzeiger:

Zifferblatthintergrund:Simple sample: Clock face

Stundenzeiger:Simple sample: Clock face

Minutenzeiger:Simple sample: Clock face

Sekundenzeiger:Simple sample: Clock face

Falls die Uhr für den Tag- und Nachtbereich oder für AM und PM ein unterschiedliches Aussehen haben soll, so wird, je nach Design, die ein oder andere Datei doppelt benötigt.

Das bevorzugte Dateiformat ist PNG, da in diesem Dateiformat transparente Bereiche möglich sind. Falls keine transparenten Bereiche erforderlich sind, so kann auch das JPG-Format verwendet werden.

Die wichtigste Frage bei der Erstellung der Datei ist: Welches ist die perfekte Größe für die Dateien?
Für Zifferblätter, die nur auf den Kacheln verwendet werden, können folgende Größen genutzt werden:

Tile sizes 60 / 84 / 108 Pixel

Tile sizes 75 / 105 / 135 Pixel

Tile sizes 80 / 112 / 144 Pixel

Tile sizes 150 / 210 / 270 Pixel

Tile sizes 310 / 434 / 558 Pixel

Für Bildschirme mit einer Auflösung von mehr als 174 dpi bitte die zweite, für Bildschirme mit einer Auflösung von mehr als 270 dpi bitte die dritte Größenangabe verwenden.

Soll das Zifferblatt auch für die Bildschirmanzeige verwendet werden, dann hängt die Größe von der Bildschirmgröße und der Anzahl der Uhren je Bildschirm ab.

Pro Zifferblatt werden die Dateien nur in der jeweils größten erforderlichen Größe benötigt, da Tile-Clock die Dateien für die anderen gewünschten Größen umrechnet.

Abhängig von der Größe der Zifferblatthintergrunddatei, berechnet Tile-Clock für jede erforderliche Größe einen Skalierungsfaktor, der ebenfalls bei der Skalierung der Zeigerdateien verwendet wird.

Nachdem diese Dateien erstellt wurden, die der Schritt mit dem größten Zeitbedarf erledigt und die Dateien können in Tile-Clock geladen werden.

2. Ein Zifferblatt in Tile-Clock anlegen

Nach dem Start von Tile-Clock über die App-Bar in die Zifferblattansicht wechseln

clock face designer

und mit einem Klick auf die „Neues Zifferblatt“-Schaltfläche ein neues Zifferblatt hinzufügen:

Add clock face

Als erstes muss die Basisoption für das Zifferblatt ausgewählt werden:

option 1: Zeigerzifferblatt: Gleiche Anzeige für Tag und Nacht und AM oder PM.

option 2: Zeigerzifferblatt: Unterschiedliche Anzeige für Tag oder Nacht und AM oder PM.

option 3: Zifferblatt mit Zifferdarstellung (Hier werden für jede Ziffer, 0-, und für den Hintergrund jeweils mindestens eine Datei benötigt).

Rechts von diesem Optionsfeld kann ein Name für das Zifferblatt angegeben werden.

Nun können die Dateien geladen werden. Dazu im Bereich des Zifferblattes (Bereich in der Mitte) oder im Bereich der Zeiger (links mit den roten Feldern und Gleitern für die Stundenzeiger, rechts mit den grünen Feldern und Gleitern für die Minutenzeiger)  klicken und die im ersten Schritt erstellten Dateien auswählen:

clock face designer

Zum Laden der Sekundenzeiger kann mit Klick auf die Schaltfläche für den Anzeigewechsel (unterhalb des oberen Minutenbereichs) der Sekundenbereich angezeigt werden:

change view

Der Sekundenzeigerbereich wird mit gelben Feldern und Gleitern angezeigt.

Noch einmal zur Info:
Rote Felder und Gleiter für die Angaben zum Stundenzeiger
Grüne Felder und Gleiter für die Angaben zum Minutenzeiger
Gelbe Felder und Gleiter für die Angaben zum Sekundenzeiger

3. Einstellen der Zeigerdrehpunkte auf dem Zifferblatt

Mit den Feldern und Gleitern im Bereich des Zifferblattes werden die Drehpunkte für die Zeiger auf dem Zifferblatt festgelegt:

clock face center rotaing points

Mit einem Klick auf die Sychronisationsschaltflächen

clock face center rotating positions

können auf einfache Weise die gleichen (synchronisierten) oder unterschiedliche Werte für die Drehpunkte der Zeiger eingestellt werden.

4. Einstellen der Zeigerdrehpunkte

Mit den Feldern und Gleitern ober- bzw. unterhalb der Zeigerbereiche werden die Zeigerdrehpunkte festgelegt:

hand center rotating points

Auch für die Zeiger sind Synchronisationsschaltflächen vorhanden.

Unterhalb des oberen Stundenzeigerbereiches kann der Zeitpunkt für den Wechsel der der Tag- und Nachtanzeige eingestellt werden:

hand center rotating points

Beispiel:
Wird der Wechselzeitpunkt auf 20 Uhr eingestellt, so wird das obere Zifferblatt in der Zeit von 8:00 bis 19:59 und das untere Zifferblatt von 20:00 bis 7:59 des Folgetages angezeigt.

Achtung
In den meisten Fällen, wenn ein anderer Wechselzeitpunkt als 0:00 oder 12:00 Uhr eingestellt wird, muss auch der Start- und Endwinkel für eingestellt werden. Für das obige Beispiel muss der Startwinkel auf 240 Grad ( 30 Grad für jede Stunde) und der Endwinkel auf 600 Grad (weitere 360 Grad) eingestellt werden.

Information
Mit den Start- und Endwinkeln lassen sich interessante Zifferblätter erstellen. Ist der Startwert größer als der Endwert, so laufen die Zeiger gegen den Uhrzeigersinn.
Weitere Beispiele für Start- und Endwinkel: Beispiel 03 or Beispiel 04.

5. Testen der Einstellungen

Auf der rechte Seite können die Einstellungen überprüft werden:

test area
Mit den Gleitern, den Plus- und Minusschaltflächen und dem Eingabefeld kann die Anzeige für jeden Tageszeitpunkt überprüft werden.
In der Sekundenansicht kann der Sekundenzeiger ebenfalls über einen Gleiter getestet werden.

Die Größe des Testbereiches ist von der Einstellungen im Größenoptionsfeld abhängig:
test area size

6. Erzeugen der Kacheldateien

Um die Zifferblätter auf den Kacheln anzuzeigen, muss Tile-Clock Dateien erstellen.

Das Erstellen dieser Dateien wird mit Klick auf die Erzeugenschaltfläche gestartet (diese Schaltfläche ist in der Sekundenanzeige nicht verfügbar):
test area size
Abhängig von der gewählten Größe, den Größen der Zifferblattdateien und der Systemgeschwindigkeit kann dieser Prozess ein bis zwei Minuten dauern (evt. auch ein klein wenig länger).

Information
Für jede gewünschte Größe kann Tile-Clock unterschiedliche Dateien erzeugen. So können Systemresourcen geschont werden oder eine bessere Anzeige kleiner Zifferblätter erreich werden. Bitte ausprobieren.

Verwenden der Zifferblätter

Nachdem die Dateien erstellt wurden, können die Zifferblätter auf den Kacheln und auf dem Bildschirm verwendet werden. in der Kachelverwaltung kann für jede Kachel und für jede Uhr das gewünschte Zifferblatt ausgewählt werden:
test area size

Information
Für die Kacheln stehen zwei Felder für die Zifferblattauswahl zur Verfügung:
Ein Feld für die Kachel: Dieses Zifferblatt wird angezeigt, wenn das anzuzeigende Zifferblatt 150 Pixel oder größer ist (bzw. 210 Pixel bei mehr als 174 dpi oder 270 Pixel bei mehr als 240 dpi).
Das andere Zifferblatt kann für jede Uhr festgelegt werden und wird angezeigt, wenn das anzuzeigende Zifferblatt kleiner als 150 Pixel ist.

Hinweis 1
Nicht vergessen, den gewünschten Kachelstil einzustellen.

Hinweis 2
In der Kachelverwaltung können mit den gelben Feldern die Kachel- und mit den orangen Feldern die Bildschirmuhren konfiguriert werden:

sample

test area size

Veröffentlicht am

Clock face designer: How create a clock face

Designer

6 Steps to create a clock face

At the first view the clock face designer looks a little bit complicated, but don’t hesitate: It is an easy process.

Simple sample

1. With the drawing program of your choice create the clock face files.

If you will create a 12 hour clock face you need a file for the clock face background and three files for the hands: hour-, minute- and second-hand:

Clock face:Simple sample: Clock face

Hour hand:Simple sample: Clock face

Minute hand:Simple sample: Clock face

Second hand:Simple sample: Clock face

If your clock has to show different faces between daylight and night or AM and PM you need one or more files twice, depending on your design.

The preferred file format is png because you can use transparent areas in png. If you don’t need transparent areas you can also use the jpg file format.

The most important question is: Which is the perfect size for the drawings:
For clock faces, which will only be shown on tiles, you can use the following sizes:

Tile sizes 60 / 84 / 108 Pixel

Tile sizes 75 / 105 / 135 Pixel

Tile sizes 80 / 112 / 144 Pixel

Tile sizes 150 / 210 / 270 Pixel

Tile sizes 310 / 434 / 558 Pixel

For displays with more than 174 dpi use the 2nd size, for displays with more than 270 dpi use the 3rd size.

If you will additionally use the clock face on the screen, than the size depends on your screen size and how many clocks you will shown on one screen.

At least you need only files in the largest size, tile clock will resize your files for the other necessary sizes.

Tile clock computes for every necessary size one scale factor, depending on the size of the clock face file. This scale factor will be used for the hand files too.

After you have created these files, you have finished the most time consumption step and you can load these files into tile clock.

2. Creating a clock face in tile clock

Start tile clock, select the clock face view via the app bar

clock face designer

and add a new clock face by clicking on the new clock face button:

Add clock face

Then select the clock face base option:

option 1: Clock face for hands, 0-11:59 view (same view for daylight and night or AM and PM)

option 2: Clock face for hands (different views for daylight and night or AM and PM)

option 3: Clock face for digits (here you need at least ten files for the digits 0-9 and one file for the clock face).

Right from this option field you can enter a name for your clock face.

Now you can load the files. Click or tab on the area for the clock face (in the middle) or the hands (left for hour hand with red fields and sliders, right for minute hand with green fields and sliders) and select the created files from step one:

clock face designer

For loading the files for the second hand, change the view by clicking on the change view button below the upper minute area:

change view

The second hand is shown with yellow fields and sliders

Again:
Red fields and sliders for hour hand values
Green fields and sliders for minute hand values
Yellow fields and sliders for second hand values

3. Adjust the rotating positions on the clock face

In the fields and with the sliders around the clock face you can adjust the rotating positions off the hands  on the clock face:

clock face center rotaing points

If you click or tab on the sychronize buttons

clock face center rotating positions

you can easily adjust the same values (synchronized) or different values for the hour, minute and second hand.

4. Adjust the rotating points of the hands

With the fields and sliders above or below the hand areas you can adjust the center rotating point of a hand

hand center rotating points

For the hands you have a sychronized button too.

Below the upper hour hand area your can enter the time when tile clock is showing the night clock face:

hand center rotating points

For example:
If you change the changing hour to 20:00, then tile clock will show the upper clock face from 8:00 til 19:59 and the lower clock face from 20:00 til 7:59 on next day.

Attention
in most cases, when you enter a changing time different from 0:00 or 12:00, you have to adjust the start and end angles. In this example, the value for the start angle is 240 (30 degrees for every hour), the end angle is 600 degree (360 degree later).

Information
With the angle values you can create interesting clock faces: If the start value is greater than the end value, the clock is running counter clockwise.
Or look at example 03 or example 04.

5. Test your clock face

On the right side you find a test area:

test area
With the sliders, plus or minus button or the time field you can check any time of the day.
In the second hand view you have a slider for the seconds too.

The size of the test area denpends on the selected size in the size Option field:
test area size

6. Creating the tile files

For showing the clock face on a tile, tile clock creates tile files.
This process starts after clicking on the file creating button below the test area (this button isn’t visible in the second hand view):
test area size
Depending on the selected size, the size of your clock face files and of the system speed the process needs 1 or 2 minutes (or a Little bit more).

Information
For every selected size, tile clock creates different tile files. This could be helpful to save system resources when showing many clocks on the tiles. Or you will get a better view of smaller sizes instead of scaling larger files on the tiles by the windows system – give it a try.

Using the clock faces

After creating the tile files you can use your clock faces on a tile or on the Screen. In the tile control view select your desired clock face for evey tile and clock:
test area size

Information
For the tiles there two fields for selecting a clock face.
One for the tile: This clock face will be shown, if there is a large clock view on a tile (more or equal than 150 pixel).
The other clock face is selected for the the clock and will be shown if there are one or more  small clocks on the tile (less than 150 pixel).

Remember 1
Don’t forget to select a tile style.

Remember 2
In the tile control view the yellow values adjust the view of the tiles

sample

and the orange values the view on the screen.

test area size