Product color configurator - basically a svg colorizer
- or -
Post a project like this$$
- Posted:
- Proposals: 8
- Remote
- #2145485
- Expired
Website Designer and Developer in PHP,Wordpress,Freekore Framework,Codingnigter,CSS,Jquery and Javascript
Chandigarh
Top rated PHP Web Development | WordPress | Magento | Drupal | OpenCart | PrestaShop | Joomla
Leicester
AI & Data Science Engineer | Nodejs | Ruby On Rails | AWS | GCP | Python | React | Angular |
Auckland
46739275902888416410507541088681211818721337602363363
Description
Experience Level: Intermediate
Estimated project duration: 1 - 2 weeks
We need a small webapp to support our sales team defining the colorscheme of our products.
Besic idea:
We'll be providing svg files for each of our vehicle types. The different colorizable svg-areas get some special tags to mark them as colorizable.
Then for each of these areas a colorpicker has to be generated for changing their color.
The techdemo we made used snapsvg for displaying an manipulating the image. "Workflow" here was the following:
1. Extract special tags
Snap.load(imagename, function (f) { f.selectAll('[inkscape\\:label^="color_"]')
2. Generate colorpickers for all of the extracted areas
3. Update the areas if the colorpicker has been updated
s.selectAll('[index^="' + el.id + '"]').attr({ fill: ralcolors[colorindex][2] });
Now we need you to transform this techdemo into a real product.
What has to be done?
- Provide some hierarchical functionality
vehicle parts are hierarchically organized
if a color in the upper level changes, all the parts beneth it should also change their color unless there is color defined
In this case "color_" is the keyword, the rest of the label defines the hierachy and the names of the parts
color_ base color for all vehicle parts
color_carbody base color for whole carbody
color_carbody_doors just the doors
color_carbody_doors_left just the left door
- Provide a "show/hide" functionality for optional equipment
optional equipment can also be colorized
optional equipment can also have subparts
optional equipment shall also be just select/unselectable
"magic keyword" could be "opt"
optcolor_carbody_specialequipment = optional colorizable part under the carbody hierachy
opt_carbody_specialequipment2 = optional non colorizable part under the carbody hierachy
- Provide some nice colorpickers based on "ral colors"
Only our predefined ral colors (and some other) can be chosen. Ral Colors are provided as json by us, e.g.:
["RAL 1000", "190-189-127", "#BEBD7F", "Grünbeige", "Green beige", "Beige vert", "Beige verdoso", "Beige verdastro", "Groenbeige"]
Colors shall be selectable/filterable by name (e.g. "1000", "beige") or picked by color
colorpickers should be organized hierarchical, name shall be extracted from the hierachy (e.g. carbody)
if there's a translation available (json will be defined and provided by us), this keyword should be translated accordingly (e.g. carbody -> DE:Karosserie)
languag shall be taken from the browser language
optional equipment shall be hideable by a checkbox
if optional equipment isn't colorizable, no color picker shall be shown/hidden
if optional euqipment isn't selected, the parts "under it" shall not be shown
- Provide upload/download functionality
svg should be "uploadable" to the webapp (no server upload, browser based with FileReader)
edited svg shall be "downloadable" again (to save the changes)
if a url parameter has been passed in (e.g. colorizer.html?image=test.svg) the image shall be automatically loaded from the server
if a url parameter has been passed there should be a "save" button sending the image to an webservice
- Provide a "color export" functionality to extract all the svg areas an their color name into a json files
if techically possible, this function should also be callable from node.js so that we can automate the colorextraction in our backbone
optional equipment (shown/hidden) should also be exported (isChecked=true/false)
- Provide zoomIn/zoomOut functionality for the svg image (mousewheel)
- Adopt everything accoring to the screen size (no mobile, just desktop/tablet)
So the basic idea is to store all the information in the svg file so the departmen can continue with its file based workflow (but now digital and not on paper).
The syntax or keywords in the svg files should be easy an human readable so our "low tech" staff can easyly manipulate/enhance it without much special knowledge (preferably within inkscape).
If you have got a better idea how to implement this (something else than "magic keywods" in the label), please let me know.
All the program logic shall be within static js files (no server side code).
Jquery and Bootstap shall be used, layout shall be customizeable by css
Code should be well structured and documented.
For the tech demo we used snapsvg, if you know a better svg library you are free to use it.
UI sketch is just a basic idea. Please provide your own design (Designer required?)
Besic idea:
We'll be providing svg files for each of our vehicle types. The different colorizable svg-areas get some special tags to mark them as colorizable.
Then for each of these areas a colorpicker has to be generated for changing their color.
The techdemo we made used snapsvg for displaying an manipulating the image. "Workflow" here was the following:
1. Extract special tags
Snap.load(imagename, function (f) { f.selectAll('[inkscape\\:label^="color_"]')
2. Generate colorpickers for all of the extracted areas
3. Update the areas if the colorpicker has been updated
s.selectAll('[index^="' + el.id + '"]').attr({ fill: ralcolors[colorindex][2] });
Now we need you to transform this techdemo into a real product.
What has to be done?
- Provide some hierarchical functionality
vehicle parts are hierarchically organized
if a color in the upper level changes, all the parts beneth it should also change their color unless there is color defined
In this case "color_" is the keyword, the rest of the label defines the hierachy and the names of the parts
color_ base color for all vehicle parts
color_carbody base color for whole carbody
color_carbody_doors just the doors
color_carbody_doors_left just the left door
- Provide a "show/hide" functionality for optional equipment
optional equipment can also be colorized
optional equipment can also have subparts
optional equipment shall also be just select/unselectable
"magic keyword" could be "opt"
optcolor_carbody_specialequipment = optional colorizable part under the carbody hierachy
opt_carbody_specialequipment2 = optional non colorizable part under the carbody hierachy
- Provide some nice colorpickers based on "ral colors"
Only our predefined ral colors (and some other) can be chosen. Ral Colors are provided as json by us, e.g.:
["RAL 1000", "190-189-127", "#BEBD7F", "Grünbeige", "Green beige", "Beige vert", "Beige verdoso", "Beige verdastro", "Groenbeige"]
Colors shall be selectable/filterable by name (e.g. "1000", "beige") or picked by color
colorpickers should be organized hierarchical, name shall be extracted from the hierachy (e.g. carbody)
if there's a translation available (json will be defined and provided by us), this keyword should be translated accordingly (e.g. carbody -> DE:Karosserie)
languag shall be taken from the browser language
optional equipment shall be hideable by a checkbox
if optional equipment isn't colorizable, no color picker shall be shown/hidden
if optional euqipment isn't selected, the parts "under it" shall not be shown
- Provide upload/download functionality
svg should be "uploadable" to the webapp (no server upload, browser based with FileReader)
edited svg shall be "downloadable" again (to save the changes)
if a url parameter has been passed in (e.g. colorizer.html?image=test.svg) the image shall be automatically loaded from the server
if a url parameter has been passed there should be a "save" button sending the image to an webservice
- Provide a "color export" functionality to extract all the svg areas an their color name into a json files
if techically possible, this function should also be callable from node.js so that we can automate the colorextraction in our backbone
optional equipment (shown/hidden) should also be exported (isChecked=true/false)
- Provide zoomIn/zoomOut functionality for the svg image (mousewheel)
- Adopt everything accoring to the screen size (no mobile, just desktop/tablet)
So the basic idea is to store all the information in the svg file so the departmen can continue with its file based workflow (but now digital and not on paper).
The syntax or keywords in the svg files should be easy an human readable so our "low tech" staff can easyly manipulate/enhance it without much special knowledge (preferably within inkscape).
If you have got a better idea how to implement this (something else than "magic keywods" in the label), please let me know.
All the program logic shall be within static js files (no server side code).
Jquery and Bootstap shall be used, layout shall be customizeable by css
Code should be well structured and documented.
For the tech demo we used snapsvg, if you know a better svg library you are free to use it.
UI sketch is just a basic idea. Please provide your own design (Designer required?)
Manuel M.
0% (0)Projects Completed
-
Freelancers worked with
-
Projects awarded
0%
Last project
14 May 2024
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
Manuel ,
Can you please share an example of the custom design you need ?
712420
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies