How to display the icon when I got the Json file?

[ethancwb]

Sorry for asking this, i'm new to web-applications. So now I can get the json output from decerate: { request: { slug: 'pikachu' }, attributes: { type: 'pkmn', slug: 'pikachu', color: null, form: null, gender: null, dir: null }, exactMatch: true, found: true, data: { coords: { x: 1, y: 63 }, props: { flipped: false } }, size: { w: 40, h: 30 } }

How do I use it to display the icon? Thanks in advance!

[ethancwb]

Nvm, I figured.

[msikma]

Hi there! I'm glad you got it working. I was wondering if maybe you could explain what was difficult to you, and how you resolved your problem? Maybe I can improve the readme a bit to help others.

[ethancwb]

Thanks for replying! So I've faced two problems while i'm deploying the API (I'm using MEAN stack). First is that I can't directly use your embed script in my html files, those scripts are not getting executed no matter where I put them in. But this is easy to solve, instead put them inside html files, I put them into my controller.js. Second problem is that in the README inside the npm install package, It seems to have no construction after I got the json file:

{ request: { slug: 'pikachu' }, attributes: { type: 'pkmn', slug: 'pikachu', color: null, form: null, gender: null, dir: null }, exactMatch: true, found: true, data: { coords: { x: 1, y: 63 }, props: { flipped: false } }, size: { w: 40, h: 30 } }

The only guide is "With this information, you can construct a DOM node that displays the icon. ", which confused me a lot. I wasn't sure about how I can use this to get my image display.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

Actually there is another problem I discovered today: Image displaying is not working correctly with ng-repeat. '

' works fine when i want to show them one by one, but when I use ng-repeat to loop through a list of pokemons, then no image is getting displayed, even I hard-coded it to display all "charmander". I guess that's because ng-repeat only supports ng-src to display image. I solved it by directly displaying the picture's link from your github.

Thanks for offering this API!

[msikma]

Hi there, it's possible of course to link to the images directly, but it's not as efficient that way. Also, I doubt I will ever change the directory structure, but theoretically that is possible. It's a better technical choice to use your own hosted version of the generated image.

The JS object you received is all you need to display the correct icon from the generated image. See the readme below the code example:

coords is the x and y starting positions of the icon in the image, so you should set background-position to minus those values.

In the example for Pikachu, coords is x: 1, y: 63. That means you can display the icon by making a node that has the generated icon file as background image, and has a background-position value of -1px -63px.

The following DOM should work:

<span class="pkspr pkmn-pikachu">
  <i style="background-position: -1px -63px;"></i>
</span>

If you generate that, it should show up, assuming you are including the CSS too. Note that you need the pkmn-pikachu class too, to ensure the icon is the correct size.

The reason why it's done like this is so that people can write their own UI library abstractions, e.g. using React or Angular.

If you wish to use the current way, by linking to the images directly, that will keep on working too though. I'm not planning to change the image locations anytime.

[ethancwb]

Thanks for pointing that out, I almost forgot that I can provide those images locally. I'll definitely go for it. This is only my second month in learning web-dev, and I'm really enjoying doing it. This is the website I made using your great API, take a look if your are interested: https://cs3200-final-project.herokuapp.com

Again, thanks for your advices! I really appreciate it!