We Keep Coding

How can i hide different divs, or element chidrens with html2pdf library?

i'm using just javascript in scout framework, to get pdf from dinamic html site, my index.js:
function buttonHtml2Pdf() {
button = '<input type= "button" value="Stampa html2Pdf" id="html2pdf" class="menu-item menu-button unfocusable menubar-item left-of-button";" />';
$(button).insertBefore($("div[data-classid='DettaglioArticoliButton_org.eclipse.scout.apps.crm.client.crm.ContoClienteForm_InnerFormField_org.eclipse.scout.apps.crm.client.crm.MainClienteForm']"));
$("#html2pdf").click("click", function() {
var $elementoDaConvertire = $("div[data-classid='DettaglioOrdineBox_org.eclipse.scout.apps.crm.client.crm.ContoClienteForm_InnerFormField_org.eclipse.scout.apps.crm.client.crm.MainClienteForm']").html();
var elemClass = $("div[data-classid='org.eclipse.scout.apps.crm.client.crm.ContoClienteForm$MainBox$DettaglioArticoliBox$DettArticoliField$Table_DettArticoliField_org.eclipse.scout.apps.crm.client.crm.ContoClienteForm_InnerFormField_org.eclipse.scout.apps.crm.client.crm.MainClienteForm']").html();
var opt = {
margin: 1,
filename: 'Dettaglio_Ordini.pdf',
image: {
type: 'jpeg',
quality: 0.98
},
html2canvas: {
scale: 2,
letterRendering: true,
imageTimeout: 0,
width: 850,
height: 1200,
scrollX: 0,
scrollY: 20
},
jsPDF: {
unit: 'in',
format: 'a4',
orientation: 'portrait',
putOnlyUsedFonts: true,
floatPrecision: 'smart'
}
};
var worker = html2pdf();
worker = html2pdf().set(opt).from($elementoDaConvertire).toContainer().then(() => {
const doc = $('.html2pdf__container');
doc.find('.menubar').remove();
doc.find('.unfocusable').remove();
//doc.find($("div[data-classid='DeliveryNameOrderField_org.eclipse.scout.apps.crm.client.crm.ContoClienteForm_InnerFormField_org.eclipse.scout.apps.crm.client.crm.MainClienteForm']").html()).remove();
doc.find('.field has-inner-alignment halign-left valign-top white-space-nowrap').hide();
})
.toPdf().get('pdf')
.then(function(pdf) {
pdf.addPage();
}).set(opt).from(elemClass).toContainer().toCanvas().then(() => {
var doc2 = $('.html2pdf__container');
doc2.find('table-header-item-text').remove();
}).toPdf().save().catch(function(error) {});
});
}
As you see i must to take de "data-classid" generated from scout framework, i can't modify the id and also taht doesn't listen my $(".class") call with jquery. what can i do to hide some elements?
doc.find().hide()/remove() just work for 2 class: menubar and unfocusable, if i add other class, that is not taken.
If this library is not the solution what else can i do?

how to improve the quality of screenshot took by exportImage() function in videojs-record

// video.js configuration
this.config = {
controls: false,
bigPlayButton: false,
loop: false,
width: 640,
height: 480,
fluid: false,
plugins: {
record: {
screen: true,
image:true,
maxLength: 30,
displayMilliseconds: false,
debug: true,
}
}
};
async getVPDetails(): Promise<any> {
return await this.player.record().exportImage('image/png', 1);
}
takeScreenshot(){
this.getVPDetails().then(data => {
var unsafeImageUrl = URL.createObjectURL(data);
this.imageData = this.sanitizer.bypassSecurityTrustUrl(unsafeImageUrl);
}, error => {
console.log(error);
});
}
this is my code i used to take a screenshot of the screen (whole window) but the quality is very lowshowed in the image i have took from this function
can someone help me to increase its quality.
library used: https://collab-project.github.io/videojs-record/#/

QuaggaJs: Browser compatibility issue for barcode scanner

I am using QuaggaJs to scan the barcode. Everything is good and smooth for desktop version of scanner. But it gets broken when coming to mobile version of website and that too mainly on iPhone.
I tested in both safari and Chrome and for different phone it behaves differently. For some phone camera gets hang and for some camera didn't start at all.
Also, the canvas size is not setting up in the parent div. camera is getting outside the DOM.
Here is what I did.
HTML
<div class="scanner-box">
<div id="scanner-container" class="main_scanner"></div>
</div>
JS
$(document).ready(function(){
if($(".scanner-box").length > 0){
var canvas_width = $(".scanner-box").width();
var canvas_height = $(".scanner-box").height();
if (_scannerIsRunning) {
Quagga.stop();
} else {
startScanner(canvas_width,canvas_height);
}
}
}
var _scannerIsRunning = false;
function startScanner(canvasRatio,canvasHeight) {
Quagga.init({
inputStream: {
name: "Live",
type: "LiveStream",
target: document.querySelector('#scanner-container'),
constraints: {
width: "100%",
height: "100%",
facingMode: "environment"
},
},
decoder: {
readers: [
"ean_reader",
"ean_8_reader"
],
debug: {
showCanvas: true,
showPatches: true,
showFoundPatches: true,
showSkeleton: true,
showLabels: true,
showPatchLabels: true,
showRemainingPatchLabels: true,
boxFromPatches: {
showTransformed: true,
showTransformedBox: true,
showBB: true
}
}
},
},
function (err) {
if (err) {
$("#error").text(err);
return
}
console.log("Initialization finished. Ready to start");
Quagga.start();
_scannerIsRunning = true;
});
Quagga.onProcessed(function (result) {
var 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: "green", lineWidth: 2 });
});
}
if (result.box) {
Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });
}
if (result.codeResult && result.codeResult.code) {
Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
}
}
});
Quagga.onDetected(function (result) {
var barcodeResult = $("#result").text(result.codeResult.code);
var barcode = result.codeResult.code;
if(barcode.toString().length < '13'){
}else{
checkBarCode(barcode,canvasRatio,canvasHeight);
if (_scannerIsRunning) {
Quagga.stop();
}
}
console.log("Barcode detected and processed : [" + result.codeResult.code + "]", result);
});
}
CSS
.scanner-box{width:480px;height:320px;background-color:#9a9a9a;position:relative;margin-top:10px;}
#scanner-container{position:relative;height:inherit;}

#scanner-container canvas{
position: absolute;
left : 0px;
top: 0px;
}
this css is just like the sample form https://serratus.github.io/quaggaJS/v1.0.0-beta.1/examples/file_input/
it makes the canvas area which draws windows cover the camera steam area .

Can't limite bandwidth usage in RTCMulticonnection

I am using RTCMulticonnection in one of my projects. Where I want to limit video stream bandwidth to 500-600kbp. I gone through the documentation and set sdp constraints with bandwidth Handeller. and I reduced the width to 320p and height 180 using mediaConstrains. but still, 2-2.5 Mbps used in both sent and receive.
Here is the code what I am using
<script src="https://rtcmulticonnection.herokuapp.com/dist/RTCMultiConnection.min.js"></script>
<script src="https://rtcmulticonnection.herokuapp.com/socket.io/socket.io.js"></script>
<script>
var connection = new RTCMultiConnection();
// this line is VERY_important
connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';
// if you want audio+video conferencing
connection.session = {
audio: true,
video: true
};
connection.mediaConstraints = {
audio: true,
video: {
mandatory: {
minWidth: 360,
maxWidth: 360,
minHeight: 180,
maxHeight: 180,
minFrameRate: 15,
minAspectRatio: 1.77
}
}
};
if (DetectRTC.browser.name === 'Firefox') {
connection.mediaConstraints = {
audio: true,
video: {
width: 360,
height: 180,
frameRate: 15,
aspectRatio: 1.77
}
};
}
var BandwidthHandler = connection.BandwidthHandler;
connection.bandwidth = {
audio: 90,
video: 400,
screen: 360
};
connection.processSdp = function(sdp) {
sdp = BandwidthHandler.setApplicationSpecificBandwidth(sdp, connection.bandwidth, !!connection.session.screen);
sdp = BandwidthHandler.setVideoBitrates(sdp, {
min: connection.bandwidth.video,
max: connection.bandwidth.video
});
sdp = BandwidthHandler.setOpusAttributes(sdp);
sdp = BandwidthHandler.setOpusAttributes(sdp, {
'stereo': 1,
//'sprop-stereo': 1,
'maxaveragebitrate': connection.bandwidth.audio * 1000 * 8,
'maxplaybackrate': connection.bandwidth.audio * 1000 * 8,
//'cbr': 1,
//'useinbandfec': 1,
// 'usedtx': 1,
'maxptime': 3
});
return sdp;
};
connection.openOrJoin('your-room-id');
</script>
Is that anything am I doing wrong?

I have no experience about RTCMulticonnection.
So I just want to say about bandwidth option in SDP.
How about add value in sdp?
like 'b=AS:600'

Using document.write() to load javascript

Excuse my newb question. I'm still in the beginning stages of learning javascript. I'm not sure If I can accurately describe to you guys what i'm trying to do, but i'll try.
Is it possible to load a javascript file onto an html page?
for example. Twitter gave me code for there twitter widget, and it's a javascript widget. I want to be able to display it on my page using the document.write method. Is this possible. Here is an example.
This is the code they gave me.
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'search',
search: '#blahblah',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'blahblah',
width: 180,
height: 300,
theme: {
shell: {
background: '#ebebeb',
color: '#969396'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#bbbcbd'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</script>
So, is it possible that I could write this to the html page like this?
document.write('<script src="http://widgets.twimg.com/j/2/widget.js"></script> '
<script>
'new TWTR.Widget({
version: 2,
type: 'search',
search: 'blah',
interval: 6000,
title: 'Follow Me On Twitter',
subject: '#blahBlah',
width: 180,
height: 300,
theme: {
shell: {
background: '#ebebeb',
color: '#969396'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#bbbcbd'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</script> ');
or what I have to write each script as a seperate line like this?
document.write('<script src="http://widgets.twimg.com/j/2/widget.js"></script> ');
<script>
document.write('new TWTR.Widget({
version: 2,
type: 'search',
search: '#BigNotch',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'BigNotch',
width: 180,
height: 300,
theme: {
shell: {
background: '#ebebeb',
color: '#969396'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#bbbcbd'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</script> ');
}
I tried THIS, but DW gave me a syntax error. Here is the ENTIRE script i'm writing.
<script type="text/JavaScript">
<!--
function changTwitter() {
var currentTime = new Date().getHours();
if (7 <= currentTime&&currentTime < 17) {
document.write('<' + 'script>
new TWTR.Widget({
version: 2,
type: 'search',
search: '#BigNotch',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'BigNotch',
width: 180,
height: 300,
theme: {
shell: {
background: '#242124',
color: '#f0af4d'
},
tweets: {
background: '#333333',
color: '#c2c2c2',
links: '#f7bc63'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</' + 'script> ');
}
else {
document.write('<' + 'script>
new TWTR.Widget({
version: 2,
type: 'search',
search: '#BigNotch',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'BigNotch',
width: 180,
height: 300,
theme: {
shell: {
background: '#17d1ff',
color: '#ff8fda'
},
tweets: {
background: '#ededed',
color: '#383838',
links: '#ff8aed'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</' + 'script> ');
}
}

You can do that, but you'll need to be sure that you break up the text </script> within the document.write call, because otherwise the browser will treat it as the end of the script tag that the document.write call is within. The usual way to do that is to either break the word up:
...blah blah blah</" + "script>");
or put a backslash in front of the forward slash:
...blah blah blah<\/" + "script>");
It is perhaps paranoid of me, but I do it (the first bit) for opening script tags as well.
In terms of whether you do it with one document.write call or two, it doesn't matter. document.write adds to the text stream that will be parsed by the HTML parser. It doesn't matter whether you write it all out at once or use a hundred individual calls to do it.
Update: Some points on the code you added to the question:
The code won't parse, you're using ' as the quote character for your document.write call, but you're also using it for strings within the code you're writing. Which means that the first ' within the code (which is after "type:") will end the document.write string.
Remember that document.write only works during the initial load of a page, as part of the parsing sequence. You can't call document.write later, in response to an event (or rather, if you do, the odds are very low that it will do what you want — it will try to replace the entire contents of the page). In the code you added to the question, you're defining a function changTwitter but never calling it. You'd have to call it to do anything.
Instead of outputting a completely different script, why not just use code within the script to adjust the color by time of day? Something like:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
(function() {
var currentTime = new Date().getHours()
shellColor,
shellBackground,
tweetColor,
tweetBackground,
linkColor;
if (7 <= currentTime&&currentTime < 17) {
shellColor = /*...whatever*/;
shellBackground = /*...whatever*/;
tweetColor = /*...whatever*/;
tweetBackground = /*...whatever*/;
linkColor = /*...whatever*/;
}
else {
shellColor = /*...whatever*/;
shellBackground = /*...whatever*/;
tweetColor = /*...whatever*/;
tweetBackground = /*...whatever*/;
linkColor = /*...whatever*/;
}
new TWTR.Widget({
version: 2,
type: 'search',
search: '#blahblah',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'blahblah',
width: 180,
height: 300,
theme: {
shell: {
background: shellBackground,
color: shellColor
},
tweets: {
background: tweetBackground,
color: tweetColor,
links: linkColor
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
})();
</script>

Just put the code in a separate javascript file, and include it with <script src="name_you_saved_it_under.js"></script> (put that in the <head> of whatever HTML document you want to include it in.

Using JQuery you could implement the following solution:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/**
* Function to load funcions dynamically
* by inserting a scrip tag into the head section
*
* #params <String> path to script
* #return none.
*/
function load_script(src) {
// docorate an empty elemend node with the correct
// script source and then append it to the head section
$('<script><\/script>').attr('src', src).appendTo($('head')[0]);
}
</script>
PS: This script has not been test but should be close to what you need.
Hope this helps.