Update panorama.dart

fix onImageLoad call

CHANGELOG.md

@@ -1,3 +1,34 @@
+## [0.4.1] - 03/13/2021
+
+* Fix hotspots no update
+* Fix rotation
+
+## [0.4.0] - 03/13/2021
+
+* migrate to null safety
+
+## [0.3.2] - 01/09/2021
+
+* Fixed some bugs
+
+## [0.3.1] - 01/08/2021
+
+* Add cropped area.
+* Add onTap & onLongPress event.
+
+## [0.3.0] - 12/30/2020
+
+* Support animated images.
+
+## [0.2.1] - 12/29/2020
+
+* Fixed isFinite exception.
+* Speed up texture loading.
+
+## [0.2.0] - 12/29/2020
+
+* Add hotspots.
+
 ## [0.1.2] - 02/22/2020
 
 * Fixed some bugs of sensor control.

README.md

@@ -10,7 +10,7 @@ Add panorama as a dependency in your pubspec.yaml file.
 
 ```yaml
 dependencies:
-  panorama: ^0.1.2
+  panorama: ^0.4.1
 ```
 
 Import and add the Panorama widget to your project.

example/lib/main.dart

@@ -17,48 +17,154 @@ class MyApp extends StatelessWidget {
 }
 
 class MyHomePage extends StatefulWidget {
-  MyHomePage({Key key, this.title}) : super(key: key);
+  MyHomePage({Key? key, this.title}) : super(key: key);
 
-  final String title;
+  final String? title;
 
   @override
   _MyHomePageState createState() => _MyHomePageState();
 }
 
 class _MyHomePageState extends State<MyHomePage> {
-  File _imageFile;
   double _lon = 0;
   double _lat = 0;
   double _tilt = 0;
+  int _panoId = 0;
+  List<Image> panoImages = [
+    Image.asset('assets/panorama.jpg'),
+    Image.asset('assets/panorama2.webp'),
+    Image.asset('assets/panorama_cropped.webp'),
+  ];
+  ImagePicker picker = ImagePicker();
+
+  void onViewChanged(longitude, latitude, tilt) {
+    setState(() {
+      _lon = longitude;
+      _lat = latitude;
+      _tilt = tilt;
+    });
+  }
+
+  Widget hotspotButton({String? text, IconData? icon, VoidCallback? onPressed}) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        TextButton(
+          style: ButtonStyle(
+            shape: MaterialStateProperty.all(CircleBorder()),
+            backgroundColor: MaterialStateProperty.all(Colors.black38),
+            foregroundColor: MaterialStateProperty.all(Colors.white),
+          ),
+          child: Icon(icon),
+          onPressed: onPressed,
+        ),
+        text != null
+            ? Container(
+                padding: EdgeInsets.all(4.0),
+                decoration: BoxDecoration(color: Colors.black38, borderRadius: BorderRadius.all(Radius.circular(4))),
+                child: Center(child: Text(text)),
+              )
+            : Container(),
+      ],
+    );
+  }
 
   @override
   Widget build(BuildContext context) {
+    Widget panorama;
+    switch (_panoId % panoImages.length) {
+      case 0:
+        panorama = Panorama(
+          animSpeed: 1.0,
+          sensorControl: SensorControl.Orientation,
+          onViewChanged: onViewChanged,
+          onTap: (longitude, latitude, tilt) => print('onTap: $longitude, $latitude, $tilt'),
+          onLongPressStart: (longitude, latitude, tilt) => print('onLongPressStart: $longitude, $latitude, $tilt'),
+          onLongPressMoveUpdate: (longitude, latitude, tilt) => print('onLongPressMoveUpdate: $longitude, $latitude, $tilt'),
+          onLongPressEnd: (longitude, latitude, tilt) => print('onLongPressEnd: $longitude, $latitude, $tilt'),
+          child: Image.asset('assets/panorama.jpg'),
+          hotspots: [
+            Hotspot(
+              latitude: -15.0,
+              longitude: -129.0,
+              width: 90,
+              height: 75,
+              widget: hotspotButton(text: "Next scene", icon: Icons.open_in_browser, onPressed: () => setState(() => _panoId++)),
+            ),
+            Hotspot(
+              latitude: -42.0,
+              longitude: -46.0,
+              width: 60.0,
+              height: 60.0,
+              widget: hotspotButton(icon: Icons.search, onPressed: () => setState(() => _panoId = 2)),
+            ),
+            Hotspot(
+              latitude: -33.0,
+              longitude: 123.0,
+              width: 60.0,
+              height: 60.0,
+              widget: hotspotButton(icon: Icons.arrow_upward, onPressed: () {}),
+            ),
+          ],
+        );
+        break;
+      case 2:
+        panorama = Panorama(
+          animSpeed: 1.0,
+          sensorControl: SensorControl.Orientation,
+          onViewChanged: onViewChanged,
+          croppedArea: Rect.fromLTWH(2533.0, 1265.0, 5065.0, 2533.0),
+          croppedFullWidth: 10132.0,
+          croppedFullHeight: 5066.0,
+          child: Image.asset('assets/panorama_cropped.jpg'),
+          hotspots: [
+            Hotspot(
+              latitude: 0.0,
+              longitude: -46.0,
+              width: 90.0,
+              height: 75.0,
+              widget: hotspotButton(text: "Next scene", icon: Icons.double_arrow, onPressed: () => setState(() => _panoId++)),
+            ),
+          ],
+        );
+        break;
+      default:
+        panorama = Panorama(
+          animSpeed: 1.0,
+          sensorControl: SensorControl.Orientation,
+          onViewChanged: onViewChanged,
+          child: panoImages[_panoId % panoImages.length],
+          hotspots: [
+            Hotspot(
+              latitude: 0.0,
+              longitude: 160.0,
+              width: 90.0,
+              height: 75.0,
+              widget: hotspotButton(text: "Next scene", icon: Icons.double_arrow, onPressed: () => setState(() => _panoId++)),
+            ),
+          ],
+        );
+    }
     return Scaffold(
       appBar: AppBar(
-        title: Text(widget.title),
+        title: Text(widget.title!),
       ),
       body: Stack(
         children: [
-          Panorama(
+          panorama,
-            animSpeed: 1.0,
-            sensorControl: SensorControl.Orientation,
-            onViewChanged: (longitude, latitude, tilt) {
-              setState(() {
-                _lon = longitude;
-                _lat = latitude;
-                _tilt = tilt;
-              });
-            },
-            child: _imageFile != null ? Image.file(_imageFile) : Image.asset('assets/panorama.jpg'),
-          ),
           Text('${_lon.toStringAsFixed(3)}, ${_lat.toStringAsFixed(3)}, ${_tilt.toStringAsFixed(3)}'),
         ],
       ),
       floatingActionButton: FloatingActionButton(
         mini: true,
         onPressed: () async {
-          _imageFile = await ImagePicker.pickImage(source: ImageSource.gallery);
+          final pickedFile = await picker.getImage(source: ImageSource.gallery);
-          setState(() {});
+          setState(() {
+            if (pickedFile != null) {
+              panoImages.add(Image.file(File(pickedFile.path)));
+              _panoId = panoImages.length - 1;
+            }
+          });
         },
         child: Icon(Icons.panorama),
       ),

example/pubspec.lock

@@ -1,62 +1,55 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
-  archive:
-    dependency: transitive
-    description:
-      name: archive
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.0.11"
-  args:
-    dependency: transitive
-    description:
-      name: args
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.5.2"
   async:
     dependency: transitive
     description:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.4.0"
+    version: "2.5.0"
   boolean_selector:
     dependency: transitive
     description:
       name: boolean_selector
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.5"
+    version: "2.1.0"
+  characters:
+    dependency: transitive
+    description:
+      name: characters
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.0"
   charcode:
     dependency: transitive
     description:
       name: charcode
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.2"
+    version: "1.2.0"
+  clock:
+    dependency: transitive
+    description:
+      name: clock
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.0"
   collection:
     dependency: transitive
     description:
       name: collection
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.14.11"
+    version: "1.15.0"
-  convert:
+  fake_async:
     dependency: transitive
     description:
-      name: convert
+      name: fake_async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.1"
+    version: "1.2.0"
-  crypto:
-    dependency: transitive
-    description:
-      name: crypto
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.1.3"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -68,82 +61,96 @@ packages:
       name: flutter_cube
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.0.3"
+    version: "0.1.1"
   flutter_plugin_android_lifecycle:
     dependency: transitive
     description:
       name: flutter_plugin_android_lifecycle
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.6"
+    version: "2.0.0"
   flutter_test:
     dependency: "direct dev"
     description: flutter
     source: sdk
     version: "0.0.0"
-  image:
+  http:
     dependency: transitive
     description:
-      name: image
+      name: http
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.4"
+    version: "0.13.0"
+  http_parser:
+    dependency: transitive
+    description:
+      name: http_parser
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.0.0"
   image_picker:
     dependency: "direct main"
     description:
       name: image_picker
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.6.3+4"
+    version: "0.7.2+1"
+  image_picker_platform_interface:
+    dependency: transitive
+    description:
+      name: image_picker_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.1"
   matcher:
     dependency: transitive
     description:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.6"
+    version: "0.12.10"
   meta:
     dependency: transitive
     description:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.8"
+    version: "1.3.0"
   motion_sensors:
     dependency: transitive
     description:
       name: motion_sensors
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.0.1"
+    version: "0.1.0"
   panorama:
     dependency: "direct main"
     description:
       path: ".."
       relative: true
     source: path
-    version: "0.0.2"
+    version: "0.4.0"
   path:
     dependency: transitive
     description:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.6.4"
+    version: "1.8.0"
-  petitparser:
+  pedantic:
     dependency: transitive
     description:
-      name: petitparser
+      name: pedantic
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.4.0"
+    version: "1.11.0"
-  quiver:
+  plugin_platform_interface:
     dependency: transitive
     description:
-      name: quiver
+      name: plugin_platform_interface
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.5"
+    version: "2.0.0"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -155,63 +162,56 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.5.5"
+    version: "1.8.0"
   stack_trace:
     dependency: transitive
     description:
       name: stack_trace
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.9.3"
+    version: "1.10.0"
   stream_channel:
     dependency: transitive
     description:
       name: stream_channel
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.0"
+    version: "2.1.0"
   string_scanner:
     dependency: transitive
     description:
       name: string_scanner
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.5"
+    version: "1.1.0"
   term_glyph:
     dependency: transitive
     description:
       name: term_glyph
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.2.0"
   test_api:
     dependency: transitive
     description:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.15"
+    version: "0.2.19"
   typed_data:
     dependency: transitive
     description:
       name: typed_data
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.6"
+    version: "1.3.0"
   vector_math:
     dependency: transitive
     description:
       name: vector_math
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.8"
+    version: "2.1.0"
-  xml:
-    dependency: transitive
-    description:
-      name: xml
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "3.5.0"
 sdks:
-  dart: ">=2.4.0 <3.0.0"
+  dart: ">=2.12.0 <3.0.0"
-  flutter: ">=1.12.13 <2.0.0"
+  flutter: ">=1.20.0"

example/pubspec.yaml

@@ -3,14 +3,14 @@ description: A new Flutter project.
 version: 1.0.0+1
 
 environment:
-  sdk: ">=2.1.0 <3.0.0"
+  sdk: '>=2.12.0 <3.0.0'
 
 dependencies:
   flutter:
     sdk: flutter
   panorama: 
     path: ../
-  image_picker: ^0.6.3+4
+  image_picker: ^0.7.2+1
 
 dev_dependencies:
   flutter_test:
@@ -20,4 +20,6 @@ dev_dependencies:
 flutter:
   uses-material-design: true
   assets:
-    - assets/
+    - assets/
+
+publish_to: none

lib/panorama.dart

@@ -20,7 +20,7 @@ enum SensorControl {
 
 class Panorama extends StatefulWidget {
   Panorama({
-    Key key,
+    Key? key,
     this.latitude = 0,
     this.longitude = 0,
     this.zoom = 1.0,
@@ -37,8 +37,17 @@ class Panorama extends StatefulWidget {
     this.lonSegments = 64,
     this.interactive = true,
     this.sensorControl = SensorControl.None,
+    this.croppedArea = const Rect.fromLTWH(0.0, 0.0, 1.0, 1.0),
+    this.croppedFullWidth = 1.0,
+    this.croppedFullHeight = 1.0,
     this.onViewChanged,
+    this.onTap,
+    this.onLongPressStart,
+    this.onLongPressMoveUpdate,
+    this.onLongPressEnd,
+    this.onImageLoad,
     this.child,
+    this.hotspots,
   }) : super(key: key);
 
   /// The initial latitude, in degrees, between -90 and 90. default to 0 (the vertical center of the image).
@@ -89,33 +98,84 @@ class Panorama extends StatefulWidget {
   /// Control the panorama with motion sensors.
   final SensorControl sensorControl;
 
-  /// It is called when the view direction has changed, sending the new longitude and latitude values back.
+  /// Area of the image was cropped from the full sized photo sphere.
-  final Function(double longitude, double latitude, double tilt) onViewChanged;
+  final Rect croppedArea;
+
+  /// Original full width from which the image was cropped.
+  final double croppedFullWidth;
+
+  /// Original full height from which the image was cropped.
+  final double croppedFullHeight;
+
+  /// This event will be called when the view direction has changed, it contains latitude and longitude about the current view.
+  final Function(double longitude, double latitude, double tilt)? onViewChanged;
+
+  /// This event will be called when the user has tapped, it contains latitude and longitude about where the user tapped.
+  final Function(double longitude, double latitude, double tilt)? onTap;
+
+  /// This event will be called when the user has started a long press, it contains latitude and longitude about where the user pressed.
+  final Function(double longitude, double latitude, double tilt)? onLongPressStart;
+
+  /// This event will be called when the user has drag-moved after a long press, it contains latitude and longitude about where the user pressed.
+  final Function(double longitude, double latitude, double tilt)? onLongPressMoveUpdate;
+
+  /// This event will be called when the user has stopped a long presses, it contains latitude and longitude about where the user pressed.
+  final Function(double longitude, double latitude, double tilt)? onLongPressEnd;
+  
+  /// This event will be called when provided image is loaded on texture.
+  final Function()? onImageLoad;
 
   /// Specify an Image(equirectangular image) widget to the panorama.
-  final Image child;
+  final Image? child;
+
+  /// Place widgets in the panorama.
+  final List<Hotspot>? hotspots;
 
   @override
   _PanoramaState createState() => _PanoramaState();
 }
 
 class _PanoramaState extends State<Panorama> with SingleTickerProviderStateMixin {
-  Scene scene;
+  Scene? scene;
-  double latitude;
+  Object? surface;
-  double longitude;
+  late double latitude;
+  late double longitude;
   double latitudeDelta = 0;
   double longitudeDelta = 0;
   double zoomDelta = 0;
-  Offset _lastFocalPoint;
+  late Offset _lastFocalPoint;
-  double _lastZoom;
+  double? _lastZoom;
   double _radius = 500;
   double _dampingFactor = 0.05;
   double _animateDirection = 1.0;
-  AnimationController _controller;
+  late AnimationController _controller;
   double screenOrientation = 0.0;
   Vector3 orientation = Vector3(0, radians(90), 0);
-  StreamSubscription _orientationSubscription;
+  StreamSubscription? _orientationSubscription;
-  StreamSubscription _screenOrientSubscription;
+  StreamSubscription? _screenOrientSubscription;
+  late StreamController<Null> _streamController;
+  Stream<Null>? _stream;
+  ImageStream? _imageStream;
+
+  void _handleTapUp(TapUpDetails details) {
+    final Vector3 o = positionToLatLon(details.localPosition.dx, details.localPosition.dy);
+    widget.onTap!(degrees(o.x), degrees(-o.y), degrees(o.z));
+  }
+
+  void _handleLongPressStart(LongPressStartDetails details) {
+    final Vector3 o = positionToLatLon(details.localPosition.dx, details.localPosition.dy);
+    widget.onLongPressStart!(degrees(o.x), degrees(-o.y), degrees(o.z));
+  }
+
+  void _handleLongPressMoveUpdate(LongPressMoveUpdateDetails details) {
+    final Vector3 o = positionToLatLon(details.localPosition.dx, details.localPosition.dy);
+    widget.onLongPressMoveUpdate!(degrees(o.x), degrees(-o.y), degrees(o.z));
+  }
+
+  void _handleLongPressEnd(LongPressEndDetails details) {
+    final Vector3 o = positionToLatLon(details.localPosition.dx, details.localPosition.dy);
+    widget.onLongPressEnd!(degrees(o.x), degrees(-o.y), degrees(o.z));
+  }
 
   void _handleScaleStart(ScaleStartDetails details) {
     _lastFocalPoint = details.localFocalPoint;
@@ -125,12 +185,12 @@ class _PanoramaState extends State<Panorama> with SingleTickerProviderStateMixin
   void _handleScaleUpdate(ScaleUpdateDetails details) {
     final offset = details.localFocalPoint - _lastFocalPoint;
     _lastFocalPoint = details.localFocalPoint;
-    latitudeDelta += widget.sensitivity * 0.5 * math.pi * offset.dy / scene.camera.viewportHeight;
+    latitudeDelta += widget.sensitivity * 0.5 * math.pi * offset.dy / scene!.camera.viewportHeight;
-    longitudeDelta -= widget.sensitivity * _animateDirection * 0.5 * math.pi * offset.dx / scene.camera.viewportHeight;
+    longitudeDelta -= widget.sensitivity * _animateDirection * 0.5 * math.pi * offset.dx / scene!.camera.viewportHeight;
     if (_lastZoom == null) {
-      _lastZoom = scene.camera.zoom;
+      _lastZoom = scene!.camera.zoom;
     }
-    zoomDelta += _lastZoom * details.scale - (scene.camera.zoom + zoomDelta);
+    zoomDelta += _lastZoom! * details.scale - (scene!.camera.zoom + zoomDelta);
     if (widget.sensorControl == SensorControl.None && !_controller.isAnimating) {
       _controller.reset();
       if (widget.animSpeed != 0) {
@@ -151,12 +211,16 @@ class _PanoramaState extends State<Panorama> with SingleTickerProviderStateMixin
     longitude += _animateDirection * longitudeDelta * _dampingFactor * widget.sensitivity;
     longitudeDelta *= 1 - _dampingFactor * widget.sensitivity;
     // animate zomming
-    final double zoom = scene.camera.zoom + zoomDelta * _dampingFactor;
+    final double zoom = scene!.camera.zoom + zoomDelta * _dampingFactor;
     zoomDelta *= 1 - _dampingFactor;
-    scene.camera.zoom = zoom.clamp(widget.minZoom, widget.maxZoom);
+    scene!.camera.zoom = zoom.clamp(widget.minZoom, widget.maxZoom);
     // stop animation if not needed
-    if (latitudeDelta.abs() < 0.001 && longitudeDelta.abs() < 0.001 && zoomDelta.abs() < 0.001) {
+    if (latitudeDelta.abs() < 0.001 &&
-      if (widget.animSpeed == 0 && _controller.isAnimating) _controller.stop();
+        longitudeDelta.abs() < 0.001 &&
+        zoomDelta.abs() < 0.001) {
+      if (widget.sensorControl == SensorControl.None &&
+          widget.animSpeed == 0 &&
+          _controller.isAnimating) _controller.stop();
     }
 
     // rotate for screen orientation
@@ -202,9 +266,10 @@ class _PanoramaState extends State<Panorama> with SingleTickerProviderStateMixin
     o = quaternionToOrientation(q * Quaternion.axisAngle(Vector3(0, 1, 0), math.pi * 0.5));
     widget.onViewChanged?.call(degrees(o.x), degrees(-o.y), degrees(o.z));
 
-    q.rotate(scene.camera.target..setFrom(Vector3(0, 0, -_radius)));
+    q.rotate(scene!.camera.target..setFrom(Vector3(0, 0, -_radius)));
-    q.rotate(scene.camera.up..setFrom(Vector3(0, 1, 0)));
+    q.rotate(scene!.camera.up..setFrom(Vector3(0, 1, 0)));
-    scene.update();
+    scene!.update();
+    _streamController.add(null);
   }
 
   void _updateSensorControl() {
@@ -213,15 +278,13 @@ class _PanoramaState extends State<Panorama> with SingleTickerProviderStateMixin
       case SensorControl.Orientation:
         motionSensors.orientationUpdateInterval = Duration.microsecondsPerSecond ~/ 60;
         _orientationSubscription = motionSensors.orientation.listen((OrientationEvent event) {
-          orientation.setFrom(Vector3(event.yaw, event.pitch, event.roll));
+          orientation.setValues(event.yaw, event.pitch, event.roll);
-          _updateView();
         });
         break;
       case SensorControl.AbsoluteOrientation:
         motionSensors.absoluteOrientationUpdateInterval = Duration.microsecondsPerSecond ~/ 60;
         _orientationSubscription = motionSensors.absoluteOrientation.listen((AbsoluteOrientationEvent event) {
-          orientation.setFrom(Vector3(event.yaw, event.pitch, event.roll));
+          orientation.setValues(event.yaw, event.pitch, event.roll);
-          _updateView();
         });
         break;
       default:
@@ -230,62 +293,136 @@ class _PanoramaState extends State<Panorama> with SingleTickerProviderStateMixin
     _screenOrientSubscription?.cancel();
     if (widget.sensorControl != SensorControl.None) {
       _screenOrientSubscription = motionSensors.screenOrientation.listen((ScreenOrientationEvent event) {
-        screenOrientation = radians(event.angle);
+        screenOrientation = radians(event.angle!);
       });
     }
   }
 
+  void _updateTexture(ImageInfo imageInfo, bool synchronousCall) {
+    surface?.mesh.texture = imageInfo.image;
+    surface?.mesh.textureRect = Rect.fromLTWH(0, 0, imageInfo.image.width.toDouble(), imageInfo.image.height.toDouble());
+    scene!.texture = imageInfo.image;
+    scene!.update();
+    widget.onImageLoad?.call();
+  }
+
+  void _loadTexture(ImageProvider? provider) {
+    if (provider == null) return;
+    _imageStream?.removeListener(ImageStreamListener(_updateTexture));
+    _imageStream = provider.resolve(ImageConfiguration());
+    ImageStreamListener listener = ImageStreamListener(_updateTexture);
+    _imageStream!.addListener(listener);
+  }
+
   void _onSceneCreated(Scene scene) {
     this.scene = scene;
+    scene.camera.near = 1.0;
+    scene.camera.far = _radius + 1.0;
+    scene.camera.fov = 75;
+    scene.camera.zoom = widget.zoom;
+    scene.camera.position.setFrom(Vector3(0, 0, 0.1));
     if (widget.child != null) {
-      loadImageFromProvider(widget.child.image).then((ui.Image image) {
+      final Mesh mesh = generateSphereMesh(radius: _radius, latSegments: widget.latSegments, lonSegments: widget.lonSegments, croppedArea: widget.croppedArea, croppedFullWidth: widget.croppedFullWidth, croppedFullHeight: widget.croppedFullHeight);
-        final Mesh mesh = generateSphereMesh(radius: _radius, latSegments: widget.latSegments, lonSegments: widget.lonSegments, texture: image);
+      surface = Object(name: 'surface', mesh: mesh, backfaceCulling: false);
-        scene.world.add(Object(name: 'surface', mesh: mesh, backfaceCulling: false));
+      _loadTexture(widget.child!.image);
-        scene.updateTexture();
+      scene.world.add(surface!);
-        scene.camera.near = 1.0;
+      _updateView();
-        scene.camera.far = _radius + 1.0;
-        scene.camera.fov = 75;
-        scene.camera.zoom = widget.zoom;
-        scene.camera.position.setFrom(Vector3(0, 0, 0.1));
-        _updateView();
-      });
     }
   }
 
+  Matrix4 matrixFromLatLon(double lat, double lon) {
+    return Matrix4.rotationY(radians(90.0 - lon))..rotateX(radians(lat));
+  }
+
+  Vector3 positionToLatLon(double x, double y) {
+    // transform viewport coordinate to NDC, values between -1 and 1
+    final Vector4 v = Vector4(2.0 * x / scene!.camera.viewportWidth - 1.0, 1.0 - 2.0 * y / scene!.camera.viewportHeight, 1.0, 1.0);
+    // create projection matrix
+    final Matrix4 m = scene!.camera.projectionMatrix * scene!.camera.lookAtMatrix;
+    // apply inversed projection matrix
+    m.invert();
+    v.applyMatrix4(m);
+    // apply perspective division
+    v.scale(1 / v.w);
+    // get rotation from two vectors
+    final Quaternion q = Quaternion.fromTwoVectors(v.xyz, Vector3(0.0, 0.0, -_radius));
+    // get euler angles from rotation
+    return quaternionToOrientation(q * Quaternion.axisAngle(Vector3(0, 1, 0), math.pi * 0.5));
+  }
+
+  Vector3 positionFromLatLon(double lat, double lon) {
+    // create projection matrix
+    final Matrix4 m = scene!.camera.projectionMatrix * scene!.camera.lookAtMatrix * matrixFromLatLon(lat, lon);
+    // apply projection matrix
+    final Vector4 v = Vector4(0.0, 0.0, -_radius, 1.0)..applyMatrix4(m);
+    // apply perspective division and transform NDC to the viewport coordinate
+    return Vector3(
+      (1.0 + v.x / v.w) * scene!.camera.viewportWidth / 2,
+      (1.0 - v.y / v.w) * scene!.camera.viewportHeight / 2,
+      v.z,
+    );
+  }
+
+  Widget buildHotspotWidgets(List<Hotspot>? hotspots) {
+    final List<Widget> widgets = <Widget>[];
+    if (hotspots != null && scene != null) {
+      for (Hotspot hotspot in hotspots) {
+        final Vector3 pos = positionFromLatLon(hotspot.latitude, hotspot.longitude);
+        final Offset orgin = Offset(hotspot.width * hotspot.orgin.dx, hotspot.height * hotspot.orgin.dy);
+        final Matrix4 transform = scene!.camera.lookAtMatrix * matrixFromLatLon(hotspot.latitude, hotspot.longitude);
+        final Widget child = Positioned(
+          left: pos.x - orgin.dx,
+          top: pos.y - orgin.dy,
+          width: hotspot.width,
+          height: hotspot.height,
+          child: Transform(
+            origin: orgin,
+            transform: transform..invert(),
+            child: Offstage(
+              offstage: pos.z < 0,
+              child: hotspot.widget,
+            ),
+          ),
+        );
+        widgets.add(child);
+      }
+    }
+    return Stack(children: widgets);
+  }
+
   @override
   void initState() {
     super.initState();
     latitude = degrees(widget.latitude);
     longitude = degrees(widget.longitude);
+    _streamController = StreamController<Null>.broadcast();
+    _stream = _streamController.stream;
 
     _updateSensorControl();
 
     _controller = AnimationController(duration: Duration(milliseconds: 60000), vsync: this)..addListener(_updateView);
-    if (widget.sensorControl == SensorControl.None && widget.animSpeed != 0) _controller.repeat();
+    if (widget.sensorControl != SensorControl.None || widget.animSpeed != 0) _controller.repeat();
   }
 
   @override
   void dispose() {
+    _imageStream?.removeListener(ImageStreamListener(_updateTexture));
     _orientationSubscription?.cancel();
     _screenOrientSubscription?.cancel();
     _controller.dispose();
+    _streamController.close();
     super.dispose();
   }
 
   @override
   void didUpdateWidget(Panorama oldWidget) {
     super.didUpdateWidget(oldWidget);
-    final Object surface = scene.world.find(RegExp('surface'));
     if (surface == null) return;
-    if (widget.latSegments != oldWidget.latSegments || widget.lonSegments != oldWidget.lonSegments) {
+    if (widget.latSegments != oldWidget.latSegments || widget.lonSegments != oldWidget.lonSegments || widget.croppedArea != oldWidget.croppedArea || widget.croppedFullWidth != oldWidget.croppedFullWidth || widget.croppedFullHeight != oldWidget.croppedFullHeight) {
-      surface.mesh = generateSphereMesh(radius: _radius, latSegments: widget.latSegments, lonSegments: widget.lonSegments, texture: surface.mesh.texture);
+      surface!.mesh = generateSphereMesh(radius: _radius, latSegments: widget.latSegments, lonSegments: widget.lonSegments, croppedArea: widget.croppedArea, croppedFullWidth: widget.croppedFullWidth, croppedFullHeight: widget.croppedFullHeight);
     }
     if (widget.child?.image != oldWidget.child?.image) {
-      loadImageFromProvider(widget.child.image).then((ui.Image image) {
+      _loadTexture(widget.child?.image);
-        surface.mesh.texture = image;
-        surface.mesh.textureRect = Rect.fromLTWH(0, 0, image.width.toDouble(), image.height.toDouble());
-        scene.updateTexture();
-      });
     }
     if (widget.sensorControl != oldWidget.sensorControl) {
       _updateSensorControl();
@@ -294,31 +431,81 @@ class _PanoramaState extends State<Panorama> with SingleTickerProviderStateMixin
 
   @override
   Widget build(BuildContext context) {
+    Widget pano = Stack(
+      children: [
+        Cube(interactive: false, onSceneCreated: _onSceneCreated),
+        StreamBuilder(
+          stream: _stream,
+          builder: (BuildContext context, AsyncSnapshot snapshot) {
+            return buildHotspotWidgets(widget.hotspots);
+          },
+        ),
+      ],
+    );
+
     return widget.interactive
         ? GestureDetector(
             onScaleStart: _handleScaleStart,
             onScaleUpdate: _handleScaleUpdate,
-            child: Cube(interactive: false, onSceneCreated: _onSceneCreated),
+            onTapUp: widget.onTap == null ? null : _handleTapUp,
+            onLongPressStart: widget.onLongPressStart == null ? null : _handleLongPressStart,
+            onLongPressMoveUpdate: widget.onLongPressMoveUpdate == null ? null : _handleLongPressMoveUpdate,
+            onLongPressEnd: widget.onLongPressEnd == null ? null : _handleLongPressEnd,
+            child: pano,
           )
-        : Cube(interactive: false, onSceneCreated: _onSceneCreated);
+        : pano;
   }
 }
 
-Mesh generateSphereMesh({num radius = 1.0, int latSegments = 16, int lonSegments = 16, ui.Image texture}) {
+class Hotspot {
+  Hotspot({
+    this.name,
+    this.latitude = 0.0,
+    this.longitude = 0.0,
+    this.orgin = const Offset(0.5, 0.5),
+    this.width = 32.0,
+    this.height = 32.0,
+    this.widget,
+  });
+
+  /// The name of this hotspot.
+  String? name;
+
+  /// The initial latitude, in degrees, between -90 and 90.
+  final double latitude;
+
+  /// The initial longitude, in degrees, between -180 and 180.
+  final double longitude;
+
+  /// The local orgin of this hotspot. Default is Offset(0.5, 0.5).
+  final Offset orgin;
+
+  // The width of widget. Default is 32.0
+  double width;
+
+  // The height of widget. Default is 32.0
+  double height;
+
+  Widget? widget;
+}
+
+Mesh generateSphereMesh({num radius = 1.0, int latSegments = 16, int lonSegments = 16, ui.Image? texture, Rect croppedArea = const Rect.fromLTWH(0.0, 0.0, 1.0, 1.0), double croppedFullWidth = 1.0, double croppedFullHeight = 1.0}) {
   int count = (latSegments + 1) * (lonSegments + 1);
-  List<Vector3> vertices = List<Vector3>(count);
+  List<Vector3> vertices = List<Vector3>.filled(count, Vector3.zero());
-  List<Offset> texcoords = List<Offset>(count);
+  List<Offset> texcoords = List<Offset>.filled(count, Offset.zero);
-  List<Polygon> indices = List<Polygon>(latSegments * lonSegments * 2);
+  List<Polygon> indices = List<Polygon>.filled(latSegments * lonSegments * 2, Polygon(0, 0, 0));
 
   int i = 0;
   for (int y = 0; y <= latSegments; ++y) {
-    final double v = y / latSegments;
+    final double tv = y / latSegments;
+    final double v = (croppedArea.top + croppedArea.height * tv) / croppedFullHeight;
     final double sv = math.sin(v * math.pi);
     final double cv = math.cos(v * math.pi);
     for (int x = 0; x <= lonSegments; ++x) {
-      final double u = x / lonSegments;
+      final double tu = x / lonSegments;
+      final double u = (croppedArea.left + croppedArea.width * tu) / croppedFullWidth;
       vertices[i] = Vector3(radius * math.cos(u * math.pi * 2.0) * sv, radius * cv, radius * math.sin(u * math.pi * 2.0) * sv);
-      texcoords[i] = Offset(u, 1.0 - v);
+      texcoords[i] = Offset(tu, 1.0 - tv);
       i++;
     }
   }
@@ -337,19 +524,6 @@ Mesh generateSphereMesh({num radius = 1.0, int latSegments = 16, int lonSegments
   return mesh;
 }
 
-/// Get ui.Image from ImageProvider
-Future<ui.Image> loadImageFromProvider(ImageProvider provider) async {
-  final Completer<ui.Image> completer = Completer<ui.Image>();
-  final ImageStream imageStream = provider.resolve(ImageConfiguration());
-  ImageStreamListener listener;
-  listener = ImageStreamListener((ImageInfo imageInfo, bool synchronousCall) {
-    completer.complete(imageInfo.image);
-    imageStream.removeListener(listener);
-  });
-  imageStream.addListener(listener);
-  return completer.future;
-}
-
 Vector3 quaternionToOrientation(Quaternion q) {
   // final Matrix4 m = Matrix4.compose(Vector3.zero(), q, Vector3.all(1.0));
   // final Vector v = motionSensors.getOrientation(m);

pubspec.lock

@@ -1,62 +1,55 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
-  archive:
-    dependency: transitive
-    description:
-      name: archive
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.0.11"
-  args:
-    dependency: transitive
-    description:
-      name: args
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.5.2"
   async:
     dependency: transitive
     description:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.4.0"
+    version: "2.5.0"
   boolean_selector:
     dependency: transitive
     description:
       name: boolean_selector
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.5"
+    version: "2.1.0"
+  characters:
+    dependency: transitive
+    description:
+      name: characters
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.0"
   charcode:
     dependency: transitive
     description:
       name: charcode
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.2"
+    version: "1.2.0"
+  clock:
+    dependency: transitive
+    description:
+      name: clock
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.0"
   collection:
     dependency: transitive
     description:
       name: collection
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.14.11"
+    version: "1.15.0"
-  convert:
+  fake_async:
     dependency: transitive
     description:
-      name: convert
+      name: fake_async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.1"
+    version: "1.2.0"
-  crypto:
-    dependency: transitive
-    description:
-      name: crypto
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.1.3"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -68,61 +61,40 @@ packages:
       name: flutter_cube
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.0.3"
+    version: "0.1.1"
   flutter_test:
     dependency: "direct dev"
     description: flutter
     source: sdk
     version: "0.0.0"
-  image:
-    dependency: transitive
-    description:
-      name: image
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.1.4"
   matcher:
     dependency: transitive
     description:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.6"
+    version: "0.12.10"
   meta:
     dependency: transitive
     description:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.8"
+    version: "1.3.0"
   motion_sensors:
     dependency: "direct main"
     description:
       name: motion_sensors
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.0.1"
+    version: "0.1.0"
   path:
     dependency: transitive
     description:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.6.4"
+    version: "1.8.0"
-  petitparser:
-    dependency: transitive
-    description:
-      name: petitparser
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.4.0"
-  quiver:
-    dependency: transitive
-    description:
-      name: quiver
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.0.5"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -134,63 +106,56 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.5.5"
+    version: "1.8.0"
   stack_trace:
     dependency: transitive
     description:
       name: stack_trace
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.9.3"
+    version: "1.10.0"
   stream_channel:
     dependency: transitive
     description:
       name: stream_channel
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.0"
+    version: "2.1.0"
   string_scanner:
     dependency: transitive
     description:
       name: string_scanner
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.5"
+    version: "1.1.0"
   term_glyph:
     dependency: transitive
     description:
       name: term_glyph
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.2.0"
   test_api:
     dependency: transitive
     description:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.15"
+    version: "0.2.19"
   typed_data:
     dependency: transitive
     description:
       name: typed_data
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.6"
+    version: "1.3.0"
   vector_math:
     dependency: transitive
     description:
       name: vector_math
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.8"
+    version: "2.1.0"
-  xml:
-    dependency: transitive
-    description:
-      name: xml
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "3.5.0"
 sdks:
-  dart: ">=2.4.0 <3.0.0"
+  dart: ">=2.12.0 <3.0.0"
   flutter: ">=1.10.0"

pubspec.yaml

@@ -1,16 +1,16 @@
 name: panorama
 description: Panorama -- A 360-degree panorama viewer.
-version: 0.1.2
+version: 0.4.1
 homepage: https://github.com/zesage/panorama
 
 environment:
-  sdk: ">=2.1.0 <3.0.0"
+  sdk: '>=2.12.0 <3.0.0'
 
 dependencies:
   flutter:
     sdk: flutter
-  flutter_cube: ^0.0.6
+  flutter_cube: ^0.1.1
-  motion_sensors: ^0.0.4
+  motion_sensors: ^0.1.0
 
 dev_dependencies:
   flutter_test: