Custom Color Picker Field

[glase...@gmail.com]

Hi all,

I create a custom color field.  It uses the default color picker.  I am planing on using this in my personal project pretty soon.  I need to fix some bugs with it.   I was thinking that this might make a good plugin.

Demo

https://www.youtube.com/watch?v=rhOjPo81nj4

Custom Field Code:

https://github.com/ElectroBlocks/ElectroBlocks/blob/ColorPickerBlockly/src/core/blockly/overrides/custom-color-field.js

Block Definition:

https://github.com/ElectroBlocks/ElectroBlocks/blob/ColorPickerBlockly/src/blocks/color/blocks.ts

Let me know what you all think.  I mostly copied the color from the current colour picker and text field.

Thank you

Noah

[Noah]

I forgot to post the color picker library I am using.  

https://github.com/jaames/iro.js

Side note: I think this works well with ssr.

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/e09644a6-78b0-4a1a-be0a-a6899d534a72n%40googlegroups.com.

[Beka Westberg]

Hi Noah!

Thank you for sharing :D That looks really cool! I don't have any say in this, but personally I think it would be super rad to have a color-wheel based color picker as a plugin.

I checked out the source code for the field, and it has some stuff about text editing? But I couldn't figure out how it works. Is that part of the field working at the moment? To be clear, I think it's a rad field either way I was just curious hehe.

And one note about adding it as a plugin, I'm not sure what the policy is for first-party plugins and third-party licenses, so I'm not sure if the license for the iro.js code is compatible.

Thank you again for sharing! It was fun getting to check it out :D

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CALmzms5_jFktcN4PKM-SJJwqsc4bforOvD1BuVV%2BSUt%3Di_U%3D4w%40mail.gmail.com.

[Noah]

Thanks for checking it out. 

The text stuff is "copy and paste pasta" from the text field endpoint.  I think it can be removed, and I will see if it can be today.  

Excellent point on the license; I should have checked that out.  If you all decide to use I can switch to another color picker easily.

Thank you

Noah

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAEBzR969tYqOnLG_8NaEf9sJznhCYV1pE1HvkMUGTU1ib4ZZrw%40mail.gmail.com.

[Abby Schmiedt]

Hello!

Sorry for the delay in getting back to you! 

We would love to have a color picker field as a plugin! It looks like the license for the iro.js library is compatible with the apache license so that shouldn't be a problem. 

There are two ways to go about creating a plugin. I think in this case a third party plugin might be the correct path since there are less requirements that way. However, if you would like to create a first party plugin that is also completely fine. If you decide to create a third party plugin we are still happy to add a link to it on our page as well as provide feedback when you are writing it.

Regardless of which route you decide to go down, this script will set up a directory with some scaffolding that might be helpful and here is an example field plugin. 

Hope this gives you a place to start and definitely respond if you have any other questions!

Abby

[Noah]

Awesome!

I will get started on it and do the 3rd party plugin.  I will use the templates and a few mocha tests.  Glad we could avoid licensing stuff.

Thank you

Noah

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/ff7416c9-6f5e-477e-aaa4-d5c1345d7af5n%40googlegroups.com.

[Beka Westberg]

It'll be so cool once people can acquire this via npm :D I would have loved to have something like this in my very first Blockly project (a turtle graphics thing). Best of luck to you Noah!

--Beka

[Noah]

@Beka Thank you!

@Beka & @Abby I created a simpler version of the color wheel and I have it up on Github. 

https://github.com/ElectroBlocks/blockly-field-color-wheel

Any feedback you have is greatly appreciated.   There is not much code.  I extend the current color picker and overrode the showEditor_ function.

Once you give me the green light I will publish it on NPM.  I also used the Apache 2.0 license as well.

Thank you

Noah

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/cdccb26e-ebec-4f7d-ae51-b81c97925024n%40googlegroups.com.

[Beka Westberg]

Hi Noah! That looks really good. I especially like the README, it's so detailed! Good docs always make me happy =)

One thing I did notice is that the dropdown div isn't centering itself, even though you're properly calling showPositionedByField. Have you tried calling it at the end of the function instead? I'm wondering if the measurement of the dropdown div is happening before the color picker actually exists, which is causing the div to be off.

... And now I'm just thinking maybe you intended for the div to be off to the side (which is more like how the old field UI worked). In which case, please ignore the previous paragraph haha

Thanks for sending the update! This field is so needed! I can't wait for people to be able to use it :D

Best,

--Beka

You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/d5gXMqzn-Dw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CALmzms6-qAPNzjPKUY3AxsJAPz%3D4qD2VSp7Bdme-qRea5M0H%3DA%40mail.gmail.com.

[Noah]

@Beka great catch.  That fixed it.  It's now centered.  Thank you

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAEBzR966wAuEqrDSue%3D%2B-t2kNaqGAMax5Na7jSa6TQSTSHsHzw%40mail.gmail.com.

[Abby Schmiedt]

Hello!

This looks great! This is actually our first third party plugin 🎉  so I will work on finding where we want to promote this. Once I do I will respond with more information : ) 

Thanks!

Abby

[Abby Schmiedt]

We decided on adding a link to third party plugins on our blockly samples page. This requires some changes to our site (see this issue) so it might take us a few weeks to add. However, we will send a link to this plugin in our release email next week to get the word out : ) 

Thanks again! 

Abby

[Noah]

Awesome,

Thank you!!

I published it to NPM and I have it working with my blockly code as well.

If anything needs to be changed or you have any ideas please let me know.

Thank you

Noah

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/705ebfb3-cbc7-4258-88be-d61f2d2b60e9n%40googlegroups.com.