I'm trying to create a mosaic type script in Javascript and PHP, which makes up a big image with many different images made from small square tiles. The idea was to "fake" the effect by having a background image and laying over the tiles on top of it, and making their opacity 50% or so. This works decently enough, but it definitely doesn't look as good as I want.
My question is, does anyone have any recommendations on alternatives to this method? I know there are definitely ways to do this in Flash, such as the Mario Lemieux mosaic:
http://www.mariomosaic.com/mosaic/
But I would like to avoid flash if possible.
edit: added live example
So I haven't touched the JS layer yet, this has all been server-side stuff. There's no pre-loader or anything really in terms of making it more usable, that will come soon. But here's what I've got so far:
http://www.mtimofiiv.net/mosaic_example/
The little tiny image tiles are created from images uploaded by a user, and they're run through a class I've built to generate them. I used GD2 to make them grayscale so they will absorb the color of the background image better, and I "pixelated" the background image in Photoshop.
If anyone wants to see any part of the code let me know and I'll add it to this post. Also when this project's done I intend to make it available on Github in its entirety for whoever wants to do the same.
Perhaps the fact that your demo HTML is 733KB might dissuade you from this particular approach. I think if you want to do something like this, you really ought to employ the canvas element, and work in some kind of "ajax" loading. That could actually be kind of interesting. However, if you are going to generate this much HTML...you might consider having a client-side script do it, if possible. Just some thoughts...
Related
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.
Ive got an assignment to create an image gallery using flickr - this has to be done using keyword(s) entered by a user in a form, and the image gallery returned must be paginated and display a certain number of results per page. Each image in the gallery must also be a thumbnail.
Im graded based on how efficient, maintainable, consise and clear the code is..
Ive finished the assignment but i think it could be optimised alot better, these are the points that i might be lacking.
All my code is in a single file (the form and the gallery code) - should i separate this?
Im not using oo at all, is there someway i can make use of it here?
Im resizing the thumbnails using html length and width
thanks for any help
This question is really broad, and it seems like you want someone to write the code for you, which I won't do but I'll help point in the right direction.
First, Flickr has an API, I would reccomend checking that out.
http://www.flickr.com/services/api/
You are going to need a library to make thumbnails, you can do that quickly with GD
http://php.net/manual/en/book.image.php
As far as separating the code, it probably wouldn't be a bad idea. One file is great if its a few hundred lines, but if you have a lot going on, it doesnt hurt to separate files by their function (ex: scrape.php, resize.php etc.). That's mostly personal preference. Since you're being graded on maintainability and clarity I would suggest breaking it up.
At the risk of starting a flamewar, I would suggest making it OOP. If you want it to be clear and readable this will help a lot. Break it into classes and functions and group them in a logical manner so someone knows if they need to change something they have a good idea where to start. Document it well and this will help also.
My suggestion would be to create a class for each of these functions:
Grab images from Flickr
Store the metadata related to the images
Resize the images
Pull the information from the database
Display the pages.
Try to keep the data functions separate from the presentation. Use a class to build your pages, and call another class to get the data. This is pretty general advise, but it's something you'll need to know when building future apps. This doesn't necessarily need to be full MVC, but separation of these tasks will make the code make more sense.
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 created a website for a relative. However, after making the whole thing, the relative says she didn't understand that the design pictures I sent her were scaled 1:1, so she wants the website "bigger" (basically the same thing as pressing Ctrl+plus in Firefox).
Do I have to redo all CSS and design, or is there a better way to do this?
There's going to be some css work, but how much depends a lot on how you built it.
I would have thought you're going to have to resize images etc, but you may well just be able to increase the size of your frame and page sections relatvice to each other and up the text size a bit.
This should get you part way there...
You have several options, but either way you're looking at rewriting some CSS. Your choice will depend upon the actual website.
Move to a larger fixed width site. Keep in mind that 960px wide is about your maximum for this. This will account for browser chrome at 1024x768.
Change over to a fluid width site. This site will expand to fit your browser. If your site is heavy on graphic elements, this might not be your best option. However, many people like a site expanding to fit their whole browser window.
If you use a CSS framework like YAML it has support for "zooming" the whole page.
I don't think the zoom property in CSS is reliable enough yet, so I'm afraid you will have to go back to the drawing board. Now for future reference, you know to send them a sample of the work before it is completely finished!
That's just one advantage of only using variable values for any styling like em or even better ex... With them you'd just have to adjust your basic font-size a few pxs higher and boom; everything's got bigger.
Still, to your question: Depends on how many fix values you used, the more, the longer it will take to adjust it to be "bigger".
But for the future I really encourage you to use variable sizes for almost anything as there is no disadvantage in it and it makes your website 100% resizable.
I'm really not that good at Javascript and that, so I need another bit of help. I want to be able to do a quick bit of AJAX using PHP then when the ajax response is finished show the response in a div and SLIDE it down nicely.
The basic AJAX side of it is no problem. But I want to be able to have it slide nicely without using any framework like jQuery or MooTools. Mainly for learning, but there are other reasons. So, any help on a very simple way od doing so would be handy. I can't really find much online. If I have to use jQuery then I guess I can, I have played about with it but I'm not a fan of Javascript at the best of times...
So yeah, pretty much any advice/tips/thoughts/help would be really handy!
I guess the basics would be something of a timeOut() in combination with increasing the height until it is full height:
set the display of the element to none
get the full height of the element, something like:document.getelementById('IDofElement').style.height
set the height to 0 and the display to something like block
set a timeOut() and increase the height in the called function, activate a new timeOut() if the element is not already full height.
The only real disadvantage of not using a library would be that you would have to test in a lot of different browsers and perhaps make modifications according to the browser used. Libraries have already solved that problem for you.
Personally, I'd just use JQuery. If you want to see how they do it, then download the developer version of the library and look at the code.
If you're not a fan of javascript, then use a library, it means you have to write less.