Flash Remote Control Editor

A flash web app that lets the user create a custom remote control layout, like for controlling a TV, by choosing a background image, and then positioning buttons on top of the image (play/pause/etc). There is no image manipulation or drawing--just placement. The remote control is saved into JSON format. Complete specs and mockups are attached. ## Deliverables (pdf is in accompanying .zip) OVERVIEW ------------ This is a flash web sites to allow users to layout buttons to create a universal remote control, for televisions and other AV Devices. The site must remain very simple. There will be no image editing or manipulation or drawing. The user simply picks an existing background image (PNG format) they can place buttons on it which are also PNG images. The extent of the drawing capability is to move or resize buttons and add text. The project is stored in JSON format. Following are the specs for the apps. Refer to the accompanying PDF, and enabled the viewing of bookmarks in the PDF. Each section below corresponds to a page in the PDF, and each page is given a bookmark name. When the page is loaded you will be passed these 3 arguments on the URL: &authcode=x&username=y&ip=z. The authcode is what you will pass back to our server when you want to save the project. The username will be saved within the project's JSON. The ip, which is optional, is to be saved for later. When the site first loads, fetch and store this static data, which you will use within the site: [login to view URL] or if that link doesn't work. Throughout the site if download1 (or sta1) doesn't work, use download2 (or sta2). A sample of a JSON project is here: [login to view URL] and when you save a project, this is what the output is. Then ask the user if he wants to create a new project were open an existing one, and then dispay the 'new' or 'open' dialogs below. Note that the mockups and the PDS or just a rough concepts to show what data belongs on the screen. It is not correctly formatted. For example on the open project page the boxes are not the same size and do not line up. It is up to you to lay it out properly, and just use the PDF to see the content and concept. NEW/SETTINGS --------------------- If the user clicks new while he has an existing project open, asking if he wants to save first . This dialog is what the user sees when he creates a new project by either clicking the new button or choosing new from the opening question, and it also comes up when he clicks settings to change the settings of this project. All this data will be stored in the JSON file when you save the project as top level json attributes (see sample above). Name of the project is freeform text and goes into the 'name' tag. Type of device is a pull down listing the contents of the 'types' json array in remote_data. Store the type ID number in the json as 'type'. When the user clicks ... next to primary code set, display a popup asking the user to pick a type. This is the same data as type of device and by default whatever type the user chose above should be chosen here. When the user chooses next, display an hourglass while fetching this URL: [login to view URL] where x is the id of the type. This will return an array of manufacturer id/manufacturer names. Have the user pick one and then display an hour glass wall fetching this URL: [login to view URL] where y is the manufacture a ID. This will return an array of codset id/codeset names. Ask the user to pick one. Display the type name, manufacturer name, codeset name in the box as shown. When saving, store the names and id's in the JSON file as 'cs_type_id', 'cs_type_name', 'cs_man_id', 'cs_man_name', 'cs_id', 'cs_name' (cs=codeset, man=manufacturer). For the aspect ratio, this is a pull down and display the contents of the 'aspect_ratio' tag from remote_data.json. If the user chooses 'new', display a popup with three text boxes: name, width and height, plus ok and cancel buttons. Display the name and width/height as shown. Therefore it is possible to have a aspect ratio you save in the json that doesn't exist in remote_data, in which case the aspect_ratio tag will be 0, but the name and width/height are still there. Allow the user to pick in a pull down one of the options in the 'themes' array. This gets saved in the json 'theme' tag. Fetch the codset from: [login to view URL] when the user clicks ok and display a busy hour glass while you are retrieving it. Store this data in memory we will need it later. The 'owner' is what was passed on the URL, and saves in the 'owner' tag. Collaborators is a freeform text box and when the user clicks on 'add', add it to the 'collaborators' array. The five input boxes each can hold an 8 character free form text name, which is saved in the 'panels' array. OPEN -------------- Display the aspect ratios from remote_data in the first list box just like you did on the new dialog box. If the user chooses one, other than the all which is the default, pass a ratio=x on all the URL's below to filter the results. If the user chooses a new aspect ratio after you have already displayed, say, projects by type, then refresh the list after the user chooses a new aspect ratio. When the dialog box first loads display an hour glass wall fetching this URL: [login to view URL] where x is the username you were passed on your URL. Display the list of projects in the input box. The down arrow just indicates that it is a scrollable list box so let the user scroll of there's more that will fit. If the user types in something in the projects by user box and clicks go, display an hour glass wall fetching this URL: [login to view URL] where x is the username he typed in. The projects by type pull down has the same list of types as on the new dialog. If the user chooses one display an hour glass while fetching this URL: [login to view URL] (where x is the type id). IMG ------ The pull down to the right of settings contains the five panels that the user specified in the new settings page. So should always be exactly five entries in this pole down and if the user has left some of the panels empty in the new settings dialog, just display the word 'panel #x' in the pull down. Each panel has its own background and buttons and zones on it. When the user clicks the 'img' button this is how he specifies the background image for what ever panel he has right now. Display thumbnails of the images in [login to view URL] and let the user click one, in which case the file name goes into the 'background' json tag for this panel. The user can also upload his own PNG image with the 'browse'. If he does this send the image to [login to view URL] This PHP page will return either "ERROR" if the upload failed or "OK: x" if the upload succeeded where X is the file name that you should put in the background tag. All the remote backgrounds are available at this URL: [login to view URL][filename] Note the image the user chose may not match the resolution he specifies on the new settings page. When displaying the image the scale it accordingly. You do not need to preserve the aspect ratio of the original image, in other words scale it exactly to the size the user specified in the settings. EDITOR ----------- The 3 'mode' buttons (select, +, test) our radio buttons, only one mode is selectable at a time. When the select mode is chosen, you will see what looks like 'Editor'. This is the background image plus any buttons already placed in the image and whenever button the user clicks on has standard stretch/resize boxes around it, or the user can click and drag to move the button around. Although zones should be shown with a square around them, as shown in the editor. Zones can contain an image, text, image and text or nothing. In the mockup you'll see the top button is text only, the word play, underneath it is a zone with no text or image, beneath that is a zone with an image only (pause icon), to the right if it is a zone with an image only and that zone is currently selected so the user can move in or resize it, and at the bottom is a zone with an image as well as text (+). The Nav pull down doesn't really have the word Nav in it; remember this pull down is just a list of the five panels the user specified in the settings. The 100% is for a zoom setting. 100% means that if the user chose a resolution of 320x240, then the image being displayed in the browser should also be 320x240. Remember that you always scale the background image. So if the background image was 800 by 600, and the users chosen resolution is 320x240, and he's at a 200% zoom, display the image as 640x480. When you are saving the coordinates of the zones to the JSON file, they should always be relative to the resolution, irrespective of the zoom and background image size. So if the resolution is 320 by 240, and I place a button in the lower right corner, that is 10x10 pixels, the position that you store in the JSON file will be x=310 y=230 width=10 height=10. It does not matter what the zoom is or the resolution or size of the background image or the background for the button. ADD_SINGLE -------------- When the user is in this mode, he can click and drag to draw a bounding area on the background and he sees a dotted box, just like trying a box with the select tool in paintbrush. If the user clicks rather than drawing a box, that is also OK, the width and height will be determined automatically based on the size of the image the user chooses. Display Add_Single dialog. This is how the user adds a single code to the box. The list of codes is from the [login to view URL] tag "codes". Display this same list in both of the boxes to the left. It is optional to choose a code in the box on the right, but the user must use a code from the box on the left. The codes will be stored in the tags 'code' and 'alternate' for the button. At the bottom left, display the name of the code set just like you did on the new settings page, like "DVD, Samsung, #5". The box should be checked by default, and if it is, then instead of display the full set of codes from the "codes" tag, display the codes retrieved in the beginning from [login to view URL] . This only affects the left box. The box to the right should always have the full set of codes from the codes tag. If the user clicks test, open this URL in the background: http://x:3480/data_request?id=ir&action=test&codeset=y&code=z where x is the IP that was passed to you on the URL, y is the codeset ID, and z is the code (ie PLAY). If you were not passed an IP on the URL, disabled the test button. The 'code' pull-down after Image: has the exact same list of codes from the "codes" tag, like the second box from the left. Whenever code is chosen in the box on the left should automatically be selected in the pull-down. The codes in the box on the left are a subset of all the "codes", so if "PLAY" is selected in the box on the left, select "PLAY" in the Image: pull-down. The button theme is the exact same pull-down on the new settings page, the difference is that here when the user changes something, what you do not save the new theme in the JSON. This is a temporary setting. In the image box, you will display the images from three different directories in this order: [login to view URL] [login to view URL] [login to view URL] Where THEME is the ID of the theme selected in the pull-down, CODE is what's selected in the image: code pull down. If the user changes either of those two pull-down then refresh the image picker. The user can type in any text in the text box, which may be multi-line. If the user clicks ... Display a popup to pick a font and size. Only include a couple standard fonts. Whatever font, font size and button theme the user selects on this page should be sticky so the next time he adds a new button those same values appear. When the user chooses OK hide the popup and display the button wherever the user clicked and if he typed in text dispay the text on top of the button. Remember that if the user clicked on a location rather than trying a box, then automatically calculate the width and height of the button based on the size of the image, otherwise scale the image to whatever size the button is. PNG's generally have an Alpha or transparent channel. Selecting an image is optional, so if the user just clicks to add a button rather than dragging to draw a square, and didn't add an image, just assume the width and height are 20,20. The user can always resize and the editor. ADD_MULTI --------------- If the user on checks the single code button when adding, then this means the user can pick multiple codes. So if the box is unchecked, instead of displaying the 'alternate' code list, let the user pick a code, click added, which adds it to the second list. The insert Pause pull-down should have the following values: 1 sec, 2 sec, 3 sec, 5 sec, 7 sec, 10 sec, 15 sec, 20 sec, 30 sec, 45 sec, 60 sec. Whenever the user selects an option from the pull-down add that Pause to the list. So, in this mockup, the user clicked the on code from the left, selected added, clicked the insert Pause pull down and chose one second, then selected the codes for digit 1, digit 2, and enter. Next to each code and pause is a delete to remove it from the list. The rest of the functionality is identical to the add single. Just store the codes in an array, instead of a single json object, as shown in the demo. The codes are stored in a "codes" array, and pauses are stored as: "P_x" where x is the number of seconds. See the sample json. TEST MODE -------------------------------- If the user changes the mode to 'test', then the editor appears like normal but every time the user clicks on a button open this URL in the background: http://x:3480/data_request?id=ir&action=test&codeset=y&code=z, like on the add button page, and if no IP was passed on the URL, disable the 'test' button. SAVE -------------- When the user clicks save post the json output in an 'output' post variable to: [login to view URL] where x is the activation code passed in on the URL. If the project to save successfully this page will return: OK: y, where y is the id of the new project. Store this id tag and if the user make more changes and clicks save again, add it to the URL like this: [login to view URL] so that the server knows to update the existing project rather than save a new one. Also if you open an existing project, it will always have a JSON tag 'ID' in it. Always pass this 'id' on the URL so it overwrites the existing project as well. If you do not get back an "OK:x" from the page then display to the user what ever message you did get back in an error popup. Chances are the message will be "ERROR: ACCESS DENIED", which means the user is not authorized to make changes to this project. Save as new works exactly the same way except that you never pass in the id= on the URL, so it's always added as a new project. So even if the user cannot say that by clicking the save button, he can always say that by clicking save as new. FINAL NOTES ---------------- Our programmers are still in the process of finishing all the .php pages in the backend. If one of the .php pages doesn't work as describes just send an e-mail and keep going on something else. Some of the directories with images are empty right now too. Some of the URL's may change, however the arguments, result codes, etc., will not, nor any of the data in the json document. This is all finalized already. Also, we're open to suggestions if you think of ways to improve the design or functionality. You could also have artistic liberty with the way that it looks and feels.