5 ms·

Show HN: Zircle UI – a circular zooming user interface library based on Vue.js

56 points by tinchox5 9y ago

tinchox5 9y ago
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! :)
guillebot2 9y ago
Great!
tpae 9y ago
I like it, but it's a bit nausea inducing for me. I'm also the type of person that feels nausea playing FPS games, shifting my focus quickly is not the right feel for me.
- tinchox5 9y ago
  Thank you for your feedback! I appreciate your comment. Maybe it is a good idea to have the possibility to set the transition speed. Thank you!
augusto7 9y ago
Awesome! Useful, intuitive and good looking!
skore 9y ago
Demos seem to suffer from a lack of "overflow: hidden". Affected classes: .z-content, .maindisc
- tinchox5 9y ago
  Good to know that! I really tried to make the transition as much smooth as I could. Your info will help me a lot to improve this aspect. Thank you
deleted 9y ago
[deleted]
soapdog 9y ago
Hey, congratulations on your work. Be aware that I am seeing lots of strange visual artifacts when testing this on Firefox Dev Edition. Basically there are scrollbars in all circles...
- tinchox5 9y ago
  Thank you for your support! You are right I have problems with the scrollbars in some ffox editions. I'll work on that!
JeanMarcS 9y ago
I've made an user interface based on spheres turning like a carrousel (using mouse wheel). When you clicked on a sphere they'll all go to the center and then the next level of navigation/menu appears. Pretty aww demo effects on the final client. Strictly no interest on a daily basis use. The company I worked with finally removed it. So my point is that, despite the fact that I really like what you did (and I do :-), reinventing navigation way is a pretty rash UX problem and must be apply in very specific places. Good work anyway and thanks for sharing
- tinchox5 9y ago
  Thank you! Pls, JeanMarcs understand that I've never thought on reinvent the navigation. I'm not feel comfortable in such position and It wasn't my goal. On the contrary, Zircle allows me to learn Javascript and meet a very interesting people. Maybe, but just maybe it is a small contribution to the ZUI. Also, I'm agree with you in to apply it to specific places. I think that Zircle may be work for building UIs for IoT, health & fitness apps, mini-dashboards, among other potencial implementations.
rtcoms 9y ago
This is really cool. Recently I was looking for zoomable ui for a complex timeline I want to implement, this may be useful for that. Here is another example of zoomable ui : https://jonikorpi.com/zoomable-ui-for-the-web https://jonikorpi.com/zoomable-ui-for-the-web How much effort will be need to make it squarish instead of circular ?
- tinchox5 9y ago
  Thank you! It is very easy to use boxes instead of circles! You only have to change the css border of some classes. Pls feel free to contribute withan issue in Github if you like! I ended with circle shapes just because a personal interest.
achikin 9y ago
I feel dizzy :)

56 points by tinchox5 9y ago

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! :)

guillebot2 9y ago

Great!

tpae 9y ago

I like it, but it's a bit nausea inducing for me. I'm also the type of person that feels nausea playing FPS games, shifting my focus quickly is not the right feel for me.

tinchox5 9y ago
Thank you for your feedback! I appreciate your comment. Maybe it is a good idea to have the possibility to set the transition speed. Thank you!

augusto7 9y ago

Awesome! Useful, intuitive and good looking!

skore 9y ago

Demos seem to suffer from a lack of "overflow: hidden". Affected classes: .z-content, .maindisc

tinchox5 9y ago
Good to know that! I really tried to make the transition as much smooth as I could. Your info will help me a lot to improve this aspect. Thank you

deleted 9y ago

[deleted]

soapdog 9y ago

Hey, congratulations on your work. Be aware that I am seeing lots of strange visual artifacts when testing this on Firefox Dev Edition. Basically there are scrollbars in all circles...

tinchox5 9y ago
Thank you for your support! You are right I have problems with the scrollbars in some ffox editions. I'll work on that!

JeanMarcS 9y ago

I've made an user interface based on spheres turning like a carrousel (using mouse wheel). When you clicked on a sphere they'll all go to the center and then the next level of navigation/menu appears. Pretty aww demo effects on the final client. Strictly no interest on a daily basis use. The company I worked with finally removed it. So my point is that, despite the fact that I really like what you did (and I do :-), reinventing navigation way is a pretty rash UX problem and must be apply in very specific places. Good work anyway and thanks for sharing

tinchox5 9y ago
Thank you! Pls, JeanMarcs understand that I've never thought on reinvent the navigation. I'm not feel comfortable in such position and It wasn't my goal. On the contrary, Zircle allows me to learn Javascript and meet a very interesting people. Maybe, but just maybe it is a small contribution to the ZUI. Also, I'm agree with you in to apply it to specific places. I think that Zircle may be work for building UIs for IoT, health & fitness apps, mini-dashboards, among other potencial implementations.

rtcoms 9y ago

This is really cool. Recently I was looking for zoomable ui for a complex timeline I want to implement, this may be useful for that. Here is another example of zoomable ui : https://jonikorpi.com/zoomable-ui-for-the-web https://jonikorpi.com/zoomable-ui-for-the-web How much effort will be need to make it squarish instead of circular ?

tinchox5 9y ago
Thank you! It is very easy to use boxes instead of circles! You only have to change the css border of some classes. Pls feel free to contribute withan issue in Github if you like! I ended with circle shapes just because a personal interest.

achikin 9y ago

I feel dizzy :)