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•16mo 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

roelofOP•16mo 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•16mo 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

roelofOP•16mo 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•16mo 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;
}

roelofOP•16mo ago

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

Jochem•16mo 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

roelofOP•16mo 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•16mo 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

roelofOP•16mo ago

I think there is no picture that has so many tiles

Jochem•16mo 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

roelofOP•16mo 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•16mo 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

roelofOP•16mo ago

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

Jochem•16mo ago

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

roelofOP•16mo 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•16mo 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

roelofOP•16mo ago

you know a lot about solving complex things

Jochem•16mo 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

roelofOP•16mo 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•16mo ago

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

roelofOP•16mo 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•16mo ago

yeah, that's a reasonable number

roelofOP•16mo 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•16mo ago

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

roelofOP•16mo 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

roelofOP•16mo 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

roelofOP•16mo ago

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

roelofOP•16mo ago

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

roelofOP•16mo ago

What do you think ?

Jochem•16mo 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

roelofOP•16mo ago

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

Jochem•16mo 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

roelofOP•16mo ago

pff still a lot to learn

Jochem•16mo ago

it's a very wide field 🙂

roelofOP•16mo ago

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

Gaming

Programming

How to construct this image