I'm seeing a truly weird behavior while trying to set a popup relative to another element in GWT. It seems like setting the popup position (an independent, floating element) changes the answer I get from calls like getAbsoluteRight() or getAbsoluteLeft() for a completely different element, which is static on the page and does not move visually.
I added some print statements to check what was going on, so here is the code:
System.out.println(item.td);
int position = item.td.getAbsoluteRight()-offsetWidth;
System.out.println("left/right:" + item.td.getAbsoluteLeft() + "/" + item.td.getAbsoluteRight() + ". sent:" + (item.td.getAbsoluteRight() - offsetWidth) + "=" + position);
popup.setPopupPosition(position, item.td.getAbsoluteBottom());
System.out.println("left/right:" + item.td.getAbsoluteLeft() + "/" + item.td.getAbsoluteRight() + ". sent:" + (item.td.getAbsoluteRight() - offsetWidth) + "=" + position);
popup.addStyleName("bigger");
System.out.println("left/right:" + item.td.getAbsoluteLeft() + "/" + item.td.getAbsoluteRight() + ". sent:" + (item.td.getAbsoluteRight() - offsetWidth) + "=" + position);
System.out.println(item.td);
Here is the result on Chrome
Menu displayed, widths: 81/340=340
<td class="hover">Daniel?</td>
left/right:1104/1185. sent:845=845
left/right:1121/1202. sent:862=845
left/right:1121/1202. sent:862=845
<td class="hover">Daniel?</td>
Here is the result on Firefox
Menu displayed, widths: 81/340=340
<td class="hover">Daniel?</td>
left/right:1254/1335. sent:995=995
left/right:1273/1354. sent:1014=995
left/right:1273/1354. sent:1014=995
<td class="hover">Daniel?</td>
so the left/right coordinates of the fixed element suddenly change (X coordinate goes from 1254 to 1273) after calling setPopupPosition(), while the relevant element actually stays in the same place (visually). I really have no idea how it happens as the popup doesn't even know of the existence of that element. Even more, while I can reproduce the error consistently, it does not happen if I switch the popup content...
... incidentally, I compared the coordinates given by firefox with a screenshot of the page, and the return values are not only wrong, but impossible given my screen size (1366x768) and no scrolling.
I could probably try setting the position twice, as the second value is actually the correct one, but I would really like to understand what is going on here...
Many thanks!
The differ is exactly 150 pixels. (May be total of 75 pix in left side)
Have you checked page against: http://validator.w3.org/
There's often differences within the margin/padding (also borders in IE).
As i get out of your getAbsoluteRight()-offsetWidth code, you using the td to get absolute right. But setting the position on the popup. This should mean that you have some borders/margins/padding between the popup and the td content.
The getAbsoluteLeft() and getAbsoluteRight() (as well as Top and Bottom) are all calculated based on their parental element's scroll and offset positions.
Also an empty object can often end up in a default width. But as soon as you enter a content, the size adapts to its content.
Related
In the zoomed mode for pinch-zoom the drag doesn't align properly with the mouse pointer.
I've detailed the problem here:https://stackblitz.com/edit/angular-t7hwqg
I expect the drag to work same way irrespective of the zoom.
I saw in version 8 of angular material they have added #Input('cdkDragConstrainPosition')
constrainPosition: (point: Point, dragRef: DragRef) => Point, which will solve my problem as in the zoomed mode I can write a custom logic to map the drag properly with pointer, but I can't upgrade to version 8 as there are other parts of the application with version 7.
So if someone can suggest what can be done? Either somehow the drag can be modified and take into account the current amount of zoom, or if I can take 'cdkDragConstrainPosition' from version 8 of material and integrate into my current packages.
I had to manually calculate the updated coordinates something like this:
Here imageHeight is the width/height of the DOM element and height is the actual image height that was loaded into the DOM element.
item is the DOM element to be moved around.
this.zoomFactorY = this.imageHeight / this.height;
this.zoomFactorX = this.imageWidth / this.width;
// to be called at every position update
const curTransform = this.item.nativeElement.style.transform.substring(12,
this.item.nativeElement.style.transform.length - 1).split(',');
const leftChange = parseFloat(curTransform[0]);
const topChange = parseFloat(curTransform[1]);
and then update the DOM item's location:
item.location.left = Math.trunc(
item.location.left + leftChange * (1 / this.zoomFactorX)
);
item.location.top = Math.trunc(
item.location.top + topChange * (1 / this.zoomFactorY)
);
I have the following problem: I have a world map, which should serve as a base map and a map of a certain region (e.g. Germany). Both are available in tile format. I would like to display the regional map above the world map at the correct coordinate position. And here's the problem: I can display the region map above the world map, but I don't know how to position it correctly.
Anybody got any advice here?
EDIT
Here I create a simple base map on which I want to display data later. Afterwards I divide the map into tiles with gdal2tiles.py.
map = Basemap( projection='merc', resolution='c',
lat_0=51., lon_0=10.,
urcrntlat=85.051, urcrnrlon=179.000,
llcrnrlat=85.051, llcrnrlon=-179.000
)
map.bluemarble()
filename='map.png'
dirname = 'tiles'
plt.savefig ( filename )
minZoom = 0
maxZoom = 4
subprocess.check_output( "gdal2tiles.py --leaflet --profile=raster --zoom=" + str(minZoom) + "-" + str(maxZoom) + " " + filename + " " + dirname,
stderr=subprocess.STDOUT,
shell=True,
)
Here I use the functions from tilenames.py to determine where the tile should be.
import tilenames as tn
for z in range(minZoom, maxZoom):
x, y = tn.tileXV(lat, lon, z)
s,w,n,e = tn.tileEdges(x, y, z)
print("z={:d}: x={:d} y={:d} --> urcrnrlat={:.3f}, urcrnrlon={:.3f}, llcrnrlat={:.3f}, llcrnrlat={:.3f}".format(z,x,y,n,e,s,w))
See the section titled "minimaps and synced maps" in the Leaflet plugins list.
Sounds like your use case is well covered by some plugins in that list, specifically either Leaflet.Minimap or Leaflet.Sync. Please check the documentation and examples for those, and have a quick look at the other plugins in that list.
This is my code to create appearance stream for a free text annotation.
cs.rectangle(bbox.getLeft() , bbox.getBottom(), bbox.getWidth(), bbox.getHeight());
cs.fill();
String[] text = new String[1];
text[0] = "BAC"
cs.setFontAndSize(BaseFont.createFont(BaseFont.HELVETICA, BaseFont.WINANSI, BaseFont.NOT_EMBEDDED), pdfJSAnnotation.getFontSize());
cs.beginText();
cs.setLeading(fontSize + 1.75f);
cs.moveText(0, bbox.getHeight() - fontSize + .75f);
for (String s : text) {
if (s.equals("\n"))
cs.newlineText();
else
cs.showText(s);
}
cs.endText();
where cs is PdfAppearance, bbox is Rectangle. This works okay when pdf is portrait. however, im having problems when it is in landscape, say if page rotation is 270.
The text shown is vertical. and even if i use cs.transform() to rotate, it does not even rotate properly. I also tried to save the state, do a rotate then display text and then call cs.restoreState() after cs.endText() but the outcome is still not correct.
any ideas?
the rectangle is correct since the 1st 2 lines where it fills a rectangle shape is correctly displayed. it is the text i am having problems with.
The solution to this is:
- set appearance dimension to (height,width) since it is 270 degrees.
Then in the PdfAppearance object:
translate it to (height, 0);
rotate to 270
translate to (-height,-height);
(Tried to remove this post but there is no option available)
I want to set text of GWT Label dynamically.
For example I am using below code to set text in GWT Label :
Label statusLabel = new Label();
for (int i = 0; i < numX; ++i) {
for (int j = 0; j < numY; ++j) {
statusLabel.setText("Processing " + "(" + (i + 1) + "/" + (j + 1) + " of " + numX + "/" + numY + ") ...");
}
}
And I add this Label in RootPanel one time like this : RootPanel.get().add(statusLabel);
But problem is that Label text is unchnage.
What I missed? Or How can set dynamic text into GWT Lable.
Your loop is just to fast. It does not allow the browser to render the changed text. If your processing is running just inside that loop, the generated JavaScript code will be executed as a single block and will not allow the UI to refresh in-between.
To allow the UI to refresh, you need to use delayed logic.
For example using Scheduler.get().scheduleDeferred.
Deferred means here the JavaScript code returns control to the browser, which refreshes the text, and afterwards the ScheduledCommand gets executed.
To make it short:
Split up your processing in different parts, where each of them changes the text and gets scheduled using a ScheduledCommand.
As an alternative you could keep a counter variable in your class (like in the loop) and just re-schedule ScheduledCommands until your processing is finished.
Just keep in mind that the browser needs some time to refresh the text and that it won't do that until your JavaScript code returns.
I'm working on a IPhone web application. I just starded playing with the webkit-transform and webkit-animation CSS rules. I've some questions: for example, is there real advantage in using these instead of, say, jQuery.animate(...)? The resulting animations don't seem to be that much accelerated and fast. Let's explain better: I've a series of images I have to move on the screen, like a gallery... I set each image CSS rules like this:
-webkit-transition-property: left, top, right, bottom, width;
-webkit-transition-duration: 200ms;
then I change the style.left and style.top of each element I want to move with new coordinates. The result is not so fast as I expected. It is fast more or less as jQuery is (not fluid at all). I've seen there is even -webkit-animation and -webkit-transform but I still don't understand how to use them properly. The first one lets me move things around, but doesn't generate an animation, I use the following code:
var trans = "translate(" + x + "px," + y + "px)";
ELEMENT.style.webkitTransform = trans;
with this the element moves around, but without an animation. If I create dynamically an animation with:
var lastSheet = document.styleSheets[document.styleSheets.length - 1];
lastSheet.insertRule("#-webkit-keyframes "+ "animX" + "{ from { top: "+oy+"px; left:"+ox+"px;} to {top: " + y + "px; left: " + x + "px; } }",lastSheet.cssRules.length);
ELEMENT.style.webkitAnimationName = "animX";
this way the element will move once, not so fludly, and well be back to it's old position. Repeating this code doesn't lead to anything.
What do you think, is there a real advantage in terms of fluidity of movement in using those? And if yes, how to use them properly?
Something like this should do what you want, and runs quite smoothly in Safari on my iPhone 4:
<style type='text/css'>
#element {
position: absolute;
top: 0px;
left: 0px;
-webkit-transition-property: top, left, bottom, right;
-webkit-transition-duration: 300ms;
-webkit-transition-timing-function: ease-in;
}
</style>
<script type='text/javascript'>
document.querySelector('#element').style.left = '300px';
</script>