Interactive floorplan in HTML5

  • Posted:
  • Proposals: 8
  • Remote
  • #1244474
  • Expired
Martin K.Arnold G.Sudheer M.Tomasz J.Andrew K. + 3 others have already sent a proposal.
  • 0

Description

Experience Level: Expert
General information for the website: Highlight and show areas on a floorplan
Description of requirements/features: We require a developer who is skilled in HTML5 - HTML, CSS, JS and SVG to build an interactive floorpan from some adobe illustrator files we will provide. The end result should work something similar to this example http://tympanus.net/codrops/2016/04/13/interactive-3d-mall-map

But it will be used within an app called Showpad which can utilise html5. We have uploaded the example above into Showpad and it works fine. (https://help.showpad.com/customer/en/portal/articles/1819588-web-app-or-html5-files-guidelines?b_id=8536).

I have attached 3 images so you can see the three stages of interactivity we require. Note that on our version there is only one floor and we do not require it to rotate (the example I have supplied does rotate - we don't need this).

I have indicated below the 3 levels of interactivity required. It should make sense when you look at the images attached.

Level 1
-Full illustration with the ability to click on each room

Level 2
- When a room is clicked the others fade away and the selected room is shown bigger
- Room name and description appears
- Ability to click on certain elements/areas of the room

Level 3
- When an element/area is selected it is highlighted and brief description appears
Extra notes:

New Proposal

Login to your account and send a proposal now to get this project.

Log in

Clarification Board Ask a Question

  • Andrew K.

    yes, i've uploaded and tested the WebGL in showpad, but this wont let me put the link in here (rejected).

    Andy C.11 Aug 2016

    yep ok. Thanks.

  • Andrew K.

    ok, well that example took a few hours last night with a couple of SVG images i had laying around. let me know.

    Andy C.11 Aug 2016

    ok looks good. We will carry on with developments at our end and be in touch in a week or so. I'm off on holiday from today so one of my colleagues (Josh or Elliot) will take over this project and liaise with you etc.

    Andrew K.11 Aug 2016

    ok excellent, if you're going to use me, i can refine the operations at this end ready for slot in graphics and text? that way it would take a day or two from the point i receive the assets...

  • Andrew K.

    so you mean something like this? http://ksl.96.lt/

    Andy C.11 Aug 2016

    yes that's the sort of thing. We just want to give users the ability to access one of the four areas of the floor in more detail (either by zooming in or by the fact that the other three areas disappear when you click on the one you are interested in) and that there is then another zoom level where you can get more detail on specific elements/machines. Each would be supported with some text that describes what you are seeing.

  • Andrew K.

    so all the SVG assets are ready as components?
    placement is guided by the jpegs on the spec?
    all text descriptive items are ready and complete?

    Andy C.10 Aug 2016

    They will be. They are not yet. We expect to have everything finished at our end by Aug 22nd.

  • Andrew K.

    * what format are the images in currently?
    * is each image (item like machinery) to be zoomable and a descriptive text be shown for each?

    then i can cost this.

    Andy C.10 Aug 2016

    Images will be SVG.

    User will initially see the whole floorplan. There will be 4 areas that they can click on - in doing this, the area they have chosen gets highlighted (zoomed in a little) and the other areas fall away or are greyed out. Two of the four areas have no further "clickability" - i.e. there is no further level of detail to these two areas. The other two areas have an additional level of detail - you can click on a machine or other element and you get zoomed into that element. There are 9 of these elements that are zoomable (5 in one area and 4 in the other).

  • David B.

    Are you in a rush or flexible on deadline?

    Andy C.10 Aug 2016

    We need to get it finished by the end of August latest.

  • Andrew K.

    hi

    How detailed are your floorplans and how much zooming do you want?

    do you have the images seperately for the machinery, people, shelving etc., or are they all static images?

    Have you thought about performing this in Unity3D?

    what is your time frame and budget for this job?

    Many thanks

    Andy

    Andy C.10 Aug 2016

    There is only one floorplan. The first image I posted shows the whole floor plan. All the images can be supplied separately. No we've not thought about Unity 3D. The project needs to be completed by the end of August. Please just quote your best price for the work.