Flash web application for setup & control of a home automation system

We need a flash web application that displays a house, like this one: [url removed, login to view] with rooms that 'grow' and 'shrink' when you hover over them, and icons the user can move around and click on to display 'control pads' with buttons to control the device.

You will retrieve the configuration for the house by getting the configuration settings in JSON format with a simple http get, like this: [url removed, login to view] As the user changes things, like repositioning lights, adding rooms, and so on, you will create a new JSON string with the new or modified data and submit with an HTTP post.

## Deliverables

We make a home automation product for controlling devices like lights, thermostats, security sensors, cameras, etc. ? Our product is basically a wi-fi access point running embedded Linux and our software (on top of OpenWrt). ? Our current user interface is html and javascript. ? They are hosted on our product with a lightweight htttp server. ? You can usually see a copy of our application running here:? <[url removed, login to view]>? ? (although sometimes we take it down for demos), and a demo video of our product at [url removed, login to view]

The user interface does 3 things: 1) It retrieves the current configuration of the home automation system, which is basically a list of rooms, scenes, devices, etc., and allows the user to modify the configuration (add rooms, add scenes, etc.). ? It retrieves the configuration with a simple HTTP get, and submits the new configuration with a simple HTTP post ? and 2) It allows the user to control his devices, like turning them on or off, changing the temperature. ? The control is done with simple HTTP get's where you pass the commands on the URL. ? 3) In the background, every 20 seconds or so, it gets the current status of all the devices in the home, also with a simple HTTP get.

We want to re-do the user interface in Flash so it looks nicer and is simpler to use. ? We do not have a flash programmer in house. ? But we do have good C++ and Javascript programmers. ? The user interface will regularly 'expand'. ? For example, as we add support for new types of devices, like temperature sensors, motorized window drapers, etc., we need to be able to add new icons and new 'control pads' to control them.

Therefore we want the Flash application designed in a modular, extensable, and skinnable manner so that the scope of this work is to provide a basic user interface with a few simple controls, but that we can easily extend it to add new controls and to change the graphics.

Here is how the application works from an end-user point of view:

Refer to this page as an example: [url removed, login to view]

When the web page (or Adobe air) application is loaded, the user sees an empty house (just 1 big room inside). ? In the lower corner of the house is a '+' icon, which gives you a popup menu to add elements to the house. ? You can 'Add Floor', 'Add Room', 'Add Device', 'Add Scene'. ? The user clicks 'Add Room'. ? Now he has 2 rooms (2 squares side by side horizontally). ? The user can click in the 'title' area for the room to change the description, like 'Master Bedroom'. ? Now the user clicks 'Add Floor', and then he has 2 floors (as shown in [url removed, login to view]). ? The user can continue to add rooms and floors. ? In [url removed, login to view] there are 2 floors and 5 rooms (3 on the the first floor, 2 on the second floor). ? The user can re-arrange the positioning of the room by dragging the room's title bar. ? So he could move 'Master Bedroom' to the first floor, and so on, by dragging. ? The rooms resize automatically as you do. ? Now the user can click 'Add device' and a new device appears just outside the house. ? The user can drag this device to a room and it's position in the room is remembered. ? For example, it will stay in the upper left corner of the room. ? To control a device, the user can click on the device and a control pad appears beside the device. ? The control pad has some basic buttons in the middle, and also has slide out tabs along the left and right side for more advanced controls.

One thing that's not correct on [url removed, login to view] is that whenever you move your mouse is not in a room, the device icons are small and do not have any text on them. ? When you move your mouse into a room, that room grows larger occupying approx 75% of the space in the 'house', meaning the other rooms around it shrink. ? If, for example, there is only 1 floor, so all the rooms are lined up horizontally, then the effect would be like the application bar at the bottom of a Mac OS X, where as you move over an icon (or room in our case) it grows. ? So in this case, as you highlight a room, it becomes wide, and the rooms on either side become skinny, as you move your move over the edge of the wall into the room on the left, there's a fast 'snap' where the previously highlighted room shifts over quickly and becomes skinny, while the currently highlighted room becomes fat. ? If there are multiple floors, like in [url removed, login to view], then whatever floor is highlighted becomes tall, and the other floors are short, as well as the highlighted room being wide while the others are thin. ? When a room is highlighted, then all the icons in the room become larger, and the text description is visible under the icon. ? When an icon is clicked, it becomes larger still, and the control pad appears for that icon. ? So each icon has 3 sizes: 1) room is not active, 2) room is active, 3) icon is selected. ? Each icon also has multiple states which depend on the type of device. ? for example, if the icon is a light bulb, and the light is off, the icon is dark gray. ? If the light is on, it's bright yellow.

When you click an icon, the control pad has some basic buttons in the middle, but there are tabs along the left and right side which pop out some more advanced controls. ? Click the tab again to close the popout. ? Move the mouse outside the control pad and the icon becomes deselected and the control pad disappears. ? There are also some 'fixed' icons we'll have in the house at all times, each of which brings up a control pad as well. ? And we need to be able to embed flash video within the house. ? So, for example, when a control pad appears, there is a 'gray' video window with a play button, and when you click it, a video plays explaining how the control works.

That is what the end user sees. ? Here is what happens from the developer's perspective:

When the flash application loads you call a URL from the same IP which returns the system database in JSON format (simple, lightweight database). ? This is an example: [url removed, login to view]

Some of the data in the user_data is not relevant for the user interface. ? The "Room" part lists all the rooms. ? The "Section" part lists all the floors (you can see we have only 1 for now). ? So as the user adds sections, you create a new JSON string which our back-end engine will merge into the master user_data. ? For example, if the user adds a new floor "2nd level", you would, internally, create a string variable which looks like this:

"Section": {

? ? ? ? ? "PK_Section_2": {

? ? ? ? ? ? ? "Description": "2nd Level",

? ? ? ? ? }?

? ? ? }

Now, when the user adds a room to the existing section 1 called "Bedroom", and a new room to the new sectoin 2 called "Living room", your internal JSON string looks like this:

"Section": {

? ? ? ? ? "PK_Section_2": {

? ? ? ? ? ? ? "Description": "2nd Level",

? ? ? ? ? }?

? ? ? },

? "Room": {

? ? ? ? ? "Room_Num_3": {

? ? ? ? ? ? ? "Description": "Bedroom",

? ? ? ? ? ? ? "FK_Section": "1",

? ? ? ? ? },

? ? ? ? ? "Room_Num_4": {

? ? ? ? ? ? ? "Description": "Living Room",

? ? ? ? ? ? ? "FK_Section": "2",

? ? ? ? ? }?

? ? ? },

You can add your own JSON tags to store extra data the user interface needs. ? For example, to store the order of the rooms on a floor, you may add a tag "Order". ? When the user clicks a 'Save' button, you send your new JSON string in a POST variable to another URL. ? Our engine will merge the new JSON tags you added with the existing ones, and return back the new master user_data with your merges in place.

All the devices, or icons, are in the "Devices" JSON tag. ? As the user positions devices (icons) within the room, you should have your own JSON tag to store the relative position of the icon left to right (ie 0-100) and top to bottom (also 0-100). ? So "0,0" means the icon is in the upper/left most corner of the room, and 100,50 means it's on the right edge, halfway down. ? This way, by using relative values as the rooms stretch when they're highlighted, and you transmition from smaller to bigger icons, you can render everything in the correct place.

The JSON tag: "Category_Num" defines a hardcoded icon set for the device. ? So Category_Num 3, for example, is a light bulb, while 5 may be a thermostat. ? We will create the icons as we have graphics designers in house. ? The Category_Num determines which control pad appears when the user clicks on the device. ? In addition to 'devices', each room will also have 'scenes' and 'remotes'. ? These are identical in concept and use to devices, and they also have their own icons. ? It's just a different name, but the coding is exactly the same.

Periodically you call another URL which returns all the devices and their current states. ? Here is an example: [url removed, login to view]

This lists all the devices and the current status of the device. ? Each icon will have multiple states that it can be displayed in depending on the category. ? A simple on/off light switch, for example, only has 2 icons (a gray 'off' state, and a yellow 'on' state). ? This is tied to the state 'switch power'. ? In that example, device #13 has this:

? ? "state_17": {

? ? ? ? ? ? ? ? ? "service": "urn:upnp-org:serviceId:SwitchPower1",

? ? ? ? ? ? ? ? ? "variable": "Status",

? ? ? ? ? ? ? ? ? "value": "1"?

? ? ? ? ? ? ? },

That means the icon is shown 'yellow' as on (because value =1). ? If value=0, it would be gray, off.

Another device that is in the thermostat category, may have more complex states. ? For example, a thermostat (device #15) has a state urn:upnp-org:serviceId:HVAC_UserOperatingMode1 / ModeStatus, and teh current status "CoolOn" is displayed as a blue thermostat. ? 'HeatOn' is red, and so on. ? Again, we will create all the graphics, and we will work on expanding the device types. ? What we need is a framework.

Lastly, you'll see that each device also has one or more 'jobs', such as this:

? ? "Jobs": {

? ? ? ? ? ? ? "Job_5": {

? ? ? ? ? ? ? ? ? "id": "5",

? ? ? ? ? ? ? ? ? "name": "job#5 :conf_jh#5 (0x0x833280) P:40 S:4",

? ? ? ? ? ? ? ? ? "icon": "CONFIG",

? ? ? ? ? ? ? ? ? "comments": "Node already configured",

? ? ? ? ? ? ? ? ? "status": "4"?

? ? ? ? ? ? ? }?

? ? ? ? ? }?

The state of the jobs is shown as a "halo" disc around the icon (a circle around the icon). ? We will provide the formula, but, basically, if any job has a status of 2 or 3, the halo is red. ? If any job has a status of 1 or 5, the halo is blue. ? Otherwise the halo is not visible.

The scope of this project does not involve creating any of the graphics, nor all the control points. ? We will provide whatever graphic elements you need. ? Rather, the scope is create the 'framework', which we can build upon, and to create the nice animations in flash. ? You will create the Flash/ActionScript to handle resizing the rooms when they are highlighted, and resizing the icons, and popping up the control pads. ? But, it must be modular and extensible. ? For example, you can have an action script function that returns the control pad, like this:

GetControlPad(int Category)


switch(1) // Light

? ? return Light;

switch (2) // Thermostat

? ? return Thermostat;

// Add your own control pads here


You will be expected to create only 3 control pads: a Simple on/off light, a Dimmable light (which has a slider), and a thermostat. ? You will need to fully document how this process works so we can extend it to add more types.

We need a nice looking mockup, though not fully functional, to demostrate, as soon as possible (within 2 weeks). ? We would like the project finished in 6 weeks total. ? Include in your bid allowing 1 week of hand holding with our java script programmer to answer questions and help him get up to speed on how to extend his own controls. ? He has very limited knowledge of flash, but is a very seasoned java script, ajax, php developer. ? So we want the framework to be as complete as possible so that he can copy/paste to extend it as time goes on.

Habilidades: ActionScript, Adobe Flash, Ingeniería, MySQL, PHP, Gestión de proyectos, Arquitectura de software, Verificación de software, Web Hosting, Gestión de páginas web, Verificación de páginas web

Ver más: yellow jobs com, work that graphic designers does, works for graphics designers, works at home, work out of your home jobs, work out of the home, work out of home jobs, work of a developer, work from your home as web developer, work from home web developer jobs, work from home web developer, work from home type jobs, work from home software jobs, work from home security jobs, work from home programmers, work from home programmer, work from home org, work from home .net developer jobs, work from home jobs list, work from home java developer jobs

Información del empleador:
( 6 comentarios ) United States

Nº del proyecto: #2845645

10 freelancers están ofertando el promedio de $2146 para este trabajo


See private message.

$3825 USD en 45 días
(96 comentarios)

See private message.

$2040 USD en 45 días
(14 comentarios)

See private message.

$2125 USD en 45 días
(41 comentarios)

See private message.

$425 USD en 45 días
(16 comentarios)

See private message.

$2125 USD en 45 días
(6 comentarios)

See private message.

$510 USD en 45 días
(1 comentario)

See private message.

$637.5 USD en 45 días
(6 comentarios)

See private message.

$2550 USD en 45 días
(0 comentarios)

See private message.

$4675 USD en 45 días
(0 comentarios)

See private message.

$2550 USD en 45 días
(0 comentarios)