I'm building a web site (asp.net) for a company that manufactures small customizable anodized aluminum products. Products are a variety of shapes. but mostly flat, domed or ring-shaped. Products can be colored in one of about 15 colors.
The user can specify one or more lines of text and a font, a simple line drawing (e.g., a heart or four-leafed clover), or both. Text is limited to about 5-15 characters per line. The text or drawing is milled into the part and can be colored in a contrasting color.
What I want to do is display the customized product to the user, so that after selecting product, colors, text,, font and artwork the site will display an image of how the finished product will look. Ideally they would be able to rotate the image but that's not critical.
I have digital descriptions (CAD and CNC milling instructions) of all the parts, fonts, and artwork and can translate them into whatever format is needed.
Can this be done with Flash, SilverLight, or some similar technology? Ideas, references, suggestions, and tutorials welcome! Thanks
It can be done in Flash, but it requires a lot of work:
To get a realistic version of the product displayed, you have to produce pictures, videos and whatever other depictions of all possible shapes and colors of your product, then you simply have to switch between those depending on the user's choice.
Adding the writing is a bit trickier when the surface isn't flat, but you can model a dome or ring-shaped surface with 3D polygons and add the text as an image texture.
It is best to have a set of standard views, maybe 4 or 5 angles, so that you only have to figure each position out once for each similar shape, and afterwards you can just copy the positioning etc.
Related
Sorry for the vague title, I have no idea how to really ask this question to be honest so I'll describe what I'm trying to do
I'm attempting to make an app where users can change the colors of different parts of a car. They can change the door for instance to a green as shown, or any other color they wish. They would then be able to change the color of the hood, or the roof, etc.
I've thought about having seperate images for each component and then lining them up to match. However this seems practically impossible when it comes to different screen sizes and scales. I also thought about making a blanket white image, and then creating views over the top with the selected color.
Does anyone have any ideas how I could possibly approach this?
Thankyou
I dont know about the performance of this. But, how about, an overlay of the different parts of the car, but using the same size of the whole car. For example, you have the image of the whole car, and erase all but the door. In other image, you erase all but the hood. If you lay one image above another, it will make the whole car, and the size of the screen will not affect you, because all the images will have the same size.
Then you can use the tint style to change the color of each layer.
I have a standard jpeg image, which I use within some commercial software to colorize other data (by mapping the image's color onto the data). Then I export the colored data from this software to an XYRGB ascii file, i.e. I store the data information in the first two columns of each row and then the three RGB colors in the last three columns.
Since I need to convert the color to CIELab or CIELuv, it seems I need to know which exact colorspace (RGB, sRGB, gamma, whitepoint - you name it) my RGB values are in. But the question is: How can I find out? Or could I just assume a certain profile being a good approximation?
(Remark: The company of the commercial software I used was not able to tell me any specifics...)
If you don't know the provenance of the image, there's not anything you can do to determine the color space from the RGB data alone. It's a little like having a blueprint without a scale. You could guess and check with an application like Photoshop that can assign a profile to an image but even then it's not always obvious which is correct unless the image contains colors you can recognize as correct.
For many images sRGB is good guess. Most image on the web are sRGB and many non-color managed apps assume sRGB. But just understand that it is still a guess. If color accuracy is critical, you need the profile.
Im going to make a new application for a car dealership. They basically want a WPF/silverlight application where one can slect a car (model) and then via a color palette choose the color of the car (from predefined colors). They also need to be able to different kind of rims, headlights and interior.
what is the best/easiest approach for this. Been thinking on having all the different images and then just swap them out when the selection changes. This, however has the potentional problem of all images with all combinations does not exist (eg. a red VW, metallic rims, white leather interior) etc.
Is there any other approach to this? replacing colors? Having a basic model and then copying the "body" of the car on top, copy rims on top etc. and then just having to enable/disable a particular "layer" of the images?
I would do this by using different layers: the basic model with the car's color as translucent part, on top of this pictures with the different add-ons, the background color is the car's color. The trick is to fit everything together that it looks good.
Depending on the color (maybe you want to have shadows or chrome effects), you could have one model's picture for each color, and then add the add-ons and the interior on top of this.
This post is not about code-syntax but about work-strategy, before I start developing the site.
If I need to design the front-end of a mobile-site for smart-phones (Androids { 3 different sizes}, iphones {2 differents sizes}, and other non - smartphones phones) how shall I proceed? (MY DESIGN HAS TO WORK AND BE THE SAME FOR ALL THESE DEVICES)
1- shall I design my work following the idea about flexible images and fluid grids (flexible DIV:s).
or
2- set different media queries-sizes for every target model? (this solution might create more development-work isn't it?)
Thanks very much for yr thoughts...
Use fluid grids first. Then you can use media queries to do some final tweaks. Like e.g. float an image to the right if there is room (landscape mode).
This way you support nearly every device out there, and not just the big 2 (although Blackberry is bigger than Android I believe).
# YoniGeek; may be you have to use fluid layout.
For this just define screen width instead of device width & define css for maximum device screen size. So; you no need to define different css for different devices.
Read this article http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Check this site for inspiration http://mediaqueri.es/ & look same in all devices.
It's a matter of preference really. You can use a fluid design, media queries (with css transitions) or a combination of all techniques.
On my most recent project, I went with media queries. Once I had the basic design done it took me less than an hour to have it working on varying resolutions from 240 pixels to 960 pixels wide. So more development work... it was not.
My previous recommendation on one of your prior questions still stands:
Design (ie: one design.css file or split up into multiple files such as fonts.css, typography.css, etc...) the site without positioning anything. You cam start with a HTML 5 reset, implement font faces, set the backgrounds, color the links, style the inputs but do not position anything (ie: if you have header, nav, content and footer sections, don't position them).
Use media queries (ie: layout-240.css, layout-960.css) to target your viewports and position each everything accordingly. They will generally contain less than 100 lines of CSS and take up less than 3 KB of diskspace but that's irrelevant.
I'm looking for a way to store a very large image (e.g. 100.000x100.000 pixels) on a webserver. I must be able to retrieve parts of that image and write parts into it. The cherry on top would be a way to get parts of that image, resized to a specific resolution (for example, i want alle pixels from 0,0 to 10.000,10.000 resized to 1000x1000 pixels).
Anybody know a kind of DB, or a data-structure or any other way or service or programm that can handle something like that?
thx, tux
How about Tiles?
Just like what popular mapping application (Google Maps / Bing Maps ) does. Divide and pre-process your image in to tiles for various sizes (zoom levels). Display them on a webpage with zero margin, zero border.
While retrieving, calculate positioning of tiles (which tiles should be retrieved as whole and which ones as partial) and then return as single image.
http://143.117.54.5/idl/images/img_pyrm.gif
(image ack: http://143.117.54.5/idl/Image_Tiling.html)
Search for "map servers": there are a bunch of them already available. I'm sure they at least contain components that might be of interest for you.