@aguacerowx/react-native 0.0.0

package/android/src/main/java/com/aguacerowx/reactnative/WeatherFrameProcessorModule.java

@@ -0,0 +1,145 @@
+package com.aguacerowx.reactnative;
+
+import androidx.annotation.NonNull;
+import android.util.Base64;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.Callback;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.bridge.WritableMap;
+
+import org.json.JSONObject;
+
+import java.io.ByteArrayOutputStream;
+import java.io.File;
+import java.io.FileOutputStream;
+import java.io.IOException;
+import java.net.HttpURLConnection;
+import java.net.URL;
+import java.nio.charset.StandardCharsets;
+import java.util.concurrent.ExecutorService;
+import java.util.concurrent.Executors;
+
+
+public class WeatherFrameProcessorModule extends ReactContextBaseJavaModule {
+
+    private final ExecutorService executorService;
+    private volatile int currentRunToken = 0;
+    private final ReactApplicationContext reactContext;
+
+    WeatherFrameProcessorModule(ReactApplicationContext context) {
+        super(context);
+        this.reactContext = context;
+        
+        int coreCount = Runtime.getRuntime().availableProcessors();
+        int optimalWorkerCount = Math.max(4, Math.min(coreCount - 1, 8));
+
+        this.executorService = Executors.newFixedThreadPool(optimalWorkerCount);
+        android.util.Log.d("AguaceroWX", "Initialized with " + optimalWorkerCount + " workers (" + coreCount + " cores available)");
+    }
+
+    @ReactMethod
+    public void cancelAllFrames() {
+        currentRunToken++;
+    }
+
+    @NonNull
+    @Override
+    public String getName() {
+        return "WeatherFrameProcessorModule";
+    }
+
+    @ReactMethod
+    public void processFrame(ReadableMap options, Callback callback) {
+        final int taskToken = this.currentRunToken;
+        executorService.execute(() -> {
+            FileOutputStream fos = null;
+            try {
+                if (taskToken != this.currentRunToken) {
+                    // Task was cancelled, do nothing.
+                    return;
+                }
+                
+                // 1. Network Request (This part is perfect, no changes needed)
+                String urlString = options.getString("url");
+                String apiKey = options.getString("apiKey");
+                String bundleId = options.getString("bundleId");
+                URL requestUrl = new URL(urlString);
+                HttpURLConnection conn = (HttpURLConnection) requestUrl.openConnection();
+                conn.setRequestMethod("GET");
+                conn.setRequestProperty("x-api-key", apiKey);
+                if (bundleId != null) {
+                    conn.setRequestProperty("x-app-identifier", bundleId);
+                }
+                
+                if (conn.getResponseCode() != 200) { 
+                    throw new IOException("HTTP Error: " + conn.getResponseCode()); 
+                }
+                
+                ByteArrayOutputStream result = new ByteArrayOutputStream();
+                byte[] buffer = new byte[8192];
+                int length;
+                while ((length = conn.getInputStream().read(buffer)) != -1) {
+                    result.write(buffer, 0, length);
+                }
+                String responseString = result.toString(StandardCharsets.UTF_8.name());
+                JSONObject jsonResponse = new JSONObject(responseString);
+                conn.disconnect();
+
+                String b64CompressedData = jsonResponse.getString("data");
+                JSONObject encoding = jsonResponse.getJSONObject("encoding");
+                
+                // --- START OF EDITS ---
+
+                // 2. Decode Base64 into the RAW COMPRESSED bytes.
+                //    DO NOT decompress it here.
+                byte[] compressedData = Base64.decode(b64CompressedData, Base64.DEFAULT);
+
+                // 3. Write the SMALL, COMPRESSED data to a file.
+                File cacheDir = reactContext.getCacheDir();
+                // Use a predictable filename to avoid creating duplicate files for the same frame
+                String fileName = "frame_" + urlString.hashCode() + ".zst";
+                File dataFile = new File(cacheDir, fileName);
+                
+                fos = new FileOutputStream(dataFile);
+                fos.write(compressedData); // Write the compressed bytes
+                fos.flush();
+                fos.close();
+                fos = null; // Set to null after successful close
+
+                // 4. Prepare Success Response with the file path and metadata
+                WritableMap responseMap = Arguments.createMap();
+                responseMap.putString("filePath", dataFile.getAbsolutePath());
+                responseMap.putDouble("scale", encoding.getDouble("scale"));
+                responseMap.putDouble("offset", encoding.getDouble("offset"));
+                responseMap.putDouble("missing", encoding.getDouble("missing_quantized"));
+                
+                // We still pass this for the very first frame to load instantly without a flicker.
+                // The preloader logic on the JS side will ignore this and just use the filePath.
+                responseMap.putString("dataAsBase64", b64CompressedData);
+
+                callback.invoke(null, responseMap);
+
+                // --- END OF EDITS ---
+
+            } catch (Exception e) {
+                // Don't invoke callback if task was cancelled, to avoid spamming logs
+                if (taskToken == this.currentRunToken) {
+                    android.util.Log.e("AguaceroWX", "Error processing frame", e);
+                    callback.invoke(e.getMessage(), null);
+                }
+            } finally {
+                if (fos != null) {
+                    try {
+                        fos.close();
+                    } catch (IOException e) {
+                        android.util.Log.e("AguaceroWX", "Error closing file stream", e);
+                    }
+                }
+            }
+        });
+    }
+}

package/android/src/main/res/raw/debug_fragment_shader.glsl

@@ -0,0 +1,13 @@
+precision highp float;
+
+varying vec2 v_texCoord;
+uniform sampler2D u_data_texture;
+
+void main() {
+  // Read the raw normalized value [0.0, 1.0] from the texture's alpha channel.
+  float raw_normalized_value = texture2D(u_data_texture, v_texCoord).a;
+
+  // Output this value directly as a grayscale color.
+  // If the data is valid, this will produce a black and white weather map.
+  gl_FragColor = vec4(raw_normalized_value, raw_normalized_value, raw_normalized_value, 1.0);
+}

package/android/src/main/res/raw/debug_vertex_shader.glsl

@@ -0,0 +1,13 @@
+attribute vec2 a_position; // Vertex position in Mercator coordinates (0.0 to 1.0)
+attribute vec2 a_texCoord;
+
+varying vec2 v_texCoord;
+
+void main() {
+  // This is a "passthrough" shader. It IGNORES the u_matrix from the map camera.
+  // It converts the input position (0..1) directly to OpenGL clip space (-1..1).
+  // This should paint a giant square over the entire screen, regardless of map pan/zoom.
+  gl_Position = vec4(a_position.x * 2.0 - 1.0, (1.0 - a_position.y) * 2.0 - 1.0, 0.0, 1.0);
+  
+  v_texCoord = a_texCoord;
+}

package/android/src/main/res/raw/fragment_shader.glsl

@@ -0,0 +1,87 @@
+// packages/react-native/android/src/main/res/raw/fragment_shader.glsl
+
+precision highp float;
+varying vec2 v_texCoord;
+
+uniform sampler2D u_data_texture;
+uniform sampler2D u_colormap_texture;
+uniform float u_scale;
+uniform float u_offset;
+uniform float u_missing_quantized;
+uniform float u_opacity;
+uniform vec2 u_data_range;
+uniform vec2 u_texture_size;
+uniform int u_smoothing;
+
+// Custom bilinear filtering that respects NaN boundaries
+float sampleDataTextureSmooth(vec2 uv) {
+    float missing_in_texture_range = u_missing_quantized + 128.0;
+
+    // Get the four corner samples for bilinear interpolation
+    vec2 pixel_coord = uv * u_texture_size;
+    vec2 pixel_floor = floor(pixel_coord - 0.5) + 0.5;
+    vec2 f = pixel_coord - pixel_floor;
+
+    // Sample the 2x2 grid
+    float s00 = texture2D(u_data_texture, (pixel_floor + vec2(0.0, 0.0)) / u_texture_size).a * 255.0;
+    float s10 = texture2D(u_data_texture, (pixel_floor + vec2(1.0, 0.0)) / u_texture_size).a * 255.0;
+    float s01 = texture2D(u_data_texture, (pixel_floor + vec2(0.0, 1.0)) / u_texture_size).a * 255.0;
+    float s11 = texture2D(u_data_texture, (pixel_floor + vec2(1.0, 1.0)) / u_texture_size).a * 255.0;
+
+    // Check which samples are valid (not NaN)
+    bool valid00 = abs(s00 - missing_in_texture_range) >= 0.5;
+    bool valid10 = abs(s10 - missing_in_texture_range) >= 0.5;
+    bool valid01 = abs(s01 - missing_in_texture_range) >= 0.5;
+    bool valid11 = abs(s11 - missing_in_texture_range) >= 0.5;
+
+    // If ANY sample is NaN, return NaN (this pixel is on an edge)
+    if (!valid00 || !valid10 || !valid01 || !valid11) {
+        return missing_in_texture_range;
+    }
+
+    // All samples are valid - do proper bilinear interpolation
+    float s0 = mix(s00, s10, f.x);
+    float s1 = mix(s01, s11, f.x);
+    return mix(s0, s1, f.y);
+}
+
+// Simple nearest-neighbor sampling
+float sampleDataTextureNearest(vec2 uv) {
+    // Snap to exact pixel center
+    vec2 snapped_coord = floor(uv * u_texture_size + 0.5) / u_texture_size;
+    return texture2D(u_data_texture, snapped_coord).a * 255.0;
+}
+
+void main() {
+    // Choose sampling method based on smoothing setting
+    float value_in_texture;
+    if (u_smoothing == 1) {
+        value_in_texture = sampleDataTextureSmooth(v_texCoord);
+    } else {
+        value_in_texture = sampleDataTextureNearest(v_texCoord);
+    }
+
+    float missing_in_texture_range = u_missing_quantized + 128.0;
+
+    // Check if this pixel is a predefined missing value
+    if (abs(value_in_texture - missing_in_texture_range) < 0.5) {
+        discard;
+    }
+
+    // De-quantize the texture value to its actual physical value
+    float quantized_value = value_in_texture - 128.0;
+    float raw_value = quantized_value * u_scale + u_offset;
+
+    // If the data is below the specified minimum range, make it invisible.
+    if (raw_value < u_data_range.x) {
+        discard;
+    }
+
+    // Normalize the value to a 0-1 coordinate for colormap lookup
+    float colormap_coord = (raw_value - u_data_range.x) / (u_data_range.y - u_data_range.x);
+    colormap_coord = clamp(colormap_coord, 0.0, 1.0);
+
+    // Sample the colormap and apply opacity
+    vec4 color = texture2D(u_colormap_texture, vec2(colormap_coord, 0.5));
+    gl_FragColor = vec4(color.rgb, color.a * u_opacity);
+}

package/android/src/main/res/raw/vertex_shader.glsl

@@ -0,0 +1,20 @@
+// The view-projection matrix from the Mapbox camera
+uniform mat4 u_matrix;
+
+// Attributes passed from the vertex buffer
+attribute vec2 a_position; // Vertex position in Mercator coordinates (0.0 to 1.0)
+attribute vec2 a_texCoord; // Texture coordinate (0.0 to 1.0)
+
+// Passed to the fragment shader
+varying vec2 v_texCoord;
+
+void main() {
+  // This is the intended use.
+  // The u_matrix correctly transforms the 2D Mercator coordinate (a_position)
+  // into the final 4D clip space position for the GPU.
+  // We construct a vec4 with z=0.0 and w=1.0 to treat it as a point on the map's surface.
+  gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);
+
+  // Pass the texture coordinate to the fragment shader
+  v_texCoord = a_texCoord;
+}

package/index.js

@@ -0,0 +1,2 @@
+export { MapManager } from './src/MapManager';
+export { WeatherLayerManager } from './src/WeatherLayerManager';

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@aguacerowx/react-native",
+  "version": "0.0.0",
+  "description": "Native weather rendering for React Native",
+  "main": "index.js",
+  "react-native": "index.js",
+  "files": [
+    "src",
+    "android",
+    "ios",
+    "*.podspec"
+  ],
+  "keywords": [
+    "react-native",
+    "android",
+    "weather",
+    "map"
+  ],
+  "peerDependencies": {
+    "@rnmapbox/maps": "*",
+    "react": "*",
+    "react-native": "*"
+  },
+  "dependencies": {
+    "@aguacerowx/javascript-sdk": "^0.0.4",
+    "base64-js": "^1.5.1",
+    "fzstd": "^0.1.1"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Michael Barletta",
+  "license": "ISC"
+}

package/src/AguaceroContext.js

@@ -0,0 +1,4 @@
+import React from 'react';
+
+// This will hold the single instance of our AguaceroCore
+export const AguaceroContext = React.createContext(null);

package/src/GridRenderLayer.js

@@ -0,0 +1,121 @@
+// packages/react-native/src/GridRenderLayer.js
+
+import React, { useRef, useImperativeHandle, forwardRef } from 'react';
+import { UIManager, findNodeHandle, requireNativeComponent, StyleSheet } from 'react-native';
+
+// This must match getName() in GridRenderManager.java
+const NATIVE_COMPONENT_NAME = 'GridRenderLayer';
+const GridRenderView = requireNativeComponent(NATIVE_COMPONENT_NAME);
+
+export const GridRenderLayer = forwardRef((props, ref) => {
+    const nativeRef = useRef(null);
+
+    const getCommandId = (commandName) => {
+        const config = UIManager.getViewManagerConfig(NATIVE_COMPONENT_NAME);
+        return config?.Commands?.[commandName];
+    };
+
+    useImperativeHandle(ref, () => ({
+        updateGeometry: (corners, gridDef) => {
+            if (nativeRef.current) {
+                const commandId = getCommandId('updateGeometry');
+                if (commandId != null) {
+                    UIManager.dispatchViewManagerCommand(
+                        findNodeHandle(nativeRef.current),
+                        commandId,
+                        [corners, gridDef]
+                    );
+                }
+            } else {
+                console.warn('⚠️ [GridRenderLayer] nativeRef not available for updateGeometry');
+            }
+        },
+
+        updateDataTextureFromFile: (filePath, nx, ny, scale, offset, missing) => {
+            if (nativeRef.current) {
+                const commandId = getCommandId('updateDataTexture');
+                if (commandId != null) {
+                    UIManager.dispatchViewManagerCommand(
+                        findNodeHandle(nativeRef.current),
+                        commandId,
+                        [filePath, Number(nx), Number(ny), Number(scale), Number(offset), Number(missing)]
+                    );
+                }
+            } else {
+                console.warn('⚠️ [GridRenderLayer] nativeRef not available for updateDataTextureFromFile');
+            }
+        },
+        
+        updateDataTexture: (base64Data, nx, ny, scale, offset, missing) => {
+            if (nativeRef.current) {
+                const commandId = getCommandId('updateDataTexture');
+                if (commandId != null) {
+                    UIManager.dispatchViewManagerCommand(
+                        findNodeHandle(nativeRef.current),
+                        commandId,
+                        [base64Data, Number(nx), Number(ny), Number(scale), Number(offset), Number(missing)]
+                    );
+                }
+            } else {
+                console.warn('⚠️ [GridRenderLayer] nativeRef not available for updateDataTexture');
+            }
+        },
+
+        updateColormapTexture: (colormapArray) => {
+            if (nativeRef.current) {
+                const commandId = getCommandId('updateColormapTexture');
+                if (commandId != null) {
+                    UIManager.dispatchViewManagerCommand(
+                        findNodeHandle(nativeRef.current),
+                        commandId,
+                        [colormapArray]
+                    );
+                }
+            } else {
+                console.warn('⚠️ [GridRenderLayer] nativeRef not available for updateColormapTexture');
+            }
+        },
+
+        updateDataParameters: (scale, offset, missing) => {
+            if (nativeRef.current) {
+                const commandId = getCommandId('updateDataParameters');
+                if (commandId != null) {
+                    UIManager.dispatchViewManagerCommand(
+                        findNodeHandle(nativeRef.current),
+                        commandId,
+                        [Number(scale), Number(offset), Number(missing)]
+                    );
+                }
+            } else {
+                console.warn('⚠️ [GridRenderLayer] nativeRef not available for updateDataParameters');
+            }
+        },
+
+        setSmoothing: (enabled) => {
+            if (nativeRef.current) {
+                // Smoothing can be set via props
+                nativeRef.current.setNativeProps({ smoothing: enabled });
+            } else {
+                console.warn('⚠️ [GridRenderLayer] nativeRef not available for setSmoothing');
+            }
+        },
+    }));
+
+    return (
+        <GridRenderView
+            ref={nativeRef}
+            opacity={props.opacity}
+            dataRange={props.dataRange}
+            belowID={props.belowID}
+            smoothing={true}
+            style={styles.overlay}
+            pointerEvents="none"
+        />
+    );
+});
+
+const styles = StyleSheet.create({
+    overlay: {
+        ...StyleSheet.absoluteFillObject,
+    },
+});

package/src/MapManager.js

@@ -0,0 +1,158 @@
+// packages/react-native/src/MapManager.js
+
+import React, { useMemo, useEffect, useState, useRef } from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import Mapbox from '@rnmapbox/maps';
+import { THEME_CONFIGS } from '@aguacerowx/javascript-sdk';
+import { StyleApplicator } from './StyleApplicator';
+import { AguaceroContext } from './AguaceroContext';
+import { mapRegistry } from './MapRegistry';
+
+const TERRAIN_LAYER_ID = 'AML_-_terrain';
+
+// --- UTILITIES ---
+function isObject(item) {
+    return (item && typeof item === 'object' && !Array.isArray(item));
+}
+
+function deepMerge(target, source) {
+    const output = { ...target };
+    if (isObject(target) && isObject(source)) {
+        Object.keys(source).forEach(key => {
+            if (isObject(source[key])) {
+                if (!(key in target)) {
+                    Object.assign(output, { [key]: source[key] });
+                } else {
+                    output[key] = deepMerge(target[key], source[key]);
+                }
+            } else {
+                Object.assign(output, { [key]: source[key] });
+            }
+        });
+    }
+    return output;
+}
+
+export const MapManager = ({ mapboxToken, customStyles, theme = 'light', mapOptions = {}, children }) => {
+    const mapRef = useRef(null);
+    const [mapStyle, setMapStyle] = useState(null);
+
+    // Register map with the global registry when it's ready
+    useEffect(() => {
+        if (mapRef.current) {
+            mapRegistry.setMap(mapRef.current);
+            console.log('📍 [MapManager] Registered map with registry');
+        }
+    }, []);
+
+    const contextValue = useMemo(() => ({
+        getMap: () => mapRef.current,
+        getCenter: () => {
+            return mapRef.current?._currentCenter || [-95.7129, 37.0902];
+        },
+    }), []);
+
+    useEffect(() => {
+        let lightTheme = JSON.parse(JSON.stringify(THEME_CONFIGS.light));
+        let darkTheme = JSON.parse(JSON.stringify(THEME_CONFIGS.dark));
+
+        if (customStyles) {
+            if (customStyles.light) {
+                lightTheme = deepMerge(lightTheme, customStyles.light);
+            }
+            if (customStyles.dark) {
+                darkTheme = deepMerge(darkTheme, customStyles.dark);
+            }
+        }
+        
+        setMapStyle(theme === 'dark' ? darkTheme : lightTheme);
+    }, [customStyles, theme]);
+
+    useEffect(() => {
+        if (mapboxToken) {
+            Mapbox.setAccessToken(mapboxToken);
+        } else {
+            console.error("MapManager: A 'mapboxToken' prop is required but was not provided.");
+        }
+    }, [mapboxToken]);
+
+    if (!mapboxToken) {
+        return (
+            <View style={[styles.container, styles.centerContent]}>
+                <Text style={styles.errorText}>Mapbox Token Missing</Text>
+                <Text style={styles.errorSubText}>Please provide the 'mapboxToken' prop.</Text>
+            </View>
+        );
+    }
+
+    const handleCameraChange = (event) => {
+        if (event?.properties?.center) {
+            const center = event.properties.center;
+            
+            // Store the current center in the ref for immediate access
+            if (mapRef.current) {
+                mapRef.current._currentCenter = center;
+            }
+            
+            // Notify all listeners through the registry
+            console.log('📍 [MapManager] Camera changed, notifying registry:', center);
+            mapRegistry.notifyCameraChange(center);
+        }
+    };
+    
+    const BASE_STYLE_URL = 'mapbox://styles/aguacerowx/cmfvox8mq004u01qm5nlg7qkt';
+
+    return (
+        <View style={styles.container}>
+            <AguaceroContext.Provider value={contextValue}>
+                <Mapbox.MapView
+                    ref={mapRef}
+                    style={styles.map}
+                    styleURL={BASE_STYLE_URL}
+                    scaleBarEnabled={false}
+                    onCameraChanged={handleCameraChange}
+                >
+                    <Mapbox.Camera
+                        defaultSettings={{
+                            centerCoordinate: mapOptions.center || [-95.7129, 37.0902],
+                            zoomLevel: mapOptions.zoom || 4,
+                            pitch: mapOptions.pitch || 0,
+                            bearing: mapOptions.bearing || 0,
+                            minZoomLevel: mapOptions.minZoom || 2,
+                            maxZoomLevel: mapOptions.maxZoom || 12,
+                        }}
+                    />
+                    
+                    {mapStyle && <StyleApplicator styles={mapStyle} />}
+
+                    <Mapbox.VectorSource id="mapbox-dem" url="mapbox://mapbox.mapbox-terrain-dem-v1"/>
+                    {children}
+                </Mapbox.MapView>
+            </AguaceroContext.Provider>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#1a1a2e',
+    },
+    centerContent: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    map: {
+        flex: 1,
+    },
+    errorText: {
+        color: '#FF6B6B',
+        fontSize: 22,
+        fontWeight: 'bold',
+    },
+    errorSubText: {
+        color: 'white',
+        fontSize: 16,
+        marginTop: 8,
+    }
+});

package/src/MapRegistry.js

@@ -0,0 +1,35 @@
+// Simple registry to share the map instance
+class MapRegistry {
+    constructor() {
+        this.mapRef = null;
+        this.listeners = [];
+    }
+
+    setMap(mapRef) {
+        console.log('📍 [MapRegistry] Map registered:', !!mapRef);
+        this.mapRef = mapRef;
+    }
+
+    getMap() {
+        return this.mapRef;
+    }
+
+    addCameraListener(listener) {
+        this.listeners.push(listener);
+        console.log('📍 [MapRegistry] Listener added, total:', this.listeners.length);
+    }
+
+    removeCameraListener(listener) {
+        const index = this.listeners.indexOf(listener);
+        if (index > -1) {
+            this.listeners.splice(index, 1);
+            console.log('📍 [MapRegistry] Listener removed, total:', this.listeners.length);
+        }
+    }
+
+    notifyCameraChange(center) {
+        this.listeners.forEach(listener => listener(center));
+    }
+}
+
+export const mapRegistry = new MapRegistry();