Robotic Operation System позволяет взаимодействовать своим подсистемам по механизмам «подписка на топик» и «вызов сервиса» по своему специальному протоколу. Но есть пакет rosbridge, который позволяет общаться с ROS извне с помощью websocket. Описанный протокол позволяет выполнять основные операции по взаимодействию с другими подсистемами.ELM — очень простой и элегантный язык, компилирующийся в javascript и отлично подходящий для разработки интерактивных программ.
Я решил совместить приятное с полезным и изучать ROS (по которой сейчас идет курс) и ELM вместе.
В ROS есть демонстрационный модуль turtlesim, эмулирующий робота-черепашку. Один из предоставляемых им узлов рисует движение черепашки в своем окне, другой — преобразует нажатия стрелок на клавиатуре в команды движения и поворотов черепашки. К этому процессу можно подключиться из простой программы на ELM.
ELM использует паттерн model-updater-view. Состояние программы описывается типом данных Model, функция update берет входящие события типа Msg и преобразует старую модель в новую (и, возможно, операцию, которую надо выполнить), а функция view по модели строит ее представление в пользовательком интерфейсе, который может порождать события типа Msg. Еще события могут приходить по подпискам, которые создаются специальной функцией из модели.
Обобщенная web-программа на ELM выглядит так:
init : ( Model, Cmd Msg ) update : Msg -> Model -> ( Model, Cmd Msg ) view : Model -> Html Msg subscriptions : Model -> Sub Msg main = Html.program { init = init , view = view , update = update , subscriptions = subscriptions }
а программисту оста��тся только реализовать эти четыре функции.
Опишем модель:
type alias Model = { x : Float , y : Float -- координаты черепашки , dir : Float -- направление, в котором черепашка смотрит , connected : Bool -- подключенность к серверу , ws : String -- URL websocket, который слушает rosbridge -- если ROS запущен на рабочей машине -- и все настроено поумолчанию, -- url будет ws://localhost:9090/ , topic : String -- топик, по которому управляется черепашка, -- обычно /turtle1/cmd_vel , input : String -- JSON сообщение, которое мы можем редактировать -- и отправить в систему руками , messages : List String -- Пришедшие со стороны rosbridge сообщения -- эти поля требуются только для отладки -- и в исследовательских целях } init : ( Model, Cmd Msg ) init = ( Model 50 50 0 False "ws://192.168.56.101:9090/" "/turtle1/cmd_vel" "" [] , Cmd.none )
Пока ни чего сложного, модель представляет из себя структуру с именованными полями.
Тип Msg устроен менее привычно для ОО-программистов:
type Msg = Send String | NewMessage String | EnterUrl String | EnterTopic String | Connect | Input String
Это так называемый алгебраический тип, описывающий прямую (размеченную) сумму нескольких альтернатив. Наиболее близкое предстваление этого типа в ООП — Msg объявляется абстрактным классом, а каждая строка алитернативы описывает новый, унаследованный от Msg, конкретный класс. Input, Send и прочее — это имена-конструкторы этих классов, за которыми следуют параметры конструктора, которые превращаются в поля класса.
Каждая альтернатива это запрос на изменение модели и выполнение каких-либо операций, который порождается действиями пользователя с интерфейсом (view) или внешними событиями — получением данных из websocket.
- Send String — запрос на отправку строки в websocket
- NewMessage String — обработать принятую из websocket строку
- EnterUrl String — редактируется url для websocket
- EnterTopic String — редактируется топик
- Connect — закончить редактирование настроек и связаться с сервером
- Input String — редактирование «ручного» сообщения в websocket
Теперь более-менее понятно, как реализовать функцию update:
update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of EnterTopic newInput -> ( { model | topic = newInput }, Cmd.none ) EnterUrl newInput -> ( { model | ws = newInput }, Cmd.none ) Connect -> ( { model | connected = True }, WebSocket.send model.ws (subscr model.topic) ) Input newInput -> ( { model | input = newInput }, Cmd.none ) Send data -> ( { model | input = "" }, WebSocket.send model.ws data ) NewMessage str -> case Decode.decodeString (decodePublish decodeTwist) str of Err _ -> ( { model | messages = str :: model.messages }, Cmd.none ) Ok t -> let ( r, a ) = turtleMove t.msg dir = model.dir + a in ( { model | x = model.x + r * sin dir , y = model.y + r * cos dir , dir = dir , messages = str :: model.messages } , Cmd.none )
Здесь используются несколько функций, которые мы определим позднее:
- subscr: String -> String — конструирует строку запроса для подписки на топик в rosbridge
- (decodePublish decodeTwist) — декодирование сообщения от топика, содержащее данные ROS-типа geometry_msgs/Twist, с которыми оперирует черепашка
- turtleMove: Twist -> ( Float, Float ) — извлечение из сообщения перемещения и угла поворота череп��шки
А пока определим функцию view:
view : Model -> Html Msg view model = div [] <| if model.connected then let x = toString model.x y = toString model.y dirx = toString (model.x + 5 * sin model.dir) diry = toString (model.y + 5 * cos model.dir) in [ svg [ viewBox "0 0 100 100", Svg.Attributes.width "300px" ] [ circle [ cx x, cy y, r "4" ] [] , line [ x1 x, y1 y, x2 dirx, y2 diry, stroke "red" ] [] ] , br [] [] , button [ onClick <| Send <| pub model.topic 0 1 ] [ Html.text "Left" ] , button [ onClick <| Send <| pub model.topic 1 0 ] [ Html.text "Forward" ] , button [ onClick <| Send <| pub model.topic -1 0 ] [ Html.text "Back" ] , button [ onClick <| Send <| pub model.topic 0 -1 ] [ Html.text "Rigth" ] , br [] [] , input [ Html.Attributes.type_ "textaria", onInput Input ] [] , button [ onClick (Send model.input) ] [ Html.text "Send" ] , div [] (List.map viewMessage model.messages) ] else [ Html.text "WS: " , input [ Html.Attributes.type_ "text" , Html.Attributes.value model.ws , onInput EnterUrl ] [] , Html.text "Turtlr topic: " , input [ Html.Attributes.type_ "text" , Html.Attributes.value model.topic , onInput EnterTopic ] [] , br [] [] , button [ onClick Connect ] [ Html.text "Connect" ] ] viewMessage : String -> Html msg viewMessage msg = div [] [ Html.text msg ]
view создает DOM (можно чтитать, что просто html). Каждый объект (тег) генерируется отдельной функцией из библиотеки «elm-lang/html», которая принимает два параметра — список аттрибутов, типа Html.Attribute и список вложенных объектов/тегов. (Лично я считаю такое решение неудачным — я как-то поместил вложенный элемент в тег br и потом долго не мог найти его на экране, правильная библиотека не должна позволить сделать такую ошибку, оставив у br только аргумент с аттрибутами. Но возможно, в таком подходе есть глубокий смысл для специалистов во фронтетде.)
Отдельно я хочу описать аттрибуты. Тип Html.Attribute — это сборная-солянка для совершенно разнородных сущностей. Например
Html.Attributes.type_ : String -> Html.Attribute msg задает тип в таких тегах, как imput, а Html.Events.onClick : msg -> Html.Attribute msg задает событие, которое должно произойти при клике на этот элемент.Полностью прописать Html.Attributes.type_ в коде пришлось из за конфликта с Svg.Attributes.type_.
Рассмотрим кусочек кода, который может быть труден для восприятия:
onClick <| Send <| pub model.topic 0 1
Он эквивалентен
onClick (Send (pub model.topic 0 1))
<| — это оператор применения функции к аргументу (в Haskell он называется '$'), который позволяет использовать меньше скобок.onClick — уже рассмотренная создания аттрибута, ее параметр — генерируемое событие.Send — один их конструкторов типа Msg, ее патаметр — строка, которую мы хотим потом отправить в websocket.Конструкторы и типы в ELM пишутся с большой буквы, а переменные (точнее константы и параметры функций), обычные и типовые, с маленькой.
pub model.topic 0 1 — вызов функции создания запроса на отправку сообщения о движении черепашки на топик. Топик берется из модели, а 0 и 1 — перемещение и поворот.Опишем недостающие функции. Проще всего создавать сообщения для отправки в websocket, так как это просто строки:
subscr : String -> String subscr topic = "{\"op\":\"subscribe\",\"topic\":\"" ++ topic ++ "\"}" pub : String -> Float -> Float -> String pub topic m r = "{\"topic\":\"" ++ topic ++ "\",\"msg\":{\"linear\":{\"y\":0.0,\"x\":" ++ toString m ++ ",\"z\": 0.0},\"angular\":{\"y\":0.0,\"x\":0.0,\"z\":" ++ toString r ++ "}},\"op\":\"publish\"}"
С обработкой сообщений немного сложнее. Тип сообщения, с которым работает turtlesim можно посмотреть средствами ROS:
ros:~$ rosmsg info geometry_msgs/Twist geometry_msgs/Vector3 linear float64 x float64 y float64 z geometry_msgs/Vector3 angular float64 x float64 y float64 z
rosbridge его превращает в json и заворачивает в сообщение о событии на топике.
Декодирование его будет выглядеть так:
type alias Vector3 = ( Float, Float, Float ) type alias Twist = { linear : Vector3, angular : Vector3 } decodV3 : Decode.Decoder Vector3 decodV3 = Decode.map3 (,,) (Decode.at [ "x" ] Decode.float) (Decode.at [ "y" ] Decode.float) (Decode.at [ "z" ] Decode.float) decodeTwist : Decode.Decoder Twist decodeTwist = Decode.map2 Twist (Decode.at [ "linear" ] decodV3) (Decode.at [ "angular" ] decodV3) type alias Publish a = { msg : a, topic : String, op : String } decodePublish : Decode.Decoder a -> Decode.Decoder (Publish a) decodePublish decMsg = Decode.map3 (\t m o -> { msg = m, topic = t, op = o }) (Decode.at [ "topic" ] Decode.string) (Decode.at [ "msg" ] decMsg) (Decode.at [ "op" ] Decode.string)
Декодер Json-представления некоторого типа комбинируется из других декодеров.
Decode.map3 (,,) применяет три декодера, переданные ему в параметрах, и создает тупл из трех декодорованных элементов с помощью операции (,,).Decode.at декодирует величину, извлеченную по данному пути в Json заданным декодером.Код
(\t m o -> { msg = m, topic = t, op = o })
описывает замыкание. Он аналогичен коду на js:
function (t,m,o) { return {"msg":m, "t":t, "op":p} }
Полный код можно взять с github.
Если есть желание попробовать ROS придется установить самостоятельно. Вместо установки ELM можно воспользоваться сервисом.
