I's like to auto refresh location in info windows every second not just on click but automatically...
marker.addListener('click', function () {
var content = '<p>Lat:'+this.getPosition().lat()+'</p><p>Lng:'+ this.getPosition().lng();
infowindow.setContent(content);
infowindow.open(map,this);
});
infowindow.open(map,marker);
marker.setMap( map );
flightPath.push( pos );
isInitialized = true;
}
Related
I need to add my chrome extension button to the toolbar, I found the Gmail-js
gmail.tools.add_toolbar_button('<div id="icon_placeholder"></div>', function () { }, 'temp_css')
and it adds the button but if I go to another folder, it vanishes (if I inspect it, the element is still there, just invisible).
Another problem is if I start from inside a message or from another folder (hard refreshing the page) and then going to inbox, it won't show up.
How can I use the gmail-js to render and persist the button there? it'd be ok if it only shows up on inbox, as long as it's there (on inbox) no matter what folder start browsing from
I tried just rendering the button and checking to see if:
The element is not present in the page, if so, render it (doesn't seem to be working)
Check if the page was refreshed, if so, render (doesn't seem to be working)
Here's a piece of the code I have so far:
const gmail = new GmailFactory.Gmail() as Gmail;
var btn = gmail.tools.add_toolbar_button('<div id="icon_placeholder"></div>', function () { }, 'temp_css').get(0)['className'];
const getElement = document.querySelectorAll('.' + btn.toString().replace(' ', '.'))[5]
console.log('getElement ' + getElement.getAttribute('class'))
var app: HTMLElement = document.createElement('div') as HTMLElement;
var pos: HTMLElement = getElement as HTMLElement;
if (pos !== null) {
pos.appendChild(app);
ReactDOM.render(<IconExtChrome />, app);
}
function refreshButton(): boolean {
if (!getElement) {
pos.appendChild(app);
ReactDOM.render(<IconExtChrome />, app)
return false
}
}
if (sessionStorage.getItem('reloaded') != null) {
console.log('page was reloaded');
pos.appendChild(app);
ReactDOM.render(<IconExtChrome />, app)
} else {
console.log('page was not reloaded');
}
sessionStorage.setItem('reloaded', 'yes');
refreshButton()```
Since I updated to IOS13 our App hangs, the page and de Menu don't work, on IOS12 works fine.
I attach a simple code to try, simple press some times for example on zoom in/out and alternate with click on map, and the App hangs.
Form hi = new Form("form2");
Toolbar tb = hi.getToolbar();
Image icon = theme.getImage("icon.png");
Container topBar = BorderLayout.east(new Label(icon));
topBar.add(BorderLayout.SOUTH, new Label("Cool App Tagline...", "SidemenuTagline"));
topBar.setUIID("SideCommand");
tb.addComponentToSideMenu(topBar);
tb.addMaterialCommandToSideMenu("Home", FontImage.MATERIAL_HOME, e -> {});
hi.setLayout(new BorderLayout());
BrowserComponent browserComponent = new BrowserComponent();
browserComponent.setURL("https://leafletjs.com/examples/quick-start/example.html");
hi.add(BorderLayout.CENTER, browserComponent);
hi.show();
The problem was in the leaflet.js, in this commit https://github.com/Leaflet/Leaflet/pull/6855/files/862d3f600ce0f40795149a32bf980ff6000bf132 makes the library 1.6.0 hangs on codenameOne and IOS13.
The solution for me, was use the oficial 1.5.1 library (http://cdn.leafletjs.com/leaflet/v1.5.1/leaflet.zip) and make a function to emulate an doubleclick, based on this post: leaflet: don't fire click event function on doubleclick
This is part of code:
// Create a Global variable
var clicked = 0;
//on map declaration disable tap and doubleClickZomm
mapid = new L.map("mapid",{ attributionControl: false, zoomControl: false, doubleClickZoom: false, tap : false});
// Map click event
mapid.on('click', function(e) {
// Calling the new function
controlClick();
});
// Map DoubleClick event
mapid.on('dblclick', function(e) {
// Calling the new function
controlClick();
});
/*
* Declare an Emmulated doubleClickZoom function
*/
function controlClick(){
clicked = clicked +1;
setTimeout(function(){
if(clicked > 0){
clicked = 0;
}
}, 500);
if (clicked > 1 ){
mapid.zoomIn();
clicked = 0;
}
}
I am using canvas in react and rendering pdf's as images using the canvas.
Now, when I get new data i.e another pdf get's added, then
again have to use the canvases for that.
I am not sure how to fix this error or how to remove the canvas or even clear the canvas before using it again.
Here's the relevant code:
pdfLoop = (item,index) => {
var that = this;
PDFJS.getDocument(item).then(function getPdfHelloWorld(pdf) {
//
// Fetch the first page
console.log('url is : ',item);
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 0.5;
var viewport = page.getViewport(scale);
let cref = 'canvas'+index;
let imgref ='img'+index;
console.log('cref no : ',cref);
console.log('img no : ',imgref);
// Prepare canvas using PDF page dimensions
//
var canvas = that.canvasRefs[cref];
//let imagez = that.imageRefs[imgref];
var context = canvas.getContext('2d');
context.globalcompositeoperation = 'source-over';
// context.fillStyle = "#fff";
//draw on entire canvas
//context.fillRect( 0, 0, canvas.width, canvas.height );
canvas.height = viewport.height;
canvas.width = viewport.width;
//imagez.src = canvas.toDataURL("image/png");
//
// Render PDF page into canvas context
//
//page.render({canvasContext: context, viewport: viewport});
var task = page.render({canvasContext: context, viewport: viewport})
task.promise.then(function(){
//console.log(canvas.toDataURL('image/png'));
let imgItem = {imgref:canvas.toDataURL('image/png'),page:index+1,rotate:0}
let newState = that.state.imgsrc;
newState[index] = imgItem;
//let newState = that.state.imgsrc.concat(imgItem);
that.setState({
imgsrc:newState
});
//imagez.src = canvas.toDataURL('image/png')
});
});
});
}
In case someone stumbles across this, the error message states the following Use different canvas or ensure previous operations were cancelled or completed.
When getting the document, if there already is a document, it has to be destroyed. I.e:
PDFJS.getDocument({ url: pdf_url }).promise
.then((pdf_doc) => {
if (this.pdf_doc) {
this.pdf_doc.destroy();
}
this.pdf_doc = pdf_doc;
this.total_pages = this.pdf_doc.numPages;
})
I have no idea if this is a good solution, but at least it worked for me.
I've had the same exact problem as you, but my solution was a bit different than the answers previously posted.
For me the problem was the fact that I was unnecessarily re-rendering with a state change. Check if you aren't re-rendering the component without properly clearing the canvas, or if you even need to re-render at all (in my case I didn't).
Hopefully this could help
In order to avoid this situation, put your canvas object in a div object as is shown below:
<div id="div_canvas">
<canvas id="cnv"></canvas>
</div>
Then, before to call pdf.js functions, remove the "div_canvas" content and recreate it:
$("#div_canvas").html("");
$("#div_canvas").html("<canvas id='cnv'></canvas>");
I had exactly the same issue when working with PDF.js, the solution to this is,
You will have to clear your context after the render completes.
if (context) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
}
This will make sure that the context is cleared and ready for the next render and the error disappears.
this worked for me.
In some cases, this error will be displayed when the pdf has action buttons such as next/previous or scaling.
In this cases, often you have a function for rendering pdf page such as:
renderPage(num) {
// Using promise to fetch the page
pdfDoc.getPage(num).then(function (page) {
const viewport = page.getViewport({scale: scale});
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
const renderContext = {
canvasContext: ctx,
viewport: viewport
};
page.render(renderContext);
});
}
To fix the error just perform following changes:
Add two variable for controlling conflict and cache waiting page number:
pageRendering = false; // Check conflict
pageNumPending = null; // Cache waiting page number
Use these variables as follow:
renderPage(num) {
if (this.pageRendering) { // Check if other page is rendering
this.pageNumPending = num; // Cache waited page number until previous page rendering completed
} else {
this.pageRendering = true;
// Using promise to fetch the page
pdfDoc.getPage(num).then(function (page) {
const viewport = page.getViewport({scale: scale});
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
const renderContext = {
canvasContext: ctx,
viewport: viewport
};
const renderTask = page.render(renderContext);
// Wait for rendering to finish
renderTask.promise.then(function () {
this.pageRendering = false;
if (pageNumPending !== null) {
// Waited page must be rendered
this.renderPage(pageNumPending);
// Must be set to null to prevent infinite loop
this.pageNumPending = null;
}
});
});
One possible cause: React Strict mode renders twice
I have the following protractor test listed below. It runs fine. But I need to add some code that opens the browser to full screen since my test is sensitive to pixel location of gridster tiles. How can this be done?
describe('DragAndDrop Test', function () {
require('protractor');
require('jasmine-expect');
beforeAll(function () {
context = new Context();
context.get();
browser.waitForAngular();
browser.driver.manage().window().maximize();
});
it('should drag and drop Application Experience tile', function () {
//a = angular.element(document).find('h3')[1]
//target is where we are dragging the box to. Box is the Box
var target = { x: 300, y: 50 };
var box = element(by.cssContainingText('h3', 'Application Experience'));
var infoSpot = element(by.cssContainingText('h3', 'Application Experience'));
//scope is going to hold the scope variables that tell us where the box is located
//get the standardItems Scope
box.evaluate('dashboards').then(function(scope) {
//make sure the box we are using is initially set in column 0 and Row 0
expect(scope['1'].widgets[0].col).toEqual(0);
expect(scope['1'].widgets[0].row).toEqual(0);
});
//drag and drop the box somewhere else.
browser.actions().dragAndDrop(box, target).perform();
browser.waitForAngular();
browser.driver.sleep(5000);
//get the updated scope
box.evaluate('dashboards').then(function(scope) {
//test to see that the box was actually moved to column 1 and row 0
expect(scope['1'].widgets[0].col).toEqual(1);
expect(scope['1'].widgets[0].row).toEqual(0);
});
});
});
var Context = function () {
this.ignoreSynchronization = true;
//load the website
this.get = function () {
browser.get('http://127.0.0.1:57828/index.html#/dashboard');
};
};
I think the better practice is to do this in your config.
onPrepare: function() {
browser.manage().window().setSize(1600, 1000);
}
or
onPrepare: function() {
browser.manage().window().maximize();
}
You already have this line in your beforeAll function, which will maximize your browser before any test is run:
browser.driver.manage().window().maximize();
However, on some operating systems, Chrome browser won't maximize the window horizontally, only vertically. You have two options:
a) Set the width explicitly to some predefined value, e.g:
browser.driver.manage().window().setSize(1200, 768);
b) Get the screen resolution with a Javascript function and set the window size accordingly.
var width = GET_WIDTH;
var height = GET_HEIGHT;
browser.driver.manage().window().setSize(width, height);
When I'm getting the list of results in my cordova app, i want to roll it to the specified element with this function:
$scope.roll = function () {
//var rankScroll = $ionicScrollDelegate.$getByHandle('rank');
var meElement = document.getElementById('scroll');
if (!meElement) {
$ionicScrollDelegate.scrollTo(0, 0);
return;
}
var top = meElement.getBoundingClientRect().top - 50;
$ionicScrollDelegate.scrollTo(0, top);
console.log(top);
console.log($ionicScrollDelegate.getScrollView());
}
It works nicely, but I can't scroll to any other place in the list. I want to unlock scrolling in this solution or find better one. It should scroll on page loaded, not on click.
All the best
That function lock your scroll because of the $scope's binding.
If you only want that function to be invoked when the view is loaded, you should call it once at the the time the view is loaded.
You can do that by this way in your controller:
var roll = function () {
//var rankScroll = $ionicScrollDelegate.$getByHandle('rank');
var meElement = document.getElementById('scroll');
if (!meElement) {
$ionicScrollDelegate.scrollTo(0, 0);
return;
}
var top = meElement.getBoundingClientRect().top - 50;
$ionicScrollDelegate.scrollTo(0, top);
console.log(top);
console.log($ionicScrollDelegate.getScrollView());
}
$scope.$on("$ionicView.loaded", function (scopes, states) {
roll();
});
You can check more $ionicView events in this ion-view Document