@pirireis/webglobeplugins 0.9.9 → 0.9.11

package/timetracks/plugin-line-strip.js

@@ -0,0 +1,254 @@
+"use strict";
+/**
+ * Author: Toprak Nihat Deniz Ozturk
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var program_line_strip_1 = __importDefault(require("./program-line-strip"));
+var programpoint_line_strip_1 = __importDefault(require("./programpoint-line-strip"));
+/**
+ * @typedef {Float32Array} TimeTrackMultiColorData  | A linestring is representation, let A{a1, a2, a3}, B{b1, b2} be the points of the line.
+     * TimeTrackMultiColorData is [
+     *  a1x, a1y, a1z, a1time, a1r, a1g, a1b, a1time, a3time,
+     *  a2x, a2y, a2z, a2time, a2r, a2g, a2b, a1time, a3time,
+     *  a3x, a3y, a3z, a3time, a3r, a3g, a3b, a1time, a3time,
+     *  NaN, NaN, NaN, NaN,    NaN, NaN, NaN, NaN,    NaN,
+     *  b1x, b1y, b1z, b1time, b1r, b1g, b1b, b1time, b2time,
+     *  b2x, b2y, b2z, b2time, b2r, b2g, b2b, BstartTime, BendTime
+     * ]
+     * there is a cutting point between A and B
+     *
+     * x, y is xy coordinates are in between 0, +1 for -180 to +180 longitude and -90 to +90 latitude
+     * z is height in meters
+*/
+/**
+  * Access following methods through `plugin.program.` :
+    * * setGamma
+    * * setExposure
+    * * setAlphaThreshold
+    * * setWeights
+    * * setHeadPercentage
+    * * setRouteAlpha
+    * * setFinalAlphaRatio
+    
+    uses float32array in a * {@link TimeTrackMultiColorData} format
+
+ */
+var TimeTrackMultiColorPlugin = /** @class */ (function () {
+    /**
+     * @param {String} id
+     * @param {Object} options
+     * @param {TimeTrackMultiColorData} options.data {@link TimeTrackMultiColorData}
+     * @param {number} options.headPercentage 0 ~ 1
+     * @param {number} options.routeAlpha 0 ~ 1
+     * @param {Array.<Number>} options.weights  [w1, w2, w3, w4, w5]
+     * @param {number} options.alphaThreshold 0 ~ 1
+     * @param {number} options.exposure 0 ~ inf
+     * @param {number} options.gamma 0 ~ inf
+     * @param {number} options.finalAlphaRatio 0 ~ 1
+     * @param {number} pointOptions.opacity 0 ~ 1
+     * @param {number} pointOptions.pointSize 0 ~ inf
+     * @param {boolean} pointOptions.isOn true | false
+    */
+    function TimeTrackMultiColorPlugin(id, options, _a) {
+        if (options === void 0) { options = {}; }
+        var _b = _a === void 0 ? {} : _a, _c = _b.opacity, opacity = _c === void 0 ? 1.0 : _c, _d = _b.pointSize, pointSize = _d === void 0 ? 1 : _d, _e = _b.isOn, isOn = _e === void 0 ? false : _e;
+        this.id = id;
+        this.globe = null;
+        this.gl = null;
+        this.program = null;
+        this._headTime = 0;
+        this._tailTime = 0;
+        this._data = options.data || null;
+        this._options = options;
+        this._pointOptions = { opacity: opacity, pointSize: pointSize, isOn: isOn };
+        this.program = null;
+        this._transporArr = new Float32Array(3);
+        this._ready = false;
+        this.pointProgram = null;
+        this._attrBuffer = null;
+    }
+    // ----------------------------------
+    //     --- user methods ---
+    // ----------------------------------
+    TimeTrackMultiColorPlugin.prototype.setHeadAndTailTime = function (headTime, tailTime) {
+        var _a;
+        this._headTime = headTime;
+        this._tailTime = tailTime;
+        // console.log("setHeadAndTailTime", headTime, tailTime);
+        (_a = this.pointProgram) === null || _a === void 0 ? void 0 : _a.setHeadTime(headTime);
+        this.globe.DrawRender();
+    };
+    TimeTrackMultiColorPlugin.prototype.setBlurWeights = function (weights) {
+        this.program.setBlurWeights(weights);
+        this.globe.DrawRender();
+    };
+    TimeTrackMultiColorPlugin.prototype.setHeadPercentage = function (headPercentage) {
+        this.program.setHeadPercentage(headPercentage);
+        this.globe.DrawRender();
+    };
+    TimeTrackMultiColorPlugin.prototype.setRouteAlpha = function (routeAlpha) {
+        this.program.setRouteAlpha(routeAlpha);
+        this.globe.DrawRender();
+    };
+    TimeTrackMultiColorPlugin.prototype.setFinalAlphaRatio = function (finalAlphaRatio) {
+        this.program.setFinalAlphaRatio(finalAlphaRatio);
+        this.globe.DrawRender();
+    };
+    TimeTrackMultiColorPlugin.prototype.setGamma = function (gamma) {
+        this.program.setGamma(gamma);
+        this.globe.DrawRender();
+    };
+    TimeTrackMultiColorPlugin.prototype.setExposure = function (exposure) {
+        this.program.setExposure(exposure);
+        this.globe.DrawRender();
+    };
+    TimeTrackMultiColorPlugin.prototype.setBlurRepetition = function (repetition) {
+        this.program.setBlurRepetition(repetition);
+        this.globe.DrawRender();
+    };
+    // ---------------point program setters-------------------
+    TimeTrackMultiColorPlugin.prototype.setPointOpacity = function (opacity) {
+        this._pointOptions.opacity = opacity;
+        if (this.pointProgram) {
+            this.pointProgram.setOpacity(opacity);
+            this.globe.DrawRender();
+        }
+    };
+    TimeTrackMultiColorPlugin.prototype.setPointSize = function (size) {
+        this._pointOptions.pointSize = size;
+        if (this.pointProgram) {
+            this.pointProgram.setPointSize(size);
+            this.globe.DrawRender();
+        }
+    };
+    TimeTrackMultiColorPlugin.prototype.pointSwitch = function (isOn) {
+        if (isOn && !this.pointProgram) {
+            this.pointProgram = this._createPointProgram();
+        }
+        else {
+            this._deletePointProgram();
+        }
+    };
+    // ------------------------------------------------------------
+    TimeTrackMultiColorPlugin.prototype._createPointProgram = function () {
+        var gl = this.gl;
+        var program = new programpoint_line_strip_1.default(gl, this.globe, this._attrBuffer, this._pointOptions);
+        program.setDrawCount(this._totalSize);
+        return program;
+    };
+    TimeTrackMultiColorPlugin.prototype._deletePointProgram = function () {
+        if (this.pointProgram)
+            this.pointProgram.free();
+        this.pointProgram = null;
+    };
+    // -------------------------------------------------------------
+    TimeTrackMultiColorPlugin.prototype.isReady = function () {
+        return this._ready;
+    };
+    /**
+     * @param {TimeTrackMultiColorData} data {@link TimeTrackMultiColorData}
+     * Check Class constructor
+     */
+    TimeTrackMultiColorPlugin.prototype.setData = function (data) {
+        if (this.gl) {
+            this._ready = false;
+            this.setDataAsFloat32Array(data);
+            this._ready = true;
+        }
+        else {
+            this._data = data;
+            this._ready = false;
+        }
+    };
+    /**
+     * @param {TimeTrackMultiColorData} data {@link TimeTrackMultiColorData}
+     * @param {number} totalSize | if not provided, it is calculated from float32Array.length / 9. Use if you want to draw first n points.
+     */
+    TimeTrackMultiColorPlugin.prototype.setDataAsFloat32Array = function (data, totalSize) {
+        var _a;
+        if (totalSize === void 0) { totalSize = null; }
+        var _b = this, gl = _b.gl, _attrBuffer = _b._attrBuffer;
+        gl.bindBuffer(gl.ARRAY_BUFFER, _attrBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        // this.program.setInBuffer(data);
+        // this.pointProgram.setData(data);
+        if (totalSize) {
+            this._totalSize = totalSize;
+        }
+        else {
+            this._totalSize = data.length / 9;
+        }
+        this.program.setTotalLength(this._totalSize);
+        (_a = this.pointProgram) === null || _a === void 0 ? void 0 : _a.setDrawCount(this._totalSize / 2);
+        this._ready = true;
+    };
+    // ------------------------------
+    //      --- globe Methods ---
+    // ------------------------------
+    TimeTrackMultiColorPlugin.prototype.draw3D = function (projMatrix, modelviewMatrix, transPos) {
+        var _a;
+        if (!this._ready)
+            return;
+        var _b = this, _headTime = _b._headTime, _tailTime = _b._tailTime, program = _b.program, _transporArr = _b._transporArr, globe = _b.globe;
+        (_a = this.pointProgram) === null || _a === void 0 ? void 0 : _a.draw();
+        _transporArr.set([transPos.x, transPos.y, transPos.z], 0);
+        var geomType = globe.api_GetCurrentGeometry();
+        if (geomType === 0) {
+            program.draw(_headTime, _tailTime, projMatrix, modelviewMatrix, _transporArr);
+        }
+        else if (geomType === 1) {
+            var _c = globe.api_GetCurrentWorldWH(), width = _c.width, height = _c.height;
+            program.draw(_headTime, _tailTime, projMatrix, modelviewMatrix, _transporArr, [width, height]);
+        }
+        else {
+            console.error("Unknown geometry type", geomType);
+        }
+    };
+    TimeTrackMultiColorPlugin.prototype.resize = function (width, height) {
+        var _a = this, program = _a.program, globe = _a.globe;
+        width = width || globe.api_ScrW();
+        height = height || globe.api_ScrH();
+        program.resize(width, height);
+    };
+    TimeTrackMultiColorPlugin.prototype.init = function (globe, gl) {
+        var _a;
+        this.globe = globe;
+        this.gl = gl;
+        this._attrBuffer = gl.createBuffer();
+        this.program = new program_line_strip_1.default(gl, this._attrBuffer, globe.api_ScrW(), globe.api_ScrH(), this._options);
+        if ((_a = this._pointOptions) === null || _a === void 0 ? void 0 : _a.isOn)
+            this.pointProgram = new programpoint_line_strip_1.default(gl, globe, this._attrBuffer);
+        // this.pointProgram.setAttrBuffer(_attrBuffer);
+        this.setGeometry();
+        if (this._data) {
+            this._ready = true;
+            this.setDataAsFloat32Array(this._data);
+            this._data = null;
+        }
+        this.resize();
+    };
+    TimeTrackMultiColorPlugin.prototype.free = function () {
+        var _a = this, gl = _a.gl, _attrBuffer = _a._attrBuffer;
+        this.program.free();
+        gl.deleteBuffer(_attrBuffer);
+    };
+    TimeTrackMultiColorPlugin.prototype.setGeometry = function () {
+        var _a = this, globe = _a.globe, program = _a.program;
+        program.setIs3D(globe.api_GetCurrentGeometry() === 0);
+    };
+    // ----------------------------------
+    //      --- implicit methods ---
+    // ----------------------------------
+    TimeTrackMultiColorPlugin.prototype._latLongToPixelXY = function (latitude, longitude) {
+        return {
+            x: (longitude + 180) / 360,
+            y: (90 - latitude) / 180
+        };
+    };
+    return TimeTrackMultiColorPlugin;
+}());
+exports.default = TimeTrackMultiColorPlugin;

package/timetracks/plugin.js

@@ -0,0 +1,262 @@
+"use strict";
+/**
+ * Author: Toprak Nihat Deniz Ozturk
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var program_1 = __importDefault(require("./program"));
+var programpoint_1 = __importDefault(require("./programpoint"));
+/**
+ * @typedef {Float32Array} TimeTrackMultiColorData  | A linestring is representation, let A{a1, a2, a3}, B{b1, b2} be the points of the line.
+     * TimeTrackMultiColorData is [
+     *  a1x, a1y, a1z, a1time, a1r, a1g, a1b, a1time, a3time, a2x, a2y, a2z, a2time, a2r, a2g, a2b, a1time, a3time,
+     *  a2x, a2y, a2z, a2time, a2r, a2g, a2b, a1time, a3time, a3x, a3y, a3z, a3time, a3r, a3g, a3b, a1time, a3time,
+     *  b1x, b1y, b1z, b1time, b1r, b1g, b1b, b1time, b2time, b2x, b2y, b2z, b2time, b2r, b2g, b2b, BstartTime, BendTime
+     * ]
+     * As you can see, the middle points of a line is repeated.
+     * Start Time is the first time of the line, End Time is the last time of the line.
+     * startTime of A = a1time, endTime time of A = a3time
+     * Check Adaptor to create TimeTrackMultiColorData. import {Adaptor} from '.';
+*/
+/**
+  * Access following methods through `plugin.program.` :
+    * * setGamma
+    * * setExposure
+    * * setAlphaThreshold
+    * * setWeights
+    * * setHeadPercentage
+    * * setRouteAlpha
+    * * setFinalAlphaRatio
+    
+    uses float32array in a * {@link TimeTrackMultiColorData} format
+
+ */
+var TimeTrackMultiColorPlugin = /** @class */ (function () {
+    /**
+     * @param {String} id
+     * @param {Object} options
+     * @param {TimeTrackMultiColorData} options.data {@link TimeTrackMultiColorData}
+     * @param {number} options.headPercentage 0 ~ 1
+     * @param {number} options.routeAlpha 0 ~ 1
+     * @param {Array.<Number>} options.weights  [w1, w2, w3, w4, w5]
+     * @param {number} options.alphaThreshold 0 ~ 1
+     * @param {number} options.exposure 0 ~ inf
+     * @param {number} options.gamma 0 ~ inf
+     * @param {number} options.finalAlphaRatio 0 ~ 1
+     * @param {number} pointOptions.opacity 0 ~ 1
+     * @param {number} pointOptions.pointSize 0 ~ inf
+     * @param {boolean} pointOptions.isOn true | false
+    */
+    function TimeTrackMultiColorPlugin(id, options, _a) {
+        if (options === void 0) { options = {}; }
+        var _b = _a === void 0 ? {} : _a, _c = _b.opacity, opacity = _c === void 0 ? 1.0 : _c, _d = _b.pointSize, pointSize = _d === void 0 ? 1 : _d, _e = _b.isOn, isOn = _e === void 0 ? false : _e;
+        this.id = id;
+        this.globe = null;
+        this.gl = null;
+        this.program = null;
+        this._headTime = 0;
+        this._tailTime = 0;
+        this._data = options.data || null;
+        this._options = options;
+        this._pointOptions = { opacity: opacity, pointSize: pointSize, isOn: isOn };
+        this.program = null;
+        this._transporArr = new Float32Array(3);
+        this._ready = false;
+        this.pointProgram = null;
+        this._attrBuffer = null;
+    }
+    // ----------------------------------
+    //     --- user methods ---
+    // ----------------------------------
+    TimeTrackMultiColorPlugin.prototype.setHeadAndTailTime = function (headTime, tailTime) {
+        var _a;
+        this._headTime = headTime;
+        this._tailTime = tailTime;
+        (_a = this.pointProgram) === null || _a === void 0 ? void 0 : _a.setHeadTime(headTime);
+        this.globe.DrawRender();
+    };
+    TimeTrackMultiColorPlugin.prototype.setGlow = function (isGlow) {
+        this.program.setGlow(isGlow);
+        this.globe.DrawRender();
+    };
+    TimeTrackMultiColorPlugin.prototype.setPremultipliedAlpha = function (isPremultiplied) {
+        this.program.setPremultipliedAlpha(isPremultiplied);
+        this.globe.DrawRender();
+    };
+    TimeTrackMultiColorPlugin.prototype.setBlurWeights = function (weights) {
+        this.program.setBlurWeights(weights);
+        this.globe.DrawRender();
+    };
+    TimeTrackMultiColorPlugin.prototype.setHeadPercentage = function (headPercentage) {
+        this.program.setHeadPercentage(headPercentage);
+        this.globe.DrawRender();
+    };
+    TimeTrackMultiColorPlugin.prototype.setRouteAlpha = function (routeAlpha) {
+        this.program.setRouteAlpha(routeAlpha);
+        this.globe.DrawRender();
+    };
+    TimeTrackMultiColorPlugin.prototype.setFinalAlphaRatio = function (finalAlphaRatio) {
+        this.program.setFinalAlphaRatio(finalAlphaRatio);
+        this.globe.DrawRender();
+    };
+    TimeTrackMultiColorPlugin.prototype.setGamma = function (gamma) {
+        this.program.setGamma(gamma);
+        this.globe.DrawRender();
+    };
+    TimeTrackMultiColorPlugin.prototype.setExposure = function (exposure) {
+        this.program.setExposure(exposure);
+        this.globe.DrawRender();
+    };
+    TimeTrackMultiColorPlugin.prototype.setBlurRepetition = function (repetition) {
+        this.program.setBlurRepetition(repetition);
+        this.globe.DrawRender();
+    };
+    TimeTrackMultiColorPlugin.prototype.setAlphaThreshold = function (alphaThreshold) {
+        this.program.setAlphaThreshold(alphaThreshold);
+        this.globe.DrawRender();
+    };
+    // ---------------point program setters-------------------
+    TimeTrackMultiColorPlugin.prototype.setPointOpacity = function (opacity) {
+        this._pointOptions.opacity = opacity;
+        if (this.pointProgram) {
+            this.pointProgram.setOpacity(opacity);
+            this.globe.DrawRender();
+        }
+    };
+    TimeTrackMultiColorPlugin.prototype.setPointSize = function (size) {
+        this._pointOptions.pointSize = size;
+        if (this.pointProgram) {
+            this.pointProgram.setPointSize(size);
+            this.globe.DrawRender();
+        }
+    };
+    TimeTrackMultiColorPlugin.prototype.pointSwitch = function (isOn) {
+        if (isOn && !this.pointProgram) {
+            this.pointProgram = this._createPointProgram();
+        }
+        else {
+            this._deletePointProgram();
+        }
+    };
+    // ------------------------------------------------------------
+    TimeTrackMultiColorPlugin.prototype._createPointProgram = function () {
+        var gl = this.gl;
+        var program = new programpoint_1.default(gl, this.globe, this._attrBuffer, this._pointOptions);
+        program.setDrawCount(this._totalSize / 2);
+        return program;
+    };
+    TimeTrackMultiColorPlugin.prototype._deletePointProgram = function () {
+        if (this.pointProgram)
+            this.pointProgram.free();
+        this.pointProgram = null;
+    };
+    // -------------------------------------------------------------
+    TimeTrackMultiColorPlugin.prototype.isReady = function () {
+        return this._ready;
+    };
+    /**
+     * @param {TimeTrackMultiColorData} data {@link TimeTrackMultiColorData}
+     * Check Class constructor
+     */
+    TimeTrackMultiColorPlugin.prototype.setData = function (data) {
+        if (this.gl) {
+            this._ready = false;
+            this.setDataAsFloat32Array(data);
+            this._ready = true;
+        }
+        else {
+            this._data = data;
+            this._ready = false;
+        }
+    };
+    /**
+     * @param {TimeTrackMultiColorData} data {@link TimeTrackMultiColorData}
+     * @param {number} totalSize | if not provided, it is calculated from float32Array.length / 9. Use if you want to draw first n points.
+     */
+    TimeTrackMultiColorPlugin.prototype.setDataAsFloat32Array = function (data, totalSize) {
+        var _a;
+        if (totalSize === void 0) { totalSize = null; }
+        var _b = this, gl = _b.gl, _attrBuffer = _b._attrBuffer;
+        gl.bindBuffer(gl.ARRAY_BUFFER, _attrBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        // this.program.setInBuffer(data);
+        // this.pointProgram.setData(data);
+        if (totalSize) {
+            this._totalSize = totalSize;
+        }
+        else {
+            this._totalSize = data.length / 9;
+        }
+        this.program.setTotalLength(this._totalSize);
+        (_a = this.pointProgram) === null || _a === void 0 ? void 0 : _a.setDrawCount(this._totalSize / 2);
+        this._ready = true;
+    };
+    // ------------------------------
+    //      --- globe Methods ---
+    // ------------------------------
+    TimeTrackMultiColorPlugin.prototype.draw3D = function (projMatrix, modelviewMatrix, transPos) {
+        var _a;
+        if (!this._ready)
+            return;
+        var _b = this, _headTime = _b._headTime, _tailTime = _b._tailTime, program = _b.program, _transporArr = _b._transporArr, globe = _b.globe;
+        (_a = this.pointProgram) === null || _a === void 0 ? void 0 : _a.draw();
+        _transporArr.set([transPos.x, transPos.y, transPos.z], 0);
+        var geomType = globe.api_GetCurrentGeometry();
+        if (geomType === 0) {
+            program.draw(_headTime, _tailTime, projMatrix, modelviewMatrix, _transporArr);
+        }
+        else if (geomType === 1) {
+            var _c = globe.api_GetCurrentWorldWH(), width = _c.width, height = _c.height;
+            program.draw(_headTime, _tailTime, projMatrix, modelviewMatrix, _transporArr, [width, height]);
+        }
+        else {
+            console.error("Unknown geometry type", geomType);
+        }
+    };
+    TimeTrackMultiColorPlugin.prototype.resize = function (width, height) {
+        var _a = this, program = _a.program, globe = _a.globe;
+        width = width || globe.api_ScrW();
+        height = height || globe.api_ScrH();
+        program.resize(width, height);
+    };
+    TimeTrackMultiColorPlugin.prototype.init = function (globe, gl) {
+        var _a;
+        this.globe = globe;
+        this.gl = gl;
+        this._attrBuffer = gl.createBuffer();
+        this.program = new program_1.default(gl, this._attrBuffer, globe.api_ScrW(), globe.api_ScrH(), this._options);
+        if ((_a = this._pointOptions) === null || _a === void 0 ? void 0 : _a.isOn)
+            this.pointProgram = new programpoint_1.default(gl, globe, this._attrBuffer);
+        // this.pointProgram.setAttrBuffer(_attrBuffer);
+        this.setGeometry();
+        if (this._data) {
+            this._ready = true;
+            this.setDataAsFloat32Array(this._data);
+            this._data = null;
+        }
+        this.resize();
+    };
+    TimeTrackMultiColorPlugin.prototype.free = function () {
+        var _a = this, gl = _a.gl, _attrBuffer = _a._attrBuffer;
+        this.program.free();
+        gl.deleteBuffer(_attrBuffer);
+    };
+    TimeTrackMultiColorPlugin.prototype.setGeometry = function () {
+        var _a = this, globe = _a.globe, program = _a.program;
+        program.setIs3D(globe.api_GetCurrentGeometry() === 0);
+    };
+    // ----------------------------------
+    //      --- implicit methods ---
+    // ----------------------------------
+    TimeTrackMultiColorPlugin.prototype._latLongToPixelXY = function (latitude, longitude) {
+        return {
+            x: (longitude + 180) / 360,
+            y: (90 - latitude) / 180
+        };
+    };
+    return TimeTrackMultiColorPlugin;
+}());
+exports.default = TimeTrackMultiColorPlugin;