zircleui / zircleui Goto Github PK

View Code? Open in Web Editor NEW

936.0 936.0 63.0 6.55 MB

🚀 zircle-ui is a frontend library to develop zoomable user interfaces.

Home Page: https://zircleui.github.io/docs/

License: MIT License

Vue 47.00% JavaScript 35.58% HTML 0.32% Sass 11.03% CSS 6.08%

css design experimental frontend-library html javascript ui-components uikit vue zircle-ui

zircleui's People

Contributors

Stargazers

Watchers

zircleui's Issues

how to display many circle in one page?

hi Is there anyway to display many circle in one page. I want to represent one IOT device by one circle. so I need to display a lot circle in one page

event for knob (qty)

Hi there.

I need to catch the event for knob (qty), then transfer the data to the back-end, but the documentation and tutorial do not say anything about it (only click, but it's works bad for mobile). Is this event described in zircle.ui or is it necessary to describe it yourself?

How to change the speed of the animation between the circles?

What issues can I inform?
Besides informing a bug, you can propose features, ideas, etc.

You can also open an issue if find something in the documentation is not clear enough.

How to inform?
Just try to explain what happens and what is expected to happen . Also, it would very useful to provide a way to reproduce the issue (JSFiddle, CodePen, CodeSandbox or provide a GitHub repo).

Examples Don't show up

The iframe contents for the examples are blank when I view them

https://zircleui.github.io/zircleUI/#/?id=counter

<iframe scrolling="no" title="Counter by Zircle" src="//codepen.io/zircle/embed/qpgzqz/?height=450&amp;theme-id=light&amp;default-tab=result&amp;embed-version=2" allowtransparency="true" allowfullscreen="true" style="width: 100%;" height="450" frameborder="no">See the Pen <a href='https://codepen.io/zircle/pen/qpgzqz/'>Counter by Zircle</a>
#document
<html>
<head></head>
<body></body>
</html>
</iframe>

z-list pagination indicators show all previous selected

When moving through pages in a paginated z-list, previous page indicators stay filled in when on any page beyond the first. Reproduced on Firefox Developer Edition 57.0b12 and Chrome 61.0.3163.100.

Zircle rendering at wrong position on Mobile browser

https://codepen.io/zircle/pen/ejXaNY
On Android chrome, four layer down, zircle starts dipping from center of the screen. Same example works perfectly on Web chrome. On web, the zircle dips but renders itself to the center immediately, which is not happening on Android browser. Tested on Android chrome.

visual error on FF

Hi, I'm looking at the demo page with FF developer (57.0b12), and I'm seeing errors on the circles. There are scroll bars.

I see that on the css you have overflow-y:scroll; on .z-content, don't know if it serves any purpose, but removing it looks better

Zircle and Nuxt

I am trying to get zircle working within nuxt.

I have managed to get it sort of working, but the issue is that when I navigate to the zircle, it comes up with "home not found" (home being my component).

I think this maybe has something to do with routes, but given nuxt automatically creates them, I am not sure of the best way to fix this.

Nothing is displayed when clicking on z-spot with to-view attribute just after zoom out

All disappear (big zoom out) when I click on z-spot with to-view attribute just after (less than a second) clicking outside the z-view circle in order to zoom out

I made a video to show it: video link

I tried to add a condition to verify pulse variable, the error wasn't present anymore, but the big zoom out is always present.

This bug is reproductible in all Zircle-UI projects (for example: https://codesandbox.io/s/23wlzq4l1r), on Firefox and Chrome (I haven't tried any other)

zircle 0.9.0 is coming

I'm excited to announce that the release of zircle 0.9.0 is planned for mid-August!

Almost a year after launching the first version, zircle has matured enough to be easier to use and more friendly for developers.

Along with the new version, it will published:

A new detailed and comprehensive documentation.
A detailed tutorial to know how to use some of the zircle features.
An easy-to-follow migration guide to adapt your previous zircle projects to the new version.

I'm sure you'll love it

Thanks for your support and patience,
Martin

Invert colors of z-spot in the theme

As it in the current version a z-spot shares the same forground and background colors of the theme, and they are the same as those of a z-view. In my app I want the z-spots to distinct from the z-views.
Momentarely, I have defined colors in a fixed matter in the style tag. However, when I change the theme I have to change the css definition.

What I would like to do is to invert the colors by using the var() definition in the style for both foreground and background. I looked into the code of zircle. But I am not sure which variable to use. And if that even will work, so something like that:

.inverted {
color: var(--background-color)
Background-color: var(--foreground-color)
}

Newby support request: basic js integration, how to get current time updated?

Hi enthousiastic but very green newcomer here!
I am attempting to create a home automation interface using Zircle and a Raspberry Pi 3A+.

I've followed the (excellent) documentation and tutorial, quickly stepping over any 'please familiarize yourself with JS and Vue before diving in' - messages :-D.
The tutorial worked out fine, and now I am trying to expand on it.
Because I am using the Pi, I would like to use node packages to talk to the hardware GPIO's, such as onoff and i2c-bus, so I can connect external sensor modules and buttons, etc.

As a first step towards this, I thought to try and update the Zircle UI from an external source, by using JS native Date() method, and piping that through to vue-moment to format the string.
So in my 'home` view, I've added the following:

<template>
  <z-view label="zircle demo" label-pos="top" size="xxl">
  <h1>{{ new Date() | moment("HH:MM") }}</h1>
  {{ new Date() | moment("dddd") }} <br>
  {{ new Date() | moment("D MMM YYYY") }}<br>
  <br>
  <h1>{{scene}}</h1>
    <div slot="extension">
      ... all slot definitions
    </div>
   </z-view>
</template>

And while this compiles and shows a timestamp / day of the week / date in the correct format, it never updates! I then tried JS setInterval() as an additional script in the home-view to trigger an update, but that had no result. Also the only examples I could find for calling custom methods from Zircle was in situations where a button-press triggered the event: @click.native="functionCall(arg)".

So upon diving into the VueJS documentation, I found out that only variables defined before the instantiation of the Vue object are considered for the reactivity system. So I tried creating a data object with a getTime() function in main.js, created before the Vue instance is created, and then feeding it that data, but could not get it to work.

The advanced documentation on reactivity goes a bit over my head, though, so now I'm stuck.

Do you have any pointers that might help me out here?

(I understand that this question might be more related to Vue than Zircle, but I think a solution for this might help others trying to get Zircle to work for their applications as well. Once I get this to work, I can contribute the documentation maybe?)

Thanks!

Version info (according to npm):
vue: 2.5.22
zircle: 1.2.4

Label of view inherits label from trigger -feature

In a view would it be nice to inherit the label from the z-spot that triggers the view.
eg: if the label of a z-spot is "Profile" it is evident that the view's label also becomes "Profile".

In that way redundancy is low. Of course, it still must be able that the view has its own label.

Improve resize handling

What happens
Currently, Zircle uses a window.onresize event to react to viewport changes. That is ok when you are using the app in full mode.

The problem is when you create an app in mixed mode since the events are attached to the window size, not to the z-canvas.

What is expected to happen
In both, full and mixed, the event should be attached to z-canvas.

Ideas
https://developers.google.com/web/updates/2016/10/resizeobserver

https://github.com/Akryum/vue-resize

http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/

https://stackoverflow.com/questions/25679784/how-to-detect-resize-of-any-element-in-html5

a problem when using two zircle into a deferent component with different functionality

The components overlap when the zircleis opened

first zircle

second zircle

the problem (The overlap between them)

run sample app can't show home view righ

when run simple dashboard for a smart home app(git clone https://github.com/zircleUI/tutorial.git).

the home view is too large to show. like attach image. why and how to fix it.

Zircle-ui v0.9.0 was released!!

Please check:

Params aren't catched when zoom into a new view

This bug is present in versions > 1.2.2

How to change the size of the main circle ?

Hello,
I am looking to change the size of the main circle. How can I achieve that ?

Add some z-view features in z-dialog

Right now z-dialog is pretty basic. Some users want that some features of z-view could the available on z-dialog.

Routing (vue-router) not working with zircleui?

What issues can I inform?
bug in documentation?

How to inform?
I'm new to zircleui and using the Vue ecosystem example as base for our new DTAP status monitoring webpage. Everything seems to be working fine! (Thanks for this lib!)
Only one thing I can't get working is using routing (vue-router) with zircleui.

I'm configured it according to https://zircleui.github.io/docs/guide/using-vue-router.html#for-browser-or-code-sandboxes.

With config code:
`
const routes = [
{
path: '/home', component: Home,
children: [
{ path: '/production', component: Production },
{ path: '/acceptance', component: Acceptance },
{ path: '/test', component: Test },
{ path: '/development', component: Development }
]
}
];

const router = new VueRouter({
hashbang: true,
//abstract: true,
history: true,
//mode: 'html5',
linkActiveClass: 'active',
transitionOnLoad: true,
root: '/',
//routes: routes
})

new Vue({
el: '#app',
router,
store: store,
components: {
'production': Production,
'acceptance': Acceptance,
'test': Test,
'development': Development,
'home': Home,
'resource': Resource
},
mounted() {
this.$zircle.config({
mode: 'full',
style: {
theme: 'green',
mode: 'dark'
},
router: router
});
this.$zircle.setView('home');
}
})
`

Am I missing something?

Any help would be appreciated!

Kind regards,

Henry Roeland

Stuck in creating an app according to documentation

I'm starting a project with zircle. I have followed up the steps in the "First steps" section. Created everything as described. Touched no other files. Get stuck on the import of the home view. Following error message:

ERROR Failed to compile with 1 errors 15:51:25
This dependency was not found:

/views/home.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&

Zircle css interferes with element UI styling

The Zircle.css seems to interfere with the Element UI styling . Some of the widgets get distorted. Is there anyway to restrict the styling to just the Zircle components?

Adjust the size of the components based on the size of z-canvas

Currently, Zircle uses media queries to adjust the sizes of the following components:

z-view
z-spot
z-pagination
z-dialog

This way has its limitations since zircle has a predetermined set of size according to some media queries. And it is not possible for the developer to change these values.

I believe it is better to adopt a more fluid and dev friendly approach:

Eliminate the media queries and allow the component sizes to be adjusted according to the z-canvas that is the container of the app.
Create a new set of sizes as a percentage relative to z-canvas.
Allow developers to adjust the different sizes using config().
For instance:

 $zircle.config({
      sizes: {
         xxl: 70,
         xl: 50, 
         l: 40, 
         m: 30, 
         s: 15, 
         xs: 10, 
         xxs: 5 
     }
})

how can i use zircleUI with Vue 3

i have project with vue 3 and ionic 5

how can i fix this error please

Vue version compatibility

I found an issue using Zircle with Vue versions > 2.5.13. So, I recommend to use Vue 2.5.13 until Zircle 1.0.0 is published. That is going to happen soon and it will be announced here.

The problem seems to take place when you are going back to a previous view. The z-panel that was clicked to go to the next view becomes invisible. The css display: none; is added.

Duplicate presence of slot "image" in z-view

Fix to avoid Vue warn error messages

Is it possible to know the current view at anytime?

Is there anyway to know what the current view is? I want to dynamically display other components based on what the current z-view is.

z-list-pagination is not working

When working with z-list, the z-list-pagination is not were to be found(it is hidden at the bottom of the page), Its works with 1.2.5 and 1.3.0 but not on version 1.4 and 1.5

Strange behavior when returning to Zircle component after going to another page

When I go to a page without a Zircle component and come back to the page that contains the Zircle container, Zircle is already initialized and I have some problems related to that (the previous icon is available on the side of the container)*

Video link here

Sandbox link here

You can reproduce this issue by following these steps:

Click on "Go back to zircle vue" link
Click on "devices" z-spot
Click on "Other page" z-spot Click on
Click on "Go back to zircle vue" link
Click on the side of the container, where you have the "-" icon

New version?

Hey, when could we expect a new version? I'd really love to see new features! Awesome work!

Blank Canvas on Refresh

I'm using Zircle on the mixed mode and the canvas is within a container, However, on refreshing the browser the canvas appears to be the entire viewport and the Zview disappears.

Data is destroyed while going back to preview views

I am new to Zircleui framework and I have been this framework for my project.And having this weird issue which is changing the behaviour of my app.I have three views , which I have registered in the main.js file and here's the code below .

import Vue from 'vue'
import Default from './App.vue'
import Search from './search.vue'
import Games from './games.vue'
import Zircle from 'zircle'
import 'zircle/dist/zircle.min.css'
import { log } from 'util';
import Vuex from 'vuex';
import {mapState} from 'vuex';
import store from './store';
Vue.use(Vuex);
Vue.use(Zircle);


new Vue({
  beforeMount () 
  {

    this.$zircleStore.setView('Default');

  },
 computed:mapState(['data'])
 ,
  el: '#app', store,
components:{
Default,
Search, // having problem in this View
Games
}
})

Scenario 1

Default -> Search -> Games

works fine.

Scenario 2 ( Continuation of Scenario 1 )

Games -> Search
All the data in the Search components are destroyed.
In the Search component the data is available in the Scenario 1,
but Scenario 2,the data in the Search component is destroyed (which is Weird ,not supposed to happen).
this is what happens while going from Search to Games,

check the data which is disappeared on switching,
Here's my project

How to perform a zoom transition to another view using programmatic navigation?

I used programmatic navigation by toView, but a zoom transition to another view does not work. zSpot is just displayed, but there is no effect of zooming it and the surrounding interface.

Problem when using two zircleUI (Vue-electron)

I'm using two zircle in the same project
The problem is that when I open the first and then close it and then open the other, I find the content of the first opens in the second

I am using vue-electron

[Question] Use as components

I started with the hello world example and it worked.
Now I'm trying to re-create the cuba libre example I'm using Nuxtjs setup.

I made 3 components, recipe, description and ingredients in below format (omitted the other 2).

// recipe.vue
<template>
    <z-panel view="recipe" >
        <img slot="picture" src="https://zircleui.github.io/zircleUI/examples/cubalibre/img/cubata.png" width="100%" height="100%" />
        <section slot="circles">
            <z-scale
                    color="accent"
                    :angle="-45"
                    size="large">
                <h1>Cuba Libre</h1>
            </z-scale>
            <z-scale
                    :angle="180"
                    size="medium"
                    gotoview="recipe_description">
                Mixing
              </z-scale>
            <z-scale
                    :angle="45"
                    size="small"
                    gotoview="recipe_ingredients">
                3
                <div slot="label"> ingredients </div>
            </z-scale>
        </section>
    </z-panel>
</template>

<script>
    export default {
        name: 'recipe'
    }
</script>

Then I'm initializing them as below:

// index.vue
<template>
    <z-canvas>
        <z-view-manager :list='$options.components' />
    </z-canvas>
</template>

<script>
    import Recipe from '~/components/Recipe'
    import RecipeDescription from '~/components/RecipeDescription'
    import RecipeIngredients from '~/components/RecipeIngredients'

    export default {
        components: {
            Recipe,
            RecipeDescription,
            RecipeIngredients
        },
        beforeMount () {
            this.$zircleStore.setView('recipe')
        }
    }
</script>

$.options.components has below structure:

Now I only see a bluegrey screen, see below rendered html:

<div id="z-container" class="color--black theme--dark">
	<div id="z-point">
		<section>
			<!---->
			<!---->
			<!---->
		</section>
	</div>
</div>

Is there something I'm missing here?

Zumly is now public!

Hi guys,

ZircleUI is a project that I love and allows me experimenting with both zoomable transitions and circular UIs. I've received lot of useful feedbacks about its usability and constraints and for this reason I decided to start a new approach.

I'm currently working on a new project called Zumly, which takes some ideas from Zircle UI and discards others.

The main features of Zumly will be the following:

Infinite zoom transitions.
Standalone es6 lightweight library.
No js framework dependant.
Multiple instances.
Focused on the zoomable transition engine without taking into consideration UI shapes.
Wrapped to work with the most popular js frameworks such as vue, react and svelte.

Zumly is an open source project, but will remain private until it reaches a certain degree of maturity.

In the meantime, you can be one of the first to try Zumly by joining our mailing list.

Regarding ZircleUI, its development will be paused until the circular shaped UI could be adapted to Zumly.

Best,
Martin

Apparently, the div named z-container cannot be found.

How can I resolve this?

Thanks

zircleui / zircleui Goto Github PK

zircleui's People

Contributors

Stargazers

Watchers

Forkers

zircleui's Issues

Scenario 1

Scenario 2 ( Continuation of Scenario 1 )

Recommend Projects

Recommend Topics

Recommend Org

Jobs