Update panorama.dart

fix onImageLoad call
Merge pull request #33 from george-assan/master
2021-11-28 20:08:01 +08:00 · 2021-11-28 20:04:38 +08:00 · 2021-11-28 19:52:42 +08:00 · 2021-10-18 14:23:20 +00:00 · 2021-10-18 14:21:37 +00:00 · 2021-09-15 10:28:41 +10:00
11 changed files with 506 additions and 228 deletions
--- a/CHANGELOG.md
+++ b/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.
--- a/README.md
+++ b/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.
--- a/example/assets/panorama2.webp
+++ b/example/assets/panorama2.webp
--- a/example/assets/panorama_cropped.jpg
+++ b/example/assets/panorama_cropped.jpg
--- a/example/lib/main.dart
+++ b/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(
-            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'),
-          ),
+          panorama,
          Text('${_lon.toStringAsFixed(3)}, ${_lat.toStringAsFixed(3)}, ${_tilt.toStringAsFixed(3)}'),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        mini: true,
        onPressed: () async {
-          _imageFile = await ImagePicker.pickImage(source: ImageSource.gallery);
-          setState(() {});
+          final pickedFile = await picker.getImage(source: ImageSource.gallery);
+          setState(() {
+            if (pickedFile != null) {
+              panoImages.add(Image.file(File(pickedFile.path)));
+              _panoId = panoImages.length - 1;
+            }
+          });
        },
        child: Icon(Icons.panorama),
      ),
--- a/example/pubspec.lock
+++ b/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"
-  convert:
+    version: "1.15.0"
+  fake_async:
    dependency: transitive
    description:
-      name: convert
+      name: fake_async
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "2.1.1"
-  crypto:
-    dependency: transitive
-    description:
-      name: crypto
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.1.3"
+    version: "1.2.0"
  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"
-  petitparser:
+    version: "1.8.0"
+  pedantic:
    dependency: transitive
    description:
-      name: petitparser
+      name: pedantic
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "2.4.0"
-  quiver:
+    version: "1.11.0"
+  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"
-  xml:
-    dependency: transitive
-    description:
-      name: xml
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "3.5.0"
+    version: "2.1.0"
 sdks:
-  dart: ">=2.4.0 <3.0.0"
-  flutter: ">=1.12.13 <2.0.0"
+  dart: ">=2.12.0 <3.0.0"
+  flutter: ">=1.20.0"
--- a/example/pubspec.yaml
+++ b/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
--- a/lib/panorama.dart
+++ b/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.
-  final Function(double longitude, double latitude, double tilt) onViewChanged;
+  /// Area of the image was cropped from the full sized photo sphere.
+  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;
-  double latitude;
-  double longitude;
+  Scene? scene;
+  Object? surface;
+  late double latitude;
+  late double longitude;
  double latitudeDelta = 0;
  double longitudeDelta = 0;
  double zoomDelta = 0;
-  Offset _lastFocalPoint;
-  double _lastZoom;
+  late Offset _lastFocalPoint;
+  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 _screenOrientSubscription;
+  StreamSubscription? _orientationSubscription;
+  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;
-    longitudeDelta -= widget.sensitivity * _animateDirection * 0.5 * math.pi * offset.dx / 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;
    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 (widget.animSpeed == 0 && _controller.isAnimating) _controller.stop();
+    if (latitudeDelta.abs() < 0.001 &&
+        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.up..setFrom(Vector3(0, 1, 0)));
-    scene.update();
+    q.rotate(scene!.camera.target..setFrom(Vector3(0, 0, -_radius)));
+    q.rotate(scene!.camera.up..setFrom(Vector3(0, 1, 0)));
+    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));
-          _updateView();
+          orientation.setValues(event.yaw, event.pitch, event.roll);
        });
        break;
      case SensorControl.AbsoluteOrientation:
        motionSensors.absoluteOrientationUpdateInterval = Duration.microsecondsPerSecond ~/ 60;
        _orientationSubscription = motionSensors.absoluteOrientation.listen((AbsoluteOrientationEvent event) {
-          orientation.setFrom(Vector3(event.yaw, event.pitch, event.roll));
-          _updateView();
+          orientation.setValues(event.yaw, event.pitch, event.roll);
        });
        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, texture: image);
-        scene.world.add(Object(name: 'surface', mesh: mesh, backfaceCulling: false));
-        scene.updateTexture();
-        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));
-        _updateView();
-      });
+      final Mesh mesh = generateSphereMesh(radius: _radius, latSegments: widget.latSegments, lonSegments: widget.lonSegments, croppedArea: widget.croppedArea, croppedFullWidth: widget.croppedFullWidth, croppedFullHeight: widget.croppedFullHeight);
+      surface = Object(name: 'surface', mesh: mesh, backfaceCulling: false);
+      _loadTexture(widget.child!.image);
+      scene.world.add(surface!);
+      _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) {
-      surface.mesh = generateSphereMesh(radius: _radius, latSegments: widget.latSegments, lonSegments: widget.lonSegments, texture: surface.mesh.texture);
+    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, croppedArea: widget.croppedArea, croppedFullWidth: widget.croppedFullWidth, croppedFullHeight: widget.croppedFullHeight);
    }
    if (widget.child?.image != oldWidget.child?.image) {
-      loadImageFromProvider(widget.child.image).then((ui.Image image) {
-        surface.mesh.texture = image;
-        surface.mesh.textureRect = Rect.fromLTWH(0, 0, image.width.toDouble(), image.height.toDouble());
-        scene.updateTexture();
-      });
+      _loadTexture(widget.child?.image);
    }
    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<Offset> texcoords = List<Offset>(count);
-  List<Polygon> indices = List<Polygon>(latSegments * lonSegments * 2);
+  List<Vector3> vertices = List<Vector3>.filled(count, Vector3.zero());
+  List<Offset> texcoords = List<Offset>.filled(count, Offset.zero);
+  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);
--- a/pubspec.lock
+++ b/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"
-  convert:
+    version: "1.15.0"
+  fake_async:
    dependency: transitive
    description:
-      name: convert
+      name: fake_async
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "2.1.1"
-  crypto:
-    dependency: transitive
-    description:
-      name: crypto
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.1.3"
+    version: "1.2.0"
  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"
-  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"
+    version: "1.8.0"
  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"
-  xml:
-    dependency: transitive
-    description:
-      name: xml
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "3.5.0"
+    version: "2.1.0"
 sdks:
-  dart: ">=2.4.0 <3.0.0"
+  dart: ">=2.12.0 <3.0.0"
  flutter: ">=1.10.0"
--- a/pubspec.yaml
+++ b/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
-  motion_sensors: ^0.0.4
+  flutter_cube: ^0.1.1
+  motion_sensors: ^0.1.0

 dev_dependencies:
  flutter_test:
--- a/resource/screenshot.gif
+++ b/resource/screenshot.gif
Author	SHA1	Message	Date
Zebiao Hu	538fd94889	Update panorama.dart fix onImageLoad call	2021-11-28 20:08:01 +08:00
Zebiao Hu	87e43ef941	Merge pull request #33 from george-assan/master Update to add onImageLoad event	2021-11-28 20:04:38 +08:00
Zebiao Hu	2fe97f8276	Merge pull request #32 from Kopi-Su-Studio/master Fix to prevent the AnimationController from stopping if a sensorControl is active	2021-11-28 19:52:42 +08:00
george-assan	dff5295e74	Merge pull request #1 from george-assan/george-assan-patch-1 Update to add onImageLoad event	2021-10-18 14:23:20 +00:00
george-assan	a961d7c463	Update to add onImageLoad event - Noticed blank grey background before 360 image loaded. 'onImageLoad' event makes it possible to add loading widgets before the 360 images comes to view.	2021-10-18 14:21:37 +00:00
Nick Cellini	e71c64f98b	Add a fix to prevent the AnimationController from stopping if a sensor control is active.	2021-09-15 10:28:41 +10:00
Mark Hu	7be49de63a	update version info	2021-04-16 22:50:03 +08:00
Mark Hu	30ab817ee1	Fix rotation when the sensor is not available	2021-04-16 11:25:16 +08:00
Zebiao Hu	a9a83f91ae	Merge pull request #22 from martintan/update-hotspots Update hotspot stream controller when view is updated	2021-04-16 10:26:50 +08:00
martintan	9c442caa95	Update hotspot stream controller when view is updated	2021-04-11 16:02:43 +08:00
Mark Hu	f0754548a9	migrate to null safety	2021-03-13 12:05:12 +08:00
Mark Hu	689b6d52c2	update version info	2021-03-12 17:45:41 +08:00
Mark Hu	c95857ef72	fixed _updateTexture when surface is null	2021-01-09 14:17:35 +08:00
Mark Hu	f9a668755c	fixed orientation sensor error	2021-01-08 23:06:12 +08:00
Mark Hu	0b6e6e7a13	update version info	2021-01-08 17:36:14 +08:00
Mark Hu	a3fa7f319d	add tap & long-press event	2021-01-08 17:26:37 +08:00
Mark Hu	52d70a0e07	update example	2021-01-04 20:16:34 +08:00
Mark Hu	f9b664646d	add croppedArea	2021-01-04 20:15:33 +08:00
Mark Hu	bfe10f206a	update version info	2020-12-30 15:29:20 +08:00
Mark Hu	623e9f2f58	update example	2020-12-30 15:16:45 +08:00
Mark Hu	135ac1deeb	support animated images	2020-12-30 15:15:34 +08:00
Mark Hu	39994ab244	update version info	2020-12-29 14:10:51 +08:00
Mark Hu	2617d8ecea	speed up texture loading	2020-12-29 14:08:43 +08:00
Mark Hu	4e9df517ff	Fixed isFinite exception	2020-12-29 14:00:40 +08:00
Mark Hu	ff4f6ae432	update version info	2020-12-29 01:09:52 +08:00
Mark Hu	15c86511b4	transform hotspots	2020-12-29 00:19:39 +08:00
Mark Hu	670d8fa570	update example	2020-12-23 16:14:24 +08:00
Mark Hu	791473c5c5	add hotspots for placing widgets in the panorama	2020-12-23 16:11:55 +08:00