Visualizer Dilemma

Here’s a breakdown of the problem:
I want to build a guitar builder/visualizer and it must handle a lot of options.

It’s like 7 * 22 * 17 * 2 * 9 * 2 = 94248 possible combinations.
Or: body wood x neck wood x transparent colors x gloss or satin x fingerboard wood x bridges.

And that’s only one body style and only the transparent finishes with no top wood or taking into
account black, chrome and gold hardware. It’s obvious I can’t make that many images so I need
to figure out how to use a system of transparent overlays, like any image editing program,
but on a web page. Then I could start overlaying with the 17 transparent colors and
drastically reduce the number of images needed.

The question is, can I do something like this in Dreamweaver,
or is it more likely a server side programming issue?

Any advice is appreciated.
 
I'm not sure what the best way to go about this, but it sounds very similar to an app my company has for signage design / look development. We had an earlier version that was programmed with Adobe Air. That had a lot of issues with compatibility and also being tied to an Adobe software that could be discontinued at any point. I think this second version is done with HTML5 and maybe JavaScript (PHP?). I worked on a lot of the graphic files with my boss. He's the one that dealt with programmers directly though, so I'm not sure what their process was. I can ask my boss when he gets in. As you can see there are a massive amount of options we had to deal with. So what you want to do is totally possible. Some of the programmers on here may be better to answer the technical side of your project though.

APCO DesignStudio 2
http://www.apcosigns.com/designstudio.html

Edit:
And I'll add that the way we set up all the different options was to create a layered file in Illustrator. The programmers were able to use that to create the app. The original app version was either downloadable or would run in the browser. This second version is web only.
 
Thanks swizl, that sounds promising. I'll use Photoshop to do some prep for testing.
Was the programming very expensive?
 
Thanks swizl, that sounds promising. I'll use Photoshop to do some prep for testing.
Was the programming very expensive?

I'm not sure what my company paid the programmers. I can ask though. I thought my boss was just going to come in late today, but he won't be in at all. So I can ask him on Monday if that's ok? I know they paid a lot more for the original Air version of the app than they did for this new version. I can find out who he hired and PM you if you want? They're based in Atlanta though. They did a great job and were always prompt with changes and deadlines.

And yeah, I think Photoshop or any other image editor that utilizes layers will work.
 
If I can get a general Idea of cost it would be helpful. And I don't think it matters where the company is,
and it would give me someone to ask some questions, so If possible I would like some contact info.

No rush, so whenever you can.
Thanks
 
If I can get a general Idea of cost it would be helpful. And I don't think it matters where the company is,
and it would give me someone to ask some questions, so If possible I would like some contact info.

No rush, so whenever you can.
Thanks

That makes sense to me. What you need seems like less work than what we have, and they now have figured out the workflow for that type of app. I don’t think they had done a job like that before we hired them.

I’ll find out the company name and how much they charged us on Monday and then I’ll PM you.
 
Off topic: With the programming knowledge of js you could do it in dreamweaver like you could create something server side (php). Dreamweaver is not more than a well enhancend text editor specialised in html and css with functions for js and php (which means, you could do it in any simple text editor). That said, it seems way too complicated to do it yourself if you're just a beginner in those things (and dreamweaver is quiet ok, but it does create good websites only if you write the html and especially the css yourself (at least most of it). It's actually the best idea to use the firm Swizl mentioned.
 
Off topic: With the programming knowledge of js you could do it in dreamweaver like you could create something server side (php). Dreamweaver is not more than a well enhancend text editor specialised in html and css with functions for js and php (which means, you could do it in any simple text editor). That said, it seems way too complicated to do it yourself if you're just a beginner in those things (and dreamweaver is quiet ok, but it does create good websites only if you write the html and especially the css yourself (at least most of it). It's actually the best idea to use the firm Swizl mentioned.
I used Dreamweaver many years ago when it was owned by a German company, I remember users called it "screamweaver" at the time.

I don't see the point of manually writing html anymore, I would let a program like Dreamweaver write it and I just edit it.
At that point in time Dreamweaver would have been pointless, it was designed and marketed to "Write the html code for you".
And even if I could write html, It's got to be much faster because there is a mind boggling amount of it.

But you're right, and in the end I don't want to do anything but graphic work anyway.
This is just me gathering info right now.
 
Even more off topic:

I don't see the point of manually writing html anymore, I would let a program like Dreamweaver write it and I just edit it.
At that point in time Dreamweaver would have been pointless, it was designed and marketed to "Write the html code for you".
And even if I could write html, It's got to be much faster because there is a mind boggling amount of it.

I use dreamweaver quiet a lot, as I am faster with it than with a text editor. But I write 90 % of the html code for templates myself and then use them for the whole website. If you're used to it, you create that faster by hand anyway, using a few functions of dreamweaver that help you keeping track of tags, valid code (finding a typo can take a lot of time otherwise) and previews (you see what you get mostly but of course not always) and generally avoiding repetitive tasks as you can use your own snippets. The most important part, for me, it has some functions that help you handle big projects without using a cms (content management system. They have their worth, of course, but at least the bigger ones are targets of hackers and the therefore necessary maintenance can eat a lot of time). The real problem is the css, though, especially (but not limited to) with responsive design. Dreamweaver does help there, of course, like when you forgot something, or do a few things automatically, seeing what you're doing, using own code fragments, writing valid css and so on. Again, you're faster doing it by hand in the dreamweaver editor. It really helps, but with the css it just plain can't handle the more complicated things. Webdesigners who can write the code have a long time ago taken over dreamweaver, and for that kind of use, dreamweaver is best in class, with a lot of functions to write it faster in html and css (and even php or js).

Adobe knows this, so they created a few years ago an app that was targeted for people who don't have any knowledge of all that stuff. It was called muse, and it created the most horrible code you can imagine (development has been stopped last year. The keep the support up to 2020). Now the have spark (a web tool that can create basic but quiet professional looking websites from their own templates. Never looked at the code, though. It's not for websites only but also for flyers and stuff) and of course xd, which is something I should really look into, but somehow never got the time and / or the need or (the most important one) the motivation. It probably could help me with the draft of the design.

You know, that html and css stuff is actually a bit more complicated than people give it credit, at least since xhtml and css came along, something even trained webdesigners had problems coping with (it felt sometimes a bit strange to explain the concepts and some techniques to people who actually had learned exactly that in a school. Now the training and the schools are much better).
 
Thanks Has, I know I'll always learn something when talking to you. More reason to leave it to a pro I guess.
 
I actually blushed ... Thanks for the compliment ...

You're right about leaving it for the pros (most of them would have trouble to create something like this, too). Already the whole html-css stuff has got a lot more complicated because of responsive design (a site design that includes options for (ideally) all usual resolutions in the css, so it will look good on a 27" and a smart phone and everything in between) and other things caused by the different resolutions and retina etc. (for example a picture shown should have different sizes (i. e. versions) depending on the hardware it's shown. While it was difficult to make clear concepts like valid code, "well-formed code", ids and classes, the strict separation of content and formatting, the clear structure, semantic design (for example, a menu is a list) and so on, it's for most people mind boggling understanding the newer concepts (it's getting better). Most even had problems to understand simple stuff like really getting, that what they create and see on their monitor will not be what the majority of people actually will see because of the colors, the resolutions and so on.

Once a friend did show me the most beautiful draft for a website I have ever seen. It was created by an artist. She asked me how she could turn that into a website, if her ideas worked (she was a professional web designer, well schooled, too). And no, they didn't, because it would have worked on one resolution only (with content that really fit in). It could have been done with a few changes to the picture (I explained a few possibilities), but the artist didn't allow to change a single stroke. The whole project got tanked (I proposed to talk to the artist, but she was afraid she would lose the contract because she thought, he would have preferred that I'll do it instead of her).

On top of that you will need a ton of js (which isn't difficult to learn, but usually you start with less complex stuff). So you'll need a firm that's willing using your concepts and drafts to create what you have in mind on a professional level. To be honest, if I had exact that assignment, I'd at least consider taking someone else on board for the programming.
 
Once a friend did show me the most beautiful draft for a website I have ever seen. It was created by an artist. She asked me how she could turn that into a website, if her ideas worked (she was a professional web designer, well schooled, too). And no, they didn't, because it would have worked on one resolution only (with content that really fit in). It could have been done with a few changes to the picture (I explained a few possibilities), but the artist didn't allow to change a single stroke. The whole project got tanked (I proposed to talk to the artist, but she was afraid she would lose the contract because she thought, he would have preferred that I'll do it instead of her).

I've run into that before, even with customers instead of designers. It's hard for people to wrap their head around the idea that designing for web is less like drawing on paper than it is like dropping a sequence of pretty wood blocks into an aquarium - the difficulty being that every viewer has a different sized aquarium and all you can absolutely control is the sequence of blocks - especially back when javascript wasn't very cross platform compatible. HTML5, CSS and JS in modern browsers have made life so much easier. My long time customers can't grasp that more people view websites on their phones now than on computer monitors.
 
Here's a little eye candy: A seven string multi scale guitar with a purple candy paint job on a quilted maple top.:cry:

purple candy.jpg
.
 
Dammit: sensory flashback. Now I'm gonna have to break out Steve Vai's "Passion and Warfare" for my car trip, Saturday.


I've been thinking about your programming problem. Will this merely be a visualizer or do you ultimately want it as part of an online store? Integrating it into existing store software could get really tricky, but not impossible. As for the sheer quantity of options, you'll have to test this thing. RIGOROUSLY. This will not be ridiculously simple, but it doesn't sound incredibly hard, either. It just requires a working familiarity with a wide spectrum of skills. You'll need significant understanding of HTML, CSS, javascript, and some type of server-side coding (Perl, Ruby, PHP, etc. My preference and advice is based entirely upon PHP)

You're currently talking about aligning six different transparent .png files on top of each other - which should be possible using CSS, but any instability, rendering, or memory issues in any web browser (or browser version!) could wreck the entire display. You can't just assume the user will be using the latest/greatest/most stable version of your favorite browser. You'll get more stability from server side code, but reloading the whole page for each characteristic change will slow down the user experience. You'll also have to worry about image scaling - unless you lock down the pre-rendered image size, the odds of the unknown web browser scaling all six images exactly the same, AND still keeping them aligned is gonna be a pretty long shot.

I would recommend simplifying the rendering by vastly complicating the preparation: instead of each display requiring six different images, consider breaking them up into two pre-rendered sets of images: the body, and the neck. In your example that would mean 7 * 17 * 2 (238 images) of body artwork, along with 22 * 9 * 2 (396 images) of neck artwork. (To be honest, you'll probably want to render at least two sizes of images: one for desktop users and a smaller size set for mobile devices - which will at least double the number of images you need to prepare) Aligning two transparent images would be vastly more consistent and predictable than six (especially because they shouldn't overlap much), it will improve loading speed, and reduce required browser memory. It will also allow you to predict exactly what the customer sees, with a much smaller chance of misalignment. It makes for a lot more pre-rendering, but both the customer and the browser software will thank you. If this were an App instead of web browsers, working with six overlay images would probably be stable and predictable.

I think your best solution would be to render a default pair of images on the first page load (aligned using CSS), then update that display using an AJAX javascript (which only redraws a small part of the screen instead of reloading everything). This means that making a change to any input selector would trigger an AJAX request - submitting the Body characteristics AND the Neck characteristics to the web server. The web server (using PHP) would store the new selection changes in memory, and then return a new pair of image filenames to the browser, which the javascript would insert into appropriate Body / Neck image tags, and the browser itself would handle refreshing the screen. At this point, the screen should display a corrected pair of images, the inputs should display the correct values, and the server should be able to redraw the correct information from scratch if the user decided to refresh the browser screen.

Managing the huge set of images to keep them uniquely named and identifiable will be the tedious managerial part. Welcome to website management.

This description handles only the imagery: not user accounts, storing the data or integration with any other software - any of which could easily be more complicated than this part. I strongly recommend using a well-established javascript library for this (I prefer JQuery), and developing it as a custom component for a content management system such as WordPress (though I greatly prefer Joomla), so that you won't have to worry about coming up with software to completely build each page, or to run and secure an entire website (don't re-invent the wheel if you can manage it - you'd have enough to worry about troubleshooting this code by itself.) If I were writing a project like this, I would also spend even more time working on an administrative app, so that I could verify and manipulate what image sets were loaded without having to scrutinize the web server directories manually.



I suspect there is an inevitable question coming: will I write this for you? Unfortunately, no. I won't. I have learned that developing custom software for other people is not something my nature is built for: I can't write something other people intend to use professionally and then send it off into the world to sink or swim in other webmaster's hands, and I am not good at saying no to inevitable changes or repair requests. Work like that quickly becomes an albatross around my neck, and sucks the joy of programming for my own needs right out of me.

I do, however have a lot of fun helping other people figure out how to solve their own problems, and would be OK with offering more advice, critique and insights if necessary. (Of course, my own job and life have priority over my time.) Feel free to hand this description off to anyone you decide to work with (or tackle it yourself and learn a few new job skills!) and I will gladly answer questions whenever I can.


If you are starting from the very beginning of the learning curve, I recommend taking some time to learn the basics of HTML5 and CSS - there are lots of resources for that. Then find some good tutorials for swapping images using javascript - again, JQuery is your friend. This should serve as a very basic introduction to javascript and programming. I find javascript far more fragile and infuriating than PHP, but both share a very similar syntax. They run on different sides of the web serving universe, but if you can understand one language, it's not hard to comprehend the other. Simple PHP tutorials abound, and php.net is a fantastic free resource. By far, the trickiest part of the code will be the javascript making AJAX calls, since AJAX ties both the browser code and the server code together like two people in a three-legged race. Fortunately, JQuery simplifies this, too.

I hope this helps.
 
I quickly scanned through this thread so I'm not exactly aware of what you
are particularly looking for.
Just in case this will help you work toward what you may need; thought I would post this:

I am interested in building my own web site in the future.
In my search for information that would help me do this at a beginning level it was mentioned to me to check this web site out:

https://wordpress.com
 
@Jeanny: While wordpress isn't the worst thing around (a cms that was intended for blogs but has grown vastly since it's birth) there is not much in it that would help solving Zoohead's problem. Actually there are even a few things that would make it worse (in my opinion. MonkeyT would disagree). That said, for you it's a possibility, as there are a lot of predefined templates and you can use it without knowledge of all that other stuff like html, css and so on.

@MonkeyT: What you write seems like a good start. I only disagree about the CMS as they in my opinion over the years add layers of problems to such a solution (like 'Oh, by the way, we stopped development' or a security risk that makes immediate changes necessary while every update can jeopardize your plugs). But it's still the best if Zoo contacts the firm Swizl has recommended. They or some other firm that knows their stuff have the necessary experience and with a bit of luck already most of the needed code already written (or at least something similar).

But don't give ZooHead any ideas of trying it himself. Yes, he's intelligent enough and he could do it, but only with lots and lots of time to learn all that stuff and probably even more time to create that thing. It's not as easy as it seems to us because we know all this already for years and we started with it when it was still easy (it got a bit more complicated over the years). Over the time I have teached lots of people HTML and CSS (I'm talking in the hundreds) and quiet a few php and sql (not only mysql), not so much js actually. And then come the databases (most people experience serious trouble already learning the normalforms). There are quiet a few concepts to grasp for such a project and at least two programming languages. Even a certified genious would produce some unprofessional tinkering if he starts out with such a project. And of course it would eat lots and lots of time (maintaining it, too, which even in the best of circumstances involves support for the people who do work with it in the end, which is, you probably also have experience with that, sometimes a bit pesky in itself). Another thing I'd think about, is the legal stuff which I don't know how it's handled in the U.S. So all in all, I in Zoo's place would try to have all that done by a firm that handles it directly with the guitar shop and delivering only the pictures (which is probably the most fun, too). So if they run into problems with the web shop (or whatever it will be) they will contact the programmers directly.
 
I knew it would distract me. Here are two working prototypes of a six-image overlay display. The first (index.php) uses server-side PHP only, the second (index2.php) uses AJAX to update the display. These were written solely for new browsers, and have only been tested on MacOS Safari. They are proofs of concept only: I have made NO EFFORT to defend them against security threats, so DO NOT SERVE THESE FILES ON ANY WEB SERVER UNATTENDED. Remove them when you're through playing.

The six image overlaying is far more stable than I anticipated, but I specifically locked the image sizes to prevent resizing, and only tested on the latest browser. As I often remind customers,

• More than half of web pages are viewed on mobile phones, more than half of mobile phones are Android phones, and more than half of Android phones run OS/software combinations that are several years old.

• Microsoft has decided to retire the rendering engine in its current web browser (Edge) in favor of Chrome. Why? because they couldn't convince enough MS users to stop using Chrome, Firefox, or Internet Explorer to justify its development expense. We run sites that still have sizable IE usage stats, even though it was "End-Of-Lifed" over three years ago.

Working with any web technology means that at some point, you have to choose which potential audience you need to leave behind.


If you have a web server configured to process PHP on files with the .php engine, you should be able to run these pages by dropping these files and the imagery folder into the web root. For the record, it took about four hours for me to put these together - longer than usual because I had to create sample art and have never tried to create an AJAX page without the built-in support of my preferred CMS, Joomla.


As I suspected, the project itself isn't difficult, and wouldn't be a horrible learning experience for anyone who has picked up the basic skills needed ( HTML, CSS, PHP and Javascript / jQuery ). However, laying the groundwork necessary to make it into a safe and secure web site on a live web server is a significant amount of work, best done by someone very familiar with the threats a public site faces. This is why I still believe it would be best developed as an extension for an existing, hardened CMS system, which handles many of those challenges for you.

Screen Shot 2019-01-27 at 8.27.33 AM.png

For the record, I wouldn't wish WordPress on anybody. While its codebase is stable, it has long sacrificed code quality in favor of backward compatibility, which means it bends over backwards to avoid more recent improvements in application design, particularly when it comes to third-party plugins and extensions. Now, it IS the most widely used CMS package out there, but that also makes it the world's biggest target. Flaws are discovered (though dutifully repaired) frequently. When an exploit appears, it is made available for sale on hacker sites within hours, and is often weaponized within a day into an automated script so that miscreants with no skills can use it. If you choose to run a Wordpress site on your own server instead of wordpress.com (where they monitor - and often handle - such problems for you), update the software as frequently as you can - automatically, if possible.

We use Joomla because they chose to recreate their codebase using modern coding standards a few years ago, and it is much better designed for extension and consistency than any other CMS we've encountered. It also presents a much smaller and less enticing target on the internet than WP. I can maintain fifty Joomla sites with less effort than running a single Wordpress instance securely. In a little over ten years, we've only had one major security event. Joomla also supports the very best-written, most easily extendable online store software we've found: Hikashop. It's a smallish provider, but their developer support is second to none.
 

Attachments

  • FPHP_remixer.zip
    89.5 KB · Views: 189
I knew it would distract me. Here are two working prototypes of a six-image overlay display. The first (index.php) uses server-side PHP only, the second (index2.php) uses AJAX to update the display. These were written solely for new browsers, and have only been tested on MacOS Safari. They are proofs of concept only: I have made NO EFFORT to defend them against security threats, so DO NOT SERVE THESE FILES ON ANY WEB SERVER UNATTENDED. Remove them when you're through playing.

The six image overlaying is far more stable than I anticipated, but I specifically locked the image sizes to prevent resizing, and only tested on the latest browser. As I often remind customers,

• More than half of web pages are viewed on mobile phones, more than half of mobile phones are Android phones, and more than half of Android phones run OS/software combinations that are several years old.

• Microsoft has decided to retire the rendering engine in its current web browser (Edge) in favor of Chrome. Why? because they couldn't convince enough MS users to stop using Chrome, Firefox, or Internet Explorer to justify its development expense. We run sites that still have sizable IE usage stats, even though it was "End-Of-Lifed" over three years ago.

Working with any web technology means that at some point, you have to choose which potential audience you need to leave behind.


If you have a web server configured to process PHP on files with the .php engine, you should be able to run these pages by dropping these files and the imagery folder into the web root. For the record, it took about four hours for me to put these together - longer than usual because I had to create sample art and have never tried to create an AJAX page without the built-in support of my preferred CMS, Joomla.


As I suspected, the project itself isn't difficult, and wouldn't be a horrible learning experience for anyone who has picked up the basic skills needed ( HTML, CSS, PHP and Javascript / jQuery ). However, laying the groundwork necessary to make it into a safe and secure web site on a live web server is a significant amount of work, best done by someone very familiar with the threats a public site faces. This is why I still believe it would be best developed as an extension for an existing, hardened CMS system, which handles many of those challenges for you.

View attachment 33880
For the record, I wouldn't wish WordPress on anybody. While its codebase is stable, it has long sacrificed code quality in favor of backward compatibility, which means it bends over backwards to avoid more recent improvements in application design, particularly when it comes to third-party plugins and extensions. Now, it IS the most widely used CMS package out there, but that also makes it the world's biggest target. Flaws are discovered (though dutifully repaired) frequently. When an exploit appears, it is made available for sale on hacker sites within hours, and is often weaponized within a day into an automated script so that miscreants with no skills can use it. If you choose to run a Wordpress site on your own server instead of wordpress.com (where they monitor - and often handle - such problems for you), update the software as frequently as you can - automatically, if possible.

We use Joomla because they chose to recreate their codebase using modern coding standards a few years ago, and it is much better designed for extension and consistency than any other CMS we've encountered. It also presents a much smaller and less enticing target on the internet than WP. I can maintain fifty Joomla sites with less effort than running a single Wordpress instance securely. In a little over ten years, we've only had one major security event. Joomla also supports the very best-written, most easily extendable online store software we've found: Hikashop. It's a smallish provider, but their developer support is second to none.
Thanks MonkeyT, I very much appreciate your help. This will probably go nowhere but, now understand the depth of the problem. When I contact the company I'm just going to offer to make a mockup for them to use as a guide, to show what's possible visually.
 
Sorry that I'm not around much these days (too busy with work, which doesn't involve 3d modeling).

I would think you could implement what you want fairly straightforwardly in threejs.

In essence you're dealing with materials, geometry, and lighting. three.js would let you handle this fairly straightforwardly using PBR materials, geometry, and image-based lighting. You'd essentially wire some controls to your three.js scene and you're done.

You could prototype it in the three.js editor. Some things aren't going to work out of the box (e.g. refraction) but you can get remarkably close to photorealistic rendering in real time with PBR shaders, HDRI image-based-lighting, and so on.

(As for Wordpress — I wouldn't use it for this, but I think it's a pretty solid (free) product these days. I'd certainly trust it over bespoke PHP code.)
 
Back
Top