Comments (22)
This narrow three-column interface seems already well-suited to a small portrait viewport: break the above three columns into self-contained, (nearly) full-viewport panels.
Given this, the next decision is navigation. I see two options:
- A variant of the Android Swipe View pattern should work well here (essentially scrolling to fixed breakpoints — mobile-friendly libraries exist, rolling from scratch shouldn't be difficult).
- Automatically advance through/replace views as the sketch progresses through queued to being drawn to completed. This would only really be appropriate for users queueing one sketch at a time, though, which may be undesirable. This pattern would probably work better as an SPA.
from chromeweblab.
Looks really nice!
One thing I am worried about is that a user would lose track of where the images have gone in a tabbed view... I suppose it could be indicated with a visual flash or status number update.
What about a vertical accordion stack? Or a slide out menu tray with the sections in (then it might be quite close to your diagrams then)
from chromeweblab.
I meant to add that the reason why auto advance might not work is that there could be a queue of images being taken and being processed at the same time...
from chromeweblab.
Http://weight.awrotwist.com has a nice slide out menu (I goes out too far IMO for this project but highlights the idea)
from chromeweblab.
@PaulKinlan Indeed, not being able to queue multiple pictures was a caveat of auto-advancing. Just throwing it out there…
Aerotwist's slide-out is kind of nice. So, you envision something like this (smaller, menu selection closes tray)?
from chromeweblab.
This looks brilliant. Let's do this layout. (Sorry for the delay in replying currently on vacation this week)
from chromeweblab.
Thanks @PaulKinlan. You can assign that to me (if you're using that workflow) and I'll get right on it.
Don't worry about response times: I'm not on vacation but thus have the same problem ;)
from chromeweblab.
Finally getting this moving.
After some experimentation, I decided to go with the following maximal width
breakpoints:
> 960
Existing, since that's the existing fixed width of the desktop interface before horizontal scrolling (with existing margins). This also captures most tablets in landscape orientation, which will scroll vertically (which should be fine).
801px — 960px
Captures reduced window/device dimensions while still presenting a pleasant desktop version (largely through slightly reduced margins, widths).
800px
Nexus 7 (for example) is 800px wide in portrait mode. I figure on that and smaller we want the above mobile interface.
I'll post some screenshots when I get the last bit done. I don't mind waiting for that point for comments, unless someone sees a big problem already). Ref: My fork feature branch.
from chromeweblab.
When setting width=device-width I am not sure nexus7 (2012) comes out as 800px.
from chromeweblab.
But otherwise things genearlly seem reasonable. Look forward to seeing what is done. :)
from chromeweblab.
@PaulKinlan You might be right, I haven't done too much testing yet (just going by the spec, and using it as a rough estimate for what we might look for in terms of interface transitions).
I'll post some screenshots when I have some more to show.
from chromeweblab.
@michaelsanford awesome, looking forward to seeing them.
from chromeweblab.
Here's a simulated Nexus 4 (tested in Canary 31.0.1622.0). I have to work out a few small quirks, lint and performance profile, but here's something to look at, at least.
I wonder that the horizontal pipes are not obviously a menu disclosure trigger (particularly in this orientation). the trigger hides when in desktop mode. What do we think about increasing the button size ( New From…, View… )?
Bring out 'yer comments!
Worth reminding: currently, Safari iOS and Chrome vanilla don't support WebGL (which causes Three.js
to fail to create a context in which to do anything). So, this app is likely (currently) limited to Opera Mini, FireFox, and Chrome Android via flags.
from chromeweblab.
Awesome work.
re:three. I believe this was only ever used for the background image, to make it curve.
re:screenshots. These are look great! I would change the menu icon to be the burger menu icon people are using nowadays, and have it positioned further up on the top left. We will probably have to sort out the logo and get it moved..... I would be open to making the logo the "toggle", but I am not sure how discoverable that is.
The "new from *" buttons, we should make them full width and bump up the font size. I would also make each of the white photo holders full width too.
from chromeweblab.
Thanks for the feedback @PaulKinlan ; I'll integrate it!
I'll also have a look at mitigating Three.js
's killing Safari iOS, if it's not really necessary.
from chromeweblab.
Design
Bigger buttons everywhere, here are a few more views. Again, an emulated Nexus 4.
Webcam (Portrait)
Webcam (Landscape)
Using a file
In progress
Completed
Better menu trigger?
@PaulKinlan How about we use the mobile menu trigger Maps Android is now using (maintain brand-consistent UI)? Something like this:
from chromeweblab.
This is looking awesome.
from chromeweblab.
@michaelsanford the thing I just merged, was I supposed to merge it? I am looking at the code and I don't see anything mobile :)
from chromeweblab.
@PaulKinlan I just checked out the merge and it looks like you did get everything relevant from my leafpile (with bbab7cf and 59ad9a4):
- ChromeWebLab/Sketchbots/sw/ui/view/RobotsView.css Mods start here
- ChromeWebLab/Sketchbots/sw/ui/controller/RobotsMainController.js Mods start here
- ChromeWebLab/Sketchbots/sw/ui/view/RobotsViewStrings.js Added navigation header
- ChromeWebLab/Sketchbots/sw/ui/controller/RobotsTopicQueuesController.js Added some properties
I just cloned Google's master and it seems to be working for me:
I'd note that the width breakpoint for the stuff pictured above is 615px, so most tablets in landscape (many in portrait, too) will get the desktop-looking one with narrower margins. Easily improved, I was just eager to push something upstream so you can finally play with it.
from chromeweblab.
I might have made a schoolboy error and not updated my local copy....
from chromeweblab.
/me hangs head in shame.
@michaelsanford thanks for all this work by the way! I am going to start promoting it more!!
I will start making separate issues for things that I find now and you (if you want), me, or anyone in the community can pick them up.
For instance, I can't see a viewport meta element - we need this.
from chromeweblab.
@PaulKinlan It was a lot of fun and I'm definitely still interested in continuing my involvement.
Woops, I did neglect the viewport! I'll add it.
As a side-note, one of my primary volunteer projects is running a robotics competition for high-school students. I'm pushing to deploy one of these at the competition this year, just for fun.
from chromeweblab.
Related Issues (20)
- Document construction of Orchestra device HOT 1
- Document how to set up the LittlePrinter integration
- Specify part number for optoisolator in orchestra demo tutorial HOT 1
- Specify part number for diode in orchestra demo tutorial HOT 1
- Specify amperage of 12v power supply in orchestra demo tutorial
- Verify/fix servo references in orchestra demo tutorial HOT 1
- Provide purchasing reference for circular base
- Verify plywood thicknesses
- Fix indenting on JS HOT 1
- Make Orchestra work on mobile HOT 4
- Add pre-commit hook for grunt-jsbeautifier HOT 4
- files required that don't exist HOT 1
- Add brickset-based LEGO parts lists to all Mindstorms Sketchbot steps
- Improve timing of synchronizedMove() method
- Meta viewport for Sketchbot HOT 1
- Instantiate CanvasRenderer where WebGL is unavailable in Sketchbot. HOT 3
- Webcam Wont Turn Off HOT 1
- RobotControl.sh starting issue HOT 1
- Error when trying run robotcontrol with MindstormsNXT HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chromeweblab.