Solved

Drawing Shapes in HTML5

Posted on 2013-12-27
10
398 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
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

Database Solutions Engineer FAQs

In this series, we will discuss common questions received as a database Solutions Engineer at Percona. In this role, we speak with a wide array of MySQL and MongoDB users responsible for both extremely large and complex environments to smaller single-server environments.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

617 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