Skip to content
This repository has been archived by the owner on Mar 14, 2023. It is now read-only.

How to disable Scroll Effect in WebView #103

Open
impatelravi opened this issue Dec 16, 2022 · 1 comment
Open

How to disable Scroll Effect in WebView #103

impatelravi opened this issue Dec 16, 2022 · 1 comment

Comments

@impatelravi
Copy link

I want to disable WebViewX Scroll Effect. Unable to scroll when the cursor is on Webview Area. I want the whole page to scroll on the web. Wanted this HTML in Android, iOS, and WEB

Check this video for Issue

My Code

import 'package:flutter/material.dart';
import 'package:webviewx/webviewx.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey keyForOrientationBuilder = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            const SizedBox(height: 50),
            _buildWebView(),
            const SizedBox(
              height: 500,
            )
          ],
        ),
      ),
    );
  }

  Widget _buildWebView() {
    return OrientationBuilder(
      key: keyForOrientationBuilder,
      builder: (context, orientation) {
        return WebViewX(
          initialContent: html,
          initialSourceType: SourceType.html,
          height: 500,
          width: MediaQuery.of(context).size.width,
        );
      },
    );
  }

  final String html = """
     <html>
   <head>
      <style>
         html, body {margin: 0; height: 100%; width: 100%; overflow: hidden}
      </style>
   </head>
   <body>
      <div id="bb-history-widget-graph"  style="background-color: #fafafa;"></div>
      <script src="https://d3js.org/d3.v3.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
      <script src="https://momentjs.com/downloads/moment-timezone.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/gh/impatelravi/d3_data/tooltip.js"></script>
      <style>
         path.domain  {
         stroke: #f2f2f3;
         stroke-width: 1.75px;
         }
      </style>
      </style>
      <script type="application/javascript">
         var allData = [{"open":"2022-11-30 06:22:20.000","close":"2022-11-30 06:22:37.000"},{"open":"2022-11-30 06:23:27.000","close":"2022-11-30 06:23:47.000"},{"open":"2022-12-05 10:38:59.670","close":"2022-12-05 11:15:00.159"},{"open":"2022-12-06 05:56:53.219395","close":"2022-12-06 05:56:53.219395"}]
         var selectedStartDate = '2022-11-29'
         var selectedEndDate = '2022-12-07'
         var timezone = undefined
         var positiveLabel = 'On'
         var negitiveLabel = 'Off'
         
         var testnew = DeviceHistoryChart(allData, selectedStartDate, selectedEndDate, positiveLabel, negitiveLabel);
         
         function DeviceHistoryChart(allData, selectedStartDate, selectedEndDate, positiveLabel, negitiveLabel) {
             var statusNames = {};
             var labelArr = [];
         
             const setStatusNamesAndLabelArr = () => {
                 statusNames.open = {
                     name: positiveLabel,
                     color: "#068c7e"
                 }
         
                 statusNames.close = {
                     name: negitiveLabel,
                     color: "#eee"
                 };
         
               
                 labelArr.push(statusNames.close);
                  labelArr.push(statusNames.open);
             }
         
             const dataProcessing = () => {
                 let dayFormat = d3.time.format("%Y-%m-%d %H:%M:%S");
                 let timeFormat = d3.time.format("%H:%M:%S");
                 let newDataObj = [];
                 let newData = [];
                 const dataArr = [...allData]
                 console.log(dataArr)
                 dataArr.map((value, index) => {
                     let positiveDate = moment(value.open).format('YYYY-MM-DD H:mm:ss');
                     let negativeDate = moment(value.close).format('YYYY-MM-DD H:mm:ss');
                     //console.log("+ve Date " + positiveDate)
                     //console.log("-ve Date " + negativeDate)
         
         
                     if (positiveDate) {
                         newData.push({
                             status: "open",
                             positiveDate: positiveDate,
                             negativeDate: negativeDate
                         });
                         //console.log("new Date "+ newData[0].positiveDate);
                     }
                     if (negativeDate) {
                         newData.push({
                             status: "close",
                             positiveDate: negativeDate,
                             negativeDate: dataArr[index + 1] && dataArr[index + 1].open ? moment(dataArr[index + 1].open).format('YYYY-MM-DD H:mm:ss') : moment().utc().format('YYYY-MM-DD H:mm:ss')
                             //negativeDate: dataArr[index + 1] && dataArr[index + 1].open ? dataArr[index + 1].open : null
                         });
                         //console.log("Negitive Date: " + newData[0].negativeDate)
                     }
                 });
         
                 let currentTime = moment().format('YYYY-MM-DD H:mm:ss');
                 let startSearchTime = moment(selectedStartDate, 'YYYY-MM-DD H:mm:ss').format('YYYY-MM-DD H:mm:ss');
                 let endSearchTime = moment(selectedEndDate, 'YYYY-MM-DD H:mm:ss').format('YYYY-MM-DD H:mm:ss');
         
                 console.log("startSearchTime: " + startSearchTime)
         
                 newData.map((dataValue) => {
                     let startOpenTime = dataValue.positiveDate;
                     let endOpenTime = dataValue.negativeDate;
                     //console.log("startOpenTime " + startOpenTime)
                     //console.log("endOpenTime " + endOpenTime)
         
                     if (startOpenTime && endOpenTime) {
                         let startOpenTimeArray = startOpenTime.split(" ");
                         let endOpenTimeArray = endOpenTime.split(" ");
                         //console.log("startOpenTimeArray" + startOpenTimeArray)
                         //console.log("endOpenTimeArray" + endOpenTimeArray)
         
                         if (startOpenTimeArray[0] === endOpenTimeArray[0]) {
                             newDataObj.push({
                                 status: dataValue.status,
                                 startDay: dayFormat.parse(startOpenTimeArray[0] + " 00:00:00"),
                                 endDay: dayFormat.parse(endOpenTimeArray[0] + " 24:00:00"),
                                 startTime: timeFormat.parse(startOpenTimeArray[1]),
                                 endTime: timeFormat.parse(endOpenTimeArray[1])
                             });
                         } else {
                             newDataObj.push({
                                 status: dataValue.status,
                                 startDay: dayFormat.parse(startOpenTimeArray[0] + " 00:00:00"),
                                 endDay: dayFormat.parse(startOpenTimeArray[0] + " 24:00:00"),
                                 startTime: timeFormat.parse(startOpenTimeArray[1]),
                                 endTime: timeFormat.parse("23:59:59")
                             });
         
                             let nextDay = moment(startOpenTime, 'YYYY-MM-DD H:mm:ss').add(1, 'days').format("YYYY-MM-DD");
                             let beforeDay = moment(endOpenTime, 'YYYY-MM-DD H:mm:ss').subtract(1, 'days').format("YYYY-MM-DD");
         
                             if (nextDay !== endOpenTimeArray[0]) {
                                 newDataObj.push({
                                     status: dataValue.status,
                                     startDay: dayFormat.parse(nextDay + " 00:00:00"),
                                     endDay: dayFormat.parse(beforeDay + " 24:00:00"),
                                     startTime: timeFormat.parse("00:00:00"),
                                     endTime: timeFormat.parse("23:59:59"),
                                 });
                             }
         
                             newDataObj.push({
                                 status: dataValue.status,
                                 startDay: dayFormat.parse(endOpenTimeArray[0] + " 00:00:00"),
                                 endDay: dayFormat.parse(endOpenTimeArray[0] + " 24:00:00"),
                                 startTime: timeFormat.parse("00:00:00"),
                                 endTime: timeFormat.parse(endOpenTimeArray[1])
                             });
                         }
                     } else if (startOpenTime) {
                         let startOpenTimeArray = startOpenTime.split(" ");
                         let currentTimeArray = currentTime.split(" ");
                         let endSearchTimeArray = endSearchTime.split(" ");
         
                         if (startOpenTimeArray[0] === currentTimeArray[0]) {
                             newDataObj.push({
                                 status: dataValue.status,
                                 startDay: dayFormat.parse(startOpenTimeArray[0] + " 00:00:00"),
                                 endDay: dayFormat.parse(currentTimeArray[0] + " 24:00:00"),
                                 startTime: timeFormat.parse(startOpenTimeArray[1]),
                                 endTime: timeFormat.parse(currentTimeArray[1])
                             });
                         } else if (startOpenTimeArray[0] === endSearchTimeArray[0]) {
                             newDataObj.push({
                                 status: dataValue.status,
                                 startDay: dayFormat.parse(startOpenTimeArray[0] + " 00:00:00"),
                                 endDay: dayFormat.parse(endSearchTimeArray[0] + " 24:00:00"),
                                 startTime: timeFormat.parse(startOpenTimeArray[1]),
                                 endTime: timeFormat.parse(endSearchTimeArray[1])
                             });
                         } else {
                             newDataObj.push({
                                 status: dataValue.status,
                                 startDay: dayFormat.parse(startOpenTimeArray[0] + " 00:00:00"),
                                 endDay: dayFormat.parse(startOpenTimeArray[0] + " 24:00:00"),
                                 startTime: timeFormat.parse(startOpenTimeArray[1]),
                                 endTime: timeFormat.parse("23:59:59")
                             });
         
                             let nextDay = moment(startOpenTime).add(1, 'd').format("YYYY-MM-DD");
                             if (endSearchTimeArray[0] === currentTimeArray[0]) {
                                 let beforeDay = moment(currentTime).subtract(1, 'days').format("YYYY-MM-DD");
                                 if (nextDay !== currentTimeArray[0]) {
                                     newDataObj.push({
                                         status: dataValue.status,
                                         startDay: dayFormat.parse(nextDay + " 00:00:00"),
                                         endDay: dayFormat.parse(beforeDay + " 24:00:00"),
                                         startTime: timeFormat.parse("00:00:00"),
                                         endTime: timeFormat.parse("23:59:59")
                                     });
                                 }
         
                                 newDataObj.push({
                                     status: dataValue.status,
                                     startDay: dayFormat.parse(currentTimeArray[0] + " 00:00:00"),
                                     endDay: dayFormat.parse(currentTimeArray[0] + " 24:00:00"),
                                     startTime: timeFormat.parse("00:00:00"),
                                     endTime: timeFormat.parse(currentTimeArray[1])
                                 });
                             } else {
                                 newDataObj.push({
                                     status: dataValue.status,
                                     startDay: dayFormat.parse(nextDay + " 00:00:00"),
                                     endDay: dayFormat.parse(endSearchTimeArray[0] + " 24:00:00"),
                                     startTime: timeFormat.parse("00:00:00"),
                                     endTime: timeFormat.parse("23:59:59")
                                 });
                             }
                         }
                     }
         
                 });
         
                 //console.log(newDataObj);
                 return newDataObj
             }
         
             const drawGraph = (currentData) => {
         
                 //console.log("currentData",currentData);
         
                 let startDate = moment(selectedStartDate);
                 let endDate = moment(selectedEndDate);
                 let clickElement = null;
                 let tickInterval = null;
                 // graph variables
                 let x = null;
                 let y = null;
                 let xAxis = null;
                 let yAxis = null;
                 let svg = null;
         
                 // currently height & width is fixed
                 let margin = {
                         top: 50,
                         right: 50,
                         bottom: 70,
                         left: 40
                     },
                     width = 400 - margin.left - margin.right,
                     height = 500 - margin.top - margin.bottom;
                   
                 // Create Graph based on given datapoints
                 const generate = (id) => {
         
                     x = d3.time.scale()
                         .range([0, width]);
         
                     y = d3.time.scale()
                         .range([height, 0]);
         
                     let startTime = d3.time.format("%Y-%m-%dT%H:%M:%SZ").parse(startDate.format("YYYY-MM-DD H:mm:ss").split(" ").join("T") + "Z");
                     let endTime = d3.time.format("%Y-%m-%dT%H:%M:%SZ").parse(endDate.format("YYYY-MM-DD H:mm:ss").split(" ").join("T") + "Z");
                     let timeOffset = endDate.diff(startDate, 'days');
         
                     if (timeOffset <= 8) {
                         tickInterval = 1;
                     } else if (timeOffset <= 14) {
                         tickInterval = 2;
                     } else if (timeOffset <= 30) {
                         tickInterval = 4;
                     } else if (timeOffset <= 60) {
                         tickInterval = 6;
                     } else {
                         tickInterval = 8;
                     }
         
                     // X Axis
                     xAxis = d3.svg.axis()
                         .scale(x)
                         .tickValues(function() {
                             let tickDateArr = [];
                             let dayNameFormat = d3.time.format("%Y-%m-%dT%H:%M:%SZ");
                             let startDateClone = startDate.clone();
         
                             do {
                                 let tickDate = dayNameFormat.parse(startDateClone.format("YYYY-MM-DD HH:mm:ss").split(" ").join("T") + "Z");
                                 tickDateArr.push(tickDate);
                                 startDateClone.add(tickInterval, 'd');
                             } while (startDateClone.isSameOrBefore(endDate));
                             return tickDateArr;
                         })
                         .tickFormat(d3.time.format("%m-%d"))
                         .tickSize(-height)
                         .outerTickSize(0)                        
                         .tickPadding([6])
                         .orient("bottom");
         
         
                     // Y Axis
                     yAxis = d3.svg.axis()
                         .scale(y)
                         .ticks(d3.time.hours, 2)
                         .tickFormat(d3.time.format("%H:%M"))
                         .tickSize(-width)
                         .outerTickSize(0)
                         .tickPadding([6])
                         .orient("left");
         
         
                     let yStartTime = d3.time.format("%H:%M:%S").parse("00:00:00");
                     let yEndTime = d3.time.format("%H:%M:%S").parse("23:59:59");
         
                     y.domain([yStartTime, yEndTime]);
                     x.domain([startTime, endTime]);
         
                     // remove old svg
                     d3.select('#history-graph-svg-disk').remove();
         
                     svg = d3.select(id).append("svg")
                         .attr("id", "history-graph-svg-disk")
                         .attr("width", width + margin.right + margin.left)
                         .attr("height", height + margin.top + margin.bottom)
                         .style("touch-action", "pan-y")
                         .append("g")
                         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
         
                     svg.append("g")
                         .attr("class", "x axis")
                         .attr("id", "history-graph-x-axis")
                         .attr("transform", "translate(0," + height + ")")
                         .attr("font-size", "12")
                         .call(xAxis)
                         .append("text")
                         .attr("y", 26)
                         .attr("x", width / 2)
                         .text("Time"); // label
         
                     svg.append("g")
                         .attr("class", "y axis")
                         .attr("id", "history-graph-y-axis")
                         .attr("font-size", "12")
                         .call(yAxis)
                         .append("text")
                         .attr("x", -10)
                         .attr("y", 10)
                         .style("text-anchor", "end")
                         .text("Time"); // label
                         
         
                     svg.append("line")
                         .style({
                             fill:"none",
                             stroke:"#f00",
                             "stroke-width":"10"
                         })
         
                 }
         
                 const getOpt = () => {
                     let axisOpt = new Object();
                     axisOpt['x'] = x;
                     axisOpt['y'] = y;
                     axisOpt['xAxis'] = xAxis;
                     axisOpt['yAxis'] = yAxis;
                     axisOpt['width'] = width;
                     axisOpt['height'] = height;
                     axisOpt['margin'] = margin;
         
                     return axisOpt;
                 };
         
                 const getSvg = () => {
                     let svgD = new Object();
                     svgD['svg'] = svg;
         
                     return svgD;
                 };
         
                 const drawArea = (data, dataName, x, y, xAxis, yAxis, margin, width, height, svg) => {
                     let eventType = null;
         
                     var mouseClick = function(d, eventElement) {
                         var mousePosition1 = d3.mouse(eventElement);
                         var xCoordinateTime = x.invert(mousePosition1[0]);
                         var yCoordinateTime = y.invert(mousePosition1[1]);
                         //console.log(mousePosition1);
         
                         var format = d3.time.format("%Y-%m-%d %H:%M:%S");
                         var xTimeStr = format(xCoordinateTime);
                         var yTimeStr = format(yCoordinateTime);
                         var timePoint = xTimeStr.split(" ")[0] + " " + yTimeStr.split(" ")[1];
         
                         //remove old point and tooltip
                         svg.selectAll(".tooltipPoint").remove();
                         d3.selectAll('.tooltip').remove();
                         svg.append("circle")
                             .attr("class", "tooltipPoint")
                             .attr("cx", function() {
                                 return x(xCoordinateTime);
                             })
                             .attr("cy", function() {
                                 return y(yCoordinateTime);
                             })
                             .attr("r", "2px")
                             //.on("mouseout", mouseOut)
                             .style("fill", "transparent")
                             .style("stroke", "transparent");
         
                         var statusCode = statusNames[d["status"]].name;
                         //console.log(statusCode);
                         clickElement = svg.select(".tooltipPoint");
                         //console.log("test"+clickElement);
                         \$(clickElement).tooltip({
                             'container': 'body',
                             'placement': 'top',
                             'title': "Running State: " + statusCode + " <br/> Time: " + timePoint,
                             'trigger': '',
                             'html': true
                         }).tooltip('show');
                     };
         
                     svg.selectAll('.openArea')
                         .data(data)
                         .enter()
                         .append("path")
                         .attr("d", function(d) {
                             return dragAreaPath(d);
                         })
                         .attr("class", "openArea")
                         .on("touchend", function() {
                             eventType = d3.event.type;
                         })
                         .on("click", function(d) {
                             mouseClick(d, this);
                         })
                         .on("mouseout", function() {
                             if (eventType === "touchend") {
                                 mouseOut();
                             }
                         })
                         .style("fill", function(d) {
                             return statusNames[d["status"]].color;
                         })
                         .style("stroke", function(d) {
                             return statusNames[d["status"]].color;
                         });
         
         
                     function dragAreaPath(data) {
                         //console.log("data in dragAreaPath",data);
                         let dataArray = [];
                         dataArray.push({
                             xTime: data["startDay"],
                             yTime: data["startTime"]
                         });
                         dataArray.push({
                             xTime: data["endDay"],
                             yTime: data["endTime"]
                         });
                         let dragArea = d3.svg.area()
                             .x(function(d) {
                                 return x(d['xTime']);
                             })
                             .y0(function() {
                                 return y(data["startTime"]);
                             })
                             .y1(function() {
                                 return y(data["endTime"]);
                             });
         
                         //console.log("dataArray in dragAreaPath",dataArray);
         
                         return dragArea(dataArray);
                     }
                 }
         
                 function drawDots(data, dataName, x, y, xAxis, yAxis, margin, width, height, svg) {
                     svg.selectAll(".openDot")
                         .data(data)
                         .enter()
                         .append("circle")
                         .attr("class", "openDot")
                         .attr("cx", function(d) {
                             return x(d['startDay']);
                         })
                         .attr("cy", function(d) {
                             return y(d["startTime"]);
                         })
                         .attr("r", "4px")
                         .style("fill", function(d) {
                             return statusNames[d["status"]].color;
                         })
                         .style("stroke", function(d) {
                             return statusNames[d["status"]].color;
                         })
                         .on("mouseover", function(d) {
                             let format = d3.time.format("%Y-%m-%d %H:%M:%S");
                             let xTimeStr = format(d['startDay']);
                             let yTimeStr = format(d["startTime"]);
                             let timePoint = xTimeStr.split(" ")[0] + " " + yTimeStr.split(" ")[1];
                             let mainCate = "Running State"; // label
                             let timeShow = "Time" // label
                             let mainCateShow = statusNames[d["status"]].name;
         
                             d3.selectAll('.tooltip').remove();
                             \$(this).tooltip({
                                 'container': 'body',
                                 'placement': 'top',
                                 'title': mainCate + " : " + mainCateShow + "<br/>" + timeShow + " : " + timePoint,
                                 'trigger': 'click',
                                 'html': true
                             }).tooltip('show');
         
                         })
                         .on("mouseout", function() {
                             \$(this).tooltip('destroy');
                             d3.selectAll('.tooltip').remove();
                         });
                 }
         
                 // Create Graph X & Y Axis Labels
                 const drawLabel = (svg, margin, width) => {
                       let labRadius = 7;
                       let longestString = "";
                       let labWidth = 100;
                       labelArr.map((label) => {
                           if (label.name.length > longestString.length) {
                               longestString = label.name;
                           }
                       });
         
                       svg.selectAll('.labelCircle')
                           .data(labelArr)
                           .enter()
                           .append("circle")
                           .attr("class", "labelCircle")
                           .attr("cx", function (d, i) { return width - labWidth; })
                           .attr("cy", function (d, i) { return -margin.left + 16 * (labelArr.length - 1 - i); })
                           .attr("r", labRadius)
                           .style("fill", function (d) { return d.color; });
         
                       svg.selectAll('.labelText')
                           .data(labelArr)
                           .enter()
                           .append("text")
                           .attr("class", "labelText")
                           .attr("x", function (d, i) { return width - labWidth; })
                           .attr("y", function (d, i) { return -margin.left + 16 * (labelArr.length - 1 - i); })
                           .attr("dy", function () { return labRadius / 2; })
                           .attr("font-size", "12")
                           .text(function (d) { return d.name; });
                   }
         
         
                 // Create Graph
                 let sca = generate("#bb-history-widget-graph");
                 let svgOpt = getOpt();
                 drawArea(currentData, "key", svgOpt['x'], svgOpt['y'], svgOpt['xAxis'], svgOpt['yAxis'], svgOpt['margin'], svgOpt['width'], svgOpt['height'], getSvg()['svg']);
                 drawLabel(getSvg()['svg'], svgOpt['margin'], svgOpt['width']);
             }
             let dataPoints = [];
             setStatusNamesAndLabelArr()
             drawGraph(dataProcessing())
         
         };
      </script>
   </body>
</html>
""";
}
@michaeljajou
Copy link

@impatelravi I am also facing this issue, have you found a solution?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@impatelravi @michaeljajou