Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The basic idea is that you have an infinite plane, which contains your image repeated over and over in all directions. And then you have a "viewport" - which you can think of as a window that limits your view of the infinite plane. In other words, the area of the infinite plane that is "under" the viewport is what is actually shown on the screen.</p> <p>So when the top left of your viewport is at (0,0), you see the part of the infinite plane from (0,0) to (50,50) (assuming your viewport is 50 pixels in width and height). Similarly, if your viewport is at (238,753), then you see the part of the infinite plane from (238, 753) to (288, 803).</p> <p>If your images are 100x100, then your infinite plane would look something like:</p> <pre><code> (-100,-100) (0,-100) (100,-100) (200,-100) ****************************************** * * * * * * * * * * * * * * * * *(-100,0) *(0,0) *(100,0) *(200,0) ****************************************** * * * * * * * * * * * * * * * * *(-100,100) *(0,100) *(100,100) *(200,100) ****************************************** * * * * * * * * * * * * * * * * *(-100,200) *(0,200) *(100,200) *(200,200) ****************************************** </code></pre> <p>Now, let's say that the top left corner of the viewport is at 75,75. Graphically, it would look something like:</p> <pre><code> (-100,-100) (0,-100) (100,-100) (200,-100) ****************************************** * * * * * * * * * * * * * * * * *(-100,0) *(0,0) *(100,0) *(200,0) ****************************************** * * * * * * * * * * (75,75) * (125,75) * * * ####### * *(-100,100) *(0,100) # * # *(200,100) ************************#*****#*********** * * # * # * * * ####### * * * (75,125) * (125,125) * * * * * *(-100,200) *(0,200) *(100,200) *(200,200) ****************************************** </code></pre> <p>In this case, your viewport has corners at (75,75), (75,125), (125,75) and (125,125). So you see the bottom right corner of the image that is at (0,0), the bottom left corner of the image that is at (100,0), and so forth.</p> <p>Now, let's say that you implement a function that calculates which grid a particular point is in. Specifically, it returns the top left corner of the grid that contains that point. A few examples:</p> <pre><code>gridContainingPoint(0,0) -&gt; (0,0) gridContainingPoint(50,50) -&gt; (0,0) gridContainingPoint(100,100) -&gt; (100,100) gridContainingPoint(123, -27) -&gt; (100,-100) </code></pre> <p>The implementation of this function is fairly simple:</p> <pre><code>Point gridContainingPoint(Point pt) { int newX = ((int)Math.floor(pt.x/100f)) * 100; int newY = ((int)Math.floor(pt.y/100f)) * 100; return new Point(newX, newY); } </code></pre> <p>Now, to determine which images that you need to draw, you call the <code>gridContainingPoint()</code> method for each corner of the viewport. In this example, you would get:</p> <pre><code> gridContainingPoint(75,75) -&gt; (0,0) gridContainingPoint(75,125) -&gt; (0,100) gridContainingPoint(125,75) -&gt; (100, 0) gridContainingPoint(125,125) -&gt; (100, 100) </code></pre> <p>Now, you know specifically which images that you need to draw in order to entirely cover the viewport.</p> <p>Before you draw the images, you have to set the viewport correctly. By default, when you start drawing on the canvas, the viewport is positioned at (0,0). So you would only see things that are drawn onto the canvas in the area of (0,0)x(50,50). However, we want the viewport to be positioned at (75,75), so that we see things in the area (75,75)x(125,125). In order to do this, you call the <code>Canvas.translate()</code> method. For example, <code>canvas.translate(-75,-75)</code>. It has to be negative, because it is conceptually moving the canvas underneath the viewport, rather than moving the viewport.</p> <p>Now, using the information from the 4 calls to <code>gridContainingPoint()</code>, you draw your image at (0,0), at (0,100), at (100, 0) and at (100, 100). And you are done :)</p> <p>A few things to keep in mind - The numbers used in this example won't be the actual numbers that you want to use.</p> <p>For one thing, the size of your viewport won't be 50x50, but it will be the actual size of your view at the time that it is drawn. You can get this with <code>View.getWidth()</code> and <code>View.getHeight()</code>. </p> <p>Secondly, you'll need to adjust the grid sizing and related calculation based on your image size - I doubt you're using an image that is 100x100.</p> <p>And finally, keep in mind that when you call the <code>gridContainingPoint()</code> method for each of the corners of the viewport, it may return the same grid for multiple corners. For example, if your viewport was instead at (25,25), then it would return the (0,0) image for every corner, because (25,25), (25,75), (75,25) and (75,75) are all within the image that is from (0,0) to (100,100). So that would be the only image that you have to draw in order to completely cover the viewport.</p>
    singulars
    1. This table or related slice is empty.
    1. POContinuously scroll one large seamless image in any direction
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USJesusFreke
    1. USJesusFreke
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POContinuously scroll one large seamless image in any direction
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COI'm sure this works well, but my brain can't wrap around it. I tried the suggestion from glowcoder, and I'm almost there. But not quite! Any ideas on how to fix what I have (using his suggestions) in the code above would be much appreciated!
      singulars
      1. PO
      1. USSalx
    2. CONice update! Beautiful representation. Thank you for all the work in explaining the concept. I will try and implement this and get back to you.
      singulars
      1. PO
      1. USSalx
    3. CONo problem. I could simply give you the code you need, but I would rather try to explain the concept :)
      singulars
      1. PO
      1. USJesusFreke
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload