How to disable Scroll Effect in WebView #103
Description
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
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>
""";
}