What's wrong with this camera GUI for newbies?

Discussion in 'Chit-Chat' started by computemike, Jun 20, 2018.

Share This Page

  1. computemike

    computemike n3wb

    May 1, 2018
    Likes Received:
    newbieGUI is a mock-up of a surveillance system GUI for newbies, discussed below and downloadable atnewbieGUI.zipif you would like to test it (thoroughly commented source code is also included).

    Please offer your criticisms of the design decisions described here, especially concerning anything you don't like, or you think should be changed, or you think is missing, in particular if you can compare it to whatever existing system you're currently using.

    This mock-up was created because recently I had to configure a camera system for someone who is not especially adept with computers. Hikvision iVMS-4200, D-Link Dviewcam, iSpy, and Blue Iris were all tried, but all had a surprising number of confusing and awkward aspects in their design, configuring, and documentation, especially for first-time users. The iVMS observations were forwarded to Hikvision and posted here at ipcamtalk, and similar critiques were sent to the other vendors.

    It occurred to me there must be a lot of people who need surveillance software that's easy to understand, configure, and operate. Because existing video management systems want or need to include everything but the kitchen sink, their GUI designs just don't seem straightforward enough nor intuitive to me. They are very modal, complicated, inconsistent, and confusing for first-time users. I think there's a need for a simplified system that's more user-friendly, yet still flexible and capable of meeting most user requirements.

    With that in mind, I attempted to design a GUI that would be as simple as possible, yet give most users most of what they need, in an easy-to-understand and obvious fashion, with a minimum of dialogs or modes, no confusing features or controls, and let the operator do everything they need with a minimum of clicks.

    The initial newbieGUI display consists of a small main window (on the left) with a sorted list of the devices discovered on the network and a few buttons below that device list, plus a stack of camera view windows, one for each device, on the right.

    The total census of windows is always just the main window and one window for each device. Unlike an MDI-style GUI that forces everything into a parent frame, newbieGUI only uses floating non-modal windows that can be activated, dragged, and resized anywhere at any time by the user. If a device name is clicked in the master list, or if a device's view window is clicked, that window then shows a translucent toolbar of icons for all the common and desired operations for that device.

    The toolbar is intended to provide every category of function most users could want for most devices, without having to find hidden things via contrivances like right-click pop-up menus or tabbed panels. The intention is to allow reaching any function with as few clicks, dialogs, or restrictions as possible. From left to right, the toolbar icons are:

    - A gear, for configuring the device and its view in more detail.
    - A compass rose, to change from the default dragging cursor to the pointing cursors.
    - A magnifying glass, for zooming the view.
    - A camera, for taking pictures.
    - A video recorder, for starting/stopping recording.
    - An expand/shrink icon, for toggling the view full-screen.
    - A receiver, for toggling audio in.
    - A microphone, for toggling audio out.
    - A large X, to close the device window.

    Large icons are used in the toolbar so it's easy to discern them when using far-away wall-mounted displays. The toolbar is translucent to avoid hiding the view as much as possible. After 10 seconds of no operator activity, the toolbar is automatically hidden, so the view is no longer blocked at all (and having to consider putting the toolbar in other positions to block a different portion of the view becomes moot). Any subsequent movement of the mouse makes the toolbar immediately re-appear.

    Clicking on the gear icon widens the device window to show all the remaining controls that can be used on that device.

    The device name can be edited at any time, and the name also immediately changes in the device title bar and in the device list in the main window.

    The sliders for audio in/out should be self-explanatory. Naturally, those controls should only appear if those hardware features are actually built into the device.

    I don't have enough experience yet with motion-trigged recording to know what recording options would typically be desired, so a simple checkbox for turning motion detection on or off is currently provided. Hopefully a default configuration would satisfy most users and they wouldn't have to specify more detail. If you've found there are certain motion detection schemes or configurations or options you find important (for beginning users), please let me know.

    The "Other device settings..." button (which doesn't actually do anything yet) breaks the rule that options should be immediately accessible and not buried somewhere. It's mostly just a placeholder acting as a reminder that there may be additional options most users might request and therefore need to be somewhere on the panel of controls.

    The "Delete this device" button should be self-explanatory.

    The "Bring device list to front" button brings the main window containing the device list front and center, which is useful when that window gets buried per the tiling discussion below.

    The column of black icons allows the user to pick and choose which icons appear in the toolbar, on a per-device basis, since not all devices will have things like PTZ or audio, and since certain views might never be recorded, and for similar device-dependent reasons. Nowadays, GUI toolbars usually allow repositioning, reordering, and other customization via right-clicks, but it's not always obvious how to make those changes when just looking at a toolbar. This explicit list of the black icons seems a more obvious way to let users configure the toolbar. Currently newbieGUI starts every device showing every icon, while a more intelligent version that polled devices for their capabilities would only initialize a view with icons for features that actually exist.

    The drop-down list allows four different icon sizes to be chosen, since screen size and viewing distance can make a big difference to how useful a given icon size is. (Phones, tablets, laptops, desktops, 4k displays, video walls, and so on all have different requirements when it comes to screen readability.) Only the currently displayed icon size is actually implemented in newbieGUI, because I haven't yet done the grunt work of creating the icons in other sizes.

    When the gear icon is clicked to open the panel of device controls, the whole device window is moved and expanded as necessary to show all the controls. For example, if the window is hugging the right screen edge before fully opening, the expanded window will move left after clicking the gear icon to reveal the entire open window. It was originally planned to restore the window to its previous position when the gear icon is re-clicked to hide the controls and go back to showing only the camera view, but that idea was abandoned because the jump seemed somewhat of an unexpected surprise and because the window could also already have been manually moved again after initially being expanded. So the window stays in its current position after a gear re-click to hide controls. However, some users may prefer the restore-to-previous scheme, especially when all views are tiled.

    The white icons in the toolbar turn green while active. That means newbieGUI is not yet a color-blind-friendly GUI. When hovered over, all of the icons display hints. One disadvantage of the hints are that they currently are always the standard small size.

    The second toolbar icon cycles between available cursors to indicate one of the three ways to move a camera: dragging the displayed view with a hand cursor, or pointing in the direction the camera should move with compass cursors, or targeting a specific point the camera should center in the view with a reticle cursor. Currently newbieGUI starts out with a grabbing hand cursor for dragging, since dragging is a popular way to move around things like maps when using web browsers. I have no idea which camera move technique most people would prefer, but since newbieGUI remembers its configuration as described below, users can leave the toolbar icon set for whatever cursor they wish. (Actually, the toolbar indicates the NEXT cusor mode that can be chosen, since clicking the icon toolbar changes to that cursor.) If the cursor being used is the dragging hand, the toolbar indicates compass cursors can be chosen next. If the cursor is a compass point, the toolbar indicates the reticle cursor can be chosen next. If the cursor is the reticle, the toolbar shows the hand icon.

    When using compass cursors for camera movement, a circular cursor appears when near the center of the view, and clicking reports a continuous pan has been started or stopped. If you have a better idea of what a PTZ cursor should do when in the middle of a view, let me know.

    Clicking the magnifying glass icon pops up a slider for zooming the camera. Perhaps showing the slider without waiting for a click would be better, but then that icon would be an exception to requiring a click like the other icons do.

    The camera icon for taking a picture plays the camera.wav file shutter sound.

    The recording icon, expand/shrink icon, and audio in/out icons should be self-explanatory when used.

    The big X icon closes the view window. Clicking on the device name in the list of devices in the main window re-opens the view window for the device. The main window listing all devices is always open and can't be closed.

    The "Add undetected device..." button in the main window displays a login dialog. Any device name can be used, even a duplicate name (after the user is warned), but the IP address must be unique. Any number of devices can be added. After newbieGUI has improved enough to be capable of talking to real hardware, the same login dialog would probably have to be displayed the first time newbieGUI is run, to allow initial device discovery. newbieGUI currently pretends to discover five cameras the first time it starts up so there's no delay in getting the demo going. (Only five fake views are currently included in the program, and those pictures get re-used as more devices are added. Since they're static jpegs, PTZ doesn't actually change the view in the current mock-up, and newbieGUI simply adds a message to the view's title bar to announce the result for any requested camera movement.)

    The dialog for adding a device is currently modal, but could be modeless. For some reason, being modal just feels more appropriate.

    The "Tile windows..." button is probably newbieGUI's most interesting feature. Most surveillance systems offer a selection of canned tiling layouts and/or a way to do custom layouts. The canned layouts never seem complete. For example, layouts often don't include five or seven cameras, and here are four of the many possible different layouts for six cameras all of which will rarely be included in any list of layout choices:

    +-+-+ +-+-+-+ +---+-+ +---+---+
    | | | | | | | | | | | | |
    +-+-+ +-+-+-+ | +-+ +-+-+-+-+
    | | | | | | | | | | | | | | |
    +-+-+ +-+-+-+ +-+-+-+ +-+-+-+-+
    | | | | | | |
    +-+-+ +-+-+-+

    In addition, the techniques for creating a custom layout are often limiting or awkward to use. For those reasons, I decided to only include the option to let newbieGUI automatically create a tiled layout, as follows: first, the user drags however many views are wanted to the views' desired approximate positions and sizes (this step is not actually required, since newbieGUI will try to find a tiling solution regardless of where the views are initially positioned, sized, or overlapped). Then, when the "Tile windows..." button is clicked, the display is tiled by first automatically moving all views as necessary so they are completely on the display, then sliding the views as necessary to minimize all overlaps, then shrinking the views as necessary until as many overlaps as possible are removed, then expanding each view until they are flush with their nearest neighbors, filling the screen.

    Watching newbieGUI tile the views is entertaining and almost hypnotic. I invite you to try tiling, with as many device views as you wish to create. It's possible to create tilings that end up with a hole, but shrinking one side of any one view adjacent to the hole and clicking "Tile windows..." again is usually a quick fix. Since users probably develop a preferred tiling layout and then rarely change it, I think providing more tiling options would just be an unnecessary complication.

    Unlike most other surveillance systems, newbieGUI device windows always retain their title bars and edges for dragging, even when tiled. Originally the plan was to suppress edges when views tiled or went full-screen, but I came to prefer leaving them visible. Edges don't take much screen space, they avoid having to provide an un-do tiling feature, and come in handy for tweaking tilings.

    After tiling or making a view full-screen, a view can easily end up overlapping and hiding the main window that shows the list of all devices. That's why the "Bring device list to front" button is included in the panel of controls in any view. That means the main window can always be found at any time by clicking any view's always-present gear icon to open the panel of controls, then clicking "Bring device list to front".

    The "Find saved picture or video..." button uses a standard system dialog to select a picture or video file and then open the file with ShellExecute(). Most systems seem to segregate pictures from videos, but I think once newbieGUI actually creates those files it would be more convenient to keep them all in one place.

    When newbieGUI starts, it looks for a newbieGUI.config file to automatically restore the previously used configuration of devices, windows, and control settings. Originally "Save current configuration" prompted for where to save a .config file and what to name it, and there was also a "Get saved configuration..." button to find and open .config files to restore a previously saved configuration, but that seemed to unnecessarily clutter the main window. Instead, I've since decided to keep it less complicated: the .config file is simply updated when "Quit newbieGUI" or "Save current configuration" is clicked. ("Remember" might be a better word to use instead of "Save".) I'm guessing most users will find this less complicated approach completely adequate, plus .config files can still be managed (moved, renamed, replaced, or deleted) as desired on the desktop.

    The status bar at the bottom of the main window was included mostly to provide the textured corner to make it more obvious the window can be resized vertically, for viewing long device lists. Currently the only message that appears in the status bar arrives after "Save current configuration" is used.

    newbieGUI uses a rather old visual component library, so buttons, icons, and whatnot have an old-school feel. Components with a slicker and more modern design could easily be used instead, but that's just a cosmetic issue. The point of newbieGUI is when, where, why, and how controls are presented to the operator to make a simple and friendly yet useful system, regardless of the skins those controls happen to use.

    Because newbieGUI's current library didn't include a control with the desired translucent style or button style for the icon toolbar, much of the source code deals with implementing the toolbar from scratch. Using a newer graphics library that already has the desired toolbar would simplify many of newbieGUI's internal routines.

    Originally the main window device list was planned to have a number of columns detailing all kinds of status and data for each device, but that idea seemed to add unnecessary visual confusion and was abandoned.

    Note that there are no tab controls, no pop-up menus, minimal windows/dialogs/modalness, and the only scroll bar appears when the full device list can't be displayed because the main window hasn't been dragged to be big enough. Keeping the GUI as simple as possible helps keep it straightforward and intuitive, especially for new users.

    Showing performance data like frames per second and bits per second was also considered, both for individual devices (either in the device list or in each device's individual window) and for network totals (shown under the device list), but once again that idea was abandoned because it seemed to add unnecessary visual distractions, especially for novice users.

    Three toolbar icons under consideration but not yet implemented are "unlock door", "digital zoom" (which instead of being a separate control might be a variation or toggle of the optical zoom magnifying glass icon), and something for dealing with preset camera location lists. It's not clear how popular or in-demand those features would be with most users.

    The version number in the main window title bar is actually the build number, and bumps each time newbieGUI is compiled.

    The next step in the development of newbieGUI would be to support actual devices via ONVIF, perhaps using something like the Ozeki camera SDK. If you wish to attempt or be involved in any project using newbieGUI, please let me know. Hopefully newbieGUI will grow into a real working system, and/or the spirit of the design can be retained even when used for more complicated systems. For example, a system with multiple users that tracks multiple accounts, has locking and access control features, or any number of other extensions, might still be able to keep the design as simple and straightforward as possible, as intended by the original newbieGUI design. Or perhaps an existing but complicated open source system like iSpy might be forked to create a simpler entry-level version inspired by newbieGUI concepts.

    Thank you for your attention, and thanks in advance for any comments you submit.