shamansir / tron-gui / Tron.Option.Communication

The communication configuration for the WithTron interface.

Ports are meant to connect with real ports of your app, with the help of map you may convert the data flow to anything you like.

See Tron.Tree.Expose.Data for the types that are transferred here, such as Exp.Out, Exp.In, Exp.Tree, etc.

import Tron.Tree.Expose.Data as Exp

Ports


type alias Ports msg =
{ ack : Maybe (Tron.Tree.Expose.Data.Ack -> Platform.Cmd.Cmd msg)
, transmit : Maybe (Tron.Tree.Expose.Data.Out -> Platform.Cmd.Cmd msg)
, apply : Maybe (Platform.Sub.Sub (List Tron.Tree.Expose.Data.DeduceIn))
, receive : Maybe (Platform.Sub.Sub Tron.Tree.Expose.Data.In)
, build : Maybe (Platform.Sub.Sub Tron.Tree.Expose.Data.Tree) 
}

If the GUI communicates with outside world using ports

map : (msgA -> msgB) -> Ports msgA -> Ports msgB

none : Ports msg

No communication with JS

Prepared configurations

sendJson : { ack : Tron.Tree.Expose.Data.Tree -> Platform.Cmd.Cmd msg, transmit : Tron.Tree.Expose.Data.Out -> Platform.Cmd.Cmd msg } -> Ports msg

Send JSON values using given ports:

sendReceiveJson : { ack : Tron.Tree.Expose.Data.Tree -> Platform.Cmd.Cmd msg, transmit : Tron.Tree.Expose.Data.Out -> Platform.Cmd.Cmd msg, apply : Platform.Sub.Sub (List Tron.Tree.Expose.Data.DeduceIn) } -> Ports msg

Send JSON values and receive updates using given ports:

receiveJson : { build : Platform.Sub.Sub Tron.Tree.Expose.Data.Tree, transmit : Tron.Tree.Expose.Data.Out -> Platform.Cmd.Cmd msg, apply : Platform.Sub.Sub (List Tron.Tree.Expose.Data.DeduceIn) } -> Ports msg

Receive JSON tree and values and send updates using given ports:

NB: for build port to work properly, you are required to set for to always return the previous tree, or at least the very same structure as the previous tree; E.g. if you use WithTron.justUiAndCommunication, just set for to identity:

WithTron.justUiAndCommunication
    (Render.toHtml Dock.center Theme.light)
    (Communication.receiveJson { build = build, transmit = transmit, apply = apply })
    identity

See BuildFromJs example for reference.

sendStrings : { transmit : ( List Tron.Path.Label, String ) -> Platform.Cmd.Cmd msg } -> Ports msg

Send values as strings using given ports:

detachable : { ack : Tron.Tree.Expose.Data.Ack -> Platform.Cmd.Cmd msg, transmit : Tron.Tree.Expose.Data.Out -> Platform.Cmd.Cmd msg, receive : Platform.Sub.Sub Tron.Tree.Expose.Data.In } -> Ports msg

Send information to WebSocket server and receive it from the server.

Only works with .application since needs URL access to store Client ID/Path:

main : WithTron.Program () Example.Model Example.Msg
main =
    WithTron.application
        (Render.toHtml Dock.center Theme.light)
        (Communication.detachable
            { ack = ack
            , transmit = transmit
            , receive = receieve identity
            }
        )
        { for = ExampleGui.for
        , init = always Example.init
        , view =
            \model ->
                { title = "Detachable Tron"
                , body = [ Example.view model ]
                }
        , update = Example.update
        , subscriptions = always Sub.none
        , onUrlChange = always Example.NoOp
        , onUrlRequest = always Example.NoOp
        }


port receive : (Exp.In -> msg) -> Sub msg

port transmit : Exp.Out -> Cmd msg

port ack : Exp.Ack -> Cmd msg

This needs example/ws-client.js and example/ws-server.js to exist. The server should be started before running the application with node ./ws-server.js, and ws-client.js just needs be included in your HTML, and then:

const app = Elm.YourApp.Main.init({
    node : document.getElementById("elm-node")
});

startWs(app.ports.ack, app.ports.receive, app.ports.transmit);

See example/Detachable for details.

withDatGui : { ack : Tron.Tree.Expose.Data.Tree -> Platform.Cmd.Cmd msg, receive : Platform.Sub.Sub Tron.Tree.Expose.Data.In } -> Ports msg

Connect with dat.gui using given ports:

dat.gui library should be included in your HTML file.

See example/DatGui for details.

All the possible ports

connect : { ack : Tron.Tree.Expose.Data.Ack -> Platform.Cmd.Cmd msg, transmit : Tron.Tree.Expose.Data.Out -> Platform.Cmd.Cmd msg, apply : Platform.Sub.Sub (List Tron.Tree.Expose.Data.DeduceIn), receive : Platform.Sub.Sub Tron.Tree.Expose.Data.In, build : Platform.Sub.Sub Tron.Tree.Expose.Data.Tree } -> Ports msg

Use all the communication you can imagine.