search

fliptables / bcjs

0 stars 0 forks source link

"Spark" Shape - images #6

Open getnashty opened 9 years ago

getnashty commented 9 years ago

We need for publishers to be able to show an item's shape without hitting BC on every load to receive a score and render the shape.

They might want to show a tiny photo of this shape in search results, grid listings etc. Everywhere they would want the info - without being interactive.

I see this - http://davidwalsh.name/convert-canvas-image... so what we could do, is create the image every time (or once every X loads) the avg rating is displayed on a client - and send the new image back to BC through our JS.

so then we store the image in our CDN, and give them an ability like, <img src="bettercontext.com/pub/1/item/10/shape.png"> renders <img src=" bettercontext.com/sparkshapes/329847328497.png"> or something...

What do you think?

getnashty commented 9 years ago

This is an example of "sparklines" which are mini line graph photos, little detail - but still tells the story:

http://www.bissantz.de/sparklines/ask_et_DJ_Zellskalierung_MinMax.png

treasonx commented 9 years ago

Why not just have the server generate the image and ship it to the CDN and respond with the image url? I dont understand what we gain by doing it client side then sending it back to the server which ships it to the CDN. I mean the server knows when it should be updated better than the client does.

treasonx commented 9 years ago

FYI:

https://github.com/Automattic/node-canvas

getnashty commented 9 years ago

I was looking for some kind of server side solution and couldn't find anything, was starting to think it was impossible - but thats perfect. So where would we want this to live? Assuming we'd have to spin up a node server

treasonx commented 9 years ago

Node is the only thing that I know which handles rendering canvas nicely. Maybe the node server can generate things like the spark lines, social media assets (twitter cards), and other forms of semi-static assets which live on the CDN.

treasonx commented 9 years ago

Hmm well unfortunately node canvas will not work with the chartjs library. The animations use browser specific APIs so it fails. I think the next step would be a phantomjs web service which will create the images. I'm going to start down that path next.

getnashty commented 9 years ago

What if we rendered the shape image (for this) using some custom d3 as basic as possible?

Sent from my iPhone

On Mar 30, 2015, at 6:40 AM, James Morrin notifications@github.com wrote:

Hmm well unfortunately node canvas will not work with the chartjs library. The animations use browser specific APIs so it fails. I think the next step would be a phantomjs web service which will create the images. I'm going to start down that path next.

— Reply to this email directly or view it on GitHub https://github.com/fliptables/bcjs/issues/6#issuecomment-87630775.

treasonx commented 9 years ago

Hmm that might work. Since there is no interaction or animation it might be easier.

Can you shoot me a mock of what you are expecting to see? With sizes?