Clone app "aelios weather" with the help of html5

Want to share with you my last project.


About a year ago I downloaded an app Aelios Weather for iPad.
It hurt my eyes with its simplicity and unusual interface.

And here's what happened:
image

Look here


As always, I was wondering how advanced HTML5, and is it possible to create something like that.

At the core of the interface is the circle, which is kind of like a compass and clock in one.
A compass can rotate in order to show the days of the week or time of day.
It is also possible to see the time of sunrise and sunset.

Inside the circle an arrow appears which is automatically sent to the largest population of item in this range.

I tried to understand the interface.
Then I started to search how to integrate Google Maps API.

At the moment the website supports the following interface elements:
the
    the
  • and map it to the interface elements
    • the
  • hour circle with the arrow pointing to the most populated area under it
    • the
  • you can twist the watch and see the effect of opening and closing the shutter
    • the
  • current time and the times of sunset and sunrise on the circle
    • the
  • keyword search and definition of user location through HTML5 Geolocation API
    • the
  • clicking on a city shows the weather forecast (it is not connected to any service, so it is invalid)


Project released on Github here github.com/altryne/aelios.

I will be glad comments and ideas for improvement.

P. S — big thanks to user Lockal for the spelling help.
Article based on information from habrahabr.ru

Комментарии

Отправить комментарий

Популярные сообщения из этого блога

Why I left Google Zurich

the Backstory The question I often hear from different people and now I will try to answer it. Probably for anybody not a secret, but still: how does Google? They recruit the best engineers pay them large enough (even for Switzerland) salary and create an amazing environment for work, free food, massage at the office, the phantasmagoric recreation area , childrens slide down directly into the dining room, etc. This is very cool, like to write journalists, but it doesn't matter. Well, how many times will you walk down the hall on the hill and is it important? Free food has led to the fact that the majority of Googlers fat pounds five after a job, thus denying yourself the pleasure to go to lunch every day in a new restaurant. What's more determines how good you feel at work, free food, massage, design zones, the rest or the work that you do? I'm sure that's really important what you do every day and how this activity brings joy. Google hires the b
Далее...

2000 3000 icons ready — become a sponsor! (the table of orders)

Изображение
Not so long ago on habré was top that led you to our website 17 thousand visitors for two days (11,828+5,100 on October 21, 2010). With new year 2009 this is not the first wave, and the last icons will be drawn in the first quarter of 2012. Best reseller hosting providers . Not enough more 1000 icons for best email hosting . Are you willing to offer metaphors, of which we still have not enough? Then follow me... Gebrettert from 17K inferior reddit 49k (but for four days), but still is a decent part of the order of 200k visitors who have downloaded a set. Initially I just wanted to beat set Yusuke , then not counted, and 2000 icons and there was only 16m in size. Now I just want to make the largest (and having the maximum number of unique metaphors) set of icons in the world . Well, a few minnamoro like these 2 for wordpress admin . Today drawn 2040 icon, cut 2000 more smoothly. I want to draw flags and more file type icons, but still pieces of 40
Далее...

New web-interface for statistics and listen to the calls for IP PBX Asterisk

Изображение
the Idea of writing web-interface for statistics and listen to the calls for IP PBX Asterisk is not left me for several years now. The solutions found in Internet, are not satisfied on certain criteria — somewhere lacked functionality, some of them are not pleasing to the eye. And so, armed with technology stack and riding warhorse provided by ServerClub I went. The result of my journey has become a new interface , with charts, graphs and the ability to download and listen to the calls. I will not further bore you with words, here are a couple of screenshots: And under the cut are waiting for you a video guide on the interface, necessary settings and detailed description of the available functionality. the Interface. That post didn't look like a bed sheet from the screenshots, I made a little slideshow where you can see the interface. Description. The already existing plans. Currently implemented the following functionality: Incoming calls:
Далее...