Background cards or images

I had an idea for a cool feature - background cards. They would end up looking kind of like this, made with the current features of kinopio:

But this is currently difficult to use:

  1. If you ever move the background image, it’ll be moved to the top of the stack and cover all the text
  2. Pressing ‘enter’ while editing one of the text cards creates a new card, but it’s all the way at the bottom of the background image, rather than being right under the card you were editing
  3. The ‘number of overlapping cards’ number is a bit unnecessary here I think.

So “background images” would be images that you can insert into a page, drag around, and resize, but are different from normal cards in that they:

  • do not contribute to the overlap number of other cards
  • don’t have an overlap number themselves
  • are always in the “back” of the page; all other cards are over them
  • aren’t selected when drawing on the background. To select them, you might have to click a button or something?
  • can’t form connections with other cards

This could be nice from a purely creative standpoint - being able to have easier control over the background - but also might help make this easier: Idea: Use a webpage or PDF as background

4 Likes

Quick thoughts: I think, to @jordanne’s point, the overlap indicator could be greatly improved still. I don’t know how the math works and if possible, but maybe if it changed to only showing if a card were more than 75% covered or something like that.

And then maybe if Kinopio has a way to identify image cards vs just text cards, text cards should always stay on top.

This doesn’t cover everything you want, but trying to think how the current behaviors could change slightly in ways that would make sense and still get to something that covers your needs.

3 Likes

Do you imagine still being able to click a ‘background’ image card to edit it?

1 Like

What’s clearer language in this context

  • lock card
  • make into background card
  • move card to background
  • lock card to background
1 Like

Yes, I do

And I think “move card to background” sounds best. Locking comes with the idea of “locked in place” - but I think you should still be able to move and interact with it. The best implementation, imo, would be Kinopio knowing it has two layers, and you can basically move cards to the background layer when desired.

1 Like

I like the locking idea. An important behaviour of having a background card would be that you could drag on the background and select cards on top of it while not selecting it. This means it’s basically locked in place, right?

Do you imagine still being able to click a ‘background’ image card to edit it?

There’s a trade-off between being able to click and edit the background card and being able to click and create a new card. I think the latter operation would come up more often. Then you could have a lock button to unlock the background card when editing is necessary. So yeah I think the locking pattern implies the semantics I’d want!

One thing is that locking might not communicate well that locked cards are pushed to the background — maybe they don’t have to be pushed to the background at all? Am I right that edit actions only ever lift cards to the top of the stack? If that’s the case then any locked card would always remain behind any newly moved card which still makes it possible & easy to use these locked cards as a background. Though I guess then unlocking & editing the card would bring it back to the top, so I’m not sure.

1 Like

What’s the use cases for/against backgrounds being movable/selectable vs being locked in place?

1 Like

I have some half-baked thoughts on this:

  • I jibe a lot with @Charles thoughts on this. I do see this as somewhat satisfying the Idea: Use a webpage or PDF as background use case.
  • This also serves as lightweight grouping, like the first post’s screenshot has.
  • Another idea on language: “stick card to background”? Less conventional, but implies the ability to still move it around (stick is less permanent than lock).

I don’t think that’s the right dichotomy. I think Background cards or images explains the nuances.

If the background is movable / selectable then it’s very difficult to align cards that are on top of it. Since you can’t select them without selecting the background, you end up having to either move the background somewhere else, select and align the top cards and then move the background back under them or select them one-by-one with shift-click.

Another (maybe better!) route — if you wanted to avoid the locking idea — background cards could just be normal cards where the image spills out of the frame of the card instead of having the frame expand to encompass the whole image. This would let people select and move the card as normal but then also be able to position other cards over this image. So maybe instead of “background vs locked cards” it’s have “background images” tied to cards. These spill-over images could always be below any cards that are on top of them.

Something like this: (notice the connector is not on the right side of the image) where you could only select this card by dragging over the grey box with the text ‘hi there’.

If you’ve ever used design software like figma, a very established interaction is to lock a layer. This might be the most direct interaction to follow:

So a locked card would

  • maintain its current z position, allowing other cards to be moved on top
  • be unselectable
  • be immovable
  • be unresizable

To move and select the card you would have to ‘unlock’ it first

4 Likes

That makes total sense. I would like this to be a feature of all cards, not just image. Use case would be being able to designate certain cards as reference or published so when collaborating (or even working alone) I’m not worried about them getting inadvertently moved.

3 Likes

That makes sense

2 Likes

Amazing. Locking layers could allow for using cards to comment on stuff on images :). Like on a map.

Question:

  • Shouldn’t connections between unlocked cards be visible above locked cards?
1 Like

yes they will be

2 Likes

That sounds very good! :slight_smile:
Looking forward to it!

1 Like

With some custom CSS, we will be able to do this.

2 Likes

locked cards is now live https://twitter.com/KinopioClub/status/1493604623827062790

4 Likes

help doc: https://help.kinopio.club/posts/locking/

4 Likes

What do you think about drawing the paint above locked cards? That would be a better model since, when you have a card on top of a locked card, right now, the paint is under the locked card, but it still selects the card on top. So the paint is violating physics by going through the locked card.

1 Like

makes sense. however, it’s significant enough work that we should spin this request out into a separate thread

1 Like