jsgui3-server 0.0.133 → 0.0.134

package/.vscode/settings.json

@@ -1,6 +1,13 @@
 {
     "workbench.colorCustomizations": {
         "minimap.background": "#00000000",
-        "scrollbar.shadow": "#00000000"
+        "scrollbar.shadow": "#00000000",
+        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
+        "editor.formatOnType": false, // required
+        "editor.formatOnPaste": true, // optional
+        "editor.formatOnSave": true, // optional
+        "editor.formatOnSaveMode": "file", // required to format on save
+        "files.autoSave": "onFocusChange", // optional but recommended
+        "vs-code-prettier-eslint.prettierLast": false // set as "true" to run 'prettier' last not first
     }
 }

package/examples/controls/14) window, canvas/client.js

@@ -0,0 +1,238 @@
+const jsgui = require('jsgui3-client');
+const {controls, Control, mixins} = jsgui;
+const {dragable} = mixins;
+const {Checkbox, Date_Picker, Text_Input, Text_Field, Dropdown_Menu} = controls;
+const Active_HTML_Document = require('../../../controls/Active_HTML_Document');
+
+
+
+class BlueSphereRenderer {
+  constructor(canvas, opts = {}) {
+    this.canvas =
+      typeof canvas === "string" ? document.getElementById(canvas) : canvas;
+    if (!(this.canvas instanceof HTMLCanvasElement)) {
+      throw new Error("Pass a canvas element or its id");
+    }
+
+    this.ctx = this.canvas.getContext("2d");
+    this.opts = {
+      padding: opts.padding ?? 8,
+      color: opts.color ?? "#2d7fff",       // base blue
+      background: opts.background ?? null,  // e.g. "#0a0f1e" or null for transparent
+      dpr: window.devicePixelRatio || 1
+    };
+
+    this.resize();
+    this.render();
+
+    // Re-render automatically on viewport resizes.
+    this._onResize = () => { this.resize(); this.render(); };
+    window.addEventListener("resize", this._onResize, { passive: true });
+  }
+
+  destroy() {
+    window.removeEventListener("resize", this._onResize);
+  }
+
+  setColor(hex) {
+    this.opts.color = hex;
+    this.render();
+  }
+
+  resize() {
+    const dpr = (this.opts.dpr = window.devicePixelRatio || 1);
+    const rect = this.canvas.getBoundingClientRect();
+
+    // If CSS controls the canvas size, use that; otherwise fall back to attributes.
+    const displayWidth = rect.width || this.canvas.width;
+    const displayHeight = rect.height || this.canvas.height;
+
+    const w = Math.max(1, Math.round(displayWidth * dpr));
+    const h = Math.max(1, Math.round(displayHeight * dpr));
+
+    if (this.canvas.width !== w || this.canvas.height !== h) {
+      this.canvas.width = w;
+      this.canvas.height = h;
+    }
+
+    // Scale the drawing coordinates back to CSS pixels.
+    this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+    this.ctx.scale(dpr, dpr);
+  }
+
+  render() {
+    const ctx = this.ctx;
+
+    const rect = this.canvas.getBoundingClientRect();
+    const width = rect.width || this.canvas.width / this.opts.dpr;
+    const height = rect.height || this.canvas.height / this.opts.dpr;
+
+    // Clear / background
+    ctx.clearRect(0, 0, width, height);
+    if (this.opts.background) {
+      ctx.fillStyle = this.opts.background;
+      ctx.fillRect(0, 0, width, height);
+    }
+
+    const pad = this.opts.padding;
+    const r = Math.max(1, Math.min(width, height) / 2 - pad);
+    const cx = width / 2;
+    const cy = height / 2;
+
+    // Clip to a circle so the gradient stays perfectly round.
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, Math.PI * 2);
+    ctx.clip();
+
+    // Light from top-left: bright highlight near that side, darker on the rim.
+    const hx = cx - r * 0.4;
+    const hy = cy - r * 0.45;
+    const grad = ctx.createRadialGradient(hx, hy, r * 0.15, cx, cy, r);
+
+    const base = this.opts.color;
+    grad.addColorStop(0.0, this._tint(base, 0.35));   // bright highlight
+    grad.addColorStop(0.5, base);                     // mid
+    grad.addColorStop(1.0, this._shade(base, 0.45));  // dark rim
+
+    ctx.fillStyle = grad;
+    ctx.fillRect(cx - r, cy - r, r * 2, r * 2);
+    ctx.restore();
+
+    // Soft rim outline
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, Math.PI * 2);
+    ctx.strokeStyle = "rgba(0,0,0,0.15)";
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+
+    // Subtle glossy specular highlight
+    ctx.save();
+    ctx.globalAlpha = 0.18;
+    ctx.beginPath();
+    ctx.ellipse(cx - r * 0.35, cy - r * 0.43, r * 0.25, r * 0.18, -0.35, 0, Math.PI * 2);
+    const gloss = ctx.createRadialGradient(
+      cx - r * 0.35, cy - r * 0.43, 0,
+      cx - r * 0.35, cy - r * 0.43, r * 0.25
+    );
+    gloss.addColorStop(0, "rgba(255,255,255,0.9)");
+    gloss.addColorStop(1, "rgba(255,255,255,0)");
+    ctx.fillStyle = gloss;
+    ctx.fill();
+    ctx.restore();
+  }
+
+  // ---- helpers: simple HSL lighten/darken from a hex ----
+
+  _tint(hex, amount) { // amount in [0..1]
+    const { h, s, l } = this._hexToHSL(hex);
+    return this._hslToCSS(h, s, Math.min(100, l + amount * 100));
+    }
+
+  _shade(hex, amount) {
+    const { h, s, l } = this._hexToHSL(hex);
+    return this._hslToCSS(h, s, Math.max(0, l - amount * 100));
+  }
+
+  _hexToHSL(hex) {
+    let c = hex.replace("#", "");
+    if (c.length === 3) c = [...c].map(x => x + x).join("");
+
+    const r = parseInt(c.slice(0, 2), 16) / 255;
+    const g = parseInt(c.slice(2, 4), 16) / 255;
+    const b = parseInt(c.slice(4, 6), 16) / 255;
+
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    let h, s, l = (max + min) / 2;
+
+    if (max === min) {
+      h = 0; s = 0;
+    } else {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+        case g: h = (b - r) / d + 2; break;
+        case b: h = (r - g) / d + 4; break;
+      }
+      h /= 6;
+    }
+
+    return { h: h * 360, s: s * 100, l: l * 100 };
+  }
+
+  _hslToCSS(h, s, l) {
+    return `hsl(${h.toFixed(1)} ${s.toFixed(1)}% ${l.toFixed(1)}%)`;
+  }
+}
+
+class Demo_UI extends Active_HTML_Document {
+    constructor(spec = {}) {
+        spec.__type_name = spec.__type_name || 'demo_ui';
+        super(spec);
+        const {context} = this;
+        if (typeof this.body.add_class === 'function') {
+            this.body.add_class('demo-ui');
+        }
+        const compose = () => {
+            const window = new controls.Window({
+                context: context,
+                title: 'jsgui3-html Dropdown_Menu',
+                pos: [5, 5]
+            });
+            window.size = [480, 400];
+            const canvas = new controls.canvas({
+                context
+            });
+            canvas.dom.attributes.id = 'globeCanvas'
+            canvas.size = [300, 300];
+            window.inner.add(canvas);
+            this.body.add(window);
+            this._ctrl_fields = this._ctrl_fields || {};
+            this._ctrl_fields.canvas = this.canvas = canvas;
+        }
+        if (!spec.el) {
+            compose();
+            //this.add_change_listeners();
+        }
+    }
+    /*
+    add_change_listeners() {
+        const {select_options} = this;
+        select_options.data.model.on('change', e => {
+            console.log('select_options.data.model change e', e);
+        });
+    }
+        */
+    activate() {
+        if (!this.__active) {
+            super.activate();
+            const {context, ti1, ti2} = this;
+            //this.add_change_listeners();
+            console.log('activate Demo_UI');
+            context.on('window-resize', e_resize => {
+            });
+
+            const globe = new BlueSphereRenderer("globeCanvas", {
+                color: "#1e88e5",       // try different blues
+                background: null,       // or a color like "#0b1020"
+                padding: 10
+            });
+        }
+    }
+}
+Demo_UI.css = `
+* {
+    margin: 0;
+    padding: 0;
+}
+body {
+    overflow-x: hidden;
+    overflow-y: hidden;
+    background-color: #E0E0E0;
+}
+.demo-ui {
+}
+`;
+controls.Demo_UI = Demo_UI;
+module.exports = jsgui;

package/examples/controls/14) window, canvas/server.js

@@ -0,0 +1,21 @@
+const jsgui = require('./client');
+const {Demo_UI} = jsgui.controls;
+const Server = require('../../../server');
+if (require.main === module) {
+    const server = new Server({
+        Ctrl: Demo_UI,
+        debug: true,
+        'src_path_client_js': require.resolve('./client.js'),
+    });
+    console.log('waiting for server ready event');
+    server.one('ready', () => {
+        console.log('server ready');
+        server.start(52000, function (err, cb_start) {
+            if (err) {
+                throw err;
+            } else {
+                console.log('server started');
+            }
+        });
+    })
+}

package/examples/controls/14b) window, canvas (improved renderer)/client.js

@@ -0,0 +1,391 @@
+
+
+
+const jsgui = require('jsgui3-client');
+const {controls, Control, mixins} = jsgui;
+const {dragable} = mixins;
+const {Checkbox, Date_Picker, Text_Input, Text_Field, Dropdown_Menu} = controls;
+const Active_HTML_Document = require('../../../controls/Active_HTML_Document');
+
+
+// EarthLikeSphereRenderer.js
+// Renders a blue "Earth-like" sphere with sunlit shading and ocean glint.
+// - Proper diffuse + specular lighting from a 3D sun direction vector
+// - Soft day/night terminator
+// - Atmospheric rim, including backlit twilight when the sun is behind Earth
+// - High-DPI aware, resizes with the canvas element
+
+class EarthLikeSphereRenderer {
+  constructor(canvas, opts = {}) {
+    this.canvas =
+      typeof canvas === "string" ? document.getElementById(canvas) : canvas;
+    if (!(this.canvas instanceof HTMLCanvasElement)) {
+      throw new Error("Pass a canvas element or its id");
+    }
+
+    this.ctx = this.canvas.getContext("2d");
+
+    // Lighting / material defaults tuned for "ocean Earth" look
+    this.opts = {
+      padding: opts.padding ?? 8,
+      background: opts.background ?? null,        // e.g. "#071018" or null
+      baseColor: opts.baseColor ?? [0.13, 0.42, 0.86], // ocean-ish RGB (linear-ish 0..1)
+      ambient: opts.ambient ?? 0.08,              // base floor light
+      diffuse: opts.diffuse ?? 1.0,               // lambertian strength
+      specular: opts.specular ?? 0.75,            // specular strength (ocean glint)
+      shininess: opts.shininess ?? 120.0,         // specular tightness (higher = tighter)
+      terminatorSoftness: opts.terminatorSoftness ?? 0.08, // soften day/night edge
+      atmosphere: opts.atmosphere ?? 0.45,        // day-side rim
+      backlight: opts.backlight ?? 0.22,          // night-side backscatter (sun behind)
+      dpr: window.devicePixelRatio || 1,
+      quality: Math.min(2, Math.max(0.5, opts.quality ?? 1.0)), // internal sampling scale
+    };
+
+    // Default sun direction (unit; toward viewer is +Z). This is "above-left-front".
+    this.sun = this._normalize([ -0.45, 0.55, 0.65 ]);
+
+    this.resize();
+    this.render();
+
+    this._onResize = () => { this.resize(); this.render(); };
+    window.addEventListener("resize", this._onResize, { passive: true });
+  }
+
+  destroy() {
+    window.removeEventListener("resize", this._onResize);
+  }
+
+  // ---- Public controls ------------------------------------------------------
+
+  /**
+   * Set sun direction as a unit vector [x, y, z] in camera coordinates.
+   * Axes: +X right, +Y up, +Z toward camera (viewer).
+   * Example: front-left-up is [-0.5, 0.5, 0.7]
+   */
+  setSunDirection(vec3) {
+    this.sun = this._normalize(vec3);
+    this.render();
+  }
+
+  /**
+   * Convenience: set sun from spherical angles (degrees).
+   * lonDeg: 0° is toward camera (+Z), +90° is to the right (+X), ±180° is away (-Z)
+   * latDeg: +90° straight up (+Y), -90° straight down (-Y)
+   */
+  setSunFromSpherical(lonDeg, latDeg) {
+    const toRad = Math.PI / 180;
+    const lon = lonDeg * toRad;
+    const lat = latDeg * toRad;
+    const cx = Math.cos(lat), sx = Math.sin(lat);
+    const sz = Math.sin(lon), cz = Math.cos(lon);
+    this.setSunDirection([ cx * sz, sx, cx * cz ]);
+  }
+
+  /**
+   * Convenience: set sun from azimuth/elevation (degrees) in camera frame.
+   * azimuthDeg: 0° = straight toward camera (+Z), 90° = right (+X), 180° = away (-Z)
+   * elevationDeg: 0° = horizon plane, +90° = straight up (+Y)
+   */
+  setSunFromAzEl(azimuthDeg, elevationDeg) {
+    this.setSunFromSpherical(azimuthDeg, elevationDeg);
+  }
+
+  /**
+   * Optional helper: very rough astronomical position -> direction in an
+   * inertial, equatorial-like frame (J2000-ish). For realism you’ll typically
+   * rotate this into your camera frame. Good enough as a starting point.
+   */
+  setSunApproxFromDateUTC(dateUtc /* Date */) {
+    const vEci = this._approxSunEciUnit(dateUtc);
+    // Default assumption: camera frame aligned with ECI, viewer on +Z.
+    // If you have your own camera orientation, rotate vEci accordingly before setSunDirection.
+    this.setSunDirection(vEci);
+  }
+
+  // ---- Canvas sizing --------------------------------------------------------
+
+  resize() {
+    const dpr = (this.opts.dpr = window.devicePixelRatio || 1);
+    const rect = this.canvas.getBoundingClientRect();
+    const displayWidth = rect.width || this.canvas.width;
+    const displayHeight = rect.height || this.canvas.height;
+
+    const w = Math.max(1, Math.round(displayWidth * dpr));
+    const h = Math.max(1, Math.round(displayHeight * dpr));
+
+    if (this.canvas.width !== w || this.canvas.height !== h) {
+      this.canvas.width = w;
+      this.canvas.height = h;
+    }
+
+    // Scale so drawing uses CSS pixels.
+    this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+    this.ctx.scale(dpr, dpr);
+  }
+
+  // ---- Rendering ------------------------------------------------------------
+
+  render() {
+    const ctx = this.ctx;
+
+    const rect = this.canvas.getBoundingClientRect();
+    const width = rect.width || this.canvas.width / this.opts.dpr;
+    const height = rect.height || this.canvas.height / this.opts.dpr;
+
+    // Background
+    ctx.clearRect(0, 0, width, height);
+    if (this.opts.background) {
+      ctx.fillStyle = this.opts.background;
+      ctx.fillRect(0, 0, width, height);
+    }
+
+    // Sphere geometry
+    const pad = this.opts.padding;
+    const r = Math.max(1, Math.min(width, height) / 2 - pad);
+    const cx = width / 2;
+    const cy = height / 2;
+
+    // Offscreen buffer in CSS pixels for clean putImageData/drawImage
+    // (quality allows oversampling for smoother edges/specular)
+    const q = this.opts.quality;
+    const d = Math.max(2, Math.floor(2 * r * q));
+    const off = this._getOffscreen(d, d);
+    const id = off.ctx.createImageData(d, d);
+    const data = id.data;
+
+    // Precompute lighting constants
+    const L = this.sun; // [x,y,z], unit
+    const V = [0, 0, 1]; // viewer along +Z
+    const H = this._normalize([ L[0] + V[0], L[1] + V[1], L[2] + V[2] ]); // Blinn-Phong half-vector
+
+    const base = this.opts.baseColor;           // base ocean color (linear-ish 0..1)
+    const amb = this.opts.ambient;
+    const kd = this.opts.diffuse;
+    const ks = this.opts.specular;
+    const shin = this.opts.shininess;
+    const termSoft = this.opts.terminatorSoftness;
+    const atm = this.opts.atmosphere;
+    const back = this.opts.backlight;
+
+    // Helpers
+    const clamp01 = (x) => Math.max(0, Math.min(1, x));
+    const smoothstep = (e0, e1, x) => {
+      const t = clamp01((x - e0) / (e1 - e0));
+      return t * t * (3 - 2 * t);
+    };
+    const pow = Math.pow;
+
+    // Loop over the square and shade only pixels within the circle
+    const rad = d * 0.5;
+    const invR = 1 / rad;
+
+    let p = 0;
+    for (let y = 0; y < d; y++) {
+      const vy_screen = (y + 0.5 - rad) * invR; // +down in screen
+      for (let x = 0; x < d; x++) {
+        const vx = (x + 0.5 - rad) * invR;      // +right
+        const vy = -vy_screen;                  // convert to +up for math
+
+        const rr = vx * vx + vy * vy;
+        if (rr > 1.0005) {
+          // outside sphere — transparent
+          data[p++] = 0; data[p++] = 0; data[p++] = 0; data[p++] = 0;
+          continue;
+        }
+
+        // Anti-aliased edge alpha: blend over ~1 pixel at the rim
+        const dist = Math.sqrt(rr);
+        const aa = clamp01((1 - dist) * rad); // ~1 pixel smoothing
+        const alpha = Math.round(255 * aa);
+
+        // Sphere normal
+        const vz = Math.sqrt(Math.max(0, 1 - rr));
+        const N = [vx, vy, vz];
+
+        // Lighting terms
+        const NL = N[0] * L[0] + N[1] * L[1] + N[2] * L[2];         // cosine to light
+        const NV = N[2];                                            // dot(N, V) since V = [0,0,1]
+        const NH = N[0] * H[0] + N[1] * H[1] + N[2] * H[2];
+
+        // Softened terminator so night/day edge isn’t razor-sharp
+        const dayMask = smoothstep(-termSoft, termSoft, NL) * clamp01(NL);
+
+        // Diffuse (Lambert)
+        const diff = kd * dayMask;
+
+        // Specular (Blinn-Phong) — only on lit side
+        const spec = NL > 0 ? ks * pow(clamp01(NH), shin) : 0;
+
+        // Atmospheric rim (day side): stronger near limb (low NV)
+        let rimDay = atm * pow(1 - clamp01(NV), 2.4) * clamp01(NL + 0.15);
+
+        // Backlit rim (sun behind Earth): glow near limb where N faces away from sun
+        let rimBack = 0;
+        if (L[2] < 0) { // sun somewhere behind viewer
+          const away = clamp01(-NL); // how much the normal faces away from light
+          rimBack = back * pow(1 - clamp01(NV), 3.2) * away;
+        }
+
+        // Combine lighting
+        let rLin = base[0] * (amb + diff) + spec + 0.40 * rimDay + 0.25 * rimBack;
+        let gLin = base[1] * (amb + diff) + spec + 0.65 * rimDay + 0.40 * rimBack;
+        let bLin = base[2] * (amb + diff) + spec + 1.00 * rimDay + 0.80 * rimBack;
+
+        // Simple tone & gamma to keep it punchy but not clipped
+        const tone = (c) => 1 - Math.exp(-2.6 * c); // filmic-ish
+        rLin = tone(rLin); gLin = tone(gLin); bLin = tone(bLin);
+
+        const r8 = Math.round(clamp01(pow(rLin, 1 / 2.2)) * 255);
+        const g8 = Math.round(clamp01(pow(gLin, 1 / 2.2)) * 255);
+        const b8 = Math.round(clamp01(pow(bLin, 1 / 2.2)) * 255);
+
+        data[p++] = r8; data[p++] = g8; data[p++] = b8; data[p++] = alpha;
+      }
+    }
+
+    // Blit with masking onto main canvas
+    off.ctx.putImageData(id, 0, 0);
+
+    // Draw at the correct size and position; offscreen is in CSS px already
+    const drawSize = (d / q);
+    const drawX = cx - drawSize * 0.5;
+    const drawY = cy - drawSize * 0.5;
+
+    // Ensure we stay within a circular footprint on the main canvas
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, Math.PI * 2);
+    ctx.clip();
+    ctx.drawImage(off.canvas, drawX, drawY, drawSize, drawSize);
+    ctx.restore();
+
+    // Optional subtle outline for crispness
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, Math.PI * 2);
+    ctx.strokeStyle = "rgba(0,0,0,0.14)";
+    ctx.lineWidth = 1.2;
+    ctx.stroke();
+  }
+
+  // ---- Internals ------------------------------------------------------------
+
+  _getOffscreen(w, h) {
+    if (!this._off || this._off.canvas.width !== w || this._off.canvas.height !== h) {
+      const c = document.createElement("canvas");
+      c.width = w; c.height = h;
+      this._off = { canvas: c, ctx: c.getContext("2d") };
+    }
+    return this._off;
+  }
+
+  _normalize(v) {
+    const n = Math.hypot(v[0], v[1], v[2]) || 1;
+    return [ v[0] / n, v[1] / n, v[2] / n ];
+  }
+
+  // Very rough solar position in an Earth-centered, equatorial-like frame.
+  // Enough to get a plausible sun direction that varies with date.
+  _approxSunEciUnit(dateUtc) {
+    // Julian centuries since J2000
+    const JD = (dateUtc.getTime() / 86400000) + 2440587.5;
+    const n = JD - 2451545.0;
+
+    // mean anomaly (deg) & mean longitude (deg)
+    const g = this._deg2rad((357.529 + 0.98560028 * n) % 360);
+    const L = this._deg2rad((280.459 + 0.98564736 * n) % 360);
+
+    // ecliptic longitude (deg)
+    const lambda = L + this._deg2rad(1.915) * Math.sin(g) + this._deg2rad(0.020) * Math.sin(2 * g);
+
+    // obliquity of the ecliptic (deg)
+    const eps = this._deg2rad(23.439 - 0.00000036 * n);
+
+    // convert to equatorial (RA/Dec) then to Cartesian unit vector
+    const x = Math.cos(lambda);
+    const y = Math.cos(eps) * Math.sin(lambda);
+    const z = Math.sin(eps) * Math.sin(lambda);
+
+    // This vector points from Earth to Sun. Align camera so +Z ≈ viewer.
+    // You may rotate this to match your camera.
+    return this._normalize([ x, z, y ]); // a simple axis shuffle to fit our (+X right, +Y up, +Z toward viewer) convention
+  }
+
+  _deg2rad(d) { return d * Math.PI / 180; }
+}
+
+
+class Demo_UI extends Active_HTML_Document {
+    constructor(spec = {}) {
+        spec.__type_name = spec.__type_name || 'demo_ui';
+        super(spec);
+        const {context} = this;
+        if (typeof this.body.add_class === 'function') {
+            this.body.add_class('demo-ui');
+        }
+        const compose = () => {
+            const window = new controls.Window({
+                context: context,
+                title: 'jsgui3-html Dropdown_Menu',
+                pos: [5, 5]
+            });
+            window.size = [480, 400];
+            const canvas = new controls.canvas({
+                context
+            });
+            canvas.dom.attributes.id = 'globeCanvas'
+            canvas.size = [300, 300];
+            window.inner.add(canvas);
+            this.body.add(window);
+            this._ctrl_fields = this._ctrl_fields || {};
+            this._ctrl_fields.canvas = this.canvas = canvas;
+        }
+        if (!spec.el) {
+            compose();
+            //this.add_change_listeners();
+        }
+    }
+    /*
+    add_change_listeners() {
+        const {select_options} = this;
+        select_options.data.model.on('change', e => {
+            console.log('select_options.data.model change e', e);
+        });
+    }
+        */
+    activate() {
+        if (!this.__active) {
+            super.activate();
+            const {context, ti1, ti2} = this;
+            //this.add_change_listeners();
+            console.log('activate Demo_UI');
+            context.on('window-resize', e_resize => {
+            });
+
+            const earth = new EarthLikeSphereRenderer("globeCanvas", {
+              background: "#081019",
+              quality: 1.25,            // 1.0..2.0 (higher = smoother, slower)
+              shininess: 140,           // tighten/loosen the ocean glint
+              atmosphere: 0.5,          // rim intensity (day side)
+              backlight: 0.25           // twilight rim when sun is behind Earth
+            });
+
+            // Place sun front-left-up:
+            earth.setSunFromSpherical(-35, 25);
+        }
+    }
+}
+Demo_UI.css = `
+* {
+    margin: 0;
+    padding: 0;
+}
+body {
+    overflow-x: hidden;
+    overflow-y: hidden;
+    background-color: #E0E0E0;
+}
+.demo-ui {
+}
+`;
+controls.Demo_UI = Demo_UI;
+module.exports = jsgui;

package/examples/controls/14b) window, canvas (improved renderer)/server.js

@@ -0,0 +1,21 @@
+const jsgui = require('./client');
+const {Demo_UI} = jsgui.controls;
+const Server = require('../../../server');
+if (require.main === module) {
+    const server = new Server({
+        Ctrl: Demo_UI,
+        debug: true,
+        'src_path_client_js': require.resolve('./client.js'),
+    });
+    console.log('waiting for server ready event');
+    server.one('ready', () => {
+        console.log('server ready');
+        server.start(52000, function (err, cb_start) {
+            if (err) {
+                throw err;
+            } else {
+                console.log('server started');
+            }
+        });
+    })
+}