Tag Archives: Whiteboard

About Kerika’s Whiteboards and Canvases.

Don’t smile (too much)

When you chat on a card, on any Task Board or Scrum Board (or on the canvas on a Whiteboard), the chat message gets sent to the right people as emails.

And who are the “right people”? Well, anyone who is assigned to that card will get the chat sent as email, and Project Leaders can optionally get chat pushed to them as email as well. Everyone else can catch up with the chat when they visit their board.

When chat messages get pushed to you as email, you can reply to them just like regular email (all you need to do is a simply “Reply”, not a “Reply All”).

But, don’t go crazy with emoticons!  Most smileys work OK, but not every emoticon will get encoded correctly (using UTF-8).

So, it’s natural to be happy when you are using Kerika, and it’s OK to smile while you work, but don’t use too many strange emoticons in your email replies!

🙂

Reaching the edges of a diamond

When you are drawing on a canvas, either for a Whiteboard project or a canvas that you have attached to card on a Task Board or Scrum Board, Kerika gives you some basic shapes you can use to sketch out your workflow, process diagrams and other ideas:

Drawing shapes on canvas
Drawing shapes on canvas

You can connect shapes using lines and arrows (single- and double-headed), and as you move the shapes around, the lines and arrows automatically adjust so that they terminate properly on the edge of the shape.

It turns out we had a bug where the lines didn’t properly connect to the very edges of diamond (rhombus) shapes:

Problem with lines on edges of diamonds
Problem with lines on edges of diamonds

This was quite literally an “edge case” (sorry about the pun): when the line travels along the edge of the diamond shape, as the shape is moved by the user, a function is used to calculate the exact intersection of the line and the shape.

(This function is the only proof we have ever seen that anyone actually needs to use trigonometry in real life.)

When the line travels right up to the corner of the diamond shape, because the line is connecting the diamond to another shape that is of precisely the same height and width, and the two shapes are aligned perfectly (either vertically or horizontally), the function returned two possible intersection points.

We have fixed this problem in our latest release. It should make for neater looking flowcharts!

We are dropping the “Embedded View” feature for canvases

We used to have a feature where you could add a URL to a canvas or Whiteboard, and then choose to show that either as a regular bookmark, or as an embedded IFRAME.

We are dropping the embedded IFRAME feature, because most of the time it doesn’t work, and even when it does work, it’s not a great feature to have:

  1. You can only IFRAME a website if that site lets you. And, increasingly, most sites don’t.
  2. IFRAMEing a third-party website on a Kerika page is a potential cause for worry, from a security perspective, because we are letting that third-party website right into the Kerika page.

Linking images on a canvas to external websites

One little-known feature of Kerika’s Whiteboards: if you have an image (picture) on a canvas, you can also add a link to a Website, so that anyone clicking on the picture would be taken straight to that website.

(It’s one of several little-known features that we hope will become well-known, with our recent redesign of the Canvas toolbar; we have built too many really cool features that not enough people are aware of!)

One common use of this feature is to create an external-facing page that includes a logo: you can add the logo’s image to your canvas, and then point that logo to your company’s website.

It’s simple: just select the image, and then click on the “Link to website” button on the Canvas toolbar.

Link image to website
Link image to website

Lock Canvas: a new feature

With our latest release we are adding a feature that will make it easier for folks to create, and maintain, very elaborate Whiteboards: any team member can lock a canvas to discourage other team members from making changes.

This isn’t a very complicated function; it has a very simple purpose: if you have been working hard on a particular canvas, which could be a stand-alone Whiteboard, part of a series of nested canvases in a Whiteboard, or attached to a card on a Task Board or Scrum Board, you may become worried that other team members might come by to visit your board and carelessly make changes to your pristine creation.

(After all, we creative types can get really possessive about our beautiful canvases :-)!)

To discourage others from making changes, just click on the lock button that appears to the far end of the Canvas toolbar:

For Team Members, this is a “soft lock”: any canvas that’s locked by one Team Member can be unlocked by any other Team Member, so you are not really shutting out people from making changes, merely discouraging them by signalling that you would like to preserve a canvas in a particular way.

Canvas locked by Team Member
Canvas locked by Team Member

But for Project Leaders, this is a “hard lock”: if a Project Leader locks a canvas, it can be unlocked only by another Project Leader. (Remember: projects can have more than one Project Leader!)

Canvas locked by Project Leader
Canvas locked by Project Leader

So, if a canvas gets to a truly pristine state that you want to preserver forever, have the Project Leader lock it, and the rest of the team will be able to view it but not make changes.

And, of course, if canvases are embedded (nested) inside each other, each canvas can be locked or unlocked, as you like, giving you maximum flexibility.

Change Shape: a new feature

We finally got around to adding a feature to the Canvas that we have wanted for a while, but somehow never got around to building: now, with a single click, you can change a shape on a canvas, whether it is in a Whiteboard project or attached to a card on a Task Board or Scrum Board:

Change Shape
Change Shape

Here’s why you might need this: often when you are first creating a process flow diagram, you might use shapes — rectangles, ellipses, diamonds — in an arbitrary or careless way, which is just fine because at that time you are trying to be creative rather than meticulous.

But, as the canvas takes shape and matures, you might want to go back and standard the use of particular shapes (even if you don’t strictly follow the old conventions for drawing flowcharts, which we don’t either).

This new function makes it easy for you to select a bunch of shapes and change them all to a new shape. Previously, you had to create a new shape and put it in place to replace the old shape, which was pretty inconvenient when you had a bunch of nested canvases and a bunch of curved lines connecting all the shapes.

Easy, now.

A simpler toolbar for Canvases

We have updated the toolbar for canvases to provide a better user experience for folks working on standalone Whiteboards or when attaching canvases to cards on Task Boards and Scrum Boards.

What used to look like this:

What Canvas Toolbar used to look like
What Canvas Toolbar used to look like

Now looks look this:

What Canvas Toolbar looks like now
What Canvas Toolbar looks like now

 

  • The Upload File and +Web Content buttons have been replaced with simple icons that take up less space.
  • On the left, there is a new Select All button: this function was kind of buried before, inside the old “Action” button, but now it is more visible and easier to access.
  • There is a new Lock button on the far right: this is a new function that we will talk about more in a separate blog post, but we can summarize it here as a way to freeze canvases to prevent people from making changes.

When a shape, e.g. a rectangle is selected, you used to see something like this:

What the Selected Object toolbar used to look like
What the Selected Object toolbar used to look like

Now, you will see this:

What the Selected Object toolbar button looks like
What the Selected Object toolbar button looks like

 

  • When a shape (or other object is selected, all the other drawing buttons are temporarily hidden, because they can’t be used. (You can’t draw a shape while you have a shape selected.) This makes the toolbar far less cluttered, by not displaying useless buttons.
  • A new button lets you Rename a shape. This is old functionality that you can still access by simply double-clicking on the title of an object, or by using the right-mouse button menu, but this new design makes that function more explicit and easier to access.
  • A new button lets you Change a Shape: this is new functionality. You can change a rectangle to an ellipse, for example, without modifying any other aspect of the shape.
  • A new button makes it easier to change the Appearance of an object: it’s color, fonts, etc. Again, this is old functionality, but made more explicit and easier to understand.
  • New buttons make it clear that you can Copy, Cut and Paste objects. This functionality was buried under the old Action button; now it is more explicit and easier to access.
  • And finally, a simple Move to Trash button makes it clearer how you can delete an object. This removes some confusion that Mac users would experience: on a Mac, deleting is normally done using the Backspace key, but within browsers this would take you back to the previous page because that’s how Macs work.

When you select an image that’s on your canvas, your toolbar used to look like this:

What you used to see when you select an image
What you used to see when you select an image

Now, it looks like this:

What you now see when you select an image
What you now see when you select an image

This is a major improvement: the toolbar is not only less cluttered, but all the functions are more explicit and easier to access and understand, especially:

  • Download file: same function as before, new button. This will let you download any file on your Canvas, from your Box or Google account.
  • Link to website: again, an old function that let you link an image on your canvas to an external website.

DESIGN STANDARDS

For the buttons we are mainly using icons from Google’s Material Design standards because that was already in line with our styling, although in some cases we thought Google’s designs were too “blah” and went for something a little punchier.

BACKSTORY

We haven’t  updated the Canvas features in a while — we had been concentrating on improving the Kanban and Scrum aspects of Kerika — but lately some of our users have been telling us about the amazing collaborative spaces they have built using Kerika (check out the folks working on the Ebola challenge at OpenIDEO) and this inspired us to try to improve the Canvas!

Other very cool users include the folks at the Foundation for Common Good, who are working on a variety of social good projects, and the teachers at the Iowa Mennonite School who have been using Kerika for art projects and other learning activities.

When you copy and paste a project, do you want the team too?

Here’s a new feature we are adding: when you copy and paste an entire project from one account to another, you can decide whether to take the team as well.

Consider these two scenarios:

  • Alice makes a copy of a project that she owns and pastes it right back into her own account. (Why? Well, maybe she wanted to make a backup copy, or maybe the actual project was going to split into two parallel efforts and so copying-and-pasting the entire project makes sense.)
  • Bob makes a copy of a project that Alice owns, and pastes it in his own account. (Of course, to do this Bob would need to have access to Alice’s project in the first place.)

In the first scenario, the duplicated project is showing up in the same account as it was before, so Kerika assumes that the team should be copied as well: in other words, “Project A” and “Copy of Project A” will both have the same team, at least to start with although each version of the board may then change its project teams independently of each other.

In the second scenario, however, it’s a little more murky: did Bob just want to copy the cards and canvases of Alice’s project, or is he trying to actually set up the same project in his own account? It’s hard for Kerika to make a really good guess in this scenario, so the system asks you:

If Bob responds “Yes” to this question, his copy of Alice’s project will also come with all the team members who were originally working on Alice’s project.

Of course, this might mean that Bob is now adding some folks to his account team: people he hadn’t worked with before.  These people are added automatically to Bob’s account team if he wants to take the team along with the project.

Adding images to canvases: differences between Google and Box

Kerika+Google, our integration with Google Drive, and Kerika+Box, our integration with Box, are very similar in terms of user interface, but the underlying cloud storage platforms are different in some subtle ways.

One of these has to do with the way images that are added to a canvas are named: when you add an image to a canvas, either by using the Upload button or simply by dragging and dropping the image from your desktop onto the canvas, Kerika will show a small thumbnail of the image on your canvas.

The thumbnails provided to Kerika by Google are better than those provided by Box in a couple of ways:

  1. Box’s thumbnails are square, which can result in a cropped view of the image; Google’s thumbnails show the entire image.
  2. Google’s thumbnails can be resized nicely on the Kerika canvas, simply by selecting it and then dragging on one of the corners; Box’s can’t.
  3. If you rename a Google thumbnail and take off the original file extension, e.g. you rename “picture.jpg” to be just “picture”, the thumbnail still renders correctly, but Box’s doesn’t. (Because Box relies on the file extensions to detect the file’s MIME-type.)

There are some other quirks with the way Box and Google work, but most of them are going to be invisible to most Kerika users.