KEY TASKS: - client-side programming to generate real-time graphics from user input - load text-string format designs from, and save to, PostGreSQL database - design and produce 'gallery' facility to save & view other examples - turn dummy site provided into 100% W3C compliant site with above - provide simple password-protected admin area to update/delete abusive entries SUMMARY We need a highly skilled and reliable programmer to produce a fully functional 'Design-a-Tartan' web facility, closely based on the 5-tab coded dummy site provided. We will integrate this into our existing site, to let users design their own tartan patterns online, using colour pickers and sliders etc. (A tartan is a simple criss-cross pattern of coloured threads - e.g. 10 red, 4 blue, 8 yellow, etc.) Existing and new tartan patterns must be loaded from, and saved to, a database in our text string format. We will provide an Perl (server-side) script that converts these strings to PNG graphic. A key challenge is to devise and reliably implement a client-side method (using AJAX, Flash, or other client-side technologies) to display a tartan being designed with real-time feedback, in a choice of size/orientation configurations, perhaps in lower quality. The generation of a larger full-quality image on demand can use server-side perl coding. But making most graphic generation client-side in near real-time (i.e on mouse release) is important both for excellent user experience and to reduce server load. The site also requires multi-featured back-end database functionality, using PostGresQL. All main features are based upon reading and saving 'thread counts' (a simple text string). This will provide features like searching for and then reading-in tartans from our existing database, with design controls correctly pre-set. We also wish to have a 'gallery' where users can save, name, and tag their designs and explore other users' designs. You will need to design and code the site structure for this, fitting our design template. Most other features are fairly trivial, but must be provided in a web-ready format as specified. We are world-leading experts in tartans and can provide all information needed. It is important to us that this is produced to a high standard. There is no deadline, and no set budget. We would like it as soon and as economically as possible, but quality of work is most important. Our mockups are mostly web-ready. But there will be some need for you to help devise and design functional elements and layout, especially in the 'gallery' area. We expect to receive a fully functioning site with all the features shown or implied in our (clickable but not yet certified as validated) XHTML dummy site. This must work reliably in any mainstream browswer/platform configuration, with standards-compliant XHTML that passes the validator.w3.org test. Extra payments may be made for significant extra features we ask for after a contract is agreed. But all functionality reasonably implied by the design as presented should be assumed, whether or not it is specifically detailed here. DATA & RESOURCES We are providing * the semi-coded XHTML template * a 'threads.txt' data sub-set for testing * a 'colours.txt' database of 100 named RGB colour shades used in the thread counts * and a 'tartangenerator.pl' Perl script that creates .png tartan files from the thread counts. You may also wish to refer to the original rough mockups displayed on getafreelancer.com to help understand the intended functionality. MAIN TASK Tab 2 of the dummy site is where the main coding is required. Most functionality required should be intuitively obvious from the layout, but key aspects are described in more detail below. Users can (on the Homepage) either start with a 'blank sheet' or pre-load a thread count from three possible sources. If pre-loading, colour swatches and slider positions should pre-set themselves correctly. They can then use a combination of colour pickers, sliders, and other tools as shown to adjust the shades, sequence, and width (number) displayed. Further tools adjust the display's size, orientation, etc. These should all work in near real-time, modifying the displayed result by running the generation script as soon as any value is changed. A combination of AJAX and Perl or PHP scripts is required to let users: * pre-load saved thread counts, and pre-set the interface accordingly * pick and/or modify a set of colours, as per the full spec below * adjust their default counts by a choice of methods * adjust their sequence/order by dragging & dropping the sliders (with real-time visual feedback of repositioning) * update size, orientation, & repeat-pattern of the result displayed * run every change through the client-side tartan-design script and update result in real-time SECONDARY TASKS We wish to receive the site in a finished fully-functional form. So a variety of extra programming tasks are required to ensure all aspects of the template are tied in with this new scripting. These are mostly to do with calling or saving data to and from files, but includes functionality to save within a Gallery, and for logged-in users (only) to vote on designs there. * save all data in temporary and/or permanent files, as implied by interface * export designs by email in a format specified below * optionally share designs in a members' gallery (password-login required, which already exists on host site) * include administrative functionality for users to report abusive entries, with details emailed to an admin account, with a password-protected user-friendly interface to ignore or delete, either individually or in bulk. * etc. NOTES ON FEATURES Note: most of this is fairly simple integration work, all based on the same core programming above. This is not a comprehensive list; please ask if uncertain. Features available only to logged-in members -------------------------------------------- The primary hosting site has a (free) membership system. Some parts of this Design Your Own Tartan site will require users to be logged in to use. Please program the site with a login system for these features. We will then modify the code to work with our logins instead. Functions requiring login are: * Open Saved Design (Homepage) as designs are saved to member's account * All 'Save & Share' functions on Tab 3, except 'Print this Design' Tab 1: Choose Path ------------------ This should all be self-evident. You need only program very basic functionality for the 'STA Tartan' option meanwhile, as we will modify this later with a cut-down version of our own Tartan Finder querying the full data set. Tab 1b: Gallery etc. -------------------- At least one extra layout is needed for exploring the Gallery, with sub-screens for Popular designs, Recent designs, etc. and navigation routes through. Page-by-page browsing should be possible, and search facility for each would be useful. These can be fairly simple, but must enable navigation through what could in time be a large resource. Tab 2: Design Tartan (a) Pallette --------------------------------- NOTE: if the user has chosen to load a saved tartan (from their own saved list; from our existing list; or from the Gallery) then this page should appear pre-loaded in all details in all five main areas (My Pallette; My Threads; Modifying: Tartan Name; My Tartan Results; My Weaving Results). And IF they have loaded a tartan marked in our database with copyright information (threads.txt: column G) the message in Creating New Tartan should read "Copyright Tartan. We cannot weave this tartan unless you make significant changes to it". Clicking on the main Pallette should produce a Colour Picker with the 100 possible colours. Clicking on one of these will: 1. add it to an empty My Pallette space; 2. add a 'My Threads' slider, set to a default of 20 threads 3. add it to the 'My Tartan Results' display, parsed by tartangenerator.pl This behaviour repeats for each new colour chosen (except Step 1 if the colour has already been used). Users may choose a new colour each time from the main Pallette, or from their My Pallette list; If the same colour has already been selected, a clear text message should appear saying "You have already chosen this colour - why not pick it from the My Pallette list next time?". Beside the remove link, please add a 'change' link. This will change all instances of that colour in My Threads and in My Tartan Results. Tab 2: Threads -------------- The sliders must be programmed to 'drag & drop' up and down to re-arrange them in the list. This should include real-time visual cues to intuitively indicate their operation (e.g. e.g. ghosting/highlighting one when held, and a line appearing when holding one and hovering it over two others, to indicate where it will go if dropped at that moment). Modifying any slider can be done in two ways: pulling its 'knob' or typing into the number box to the right. Whichever the user does should change the other one too. Increments should only be allowed in steps of 2. If a user types an odd number into the text entry box, it should automatically step down to the next even number. Only 0-9 numerics should be allowed. Whenever the user changes a slider's state (and confirms by mouse release or Return/Enter) the tartangenetor.pl script should re-write My Tartan Results. This should be done on the user's local machine for fast response. Tab 2: Creating/Modifying Tartan -------------------------------- If the user has loaded a saved design, relevant details should appear here. The reset button should take it back to this originally saved state. Tab 2: My Tartan Results ------------------------ Sett (Pattern) Radio Buttons: if the user selects Small, it should divide the number of all Threads by 2 - i.e. now allowing single (odd numbered) threads instead of enforcing even numbers; similarly, if they choose Large it should multiply all Thread numbers by 2. If the user chooses the Diagonal (view bias) radio button, it should rotate the displayed tartan by 45 degrees, but not change any other settings. If the user chooses the Non-reversing (rare) radio button, it should set the design's Repeat (threads.txt column C) as "P" so that the Threads sequence does not reverse/mirror as normal but simply repeats. Tab 2: My Weaving Results ------------------------- This should be calculated from a small data table that we can modify to add new threads or adjust calculations. The initial settings are unimportant as we wlll adjust these later on. It is important that we can easily add new materials with different specifications to this list at a later date. Note that for a normal Symmetrical tartan (R in threads.txt Column C) the mirroring means that the total number of threads will be 2x the sum of all Threads sliders in 'My Threads'. Tab 3: Save this design ----------------------- Users must be logged-in to do this; if they are not logged-in the functionality should be greyed-out to emphasise the log-in function. If logged-in, users can name their design and save it to their member's account, with the Threads definition etc. being saved to a file. Please add an additional 'Notes' field (to be saved too) in which users can leave comments for themselves. Tab 3: Print ------------ Format a nicely laid-out page with the tartan design full-width and square. If already saved, the name given to it should appear as a heading. Tab 3: Share in Gallery ----------------------- Must be logged-in AND design must already be Saved above to do this; functionality greyed-out otherwise. If logged-in and Saved, then clicking Add adds this design with its name and keywords into a gallery database file for use in Tab 1. Tab 3: Email to Friend ---------------------- Must be logged-in. When Send button is clicked, return to same screen with clear message "Your [Untitled or/ Name] design was sent to [email address] with the message [message]. Allow repeat use to further addresses, but only one at a time. Please add checkbox option for 'Copy to Myself'. Tab 4 (Record): Exporting Data ------------------------------ When a user chooses the Consultancy option in Tab 4, they will be taken to purchase this 'product' like any other shopping item on the site. But we need data for their design to go with their order in the right format. Please program the feature meanwhile to export this data to a file. The format needed is: * The 'Name' they have given their design, on Tab 4 * Please add a 'Notes to the Reviewer' field to the layout, and output * The 'Threadcount' of their design (threads.txt column D) * The Pallette for their Threadcount (threads.txt column E) * The Repeat pattern of their design (threads.txt column C) * The Search string of their design (threads.txt column F) The Search string is simply the sequence of BasicColours (colours.txt column I) used in their design, without numbers etc. Tab 5 (Weave) ------------- Please leave content empty. We will populate this ourselves.