Suppose I have my own markup language that allows me to consume an array of TextElements and ImageElements. Each of these can have properties like "float: left/right/none" and "clear: none/left/right/both". Additionally, non-floated elements can flow around floated elements. Basically, all like CSS float layout.
For example:
Elem1 Elem2
Elem3
Elem4 Elem5 _Elem6
What's the best data structure to use to store these elements while I'm laying them out? I need something which makes it easy to answer questions like:
Is there enough space to fit Element2 left or right of Element1?
What's the page coordinates of Element1, origin and size?
I'll basically store a structure like:
{ Element, Origin(x, y), Size(w, h) }
for each already-laid-out element in this data structure.
There are things like RTrees, QuadTrees and such, but I want something simple to abstractly represent the layout of rectangles on a page for use in my layout algorithm.
NOTE: I am not doing this in HTML, it is for layout of elements in an iOS App, and I cannot use iOS 6 constraints since I need to support earlier iOS versions.
Thanks!
I believe that a binary heap could be made to work for what you want. Wikipedia explains binary heaps quite well.
The binary heap has two properties that make it nice for what you want:
It is a complete tree, which resembles structurally a laid-out page of elements.
The nodes are ordered such that each node is greater (or less, depending on which you want) than its children. In your case, "greater" means "placed further left and towards the top".
You have a list of elements that, in the absence of floats, would be laid out sequentially, wrapping lines as necessary. Thus, building a heap in the absence of floats would simply add nodes to the tree in the order they are received.
Floats complicate this, because they are placed higher than the nodes that preceded them (or lower than those that follow them in the case of right floats). Fortunately, building a heap allows for this by bubbling new nodes up to their proper place. So, as long as you can define a function that orders a floated element with respect to its peers, this can work.
It's that if that I'm not sure about, and unfortunately, I don't have enough time right now to explore the idea more completely.
Anyway, presuming you have a correct heap, repeatedly removing the topmost element should enumerate the nodes in the order they should be placed on the page.
I think CHDataStructures has a binary heap, but I can't verify that since the server where the documentation is kept seems to be offline at the time of posting.
Good luck and I hope this is helpful.
Related
I have been rendering a FeatureCollection of polygons into the Map (in one GeoJSONLayer). The size of each polygon is big (5mb, 10mb). With user interactions, the colours of polygons would be re-calculated & changed constantly. We are using data-driven method and keeping the data in properties of each feature. So GeoJSONLayer has to call .setData(geojson) everytime the data and colours changed (they are kept in properties).
I find above approach is lead to performance issue since the size of geojsons is big and calling .setData() is expensive.
I'm thinking of separating the geojson source and the data, style, colouring and calling direct function (setPaintProperty) whenever colours changed would be better than.
Someone told me that .setData and .setPaintProperty would do the same thing, both 2 will trigger re-rendering whole polygons.
Kindly need help to advice on this matter
Thanks a lot!
If I understand you correctly, you're asking which of these two is faster:
map.setData(mylayer, mygeojson)
map.setPaintProperty(mylayer, 'fill-color', ...mydatadrivenproperty)
I haven't tested, but I'd assume the second is faster, because the first one has to:
Parse the GeoJSON
Convert it to vector tiles
Repaint
whereas the second just has to parse the property repaint. Try them both out to see.
You may also consider a third way, which is to have a second layer which is a highlight, which you update by calling map.setFilter(mylayer, ...).
I'm displaying a map that's been tiled (-p raster) using gdal2tiles.py. The X-coordinate is about [0..-1160]. The Y-coordinate, for some reason, is [-700,0]. Zoom-levels 0-5.
I simply cannot get a plausible display to work. Sometimes, if I zoom-out to level-zero, I see the map way down at the bottom of the display ... not centered. Nothing at all appears at other levels.
I am also seeing the display "bounce back and forth" between about a 3-o'clock and a 6-o'clock position. (Only, once again, at zoom-level zero.)
I am at my wit's end. Please give guidance. Complete examples. Anything ...
Well, I found my answer:
If you're going to be using several layers in your Leaflet map, add them in the constructor-call, using the layers parameter.
If you try to do things with the layers before joining them all together, or with the map with no layers added, "strange and default things will happen." (For example, although I requested the Simple CRS when constructing things (separately...), the net-effect was to actually try to use a different one. Therefore, "do what the author expected." Specify all the layers at once, to the Map constructor. Then, customize them as you need to. Make very sure that they all know about each other from the very start of things.
So it turns out that we'd like to use fixed height mode, because it's faster and it doesn't constantly try to update the treeview — we saw a significant decrease in CPU use with a table that, unfortunately, may contain a few thousand rows and some 20-ish columns.
Oddly enough, merely turning off autosizing on all the columns doesn't help, one needs to set fixed height mode too.
But of course, the cell contents are of varying length (they're text and numbers), and it would be nice to update the column size time to time (ie. when I know they should be updated, and not all the time like autosizing unfortunately does).
So what I need is being able to figure out that the newly inserted row / cell has insufficient size (I guess something to do with the GtkCellRendererText and Pango will come handy), and then resize the affected GtkTreeViewColumn using set_fixed_width. I've looked at the source of GTK+ to see what they do when autosizing, but couldn't really make head or tails of it. My main problem here is getting to the text layout and/or the cell size requirements from a given TreeView/ListStore/iter combination.
I use perl-Gtk2, but answers are welcome in any commonly used language.
so i have looked at a couple other questions like this and from what i saw none of the answers seemed to answer my question. I created a program that creates ASCII art, which is basically a picture of text instead of colors. the way i have the program set up at the moment you have to manually set the Width and Height of the pixels. If the width and height of the pixels is too large it simply wont work. so basically what i want to do is have a function to automatically set the width and height to the size of the picture. http://www.mediafire.com/?3nb8jfb8bhj8d is the link to the program now. I looked into pixel grabber but the constructor methods all needed a range of pixels. I also have another folder for the classes, http://www.mediafire.com/?2u7qt21xhbwtp
on another note this program is incredibly inefficient, i know that it is inefficient in the grayscaleValue() method, but i dont know if there is any better way to do this. Any suggestions on this program would be awesome too. Thanks in advance! (this program was all done on eclipse)
After you read the image into your BufferedImage, you can call getWidth() and getHeight() on it to get this information dynamically. See the JavaDocs. Also, Use a constructor for GetPixelColor to create the BufferedImage once and for all. This will avoid reading the entire file from disk for each channel of each pixel.
For further code clean up, change series of if statements to a switch construct, or an index into an array, whichever is more natural. See this for an explanation of the switch construct.
One last comment: anything inside a class that logically represents the state of an object should be declared non static. If, say, you wanted to render two images side by side, you would need to create to instances if GetPixelColor, and each one should have its own height and width attributes. Since they're currently declared static, each instance would be sharing the same data, which is clearly not desireable behavior.
I'm trying to lay out images in a grid, with a few featured ones being 4x as big.
I'm sure it's a well known layout algorithm, but i don't know what it is called.
The effect I'm looking for is similar to the screenshot shown below. Can anyone point me in the right direction?
UPDATED
To be more specific, lets limit it to the case of there being only the two sizes shown in the example. There can be an infinite number of items, with a set margin between them. Hope that clarifies things.
There is a well-known layout algorithm called treemapping, which is perhaps a bit too generic for your specific problem with some images being 4x as big, but could still be applicable particularly if you decide you want to have arbitrary sizes.
There are several different rectangular treemap algorithms, any of which could be used to visualise photos. Here is a nice example, which uses the strip algorithm to lay out photos with each size proportional to the rating of the photo.
This problem can be solved with a heatmap or a treemap. Heatmaps often use space-filling-curves. A heatmap reduces the 2d complexity to a 1d complexity. A heatmap looks like a quadtree. You want to look for Nick's hilbert curve quadtree spatial index blog.