Solved

how to create a floorplan w/ changing room colors

Posted on 2009-04-01
7
717 Views
Last Modified: 2013-12-12
I have a property that I would like to show which units are available through a colored floorplan. I did this with a parking lot once and was able to slice up the whole parking lot into images for each space, this was ok, but seemed slow. My question is. could I use css  to highlight portions of an image to be yellow (available) or grey (occupied). or white really If I could just highlight the vacant units that would be great.
Really just looking for theory on how one might do this. I have a mySQL database, and some knowledge of PHP.
As you can see on the image the units aren't always square, so this could be a factor.

Another thought is to use the room labels as the indicator for occupancy. for example:
102 could be black text inside of a yellow box if it was vacant, or maybe no box, and just the text color is changed.

Thinking out loud here:
Could I have a <div> tag for the floorplan that had the image as a background image and then <divs> for each unit layered on top of that image? Can I draw a shapes other than squares using css.

Is this a lost cause?
floorplan.gif
0
Comment
Question by:adrake9
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 10

Accepted Solution

by:
cyberstalker earned 250 total points
ID: 24042263
It is possible to do this by using a background-image and stack elements with background-colors on top of them. However, since you can only make squares this can get messy quickly.

Another option is to use GD or imagemagick. With this you can alter the image with php before you send it to the client.

Another option, and the one i would prefer is to use canvas or SVG. Canvas is a way of scripting images in javascript. SVG is an XML format for images.
0
 
LVL 5

Assisted Solution

by:prokvk
prokvk earned 250 total points
ID: 24042294
You cannot draw shapes other than rectangles via CSS. I guess the less difficult would be the way of drawing different texts, according to vacancy .. You can do so using PHP's image drawing capabilities (the GD library):

http://sk.php.net/manual/en/book.image.php

It's really quite simple. You'll have to code through the management of coordinates tho :P
0
 
LVL 2

Author Comment

by:adrake9
ID: 24042482
The image would be far more complex than the one I chose, it happens to be an old mansion that we rent out the offices. about 30 in total w/ 4 floors. If I did it w/ image draw or svg would this be done as the page loaded based on the query?
0
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
LVL 10

Expert Comment

by:cyberstalker
ID: 24042627
That depends. You can make it so that the image is created on-the-fly dynamically. Nothing stops you from saving the image files you create however to use them on the next request.
0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24047799
Using CSS for text is a better option with less of efforts and headache..
Define the class for each pattern and call it. As simple as that.
0
 
LVL 2

Author Comment

by:adrake9
ID: 24086867
cyberstalker -
sorry it took so long to get back. I'd like to wrap this up today. I've been nosing around on all of the recommended methods to try and determine what is best for my application. if I were to use canvas w/ javascript would I have complete browser compatability? are there any limitations to that particular method as well as the svf? the gd way seems like a good way to do it also, if I'm correct in thinking i could would load the background image first and then (based on the results of the database) draw the colored overlay. then merge the 2 and output the final version. This may be a different question but would it be able to overwrite the orginal file, so I'm not creating a new file every time a tell the database that a unit is vacant/occupied? Any help is appreciated.
-a
0
 
LVL 2

Author Closing Comment

by:adrake9
ID: 31565467
any tutorials?
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

710 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question