Comments (5)
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!
from pokesprite.
Nvm, I figured.
from pokesprite.
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.
from pokesprite.
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. '
I solved it by directly displaying the picture's link from your github.
Thanks for offering this API!
from pokesprite.
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 setbackground-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.
from pokesprite.
Related Issues (20)
- Pokémon BDSP - New Icons HOT 7
- Custom female Wobbuffet sprites. HOT 1
- Pokémon LA - New Graphics HOT 5
- Pokemon PLA Sprites for Spreadsheet HOT 2
- Missing Galarian Sprites HOT 3
- Shiny Tentacruel sprite colors HOT 3
- Pixel Sprites for Hisui Balls dumped from HOME HOT 1
- [REQUEST] Origin Marks under Misc HOT 4
- shiny/decidueye-hisui same color as decidueye-hisui HOT 2
- Add Sprite for Uncloaked Burmy
- Add Generation 1/2 Icon Sprites
- 2x Single wrong pixel gen8 HOT 1
- Twinkling Star Ribbon is still missing HOT 1
- [Request] PoGo? HOT 3
- Yakkun zukan sprites HOT 2
- Add sprites from Pokemon Scarlet and Violet HOT 17
- Major updates to Pokésprite HOT 10
- Can you add Pokemon sprite that are in the world (meaning seen there 4 faces)
- Addition of Pokemon Legends Arceus sprites
- Exception Error After Building and Randomizing Pokemon HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pokesprite.