emscripten-hello: improve mainloop integration

Instead of simply relying on the emscripten mainloop api to wake us up
periodically so that we can poll for SDL events we now pause the
emscripten mainloop whenever no redraw is queued and instead hook an
input event listener into the real browser mainloop to resume the
emscripten mainloop whenever input is received. This way the example
can go to sleep while there's no input to handle.

This provides a simple example of binding custom javascript into native
code.

Reviewed-by: Neil Roberts <neil@linux.intel.com>

(cherry picked from commit a8b1e2eda491dc7c44c84cd47e160c7b8ba0f792)

examples/Makefile.am

@@ -105,7 +105,7 @@ endif
 
 if USING_EMSCRIPTEN
 %.html: %.o $(top_builddir)/cogl/.libs/libcogl2.so $(top_builddir)/deps/glib/.libs/libglib.a
-	$(CC) $(AM_CFLAGS) $(CFLAGS) -o $@ $^
+	$(CC) $(AM_CFLAGS) $(CFLAGS) --js-library $(top_srcdir)/examples/emscripten-example-js-library.js -o $@ $^
 
 all-local: $(addsuffix .html, $(programs))
 endif

examples/cogl-emscripten-hello.c

@@ -2,9 +2,10 @@
 #include <stdio.h>
 #include <SDL.h>
 #include <emscripten.h>
+#include "emscripten-example-js.h"
 
-/* This short example is just to demonstrate mixing SDL with Cogl as a
-   simple way to get portable support for events */
+/* This short example is just to demonstrate using Cogl with
+ * Emscripten using SDL to receive input events */
 
 typedef struct Data
 {
@@ -40,10 +41,6 @@ handle_event (Data *data, SDL_Event *event)
 {
   switch (event->type)
     {
-    case SDL_VIDEOEXPOSE:
-      data->redraw_queued = TRUE;
-      break;
-
     case SDL_MOUSEMOTION:
       {
         int width =
@@ -76,15 +73,23 @@ static void
 mainloop (void)
 {
   SDL_Event event;
+
   while (SDL_PollEvent (&event))
     {
       handle_event (&data, &event);
       cogl_sdl_handle_event (ctx, &event);
     }
 
-  redraw (&data);
+  if (data.redraw_queued && data.ready_to_draw)
+    {
       data.redraw_queued = FALSE;
       data.ready_to_draw = FALSE;
+      redraw (&data);
+    }
+
+  /* NB: The mainloop will be automatically resumed if user input is received */
+  if (!data.redraw_queued)
+    emscripten_pause_main_loop ();
 
   cogl_sdl_idle (ctx);
 }
@@ -127,6 +132,15 @@ main (int argc, char **argv)
   data.redraw_queued = TRUE;
   data.ready_to_draw = TRUE;
 
+  /* The emscripten mainloop isn't event driven, it's periodic and so
+   * we aim to pause the emscripten mainlooop whenever we don't have a
+   * redraw queued. What we do instead is hook into the real browser
+   * mainloop using this javascript binding api to add an input event
+   * listener that will resume the emscripten mainloop whenever input
+   * is received.
+   */
+  example_js_add_input_listener ();
+
   emscripten_set_main_loop (mainloop, -1, TRUE);
 
   cogl_object_unref (ctx);

examples/emscripten-example-js-library.js

@@ -0,0 +1,19 @@
+//"use strict";
+
+var LibraryEXAMPLE = {
+    $EXAMPLE__deps: ['$Browser'],
+    $EXAMPLE: {
+	receiveEvent: function(event) {
+	    Browser.mainLoop.resume();
+	},
+    },
+    example_js_add_input_listener: function() {
+	['mousedown', 'mouseup', 'mousemove', 'DOMMouseScroll',
+         'mousewheel', 'mouseout'].forEach(function(event) {
+	    Module['canvas'].addEventListener(event, EXAMPLE.receiveEvent, true);
+	});
+    }
+};
+
+autoAddDeps(LibraryEXAMPLE, '$EXAMPLE');
+mergeInto(LibraryManager.library, LibraryEXAMPLE);

examples/emscripten-example-js.h

@@ -0,0 +1,18 @@
+
+#ifndef _EMSCRIPTEN_EXAMPLE_JS_H_
+#define _EMSCRIPTEN_EXAMPLE_JS_H_
+
+/*
+ * example_js_add_input_listener:
+ *
+ * Adds an input event listener to the browser's mainloop and whenever
+ * input is received then the emscripten mainloop is resumed, if it
+ * has been paused.
+ *
+ * This means we don't have to poll SDL for events and can instead go
+ * to sleep waiting in the browser mainloop when there's no input and
+ * nothing being animated.
+ */
+void example_js_add_input_listener (void);
+
+#endif /* _EMSCRIPTEN_EXAMPLE_JS_H_ */