I dynamically created a BrowserView in the renderer process. To be more specific, when a button is clicked, the following function is invoked to create and show the BrowserView:
const showBrowserView = async () => {
const view = new remote.BrowserView();
remote.getCurrentWindow().addBrowserView(view);
view.setBounds({ x: 0, y: 0, width: 1000, height: 1000 });
view.setAutoResize({ width: true, height: true })
await view.webContents.loadURL(`https://www.google.com`);
}
My question is, is there any way to see the console output of this BrowserView?
If you want to see the dev tools of the particular browser view you could use
https://www.electronjs.org/docs/api/web-contents#contentsopendevtoolsoptions
Or if you want to get the console out put events, you could use
https://www.electronjs.org/docs/api/web-contents#event-console-message
Both these are available through the webcontent object.
Related
I'm trying to embedd an image into a PDF with jsPDF. For some reason this is not working . This is the Code when I create my PDF:
exportPDF () {
const doc = new jsPDF('p', 'pt')
var footer = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC...'
var header = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...'
/* Some other stuff */
doc.addImage(this.output, 'PNG', 400, 400, 500, 500) #This does not work
doc.addImage(header, 'PNG', 0, 0, 600, 139.86) #For some reason these images work
doc.addImage(footer, 'PNG', 0, 800, 600, 54.68)
/* Some other stuff */
doc.save('Containertreppen Teileliste.pdf')
}
The Variable output is passed from another page and therefore not created in the method (I'm using vuejs). In this Variable the Screenshot of a Babylonjs Scene is stored, encoded in base64.
This is the Code when a take the Screenshot:
printDiv() {
this.scene.render();
const self = this
const options = {
type: "dataURL",
};
this.$html2canvas(document.getElementById("renderCanvas"), options).then(function(canvas){
self.output = canvas
})
},
I'm able to display the screenshot in an HTML-element and I can download it as a normal png but for some reason when I try to add it to my PDF the following error occurs in my console:
Error in v-on handler: "Error: Supplied Data is not a valid base64-String jsPDF.convertStringToImageData"
I also tried to put the String as src for an HTML-image-element but it changed nothing.
This is the beginning of the Variable output:
"data:image/png;base64,iVBORw..."
Can someone help me with this?
I've been playing around with the ziggeo API and I'm trying to attach some events for a recording. as far as I can tell, the best way to do this is to create a div with a specific id and then create the ziggeo recorder using attribs, etc.
<div id="video_section"></div>
<script>
ZiggeoApi.Events.on("system_ready", function() {
var recorder = new ZiggeoApi.V2.Recorder({
element: document.getElementById("video_section"),
attrs: {
width: 320,
height: 240,
theme: "modern",
themecolor: "red",
}
});
recorder.activate();
});
</script>
yet, unlike the use of the simple form <ziggeorecorder></ziggeorecorder> which allows the passing of a meta-profile parameter,
<ziggeorecorder ziggeo-theme='minimalist' ziggeo-themecolor="red" ziggeo-meta-profile='META_PROFILE_TOKEN'></ziggeorecorder>
when adding meta-profile in the attribs, initializing the recorder (as indicated in the API reference) results in meta-profile being misinterpreted. when changing the attribute to meta_profile, nothing gets processed.
attrs: {
width: 320,
height: 240,
theme: "modern",
themecolor: "red",
meta_profile: 'META PROFILE ID',
}
beyond that, when trying to attach the event.
<script>
var element = document.getElementById('video_section');
var embedding = ZiggeoApi.V2.Recorder.findByElement(element);
embedding.on("submitted", function(data) {
alert("Video " + data.video.token + " was submitted!");
});
</script>
I keep getting an error:
Uncaught TypeError: Cannot read property 'on' of null
does anyone have a good grip on how to do this properly? - create a recorder, set a meta-profile, and attach an event (either submission or completion of processing) to redirect back to a root path.
I think you need to use meta-profile instead of meta_profile. You may try this code:
<div id="video_section"></div>
<script>
ZiggeoApi.Events.on("system_ready", function() {
var recorder = new ZiggeoApi.V2.Recorder({
element: document.getElementById("video_section"),
attrs: {
width: 320,
height: 240,
theme: "modern",
themecolor: "red",
"meta-profile":"META PROFILE ID"
}
});
recorder.activate();
recorder.on("verified", function(data){
console.log(data);
});
});
</script>
Javascript doesn't allow using - outside quote when defining object property (CMIIW).
I'm trying to open a website on a button click from my app. Its just a simple help button that should open the site's help page. Nothing too fancy. But I'm having a lot of trouble getting it to load.
Here is my code relating to this:
var helpButton = $.help;
var webview = Titanium.UI.createWebView(URL_HELP);
helpButton.addEventListener('click', function() {
try {
var helpWin = Titanium.UI.createWindow();
helpWin.add(webview);
helpWin.open({modal:true});
} catch (e) {
Ti.API.error("Error: " + e);
}
});
The error is never getting caught as well. On the button click, it loads a new window, but is left loading perpetually. I'm not sure what the problem is, or where to go from here.
Please help, and let me know if you have any other questions or ideas.
first of all try to create webview having it's properties set to required values.following code is working fine for me.
var webview = Titanium.UI.createWebView({
url: 'http://stackoverflow.com/tour',
top: 0,
left: 0,
width: "100%",
height: "100%"
});
you can try this with your url.
Note: instead of creating webview global to this file you can create it after create window in help button click event if you only want to show help page. so you code should look something like this. you can also use $.help.addEventListener instead of assigning it to a separate variable.
$.help.addEventListener('click', function() {
try {
var helpWin = Titanium.UI.createWindow();
var webview = Titanium.UI.createWebView({
url: URL_HELP,
top: 0,
left: 0,
width: "100%",
height: "100%"
});
helpWin.add(webview);
helpWin.open({modal:true});
} catch (e) {
Ti.API.error("Error: " + e);
}
});
I am trying to display and update a chart using the plugin http://workshop.rs/jqbargraph/. The plugin is initiated on page load but I need to allow users to update the data that powers the chart. However, this functionality adds multiple charts everytime the update event is initiated. I assume I need to somehow destroy the original instance of the plugin before updating the chart data and re-initiating it but there is nothing incorporated into the plugin to allow this.
Can anyone tell me what I need to add to my code to get this working?
jQuery( document ).ready(function() {
var chartData = new Array([0]);
showChart(chartData);
jQuery('#update').live("click", function() {
var qtyArr = [];
jQuery('input[name=qty]').each(function(i) {
qty = Number(jQuery(this).val());
if(qty > 0){
qtyArr.push(qty);
}
});
chartData = new Array(
[qtyArr]
);
showChart(chartData);
});
});
function showChart(chartData){
jQuery("#chart").jqBarGraph({
data: chartData,
width: 200,
height: 300
});
}
call empty() before you call the plugin:
jQuery("#chart").empty().jqBarGraph({
data: chartData,
width: 200,
height: 300
});
The plugin's demo page clears the chart and reinitialises it as follows :
$('#exampleSimple').html('');
$('#exampleSimple').jqbargraph({ data: arrayOfData });
.empty() should also work.
You probably want -
function showChart(chartData) {
$('#chart').empty().jqBarGraph({
data: chartData,
width: 200,
height: 300
});
}
i'm using phantom js to screen shot a page
http://code.google.com/p/phantomjs/wiki/QuickStart#Rendering
it has a feature called clipRect
http://code.google.com/p/phantomjs/wiki/Interface#clipRect_(object)
can someone show me how i would modify the following code to us clipRect so i only get a partial screenshot and not the whole thing?
if (phantom.state.length === 0) {
if (phantom.args.length !== 2) {
console.log('Usage: rasterize.js URL filename');
phantom.exit();
} else {
var address = phantom.args[0];
phantom.state = 'rasterize';
phantom.viewportSize = { width: 600, height: 600 };
phantom.open(address);
}
} else {
var output = phantom.args[1];
phantom.sleep(200);
phantom.render(output);
phantom.exit();
}
If you are trying to get a screenshot of a particular element, you could get the necessary information for clipRect from getBoundingClientRect as per the bottom of this article:
page.clipRect = page.evaluate(function() {
return document.getElementById(THE_ELEMENT_YOU_WANT).getBoundingClientRect();
});
From the fine manual:
clipRect (object)
This property defines the rectangular area of the web page to be rasterized when render() is invoked. If no clipping rectangle is set, render() will process the entire web page.
Example: phantom.clipRect = { top: 14, left: 3, width: 400, height: 300 }
So try setting clipRect right before you call render:
var output = phantom.args[1];
phantom.sleep(200);
phantom.clipRect = { top: 14, left: 3, width: 400, height: 300 }
phantom.render(output);
phantom.exit();
You'd have to figure out where the upper left corner (top and left) is and how big (width and height) you want the clipping rectangle to be.
You can probably set the clipRect any time before render() is called but start with that and see what happens.
What was happening is i was using brew and it was installing v 1.0.0 where clipRect and almost every other function wasn't supported as v 1.0.0 is the oldest version.
If you follow these instructions: http://code.google.com/p/phantomjs/wiki/BuildInstructions#Mac_OS_X
then right click on the complied file and click show/view contents (on mac) then copy the executable bin/phantomjs.app/Contents/MacOS/phantomjs to some directory in your PATH.
Feel free to post on here i'm monitoring this and i can help if needed.