Hacker News Reader

Comment by tinchox5 | Hacker News Reader

Hi folks I'm presenting you Zircle UI, which is a circular zooming user interface library based on Vue.js. It took me a lot of time to develop it since I'm a diplomat not a programmer. So, I had to learn Javascript, how to use Git and a lot of tools first. Also I experimented with many concepts before achieving what I wanted. I always wanted to create a library to build apps or sites that use zoomable navigation so I build one :). I hope you like it! Thank you, Martin

View on HN

Not sure about circles as sole UI primitives, but this is a great start that could grow to support rectilinear views as well.

The big thing I would take a look at is the animation: Ease-in with a hard stop is not a pleasant motion for a zooming UI. I'd try an ease-in-out, and see if you can synchronize the scaling and the positioning so the new circle smoothly zooms into place rather than zooming offscreen and jumping into the center at the end of the animation.

Keep up the good work!

Thank you for your suggestion! Surely the eases could be improved, maybe the best is to allow to the developers to define their own ease and timing according the use.

Certainly allow it, but provide a sane default, too. If you don't, people wiill be more likely to do something stupid than they would be otherwise.

Thank you for your suggestion about using ease-in-out. I'm playing with that and it is more pleasant.

For someone who just got started, this quite impressive. Congratulations on putting it out there.

What made you pick Vue over other frameworks/libraries out there?

Thank you! That is an interesting question. I think that Vue.js was easy for me to lesrn and use it. The development of Zircle took me more than a year. At the very beginning I felt overwhelmed with the amount of js libraries so I tried to built it using vanilla js. The outcome was, to say the least, a spaghetti code. So, a friend of mine said that I should use MVM pattern to tidy up the mess. With that in mind, and having learned a bit more of JS, I found Vue.js very friendly for me.

Awesome! Good to hear that there was someone out there to help you. It can be quite daunting and overwhelming indeed.

Do you plan in utilizing these newly acquired skills in your job?

I hope so. I think diplomacy is gradually evolving and adapting to the new times. For instance, Digital Diplomacy is a branch of Public Diplomacy and is quite a new way to interact with non traditional actors. Another factor is that there are new generations of digital native diplomats.

Looks great! Check out this award-winning zooming interface from 2001 (requires flash): http://www.andyfoulds.co.uk/sites/relevare/

Maybe it can be of some inspiration!

I’ll see it! Thank you

So creative, Martin! Is this inspired by those 'futuristic' human machine interfaces in movies, such as 'Minority Report'? Was this inspired at all by small devices, like Apple Watch?

I think It was mainly inspired by prezi and impress.js. I did several presentations using prezi. But that was after I decided to build something that uses circles as the main shape in the layout. I don’t know precisely why my initial fixation with circular shapes :). Maybe the fact that I perceive that many UI libraries and frameworks tend to use square layouts. I totally agree with that because I think is the most efficient way to organize a big amount of content and it is very flexible as well. Having that in mind I thought that maybe there were enough room for another point of view. Even if this idea doesn’t fit for all cases and uses, it would fit on other scenarios. Finally the zooming navigation was a way for me to resolve the idea of using a 100% circular layout.

You're a talented designer. You should work for Apple or something. They need you! :)

Do you have diplomatic immunity?

Reply on news.ycombinator.com