How to construct this image

I wanted to make a gallery with the rijksmuseum api. I get some json back which looks like this :

{"levels":
   [
     {
       "name":"z3",
       "width":1400,
       "height":1165,
       "tiles":
                [
                  {"x":2,"y":0,"url":"http://lh3.googleusercontent.com/kRPnUXsQSnT3ArTDzrZV3sR8W319W-PNoTtR0JY5sUPnKGUEQXLkXqpwyuH0itllQs8XmYKdCY0yAvJY1l61WROh5UvHgHjMS1XJv2o=s0"},
                  {"x":2,"y":2,"url":"http://lh3.googleusercontent.com/4gQFJa-ImwN4KCIIcjal7oSBsVsWTiXQP9Z5pPvRczjbI34PLqYPGJ53CLHEKzi4B-kR

{"levels":
   [
     {
       "name":"z3",
       "width":1400,
       "height":1165,
       "tiles":
                [
                  {"x":2,"y":0,"url":"http://lh3.googleusercontent.com/kRPnUXsQSnT3ArTDzrZV3sR8W319W-PNoTtR0JY5sUPnKGUEQXLkXqpwyuH0itllQs8XmYKdCY0yAvJY1l61WROh5UvHgHjMS1XJv2o=s0"},
                  {"x":2,"y":2,"url":"http://lh3.googleusercontent.com/4gQFJa-ImwN4KCIIcjal7oSBsVsWTiXQP9Z5pPvRczjbI34PLqYPGJ53CLHEKzi4B-kR

This is a part of the json. But now I wonder how can I construct the image back when I get some coordinates. Now it looks like a square of 2 x 2 but it can also be a different one on another image

36 Replies

Jochem•15mo ago

this looks like a 3x3, looks like it's zero indexed you probably just need to stick each image in a display: grid; in the right place

roelof•15mo ago

I thought about that but then I first have to find out how big the grid is As far as I can see the numbers change a lot

Jochem•15mo ago

https://codepen.io/jochemm/pen/abPbOKv you could use something like this, then override the grid-template-columns property with JS if they give you all the tiles, the number of columns should be equal to Math.sqrt(tiles.length) though from the looks of that JSON, this api is something that lets you download the images using different zoom levels, so you can zoom in kind of like you can on a google maps page

roelof•15mo ago

hmm. could be a idea I have to find out how to override css in js then I did it I think one time I thought of myself of looking the highest x and Y and then make the grid no idea if that can be easily done and yes, they have different zoom levels. Where z1 is the one with the highest length and width so also the most pieces and z3 or z4 or z5 is the smallest image so only 1 small image but not so good scaleable

Jochem•15mo ago

you could loop over the tiles array and keep track of the highest x and y

let max_x = 0;
let max_y = 0;
for(let i = 0; i < tiles.length; i++) {
  if (max_x < tiles[i].x) max_x = tiles[i].x;
  if (max_y < tiles[i].y) max_y = tiles[i].y;
}

let max_x = 0;
let max_y = 0;
for(let i = 0; i < tiles.length; i++) {
  if (max_x < tiles[i].x) max_x = tiles[i].x;
  if (max_y < tiles[i].y) max_y = tiles[i].y;
}

roelof•15mo ago

yep. but the disadvantage is that I loop then 2 times throught the array

Jochem•15mo ago

I'm sure there's some clever way with map and filter and reduce, but this is readable. Alternatively you could use for(let tile of tiles) first off, that code doesn't, it just does two checks for each index Second, there's only a couple entries in that array, so it's not really something to worry about

roelof•15mo ago

im also sure there is a clever way to solve this but I do not see it I think mostly 20 - 30 entries ? just a guess

Jochem•15mo ago

if you had 10k entries in that array, sure, but even if it's a hundred entries, a modern PC will do that in a microsecond. It's not worth optimizing unless it's code you run on large (thousands of entries) arrays or it runs on say, more than 500 multiple times per second

roelof•15mo ago

I think there is no picture that has so many tiles

Jochem•15mo ago

even if there is, you only run that code on page load and you have a couple of seconds to run code before it's annoying to the user

roelof•15mo ago

maybe a nice project when im ready to learn svelte or so This looks a too big project to do in plain css and plain js

Jochem•15mo ago

let max_x = tiles.reduce((max, val) => Math.max(val.x, max));
let max_y = tiles.reduce((max, val) => Math.max(val.y, max));

let max_x = tiles.reduce((max, val) => Math.max(val.x, max));
let max_y = tiles.reduce((max, val) => Math.max(val.y, max));

This would run through twice (and it's untested) but that should theoritically produce the maximum value for x and y in the tiles array of objects

roelof•15mo ago

and then run a 3th time to place the image on the right place could work

Jochem•15mo ago

honestly, I'd prefer the first version with the explicit loop, it's more readable 🙂

roelof•15mo ago

Made a lot of years a Ruby on Rails project with that api but never was happy with that oke, I like readable code

Jochem•15mo ago

also, I don't think svelte really has anything to help you with this. the complex part is the bit where you put the images in the right place, and that's too specific to be part of a framework

roelof•15mo ago

you know a lot about solving complex things

Jochem•15mo ago

I've been programming off and on since I was 12 🙂 probably even younger, now that I think about it. So I have more than 30 years experience breaking problems down into smaller problems

roelof•15mo ago

oke, but I also need I think things like pagination. I believe there are some 3000 images so a lot of pages I begin also that young but learn now to break problems in smaller ones advantage of good help learn to do things in small steps

Jochem•15mo ago

hm, yeah, doing that for 3000 images in one page would probably do something terrible to your browser 🙂

roelof•15mo ago

instead of running and goig over your boundaries or not thinking enough how to solve a problem one advantage. You get 10 a request so that would be a nice number for a page

Jochem•15mo ago

yeah, that's a reasonable number

roelof•15mo ago

perfectiosme is then not a good habit so I also learn now that good is good enough but im getting on the right track now but this project will be a difficult one First I have to make a call to find the ids Then another call to find the images then the loops as we discussed and then a loop to display the images Thanks for the ideas

Jochem•15mo ago

good luck! if you want, you should post it in #showcase when it's done!

roelof•15mo ago

if I can make it worrk I have also find a nice masonary layout to display it I once saw a sort of honey thing that I liked

roelof•15mo ago

or something like this : https://media.gettyimages.com/id/1326124733/nl/vector/canvas-paintings-and-plastics-models-arranged-in-art-gallery.jpg?s=612x612&w=gi&k=20&c=S4GgNavV1UC3jlW_Q_DdZrvwmU5e_HJbF6l0IgMH-vQ= but then I have to learn how to make 3d sites

roelof•15mo ago

and learn how to navigate then so you can see the rest so something like this :

roelof•15mo ago

https://wpdatatables.com/wp-content/uploads/2019/09/hexagon-gallery.jpg

roelof•15mo ago

What do you think ?

Jochem•15mo ago

3D sites are an entirely different beast, though really cool! That's probably beyond me at this point. The hexagons look really cool, and should be doable with some fancy positioning and clip-path / translate / transform

roelof•15mo ago

O, there are also really beyond what I know so, you thijnk this project can be done in js even with pagination ?

Jochem•15mo ago

anything that a framework can do, vanilla js can do too you can pass parameters to the script using URLSearchParams, then use that as a parameter to the API

roelof•15mo ago

pff still a lot to learn

Jochem•15mo ago

it's a very wide field 🙂

roelof•15mo ago

that is correct I think on css only you never stop learning

Gaming

Programming

How to construct this image