Major IDE UI Updates Coming Soon - UI that will scale with your products

General
1

Electric Imp Developers:

Electric Imp has been redesigning the IDE, which was initially debuted in 2012, to support enterprise customers who manage millions of devices and to provide them with easy access to all the new advanced product- and deployment-centric features we have added and are planning to add in future updates. Today marks another milestone of the redesign: we have replaced the left-navigation menu bar with a new top-down navigation system, which is a necessary step for us to rollout more improvements down the road.

If you check out our latest IDE Beta (https://beta-ide.electricimp.com) you will see that we have moved a lot of things around to make it simpler and easier to code. The IDE UI now has a simple three-part, top-down orientation, with general options, account settings, information and assistance at the top; account-related functionality in the Tab Bar below; and model-specific code, logs and production controls in the familiar workspace area beneath.

ideug_01_00.png760×410

We have removed the model selection panel on the left-hand side. All of your models will be available via the ‘Models’ tab, which presents a list of models and relevant actions you can take. You can list your models by type — development, production, factory, inactive and so on — and order them by name, type, the number of devices assigned to them, and when they were last updated.

ideug_01_01a.png760×43

The models list, like the Tab Bar, is account-dependent. Select a shared account, for example, and the Tabs will update to present the functionality your role as a collaborator grants you. If you have access to one or more shared accounts, you continue to select one to view from the ‘account’ menu on the left-hand side of the Top Bar.

One of the model actions you can take is ‘Code’ — this presents the familiar code view. It’s here that you access the devices assigned to that model and view their logs in the usual way. That’s in addition to the Tab bar’s device search field.

ideug_04_13.png760×297

What about unassigned devices? There’s a new item in the top-most bar — it has a chip icon — which puts a list of your unassigned devices and the current active account’s assigned devices in the workspace. You can assign one or more of them to any of the models in the currently active account, whether it’s your own or a shared account.

ideug_03_08.png760×398

We’ve been using the new UI ourselves during its development and we think it will make as big a difference to your productivity as it has for us. But don’t take our word for it — try it out for yourself. We’ve made the new UI available on our public IDE Beta site and we’ll be keeping it there for a three-week period instead of the normal one-week duration. This gives you more time to fully explore the new UI and, we hope, give us your feedback.

As always, we welcome your comments, bug discoveries and thoughts, which we ask you to post in the Electric Imp Forum’s Beta channel.

Kenny Lee,
Product Manager

2

Hi Kenny,

I’ve been using the new interface for a day or so and I think it’s a big improvement. We appreciate the effort that’s going into this. I have a couple of comments.

The Devices for the selected Model are listed in the bottom left pane. It seems like a lot of real estate wasted to me, unless you have plans for some real-time status aspect to it? There used to be a dropdown immediately under the name of the select Model, plus status info. That is now gone (but the space remains unclaimed, lots of emptiness instead).

I think I may have asked about this before, but have you ever considered a 3 pane option to complement the 2 options already available? We use widescreen aspects ratios in the office. We could easily accommodate a ||| arrangement where agent, device and the log panes were in parallel columns.

Is a wrap option possible on the device log pane? It would remove the need for a horizontal scroll bar.

I seem to remember from a youtube video that macbooks are standard issue for the electric imp team. Apple stuff tends to have more of a 16:10 aspect ratio, rather than 16:9. Does the size and shape of your window influence your view on the world? :slight_smile:

3

Hi Kenny,

another comment.

I still get disconcerting warnings about my Draft being based upon a version older than then current Build. This is not the case. Yet, I do spend some time checking for differences, just to be sure. This happens when my PC is shutdown and restarted for an updated and Chrome restores the page. I can only think that it might be related to me working on IDE through two separate machines (at different times).

Regan

4

Hi coverdriven,

Thanks for your feedbacks. We’re working on a few improvements before deploying this beta version onto production, so please let us know.

The device’s “quick status” view and the “wrap-around” are good suggestions and we will look into that. The 3-pane suggestion is definitely a nice-to-have and we will have that in our backlog. We’re updating the way how we handle code, draft and versions, so you should see a much smoother flow in a couple of months.

Most of us here at Electric Imp are using Macbooks so definitely we make most of our decisions based on that, please let us know if you have any specific suggestions.

Thanks,
Kenny

5

A few suggestions from my use…

First off the, “Full screen” is pretty close to something that I’m generally happy with. Could the top bar be moved into icons in the middle of the page and the device list be collapsible so that I have the option to focus on code (and/or logs) exclusively when developing? I’m all for maximizing screen real estate! (See the first image)

The “normal” view I think also has some opportunities for providing more code/log space and reducing “vertical clutter” - see the second image for some suggestions.

Finally, for my nirvana set of feature requests, if this improved device management and code development UI could be

  • leveraged inside of a “thick client” IDE (Atom, Sublime, etc.)
  • be allowed to work with a filesystem (which the IDE’s would provide) that could also support 3rd party version control (aka Git)
  • Offer a proper build system / preprocessor / npm style dependency management and custom class integration (https://github.com/electricimp/ElectricImp-Sublime and https://github.com/electricimp/Builder are heading down the right track here)
  • Have a full blown debugger with break points, call stacks, watch expressions, etc. (which obviously requires changes in all sorts of places in the imp ecosystem) that can function via the cloud and locally via a nominated UART

you’ll have me in a very happy place to begin offering additional suggestions (such as improved blessed device management tools)!

6

Also, where did the device ID go to on the latest IDE? The agent URL is available, but device ID shown on the UI is helpful too…

7

My wish list for what it is worth:

  1. Log filter - click on device icon for example and then only shows logs originating from device, click on agent icon and then only shows logs originating from agent. Include the rest (i.e. status) in both.
  2. Some form of bookmark. Use case example. I’m editing my agent code on say line 801 but need to check on a parameter within a data table declared at beginning of code. I can ctrl on windows IDE and I’m immediately back at top (there would be an equiv shortcut for macs). If I do not make a mental note of my line number, I find that it takes awhile to find where I was again. A bookmark would solve this problem as can immediately return to where I was editing.