[{"name":"Knob","comment":" Let's get started creating a control panel full of “knobs” to interactively tweak values in our application.\n\nWhen creating a knob, two considerations are important.\nThe first is the type of the value you need to control.\nSo far we don't have many options, as only knobs that control numbers (`Int`s and `Float`s) are available in this package.\nThe second important consideration is the interface you want to provide to manipulate that value,\ni.e. the control itself.\nThis package's knobs are named putting the value's type first,\nso it's easier to find the one you want according to the value you need to produce.\n\n@docs Knob\n\n\n# Creating knobs for base values\n\nFirst up, within our app's `init` let's create a `Knob` and put it in the model.\nThe following are the functions you can use to create basic knobs that map to a single primitive value.\n\n@docs float, floatConstrained, floatSlider\n@docs int, intConstrained, intSlider\n\n\n# Displaying\n\nThe next step is to actually show our knob in the page.\n\n@docs view, styles\n\n\n# Retrieving the value\n\nOf course, our knobs are of no use to us if we can't read the value entered by the user.\n\n@docs value\n\n\n# Composing knobs\n\nMost of the time you'll want to control multiple values.\nFor that purpose we're going to “stack” our knobs together.\n\n@docs compose, stack\n\n\n# Organization\n\nWe could have a bunch of similar knobs in our panel and not know what each of them does,\nso let's make sure we do!\n\n@docs label, stackLabel\n\n","unions":[{"name":"Knob","comment":" Represents one user-interactive control mapped to one value of type `a`,\nwhich this package refers to as a “knob”.\nThis is the base type used to create your knobs control panel!\nNormally you'll have one of these stored in your model.\n","args":["a"],"cases":[]}],"aliases":[],"values":[{"name":"compose","comment":" Creates a knob that joins multiple knobs to build up a record\n(or actually any data structure you want, depending on the `constructor` argument you pass it!).\n\nPipe ([`|>`](/packages/elm/core/latest/Basics#%7C%3E)) the knobs into it\nusing [`stack`](Knob#stack) or [`stackLabel`](Knob#stackLabel) in order to provide the arguments.\n\n    type alias Controls =\n        { someNumber : Float\n        , anInteger : Int\n        }\n\n    aKnob =\n        Knob.compose Controls\n            -- This knob will map to `someNumber`:\n            |> Knob.stack (Knob.float 1 0)\n            -- This one will map to `anInteger`:\n            |> Knob.stack (Knob.int 1 0)\n\nHere's how you use it to build up a different data structure, in this case a tuple.\nNotice that the number of arguments in the function matches the number of “stacks”.\n\n    anotherKnob =\n        Knob.compose (\\theFloat theInt -> ( theFloat, theInt ))\n            |> Knob.stack (Knob.float 1 0)\n            |> Knob.stack (Knob.int 1 0)\n\n","type":"(a -> b) -> Knob.Knob (a -> b)"},{"name":"float","comment":" Creates an input field knob for manually entering any floating point number.\nThe `step` argument specifies the amount the number will increase or decrease\nwhen pressing the up and down keys.\n`initial` is just the value it takes on first load.\n","type":"{ step : Basics.Float, initial : Basics.Float } -> Knob.Knob Basics.Float"},{"name":"floatConstrained","comment":" Creates an input field knob for manually entering numbers within a specific range,\nwhere `range = ( min, max )`.\nThe `step` argument specifies the amount the number will increase or decrease\nwhen pressing the up and down keys.\n`initial` is just the value it takes on first load.\n","type":"{ range : ( Basics.Float, Basics.Float ), step : Basics.Float, initial : Basics.Float } -> Knob.Knob Basics.Float"},{"name":"floatSlider","comment":" Creates a slider knob useful for quickly tweaking numbers when precision is not needed.\nRequires a `range = ( min, max )` to set the boundaries of the slider control.\n`initial` is just the value it takes on first load.\n\nThe `step` argument indicates the granularity of the values the slider will allow,\nso a step of `1` will produce a slider that jumps between values like `1`, `2`, `3` as you slide it to the right,\nwhereas a step of `0.1` will produce one that allows setting values like `1.1` or `2.5`.\n\n","type":"{ range : ( Basics.Float, Basics.Float ), step : Basics.Float, initial : Basics.Float } -> Knob.Knob Basics.Float"},{"name":"int","comment":" Creates an input field knob for manually entering any integer.\nThe `step` argument specifies the amount the number will increase or decrease\nwhen pressing the up and down keys.\n`initial` is just the value it takes on first load.\n","type":"{ step : Basics.Int, initial : Basics.Int } -> Knob.Knob Basics.Int"},{"name":"intConstrained","comment":" Creates an input field knob for manually entering integers within a specific range.\nThe `step` argument specifies the amount the number will increase or decrease\nwhen pressing the up and down keys.\n`initial` is just the value it takes on first load.\n","type":"{ range : ( Basics.Int, Basics.Int ), step : Basics.Int, initial : Basics.Int } -> Knob.Knob Basics.Int"},{"name":"intSlider","comment":" Creates a slider knob useful for quickly tweaking integers when precision is not needed.\nRequires a `range = ( min, max )` to set the boundaries of the slider control.\n`initial` is just the value it takes on first load.\n\nThe `step` argument indicates the granularity of the values the slider will allow,\nso a step of `1` will produce a slider that will set on any integer value as you slide it to the right,\nwhereas a step of `10` will produce one that makes bigger jumps between `10`, `20`, `30`, etc.\n\n","type":"{ range : ( Basics.Int, Basics.Int ), step : Basics.Int, initial : Basics.Int } -> Knob.Knob Basics.Int"},{"name":"label","comment":" Attaches a text description next to a knob, as a way to identify what the control is for.\n\nThe following example will produce a [`float`](Knob#float) knob described as “x position”.\n\n    Knob.label \"x position\" (Knob.float 1 0)\n\n","type":"String.String -> Knob.Knob a -> Knob.Knob a"},{"name":"stack","comment":" Adds a knob into a [`compose`](Knob#compose) knob.\nSee the documentation for that for an example.\n\nThis function is called “stack” because the order you compose your knobs does matter,\nas they will be displayed one on top of the other!\n\n","type":"Knob.Knob a -> Knob.Knob (a -> b) -> Knob.Knob b"},{"name":"stackLabel","comment":" Convenience function that unifies the functionality of [`stack`](Knob#stack) and [`label`](Knob#label).\n\nThe two examples below produce the same identical result:\n\n    -- The simplified way:\n    Knob.stackLabel \"Some label\" someKnob\n\n    -- The regular way:\n    Knob.stack (Knob.label \"Some label\" someKnob)\n\n","type":"String.String -> Knob.Knob a -> Knob.Knob (a -> b) -> Knob.Knob b"},{"name":"styles","comment":" Default styles for the knobs, provided as a `<style>` tag.\nPut this as a child somewhere in your view in order to use them.\n\nYou could choose not to use these default styles and instead provide your own.\nI recommend you check the DOM output in your browser's inspector—the structure of the HTML produced is pretty simple!\n\n","type":"Html.Html msg"},{"name":"value","comment":" Extract the current value out of a knob.\nUse it in your view to affect what you display.\n\n    Knob.value someKnob\n\n","type":"Knob.Knob a -> a"},{"name":"view","comment":" Converts a knob into HTML to put in your view.\nYou should display a single [`Knob`](Knob#Knob) value at any which time,\nso if you need multiple knobs, make sure you [`compose`](Knob#compose) them into a single value!\n\nKnobs keep track of their state once they're put in the view,\nbut for that you need to wire them up with a message,\nwhich is the first argument that this function takes.\n\nThis function produces plain HTML with no styles, so make sure you also include [`styles`](Knob#styles)\nin your page to make it display properly, or provide your own custom styles.\n\n    -- Prepare a message for your knob:\n    type Msg =\n        KnobUpdated (Knob YourType)\n\n    -- Put this as an HTML node within your view:\n    Knob.view KnobUpdated yourKnob\n\nCheck [the documentation's readme](https://package.elm-lang.org/packages/agj/elm-knobs/latest/) for a full demonstration on how to wire things up.\n\n","type":"(Knob.Knob a -> msg) -> Knob.Knob a -> Html.Html msg"}],"binops":[]}]