Utiliser js_of_ocaml pour les tps

Version & licenses
Creative Commons License

Utiliser js_of_ocaml pour les tps

Guyslain Naves

js_of_ocaml est un compilateur Ocaml vers Javascript, qui permet donc d'écrire des applications webs directement en Ocaml. Ces concepteurs proposent en démonstration un toplevel Ocaml tournant directement dans un navigateur.

L'outil est disponible ici, avec la possibilité de lancer des animations.

Pour les TP, il nous faut parfois utiliser le module Graphics de la librairie standard pour faire des dessins. Cela tombe bien, nous disposons avec js_of_ocaml d'une version adaptée pour dessiner dans les canvas. Cela demande un peu de travail pour créer un canvas, mais je l'ai fait pour vous. Vous pouvez soit :

  • aller directement sur ce lien,
  • soit recopier le code en bas de cette page directement dans le toplevel (et appuyer sur la touche Entrée pour l'évaluer).

Cela nettoie la page contenant le toplevel pour ne garder que ce qui nous est utile, crée un canvas de taille 600 par 600 , et le charge avec Graphics_js. Vous pouvez ensuite utiliser l'API pour dessiner.

  1. let rec remove_children_of_node node =
  2. match Js.Opt.to_option (node##.firstChild) with
  3. | None -> ()
  4. | Some child ->
  5. ignore (node##removeChild(child));
  6. remove_children_of_node node


  9. (* the biggest div on the right of the screen *)
  10. let side_div =
  11. Dom_html.getElementById "toplevel-side"
  12. |> Dom_html.CoerceTo.div
  13. |> fun opt ->
  14. Js.Opt.case opt
  15. (fun () -> assert false)
  16. (fun div -> div)


  19. (* remove the useless stuff *)
  20. let clear_side () = remove_children_of_node side_div


  23. (* A function to create a canvas on the right side of the screen *)
  24. let create_new_canvas ~x ~y =
  25. let canvas = Dom_html.createCanvas Dom_html.document in
  26. let canvas_as_node = (canvas :> Dom.node Js.t) in
  27. ignore (side_div##appendChild(canvas_as_node));
  28. Graphics_js.open_canvas canvas;
  29. Graphics_js.resize_window x y;
  30. canvas


  33. (* The canvas opened at beginning *)
  34. let first_canvas_id =
  35. clear_side ();
  36. create_new_canvas ~x:600 ~y:600