Convert ASCII to SVG
It is a fork of Ivan Ceras example that is hosted at:
https://github.com/ivanceras/elm-examples
getSvg : List (Svg.Attribute msg) -> String -> Settings -> Html msg
Get the resulting svg and pass it into a div or whatever
defaultOptions : Settings
Default parameters to work with ...
defaultOptions =
{ fontSize = 14.0
, lineWidth = 1.0
, textWidth = 8.0
, textHeight = 16.0
, arcRadius = 4.0
, color =
{ stroke = "#222"
, text = "black"
, background = "white"
}
, verbatim =
{ string = "\""
, multiline = False
, height = Nothing
, width = Nothing
}
}
getSvgWith : (String -> Svg msg) -> List (Svg.Attribute msg) -> String -> Settings -> Html msg
Get the resulting svg and pass it into a div or parse it further or do whatever ...
getElements : Settings -> String -> Configuration String
Identified elements can be stored for later usage and verbatim code can be exposed, so that it can be transformed into any other kind of representation.
The foreign part can be translated into anything, strings are not mandatory. This way it can also be used within your model, if those foreign elements are used to store more relevant information.
Use this function in conjunction with drawElements
.
drawElements : List (Svg.Attribute msg) -> (a -> Svg msg) -> Configuration a -> Html msg
Use this to draw the result of the getElements function into an svg container. The function that translates foreign objects into Svg elements is mandatory.
Model.Settings
general settings ...
type alias Settings =
{ fontSize : Float
, lineWidth : Float
, textWidth : Float
, textHeight : Float
, arcRadius : Float
, color :
{ stroke : String
, text : String
, background : String
}
, verbatim :
{ string : String
, multiline : Bool
, height : Maybe String
, width : Maybe String
}
}
The additional verbatim.height
and verbatim.width
can be used to overwrite the
calculated dimensions for that specific element. Otherwise the dimensions for
verbatim elements are calculated on the basis of the position and dimensions
of the strings within the ASCII-Art image.
{ svg : List ( Types.Point
, Types.Element )
, foreign : List ( a
, ( Types.Point
, ( Basics.Int
, Basics.Int ) ) )
, settings : Settings
, columns : Basics.Int
, rows : Basics.Int
}
This record is used to store all relevant data to draw an svg-image multiple times, without re-parsing it.
setColors : Model.Colors -> Settings -> Settings
Helper for changing the color settings.
settings
|> setColors { stroke = "red", text = "green", background = "blue" }
|> getSvg [] ...
setColorsIn : Model.Colors -> Configuration a -> Configuration a
Helper for changing the color configuration.
config
|> setColorsIn { stroke = "red", text = "green", background = "blue" }
|> drawElements [] ...