Solved

Drawing Shapes in HTML5

Posted on 2013-12-27
10
391 Views
Last Modified: 2013-12-28
I am currently creating an asp.net webpage diagram using images for rectangles, rounded rectangles and arrows.

Does HTML5 / CSS3 offer ways to display such graphics without resorting to images?

Any guidance on this would be appreciated.

Thanks!
0
Comment
Question by:codequest
  • 4
  • 4
  • 2
10 Comments
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 200 total points
ID: 39742892
Definitely. There are many offerings out there like this one showing how to make various shapes with css. Careful though. Not all effects work in all browsers.

http://css-tricks.com/examples/ShapesOfCSS/
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39742964
Do you want to supply a simple graphic image of what you are trying to achieve?
0
 
LVL 2

Author Comment

by:codequest
ID: 39743073
Sample attached.   Text would overlay the graphics.  The arrowheads might need to be larger.
diagram-sample.png
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 300 total points
ID: 39743113
Are you trying to create a flow chart or a one off just using css?  There are a number of charting options for jquery for instance if that is what this is for.  Otherwise, if just a one off image you can use TommyBoy's sample's.

There are going to be some slicker ways to do this, but here is something simple to digest http://jsbin.com/UcaDiMe/1/edit?html,css,output
#container{width:600px;}
#leftbox {
	width: 140px;
	height: 100px;
	background: gray;
    border-radius:30px;
    float:left;
   
}
.abc{
  font-size:40px;
  margin-top:20px;
  text-align:center;
}

#rightbox {
	width: 150px;
	height: 100px;
	background: gray;
    float:left;
}
#middle {
	width: 150px;
	height: 10px;
	background: black;
    float:left;
    margin-top:40px;
}
.def{
  font-size:40px;
  margin-top:-50px;
  text-align:center;
}

Open in new window

<!DOCTYPE html>
<html>
<head>

<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="container">
    <div id="leftbox"><div class="abc">ABC</div></div>
    <div id="middle"><div class="def">DEF</div></div>
    <div id="rightbox"><div class="abc">GHI</div></div>
  </div>
</body>
</html>

Open in new window


You may want to check these out too as an alternative
http://jsplumbtoolkit.com/demo/flowchart/jquery.html
http://www.joshwright.com/projects/flomojo-convert-text-to-flowchart
http://pranavon.net/jquery-plugin-for-building-flowcharts-and-workflow-blocks/
0
 
LVL 2

Author Comment

by:codequest
ID: 39743198
Thanks for the inputs.  The target is a dynamically drawn diagram. It has a very specific layout that it has to follow, so the Jquery flowchart programs would probably not work. Those are Very interesting though. It could be also that CSS is not a solution because ie8 does not support rounded border radius, although by app release date it may be feasible to say Ie8 is not supported. At any rate these are very good and eye-opening suggestions.

I guess one more requirement that i'm not sure how would work in CSS is that the diagrams need to be scalable, with a zoom slider, not just through browser Pinch and zoom. Any suggestions on that would be appreciated. Thanks!
0
Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 300 total points
ID: 39743507
If you are worried about pinch and zoom...you shouldn't be worried about ie8.  I wouldn't even worry about any ie lower then 10 at this point especially if this is the type of stuff you want to do.  

When I tested pinch and zoom on my phone, the above example worked fine.

Another option to consider is html canvas but take a little more thought.  https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes

The options I showed you with jquery might actually be easier to manage if you need to show relationships.  If what you want to show is static in that the 2 box's will always be in the same place but with different text, then that will work fine.
0
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 200 total points
ID: 39743615
Just playing with @padas's jsbin example.

Here's another version (with a css arrow head) that uses jQuery to make the diagram responsive to changes in the browser window size.

http://jsbin.com/UcaDiMe/3/
0
 
LVL 2

Author Comment

by:codequest
ID: 39743756
Thanks for the inputs.  These have been very educational, and I'm getting the sense I can accomplish what I want without using images.

There are two more requirements that I did not spell out (sort of buried them under the phrase "dynamically drawn".)
1)  the elements of the diagram may be re-positioned on the fly.
2)  the elements of the diagram may change size in relation to the other parts.

The raw information about size and position of all the diagram parts will be recalculated on the servers after any user action, sent to the browser via JSON and then translated into DOM.  It seems like I should be able to make the necessary CSS generation part of the translation from JSON into DOM.

Confirmation on that would be appreciated.  The rest I'm confident I can figure out from the examples that have already been provided.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 300 total points
ID: 39743775
You can change the elements size and position either by your own serverside code prior to the page being sent to the browser by updating the html and css or using client side js/jquery.   Positioning would be done via margin-left and margin-top and size by width and height.   You will need to develop your own formula as to how all of this works.  I think the easy part is done for you here.  The hard part is going to be translating what you actually need as far as size and position into some type of algorithm to meet your needs.
0
 
LVL 2

Author Closing Comment

by:codequest
ID: 39743808
Very helpful comments, all.  Thanks!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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 …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

912 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

20 Experts available now in Live!

Get 1:1 Help Now