Counting the different colors used on a board

  • 13 October 2020
  • 20 replies
  • 1670 views

I would love an API (if I’m using that term in the right way) for counting individual colors used on a board. Does anyone have the ability/desire to create that?


20 replies

Userlevel 3
Badge +1

This would be fairly easy to implement.

However, what would be the use case for this?🤔

@Yash Really? That is great news. My use case is probably unique with Miro. I have workers in the field who check utilities. I add .pdf maps to Miro boards and they use the pen tool with different colors to mark the status of what they checked…

When they are done, they have to count up the different colors and give me a total each color. If I could get rid of the counting step, it would help with speed and accuracy (and get rid of how annoying the counting is.)

I would love a solution in Miro for that!

@Yash So the idea would be: how many orange marks and how many green marks (using the Miro color palette) for example.

Userlevel 2
Badge +3

That is a very easy API to create with javascript for example. The question is if you want to store these values on some sort of a server, locally on miro whiteboard or if you want to store in JSON files, or just in runtime data which gets wiped after session closes

@Sami Ljimari That is awesome to hear. I would not need the info stored. My crew takes those counts and logs them into a Google Form, so they only need them for a moment…

If one of you (or anyone) took this on, I could see other uses for it that may benefit people outside of my very specific use case. 

Anybody up for tackling this?

Wanted to keep this idea in the loop in the community. Would love it if someone could pull this off...

Userlevel 2
Badge +3

All you need to do this is a bit of javascript like so:

gatherColors()

 

function gatherColors() {

      miro.onReady(() => {

                 miro.board.widgets.get().then(function(theWidgets) {

                      getColors(theWidgets)

                  })

             })

}

function getColors(arrayOfWidgets) {

      for (i = 0; i < arrayOfWidgets.length; i++) {

            let colorsOfWidgets.push(arrayOfWidgets[i].style.backgroundColor)

      }

}

 

At this point all board widget colors are gathered all you need after this is some sort of sorting and a output you prefer weather that is a JSON file which can be compatible with a google doc or just a board notification, etc…

 

You can either find some more efficient sorting algorithm online or use something basic like this:

 

function sortColors(colorsOfWidgets) {

      for(i = 0; i < colorsOfWidgets.length; i++) {

            if (colorOfWidgets[i] == “#12cdd4”) { //color code for cyan color

                  let cyanColor = cyanColor + 1 // same approach for all other colors miro widgets support

            }

      }

}

 

Hope this helps.

Sami

@Sami Ljimari That’s great that it can be done, and I really appreciate you taking the time to write it out. I have not tried using any coding in Miro, and am not experienced with it at all, unfortunately. I don’t even know how to begin to do it...

Keeping this idea in the air...Wondering if anyone else would benefit from it.

Userlevel 7
Badge +5

@Ryan Wagner  
Did anyone manage to implement this for you?  

If not … I’d be happy to quickly tackle it. Its super simple. 

 

Should the app count all items on the board and get all colors? or Should it only count colors on a subset of what’s on the board? examples: 

  • count colors only on the items selected by the user
  • count colors only of sticky notes.  or shapes. or squares. or rounded corner squares. 
  • etc. 


Would you want this to work more like A, B or C ? : 
 

A)  Count tallies in the plugin.

 

B) Count tallies onto the board.

 

C) Both Options: Count tallies in the Plugin and/or the Board. 

 

The week of January 23, 2023, and email was sent from Miro to all Starter Plan Team Admins that all app management capabilities would be removed and only be available for Business and Enterprise Plans – as of this reply, it looks like Education Plans still have app management capabilities.

What this means is:

  1. Any Starter Plan users can install any apps from the Miro Marketplace.
  2. Once the app is installed, it cannot be removed.

In the App Management help center article, I see:

Pre-installed apps

Some apps require no installation for users. They may require additional authorization or individual sign-in. These pre-installed apps are: BoxDropboxGoogle DriveOneDriveSmartsheetAzure CardsJira CardsBrandfetchAdobe CCGoogle ImagesIconfinderSlack. These apps will not be pre-installed if they are not on the company approved list. You can manage this list if you're a Company Admin. 

So, it looks like Miro also pushed all of these apps to any Free/Starter Plans. @KyleB - This is likely why you are see this Jira Cards app icon and, sadly, if you are on a Starter Plan, you cannot remove it.

My team would be tallying up colors in a specific frame. I don’t know if its possible for you to limit the selection to a frame…

 

If they had to drag a selection around what they wanted counted, I don’t think that would be too much of a problem, though.

Thanks!

@Max Harper Do my ideas make sense? I can give some more detail or provide a screenshot of my use case, if that helps. I definitely appreciate you looking into this, and your photos above look really promising. 

Userlevel 7
Badge +5

@Ryan Wagner

Sorry for the delayed reply. Somehow I missed the notification that you’d replied. 
 

Your details make perfect sense. and are all likely achievable. 
 

I’m busy in a sprint with a client right now (building a Miro-Airtable sync tool(which I’m pretty excited about)). Yet- I might very well be able to sneak in a quick prototype build for you this weekend. 
 

I’ll keep you posted. :)
 

 

@Max Harper That would be great, thanks!

My team is going to grow by a few more people pretty soon, so I would love to be able to use this feature.

Userlevel 7
Badge +5

Super Selection:

 

So,  @Ryan Wagner  I sat down last night to build out a prototype and remembered that we had something already built that does this…  We built a super selection filter last year just before Miro came out with their selection filter tool -  at which point we thought… “hmmm, ours does that and then some, but ours is probably overkill / beyond what their user-research is showing demand for.   So it turns out, I think from realizing what you and others are after, that our tool might be really helpfully … overkill.  

Will be delighted to hear your feedback. 
 

Here’s a demo below. 

To test it out:  If you DM me I can send you an install link. I just brought it out of the attic and dusted it off… Haven’t really tested it too thoroughly… I’m sure its got lots of room for improvement. 


 

 

 

@Max Harper That is awesome! Just watched the video. I would love to try that out. My team and I would use that multiple times a day and it could be a huge timesaver. I can imagine all kinds of other uses beyond my particular situation, also.

This is definitely fantastic. Can I send you my email so I can try it out?

Userlevel 7
Badge +5

@Ryan Wagner Sent you an install link for Super Selection by DM

How can i use super selection in my board? Can i find it in miro or do I need the Link from you here? @Max Harper 

Reply