Release 5.02 – Introducing The Ceros Studio

Released Tuesday, February 26th, 2013. This upgrade brings a massive overhaul to existing features alongside amazing new features to improve usability.

Real-time

This feature adds the ability to undo and redo all changes to objects and layers on the current page by multiple users. Changes in the Studio are saved and instantly available to other browsers and users having the same page open. Adding, editing, moving and/or deleting on the canvas, all fields in the ‘Inspector Panel’ and ‘Page Thumbnails’ update in real-time with other browser sessions and users (when you or another user release the mouse/key).

Copy/Paste

The ability to copy & paste objects to the same or other layer/page for both new and existing pages. Improvements include:

  • Copy once with multiple pastes (copy, paste, paste).
  • Multiple objects copy/paste.
  • Any actions & animations attached to objects copied to new object(s).

The ‘Studio’ (formerly known as ‘The Designer’)

The Studio has had a complete re-factor, with the main points of note being:

  • The Studio loads faster, and allows faster inter-page selection.
  • There has been an overhaul of the canvas, panels, and a greater parity between the Studio and Player.
  • The panel focus, tooltips and fields and icons have been brought more in line with Pro-Tools.
  • All fields and widgets in the Inspector Panel are disabled if they are not supported.
  • There is improved cursor accuracy and usability for scaling objects on the canvas and for drag/drop in the layers panel.
  • Groups and obsolete icons removed.
  • New objects are now created in the selected/current layer.
  • Objects into collapsed layers.
  • The Colour Picker is no longer an isolated floating panel. Instead, anytime the colour panel is active, the eyedropper tool is active whilst hovering over the canvas for easy colour selection.

The Player

The Player now has parity with the Studio. Further code optimisation has improved page loading performance resulting in faster response and loading times.

In-depth and expanded reading on these headline features can be found immediately after the “Resolved Issues” section below.

Resolved Issues

  • cmd+”+” & cmd+”-” – Now zoom the canvas rather than the browser.
  • Flatplan expand/collapse icon – Better image quality of the flatplan expand/collapse icon.
  • Empty page options popup menu – An Empty page options popup menu would show when there is only 1 page.
  • Thumbnail generation – Page thumbnail generation now updates properly after load.
  • Page label plurality – Flatplan header label now recognises plurality of pages.
  • Shift and drag to scale in proportion – Holding “SHIFT” then dragging an image to increase/decrease image size now works at all times.
  • Moving ‘lines’ with keyboard arrow keys – Both end-points on the line now move together when using the arrow keys.
  • Creating components when zoomed in on the canvas – This previously caused floating point position and size coordinates.
  • Webkit responsiveness improved – Workaround implemented for a known latency bug in Webkit when you drag DOM objects that appear over the canvas; the workaround is only noticeable in Safari on retina screens.
  • Modify show/hide layer on no objects – The Inspector Panel would previously allow users to modify show/hide layers when no object was selected.
  • Layer drag and drop – Layers and objects now move up and down on a vertical axis, previously, they could be dragged off the page to the right.
  • Page Transitions – All page transitions are conveyor:
    • removed black shadow edge
    • Fade & Stack effects removed
  • ​Page corruption messages – Removed page corruption messages.
  • Page errors for non-existing layers – Prevent page errors when objects are configured to hide/show layers that no longer exist.
  • Gradient parity in Studio and Player – Gradients for square and non-square shapes now render with parity at the correct angle in the Studio and Player.
  • Videos in hidden layers – Videos in hidden layers now behave correctly.
  • Move Objects/Layers in the Layers panel – moving objects around the layers panel is now constrained to a vertical axis.
  • Slide object flashes on screen – Animations that slide no longer have the object flash before going offscreen. If the object slides, it will start offscreen.

Further Reading On The Headline Stories

Real-Time

  • Keyboard shortcuts:
    • undo (cmd+z)
    • redo (cmd+shift+z or cmd+y)
  • Undo and redo all modifications to objects and layers on the current page by multiple users.
  • Works through most restrictive firewalls.
  • Changes in the Studio are saved and instantly available to other users on the same page, on mouse/key release.
  • All fields in the Inspector Panel update in real-time with other browser sessions and users with the exception of the “Constrain Proportions” checkbox.
  • Page thumbnails update when another user updates that page, even if you are not currently on that page.
  • Undo/redo history is limited to current page, not issue, app or user, when switching pages in the Studio, a user can still use undo unless the browser has been refreshed or another user has changed the page.
  • Undoing will not undo changes on different pages.
  • Multiple users working on the same page, undo works across all users while working on the same page (unless the browser is refreshed).
  • Users can undo and redo actions performed by other users and other browser sessions.
  • Page data has been moved to a more responsive, memory-based storage database with a multi-site real-time concurrency technology accessing it:
    • Ensures low bandwidth high latency connections send and receive updates to the data without conflict
    • Allows undo/redo to work without conflicting with others’ edits
  • If your browser loses its connection to the real-time server, or the real-time server loses its connection to the storage database, you’ll see an error message forcing you to reload the browser. This ensures you’re unable to make changes that might not be saved.
  • Operations included in undo/redo:
    • anything changed on the page or within the page is recorded into the history
    • objects & layers
      • position on the canvas and in the layers panel
      • size
      • fill, border, opacity & shadow
      • visibility
      • lock
      • create
      • delete
      • move (individual and multiple objects)
      • edit
    • inspector panel
      • animations
      • actions
    • media uploads
    • pdf uploads
    • text tool
      • while focus is on the text tool, and the user is within the text tool, undo/redo work on an individually typed/sized/formatted/coloured letter basis, when the focus is removed from the ‘text tool’ and then applied back to it, the text box is the focus rather than the actual text within it
  • Operations NOT included in undo/redo:
    • layers
      • expand and collapse within the panel
    • flatplan changes
      • move page position
      • delete
      • add
    • issue changes
    • app changes
    • document settings
    • publish
  • Closing or refreshing the browser or signing out and leaving the page will undo the history.
  • Not support on IE8 and IE9.

Copy/Paste

  • The ability to copy & paste objects to either the same or other page.
  • By default the pasted item is placed at the original X and Y position on the canvas.
  • Copy and multiple paste allows the user to select an object and paste it multiple times.
  • Groups of objects can be copy/pasted, as well as objects on different layers.
  • Actions & Animations attached to the copy/pasted objects are also copied across to the new object(s). However hide/show/toggle do not work due to the original objects relationship with the layer structure they were part of.
  • Objects pasted onto a different page are pasted into the layer which is currently selected on the destination page.

Canvas

  • Backgrounds:
    • ‘Change Background’ option removed from the dropdown menu of the thumbnails within the page manifest.
    • Default background layer is a visible and locked layer that can be unlocked at any time.
    • Background layer Includes a full-page square shape with white background. This can be edited as any normal layer.
    • New pages are created with two layers: an empty “Layer 1” and the “Background Layer”
  • Locked objects cannot be selected.
  • The Studio loads faster.
  • Switching pages is much faster in the Studio.
  • Cursor for scaling objects on the canvas have improved accuracy.
  • Cursor now indicates the drag handle can be moved in both directions.
  • Locked components on the canvas now render a cross, “x”, on the drag handles.
  • The canvas now renders at 60 FPS when the browser tab & window has focus and 1 FPS when not in focus. This allows real-time updates to show on the canvas immediately without complicated code events and saves CPU cycles for rendering when the Studio is not in the foreground.
  • The object and layer delete confirmation prompt has been removed.
  • Removed “Page numbering” settings panel in Issue Settings popup.
  • Removed the “Still saving…” page popup when re-ordering pages in the Flatplan.
  • “cmd+” and “cmd-” – zoom in/out ‘The Studio’ on all browsers.
  • Keyboard shortcuts available in the Studio:
    • “v” – selects the select tool
    • “h” – selects the pan tool
    • “cmd+c” – copies the current selected components
    • “cmd+v” – pastes components
    • “cmd+”+” – zooms in
    • “cmd+”-” – zooms out
    • “cmd+x” – undo
    • “cmd+y” – redo
    • “cmd+a” – selects all components
    • “cmd+d” – de-selects all components (clears selection)
    • delete or backspace will delete selected components
    • holding the space key temporarily enables the pan tool; releasing reverts to previous tool
    • holding the shift key during a resize preserves proportions
    • holding the shift key during a move locks to x/y axis
    • up/down/left/right arrows move selected components by 1px; holding shift moves by 10px
  • Hold “shift” and drag an image to increase/decrease image size in proportion.
  • Moving lines on the canvas with keyboard, both end-points on the line now move together when using the arrow keys.
  • Components can be created when zoomed in on the canvas.

Floating Panels

  • Panel focus has been fixed to remove the wash-out effect and given more prominent drop shadow.
  • Improved and consistent readability within the panels.
  • Whenever the panels are present on the screen, you have the ability to click directly on it at any time without having to “click to focus” the panel.
  • Layers panel and Inspector panel are always open by default.
  • Layers panel and Inspector panel maintain their position and size on browser refresh.
  • Layers panel and Inspector panel start at the same width.

Inspector Panel

  • The ‘Info panel’ has been renamed ‘Inspector Panel’.
  • Removed the “Custom” section for images in the Inspector Panel and therefore the ability to replace/rename an image using the Custom tab for images.
  • When copying and pasting an object that contains the “show/hide/toggle layers” action from one page to another page, the “show/hide/toggle layers” action is retained but all the layers are reset to “None”.
  • After typing a URL without “https://” or “https://” into the “Go to URL” action textarea. It will automatically add “https://” to the URL in the textarea. This can later be changed to an alternative protocol if needed.
  • When you type a URL in the webview “URL” textarea, the player will dynamically request the HTTP or HTTPS version of that URL depending on the protocol of the main Ceros issue. This is to prevent the “cross protocol security warning” that occurs in Internet Explorer. For this reason, webview URLs must at a minimum support HTTPS, and additionally support HTTP if the Ceros issue URL is shared using the HTTP URL.
  • Email address actions can now be used. In the Inspector Panel under actions, in the ‘Go to URL’, add in the URL mailto:email@address.com, to open a new email in your email client.
  • When making a square or non-square shape with a gradient fill, the initial colours are black (top) and white (bottom) with an angle of 0º.
  • All fields and widgets in the Inspector Panel will now disabled if they are not supported.
  • Adds a “None” option for the Inspector Panel – Fill dropdown. This makes a transparent object easier to create than change the colour picker to “0% opacity”.
  • Removed the “Image” option from the Inspector Panel – Fill dropdown
  • “Solid” fill defaults to white when first selected.
  • When switching dropdown values for Fill, the previously selected colour or gradient will be reset.
  • Making a shape with no fill and no border will allow it to be clickable in Internet Explorer regardless of opacity setting. Previously, the user had to change opacity to 0% for IE to be clickable.
  • Rotation widget has been removed until support for rotation is better.
  • Removed the “Test URL” button in the Webview settings.
  • URL text box size increases for improved usability.
  • Corner Radius, Borders, Shadows & Blur have all been brought more in line with pro tools, with accurate display and improved parity.

Layers Panel

  • Groups have been removed and all existing groups are flattened into the layers.
  • New objects are created in the selected or current layer. If multiple layers are selected, new objects are created in the first selected layer.
  • New objects auto-highlight in the layers panel.
  • New objects expand the target layer.
  • Toggling the visibility of a layer will visually hide all objects in that layer on the canvas.
  • Better tooltips and icons for add and remove (“+” to add new layers, “wastebasket” to delete layers), and remove obsolete icons in new look layers panel.
  • Drag and drop functionality in the layers panel is improved with larger hotspot areas.
  • New blue placeholder bar when dragging and dropping objects and layers.
  • Selected layers in the Layers Panel will un-select in the Layers Panel when you paste in new objects.
  • Selected layers in the Layers Panel will un-select in the Layers Panel when you click on objects on the canvas.
  • When pasting objects, they will now retain the same order in the layers panel.
  • User can now drop objects into collapsed layers.
  • If a layer is expanded but empty, there is an “(Empty)” space underneath where a user can drop objects.
  • When clicking the “Lock” icon for Layers, it will cascade lock and unlock all objects in the layer.
  • When unlocking an object inside a layer that was “locked”, it will remove the lock icon from the layer.
  • Changes “eye” tooltip for Layers in the Layers Panel to be “Toggle Initial Visibility” because Layers can be shown/hidden using actions.
  • When a layer is selected, it will be unselected when you click on an object and start to drag.
  • Layer visibility can be toggled in the Layers Panel without cascading into objects.
  • Any objects made invisible are always invisible in the Studio or Player, even if the layer the object is inside is made visible via an object click action in the Player.
  • Tooltips read “Toggle Initial Visibility” for layers and “Toggle Visibility” for objects.
  • Long layer and object names are now truncated with “…”.

Colour Picker

  • Colour Picker is no longer an isolated floating panel.
  • The eyedropper tool has been removed from the toolbar. Instead, anytime the colour panel is active, the eyedropper tool is active when you hover over the canvas for easy colour selection.
  • Pressing any key or click back on the colour swatch will close the colour panel.
  • Upon opening the colour panel, the HEX textbox is active and all text is selected for easy keyboard replacement, pressing ENTER in this field applies the HEX colour and closes the panel.
  • The “No Colour” option has been removed from the colour panel. To choose an empty fill colour, simply select “None” in the fill dropdown.
  • The hue and saturation selections are now retained when hiding/showing the colour panel.
  • Adjusting the hue using the hue bar will maintain the same saturation and intensity.
  • Colour swatches in the Inspector Panel now indicate transparency.
  • Option Bar colour indicators are now accurate according to objects selected on the canvas.

Studio/Player Parity

  • Squares
    • Rounded corners now supported on all browsers except IE8
    • Border and shadow parity
    • Gradient fill parity
    • Position parity when using borders, corners, and/or shadows
    • Can no longer put shadows on empty fill squares
  • Non-square Shapes
    • Removed rounded square shape. This can be accomplished using the square and rounded corners.
    • Removed pentagon shape.
    • Removed support for rounded corners on non-square shapes
    • Border and shadow parity
    • Gradient fill parity
    • Position parity between Studio / Player when using borders, corners, and shadows
    • Can no longer put shadows on empty fill shapes
  • Text
    • Rounded corners now supported on all browsers except IE8
    • Border and shadow parity
    • Gradient fill parity
    • Position parity when using borders, corners, and/or shadows
  • Lines
    • No longer support fill, borders, or actions
    • Shadow parity
    • Position parity when using shadows
  • Images
    • Rounded corners now supported on all browsers except IE8
    • Border and shadow parity
    • Position parity when using borders, corners, and/or shadows
  • Videos
    • Removed support for fill, borders, opacity, actions, and animations
    • Support shadows on all browsers except IE8
  • Webview
    • Removed support for fill, borders, opacity, and actions
    • Support shadows on all browsers except IE8

Housekeeping Updates

  • Copyright date updated to 2013.
  • “Create User” & “New User” – The “Create User” and “New User” screens and buttons were more appropriately named “Invite User”.
  • “Coming soon” image in the invite user screen removed.
  • Studio – Rename “The Designer” to “Studio”.

Publishing

  • Refactor Issue Publish Process.
  • Refactor PDF Import Process.