Merge pull request #649 from OpenGeoscience/line-rendering

Refactor GL line rendering

Author: manthey

.travis.yml

@@ -31,12 +31,13 @@ cache:
     - "$HOME/cache"
 
 before_install:
+  # Start xvfb with a specific resolution and pixel depth
+  - "/sbin/start-stop-daemon --start --quiet --pidfile /tmp/custom_xvfb_99.pid --make-pidfile --background --exec /usr/bin/Xvfb -- :99 -ac -screen 0 1280x1024x24"
   - CACHE="${HOME}/cache" CMAKE_VERSION=3.5.0 CMAKE_SHORT_VERSION=3.5 source ./scripts/install_cmake.sh
   - npm prune
 
 before_script:
   - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
 
 script:
   - npm run build

CMakeLists.txt

@@ -99,6 +99,16 @@ add_custom_target(
 )
 add_test(NAME get_data_files COMMAND "${CMAKE_COMMAND}" --build ${CMAKE_BINARY_DIR} --target data_files)
 
+add_custom_command(OUTPUT "${GEOJS_DEPLOY_DIR}/examples/bundle.js"
+  WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+  COMMAND npm run build-examples
+  COMMENT "Build examples"
+  VERBATIM
+)
+add_custom_target(examples DEPENDS "${GEOJS_DEPLOY_DIR}/examples/bundle.js")
+add_test(NAME build_examples COMMAND "${CMAKE_COMMAND}" --build ${CMAKE_BINARY_DIR} --target examples)
+set_property(TEST "build_examples" APPEND PROPERTY DEPENDS "get_data_files")
+
 if(FFHEADLESS_TESTS)
   find_program(NPM_EXECUTABLE npm)
   add_test(
@@ -111,6 +121,16 @@ if(FFHEADLESS_TESTS)
   set_property(TEST "total-coverage" APPEND PROPERTY DEPENDS "ffheadless")
   set_property(TEST "ffheadless" APPEND PROPERTY DEPENDS "get_data_files")
 
+  add_test(
+    NAME "examplesheadless"
+    WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+    COMMAND npm run examplesci
+  )
+  set_property(TEST "examplesheadless" APPEND PROPERTY ENVIRONMENT "CTEST_IMAGE_PATH=${CMAKE_CURRENT_BINARY_DIR}/images")
+  set_property(TEST "examplesheadless" APPEND PROPERTY ENVIRONMENT "TEST_SAVE_IMAGE=${TEST_SAVE_IMAGE}")
+  set_property(TEST "total-coverage" APPEND PROPERTY DEPENDS "examplesheadless")
+  set_property(TEST "examplesheadless" APPEND PROPERTY DEPENDS "build_examples")
+
   configure_file(
     "${CMAKE_CURRENT_SOURCE_DIR}/testing/test-runners/baseline_images.py"
     "${CMAKE_CURRENT_BINARY_DIR}/test/baseline_images.py"
@@ -124,8 +144,12 @@ add_custom_command(OUTPUT "${CMAKE_CURRENT_BINARY_DIR}/base-images.tgz"
   COMMAND "${CMAKE_COMMAND}" --build ${CMAKE_BINARY_DIR} --target data_files
   # Run the ffheadless test, asking to save all images
   COMMAND TEST_SAVE_IMAGE=all npm run ffci
+  # Build examples to make sure that they are available.
+  COMMAND npm run build-examples
+  # Run the examplesheadless test, asking to save all images
+  COMMAND TEST_SAVE_IMAGE=all npm run examplesci
   # Make a tarball of all of the images
-  COMMAND tar -zcvf "${CMAKE_CURRENT_BINARY_DIR}/base-images.tgz" --exclude=*-test.png --exclude=*-diff.png --exclude=*-base.png -C "${CMAKE_CURRENT_BINARY_DIR}/images" .
+  COMMAND tar -zcvf "${CMAKE_CURRENT_BINARY_DIR}/base-images.tgz" --exclude=*-test.png --exclude=*-diff.png --exclude=*-base.png --exclude=*-screen.png -C "${CMAKE_CURRENT_BINARY_DIR}/images" .
   COMMENT "Create baseline images, then tar them into a single file"
   VERBATIM
 )
@@ -208,9 +232,6 @@ if(SELENIUM_TESTS)
   set_property(TEST "selenium:glPointsSpeed" APPEND PROPERTY ENVIRONMENT "LOAD_SPEED_THRESHOLD=1000")
   set_property(TEST "selenium:glPointsSpeed" APPEND PROPERTY ENVIRONMENT "FRAMERATE_THRESHOLD=5")
 
-  set_property(TEST "selenium:glLinesSpeed" APPEND PROPERTY ENVIRONMENT "LOAD_SPEED_THRESHOLD=1000")
-  set_property(TEST "selenium:glLinesSpeed" APPEND PROPERTY ENVIRONMENT "FRAMERATE_THRESHOLD=2")
-
   add_custom_target(
     selenium_tests
     ALL

docs/developers.rst

@@ -109,6 +109,12 @@ test command or set this parameter in CMake.
     build correctly.  Try running ``ccmake /path/to/geojs`` for a full
     list of configuration options.
 
+Examples should be tested by creating an entry in the ``tests/example-cases/``
+directory.  To run these tests in a normal browser, run 
+``npm run start`` and browse to `<http://localhost:9876/debug.html?test=all>`_.
+Since the browser's direct screen output is used, the browser must be running 
+on the same machine as the ``npm run start`` command.
+
 Selenium testing
 ----------------
 

docs/provisioning.rst

@@ -24,6 +24,7 @@ convenience in configuring CMake options) ::
     sudo apt-get install --yes \
         cmake \
         firefox \
+        imagemagick \
         git \
         libjpeg8-dev \
         libpango1.0-dev \

examples/hurricanes/main.css

@@ -1,3 +1,6 @@
+body {
+  overflow: hidden;
+}
 #app-hovered-info {
   position: absolute;
   bottom: 10px;

examples/lines/example.json

@@ -0,0 +1,9 @@
+{
+  "path": "lines",
+  "title": "Line Feature",
+  "exampleCss": ["main.css"],
+  "exampleJs": ["main.js"],
+  "about": {
+    "text": "This example shows the variations that are available for line features."
+  }
+}

examples/lines/index.jade

@@ -0,0 +1,45 @@
+extends ../common/templates/index.jade
+
+block append mainContent
+  div#controls
+    .form-group(title="Number of lines segments.  Leave blank for a small default value.")
+      label(for="lines") Number of Lines
+      input#lines(type="number" min="1" step="100")
+      span#lines-shown
+    .form-group(title="Stroke Color (any css color).  A comma-separated list will cycle through the listed colors.  line:(comma-separate list) will cycle through by line.  A JSON dictionary will map road categories to colors, with undefined values using the 'other' entry.")
+      label(for="strokeColor") strokeColor
+      input#strokeColor(placeholder="black")
+    .form-group(title="Stroke Opacity (a number in the range [0, 1]).  A comma-separated list will cycle through the listed opacities.  line:(comma-separate list) will cycle through by line.  A JSON dictionary will map road categories to opacities, with undefined values using the 'other' entry.")
+      label(for="strokeOpacity") strokeOpacity
+      input#strokeOpacity(placeholder="1")
+    .form-group(title="Stroke Width (a positive number).  A comma-separated list will cycle through the listed widths.  line:(comma-separate list) will cycle through by line.  A JSON dictionary will map road categories to widths, with undefined values using the 'other' entry.")
+      label(for="strokeWidth") strokeWidth
+      input#strokeWidth(placeholder="2")
+    .form-group(title="Stroke Offset (a number in the range [-1, 1]).  A comma-separated list will cycle through the listed offsets.  line:(comma-separate list) will cycle through by line.  A JSON dictionary will map road categories to offsets, with undefined values using the 'other' entry.")
+      label(for="strokeOffset") strokeOffset
+      input#strokeOffset(placeholder="0")
+    .form-group(title="Line Cap (one of 'butt', 'round', or 'square').  A comma-separated list will cycle through the listed line caps.  line:(comma-separate list) will cycle through by line.  A JSON dictionary will map road categories to line caps, with undefined values using the 'other' entry.")
+      label(for="lineCap") lineCap
+      input#lineCap(placeholder="butt")
+    .form-group(title="Line Join (one of 'miter', 'bevel', 'round', or 'miter-clip').  A comma-separated list will cycle through the listed line joins.  line:(comma-separate list) will cycle through by line.  A JSON dictionary will map road categories to line joins, with undefined values using the 'other' entry.")
+      label(for="lineJoin") lineJoin
+      input#lineJoin(placeholder="miter")
+    .form-group(title="Miter Limit (a positive number).  Any miter whose length relative to the stroke with longer than this value will either be beveled or clipped.")
+      label(for="miterLimit") miterLimit
+      input#miterLimit(placeholder="10")
+    .form-group(title="Antialiasing (a non-negative number).  Edges of lines will be antialiased by this many pixels.  Values larger than 2 tend to make things blurry.")
+      label(for="antialiasing") antialiasing
+      input#antialiasing(placeholder="2")
+    .form-group(title="Show road names and categories on hover.")
+      label(for="hovertext") Info on Hover
+      input#hovertext(type="checkbox", placeholder="false")
+    .form-group(title="Show an OSM map underneath the lines.")
+      label(for="showmap") Show Map
+      input#showmap(type="checkbox", placeholder="true", checked="checked")
+    .form-group
+      .shortlabel Presets
+      button.preset(strokeColor='{"residential":"blue","service":"green","other":"black"}', strokeWidth='{"residential":4,"service":1,"other":8}', lineCap='round', showmap='true', title='Properties based on road category') Categories
+      button.preset(strokeColor='', strokeWidth='{"residential":1,"service":0.25,"other":3}', lineCap='round', lineJoin='', miterLimit='', showmap='false', title='Thin lines based on road category') Thin
+      button.preset(strokeColor='line:red,orange,yellow,green,blue,indigo,violet', strokeWidth='line:1,2,4,8,16', lineCap='line:butt,round,square', lineJoin='line:miter,bevel,round,miter-clip', miterLimit=4, title='Properties varied by line') Lines
+      button.preset(strokeColor='red,orange,yellow,green,blue,indigo,violet', strokeWidth='1,2,4,8,16', lineCap='butt,round,square', lineJoin='miter,bevel,round,miter-clip', miterLimit=4, title='Properties varied by line segment') Segments
+

examples/lines/main.css

@@ -0,0 +1,60 @@
+#controls {
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: absolute;
+  left: 10px;
+  top: 80px;
+  z-index: 2;
+  border-radius: 5px;
+  border: 1px solid grey;
+  box-shadow: 1px 1px 3px black;
+  opacity: 0.5;
+  transition: opacity 250ms ease;
+  background: #CCC;
+  color: black;
+  padding: 4px;
+  font-size: 14px;
+  max-height: calc(100% - 100px);
+  min-width: 310px;
+}
+#controls:hover {
+  opacity: 1;
+}
+#controls .form-group {
+  margin-bottom: 0;
+}
+#controls label {
+  min-width: 120px;
+}
+#controls #lines {
+  width: 100px;
+}
+#controls #lines-loaded,#controls #lines-shown {
+  display: inline-block;
+  font-size: 11px;
+  padding-left: 5px;
+}
+#controls table input {
+  width: 55px;
+}
+#controls table th {
+  text-align: center;
+}
+.shortlabel {
+  margin-bottom: 5px;
+  font-weight: bold;
+  display: inline-block;
+}
+#tooltip {
+  margin-left: 0px;
+  margin-top: -20px;
+  height: 20px;
+  line-height: 16px;
+  padding: 2px 5px;
+  background: rgba(255, 255, 255, 0.75);
+  border-radius: 10px;
+  border-bottom-left-radius: 0;
+  border: 1px solid rgba(0, 0, 0, 0.75);
+  font-size: 12px;
+  color: black;
+}