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
{ 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
example/ReportToJs
and Tron.Tree.Expose.Data
module documentation for details;example/ListenFromJs
and Tron.Tree.Expose.Data
module documentation for details;example/BuildFromJs
and Tron.Tree.Expose.Data
module documentation for details;example/Detachable
for details, ensure to run example/start-server.sh
before running start-example Detachable
;dat.gui
using given ports: see example/DatGui
for details;map : (msgA -> msgB) -> Ports msgA -> Ports msgB
none : Ports msg
No communication with JS
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:
ack
sends the encoded GUI structure at start of the application;transmit
sends the value and path to it in JSON, if it was changed;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:
ack
sends the encoded GUI structure at start of the application;transmit
sends the value and path to it in JSON, if it was changed;apply
gets the list of label paths and values and tries to apply them to
the current state of the tree, if they match it;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.
build
receives the tree structure to build UI from;transmit
sends the value and path to it to JS in JSON, when it was changed;apply
gets the list of label paths and values and tries to apply them to
the current state of the tree, if they match it;sendStrings : { transmit : ( List Tron.Path.Label, String ) -> Platform.Cmd.Cmd msg } -> Ports msg
Send values as strings using given ports:
transmit
sends the value and path to it, when value was changed;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.
ack
sends the client ID if is new (randomly-generated) or the exising one (was specified in the URL);transmit
sends the JSON value and path to it, when value was changed;receive
receives the value updates from the clients with the same ID;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:
ack
sends the encoded GUI structure at start of the application;receive
receives the value and path to it in JSON, if it was changed in dat.gui
, and immediately applies it your program;dat.gui
library should be included in your HTML file.
See example/DatGui
for details.
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.