simonh1000 / elm-colorpicker Goto Github PK
View Code? Open in Web Editor NEWElm library to implement a color picker tool
Home Page: http://package.elm-lang.org/packages/simonh1000/elm-colorpicker/latest
License: MIT License
Elm library to implement a color picker tool
Home Page: http://package.elm-lang.org/packages/simonh1000/elm-colorpicker/latest
License: MIT License
Thanks for making this package, I use it for my Elm-powered knitting pattern designer.
I found a bug in the hex conversion functions, since elm-hex needs a value between 0 and 255 (for colors), it will not work when using the values directly from Color
which is now between 0 and 1. color2Hex
can be fixed by multiplying with 255 in the List.map
and hex2Color
by using Color.rgb255
instead of Color.rgb
.
I can make a pull request attempting to fix this, but since they are no longer used internally and elm-color has a toCssString
function. You might want to remove them altogether. Then you can also drop the elm-hex dependency.
The state of the colorpicker is only for tracking the mouse if I am not mistaken.
If we use MouseEvent.button
or MouseEvent.which
for safari, we can simplify the colorpicker even more.
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
It wasn't immediately obvious to me that avh4/elm-color
also needs to be installed & imported in order for the example code to run.
Perhaps something like:
import Html exposing (Html)
import ColorPicker
import Color exposing (Color)
might make it more clear that the example relies on elm-color
in particular?
Thanks for this ColorPicker. I really like it.
When not starting with white or black though, the hue in the colorpicker is incorrect:
Hue should be at red, is at cyan
Here the relevant code:
type alias Model =
{ colorPicker : ColorPicker.State }
initialModel : Model
initialModel =
{ colorPicker = ColorPicker.empty }
type Msg = ColorPickerMsg ColorPicker.Msg
update : Msg -> Model -> Model
update msg model =
model
view : Model -> Html Msg
view model =
div []
[ Html.map ColorPickerMsg <| ColorPicker.view (Color.rgb 1.0 0.0 0.0) model.colorPicker
]
When using two colorpickers at the same time, the background of the second alpha selector is always the one of the first:
See this ellie-example
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.