Solved

how to create a floorplan w/ changing room colors

Posted on 2009-04-01
7
712 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
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

758 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now