27 lines
2.3 KiB
TypeScript
27 lines
2.3 KiB
TypeScript
import { useCallback, useState } from "react";
|
|
import { Button, SafeAreaView, StyleSheet, Text, View, findNodeHandle } from "react-native";
|
|
import { File, Paths } from "expo-file-system";
|
|
import { Camera, Map, WeatherRuntime, createParticleWeatherStyle } from "@navsea/maplibre-particle-rn";
|
|
|
|
const metadata = JSON.stringify({ schema: "maplibre-particle-field/v1", fieldId: "consumer-smoke", fieldType: "WIND", displayDomain: "GLOBAL", generation: 1, validTime: 1786060800000, dataVersion: 1, bounds: { west: -180, south: -85, east: 180, north: 85 }, grid: { width: 2, height: 2 }, vector: { layout: "interleaved-uv", encoding: "float32-le", noData: -9999 }, payload: { byteLength: 32 } });
|
|
|
|
function writeFixture() {
|
|
const bytes = new Uint8Array(32); const view = new DataView(bytes.buffer);
|
|
for (let offset = 0; offset < bytes.byteLength; offset += 8) { view.setFloat32(offset, 5, true); view.setFloat32(offset + 4, 1, true); }
|
|
const file = new File(Paths.cache, "navsea-particle-consumer-smoke.f32"); file.write(bytes); return file.uri;
|
|
}
|
|
|
|
export default function App() {
|
|
const [tag, setTag] = useState<number | null>(null); const [state, setState] = useState("STYLE_LOADING");
|
|
const onStyle = useCallback(async (event: unknown) => {
|
|
const value = findNodeHandle((event as { target?: unknown }).target as never); if (value == null) return;
|
|
try { await WeatherRuntime.attach(value); setTag(value); setState("WAITING_FOR_FIELDS"); } catch (error) { setState(String(error)); }
|
|
}, []);
|
|
const submit = useCallback(async () => {
|
|
if (tag == null) return;
|
|
try { await WeatherRuntime.clearWindFields(tag); const result = await WeatherRuntime.submitWindField(tag, metadata, writeFixture()); const runtime = await WeatherRuntime.getState(tag); setState(`${result} / ${runtime.state}`); } catch (error) { setState(String(error)); }
|
|
}, [tag]);
|
|
return <SafeAreaView style={styles.root}><View style={styles.map}><Map mapStyle={createParticleWeatherStyle()} onDidFinishLoadingStyle={onStyle}><Camera initialViewState={{ center: [135, 32], zoom: 3.9 }} /></Map></View><View style={styles.controls}><Text>Package smoke: {state}</Text><Button title="Submit canonical fixture" onPress={() => void submit()} /></View></SafeAreaView>;
|
|
}
|
|
const styles = StyleSheet.create({ root: { flex: 1 }, map: { flex: 1 }, controls: { padding: 12, backgroundColor: "white" } });
|