{"action":"created","issue":{"url":"https://api.github.com/repos/openmicroscopy/design/issues/32","repository_url":"https://api.github.com/repos/openmicroscopy/design","labels_url":"https://api.github.com/repos/openmicroscopy/design/issues/32/labels{/name}","comments_url":"https://api.github.com/repos/openmicroscopy/design/issues/32/comments","events_url":"https://api.github.com/repos/openmicroscopy/design/issues/32/events","html_url":"https://github.com/openmicroscopy/design/issues/32","id":146930637,"number":32,"title":"Web Viewer - Brainstorm - Concepts on New Interaction Approaches - 1","user":{"login":"gusferguson","id":1552703,"avatar_url":"https://avatars.githubusercontent.com/u/1552703?v=3","gravatar_id":"","url":"https://api.github.com/users/gusferguson","html_url":"https://github.com/gusferguson","followers_url":"https://api.github.com/users/gusferguson/followers","following_url":"https://api.github.com/users/gusferguson/following{/other_user}","gists_url":"https://api.github.com/users/gusferguson/gists{/gist_id}","starred_url":"https://api.github.com/users/gusferguson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gusferguson/subscriptions","organizations_url":"https://api.github.com/users/gusferguson/orgs","repos_url":"https://api.github.com/users/gusferguson/repos","events_url":"https://api.github.com/users/gusferguson/events{/privacy}","received_events_url":"https://api.github.com/users/gusferguson/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":16,"created_at":"2016-04-08T13:34:12Z","updated_at":"2016-04-27T15:52:47Z","closed_at":null,"body":"Having talked over the problems with legacy and design in the existing Insight Measurement Tool with J-M, we had some new ideas on how to accommodate ROI workflows better in the upcoming Web Viewer.\r\n\r\nThis is a first blast at trying to formulate the sorts of UI interactions that might make some of these ideas possible.\r\n\r\nThis will be expanded as more of the functionality and interactions start coming together and I do mockups of them.\r\n\r\nPlease add comments and feedback.\r\n\r\n**Caveats:**\r\n\r\n- this is very conceptual and very much a first brain-dump so polish and finesse is a bit patchy\r\n- I have not done an iteration with J-M yet - so these are largely my take on what he said\r\n- with the multi-layered complexity of new unreleased features such as ROI folders, new technologies for the Web Viewer and so on, we are getting to the mockup upon mockups stage, so details can be missed/messed up - if any identified please indicate\r\n- need to really careful not to disrupt existing user's mental model of ROIs and ROI drawing\r\n- still need to thrash out what shapes and ROIs are\r\n\r\nThe key points raised and this brainstorming aims to address are:\r\n\r\n- provide for ROIs not attached to Z or T (equivalent of “overlay” in ImageJ)\r\n- easy way to take unattached ROI an attach or “stick” them to Zs and/or Ts\r\n- feedback on intensities while drawing ROIs\r\n- using palettes to free up real-estate and allow ROI drawing and access to settings etc\r\n- running scripts from Viewer\r\n- indication of ROI number on thumbnails\r\n- indication of ROI distribution along Z and T sliders (still to come - time ran out)\r\n- do all shape-property editing in pop-up i.e. current Inspector tab - fill, line thickness, tagging etc. (still to come)\r\n- ROIs containing different kinds of shapes (still to come)\r\n- ROIs across images (still to come)\r\n- metadata on mouseover of thumbnails - needs a lot more thought\r\n\r\n**Requirements/Task analysis**\r\n\r\nThis still needs to be expanded with lab users.\r\n\r\nTaking an abstracted view, the diagram below gives an idea of the scope of the mockups.\r\n\r\n![1 viewer-requirements](https://cloud.githubusercontent.com/assets/1552703/14384210/a7ae845e-fd91-11e5-96dd-5e94edbcd3bf.png)\r\n\r\n**Mockups:**\r\n\r\nDefault Viewer on opening:\r\n\r\n- thumbnails down LH side\r\n- settings in RH pane - pane collapsable to give more real-estate (see following image)\r\n\r\n![2 viewer-default-settings-open](https://cloud.githubusercontent.com/assets/1552703/14384218/b27cf92e-fd91-11e5-8e0b-080dbf89308c.png)\r\n\r\n![3 viewer-default-rhp-closed](https://cloud.githubusercontent.com/assets/1552703/14384223/b989edda-fd91-11e5-938e-21f0e3687f58.png)\r\n\r\nAny of the RH pane tabs can be broken out as palettes allowing more flexibility\r\n- this shows the minimal ROI palette (more detail later) being used with a zoomed in image\r\n\r\n![4 viewer-palette-zoom-collapsed](https://cloud.githubusercontent.com/assets/1552703/14384255/f34ccace-fd91-11e5-816e-3a1795b1bf00.png)\r\n\r\nThis is normal 512x512 image with RH pane open in ROIs tab\r\n- Drawing Mode and Analysis accordion tabs will be explained later\r\n\r\n![4 viewer-rois-open](https://cloud.githubusercontent.com/assets/1552703/14384285/18a4dc76-fd92-11e5-9f4d-ce9359ddfd34.png)\r\n\r\nA couple of new toolbar items\r\n- open as palette button\r\n- stamp - i.e. one-click drawing of selected existing ROI\r\n- Save to All\r\n\r\n![4a viewer-rois-open-toolbar](https://cloud.githubusercontent.com/assets/1552703/14384333/68458672-fd92-11e5-9eed-b0737872ef1d.png)\r\n\r\nShowing the drawing tools from the ROI tab as a palette\r\n- expanded to show Drawing Mode options\r\n\r\n![5 viewer-palette-default-expanded](https://cloud.githubusercontent.com/assets/1552703/14384500/4d7430ae-fd93-11e5-9910-a9ec6738268e.png)\r\n\r\nThe various propagation options can be selected and then the Drawing Mode can be collapsed to maximise real-estate.\r\nThe idea is that you get into your mode of working and then add ROIs as efficiently as possible by: \r\n- clicking on a particular Z and T\r\n- just Zs\r\n- just Ts\r\n- or moving through Z and T using sliders and ROI is automatically added as the section is viewed\r\n- specifying the Z and T (like selecting pages in Print dialog)\r\n- or graphically as it is at the moment (manually or graphically using pop-ups)\r\n\r\n![6a viewer-palette-zoom-collapsed](https://cloud.githubusercontent.com/assets/1552703/14384510/61d66292-fd93-11e5-90b1-52ad6f7807b4.png)\r\n\r\n![6b viewer-propagate-open](https://cloud.githubusercontent.com/assets/1552703/14384662/292d65d4-fd94-11e5-81a0-3159316144c9.png)\r\n\r\n![6c viewer-propagate-graphically](https://cloud.githubusercontent.com/assets/1552703/14384672/2faf645c-fd94-11e5-8a11-5a9251e7f4d5.png)\r\n\r\nImproving the dynamic interaction between the analysis and drawing\r\n- Analysis accordion tab expanded in RHP\r\n- start drawing a line\r\n- feedback in the Line Profile and Histogram\r\n\r\n![7 viewer-drawing-with-graph-rhp-1](https://cloud.githubusercontent.com/assets/1552703/14384773/b02b583e-fd94-11e5-9a60-6dd9e54d794d.png)\r\n\r\n- position end of line as desired\r\n\r\n![8 viewer-drawing-with-graph-rhp-2](https://cloud.githubusercontent.com/assets/1552703/14384792/d63068bc-fd94-11e5-95c3-0320723cc3e0.png)\r\n\r\nThis could be augmented with dynamic Intensity results while drawing\r\n- examples for line and point\r\n\r\n![9 viewer-drawing-with-graph-rhp-3-intensity](https://cloud.githubusercontent.com/assets/1552703/14384797/f820686e-fd94-11e5-95c1-19b7e4ba6d27.png)\r\n\r\n![10 viewer-drawing-with-graph-rhp-4-intensity](https://cloud.githubusercontent.com/assets/1552703/14384803/ff56e7a2-fd94-11e5-83e0-bac5ccb01931.png)\r\n\r\nThese could both be dragged out as palettes\r\n\r\n![11 viewer-drawing-with-graph-palette](https://cloud.githubusercontent.com/assets/1552703/14384809/0de99508-fd95-11e5-9cc2-b7f1d3adffac.png)\r\n\r\nAt any stage full results can be dumped out:\r\n- in spreadsheet format \r\n- or the graphs as a PNG via the results menu\r\n- downloaded/saved as attachment or viewed\r\n\r\n![12 viewer-drawing-with-graph-palette-results-dd](https://cloud.githubusercontent.com/assets/1552703/14384860/4414d64c-fd95-11e5-87ae-98c814f42470.png)\r\n\r\nAnother advantage of having both RH pane and palettes\r\n- e.g. adjust rendering settings to allow more accurate drawing of ROIs\r\n\r\n![20 viewer-settings-palette-green](https://cloud.githubusercontent.com/assets/1552703/14384891/73947a4e-fd95-11e5-9f24-f945806d2e45.png)\r\n\r\nAnd last but not least\r\n- mouseover the thumbnails to get metadata\r\n\r\n![21 viewer-thumbnail-moseover](https://cloud.githubusercontent.com/assets/1552703/14384901/86d9046c-fd95-11e5-8dd1-a54c75af17b5.png)\r\n\r\n**To be continued ...**\r\n"},"comment":{"url":"https://api.github.com/repos/openmicroscopy/design/issues/comments/215128416","html_url":"https://github.com/openmicroscopy/design/issues/32#issuecomment-215128416","issue_url":"https://api.github.com/repos/openmicroscopy/design/issues/32","id":215128416,"user":{"login":"jburel","id":1022396,"avatar_url":"https://avatars.githubusercontent.com/u/1022396?v=3","gravatar_id":"","url":"https://api.github.com/users/jburel","html_url":"https://github.com/jburel","followers_url":"https://api.github.com/users/jburel/followers","following_url":"https://api.github.com/users/jburel/following{/other_user}","gists_url":"https://api.github.com/users/jburel/gists{/gist_id}","starred_url":"https://api.github.com/users/jburel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jburel/subscriptions","organizations_url":"https://api.github.com/users/jburel/orgs","repos_url":"https://api.github.com/users/jburel/repos","events_url":"https://api.github.com/users/jburel/events{/privacy}","received_events_url":"https://api.github.com/users/jburel/received_events","type":"User","site_admin":false},"created_at":"2016-04-27T15:52:47Z","updated_at":"2016-04-27T15:52:47Z","body":"add the following for ref https://trello.com/c/yuRPX18c/65-viewer-issues"}}