Skip to content
This repository was archived by the owner on Sep 11, 2022. It is now read-only.

Commit 09d8830

Browse files
author
tsinis
committed
Adding screenshot and updating READMEs
1 parent a505060 commit 09d8830

File tree

8 files changed

+57
-17
lines changed

8 files changed

+57
-17
lines changed

README.cz.md

+12-5
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,26 @@
11
:globe_with_meridians: [english](README.md) <u>**český**</u> [русский](README.ru.md)
22

3-
# Steampunk hodinky pro soutěž Flutter Clock
3+
# Steampunk hodinky pro soutěž Flutter Clock :mantelpiece_clock:
44

55
Tato aplikace byla vytvořena ve frameworku Flutter, pro společnou vývojářskou/design soutěž firem Google a Lenovo, pod názvem “***Flutter Clock***”. Cílem této soutěže bylo vytvoření nejhezčího designu chytrých hodinek Lenovo, za použiti frameworku Flutter, pomocného baličku Flutter Clock Helper a bezplatných/volných nástrojů. Více o soutěži, v anglickém jazyce naleznete na oficiálních stránkách: [flutter.dev/clock](https://flutter.dev/clock)
66

7-
------
7+
![Vizualizace Steampunk hodinek](preview.jpg)
88

99
Vytvořil jsem variantu analogových hodinek, v duchu Viktoriánské éry (konec osmnáctého, začátek devatenáctého století). Je to spíše designérská soutěž — proto je tu **hodně detailů a animaci**, vytvořených pomoci nástroje [Rive](https://rive.app) (bývalé Flare).
1010

1111
> **Poznámka:** design je sám o sobě nezávislý na velikosti displeje, tj. aplikaci lze spustit na jakkoli velkém displeji bez ztráty kvality (všechna grafika je připravena ve křivkách), avšak vytvářel jsem ho pro menší displeje, o velikosti cca 4-6’ (tak je velký displej chytrých hodinek Lenovo).
1212
1313
Obsahují tmavé a světlé téma, **kukačku** a taky zobrazují počasí a teplotu, získané přes pomocný balíček Flutter Clock Helper. **Ukázku všech hlavních funkci a animaci naleznete v tomto videu:**
1414

15-
Pokud máte zájem o to, jak byli animace připravovaný, naleznete za nedlouho článek v mém blogu, nebo můžete se podívat na video tady:
15+
[![Steampunk hodinky pro soutěž Flutter Clock](http://img.youtube.com/vi/DQluq00k9hs/maxresdefault.jpg)](http://www.youtube.com/watch?v=DQluq00k9hs)
16+
17+
[Vimeo]( ) or [YouTube](http://www.youtube.com/watch?v=DQluq00k9hs)
18+
19+
---
1620

1721
* Samotný kód tohoto projektu (včetně mých komentářů) а další informace, se nacházejí ve složce [analog_clock](./analog_clock).
18-
* Kód pomocného baličku Flutter Clock Helper se nachází v *nedotčené* složce [flutter_clock_helper](./flutter_clock_helper) tohoto repositáře GitHub.
19-
* Další informace o ručně zpracované vektorové grafice, použité pro animace [Rive](https://rive.app), naleznete ve složce [vector_assets](./vector_assets).
22+
* Další informace o ručně zpracované vektorové grafice, použité pro animace [Rive](https://rive.app), naleznete ve složce [vector_assets](./vector_assets).
23+
24+
> V každé z těchto dvou složek jsou další video materiály o přípravě animací nebo o spuštění aplikace na reálných zařízeních.
25+
26+
* Kód pomocného baličku Flutter Clock Helper se nachází v *nedotčené* složce [flutter_clock_helper](./flutter_clock_helper) tohoto repositáře GitHub.

README.md

+12-5
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
11
:globe_with_meridians: **<u>english</u>** [český](README.cz.md) [русский](README.ru.md)
22

3-
# Steampunk Clock for Flutter Clock contest
3+
# Steampunk Clock for Flutter Clock contest :mantelpiece_clock:
44

55
This app is made in Flutter framework, for Google's & Lenovo dev/design contest, called "***Flutter Clock***", you can read more about this contest here: [flutter.dev/clock](https://flutter.dev/clock)
66

7-
------
7+
![Steampunk Clock Visualisation](preview.jpg)
88

99
I've made a analog clock variant, with look and feel of, late 18 or early 19 century. This is mainly design contest, so, there is **a lot of details and animations inside**, made with [Rive](https://rive.app) (ex Flare) tool.
1010
> **Note:** design is screen size independent, because all the graphics is made in vectors (not bitmaps), but I have prepared it with 4-6' screen size in mind (so as big as Lenovo's Smart Clock display).
1111
1212
It has a light theme and a dark theme, **cuckoo bird** and displays sample weather and temperature data, provided from Flutter Clock Helper package. You can watch a **preview video of it (with main functionality highlight) here:**
1313

14-
Also you can see something more about it, in my blog (link will be provided later), “How it’s made” video of animation preparing (all assets and app itself, are made with free online tools) can be found here:
14+
[![Steampunk Flutter Clock](http://img.youtube.com/vi/DQluq00k9hs/maxresdefault.jpg)](http://www.youtube.com/watch?v=DQluq00k9hs)
15+
16+
[Vimeo]( ) or [YouTube](http://www.youtube.com/watch?v=DQluq00k9hs)
17+
18+
---
1519

1620
* For more information, see the inside [analog_clock](./analog_clock/).
17-
* For Flutter Clock Helper code, see inside *untouched* [flutter_clock_helper](./flutter_clock_helper) folder, in this GitHub repo.
18-
* For more info about handmade vector assets, used in [Rive](https://rive.app) animations, please, take a look at [vector_assets](./vector_assets) folder.
21+
* For more info about handmade vector assets, used in [Rive](https://rive.app) animations, please, take a look at [vector_assets](./vector_assets) folder.
22+
23+
> In each of these two folders, there are additional videos of the animations preparation or the actual app launch on real devices.
24+
25+
* For Flutter Clock Helper code, see inside *untouched* [flutter_clock_helper](./flutter_clock_helper) folder, in this GitHub repo.

README.ru.md

+12-5
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
11
:globe_with_meridians: [english](README.md) [český](README.cz.md) **<u>русский</u>**
22

3-
# Стимпанк часы для конкурса Flutter Clock
3+
# Стимпанк часы для конкурса Flutter Clock :mantelpiece_clock:
44

55
Это приложение сделано в фреймворке Flutter, для совместного конкурса компаний Google и Lenovo, под названием «***Flutter Clock***». Условием которого была разработка лучшего дизайна часов, при использовании только вспомогательного пакета, предоставленного фирмой Google и бесплатных/свободных инструментов. Больше сведений, на английском языке, вы можете найти на главной странице конкурса: [flutter.dev/clock](https://flutter.dev/clock)
66

7-
------
7+
![Визуализация Стимпанк часов](preview.jpg)
88

99
Созданный мною дизайн аналоговых часов напоминает Викторианскую эпоху (конец восемнадцатого, начало девятнадцатого веков). Так как это скорее конкурс по дизайну, то тут вы найдёте **большое количество анимации и деталей**, созданных при помощи инструмента [Rive](https://rive.app) (бывший Flare).
1010
> **Примечание:** дизайн является масштабируемым (то-есть вы можете запустить приложение на любом дисплее без потери качества), так как вся графика тут векторная (не растровая), но он создавался скорее для меньших дисплеев (примерно 4-6’, таких же как и размер дисплея умных часов Lenovo).
1111
1212
В приложении есть светлая и тёмная тема, **кукушка** а так же они показывают температуру и погоду, переданные через вспомогательный пакет Flutter Clock Helper. **Видео, показывающие главные особенности этих часов вы можете посмотреть по этой ссылке:**
1313

14-
Если же Вам интересно как создавались все эти анимации — спустя некоторое время я напишу статью в своём блоге, но видео уже можно посмотреть тут:
14+
[![Стимпанк часы для конкурса Flutter Clock](http://img.youtube.com/vi/DQluq00k9hs/maxresdefault.jpg)](http://www.youtube.com/watch?v=DQluq00k9hs)
15+
16+
[Vimeo]( ) or [YouTube](http://www.youtube.com/watch?v=DQluq00k9hs)
17+
18+
---
1519

1620
* Больше информации о коде этого проекта, с моими комментариями и остальные данные, вы найдёте в папке [analog_clock](./analog_clock).
17-
* Код вспомогательного пакета Flutter Clock Helper находится в *нетронутой* папке [flutter_clock_helper](./flutter_clock_helper) в этом репозитории GitHub.
18-
* Больше информации о векторной графике, которая была использована для создания [Rive](https://rive.app) анимации, прошу заглянуть в папку [vector_assets](./vector_assets).
21+
* Больше информации о векторной графике, которая была использована для создания [Rive](https://rive.app) анимации, прошу заглянуть в папку [vector_assets](./vector_assets).
22+
23+
> В каждой из этих двух папок, присутствуют дополнительные видео материалы, по подготовке анимаций или реальному запуску аппликации на реальных устройствах.
24+
25+
* Код вспомогательного пакета Flutter Clock Helper находится в *нетронутой* папке [flutter_clock_helper](./flutter_clock_helper) в этом репозитории GitHub.

analog_clock/screenshot.jpg

1.18 MB
Loading

preview.jpg

-711 KB
Loading

vector_assets/README.cz.md

+6
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,13 @@ Veškerá grafika, kterou zde naleznete, byla ručně vytvořena speciálně pro
77
88
Podklady jsou připravené v bezplatném online redaktoru vektorové grafiky, který se jmenuje [Gravit Designer](https://www.designer.io/) (v tomto případe možnosti “Pro” verze nejsou zapotřebí). Posléze exportované do SVG formátu bez podkladů a nakonec optimalizované (s redukci rozměrů souborů) a importované do Rive. *Z technických důvodů všechny podklady, ve finální animaci, použitý nebyli.*
99

10+
Pokud máte zájem o to, jak byli animace připravovaný, naleznete za nedlouho článek v mém blogu, nebo můžete se podívat na video tady:
11+
12+
[![Jak byli animace připravovaný — Steampunk hodinky](https://i.vimeocdn.com/video/848054930_1280x720.jpg)](https://vimeo.com/tsinis/futterclockanimations)
13+
[Vimeo](https://vimeo.com/tsinis/futterclockanimations) nebo [YouTube](https://www.youtube.com/watch?v=_9d7O9PfX3s)
14+
1015
----
16+
1117
Soubory který možná hledáte:
1218
* Zdrojový originál Gravit Designer, se nachází v kořenové složce a jmenuje se [clock.gvdesign](clock.gvdesign).
1319
* SVG soubory (optimalizované a nedotčené) jsou ve složce [SVG](./svg).

vector_assets/README.md

+8-1
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,16 @@
55
All those vector assets were exclusively made and optimized, for being used in [Rive](https://rive.app) (ex Flare) animations, with free online tools. This work is licensed under a [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) (Creative Commons Attribution 4.0 International) license.
66
> **Note:** at this moment (January 2020) there is still some problems with importing SVG designs in Rive, so there is no radial gradients used at all and linear gradients are reduced to necessary minimum.
77
8+
89
Assets are made in free to use online editor called [Gravit Designer](https://www.designer.io/) (you don't need "Pro" features for it), then exported to SVG without background. After that, SVG files were optimized (to reduce the file size) and imported into the Rive. *Due to technical reasons, I did not used all assets, in final animation file.*
910

10-
---
11+
Also you can read something more about it, in my blog (*link will be provided later*), but at this moment “How it’s made” video of animation preparing can be found here:
12+
13+
[![How it’s made — Steampunk Clock](https://i.vimeocdn.com/video/848054930_1280x720.jpg)](https://vimeo.com/tsinis/futterclockanimations)
14+
[Vimeo](https://vimeo.com/tsinis/futterclockanimations) or [YouTube](https://www.youtube.com/watch?v=_9d7O9PfX3s)
15+
16+
----
17+
1118
Files you may looking for:
1219

1320
* Original Gravit Designer file is on the root of this folder, called [clock.gvdesign](clock.gvdesign).

vector_assets/README.ru.md

+7-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,13 @@
77
88
Графика была подготовлена в бесплатном онлайн редакторе векторной графики, под названием [Gravit Designer](https://www.designer.io/) (в данном случае функции «Про» версии не обязательны), после чего экспортированы в формат SVG без фона. Потом SVG файлы были оптимизированы (для облегчения) и импортированы в Rive. *Из за технических проблем я не использовал всю подготовленную графику.*
99

10-
---
10+
Если же Вам интересно как создавались все эти анимации — спустя некоторое время я напишу статью в своём блоге, но видео уже можно посмотреть тут:
11+
12+
[![Как создавались анимации в стимпанк часах](https://i.vimeocdn.com/video/848054930_1280x720.jpg)](https://vimeo.com/tsinis/futterclockanimations)
13+
[Vimeo](https://vimeo.com/tsinis/futterclockanimations) или [YouTube](https://www.youtube.com/watch?v=_9d7O9PfX3s)
14+
15+
----
16+
1117
Файлы, которые вы возможно ищете:
1218
* Оригинальный исходник Gravit Designer файла, находится в корне папки под названием [clock.gvdesign](clock.gvdesign).
1319
* SVG файлы (оптимизированные и нетронутые) находятся в папке [SVG](./svg).

0 commit comments

Comments
 (0)