You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@baremaps.apache.org by bc...@apache.org on 2023/12/16 12:12:02 UTC

(incubator-baremaps) branch framerate created (now 4566cbc1)

This is an automated email from the ASF dual-hosted git repository.

bchapuis pushed a change to branch framerate
in repository https://gitbox.apache.org/repos/asf/incubator-baremaps.git


      at 4566cbc1 Display framerate in dev mode and missing license headers

This branch includes the following new commits:

     new 4566cbc1 Display framerate in dev mode and missing license headers

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.



(incubator-baremaps) 01/01: Display framerate in dev mode and missing license headers

Posted by bc...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

bchapuis pushed a commit to branch framerate
in repository https://gitbox.apache.org/repos/asf/incubator-baremaps.git

commit 4566cbc18dd4ce6f7b2b638cdeec3bace3078be0
Author: Bertil Chapuis <bc...@gmail.com>
AuthorDate: Sat Dec 16 13:11:51 2023 +0100

    Display framerate in dev mode and missing license headers
---
 .../main/resources/assets/maplibre-gl-framerate.js | 204 +++++++++++++++++++++
 .../main/resources/assets/maplibre-gl-inspect.css  |  35 ++++
 .../main/resources/assets/maplibre-gl-inspect.js   |  34 ++++
 .../assets/maplibre-gl-tile-boundaries.css         |  18 +-
 .../assets/maplibre-gl-tile-boundaries.js          |  17 ++
 .../src/main/resources/assets/viewer.html          |   7 +-
 6 files changed, 313 insertions(+), 2 deletions(-)

diff --git a/baremaps-server/src/main/resources/assets/maplibre-gl-framerate.js b/baremaps-server/src/main/resources/assets/maplibre-gl-framerate.js
new file mode 100644
index 00000000..5df1302c
--- /dev/null
+++ b/baremaps-server/src/main/resources/assets/maplibre-gl-framerate.js
@@ -0,0 +1,204 @@
+/**
+ * Copyright (c) 2019, Mapbox
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+ * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+ * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+ * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+ *
+ * Source:
+ * https://github.com/mapbox/mapbox-gl-framerate
+ */
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+        typeof define === 'function' && define.amd ? define(factory) :
+            (global.FrameRateControl = factory());
+}(this, (function () { 'use strict';
+
+    function _classCallCheck(instance, Constructor) {
+        if (!(instance instanceof Constructor)) {
+            throw new TypeError("Cannot call a class as a function");
+        }
+    }
+
+    function _defineProperty(obj, key, value) {
+        if (key in obj) {
+            Object.defineProperty(obj, key, {
+                value: value,
+                enumerable: true,
+                configurable: true,
+                writable: true
+            });
+        } else {
+            obj[key] = value;
+        }
+
+        return obj;
+    }
+
+    function _objectSpread(target) {
+        for (var i = 1; i < arguments.length; i++) {
+            var source = arguments[i] != null ? arguments[i] : {};
+            var ownKeys = Object.keys(source);
+
+            if (typeof Object.getOwnPropertySymbols === 'function') {
+                ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
+                    return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+                }));
+            }
+
+            ownKeys.forEach(function (key) {
+                _defineProperty(target, key, source[key]);
+            });
+        }
+
+        return target;
+    }
+
+    var FrameRateControl = function FrameRateControl(options) {
+        var _this = this;
+
+        _classCallCheck(this, FrameRateControl);
+
+        _defineProperty(this, "onAdd", function (map) {
+            _this.map = map;
+            var dpr = window.devicePixelRatio;
+            var _this$options = _this.options,
+                width = _this$options.width,
+                graphWidth = _this$options.graphWidth,
+                graphHeight = _this$options.graphHeight,
+                color = _this$options.color,
+                background = _this$options.background,
+                font = _this$options.font;
+            var el = _this.container = document.createElement('div');
+            el.className = 'maplibregl-ctrl maplibregl-ctrl-fps';
+            el.style.backgroundColor = background;
+            el.style.borderRadius = '6px';
+            _this.readOutput = document.createElement('div');
+            _this.readOutput.style.color = color;
+            _this.readOutput.style.fontFamily = font;
+            _this.readOutput.style.padding = '0 5px 5px';
+            _this.readOutput.style.fontSize = '9px';
+            _this.readOutput.style.fontWeight = 'bold';
+            _this.readOutput.textContent = 'Waiting…';
+            _this.canvas = document.createElement('canvas');
+            _this.canvas.className = 'maplibregl-ctrl-canvas';
+            _this.canvas.width = width;
+            _this.canvas.height = graphHeight;
+            _this.canvas.style.cssText = "width: ".concat(width / dpr, "px; height: ").concat(graphHeight / dpr, "px;");
+            el.appendChild(_this.readOutput);
+            el.appendChild(_this.canvas);
+
+            _this.map.on('movestart', _this.onMoveStart);
+
+            _this.map.on('moveend', _this.onMoveEnd);
+
+            return _this.container;
+        });
+
+        _defineProperty(this, "onMoveStart", function () {
+            _this.frames = 0;
+            _this.time = performance.now();
+
+            _this.map.on('render', _this.onRender);
+        });
+
+        _defineProperty(this, "onMoveEnd", function () {
+            var now = performance.now();
+
+            _this.updateGraph(_this.getFPS(now));
+
+            _this.frames = 0;
+            _this.time = null;
+
+            _this.map.off('render', _this.onRender);
+        });
+
+        _defineProperty(this, "onRender", function () {
+            _this.frames++;
+            var now = performance.now();
+
+            if (now >= _this.time + 1e3) {
+                _this.updateGraph(_this.getFPS(now));
+
+                _this.frames = 0;
+                _this.time = now;
+            }
+        });
+
+        _defineProperty(this, "getFPS", function (now) {
+            _this.totalTime += now - _this.time, _this.totalFrames += _this.frames;
+            return Math.round(1e3 * _this.frames / (now - _this.time)) || 0;
+        });
+
+        _defineProperty(this, "updateGraph", function (fpsNow) {
+            var _this$options2 = _this.options,
+                barWidth = _this$options2.barWidth,
+                graphRight = _this$options2.graphRight,
+                graphTop = _this$options2.graphTop,
+                graphWidth = _this$options2.graphWidth,
+                graphHeight = _this$options2.graphHeight,
+                background = _this$options2.background,
+                color = _this$options2.color;
+
+            var context = _this.canvas.getContext('2d');
+
+            var fps = Math.round(1e3 * _this.totalFrames / _this.totalTime) || 0;
+            var rect = (barWidth);
+            context.fillStyle = background;
+            context.globalAlpha = 1;
+            context.fillRect(0, 0, graphWidth, graphTop);
+            context.fillStyle = color;
+            _this.readOutput.textContent = "".concat(fpsNow, " FPS (").concat(fps, " Avg)");
+            context.drawImage(_this.canvas, graphRight + rect, graphTop, graphWidth - rect, graphHeight, graphRight, graphTop, graphWidth - rect, graphHeight);
+            context.fillRect(graphRight + graphWidth - rect, graphTop, rect, graphHeight);
+            context.fillStyle = background;
+            context.globalAlpha = 0.75;
+            context.fillRect(graphRight + graphWidth - rect, graphTop, rect, (1 - fpsNow / 100) * graphHeight);
+        });
+
+        _defineProperty(this, "onRemove", function () {
+            _this.map.off('render', _this.onRender);
+
+            _this.map.off('movestart', _this.onMoveStart);
+
+            _this.map.off('moveend', _this.onMoveEnd);
+
+            _this.container.parentNode.removeChild(_this.container);
+
+            _this.map = null;
+            return _this;
+        });
+
+        var _dpr = window.devicePixelRatio;
+        var defaultOptions = {
+            background: 'rgba(0,0,0,0.9)',
+            barWidth: 4 * _dpr,
+            color: '#7cf859',
+            font: 'Monaco, Consolas, Courier, monospace',
+            graphHeight: 60 * _dpr,
+            graphWidth: 90 * _dpr,
+            graphTop: 0,
+            graphRight: 5 * _dpr,
+            width: 100 * _dpr
+        };
+        this.frames = 0;
+        this.totalTime = 0;
+        this.totalFrames = 0;
+        this.options = _objectSpread({}, options, defaultOptions);
+    };
+
+    if (window.maplibregl) {
+        maplibregl.FrameRateControl = FrameRateControl;
+    }
+
+    return FrameRateControl;
+
+})));
\ No newline at end of file
diff --git a/baremaps-server/src/main/resources/assets/maplibre-gl-inspect.css b/baremaps-server/src/main/resources/assets/maplibre-gl-inspect.css
index 6730686e..ac300630 100644
--- a/baremaps-server/src/main/resources/assets/maplibre-gl-inspect.css
+++ b/baremaps-server/src/main/resources/assets/maplibre-gl-inspect.css
@@ -1,3 +1,38 @@
+/**
+ * BSD 3-Clause License
+ *
+ * Copyright (c) 2017, Lukas Martinelli
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * * Redistributions of source code must retain the above copyright notice, this
+ *   list of conditions and the following disclaimer.
+ *
+ * * Redistributions in binary form must reproduce the above copyright notice,
+ *   this list of conditions and the following disclaimer in the documentation
+ *   and/or other materials provided with the distribution.
+ *
+ * * Neither the name of the copyright holder nor the names of its
+ *   contributors may be used to endorse or promote products derived from
+ *   this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+ * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+ * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+ * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+ * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+ * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * Source:
+ * https://github.com/acalcutt/maplibre-gl-inspect
+ */
+
 .maplibregl-inspect_popup {
   color: #333;
   display: table;
diff --git a/baremaps-server/src/main/resources/assets/maplibre-gl-inspect.js b/baremaps-server/src/main/resources/assets/maplibre-gl-inspect.js
index 04f6d757..a2ef598c 100644
--- a/baremaps-server/src/main/resources/assets/maplibre-gl-inspect.js
+++ b/baremaps-server/src/main/resources/assets/maplibre-gl-inspect.js
@@ -1 +1,35 @@
+/**
+ * BSD 3-Clause License
+ *
+ * Copyright (c) 2017, Lukas Martinelli
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * * Redistributions of source code must retain the above copyright notice, this
+ *   list of conditions and the following disclaimer.
+ *
+ * * Redistributions in binary form must reproduce the above copyright notice,
+ *   this list of conditions and the following disclaimer in the documentation
+ *   and/or other materials provided with the distribution.
+ *
+ * * Neither the name of the copyright holder nor the names of its
+ *   contributors may be used to endorse or promote products derived from
+ *   this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+ * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+ * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+ * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+ * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+ * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * Source:
+ * https://github.com/acalcutt/maplibre-gl-inspect
+ */
 !function(t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).MaplibreInspect=t()}(function(){return function r(o,i,s){function a(e,t){if(!i[e]){if(!o[e]){var n="function"==typeof require&&require;if(!t&&n)return n(e,!0);if(u)return u(e,!0);throw(n=new Error("Cannot find module '"+e+"'")).code="MODULE_NOT_FOUND" [...]
\ No newline at end of file
diff --git a/baremaps-server/src/main/resources/assets/maplibre-gl-tile-boundaries.css b/baremaps-server/src/main/resources/assets/maplibre-gl-tile-boundaries.css
index 3f4b10d6..72324efc 100644
--- a/baremaps-server/src/main/resources/assets/maplibre-gl-tile-boundaries.css
+++ b/baremaps-server/src/main/resources/assets/maplibre-gl-tile-boundaries.css
@@ -1,3 +1,20 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to you under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 .maplibregl-ctrl-hide-boundaries {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32s-14.3-32-32-32zm96 64c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zm0-384c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3- [...]
     background-repeat: no-repeat;
@@ -11,4 +28,3 @@
     background-size: 20px 20px;
     background-position: 5px 5px;
 }
-
diff --git a/baremaps-server/src/main/resources/assets/maplibre-gl-tile-boundaries.js b/baremaps-server/src/main/resources/assets/maplibre-gl-tile-boundaries.js
index 2e1d089f..75991dd0 100644
--- a/baremaps-server/src/main/resources/assets/maplibre-gl-tile-boundaries.js
+++ b/baremaps-server/src/main/resources/assets/maplibre-gl-tile-boundaries.js
@@ -1,3 +1,20 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to you under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 function container(child, show) {
     var container = document.createElement('div');
     container.className = 'maplibregl-ctrl maplibregl-ctrl-group';
diff --git a/baremaps-server/src/main/resources/assets/viewer.html b/baremaps-server/src/main/resources/assets/viewer.html
index 48d7a73c..c20877bc 100644
--- a/baremaps-server/src/main/resources/assets/viewer.html
+++ b/baremaps-server/src/main/resources/assets/viewer.html
@@ -21,6 +21,7 @@ limitations under the License.
   <script src='/maplibre-gl-inspect.js'></script>
   <script src='/maplibre-gl-tile-boundaries.js'></script>
   <script src='/maplibre-custom-controls.js'></script>
+  <script src='/maplibre-gl-framerate.js'></script>
   <link href='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css' rel='stylesheet' />
   <link href='/maplibre-gl-inspect.css' rel='stylesheet' />
   <link href='/maplibre-gl-tile-boundaries.css' rel='stylesheet' />
@@ -109,7 +110,11 @@ limitations under the License.
     bearing: map.getBearing(),
     hash: false,
     interactive: false,
-  })
+  });
+
+  // Add the framerate control to the map
+  const fps = new maplibregl.FrameRateControl();
+  map.addControl(fps);
 
   // Add the navigation control to the map
   map.addControl(new maplibregl.NavigationControl());