-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Mobile-friendly UI #12
Comments
I could see dropping the realtime temp graph (or making it optional) to condense things, especially on mobile. It's neat and helpful when things are funky but generally speaking it seems like a lot of traffic and screen for something I'm hoping my electronics is handling on its own. |
Crap, i did not intend to push that button - i'm still new to github. |
Yeah I'm surprised that button doesn't have confirmation (although I guess it's reversible so...?). I think only the repo owner can set the tags, at least that's how it appears (I can tag in my own repos but not this one). |
A mobile friendly single-column layout would be a godsend! There may be too many tabs for a wide tab-bar at the top like that, here are- a couple of alternatives: switch using a drop-down chooser; or just make the current tab title prominent and allow swiping left and right to switch between them; or have a separate tab chooser view and from within a tab either swipe left or have a "menu" button return you to the tab chooser page. |
If I'm not entirely mistaken, @daprice is already working on something. |
Yep, working on using Bootstrap's responsive features to make it condense into a single column on smaller screens. https://github.com/daprice/OctoPrint/tree/responsive Not totally sure what I'm going to do about the tabs yet. Currently they just wrap to the next line; they work, but don't look good. I may just switch them to Bootstrap's "pill" style when they don't fit on one line. |
Ok, I have my responsive layout branch at a usable state for the most part. I'm using it with my iPhone and it's a huge improvement over having to zoom in on the main layout. It might be good if people could also test on Android or other devices, although I'm not aware of anything that could cause problems there. @foosel, let me know if you think it's ready for a pull request. Areas that could still be improved (of course, I would welcome any ideas or implementations):
|
Just chiming in to say that I haven't yet come around to taking a look at this due to this bloody flu I've managed to catch myself. While I'm at least able again to use a computer and do some minor stuff, it might still take a while until I'll manage to properly review your branch. Sorry for the hangup and thanks for your patience. |
I gave this a quick try and it looks very promising. Currently on the mobile it is essentially one tall single column - it'd be nice if there was a quick way to jump between the sections. Also, when viewing on a regular web browser, the spanner function in the "Files" section isn't working for me. |
Another option would be for OctoPrint to expose a small API. As an iOS developer I'd rather build a native app instead of loading a condensed version of OctoPrint in a webview. @foosel what do you think? |
@nicolinux I've actually thought about exposing the API that is currently in use for the frontend. OctoPrint recently got an API Key setting and a couple of methods that already use this for authorizing access, I'm just still undecided on whether to establish a secondary API next to the one used for AJAX right now (that would have the advantage to allow me quicker extension/changes in case of new UI features, without having to take care of backwards compatibility) or just document the existing one and just enhance this with some additional resources that go beyond what the UI does right now (e.g. the currently available upload/select/load API), that would have the advantage of me eating my own dogfood ;) and not having to do everything twice. Decisions, decisions, ... |
Hm, tough choice. I'd favor the one API solution. On the up-side it will remind you to keep things simple and not add too many features :) |
I am currently working on a web app which does just this, is not an ios Ill post the code soon On Thursday, July 4, 2013, Sorin Stefan Nicolin wrote:
"Be like water making its way through cracks. Do not be assertive, but Empty your mind, be formless. Shapeless, like water. If you put water into
|
Just leaving my two-cents, I love that I can start and view prints through my mobile browser. This absolutely rocks! A feature I would like to see, and I think this is more iOS than OctoPrint, is to select a gcode file from dropbox to upload. Currently, when this button is clicked on an iPhone browser, the only option is to upload from the camera roll. |
@daprice: I haven't seen your solution yet [UPDATE: i have checked it, i like the 'responsive'], but peter told me today about the responsive branche... I was also doing some layout tests/sketches which should be better for mobile devices. I think also that there is a difference between 'operating' and 'monitoring' the 3D printer. For operation Octoprint works good, i think for monitoring there is too much information you don't -really- need.
I did make some sketches once 5 months ago with the jquery mobiles stuff. For most things it would be nice to use sliders AND an input field. Unfortunately i cannot get the sliders [http://www.eyecon.ro/bootstrap-slider/] up and running [i am product designer, not a developer] otherwise i could have shared some thing already somehow. Furthermore i changed everything to accordion areas to show everything below each other. In the title of the 'main' accordion changed the original title to 'filename' - 'temp' - '%' since that are maybe the most important things you want to know. please let me know what you think...! cheers\joris |
I think someone needs to make a mockup of the whole interface, describing how interfaces should look hardly ever works out. Tip; if you you're not fluent in Photoshop, Illustrator etc, try Excel or even paper. |
Another problem I have running on mobile, is it uses lots of cpu and battery. I am not sure why but at least on firefox, it seems to keep updating in the background, and unless I close tab, kills my battery. |
I may start working on an iOS version. Would anybody be interested? |
Hi, I am interested but sadly I don't have that much time for it. But maybe I can help out. |
My 2 cents here, for mobile I don't need the full robust UI, I really want it mainly for checking status from phone remotely but more likely I want to use this as a diagnostics tool/remote control when working at the printer. To explain. When I'm physically standing in front of the printer I want a way to easily move the print head around, extrude filament, home, calibrate and pause/cancel a print. So I really just need big simple buttons, on my touch screen device, kind of like a TV remote control I can see from others comments we're on the same lines here, I'm considering just writing my own page with big dumb buttons and a small status window by use of API calls. However can I actually move the head, start/stop etc using API? AKA passthrough gcode via API. |
I see there's a REST API for the print server now, and I was thinking it'd be a nice to have a minimal touch-screen interface for one of those 800x480 touch screens for Raspi going around (Like this one I just ordered). I doubt I'll do my slicing on the raspberry pi anyway, so all it's really doing is receiving files and printing them. All I really want is basic printer control, file selection, print starting, and an emergency stop. Then I thought maybe this would look good with a Star Trek themed interface. Here's my first mockup of a UI. I already know I'll want to fit more UI in there. Maybe the busy style patch in the top mid could switch between views, or maybe selecting a file hides the file selector view to make space for extrusion and speed control. |
Hey guys. That way I can open the app and not worry about my daughter coming over climbing up and accidently hitting the turn off motors button. I can help I guess too. I can do the iOS app if there is an sdk example like others have mentioned. Thoughts? |
I've also just started work on a web app as an OctoPrint front end. https://github.com/quillford/OctoControl |
If you've come here looking for a mobile web UI, you might want to try the TouchUI plugin from @BillyBlaze http://plugins.octoprint.org/plugins/touchui/ |
Awesome, nice work!
|
Ya thats pretty great. I'm excited to check it out. |
Also I would love an LCARS UI for this!!!. I have a spare 7" touch screen that I could connect to the pi and totally would if it was LCARS. Let me know if you proceed with this. |
Oh I will. First I'll have to get my own touch screen..
|
With the TouchUI plugin there's definitely a solution for that now, so I'm closing this. Big kudos to @BillyBlaze! |
If anyone needs a different iOS optimised UI ... https://github.com/MoonshineSG/OctoPrint-Mobile |
While the current UI functionally works perfectly on smartphones, it requires frequent zooming and panning (or holding the phone in landscape) to do stuff. An interface with a single column layout and larger buttons would be more suitable for a portrait smartphone.
Lowest priority for me.
The text was updated successfully, but these errors were encountered: