Prototyping Parallax IDE (Multiple Elements)

[jimjeffers]

[UPDATE: This discussion began as Project/File UI design but various issues pushed us to consider many other factors simultaneously. Once design of certain elements is deemed final, separate issues will be created to house each element individually]

Here are some notes from our initial discussion on file navigation:

File Navigation

Let’s create a list of common scenarios:

1. New Project (No files)
2. Minimal project (1 file)
3. Sandbox project (multiple independent files)
4. Complex project (multiple files w/ entry point)

Questions to ask ourselves:

What’s good and bad about the way we’ve done things in the past?

People are struggling with how to add updated files for a given library… They include libraries inappropriately.

The names are different on every platform.. C drive on windows.. you don’t see the drive name but you see the user folder on mac/linux (mobile). Some platforms hide the nature of the storage of the medium. You don’t know where it is.. kind of like iCloud / cloud storage.

Simplify the way we manage files (hide the storage medium) but retain the ability to create sub directories within the project.

Most of the time our projects are stored in a given folder. Some files in addition to the executable source code.

Project selection — then project directory specific file system. Have the ability to export/import source for personal backups / sharing with others.

We do have a need to allow you to open up or view files from other projects.

• Challenge: Open files from other projects — jump between projects. We can’t have multiple projects open at once like we do in common IDEs as the ChromeOS or web app will only allow one project at a time.
• Fast project switching.. how will we tackle that?
• Perhaps we move to an autosave sort of platform.
• No version control at this point.. maybe down the road. Eventually we’d like every file to have it’s own history. A little database of revisions.
• Keep in mind we may be adding version control sounds
• Simplicity with flexibility. Obfuscate any complexity from the user under the hood.
• Some people are such bad housekeepers at managing their files that they trip over things.
• With parallax we hope that we can prevent folks from making their own file system mistakes such as:
  1. Making backups of source code in whatever way that they want.
  2. Make copies of file.. Program1.txt, Program2.txt, Program2_final.txt, etc..
• The file is it’s own entity. We want the user to never feel they need to make a backup of it. Whenever you refer to the system.
• Ultimately we want to make it so that every file has a unique ID.. with an alias. The system would manage the file itself.
• Fuzzy text search for file name.
• There are no objects or classes in the current iteration but there are routines you could call.

What needs are different from the user’s of the parallax IDE?

How might we handle this design challenge on a small screen vs. a large screen?

• More automatic storage.
• removing some of the file system complexities.
• Hide the difference across platforms.
• We need to keep it familiar across platforms.
  1. Address file drawer.
  2. Project switching.
  3. Directory creation.
  4. File creation.
  5. Moving file / renaming.
  6. Deleting a file.
  7. Mobile first.

In the Future:

8. Dependency Management.

Self managed — including a library. Third party and parallax based. Can we automate this process?

Stay away from dropping zip files onto the file drawer.

Version conflicts — automatic repository system. Has to retain a database of sorts so that this file is referenced (i.e. Gemfile or Podfile)

Send examples on Cocoapods, NPM, RubyGems.

[PropGit]

@jimjeffers Follow-up from our discussion:

• I've created new screenshots of bad code (with and without error highlight) and also of alternate code (for use with a different filename). You can find it here in the Example Code folder
• I made a short Find/Replace video just so you can visualize what we have implemented.

[PropGit]

@jimjeffers I've updated the notes from discussion and the Next Design Elements.

[jimjeffers]

@PropGit Thanks!

[jimjeffers]

Debug Console (Mobile)

Interacting with the debug console while on a mobile device can be done in several ways:

1. Swiping from the bottom of the view.
2. Swiping allows you to drag the debug console to a partial view so that you can view the code and output simultaneously as you can on a desktop IDE.
3. Utilizing the ‘debug’ button from the bottom toolbar in the code view.
4. Utilizing the ‘debug’ button from the keyboard accessory view while editing.

To hide the console:

1. Swiping down from the top of screen when the debug console is in full screen.
2. Using the down arrow.
3. Using the system dismiss/back button.

Interactive Prototype:

http://share.framerjs.com/gjlygdab2r7o/

Screencast:

https://drive.google.com/file/d/0B53rXRf-3dMiRlVhN0NKUW1kblU/view?usp=sharing

( This post is documented in a centralized doc where further screencasts/interactive contnet will be documented: https://docs.google.com/document/d/1AZIVgcckDK1XsJvnb4-j_FkSNyKqPzBif2twwZN0ccg/edit?usp=sharing )

[jimjeffers]

@PropGit I've posted a quick screencast showing how XCode provides a very thorough amount of find and replace capabilities in a small UI. This is just for reference purposes:

https://drive.google.com/file/d/0B53rXRf-3dMid3BqbUVZdnNjWXc/view?usp=sharing

[jimjeffers]

Error Highlighting (Mobile)

Syntax errors change the IDE in a number of ways:

1. Upon detection (which should happen in the background at timed intervals after typing has stopped) a snack bar and a transition of the run button to an 'errors' button will occur.
2. When all errors are resolved the run button will re-appear.
3. Typing the errors button or the 'SHOW' action in the snack bar will scroll the user to the highlighted line in the IDE.
4. Tapping on the highlight in the line count margin will select the offending code and display the cause of the error temporarily in a snackbar.

Interactive Prototype:

http://share.framerjs.com/gn99syob7hps/

Screencast

https://drive.google.com/file/d/0B53rXRf-3dMiaWJ3Y0JCbFN6eUk/view?usp=sharing

( This post is documented in a centralized doc where further screencasts/interactive content will be documented: https://docs.google.com/document/d/1AZIVgcckDK1XsJvnb4-j_FkSNyKqPzBif2twwZN0ccg/edit?usp=sharing )

[jimjeffers]

@PropGit Please check out the latest update for demo on errors in the IDE. I'll be in touch soon. Hopefully one more major demo before the end of this week!

[PropGit]

@jimjeffers

Debug Console (Mobile)

Interacting with the debug console while on a mobile device can be done in several ways:

Excellent work, Jim! That exactly meets my vision of how the Debug Terminal arrives and departs from the UI. Fantastic!

[PropGit]

@jimjeffers

...quick screencast showing how XCode provides a very thorough amount of find and replace capabilities in a small UI.

Thanks Jim. They packed a lot of functionality into that small space. I like it as inspiration. We'll have a simpler and smaller interface, as you know, but I'll consider how they solved certain problems to explore how we can achieve what we need. This was very beneficial.

[PropGit]

@jimjeffers

Error Highlighting (Mobile)

Syntax errors change the IDE in a number of ways:

Wow, that looks fantastic! Even better than I envisioned; I love it! Thanks Jim! I'm excited to see the next demo too.

Also, I really appreciate how you're presenting these and the feature list and formatting in your posts regarding it. This combined with the centralized doc is perfect for us and Iced Dev in the future.

[jimjeffers]

Landscape Design Examples

I've created landscape alternates of the following mockups:

1. File Navigator
2. Code Editor
3. Debug Console

The on screen keyboard creates some important changes:

1. In the code editor, when the keyboard is present, the app will utilize Android's full screen mode if possible. This will hide the status bar and the app bar. The user will need to dismiss the keyboard or rotate their phone to regain the UI. Note this is a departure from the portrait view where the UI is ever present. We had to make this change because there is not enough screen real estate in landscape mode.
2. In the debug console the accessory view for RX / TX / Echo does not appear on top of the keyboard. Again this is an issue with screen real estate. User's will need to dismiss the keyboard or rotate their phone to regain access to those controls.

PDF Document

https://drive.google.com/file/d/0B53rXRf-3dMiOWxoTWdEM016eU0/view?usp=sharing

( This post is documented in a centralized doc where further screencasts/interactive content will be documented: https://docs.google.com/document/d/1AZIVgcckDK1XsJvnb4-j_FkSNyKqPzBif2twwZN0ccg/edit?usp=sharing )

[PropGit]

@jimjeffers - perfect decisions. Also, the static PDF-only renditions of landscape are great for getting the idea across without spending extra time for an interactive; exactly as we discussed. Thank you.

[PropGit]

@jimjeffers [Edited as per our discussion on 2/16/16]

Our Education department suggested that the Run / Error button (icon) have a third, intermediate state the represents when the app is waiting for editing to finish. So the idea is:

• Run button - when code in editor background-tokenizes successfully
• Processing button state- when code in editor is being edited by user
• Error button - when code in editor fails background-tokenization

The Processing button icon may be something like a keyboard, or a pencil, or something representing work being done, but still subtle enough to not be distracting upon transition from Run to Processing, or Error to Processing.

The Processing state would be indicated by the current button (Run or Error) being shaded, or otherwise altered slightly to indicate that something is happening. It's probably wise not to make it look disabled, because it is really still an active feature that can accept a mouse click of touch gesture to force the tokenization, and possibly download, the moment the user accesses it.

The Processing state button would appear the moment an actual edit occurs, and would stay until the moment tokenization is completely (failed or success). In the background, of course, there'd be a delay imposed to allow a certain amount of idle time (after edit) before it actually tries to tokenize again.

Can you ponder this and come up with some possible icons to use for this intermediate state?

[PropGit]

Brief Discussion 2/16/16

Debug Terminal Done.

• Add text entry to transmit pane Done.
• Make transmit pane sizable relative to the receive paneDone.

Processing State Done.

• Run/Error button shows third state as an altered version of themselves, as noted in previous post. Done.

[jimjeffers]

@PropGit I've created an updated interactive with a debounce timeout of 1 second. We can tweak this as needed but you can see the processing state in action:

http://share.framerjs.com/69o16i7r9c79/

I have also updated the design document but have not created an updated screencast for this update. If you think it's necessary I will happily do so but wasn't sure if we needed it in this minor change. Instead I added a 4th list item on the design doc page explaining the debounced processing state.

[PropGit]

@jimjeffers That's great. No need for a screencast. Please bump the timeout up to 1.5 seconds. Done.

[jimjeffers]

@PropGit Take a look at this updated version of the debug console. I have updated the google doc with this new link and have updated the description accordingly to provide some direction as to how we want the resizing to behave:

http://share.framerjs.com/z45z34ie9dn7/

[jimjeffers]

@PropGit The timing on the compilation and snackbar have been bumped up slightly. They are explicitly defined in the google doc along with this updated link:

http://share.framerjs.com/qdq54nh404fg/

[PropGit]

@jimjeffers Updated Debug Console - Resizing works great. Is it ready to accept text into the Transmit Pane? I wasn't able to type anything there.

Updated Compilation Timing - That's much better! Thank you.

[jimjeffers]

@PropGit Is it not working for you? It should allow text entry via your actual keyboard. Not by clicking on the fake on screen keyboard. I will check in Chrome. It works in Safari.

[PropGit]

@jimjeffers - I see, it does indeed work with hardware keyboard, but only when Debug Terminal is full screen.

[jimjeffers]

@PropGit Right! There was a bug. Now if you tap on the field it will launch into full screen with the virtual keyboard:

http://share.framerjs.com/4lwlryiuyq28/

The idea is you'd need to be in full screen if you actually want to transmit on mobile as you're going to be using the virtual keyboard in most cases and screen real estate is too limited. Thoughts?

[PropGit]

I see. I think that works well for mobile (phone), but may not necessarily apply to tablet and certainly not desktop. When we get back to those interactives, I'd like to explore making it take advantage of the extra screen space to allows virtual keyboard input (or hardware keyboard) even when the Debug Terminal is not full screen.

[jimjeffers]

@PropGit Agreed! I think in the case of mobile - if a hardware keyboard were detected - we could disable the transition to full screen. On tablet/desktop this won't even be a design consideration as the debug console will not usually be fullscreen, if ever.

[jimjeffers]

Find and Replace (Mobile)

On mobile we will have limited screen real estate. The interface for find and replace is built off the accessory view where the find and replace button is displayed.

1. When you tap the find and replace button in the accessory view - the accessory view will be replaced by the find and replace pane.
2. Tapping the X in the top right corner of the find and replace interface will hide the find interface and return to the normal accessory view.
3. Tapping into either field will cause the fields bottom line to change to an active color as is standard in google’s material design.
4. The find field will show a count of ‘X of TOTAL’ matches and also has two adjacent arrow buttons to jump between matches.
5. The replace field has a ‘done’ checkmark icon that activates when a match is found and a replacement string exists. Tapping the checkmark will replace the current match and jump the user to the next available match.
6. The magnifying glass icon will take the user to the next match and cycle back to the top of the document if the user has reached the final match on the page.
7. The more menu will provide a dropdown menu that will allow the user to toggle advanced search settings.

PDF Document

https://drive.google.com/file/d/0B53rXRf-3dMiemE4cjUtTjlSTE0/view?usp=sharing

Screencast

Updated UI:

https://drive.google.com/file/d/0B53rXRf-3dMiUkFNQXFvYlU4S1k/view?usp=sharing

Deprecated UI:

https://drive.google.com/file/d/0B53rXRf-3dMiUy1tbEdXMGlPbkU/view?usp=sharing

[jimjeffers]

Hey @PropGit I've updated the find and replace screencast and PDF with an updated UI that allows for more advanced functionality such as case sensitivity and partial/whole word toggles. I also replaced the next/previous button with one search button to simplify the UI given how compact the UI is.

[jimjeffers]

@PropGit The original file navigation demo will now actually adjust the code contents when you switch between projects:

http://share.framerjs.com/u87mxiqrfioa/

Also - I've added some documentation for this demo to the master document:

https://docs.google.com/document/d/1AZIVgcckDK1XsJvnb4-j_FkSNyKqPzBif2twwZN0ccg/edit?usp=sharing

[jimjeffers]

@PropGit

Import / Export Buttons

I've added the import and export buttons so that those operations can now be done at a project and file level. I've also added the functionality.

1. To import/export a project, use the options located on the project drawer.
2. To import/export a file use the contextual menu or the more menu within the IDE activity.
3. I've provided a sharing sheet to show how the work flow could continue if a user clicked on sharing. This could also be applied to the import/export workflows but we have to define how those will work in depth. At this point we've only covered how to access them.

Screencast

https://drive.google.com/file/d/0B53rXRf-3dMiLUlGNnNNaXQ4c3c/view?usp=sharing

PDF Document

https://drive.google.com/file/d/0B53rXRf-3dMiV3l6bGJnTFBBbVU/view?usp=sharing

[PropGit]

@jimjeffers

Find and Replace (Mobile)

Great start! I like all the features you display and the behavior described, especially the "x of total" indication. Below is some more feedback and ideas.

• Since Replace tends to be used much less often... I'm tempted to find a way to hide that feature until the user calls for it. Maybe there's no room for a button for that... and a gesture to expand the accessory view (to reveal Replace) may be too hidden for most people to find.
• If Replace is always visible, then there's extra room below the X to place the more (...) button, which gets the show next and replace buttons further from the X and more (...) button; avoiding accidental hits.
• The briefer, check-to-enable/uncheck-to-disable implementation is preferred for the more menu, showing "Whole Term" and "Case Sensitive" items only.
• The behavior for the Find field should be: as the user types (or edits the field contents), the "x of total" indicator should update and the editor should also update to reveal all the matches. This makes for a very active, responsive system, almost eliminating the need for a search next or search next/previous button.
  • On that note... Let's ponder - for mobile and other touch interfaces... what if there were no search next/previous buttons... but rather the user simply gestured in the editor (flick up / down) to find the previous / next occurrence?
  • They could also simply tap the occurrence to select it as the active occurrence that can be replaced if desired.
• When closing the Find/Replace feature (with the X), I think we'd want the cursor to appear immediately after the last active occurrence (if any) from the previous Find/Replace operation.
• I'd also like to see that the keyboard slides away and the accessory view slides down to the bottom of the screen either when the user gestures in the editor or touch-slides the accessory view downward, revealing more precious editor space for searching and enabling the user to get their bearing about the location of the found item in the source.

[PropGit]

@jimjeffers

The original file navigation demo will now actually adjust the code contents when you switch between projects.

Fantastic! Thanks, it works!

[PropGit]

@jimjeffers

Import / Export Buttons

I've added the import and export buttons...

Those options and your described operation look good.

• I think the icons for Import and Export need to be visually opposite each other
• I like the share sheet appearance
• [Jeff] need to still consider input button on action bar to input files into project/folder
• [Jeff] need to decide and discuss Import / Export workflow

[jimjeffers]

Thanks @PropGit I'm going to implement some revisions today and also work on the directives. If you're free we could chat tomorrow to cover all of the ground we've covered now. I think the entire list is covered except the dialogs which we'll have to do at the start of next month's iteration as we're going to run out of hours in this month pretty soon!

[jimjeffers]

@PropGit Perhaps on find and replace I will hide the navigation bar until the find and replace is dismissed. This should open up a noticeable amount of editor space.

[jimjeffers]

@PropGit I'm hesitant to perform a gesture based find and replace as just from personal experience in IDEs I'm used to scrolling the document and reviewing the highlighted areas as well as using the search button to jump to the next occurrence if I need to.

[jimjeffers]

@PropGit I'll try out a version where you have to actually toggle replace to see the full interface! I thought about it but was having trouble finding the space for the extra button that could do this. I'll brainstorm a bit more! If anything it could be on the more menu.

[jimjeffers]

@PropGit I've updated the find and replace demo:

1. Simplified the more menu to opt with the toggle solution.
2. Added an option to toggle the replace field on and off via the more menu.
3. The navigation bar is hidden when find/replace is active.
4. The navigation bar reappears if the keyboard is dismissed but find and replace is still active.

PDF Document

https://drive.google.com/file/d/0B53rXRf-3dMiTzVXZHBDZnhVMGs/view?usp=sharing

Screencast

https://drive.google.com/file/d/0B53rXRf-3dMiTm9qSTRVNkhsMEU/view?usp=sharing

[jimjeffers]

@PropGit

Directives

This is more of a brainstorming post than anything. But I'm thinking we can use a little helper icon such as a lightbulb on special lines of code where we can provide a menu of suggestions to the user. This is how intelli-j handles code suggestions and it works quite well in Android Studio. I also discuss some ideas on how we're going to handle new files on mobile. We discussed this before but it will be important to figure out how we will handle this as it will also segue quite well into the dialogs we still have to design.

Let me know your thoughts!

https://drive.google.com/file/d/0B53rXRf-3dMiX1ZOQ3ZRc1NqQnc/view?usp=sharing

[PropGit]

@jimjeffers

Perhaps... I will hide the navigation bar until the find and replace is dismissed.

Excellent idea.

I'm hesitant to perform a gesture based find and replace...

Understood. I have a suspicion a natural feeling interface can be had, but I don't know the solution and can't afford the time to dream it up right now, so we'll leave that idea on the back burner.

1. Simplified the more menu to opt with the toggle solution.

Thanks.

1. Added an option to toggle the replace field on and off via the more menu.

Oh that works great! I like it!

1. The navigation bar is hidden when find/replace is active.

Fantastic!

1. The navigation bar reappears if the keyboard is dismissed but find and replace is still active.

Ideal!

Directives - lightbulb idea

Yes! That feels much better! I prefer the lightbulb appearing only when the cursor is on the related statement line; this, for the reason you noted, that it's hard to tap the correct one if there are two that are close to each other.

I think the drop down menu should appear below the line that it relates to. This is partly so the user can still see the line they are affecting, but also because it's confusing when there are two adjacent lines that are special like this.

New File - 'X' to close

I'm glad you've brought this back up. Yes, the 'X' is a fantastic idea here. Clicking the 'X' should prompt the user to save or confirm the discard of the new file. There's a feature we are used to having in our legacy editors where no files actually need to be saved before actually using them in a compiled project. This feature covers the case if we don't choose to implement that (which it isn't implemented yet), so it's something we may choose to replace in the future.

[PropGit]

Dialog Design

Here is a list of dialogs and screenshots from our current dialog designs where they already exist.

• Save

  • The save dialog normally isn't seen but appears automatically in certain cases
  • Case 1: A user-selected Save operation displays the dialog when the file has never been saved before (ie: it's a new file)

  • Our goal is to make the existing dialog (below) use a different title, "Enter a name for this new file." and also change the "Save As" button to a "Save" button.

    

  • Case 2: If the user tries to navigate away from a new file, another slightly-modified dialog appears that includes a "Don't Save" option.

  • Goal: to make the existing dialog (below) use a button called "Save" instead of "Save As"

    

• Save As
  • Goal: change the existing dialog (below) to have a title "Choose a name to save this file as."

• Delete

  

• Identify / Download
  • Identify and Download are combined into one dialog in Parallax IDE.
  • Goal: We need to enhance it a bit to distinguish the displayed functions, as discussed verbally.
  • Goal: Would like the "Please choose..." message to appear at the bottom, only when the context is right (which is after scan is complete in cases where it can not automatically determine which module to download to).
  • Goal: Make the dialog more compact, and auto expand/contract if there are more/less ports to display.
  • Case 1: [Identifying] Just opened... scanning ports
  • Case 2: [Identifying] Found two ports, but no devices found. Status message for this case is too long; would like a more vertically compact dialog. Status is really an error message, it is blank when all is well.
  • Case 3: [Identifying] Found one BS2p module on COM17
  • Case 4: [Identifying] {Not Pictured} Found two or more modules of same or different types.
  • Case 5: [Downloading] Found two ports, one BS2p, and downloads to it (very fast). This is best shown as a video, below. Dialog Video
• Change to / Create Project
• Import
• Export
• Share?
• Missing Directive

[jimjeffers]

Find / Replace

• Add mockup with nav bar visible when keyboard dismissed if not there already.

Lightbulb

• Menu should appear just below the line.
• If directive is missing show an auto-inserted error on the top of the file. App will not compile and they can choose the right directive.

Import/Export

• Use the same icon flip/flopped.

[jimjeffers]

Thanks for the dialog info @PropGit

[jimjeffers]

Hey @PropGit! Sorry I have gone missing since we last chatted. I had come down with a pretty bad cough / cold and fell behind schedule this month. I still have a bit of this irking itch in my throat which I hope is not too distracting in the screencasts. I tried to edit out the coughing where I could! First off. I wanted to touch on the general house keeping revisions we discussed per our last call. I'll make sure these updates make it into their associated PDF's that I already have linked to in the documentation.

This screencast covers revisions to:

• Import/Export icons.
• Suggestion menu (lightbulb menu)
• Missing directives
• Find / Replace without the keyboard

Take a look when you can:

https://drive.google.com/a/sumocreations.com/file/d/0B53rXRf-3dMiMzRNQjhaWXhVR3M/view

[jimjeffers]

@PropGit Get ready for a mobile dialogs marathon:

In this screencast I run through pretty much every dialog box that we will likely plan on implementing in the initial version of the editor. The only exclusions and the areas we need to have discussions will center around how we want to approach 'help' and 'settings'.

Screencast:

https://drive.google.com/a/sumocreations.com/file/d/0B53rXRf-3dMia0d1U0ZiQm13QXc/view

PDF:

https://drive.google.com/open?id=0B53rXRf-3dMiN2RGdU5OV1BPQ1U

[PropGit]

@jimjeffers - I've reviewed the screencasts.

• Missing directives

Excellent! Looks better than I imagined and very clearly defines the problem to the user. I like your idea of adding the message in the code font that looks and acts like a hyperlink.

• Suggestion menu (lightbulb menu)

The lightbulb is perfect. To verify, I do like having the menu drop below the line that it applies to; that works great.

• Find / Replace without the keyboard

That looks great without the keyboard. Thanks for showing that.

• Import/Export icons.

That's a good attempt, but it still doesn't strike me the way I was hoping. The fact that there's two arrows in both cases is the point of confusion. I've got an idea! Take a look at the share icon; it's a dot (representing a project/file/place that connects out to two other dots (places) via lines to represent sharing one thing to possibly multiple others. How about we use that concept and take make two dots and the line going between them (angled from top-left to bottom-right) and make the line an arrow facing the bottom dot. That's "import." Then the export is that same icon rotated counter-clockwise so it goes from lower-left to upper-right. The point is, in each case, the bottom dot is the "place of concern" where the external item is being imported to, or exported from. Let's talk in our meeting about this.

• Dialogs

I think you're hitting the target well.

Navigating Away from a New Unsaved File

Excellent!

• Please change the message to, "You will lose the code you've just written if you do not save it now."
• Please add a Cancel button too (that simply closes the dialog and cancels the navigation that led to it)

Scanning

Fantastic simplification.

• I like the progress bars
• As discussed, we'd like to show port (in result) in small text under the device/response text to allow for long port names
• I can envision an animation from the moment of selection of a port to the downloading dialog

Move

• As discussed, need an indication of the project we're showing
• item for "other" that causes it to show the project list for the user to select from and navigate down to the desired subfolder

Import/Export

As discussed, this it to get projects or files into/out-of the applications storage area

[jimjeffers]

@PropGit The PDF for the dialogs has been updated with:

• New import/export icons
• Updated move work flow that allows you to move file to another project.
• Updated import/export workflow which uses a share sheet with less options to export file/folder to google drive etc.. an example (imported screenshot from the google drive SDK) to illustrate how the user would select a file from their google drive.

The updated link is here: https://drive.google.com/open?id=0B53rXRf-3dMiN2RGdU5OV1BPQ1U

[jimjeffers]

@PropGit Also I made some updates to the identify dialogs so that they show longer device names, the current port getting scanned, and longer custom names that are truncated.

[phated]

I have a feeling all the dialogs with textboxes in them are going to be a nightmare to develop since web applications don't have access to height of the keyboard, etc. Are they really best as dialogs?

[jimjeffers]

@phated We can display them as full screen modal views if that is the case.