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 <[email protected]> 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/[email protected]/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());
