Solutions for making different sized screens work together

rupl / bustashape

Collaborative, real-time artboards

https://bustashape.art

MIT License

5 stars 3 forks source link

Solutions for making different sized screens work together #24

Closed rupl closed 8 years ago

rupl commented 8 years ago

Phones always crowd the top left corner of the screen. These are quick solutions until a better zooming/panning mechanism is implemented.

Assign a random set of coords to a phone that logs in based on biggest screen available. Pros are that this is quick and simple, cons are that it potentially limits interaction between two phone users
Redo canvas in vw/vh. Pros are that all screens will see everything, cons are that it will look different on differently shaped screens and limit interactivity on smaller screens (i.e. a big tablet can create unusably small shapes on a smaller phone screen)

afragon commented 8 years ago

What about just always moving the origo to the center of the screen? combined with zoom in/out function.

rupl commented 8 years ago

brilliant! can't think of a problem with that off the top of my head. I'll try it out sometime soon.

On Sunday, 6 December 2015, Afra Noubarzadeh, Afragon < notifications@github.com> wrote:

What about just always moving the origo to the center of the screen? combined with zoom in/out function.

— Reply to this email directly or view it on GitHub https://github.com/rupl/bustashape/issues/24#issuecomment-162317494.

rupl commented 8 years ago

I gave this a try and it basically just crowds the middle instead of the corner. I think the zooming feature is really the only solution. Unfortunately it's not a quickie, but still possible with #21

rupl commented 8 years ago

I have started messing with two.js and I believe that I can make zooming work unless someone makes a shape extremely large (e.g. to use as a background color)

I'll try this for short term and maybe long term we can figure out how to switch between a "shape" mode and "zooming" mode.. even when I say it I don't like the complexity, but I'll think about it and keep playing with two.js

rupl commented 8 years ago

I got this working tonight and also settled on a better UI convention than shape/zoom mode: a simple escape button. If someone zoom/pans way off into infinity, we can have a button to bring them back to where everyone else is.

rupl commented 8 years ago

This PR fixes #4

rupl commented 8 years ago

yo @afragon we can now test PRs in sandboxes! Anytime it says that the app was deployed you can click through and see how the site would behave if we merge this PR.

Here's a sandbox with the zoom/pan stuff. Does it work for you? I still only have iPhone/MacBook to test on so any quirks with Android would be good to know about.

The only problem I'm aware of currently: I still have a little bit of math to work out when moving shapes after panning the canvas. The bug shows up if you zoom and pan a bit, then move a shape. The shape will unexpectedly jump from its initial position each time you touch it.

rupl commented 8 years ago

Ok, I think I have the math sorted! Any bugs you find are news to me. So please let me know if anything seems weird when you test.

rupl commented 8 years ago

I still have a little bit of math to work out

argh, days of hacking at this and I still can't nail it... this problem makes me really regret not paying attention in precalc :frowning:

rupl commented 8 years ago

ok! this isn't perfect, but it does work 95% the way I imagined in the beginning. There's some jittery action on some phones, but in the interest of shipping I'm calling this done for now!