How to turn off Blackscreen in IOS Web View - ios

Using Quagga.js, we are working on barcode recognition in web view.
It works fine on the mobile web, but it happens on the APP.
The problem is two things below.
The target div provided by Quagga does not contain the camera, but switches to the full screen.
Problem 1 Image
After barcode recognition, the camera remains in the Blackscreen state, not off.
Problem 1 Image
Already unpacked permissions from info.plist.
Privacy - Camera Usage Description
Privacy - Photo Library Additions Usage Description
Below is my code.
openItem.addEventListener("click", () => {
document.querySelector(".barcode_Camera").style.bottom = "0px";
/* Barcode Scan Script */
Quagga.init({
inputStream: {
type : "LiveStream",
target: document.querySelector('#camera_Area'), // Or '#yourElement' (optional)
constraints: {
width: {min: 1280},
height: {min: 480},
facingMode: "environment",
aspectRatio: {min: 1, max: 2}
}
},
locator: {
patchSize: "small",
halfSample: true
},
numOfWorkers: 4,
frequency: 10,
decoder: {
readers : [{
format: "code_93_reader",
config: {}
}],
debug: {
drawBoundingBox: false,
showFrequency: false,
drawScanline: false,
showPattern: false
},
multiple: false
},
}, function (err) {
if (err) {
console.log(err);
return
}
console.log("Initialization finished. Ready to start");
Quagga.start();
});
}); /*Close*/
Quagga.onProcessed(function (result) {
let drawingCtx = Quagga.canvas.ctx.overlay,
drawingCanvas = Quagga.canvas.dom.overlay;
if (result) {
if (result.boxes) {
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")),
parseInt(drawingCanvas.getAttribute("height")));
result.boxes.filter(function (box) {
return box !== result.box;
}).forEach(function (box) {
Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "#88d147", lineWidth: 2});
});
}
}
});
Quagga.onDetected(function (data) {
document.querySelector('#barcode').value = data.codeResult.code;
let closeTarget = closeItem.closest(".barcode_Camera");
document.querySelector(".barcode_Camera").style.bottom = "-100%";
Quagga.stop();
});
I would like to ask for your help if there is anything else I need to do in the info.plist or how I can solve the problem.

Related

html2pdf creates a blank PDF and somethings shows a security error 'The operation is insecure' on iOS 16.x.x

The html2pdf.js creates a Blank PDF or throws an error 'The operation is insecure' on new iOS 16.0.2.
Below is the html2pdf config:
function generatePDF(true) {
return new Promise(function(resolve, reject) {
var element = document.getElementById("main");
var options = {
filename: 'document.pdf',
image: {
type: 'jpeg',
quality: 0.5
},
html2canvas: {
scrollX: 0,
scrollY: 0,
scale: window.devicePixelRatio && window.devicePixelRatio > 1 ? 0.8 : 1
},
jsPDF: {
unit: 'pt',
format: 'a4',
orientation: 'portrait'
}
};
var pdf = html2pdf().set(options).from(element);
pdf.outputPdf('datauristring').then(function(data) {
// if (true)
// pdf.save();
resolve({
data: data.replace("data:application/pdf;filename=generated.pdf;base64,", ""),
type: "data:application/pdf"
});
}).catch(function(e) {
alert('catch: ' + e);
reject();
});
});
}
html2pdf.js version: 0.10.1
https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js
I have noticed, 'scale' property of 'html2canvas' creates the security error.
However, the above code works in earlier version of iOS.
I wonder what am I missing out from the config?
Thanks

Apexchart Timeline: How can i set a custom link to each bars of a series

I'm using a Apexchart Timeline and I need to pass a custom url from each bar on click.
Here is an example of the series:
series: [{
name: "series"
data: [{
x: "element 1"
y: 10
z: "https://google.com"
}, {
x: "element 2"
y: 20
z: "https://yahoo.com"
}]
}, {
name: "series2"
data: [{
x: "element 3"
y: 10
z: "https://stackoverflow.com"
}]
}],
I'm trying to buil the onclick event
chart: {
type: 'rangeBar',
events: {
dataPointSelection: function(event, chartContext, config) {
window.location = obj.w.config.series[obj.seriesIndex].data[obj.dataPointIndex].z;
}
}
}
But it doesn't works..
Any idea how to fix it?
I tried also with this:
events: {
dataPointSelection: function(event, chartContext, config) {
return document.location.href = obj.w.config.series[obj.seriesIndex].data[obj.dataPointIndex].z;
}
}
No way
You should rename config into obj:
events: {
dataPointSelection: function(event, chartContext, obj) {
return document.location.href = obj.w.config.series[obj.seriesIndex].data[obj.dataPointIndex].z;
}
}

How do I use two-finger zoom in Appium / webdriver-io

I'm new to mobile automation, but not new to automation in general (worked with web). I'm building an automation where a two-finger zoom is required. I've looked through documentation trying to find a solution, and can't find one. There is Multi-Touch, but it's a misnomer because it seems to implement many different touches with one finger only in quick succession. Something like this doesn't appear to work:
client.touchMultiPerform([
[{ action: 'press', options: { x: 300, y: 100 } },
{ action: 'moveTo', options: { x: 100, y: 100 } },
{ action: 'release' },
],
[{ action: 'press', options: { x: 330, y: 100 } },
{ action: 'moveTo', options: { x: 400, y: 100 } },
{ action: 'release' },
],
]);
This does the first touch action, then the second touch action. Is there a method that allows this? Maybe a plugin? Or am I just not understanding a remarkably simple solution?
Here's a more complete example of what I've built:
var webdriverio = require('webdriverio');
var expect = require('chai').expect;
var config = require('./helpers/desiredCapabilities').options;
var client = webdriverio.remote(config);
describe('Android Script Testing', function () {
before(function () {
this.timeout(5000);
return client.init();
});
afterEach(function(){
this.timeout(5000);
});
it("should just click on things",async function(){
this.timeout(0);
client.click("#selectRegionButton")
client.waitForVisible("#Account", 5000).click("#Account");
client.touchAction(
[
[{ action: 'press', options: { x: 300, y: 100 } },
{ action: 'moveTo', options: { x: 100, y: 100 } },
{ action: 'release' }],
[{ action: 'press', options: { x: 330, y: 100 } },
{ action: 'moveTo', options: { x: 400, y: 100 } },
{ action: 'release' }],
]);
});
});
I'm not sure you are using Appium here, but if there is Appium in use then zoom and pinch will only work with Espresso Automation name in the desired capabilities.
Same is confirmed here and I have also tested the same using Espresso Automation name in Appium Java binding.
Try using the same automation name and your code should work.
Also, you have used client.touchAction in your code, instead use client.touchMultiPerform.

High Charts Line Chart with missing data

I am using High Charts and using a Line chart for visualization. I have some bad data in the series data which is replaced with nulls and my line on the trend is not connected (bad data is not plotted on the trend, hence disconnected line) which is fine.
My issue is that I have some good data in between some bad data like (bad,bad,good,bad,bad,good,bad) this good data is shown as tool tips on my trend but no data point is shown on the trend. Is there any configuration option with in high charts so that I could plot individual data points along with disconnected line?
As you may see in the trend image, that the line series is broken but there are still some valid data points among bad data points which are not visible on the trend.
Here is how I initialize my highchart
initializeChart() {
Highcharts.setOptions({global: { useUTC : false }});
let yAxesLoc = this.getYAxes(this.props.signals);
// Update the yAxes to use the unit abbrevation instead of the full name
let dfdArr = new Array();
yAxesLoc.forEach(function(yAxis) {
if(!yAxis.unitName) {
return;
}
dfdArr.push(AfModel.GetUnitByName(yAxis.unitName, function(unit) {
if (unit) {
yAxis.unit = unit.Abbreviation;
yAxis.title = {text: unit.Abbreviation};
}
}));
});
let that = this;
// Only all the units are loaded, then we initialize Highcharts
return $.when.apply(null, dfdArr)
.always(function() {
that.yAxes = yAxesLoc; // Set all the axis
that.colorGenerator = new ColorGenerator(); // Initialize a new color generator for this trend
that.chart = Highcharts.chart(that.state.chartDivId, {
credits: {
enabled: false
},
title: null,
chart: {
zoomType:'xy',
events: {
redraw: function(){
// Remove all frozen tooltips
if (that.cloneToolTip) {
that.chart.container.firstChild.removeChild(that.cloneToolTip);
that.cloneToolTip = null;
}
if (that.cloneToolTip2) {
that.cloneToolTip2.remove();
that.cloneToolTip2 = null;
}
}
}
},
xAxis: {
type:'datetime',
min: that.props.startDateTime.getTime(),
max: that.props.endDateTime.getTime(),
labels: {
rotation: 315,
formatter: function() {
return new Date(this.value).toString('dd-MMM-yy HH:mm')
}
}
},
tooltip: {
shared: true,
crosshairs: true,
valueDecimals: 2,
formatter: function(tooltip) {
return HcUtils.interpolatedTooltipFormatter.call(this, tooltip, function(yVal, series) {
return NumberUtils.isNumber(yVal) ?
(series.yAxis.userOptions.unit) ?
NumberUtils.round(yVal, 4) + " " + series.yAxis.userOptions.unit
: NumberUtils.round(yVal, 4)
: yVal;
});
}
},
yAxis: that.yAxes,
series: {
animation: false,
marker: {enabled: false}
},
plotOptions: {
line: {
animation: false,
marker: {
enabled:false
}
},
series: {
connectNulls: false,
connectorAllowed: false,
cursor: 'pointer',
point: {
events: {
// This event will freeze the tooltip when the user clicks
// Inspired by https://stackoverflow.com/questions/11476400/highcharts-keep-tooltip-showing-on-click
click: function() {
if (that.cloneToolTip) {
that.chart.container.firstChild.removeChild(that.cloneToolTip);
}
if (that.cloneToolTip2) {
that.cloneToolTip2.remove();
}
that.cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
that.chart.container.firstChild.appendChild(that.cloneToolTip);
that.cloneToolTip2 = $('.highcharts-tooltip').clone();
$(that.chart.container).append(that.cloneToolTip2);
}
}
}
}
}
});
})
}
Kindly suggest.
Thanks.
Highcharts draws a line only between two subsequent no-null points. Single points can be visualized as markers (which you disabled in your code).
Here's a live demo that shows this issue: http://jsfiddle.net/BlackLabel/khp0e8qr/
series: [{
data: [1, 2, null, 4, null, 1, 7],
marker: {
//enabled: false // uncomment to hide markers
}
}]
API reference: https://api.highcharts.com/highcharts/series.line.marker
It seems to work fine in the latest version of Highcharts. The data points are visible.
Please have a look
Visible points: https://codepen.io/samuellawrentz/pen/XqLZop?editors=0010

Fetching all the Project Name for a Project Cumulative Flow Chart in Rally

I am generating a Project Cumulative Flow Chart, which is based on the Project name that I fetch using a "find," however I can't get it working.
Here is the Problem:
1) The "Find" in my code is just fetching one kind of project name, "FE," however, I have a lot of other Project name such as FE, BE, VisualRF, etc. I am not sure what's going on
2) I return this to "storeConfig" inside the chart and then I want try to give "Name" to the "stateFieldName." This is not working! I don't see any graph at all.
Here is the code.
_chart2: function() {
var projectName = this.getContext().getProject()._refObjectName;
console.log("========");
console.log(projectName); <<<<<<<<<< This always prints one name'FE' (My project name are FE, BE, etc)
this.chart = {
xtype: 'rallychart',
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: this._getStoreForChart2(),
calculatorType: 'Rally.example.CFDCalculator',
calculatorConfig: {
stateFieldName: this.getContext().getProject()._refObjectName, <<<<< I think usage is not fetching name of all projects
stateFieldValues: ['FE','BE','VisualRF']
},
width: 1000,
height: 600,
chartConfig: this._getChart2Config()
};
this.chartContainer.add(this.chart);
},
_getStoreForChart2: function() {
var obj1 = {
find: {
_TypeHierarchy: { '$in' : [ 'Defect' ] },
Children: null,
_ProjectHierarchy: this.getContext().getProject().ObjectID,
_ValidFrom: {'$gt': Rally.util.DateTime.toIsoString(Rally.util.DateTime.add(new Date(), 'day', -30)) },
State: "Open",
},
fetch: ['Severity','Project','ObjectID','FormattedID'],
hydrate: ['Severity','Project','ObjectID','FormattedID'],
sort: {
_ValidFrom: 1
},
context: this.getContext().getDataContext(),
limit: Infinity,
val: this.Name,
};
return obj1;
},
Though this should not matter but here is the code for the high chart function I am calling above
_getChart2Config: function() {
console.log("starting chart config");
return {
chart: {
zoomType: 'xy'
},
title: {
text: 'Chart2'
},
xAxis: {
tickmarkPlacement: 'on',
tickInterval: 20,
title: {
text: 'Date'
}
},
yAxis: [
{
title: {
text: 'Count'
}
}
],
plotOptions: {
series: {
marker: {
enabled: false
}
},
area: {
stacking: 'normal'
}
}
};
},
Down below you can see 'FE' getting printed:
Thanks a lot!
Kay
stateFieldName is the field which is used to calculate the CFD- usually ScheduleState or a custom dropdown field like KanbanState that captures your process. The stateFieldValues should be the values of that field (Defined, In-Progress, Accepted, Completed, etc.) This doesn't deal with projects at all. Definitely remember to include that field in your hydrate and fetch as well.

Resources