Pull in new stamp graphics

[adamjarling]

Pull in new stamp graphics

[adamjarling]

@CourtneyMcClellan I'm able to pull in the new stamps ok. The easiest scenario would be if all the stamps are SVG files, as you've sent over, instead of using other image file types, at least for the Stamp feature. So basically whatever you sent over works.

One thought, maybe these should be transparent SVG files?

[CourtneyMcClellan]

Try these for the transparent SVG file:

https://drive.google.com/file/d/1IlAGUVLg5s-z8j4z6VT3ekPFQZdBQ2OZ/view?usp=sharing

[adamjarling]

@CourtneyMcClellan Confirmed this way of saving the SVG is transparent on the canvas:

[adamjarling]

Update February 2, 2021

New stamp graphics have been added for all colors. This is not a feature to be tested during User Testing round 1 though, so pushing back priority.

[adamjarling]

Messages brought over from a Slack conversation...

Adam
If I try to open an SVG file in Illustrator, it asks me to manually select the linked file. I'm kinda out of my element here:)

Courtney McClellan 5:39 PM
SVG files are new to Olivia and myself so we are figuring it out as we go. We will sort it out

Adam J. Arling 5:39 PM
Transparent PNG files would work great too, for web delivery.

Courtney McClellan 5:40 PM
Ok, that may be easier

Adam J. Arling 5:40 PM
With 100+ images (that we'll have to pre-load) I'd recommend the smallest file size you can arrive at for each stamp image. SVG might...not totally sure, be the most compressed? It looks like FabricJS understands both. PNGs seem a little more straightforward, but apparently I figured out a way to make FabricJS understand SVG images as well when you sent me the sample:).

Courtney McClellan 5:43 PM
Ok, if PNG files are better, we may switch to that. I am going to reach out to Olivia and take a look too

Adam J. Arling 5:45 PM
And for prepping the files, in terms of a naming convention, it'd be awesome and save me a bunch of time if you could use the color in the filename. For example: green-star.png or pastelBlue-question-mark.png etc.

Courtney McClellan 5:46 PM
Ok, we can definitely do that! Any notes you have like that bring them on! I am happy to notate in any way that helps

Adam J. Arling 5:47 PM
The current colors which I'm basing off of Jess's pen weight graphics are:

• green
• pastelBlue
• pastelGreen
• pastelPurple
• pink
• teal
• yellow

@CourtneyMcClellan

[adamjarling]

Maybe a fill PNG image file with a color solution here? https://stackoverflow.com/questions/44859026/how-to-select-a-color-fill-it-into-the-selected-image-that-is-uploaded-in-the-c

http://fabricjs.com/image-filters

[adamjarling]

@CourtneyMcClellan So it looks like I am able to update the color of a PNG stamp file through FabricJS. Can you just have Olivia create one color versions of each shape, when you arrive at the final shapes? I'd make the PNG image files either black or white.

[CourtneyMcClellan]

Great! Ok, will do.

[adamjarling]

So, turns out SVG files are way easier to handle with the dynamic color switching, in both the Options toolbar, and when adding the Stamp file to the Fabric canvas. I was able to convert a few of the black PNG files to SVGs in Illustrator, and here's a start on the work:

Note for some reason the Speech Bubble stamp is not respecting the selected color... I'll figure out why over the weekend, and continue building out the rest of the stamps.

[adamjarling]

Now updated with all stamps and worked out the bugs. Closing.