elm-widgets

Analog control widgets in ELM written in elm-svg

demo: https://obscure-sands-3870.herokuapp.com/ sample project: https://github.com/jundato/elm-widgets-src

Installation

On your project folder. Execute the ff commands:

elm-package install remoteradio\elm-widgets

Seven Segment

sevenSegment : SevenSegmentProperties -> SevenSegmentStyle -> Svg

usage example:

let sevenSegmentProperties = { defaultSevenSegmentProperties | digits <- "1020" }
    sevenSegmentStyle = { defaultSeventSegmentStyle | textColor <- "#AAF"
                                                    , backgroundColor <- "#FFF" }
in sevenSegment sevenSegmentProperties sevenSegmentStyle

Segmented Bar Graph

segmentedBarGraph : SegmentedBarGraphProperties -> SegmentedBarGraphStyle -> Svg

usage example:

let segmentedBarGraphProperties = { defaultSegmentedBarGraphProperties | digits <- "1020" }
    segmentedBarGraphStyle = { defaultSegmentedBarGraphStyle  | emptyColor <- "#555"
                                                              , backgroundColor <- "#FFF" }
in segmentedBarGraph segmentedBarGraphProperties segmentedBarGraphStyle

Simulated Analog Meter

simulatedAnalogMeter : SimulatedAnalogMeterProperties -> SimulatedAnalogMeterStyle -> Svg

usage example:

let simulatedAnalogMeterProperties =
      { defaultSimulatedAnalogMeterProperties | currentValue <- "22"
                                              , ranges <- [ { color = "#00F"
                                                            , minValue = 0
                                                            , maxValue = 29.99 }
                                                          , { color = "#0F0"
                                                            , minValue = 0
                                                            , maxValue = 70.99 }
                                                          , { color = "#F00"
                                                            , minValue = 0
                                                            , maxValue = 70.99 ]}
    simulatedAnalogMeterStyle = defaultSimulatedAnalogMeterStyle
in simulatedAnalogMeter simulatedAnalogMeterProperties simulatedAnalogMeterStyle

Installation: elm-package install remoteradio/elm-widgets