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
Solved

how to create a floorplan w/ changing room colors

Posted on 2009-04-01
7
715 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery slideToggle one div at a time instead of all independently 33 76
Help with PHP 13 27
Inserting data into database 10 35
Reference key in foreach loop 4 18
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

856 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