Hello again, I managed to partially solve this issue...
Let me rephrase the problem: currently the maximum width of a FramedCloud is 600px; If you set the maxSize attribute to something larger than 600px, the popup extends to the new maxSize (if needed), but the background image of the FramedCloud remains at its max size of 600px.
I have manually edited the picture (openlayers/img/cloud-popup-relative.png) and widened the popup image so that now it can hold popups as wide as 1200px. The picture file has now the resolution of 1276 x 736. I have also tweaked some offsets in openlayers/lib/OpenLayers/Popup/FramedCloud.js so that the "x" axis now stretches to fit the additional 600px. The problem is I couldn't figure out how all the offsets are measured - so there are still problems.
Now, the popup is correctly drawn, but I lost the "stems" for top-left, top-right, bottom-left - but bottom-right still draws fine.
I have attached a patch with the changes I have done and the changed image - for those who want to extend their popups. The patch is done just for the lib directory - you will need to rebuild OpenLayers.js and copy it to your desired location. Also, the image attached is not part of the patch (to keep things readable) - it needs to be copied to the img directory.
I would like to find out (from the developers?) what the "anchor", "size" and "position" represent for the stems and how they are measured relative to the image file...
Thanks, AdrianP.S. I'm not sure if this patch is really needed for mainstream OpenLayers - but it is needed when displaying a map on a wall of screens or on screens with a big resolution.
Adrian Popa wrote:
No ideas about this one? Adrian Popa wrote:I did some more digging and it seems the png image which has the elements (borders) of the framed cloud has rather small dimensions: # file cloud-popup-relative.png cloud-popup-relative.png: PNG image data, 676 x 736, 8-bit colormap, non-interlacedI edited the file and increased the width of the image to 1276. I "streched" the popup window to use the whole width. I looked into openlayers/lib/OpenLayers/Popup/FramedCloud.js and expanded the default sizes for the image and the popup to fit the new image size. If I test this setup, the popup extends ok around my content, but the right-most side of the popup loses its rounded corners. Also the "connector" (I guess it's called a stem) between the marker and the popup is sometimes distorted or blank.This has to do with the definitions of offsets in the positionBlocks. Eg:positionBlocks: { "tl": { 'offset': new OpenLayers.Pixel(44, 0), 'padding': new OpenLayers.Bounds(8, 40, 8, 9), 'blocks': [ { // top-left size: new OpenLayers.Size('auto', 'auto'), anchor: new OpenLayers.Bounds(0, 51, 22, 0), position: new OpenLayers.Pixel(0, 0) }, { //top-right size: new OpenLayers.Size(22, 'auto'), anchor: new OpenLayers.Bounds(null, 50, 0, 0), position: new OpenLayers.Pixel(-638, 0) }, { //bottom-left size: new OpenLayers.Size('auto', 19), anchor: new OpenLayers.Bounds(0, 32, 22, null), position: new OpenLayers.Pixel(0, -631) }, { //bottom-right size: new OpenLayers.Size(22, 18), anchor: new OpenLayers.Bounds(null, 32, 0, null), position: new OpenLayers.Pixel(-638, -632) }, { // stem size: new OpenLayers.Size(81, 35), anchor: new OpenLayers.Bounds(null, 0, 0, null), position: new OpenLayers.Pixel(0, -688) } ] }, ...Can somebody explain the following:1. bottom-right, bottom-left, top-right, top-left are intended to "carve-out" the rounded popup corners?2. what is "stem" supposed to be?3. How is the position coordinates measured from the file? What do negative coordinates mean (are they measuring from right to left)? 4. Is there a more automated way to update these offsets from a file - or should they be imputed by hand - and trial and error? 5. Is anyone else interested in wider popups? Usualy you shouldn't need them on normal screens, but I need to display them on large 4000x4000 screens... If there are people interested, I will submit a patch... 6. Oh - is there a way to get wider popups without editing the image/offsets? I guess the background of the picture is not "streched" to fit the popup (current behavior).Thanks, Adrian Adrian Popa wrote:Update:- it seems I was partially wrong. The div settings for the decoration divs are correct - but it seems the popup background image doesn't get any larger... I will look into it.Adrian Popa wrote:Hello everyone,I have done some more digging, and it seems the FramedCloud popup has a default maximum width of 600px (or so it seems when I inspect items with firebug). I tried to set max size to something larger (popup.maxSize = new OpenLayers.Size(1300, 1000);) and it seems to work (partially).The popup gets larger to accomodate content with width greater than 600px, but not all the popup's decorations are streched.My popup's base id is "activeAlarm" - and from what I can tell the following divs get resized:* activeAlarm_contentDiv * activeAlarm_GroupDiv * activeAlarm ... but the following divs don't get resized: * activeAlarm_FrameDecorationDiv_1 * activeAlarm_FrameDecorationDiv_2 * activeAlarm_FrameDecorationDiv_3 * activeAlarm_FrameDecorationDiv_4I have attached an image that illustrates this. Note that also the background of the popup isn't streched (remains transparent) (most likely it's one of the decoration divs...).Is this a known bug, or am I doing something wrong? If it's a bug, is there a quick workaround? I can think of setting the width parameter for all the decoration divs, but I'm hoping it won't be necessary...Thanks, Adrian Adrian Popa wrote:Hello everyone,If this subject has been discussed before, please point me to the relevant thread.I have a FramedCloud popup which gets its content through an ajax call. Everything works ok (the popup is the same size as the content) if I don't change the size of the fonts in the popup. In some cases, I have to override the default font size and make it bigger. In these cases, the popup doesn't resize properly. For instance, if the content has 'font-size: 11px' it fits the popup, but if the content has 'font-size: 22px', the popup grows in height, but the width remains the same as the first case.By the way, my content is usually a table (which has applied the style='font-size: 22px;' attribute).My questions are:1. Is this behavior a known problem or should autoResize work without problems? 2. I could call - as a workaround a function to autoRezise the popup after the ajax call completes. Question is - what is this function? (I haven't found anything in the api) 3. I could set maxSize/minSize - but I have no idea how to calculate the width/height of my content (in case there are no other workarounds I could *estimate* it based on number of characters per line + font size - but it's way too cumbersome to be a real solution)Thanks, Adrian. _______________________________________________ Users mailing list [email protected] http://openlayers.org/mailman/listinfo/users_______________________________________________ Users mailing list [email protected] http://openlayers.org/mailman/listinfo/users------------------------------------------------------------------------ _______________________________________________ Users mailing list [email protected] http://openlayers.org/mailman/listinfo/users------------------------------------------------------------------------ _______________________________________________ Users mailing list [email protected] http://openlayers.org/mailman/listinfo/users
<<inline: cloud-popup-relative.png>>
diff -rau openlayers.good/lib/OpenLayers/Popup/FramedCloud.js openlayers/lib/OpenLayers/Popup/FramedCloud.js
--- openlayers.good/lib/OpenLayers/Popup/FramedCloud.js 2009-02-28 16:06:31.000000000 +0200
+++ openlayers/lib/OpenLayers/Popup/FramedCloud.js 2009-11-24 15:01:21.000000000 +0200
@@ -38,7 +38,7 @@
* APIProperty: imageSize
* {<OpenLayers.Size>}
*/
- imageSize: new OpenLayers.Size(676, 736),
+ imageSize: new OpenLayers.Size(1276, 736),
/**
* APIProperty: isAlphaImage
@@ -71,7 +71,7 @@
{ //top-right
size: new OpenLayers.Size(22, 'auto'),
anchor: new OpenLayers.Bounds(null, 50, 0, 0),
- position: new OpenLayers.Pixel(-638, 0)
+ position: new OpenLayers.Pixel(-1238, 0)
},
{ //bottom-left
size: new OpenLayers.Size('auto', 19),
@@ -81,7 +81,7 @@
{ //bottom-right
size: new OpenLayers.Size(22, 18),
anchor: new OpenLayers.Bounds(null, 32, 0, null),
- position: new OpenLayers.Pixel(-638, -632)
+ position: new OpenLayers.Pixel(-1238, -632)
},
{ // stem
size: new OpenLayers.Size(81, 35),
@@ -102,7 +102,7 @@
{ //top-right
size: new OpenLayers.Size(22, 'auto'),
anchor: new OpenLayers.Bounds(null, 50, 0, 0),
- position: new OpenLayers.Pixel(-638, 0)
+ position: new OpenLayers.Pixel(-1238, 0)
},
{ //bottom-left
size: new OpenLayers.Size('auto', 19),
@@ -112,12 +112,12 @@
{ //bottom-right
size: new OpenLayers.Size(22, 19),
anchor: new OpenLayers.Bounds(null, 32, 0, null),
- position: new OpenLayers.Pixel(-638, -631)
+ position: new OpenLayers.Pixel(-1238, -631)
},
{ // stem
size: new OpenLayers.Size(81, 35),
anchor: new OpenLayers.Bounds(0, 0, null, null),
- position: new OpenLayers.Pixel(-215, -687)
+ position: new OpenLayers.Pixel(-815, -687)
}
]
},
@@ -133,7 +133,7 @@
{ //top-right
size: new OpenLayers.Size(22, 'auto'),
anchor: new OpenLayers.Bounds(null, 21, 0, 32),
- position: new OpenLayers.Pixel(-638, 0)
+ position: new OpenLayers.Pixel(-1238, 0)
},
{ //bottom-left
size: new OpenLayers.Size('auto', 21),
@@ -143,12 +143,12 @@
{ //bottom-right
size: new OpenLayers.Size(22, 21),
anchor: new OpenLayers.Bounds(null, 0, 0, null),
- position: new OpenLayers.Pixel(-638, -629)
+ position: new OpenLayers.Pixel(-1238, -629)
},
{ // stem
size: new OpenLayers.Size(81, 33),
anchor: new OpenLayers.Bounds(null, null, 0, 0),
- position: new OpenLayers.Pixel(-101, -674)
+ position: new OpenLayers.Pixel(-701, -674)
}
]
},
@@ -164,7 +164,7 @@
{ //top-right
size: new OpenLayers.Size(22, 'auto'),
anchor: new OpenLayers.Bounds(null, 21, 0, 32),
- position: new OpenLayers.Pixel(-638, 0)
+ position: new OpenLayers.Pixel(-1238, 0)
},
{ //bottom-left
size: new OpenLayers.Size('auto', 21),
@@ -174,12 +174,12 @@
{ //bottom-right
size: new OpenLayers.Size(22, 21),
anchor: new OpenLayers.Bounds(null, 0, 0, null),
- position: new OpenLayers.Pixel(-638, -629)
+ position: new OpenLayers.Pixel(-1238, -629)
},
{ // stem
size: new OpenLayers.Size(81, 33),
anchor: new OpenLayers.Bounds(0, null, null, 0),
- position: new OpenLayers.Pixel(-311, -674)
+ position: new OpenLayers.Pixel(-911, -674)
}
]
}
@@ -195,7 +195,7 @@
* APIProperty: maxSize
* {<OpenLayers.Size>}
*/
- maxSize: new OpenLayers.Size(600, 660),
+ maxSize: new OpenLayers.Size(1200, 660),
/**
* Constructor: OpenLayers.Popup.FramedCloud
_______________________________________________ Users mailing list [email protected] http://openlayers.org/mailman/listinfo/users
