4 ms·

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 d

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

maxxs 9y ago
Looks nice! I'll try it.
photonios 9y ago
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?
- tinchox5 9y ago
  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.
  - photonios 9y ago
    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?
    - tinchox5 9y ago
      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.
web64 9y ago
Looks great! Check out this award-winning zooming interface from 2001 (requires flash): http://www.andyfoulds.co.uk/sites/relevare/ http://www.andyfoulds.co.uk/sites/relevare/ Maybe it can be of some inspiration!
- tinchox5 9y ago
  I’ll see it! Thank you
mortenjorck 9y ago
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!
- tinchox5 9y ago
  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.
  - Seylerius 9y ago
    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.
    - tinchox5 9y ago
      Thank you for your suggestion about using ease-in-out. I'm playing with that and it is more pleasant.
amigoingtodie 9y ago
Do you have diplomatic immunity?
- tinchox5 9y ago
  :)
projectant 9y ago
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?
- tinchox5 9y ago
  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.
  - projectant 9y ago
    You're a talented designer. You should work for Apple or something. They need you! :)

maxxs 9y ago

Looks nice! I'll try it.

photonios 9y ago

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?

tinchox5 9y ago
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.
- photonios 9y ago
  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?
  - tinchox5 9y ago
    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.

web64 9y ago

Looks great! Check out this award-winning zooming interface from 2001 (requires flash): http://www.andyfoulds.co.uk/sites/relevare/ http://www.andyfoulds.co.uk/sites/relevare/ Maybe it can be of some inspiration!

tinchox5 9y ago
I’ll see it! Thank you

mortenjorck 9y ago

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!

tinchox5 9y ago
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.
- Seylerius 9y ago
  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.
  - tinchox5 9y ago
    Thank you for your suggestion about using ease-in-out. I'm playing with that and it is more pleasant.

amigoingtodie 9y ago

Do you have diplomatic immunity?

tinchox5 9y ago
:)

projectant 9y ago

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?

tinchox5 9y ago
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.
- projectant 9y ago
  You're a talented designer. You should work for Apple or something. They need you! :)