Solved

Drawing Shapes in HTML5

Posted on 2013-12-27
10
396 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
NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

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

Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTML <font style="color:red"> 9 51
Is there any way to delete a Google Maps label? 7 25
Calculating percentage 2 27
Table header must be on top 2 22
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 discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
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 …

713 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