I am working on a project that consists of a online store, to sell Printed Circuit Boards.
But the hole system will be automated, and will be able to view online the Gerber files (Gerber are the files that has the machine code for the pcb).
I need to choose the best way to "output" this file uploaded by the user, to the webpage. Only for viewing the PCB before buying.
I have done the entire PHP code to process the Gerber, but, I can't decide if the file will be proccesed, and then:
I will save as a PNG file (rendering will be done with the PHP image library {that is a shit}), and if the user zoom, or do anything, it will not be perfect... (I would need to render in a high resolutiong, and would take a lot of space, and also time to load)
Render as an SVG file (Vector file), and show on the HTML as an mbeded element (Does it work on all new browsers? Is it slow to proccess?), The SVG file are awsome in terms of drawing lines...
And the last but not least way to doit, is to create a list of JavaScript commands, that draws on a Canvas Element (I have already implemented this, and works really good, but I don't like to think, that I'm actualy 'rendering' to a code...)
Anyway, what do you think I should use, and if I didn't tought in another way of doing it, please tell me!
Here is an example of the output as Canvas (With the source being a JavaScript function object, that has many drawLine commands):
I'm opting for SVG file, even if it's slower than canvas, but considering that won't be real time drawing process in terms of user interaction with the drawing object it's a good choice. SVG's are actually vectors, hence the images won't be crispy on large images. There are some quite good libraries out there which are working with svg-s like:
http://processingjs.org
http://d3js.org/
http://fabricjs.com/
http://raphaeljs.com/
I think d3 is one of the best. I definitely wont' recommend PHP image library.
Related
I am looking to create a small app that allows a user to create a custom cover for a book. The client doesn't want to just be supplied with what the customer selected but a print ready 300dpi JPEG or PDF.
I know PHP can handle most of this. But the customisation seems to be a bit difficult to get right. I have tried using canvas to create the client side preview, which work ok enough.
Just to see if I'm wasting time trying to recreate the wheel, does anyone know if something like what I need exists already?
Basically it would be something kind of similiar to this but for creating print ready images.
Thanks!
If you're using Canvas for building the editor, for the best results, I'd recommend you re-render the customization on the server using whatever technology fits your need in PHP and not try to take the image they're looking at and make it work somehow by sending it to the server. The DPI will be wrong if you use Canvas in a standard way (it will be at the screen DPI).
For example, if they have the ability to place an image, then just note the coordinates and place the image in a web server created image at 300 DPI. Text, same thing, etc. Yes, it will be extra work, but it should be of higher quality and better consistency.
This would imply that there's a simple serialization format for the representation of the custom cover that is sent to the web server.
You might be able to use SVG, but you'll have to introduce a reliable SVG to PDF conversion and handle fonts. Maybe something like this? (I'm not sure that building an SVG editor would be easier than Canvas based).
Starting from your "work ok enough preview", jsPDF will be able to generate a PDF right from the browser in a breez.
convert the canvas to a image/jpeg (toDataURL will be your best friend)
instanciate a jsPDF object, add the image
output the jsPDF object
Tricky details:
beware your screen displays stuff with 72dpi but print expect 300dpi. So you can up scale your canvas then draw the image within the pdf PDF
beware to Cross Origin Resources: if you are using images outside your domain, you are doomed (or you will need a proxy)
I'm trying to generate 3D isometric views of players' heads, but I'm not sure what kind of support PHP has for this type of operation, or of any external libraries that may be better suited.
Basically I need to take a net like this (here is a diagram showing what each portion is mapped to) and make a 3D head from it. I also need to include the 'head accessory' portions, which should be slightly larger/offset from the actual head.
Does anyone know how I should go about this?
Well first it will be a complex job in my view.
The http://www.minecraftwiki.net/images/0/01/Skinzones.png file you mentioned is flat, but you have to convert that in ISOMETRIC 3D look, so you have to distort the images
For example look at the images below
So you can see that 3D box image is created from the pieces of other images, the logic is to add perspective to the flat images and join them. but as it is 2D we will call it Image Distortion.
Unfortunately GD Library which comes bundled with PHP is not advanced enough to let you do such things.
You have to use some other library like Image Magic and this link is tutorial for using distort functions http://www.imagemagick.org/Usage/distorts/
Second big thing is the processing of the images, you can process the images live but it will consume lots of resources on server, so it is suggested that you use pre processed images, and not process them every time.
To generate the Isometric image you have to write the code your self, and it may need alteration on each image character depending upon the size of the image. But when you have written a code it will be easy.
My Suggestion is to write your own code once, then alter it for every character and save the processed images in a sprite and use them when you add play functionality.
check out this link as well
http://www.fmwconcepts.com/imagemagick/index.php
Okay, I know questions like this exist in multiple forms across StackOverflow and other places on the web, but none of them is pointing me to what I actually need (maybe I missed a question that was more catered to my problem).
I need a Facebook-style image upload mechanism, using Codeigniter and javascript/jquery. Here's what it's supposed to do -
Using a single file upload control (or for that matter any clickable control), open up the "Choose Files" dialog window, and allow the user to select multiple images from it. (I know this cannot yet be done in IE, and I do not really care about the multiple file selection not working in IE).
Once the user has selected the files, the page should display a series of progress bars (like Facebook does). As each image gets uploaded, the corresponding progress bar reaches 100% (if it's simpler to implement, I am willing to forego the graphical progress bar for a text that displays the progress percentage), and the thumbnail of the image is displayed next to the completed progress bar (or text). At this point, the user should have the option to delete the uploaded image by clicking a cancel button (I think I can get this part working on my own).
The upload can be sequential (like Facebook does), or asynchronous (some upload libraries I found work this way).
What's most important (and the part that is stumping me) is the thumbnail generation. I know that there's some HTML5/CSS3 technique that allows you to display the thumbnail before the files have actually been uploaded, pulling them directly from the user's hard drive. But that won't work in IE8, and while I am not concerned about the multiple image selection not working in IE8, I need for the thumbnail generation to work cross-browser, and that includes IE8 (deciding on the browser compatibility is not something I can command, so please don't come up with a "screw IE!" solution).
I have tried using uploadify (I have no constraints against using Flash), but cannot seem to able to customize it to my needs. While uploadify does indeed display progress bars, I was unable to find a way to generate (and display) thumbnails on the fly, in accordance with the behavior I described above. I know how thumbnail generation works on PHP, just cannot figure out how to implement this together with the progress indicators. Am I looking for a suitable jQuery/ajax call?
Any help and/or pointers would be appreciated. I admit that I might have missed a StackOverflow question that would solve my issue, so please direct me to that page, or to any other page you believe will help me. Please feel free to suggest upload libraries other than uploadify, which you believe I might find useful.
Thanks in advance. And thanks for reading through all this - I tried my best to make the question properly descriptive!
I have used Jquery file upload with good results. It does need IE to be in compatibility mode, but worked well for chrome/firefox.
UPDATE. It now claims to support IE 6.0+.
I'll focus on point 4 here. It can be done, but you'll end up using iframes (yeah, I now).
They can be 1px small, but you'll need them if you want to create thumbnail previews.
A good starting point would be here: http://www.zurb.com/playground/ajax_upload
As for creating the actual preview images (smaller versions) you can use CI's image library.
Let me know how it works out.
Gallery - http://schnell.dreamhosters.com/wallpapers.php
The purpose of this gallery is simple - store a lot of wallpapers and sort them by resolution and/or aspect ratio for people to browse and download as they like. There's a few features I've wanted to work in, but I'm not quite sure how best to do them or how to do them at all. The presentation is in HTML 4, CSS, Javascript and jQuery + plugins. The work behind the scenes is done in PHP.
1 - Make the images downloadable without 'Save Image As...'. Right now I'm using a contrivance whereby clicking the Download link in the bottom-right of each image's box opens a new box with instructions telling the user to 'Right Click. Save Image As...'. I'd like to avoid this entirely if possible.
2 - Make the searching and sorting faster and more efficient. Right now all the images are stored in a folder on my webspace and I use a shell command and a lot of fancy filtering in PHP to get the images I want based on the filters (the page number I'm on and the aspect ratio or resolution I chose). I thought of maybe doing something with MySQL, but I haven't quite figured out yet how I'd do that and maintain the structure my page has.
3 - Make the images load faster. There's probably no easy coding solution to this, so this one is more of a 'I wish' than a 'I want to'.
4 - Improve the layout. This one is more subjective and 'artsy' I suppose, but any suggestions would be nice.
5 - An upload system. Give the ability to upload your own wallpapers and maybe include a short description or some tags. I have absolutely no idea how to handle this as I've never worked with uploading of files before. And this also leads to...
6 - A tagging system or some other type of user-made sorting system. Again, no experience here.
Any insight on any of these issues would be great, and feel free to throw in any suggestions of your own.
Send the files with the MIME type "application/octet-stream" to make a browser download rather than display them
It would definitely be better to store information about the images in a database rather than exploring the filesystem
The images really aren't loading slowly for me, so I can't really suggest anything here. If your site gets larger (much larger) you might want to look into CDNs
The layout is OK but it needs some design, it's incredibly plain at the moment. It would also be nice to see more information on the images - what they are of, where they're from, who made them, etc (don't forget: correct copyright attribution)
You probably want to read the PHP handbook section on handling file uploads. To handle description and tags, you'll definitely want a database of some sort.
Also not hard if you have a correctly formed database. If you've never designed a schema before you probably want to learn a little about normalisation and many-to-many relationships to do the tags.
Lastly you didn't ask for it, but it'd be nice if it were possible to have the same image in multiple resolutions (quite common on image sites - think Flickr, Deviantart, etc).
I've recently bumped into facelift, an alternative to sIFR and I was wondering if those who have experience with both sIFR and FLIR could shed some light on their experience with FLIR.
For those of you who've not yet read about how FLIR does it, FLIR works by taking the text from targeted elements using JavaScript to then make calls to a PHP app that uses PHP's GD to render and return transparent PNG images that get placed as background for the said element, where the overflow is then set to hidden and padding is applied equal to the elements dimensions to effectively push the text out of view.
This is what I've figured so far:
The good
No flash (+for mobiles)
FLIR won't break the layout
Images range from some 1KB (say one h3 sentence) to 8KB (very very large headline)
Good documentation
Easy to implement
Customizable selectors
Support for jQuery/prototype/scriptaculous/mooTools
FLIR has implemented cache
Browsers cache the images themselves!
The bad
Text can't be selected
Requests are processed from all sources (you need to restrict FLIR yourself to process requests from your domain only)
My main concerns are about how well does it scale, that is, how expensive is it to work with the GD library on a shared host, does anyone have experience with it?; second, what love do search engines garner for sIFR or FLIR implementations knowing that a) text isn't explicitly hidden b) renders only on a JavaScript engine.
Over the long term, sIFR should cache better because rendering is done on the client side, from one single Flash movie. Flash text acts more like browser text than an image, and it's easy to style the text within Flash (different colors, font weights, links, etc). You may also prefer the quality of text rendered in Flash, versus that rendered by the server side image library. Another advantage is that you don't need any server side code.
Google has stated that sIFR is OK, since it's replacing HTML text by the same text, but rendered differently. I'd say the same holds true for FLIR.
I know that with sIFR, and I assume with FLIR that you perform your markup in the same way as usual, but with an extra class tag or similar, so it can find the text to replace. Search engines will still read the markup as regular text so that shouldn't be an issue.
Performance-wise: if you're just using this for headings (and they're not headings which will change each page load), then the caching of the images in browsers, and also presumably on the server's disk should remove any worries about performance. Just make sure you set up your HTTP headers correctly!
since FLIR is IMAGES and sIFR is flash i would imagine that it would be a bit more resource intensive to use sIFR. I havent run any tests but it seems logical.
Search engines search sIFR better than FLIR because some search engines can go into the text of a flash document
I don't know much about sIFR because FLIR worked, and it "felt" better to me than Flash. Just looking at the sIFR 3 beta demo page I noticed that it doesn't seem to react to browser preference text resizing. That is, I increase my font-size in Firefox (ctrl-+) and reload the page, the headings stay the same size.
To those who know sIFR, is this an actual limitation of the script or did they just do the demo page wrong?
If it actually doesn't handle this, I'd call that a major advantage for FLIR, which does work this way. People with impaired vision who don't use screen readers probably don't appreciate that the text doesn't resize to their preference.
That said, from a quick glance at sIFR's API, you should be able to make resized text work in sIFR. I'd consider it a bug to be fixed, not an essential disadvantage of the method.
Woff files is the best solution.
http://www.fontsquirrel.com/tools/webfont-generator