Solved

HTML5 Canvas Drawing

Posted on 2013-06-22
16
576 Views
Last Modified: 2013-07-17
Hi

I have created 2 cicles using canvas and JS. Example is here:
https://www.app-cessories.co.uk/canvas/zoom/demo/

How can i make a line that connects to the 2 circles?

Also, when i zoom in how can i maintain quality without the circles and text becoming pixelated? Does canvas not create vector style graphics?

Thanks
0
Comment
Question by:coolispaul
  • 10
  • 6
16 Comments
 
LVL 33

Assisted Solution

by:Slick812
Slick812 earned 500 total points
Comment Utility
greetings   coolispaul, , I am responding here because no one else has, your first question - "How can i make a line that connects to the 2 circles?"  In the source code for that Page you use Two Canvas areas,  id="myCanvas"  and  id="myCanvas2"  , Since you have two diferent canvases, you can NOT draw (lines or anything) between these on areas that are NOT a canvas, using canvas javascript methods, also you can not draw on both canvases with a single javascript canvas reference like - var canvas, this canvas can not draw on var canvas2. I would ask , why do you have two different canvas drawing areas, with the same exact thing on each one. I would think it would be better to have only one canvas that's twice as wide, and draw two circles on that one?

you next say -  " maintain quality of the the circles and text without becoming pixelated? "
The canvas does use "vector image methods" to Draw on the canvas, but unlike the SVG image, but once the draw is finished, the canvas is NOT dynamic (changeable) in a vector draw methods, it is a web page raster (pixel position) user view output, BECAUSE the browser does NOT remember any of the draw operation, used to make changes to a canvas. Unlike a web page SVG image which has ALL of the draw definitions defined (remembered) in the SVG file.
The   jquery.panzoom.js was designed for raster images zoom, so you get a resize that's pixelated, there is NO memory in the browser or the panzoom.js of the previous canvas drawing operations, to do the drawing again at a different scale.

what you will need to do is have a "drawing function" with a "Scale" input to erase and redraw the canvas operations at a different magnitude for a "Zoom" method -
function drawCircle(scale) {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
canvas.fillStyle = "rgb(128,128,128)";
canvas.fillRect (0,0,canvas.width, canvas.height);
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70 * scale;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
}

Open in new window

0
 

Author Comment

by:coolispaul
Comment Utility
thanks slick812.

I've decided to use SVG because i need to access each drawn element individually. I think SVG will be easier to do this than canvas?

I have created a version here:
https://www.app-cessories.co.uk/canvas/zoom/demo/paultest3.html

If you hover over the top left circle you will see a hover effect - how can i make this circle sit on top of all others when hovered over? (this will apply to all circles when hovered).

Essentially im trying to achieve the attached graphic with zooming and panning...
example of what im trying to create
Thanks
0
 
LVL 33

Assisted Solution

by:Slick812
Slick812 earned 500 total points
Comment Utility
???, I can not explain to you the many involved factors, methods, and opportunities available in the recent browser implementation of the SVG image.
I took time to learn several things in SVG, but due to the different Browser support of different things in SVG, I did not use SVG very much.
I am disappointed that for some reason you are still trying to use the jquery panzoom thing, in the SVG , , there is the SVG   viewBox="0 0 600 490"   which can be used to change rendering to a different dimensions or portions,, essentially a way to do Zooming for the entire SVG image view (using javascript for "mouse events" like click a button).
In your <svg> image you do not even have a closing TAG for as </svg>, you use the same color red for the line as the circle, so you can not even tell if the line placement or length is correct or not. I see three circles defined, but only see two circles in your SVG view page, although there is a mouse over Larger circle, I do not really see how that is done using the SVG methods, I guess you used some Jquery mouse over javascript and CSS transform, , It works, but does not strike me as SVG methods.
Here is a page about doing mouse overs in SVG -
http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

To me, I do not think the SVG was created for the browser properly, as it is a wacky mix of "vector drawing operations", DHTML, CSS, and javascript, not supported by all browsers in the same way. Since I already knew  vector drawing operations, DHTML, CSS, and javascript, I could create some "on click" and "mouse drag" SVG images (these are in the Browser as JUST an Image (SVG image) NOT as an Image in a web page.
you can add a SVG image to a web page with -
<img src="images/clickme.svg" width="962" height="695" />
and have the "code separate" for the page and image, And use the SVG image in more than one web page.

you ask - " circle sit on top of all others when hovered over?" , In my firefox it is ONTOP, and is over BOTH of the smaller circles, but this PopUp circle is from javascript, where you can set the ZINDEX, however, I am not sure about using ZINDEX to reposition the various SVG elements from a javascript point of view, sorry I have not tried that.

you have a <foreignObject > which is labeled as a "hoverText", but I never see any text as "Lorem ipsum dolor sit amet, consectetur adipiscing elit." so this is not working in my firefox browser.

there is also a SVG transform( ) which can be used in a javascript function INSIDE the <svg></svg> tag, You might can use it on the entire image or just certain elements or groups, here is a copy of just one function I have inside a SVG image -
<script type="text/ecmascript"><![CDATA[
function addBlock(evt){
	if (blkNum > 4) return;
	var newG = doc.createElementNS(svg_ns, 'g');
	newG.setAttribute('id', 'mmBlk'+blkNum);
	var newRec = doc.createElementNS(svg_ns, 'rect');
	newRec.setAttribute('id', 'mmRec'+blkNum);
	
	newRec.setAttribute('x', '1');
	newRec.setAttribute('y', '1');
	newRec.setAttribute('width', '55');
	newRec.setAttribute('height', '32');
	newRec.setAttribute('fill', 'yellow');
	newRec.setAttribute('stroke', '#a00000');
	newRec.setAttribute('stroke-width', '2');
	newG.appendChild(newRec);
	var newText = doc.createElementNS(svg_ns, 'text');
	newText.setAttribute('id', 'mmTex'+blkNum);
	newText.setAttribute('x', '4');
	newText.setAttribute('y', '20');
	newText.setAttribute('font-size', '9');
	var textCont = doc.createTextNode("mind block"+blkNum);
	newText.appendChild(textCont);
	newG.appendChild(newText);
	var newLine = doc.createElementNS(svg_ns, 'line');
	if((blkNum & 1)==1) {
		newLine.setAttribute('x1', '55');
		newLine.setAttribute('y1', '1');
		newLine.setAttribute('x2', '78');
		newLine.setAttribute('y2', '-26');
		} else {
		newLine.setAttribute('x1', '1');
		newLine.setAttribute('y1', '1');
		newLine.setAttribute('x2', '-23');
		newLine.setAttribute('y2', '-26');
		}
	newLine.setAttribute('stroke', '#a00000');
	newLine.setAttribute('stroke-width', '2');
	newG.appendChild(newLine);
	newG.setAttribute('transform', 'translate('+xt+','+yt+')');
	xt+=154;
	sBody.appendChild(newG);
	++blkNum;
	if (blkNum==3){
		yt = 163;
		xt = 115;
		}
	}
]]></script>

Open in new window

0
 
LVL 33

Assisted Solution

by:Slick812
Slick812 earned 500 total points
Comment Utility
You seem to be kinda lost in doing the SVG XML image format, so here is some code I did for an SVG Image FILE
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgRoot1" width="460" height="260" viewBox="0 0 460 260" onload="initJS(evt)" version="1.1" baseProfile="basic">
<title>Circles</title>
<rect id="sframe" x="1" y="1" width="458" height="258" fill="#f8f0e6" stroke="#00d"/>
<g id="body-content">
<script type="text/ecmascript"><![CDATA[
var svg_ns = "http://www.w3.org/2000/svg"
var doc,pop;

function initJS(evt){
var target = evt.target;
doc = target.ownerDocument;
pop = doc.getElementById("pop1");
//pop.setAttribute('visibility', 'hidden');
}

function dopop(od) {
if(od) {
pop.setAttribute('visibility', 'visible');
//pop.setAttribute('transform', 'translate('+-121+','+41+')');
pop.setAttribute('transform', 'scale(1.5) translate('+-138+','+26+')');
}else{
pop.setAttribute('visibility', 'hidden');
pop.setAttribute('transform', 'translate('+0+','+0+')');
}
}
]]></script>

<defs>
  <defs>
  <style type="text/css"><![CDATA[
  .popup{font-family:comic sans ms,arial,sans-serif;}
  .ning { fill: #b9b; stroke:#3a3; }
  .ning:hover {fill: #3a3; stroke:#b9b;}
  ]]></style>
  </defs>
</defs>
<text font-size="20" stroke="none" fill="#a00000" x="150" y="20" >Circles Display</text>
<line stroke-dasharray="4, 2, 2, 2" x1="98" y1="15" x2="148" y2="15" style="stroke:red;stroke-width:2"/>
<line stroke-dasharray="4, 2, 2, 2" x1="278" y1="15" x2="328" y2="15" style="stroke:red;stroke-width:2"/>

<circle id="cir1" class="ning" cx="73" cy="100" r="28" stroke-width="2"/>
<circle id="cir1" class="ning" cx="160" cy="160" r="32" stroke-width="2" onmouseover="dopop(1)" onmouseout="dopop(0)"/>
<line x1="73" y1="100" x2="160" y2="160" style="stroke:red;stroke-width:3"/>

<g id="pop1" class="popup">
<circle id="cir0" cx="298" cy="62" r="30" fill="#fed" stroke="#999" stroke-width="2"/>
<text id="mmTex0" font-size="9" stroke="none" fill="#000000" x="271" y="64">various Info</text>
</g>
</g>
</svg>

Open in new window

Copy and save this code as a TEXT file with the .svg extention, , I used the file name of "circles.svg"
drag this file into the address bar of the FireFox browser, like you are opening an .html file. and then do a Mouse Over for the two purple circles.
Warning, other browsers especially Internet Explorer do NOT do svg as well or as consistant as FireFox.
Please notice that this is a wacky mix of "vector drawing", XML, CSS, DHTML and javascript.
Ask questions if you need more info.
0
 

Author Comment

by:coolispaul
Comment Utility
Hi Slick812

That looks cool and you have been really helpful.
I have made another demo here http://www.app-cessories.co.uk/canvas/zoom/demo/test3.html

Im trying to create the attched graphic. do you know how i could create the outer circles easily? There would always be 27 circles on teh outside which create one big circle

circles
Thanks
0
 
LVL 33

Assisted Solution

by:Slick812
Slick812 earned 500 total points
Comment Utility
OK I looked at your page code for test3.html , and I can not say that it looks good, and it certainly does not have the pan buttons working. your SVG circles seem to have no order or purpose, you do have a rather useless mouse over for the circles, but at least the mouse over works, but you show some sort of "CLOSE" on the mouse over, which seem improper and is certainly useless.
I will not help you with the code work on that page, the DHTML, the CSS and especially SVG code are not at all correct or coordinated. The CSS has too many height:100% ,  most of them are useless and some are not good. You have some fundamental irregularities , for instance in the <svg > Tag you have -
style="width:980px; height:768px" height="100%"
WHY do you have a style in this? ? you define the svg width and height with the svg width and height parameters, and to increase the blunder you also have height="100%", which spec do you beleive the browser will use? the height="100%"  or the height:768px"  ? ?
also in the SVG you have a number of <g> , but the <g> is completely useless UNLESS you have it do something or give it an ID and use the ID to change it modify something.
I really can not abide your use of the Jquery panzoom.js for a SVG image, the SVG already has a javascript to pan and zoom any element OR the entire drawing, like this -
var dwn=0, lft=0, scl=1.0;

function doDown() {
var bd = doc.getElementById("body-content");
dwn += 5;
var str = "scale("+scl+")";
bd.setAttribute('transform', str+' translate('+lft+','+dwn+')');
}

Open in new window


But I guess you do not know about that?

as to your last question - "do you know how i could create the outer circles easily?", , well you really have NO BASIS in the code for your svg circles, since you do not have the first two inner circles, and no lines at all. so any advice I give could not be used. There is a trigonometric math with the SIN and COS to get a an X value with the SIN, and a Y value with the COS. which you could apply to a Radius measurement, but since you have nothing to get even an estimate for the radius, so this seems non functional?
function doSinCos() { 
var deg = 360 / 27;// get the Degrees for each segment of circle
var sin = deg*Math.PI/180; // change the degrees to radians
var cos = Math.cos(sin); // get COS for the Y multiplier
sin = Math.sin(sin); // get SIN for the X multiplier
document.getElementById("info1").innerHTML=deg+" degrees, cos= "+cos+", sin= "+sin;
}

Open in new window

if I have time, I may try and do some code for a SVG javascript transform, not so much for you,but for me,  just to see how to get it to work. .

I did NOT FIND the SVG image to be useful when I explored it a couple of years ago, because of the very lousy scrambled and inconsistent support in the major browsers. Although HTML5 and CSS3 is now supported in more browsrs, you really should, at this early stage, test your test3.html in all the major browsers (chorme, firefox, safarie, IE) and see how it does.
0
 

Author Comment

by:coolispaul
Comment Utility
Hi Slick

Yeah i agree its not fool proof but it really is just a quick experiment before i build it to better standard. i.e the heights etc in stylesheet...


This is my latest veriosn that i have tidied up a bit:
http://www.openwateronline.co.uk/NDI/interface/demo/

the map contains the controls for panning/zooming.

I will try your advice for panning and zooming as yes i wasnt aware of this.


The outer circles are my problem at the moment.... Getting the x/y positions. Each small circle has a radius of 40px.

I will test in all browsers then - i havent seen any issues in chrome or FF or safari tho..

Again, thanks for your help so far - your very helpful...
0
 

Author Comment

by:coolispaul
Comment Utility
Hi Slick

Could you elaborate on your doSincos function?

how can i use this to get picel values of X and Y and then position the 27 circles?

Thanks
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 33

Expert Comment

by:Slick812
Comment Utility
Yea that looks much better, and works much better, although the mouse overs do Work, they have NO Helpful functioning for this AT ALL, I looked at your map.gif image, and you will never get that big Grey Information Circle functioning with the way you do this, that big grey circle is NOT a transform of the mouse-Over circle, it is a completely different Information circle, which you do not seem to have the skills to do. I like the redish MAP navigator, however if I click the UP arrow I expect the whole Image to move UP, but it goes down? I looked at your code for the <!-- outer circles --> If I were you I would NOT use the  transform= on these circles, this will give you terrible problems on any mouse over Transform that you might try on these, I would think that just setting the cx and cy would be easier that the transform matrix calculations? ? I have trouble getting why you have the Idea of the pan and Zoom for this, but I guess it's more obvious on the finished show.

OK, , , I spent alot of time on the following code work, for my own education, maybe you can use some of it, I only made 4 circles, but they look in better alignment than your first level circles, . ,  I have a center circle that you need to Click On, the other circles do the same useless Transform of the circle it's over, I only did that because you had that, but I would NOT use it for an Info presentation. The center "Click Me" will show what I consider to be a more useful way to show an Info Pop-Up.
<!doctype html>
<html lang="en"><head><title>Circles 3 Fan Outs</title>
<style>
.moved{position:relative;width:830px;height:650px;overflow:hidden;background:#f99;margin:4px auto;border:3px dotted #000;}
</style>
</head><body bgcolor="#e3f7ff">
<div style="text-align:center;">
<h2>Use an SVG Image to Fan Out Circle and change view Point</h2>
<input type="button" value=" bigger " onclick="doZoom(1);" /> . <input type="button" value=" smaller " onclick="doZoom(0);" /><br />
<input type="button" value=" move down " onclick="doPan('down');" /> . <input type="button" value=" move up " onclick="doPan('up');" /> . <input type="button" value=" move right " onclick="doPan('right');" /> . <input type="button" value=" move left " onclick="doPan('left');" /> 
<br /><input type="button" value=" reset " onclick="clearr();" />
<div class="moved">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg1" width="830" height="650" viewBox="0 0 830 650" version="1.1" onload="initJS(evt)" baseProfile="basic">
<g id="imgDisplay">
<rect id="bg" x="1" y="1" width="828" height="648" fill="#f8f0e6" stroke="#00d"/>
<script type="text/ecmascript"><![CDATA[
var svg_ns = "http://www.w3.org/2000/svg"
var doc=null, imgDis=null, down=0, left=0, scal=1.0;

function initJS(evt){
var target = evt.target;
doc = target.ownerDocument;
imgDis = doc.getElementById("imgDisplay");
//pop.setAttribute('visibility', 'hidden');
}

function doZoom(big) {
if(big) scal += 0.3; else {if (scal < 0.6) return; scal -= 0.3;}
var str = "scale("+scal+")";
imgDis.setAttribute('transform', str+' translate('+left+','+down+')');
}

function doPan(direc) {
switch(direc) {
  case "down": down += 10; break;
  case "up": down -= 10; break;
  case "right": left += 10; break;
  case "left": left -= 10; break;
  default: return;
  }
var str = "scale("+scal+")";
imgDis.setAttribute('transform', str+' translate('+left+','+down+')');
}

function clearr() {
down=0, left=0, scal=1.0
imgDis.setAttribute('transform', 'scale(1.0)');
}

function doTrans(sho, grp, x1, y1) {
var elem = doc.getElementById(grp);
if (sho) {
  x1 = -(x1/2);
  y1 = -(y1/2);
  elem.setAttribute('transform', 'scale(2.0) translate('+x1+','+y1+')');
  elem.setAttribute('transform', 'scale(2.0) translate('+x1+','+y1+')');
  } else {
  elem.setAttribute('transform', 'scale(1.0)');
  }
}

function addPopUp(x1,y1,txt){
var newG = doc.createElementNS(svg_ns, 'g');
newG.setAttribute('id', 'popu1');
if(x1<415) x1 += 70; else x1 -= 70;
if(y1<325) y1 += 70; else y1 -= 70;
var newCir = doc.createElementNS(svg_ns, 'circle');
newCir.setAttribute('id', 'pCir1');
newCir.setAttribute('cx', ''+x1);
newCir.setAttribute('cy', ''+y1);
newCir.setAttribute('r', '62');
newCir.setAttribute('fill', '#aaaaaa');
newCir.setAttribute('stroke', '#777777');
newCir.setAttribute('stroke-width', '2');
newG.appendChild(newCir);
var newText = doc.createElementNS(svg_ns, 'text');
newText.setAttribute('x', ''+x1);
newText.setAttribute('y', ''+y1);
newText.setAttribute('font-size', '11');
newText.setAttribute('text-anchor',"middle");
var textCont = doc.createTextNode(txt);
newText.appendChild(textCont);
newG.appendChild(newText);
x1 += 28;
y1 -= 45;
var newRec = doc.createElementNS(svg_ns, 'rect');
newRec.setAttribute('x', ''+x1);
newRec.setAttribute('y', ''+y1);
newRec.setAttribute('width', '12');
newRec.setAttribute('height', '12');
newRec.setAttribute('fill', '#dd0000');
newRec.setAttribute('stroke', '#990000');
newRec.setAttribute('stroke-width', '1');
//=function(elmt1){return document.all[elmt1];}
newRec.onclick = function(){
  var drp = doc.getElementById("popu1");
  imgDis.removeChild(drp); 
  }
newG.appendChild(newRec);
x1 += 6;
y1 += 10;
var newText = doc.createElementNS(svg_ns, 'text');
newText.setAttribute('x', ''+x1);
newText.setAttribute('y', ''+y1);
newText.setAttribute('font-size', '11');
newText.setAttribute('text-anchor',"middle");
newText.onclick = function(){
  var drp = doc.getElementById("popu1");
  imgDis.removeChild(drp); 
  }
var textCont = doc.createTextNode('X');
newText.appendChild(textCont);
newG.appendChild(newText);
//newG.setAttribute('transform', 'translate('+xt+','+yt+')');
imgDis.appendChild(newG);
}

]]></script>

<text font-size="18" stroke="none" fill="#a00000" x="2" y="18" >Circles Fan Out in Threes</text>
<line x1="309" y1="286" x2="415" y2="325" stroke="#999999" stroke-width="4"/>
<line x1="550" y1="286" x2="415" y2="325" stroke="#999999" stroke-width="4"/>
<line x1="415" y1="436" x2="415" y2="325" stroke="#999999" stroke-width="4"/>
<radialGradient id="radiGld" r="52.7" gradientUnits="userSpaceOnUse">
  <stop  offset="0" style="stop-color:#f8f0b8"/>
  <stop  offset="1" style="stop-color:#daba68"/>
</radialGradient>

<g id="center1" onclick="addPopUp(415,325,'This is to Inform you')">
<circle fill="url(#radiGld)" stroke"#d4b464" cx="415" cy="325" r="36" stroke-width="2"/>
<text id="txCn" font-size="15" stroke="none" fill="#c00000" x="415" y="330" text-anchor="middle">Click Me</text>
</g>
<g id="lev1a" onmouseover="doTrans(1,'lev1a',309,286)" onmouseout="doTrans(0, 'lev1a',0,0)">
<circle fill="#eaca78" stroke="#d4b464" cx="309" cy="286" r="36" stroke-width="2" />
<text id="tx1a" font-size="15" stroke="none" fill="#c00000" x="309" y="290" text-anchor="middle">Level 1 a</text>
</g>
<g id="lev1b" onmouseover="doTrans(1, 'lev1b', 520,286)" onmouseout="doTrans(0, 'lev1b', 0,0)">
<circle fill="#eaca78" stroke="#d4b464" cx="520" cy="286" r="36" stroke-width="2" />
<text id="tx1b" font-size="15" stroke="none" fill="#c00000" x="520" y="290" text-anchor="middle">Level 1 b</text>
</g>
<g id="lev1c" onmouseover="doTrans(1, 'lev1c', 415,436)" onmouseout="doTrans(0, 'lev1c', 0,0)">
<circle fill="#eaca78" stroke="#d4b464" cx="415" cy="436" r="36" stroke-width="2" />
<text id="tx1c" font-size="15" stroke="none" fill="#c00000" x="415" y="440" text-anchor="middle">Level 1 c</text>
</g>
</g>
</svg>
</div>
</div> onmouseover="doTrans(1, 'center1', 415,325)" onmouseout="doTrans(0, 'center1', 0,0)"
</body></html>

Open in new window


I paint a "background" with a border thats the size of the SVG work area, I always do this in development, so I can SEE the work area and know if the containers and drawings are with in the work area. I have placed ALL of the javascript Inside of the SVG image code, Why, because to keep code organized I try and place the code in the "section" of the work  where it is used.

And it I were you and you are going to use Jquery, then I would NOT use the SVG, SO - since this depends on CSS3 anyway, you now can create a DIV with the same width and height (40)  and use  border-radius:20px; to produce a div look Circle, then you can make DIV circles and position them as absolute in a container DIV that you can use that  jquery.panzoom.js  thing on. And use the Jquery to do all kinds of Pop-Ups.
0
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
you ask - "Could you elaborate on your doSincos function?"
I could but if your math skills do not immediately recognize the math factors for trigonometric  calculation, then I can not teach you trigonometry. However this is not an uncommon calculation problem, you can find examples in a web search, OR ask another question here in EE, maybe in the "Math" department. The thing about programming SIN and COS, is that a Circle has 4 different "Quadrants" so you can not use the same javascript for all four quads.
0
 

Author Comment

by:coolispaul
Comment Utility
Hi Slick

Thanks again for a thorough response.

Why would you not use SVG?
If i used HTML and border radius would the circles scale properly on zoom?
also, would they not have a rectangular dimension? (as in pixels) - its just the border radius that makes it appear circular?

You quote:
"If I were you I would NOT use the  transform= on these circles, this will give you terrible problems on any mouse over Transform that you might try on these, I would think that just setting the cx and cy would be easier that the transform matrix calculations"

I agree but i had difficulty knowing how to calculate the X and Y position of each circle. I found a JS called "Raphael" that allowed me to create the ring of circles and this script applied a transform to each circle that positioned them. (the script i used is below)
Do you know a method i could use to find out X and Y coordinates for each of teh 27 circles instead of applying transfornms?



 window.onload = function () {
                var r = Raphael("holder", 960, 960),
                    angle = 0;
                while (angle < 360) {
                    //var color = Raphael.getColor();
                              //alert(color);
                    (function (t, c) {
                                    //alert(c);
                        r.circle(170, 170, 40).attr({stroke: '#e5e6e', fill: c, transform: t, "fill-opacity": .4}).click(function () {
                            s.animate({transform: t, stroke: c}, 2000, "bounce");
                        }).mouseover(function () {
                            this.animate({"fill-opacity": .75}, 500);
                        }).mouseout(function () {
                            this.animate({"fill-opacity": .4}, 500);
                        });
                                    
                                    //var l = r.path("M480 480L90 90").attr({fill:'#ff0000'});
                        //alert(t);
                                    
                    })("r" + angle + " 480 480", "#e5e6e5");
                    angle += 13.33;
                              
                }
0
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
OK,  you say - "would they not have a rectangular dimension? (as in pixels) - its just the border radius that makes it appear circular? " You know this, and what you say is true, but The actual functioning in the operations and display will depend what is done (mouse events) and other things, so this may make a difference. My Point was that mixing the jquery and SVG will take a more complex route than just using the regular jquery methods, for <div> and jquery.

I am out of time and effort on this question, I looked at the code for  Raphael, and It has absolutely NO code operatives in it that calculates the transform matrix, ,  it looks like it is done in other code from this function call   ("r" + angle + " 480 480", "#e5e6e5"), there is Nowhere in this that any change happens to the  "t"  variable , which is used here -  transform: t

I have already responded to this - "Do you know a method i could use to find out X and Y ?" before, but again, No, I do not, sorry. But you have other mathematical  factors (potential problems) to add math to you calculations, you have to coordinate the 3 levels of outer ciecles, and also do the lines, if you think the third level 27 circles this is difficult, wait till you try and do the 81 connecting lines in offset math to use the 9 locations of the second level circles. Normally you would go around and take the position of the circles (cx="415" cy="325") and draw a line between the centers and draw the circles AFTER to cover the lines, but if you only have the  transform matrix definitions to use, you can not do that, but maybe this Raphael can do all of that for you, coordinate the 3 levels of circles and draw all of the lines for you. LOL.

Since you did not mention the code I spent time on, I will likely not do much more for this, you seem to be stuck in the methods you use, and my comments or code does not seem to make much difference, I am glad to help and I did learn something for the SVG, even though I may never use it, also, I have not seen anyone else here at EE respond to any SVG or canvas questions much at all, except to recommend some "Canvas" or "SVG" code library's or addons used like "panzoom.js", but they had not used them much. You might consider using a AddOn for the SVG?

I looked at you code and Image again, and you use a very unnecessary method for a Link with some text, as -
<foreignObject id="hoverText" x="10" y="30" width="100" height="100" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="display: none;" class="circle1">
<body xmlns="http://www.w3.org/1999/xhtml">
<a href="close">Close</a>
<p style="color: #ffffff; font-size: 5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="" class="popup"></a>
</body>
</foreignObject>// The body tag is not needed here if this is in a HTML with a body tag

if you are writing the code, you can use this -
<a xlink:href="http://www.google.com/"><text font-size="14" stroke="none" fill="#000000" x="2" y="18" >Click for Google</text></a>
it's the proper syntax for a click-able link to a new web page in SVG

as far as your mouse over "PopUp", since you seem to have no clue how to do this in SVG methods, and get an Info circle with changing text and an close button and a web site link, Pleas try and do a Regular non-svg jquery PopUp with the Round Borders, the PopUp has NO interaction with the SVG, and jquery can display it over top of any and all HTML-SVG elements, and place it at the cursor or element position, it may not work, but it is easier for you to do.

I was curious about doing the grey Info popUp in your image, so I redid the code for my addPopUp( ) function , I added Muti-Line Text info, and a changeable web Link-
function addPopUp(x1,y1,txt,href){
if(pUp) return;
txt=txt.split('|');
var tlen = txt.length;
var newG = doc.createElementNS(svg_ns, 'g');
newG.setAttribute('id', 'pop3');
if(x1<415) x1 += 70; else x1 -= 70;
if(y1<325) y1 += 70; else y1 -= 70;
var Enew = doc.createElementNS(svg_ns, 'circle');
Enew.setAttribute('id', 'pCir1');
Enew.setAttribute('cx', ''+x1);
Enew.setAttribute('cy', ''+y1);
Enew.setAttribute('r', '62');
Enew.setAttribute('fill', '#aaaaaa');
Enew.setAttribute('stroke', '#777777');
Enew.setAttribute('stroke-width', '2');
newG.appendChild(Enew);
var offs= (11*tlen)/2;
var ny=y1-4;
if (tlen>1){ny-=(offs-7); if((tlen&1))ny+=3;}else ny+=6;
for(var i=0;i<tlen;++i){
Enew = doc.createElementNS(svg_ns, 'text');
Enew.setAttribute('x', ''+x1);
Enew.setAttribute('y', ''+ny);
ny+=13;
Enew.setAttribute('font-size', '11');
Enew.setAttribute('text-anchor',"middle");
var textCont = doc.createTextNode(txt[i]);
Enew.appendChild(textCont);
newG.appendChild(Enew);
}
x1 += 1;
y1 -= 49;
Enew = doc.createElementNS(svg_ns, 'g');
Enew.setAttribute('id', 'kill');
Enew.onclick = function(){
  var drp = doc.getElementById('pop3');
  imgDis.removeChild(drp);
  pUp=0;
  }
var elm2 = doc.createElementNS(svg_ns, 'circle');
elm2.setAttribute('cx', ''+x1);
elm2.setAttribute('cy', ''+y1);
elm2.setAttribute('r', '7');
elm2.setAttribute('fill', '#e80000');
elm2.setAttribute('stroke', '#880000');
elm2.setAttribute('stroke-width', '1');
Enew.appendChild(elm2);

elm2 = doc.createElementNS(svg_ns, 'line');
elm2.setAttribute('x1', ''+(x1-3));
elm2.setAttribute('y1', ''+(y1-3));
elm2.setAttribute('x2', ''+(x1+3));
elm2.setAttribute('y2', ''+(y1+3));
elm2.setAttribute('stroke', '#ffffff');
elm2.setAttribute('stroke-width', '2');
Enew.appendChild(elm2);

elm2 = doc.createElementNS(svg_ns, 'line');
elm2.setAttribute('x1', ''+(x1-3));
elm2.setAttribute('y1', ''+(y1+3));
elm2.setAttribute('x2', ''+(x1+3));
elm2.setAttribute('y2', ''+(y1-3));
elm2.setAttribute('stroke', '#ffffff');
elm2.setAttribute('stroke-width', '2');
Enew.appendChild(elm2);
newG.appendChild(Enew);

Enew = doc.createElementNS(svg_ns, 'a');
Enew.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', href);

y1 += 97;
var elm2 = doc.createElementNS(svg_ns, 'circle');
elm2.setAttribute('cx', ''+x1);
elm2.setAttribute('cy', ''+y1);
elm2.setAttribute('r', '8');

elm2.setAttribute('fill', '#f3e800');
elm2.setAttribute('stroke', '#baa800');
elm2.setAttribute('stroke-width', '1');
Enew.appendChild(elm2);

elm2 = doc.createElementNS(svg_ns, 'line');
elm2.setAttribute('x1', ''+(x1+3));
elm2.setAttribute('y1', ''+y1);
elm2.setAttribute('x2', ''+(x1-3));
elm2.setAttribute('y2', ''+(y1+3));
elm2.setAttribute('stroke', '#a000df');
elm2.setAttribute('stroke-width', '2');

Enew.appendChild(elm2);
elm2 = doc.createElementNS(svg_ns, 'line');
elm2.setAttribute('x1', ''+(x1+3));
elm2.setAttribute('y1', ''+y1);
elm2.setAttribute('x2', ''+(x1-3));
elm2.setAttribute('y2', ''+(y1-3));
elm2.setAttribute('stroke', '#a000df');
elm2.setAttribute('stroke-width', '2');
Enew.appendChild(elm2);
newG.appendChild(Enew);
imgDis.appendChild(newG);
pUp=1;
}

/// Use it like this in writing the SVG image code -
<g id="lev1c" onmouseover="addPopUp(415,436,'You can Go to the|infamous site GOOGLE,|if you \'Click\' the Link >|that\'s right down below \\/|this fake information |very long message!','http://www.google.com')">
<circle fill="#eaca78" stroke="#d4b464" cx="415" cy="436" r="36" stroke-width="2" />
<text id="tx1c" font-size="15" stroke="none" fill="#c00000" x="415" y="440" text-anchor="middle">Level 1 c</text>
</g>

Open in new window

for addPopUp(x1, y1, txt, href) the parameters are - (x1 center of the Circle as cx="415"), (y1 center of the Circle as cy="436"), (txt, is the info text, delimited with a | for each new line), ( href web addy to set the link too)

you really need to "group together" your circles and the text on then in a <g> tag with an ID
0
 
LVL 33

Accepted Solution

by:
Slick812 earned 500 total points
Comment Utility
I was on this site -
http://code.google.com/apis/ajax/
lookin for code to use, and I saw a google "Gauge" widget thing, and it uses a SVG image created on their server to display a round gauge. I looked at the SVG code they used, and found out some useful things about their "Version" code for the SVG inside a web page. It appears that the svg <text> (and others) can use many of the CSS without using a style designation (like font-family). Also since they are now using a SVG, it looks like they think that the SVG is now useful for web pages, so my conclusion about not using the SVG was a couple of years old and is now out of date, although IE still seems to be behind on a few SVG features.

here is some code I got from the google thing, which I changed to do a "resize" with the container <div>, so it changes size, if you change the DIV width and height. In code below, there are Two Gauges, one is size 138px, and the other is size 360px;, but the <svg> code in both is Identical.
<div style="width: 138px; height: 138px; border:1px dotted #00c;">
<svg width="100%" height="100%" id="svgGauge" viewBox="0 0 196 196" version="1.1" style="overflow: hidden;">
<g id="gauge">
<circle cx="97.5" cy="97.5" r="88" stroke="#333333" stroke-width="1" fill="#cccccc"></circle>
<circle cx="97.5" cy="97.5" r="78" stroke="#e0e0e0" stroke-width="2" fill="#f7f7f7"></circle>
<text text-anchor="middle" x="98" y="79" font-family="arial" font-size="18" stroke="none" stroke-width="0" fill="#333333">Speed</text>
<text text-anchor="start" x="60" y="140" font-family="arial" font-size="12" stroke="none" stroke-width="0" fill="#333333">0</text>
<text text-anchor="middle" x="98" y="50" font-family="arial" font-size="12" stroke="none" stroke-width="0" fill="#333333">50</text>
<text text-anchor="end" x="136" y="140" font-family="arial" font-size="12" stroke="none" stroke-width="0" fill="#333333">100</text>
<path d="M32.67970032514485,110.99301544627414L25.421889250160945,112.43668382919348M60.99902248089444,42.62412382065051L56.887802756549384,36.471248689611684M135.0009775191055,42.62412382065047L139.11219724345054,36.471248689611635M163.32029967485516,110.99301544627414L170.57811074983906,112.4366838291935" stroke="#666666" stroke-width="1" fill-opacity="1" fill="none"></path>
<path d="M56.13927855375639,139.86072144624362L45.67409819219549,150.3259018078045M43.30633167533181,75.34514080398671L29.63291459416476,69.6814260049834M97.99999999999999,38.8L97.99999999999999,24M152.69366832466818,75.3451408039867L166.3670854058352,69.68142600498336M139.86072144624367,139.86072144624356L150.32590180780457,150.32590180780446" stroke="#333333" stroke-width="2" fill-opacity="1" fill="none"></path>
<text text-anchor="middle" x="98" y="161" font-family="arial" font-size="14" stroke="none" stroke-width="0" fill="#000000">MPH</text>
  <g id="pointer">
  <path d="M167.13818384165964,87.04958744718382C98.8103305289084,103.11622560428282,76.67602177136116,103.99967103302649,76.27085650690697,101.44155823088508C75.86569124245277,98.88344542874367,97.1896694710916,92.88377439571718,167.13818384165964,87.04958744718382" stroke="#c63310" stroke-width="1" fill-opacity="0.7" fill="#dc3912"></path>
  <circle cx="97.5" cy="97.5" r="11" stroke="#666666" stroke-width="1" fill="#4684ee"></circle>
  </g>
</g>
</svg>
</div>
<div style="width: 360px; height: 360px; border:1px dotted #00c;">
<svg width="100%" height="100%" id="svgGauge" viewBox="0 0 196 196" version="1.1" style="overflow: hidden;">
<g id="gauge">
<circle cx="97.5" cy="97.5" r="88" stroke="#333333" stroke-width="1" fill="#cccccc"></circle>
<circle cx="97.5" cy="97.5" r="78" stroke="#e0e0e0" stroke-width="2" fill="#f7f7f7"></circle>
<text text-anchor="middle" x="98" y="79" font-family="arial" font-size="18" stroke="none" stroke-width="0" fill="#333333">Speed</text>
<text text-anchor="start" x="60" y="140" font-family="arial" font-size="12" stroke="none" stroke-width="0" fill="#333333">0</text>
<text text-anchor="middle" x="98" y="50" font-family="arial" font-size="12" stroke="none" stroke-width="0" fill="#333333">50</text>
<text text-anchor="end" x="136" y="140" font-family="arial" font-size="12" stroke="none" stroke-width="0" fill="#333333">100</text>
<path d="M32.67970032514485,110.99301544627414L25.421889250160945,112.43668382919348M60.99902248089444,42.62412382065051L56.887802756549384,36.471248689611684M135.0009775191055,42.62412382065047L139.11219724345054,36.471248689611635M163.32029967485516,110.99301544627414L170.57811074983906,112.4366838291935" stroke="#666666" stroke-width="1" fill-opacity="1" fill="none"></path>
<path d="M56.13927855375639,139.86072144624362L45.67409819219549,150.3259018078045M43.30633167533181,75.34514080398671L29.63291459416476,69.6814260049834M97.99999999999999,38.8L97.99999999999999,24M152.69366832466818,75.3451408039867L166.3670854058352,69.68142600498336M139.86072144624367,139.86072144624356L150.32590180780457,150.32590180780446" stroke="#333333" stroke-width="2" fill-opacity="1" fill="none"></path>
<text text-anchor="middle" x="98" y="161" font-family="arial" font-size="14" stroke="none" stroke-width="0" fill="#000000">MPH</text>
  <g id="pointer">
  <path d="M167.13818384165964,87.04958744718382C98.8103305289084,103.11622560428282,76.67602177136116,103.99967103302649,76.27085650690697,101.44155823088508C75.86569124245277,98.88344542874367,97.1896694710916,92.88377439571718,167.13818384165964,87.04958744718382" stroke="#c63310" stroke-width="1" fill-opacity="0.7" fill="#dc3912"></path>
  <circle cx="97.5" cy="97.5" r="11" stroke="#666666" stroke-width="1" fill="#4684ee"></circle>
  </g>
</g>
</svg>
</div>

Open in new window

the google developers left out all of the "NameSpace" crap in their <svg> tag, I thought that the namespace was necessary for svg, but it works in firefox and chrome, so I can leave it out.

I also saw a CSS Hover for a svg group, which may can be useful for you? anyway I did another circles thing web page to see if I could do some different methods for the SVG, since I may start to use svg now.
This uses a NON SVG method to Zoom and Pan the container <div> and so the SVG changes size and position with the container DIV. Code for a web page below-
<!doctype html>
<html lang="en"><head><title>NON SVG Zoom-Pan</title>
<style>
body{background:#e7fbff;}
.sgvWrap{position:relative; width:452px; height:452px; overflow:hidden; background:#faa; margin:10px auto; border:3px dotted #000;}
.svgMove{position:absolute; top:0px; left:0px; width:450px; height:450px; border:1px dashed #0bb;}
.doPop{font-family:arial;}
.doPop g{visibility:hidden;}
.doPop:hover g{visibility:visible;}
</style>
</head><body>
<h2>NON SVG Zoom-Pan</h2>
<input type="button" value=" bigger " onclick="doZoom(1);" /> . <input type="button" value=" smaller " onclick="doZoom(0);" /><br />
<input type="button" value=" move down " onclick="doPan('down');" /> . <input type="button" value=" move up " onclick="doPan('up');" /> . <input type="button" value=" move right " onclick="doPan('right');" /> . <input type="button" value=" move left " onclick="doPan('left');" /> 
<br /><input type="button" value=" reset " onclick="clearr();" />
<div class="sgvWrap">
<div id="mover" class="svgMove">
<svg width="100%" height="100%" id="svgGauge" viewBox="0 0 450 450" version="1.1" style="overflow: hidden;">
<g id="imgDisplay">
<rect id="bg" x="1" y="1" width="448" height="448" fill="#fcf3e9" stroke="#00d"/>
<text font-size="16"  font-weight="bold"stroke="none" fill="#a00000" x="2" y="18" >NON SVG mover</text>
<g id="centerC" class="doPop">
<circle cx="225" cy="225" r="36" fill="#eaca78" stroke="#d4b464" stroke-width="2"></circle>
<text id="txC" font-size="14" stroke="none" fill="#c00000" x="225" y="228" text-anchor="middle">the Center</text>
  <g id="pop1">
  <circle cx="225" cy="225" r="62" fill="#aaaaaa" stroke="#777777" stroke-width="2"></circle>
  <text font-size="13" stroke="none" fill="#000000" x="225" y="219" text-anchor="middle">Information text</text>
  <text font-size="13" stroke="none" fill="#000000" x="225" y="237" text-anchor="middle">Google link below</text>
  <a xlink:href="http://www.google.com/"><text id="txL" font-size="12" stroke="none" fill="#dd00ee" x="225" y="272" text-anchor="middle">google</text></a>
  </g>
</g>
<g id="topC" class="doPop">
<circle cx="80" cy="80" r="36" fill="#eaca78" stroke="#d4b464" stroke-width="2"></circle>
<text id="txC" font-size="14" stroke="none" fill="#c00000" x="80" y="83" text-anchor="middle">top Circle</text>
  <g id="pop2">
  <circle cx="80" cy="80" r="62" fill="#aaaaaa" stroke="#777777" stroke-width="2"></circle>
  <text font-size="13" stroke="none" fill="#000000" x="80" y="71" text-anchor="middle">Link below goes</text>
  <text font-size="13" stroke="none" fill="#000000" x="80" y="89" text-anchor="middle">to the YaHoo page</text>
  <a xlink:href="http://www.yahoo.com/"><text id="txL" font-size="12" stroke="none" fill="#dd00ee" x="80" y="130" text-anchor="middle">yahoo</text></a>
  </g>
</g>
</g>
</svg>
</div>
</div>
<script>/* <![CDATA[ */
var down=0, left=0, scal=1.0;
var mover = document.getElementById("mover");

function doZoom(big) {
if(big) scal += 0.3; else {if (scal < 0.6) return;
  scal -= 0.3;}
var size1 = scal*450;
mover.style.width = size1+"px";
mover.style.height = size1+"px";
}

function doPan(direc) {
switch(direc) {
  case "down": down += 30; break;
  case "up": down -= 30; break;
  case "right": left += 30; break;
  case "left": left -= 30; break;
  default: return;
  }
mover.style.top = down+"px";
mover.style.left = left+"px";
}

function clearr() {
down=0, left=0, scal=1.0
mover.style.width = "450px";
mover.style.height = "450px";
mover.style.top = "0px";
mover.style.left = "0px";
}
/* ]]> */</script>
</body></html>

Open in new window

this does a pure CSS mouse over Hover for the two circles, to show a big grey information circle, that has a click link on it.
0
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
I saw some JS code for the Get Points around a circle using the MATH SIN and COS, they just used Radians and so the circle did not have to be divided in quadrants.

 I did a modified version and sure enough it works for the stuff you need here, it's the   makeCircles(numCir, radius, offX, offY, offDegree, id)   function , the  numCir is the Number of circles (3,9,27 for yours), , the radius if the "from center of circle" distance in SVG measure, ,  the offX, offY  is the POINT(X,Y) for the center of the circles in SVG measure, ,  the  offDegree  is a plus or minus "degrees" to ofset rotate the circles, ,  the id is the group ID for the different levels.-
<script>
function makeCircles(numCir, radius, offX, offY, offDegree, id) {
var radanNum = (Math.PI*2) / numCir;
offDegree *= Math.PI/180;
var tolt = 0, si=0,co=0, Gtxt="", Ttxt="";

for (var i=0; i < numCir; ++i) {
  tolt= (i*radanNum)+offDegree;
  si=(Math.sin(tolt)*radius)+offX;
  co=(Math.cos(tolt)*radius)+offY;
  Gtxt='&lt;g id="'+id+i+'" class="cirClass"&gt;<br />';
  Ttxt='&lt;text font-size="14" stroke="none" fill="#c00000" x="'+si.toFixed(1)+'" y="'+(co+2).toFixed(1)+'" text-anchor="middle"&gt;'+id+i+'&lt;/text&gt;<br />&lt;/g&gt;<br />';
  document.write(Gtxt+'&lt;circle cx="'+si.toFixed(1)+'" cy="'+co.toFixed(1)+'" r="36" fill="#dcb264" stroke="#00b264" stroke-width="1"&gt;&lt;/circle&gt;<br />'+Ttxt);
  }
}


document.write("<hr>");
makeCircles(3, 100, 400, 400, 3, 'lev1c'); // draw is 800 wide and tall, with a 400x400 center
document.write("<hr>");
makeCircles(9, 235, 400, 400, 3, 'lev2c');
document.write("<hr>");
makeCircles(27, 360, 400, 400, 3, 'lev3c');
</script>

</body></html>

Open in new window


place this code at the end of your web page, after you change the radiouses, and offX, offY, id to your specs,
for each circle it will render on your web page -

<g id="lev3c26" class="cirClass">
<circle cx="335.4" cy="754.2" r="36" fill="#dcb264" stroke="#00b264" stroke-width="1"></circle>
<text font-size="14" stroke="none" fill="#c00000" x="335.4" y="756.2" text-anchor="middle">lev3c26</text>
</g>

for the three functions above, it will render all 39 outer circles (no center circle) in the code you can copy and paste into your  SVG code
0
 

Author Comment

by:coolispaul
Comment Utility
Hi Slick

Thansk for all your great answers - i'll utilise these to create my version and will show you once complete..


Thansk again
0
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
thanks for points. glad I could help, but Make No Mistake the use and code for the SVG is a relatively new thing , and the browser display has quite a bit different rendering requirements than than the W3 specs would have you believe ( like the namespace specs, which can be used for "namespace" integration , but unnecessary otherwise ). It is a crazy and (to me) ill-matched combination of WEB TECH. to have a web vector image.
Please do some web (Google) searches for SVG code and tutorial examples, to get different options and opinions about coding web vector images with javascript, and spend some time in using and changing the examples, until you understand what can be done with SVG-javascript and the thousands of options you have to use with this thing. Please reconsider using the Jquery, for an easy code, you really need to understand the mechanics of javascript to have the base thinking necessary to do complex things like you need to do here. so much of your javascript code here was not even close to being effective for the task you wanted to do, and the jquery seemed to be a crutch, that you did not benefit from. Complex code operations absolutely need understanding and experience for you to do subtle and efficient work.
Good Luck !
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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 …

763 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

11 Experts available now in Live!

Get 1:1 Help Now