Adjustable heat map resolution

CHANGELOG.md

@@ -1,5 +1,6 @@
 # 0.2.0
 
+- Adjustable heat map resolution
 - Unified output callbacks signatures
 
 # 0.1.1

assets/config-schema.json

@@ -73,6 +73,11 @@
           "type": "number",
           "minimum": 0,
           "maximum": 1
+        },
+        "pixelRatio": {
+          "description": "Determines the heat map image resolution",
+          "type": "number",
+          "exclusiveMinimum": 0
         }
       }
     }

assets/example-config.json

@@ -13,6 +13,7 @@
   },
   "heatMap": {
     "style": "smooth",
-    "transparency": 0.6
+    "transparency": 0.6,
+    "pixelRatio": 2
   }
 }

lib/src/components/processors/graphical_processor.dart

@@ -37,16 +37,16 @@ class GraphicalProcessor extends SessionProcessor {
   }
 
   void _drawHeatMap(Canvas canvas, Session session) {
-    var heatMap =
-        HeatMap(session: session, pointProximity: config.uiElementSize);
+    var clusterScale = config.uiElementSize * config.heatMapPixelRatio;
+    var heatMap = HeatMap(session: session, pointProximity: clusterScale);
 
     layerCount() {
       if (heatMap.largestCluster == 1) return 1;
       return heatMap.largestCluster * config.heatMapStyle.multiplier;
     }
 
     calcFraction(int i) => (i - 1) / max((layerCount() - 1), 1);
-    calcBlur(double val) => (4 * val * val + 2) * config.uiElementSize / 10;
+    calcBlur(double val) => (4 * val * val + 2) * clusterScale / 10;
     for (var i = 1; i <= layerCount(); i++) {
       var fraction = calcFraction(i);
       var paint = Paint()..color = _getSpectrumColor(fraction);

lib/src/components/screenshot_provider.dart

@@ -9,13 +9,13 @@ class ScreenshotProvider {
   final _logger = Logger('RoundSpot.ScreenshotProvider');
 
   /// Captures a screenshot from a [RepaintBoundary] using its [GlobalKey]
-  Future<ui.Image?> takeScreenshot(GlobalKey areaKey) async {
+  Future<ui.Image?> takeScreenshot(GlobalKey areaKey, double pixelRatio) async {
     if (areaKey.currentContext == null) {
       _logger.severe('Could not take a screenshot of the current page.');
       return null;
     }
     var screen =
         areaKey.currentContext!.findRenderObject() as RenderRepaintBoundary;
-    return screen.toImage();
+    return screen.toImage(pixelRatio: pixelRatio);
   }
 }

lib/src/components/session_manager.dart

@@ -92,8 +92,10 @@ class SessionManager {
       );
     }
     if (session.screenSnap == null) {
-      session.screenSnap =
-          await _screenshotProvider.takeScreenshot(detector.areaKey);
+      session.screenSnap = await _screenshotProvider.takeScreenshot(
+        detector.areaKey,
+        _config.heatMapPixelRatio,
+      );
     }
   }
 

lib/src/models/config/config.dart

@@ -63,6 +63,17 @@ class Config {
   /// Takes values between 0 and 1, it's set to 0.75 by default.
   double heatMapTransparency;
 
+  /// Determines the heat map image resolution.
+  ///
+  /// This parameter describes the scale between the
+  /// logical pixels and the size of the output image.
+  /// By default it is equal to one which means the image resolution
+  /// will be equal to the logical device resolution.
+  ///
+  /// As an example in order to generate heat maps in the screen resolution
+  /// you should pass the [FlutterView.devicePixelRatio] here.
+  double heatMapPixelRatio;
+
   /// Initializes the configuration.
   Config({
     bool? enabled,
@@ -73,6 +84,7 @@ class Config {
     Set<OutputType>? outputTypes,
     HeatMapStyle? heatMapStyle,
     double? heatMapTransparency,
+    double? heatMapPixelRatio,
   })  : assert(minSessionEventCount == null || minSessionEventCount >= 1),
         assert(maxSessionIdleTime == null || maxSessionIdleTime >= 1),
         assert(heatMapTransparency == null ||
@@ -84,7 +96,8 @@ class Config {
         outputTypes = outputTypes ?? {OutputType.graphicalRender},
         heatMapStyle = heatMapStyle ?? HeatMapStyle.smooth,
         heatMapTransparency =
-            (heatMapTransparency ?? 0.75).clamp(0, 1).toDouble();
+            (heatMapTransparency ?? 0.75).clamp(0, 1).toDouble(),
+        heatMapPixelRatio = heatMapPixelRatio ?? 1;
 
   /// Creates the configuration from a json map.
   ///
@@ -112,5 +125,6 @@ class Config {
                   HeatMapStyle.values, json['heatMap']?['style'])
               : null,
           heatMapTransparency: json['heatMap']?['transparency'].toDouble(),
+          heatMapPixelRatio: json['heatMap']?['pixelRatio'].toDouble(),
         );
 }

pubspec.yaml

@@ -3,7 +3,7 @@ description: Customizable, easy to use heat map interface analysis library
 repository: https://github.com/stasgora/round-spot
 issue_tracker: https://github.com/stasgora/round-spot/issues
 
-version: 0.1.1
+version: 0.2.0
 
 environment:
   sdk: '>=2.12.0 <3.0.0'