Solved

Drawing Shapes in HTML5

Posted on 2013-12-27
10
397 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
[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
  • 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 53

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
Industry Leaders: 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!

 
LVL 53

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
 
LVL 53

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 53

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

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTML5 storage and web apps 11 113
ASP.net Markup for Sub Menu 2 65
Link Anchor Not working 9 67
Merge two Google Chrome Bookmark files or convert Excel list into an HTML file 3 76
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
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 purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

752 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