Jump to content

speedlearner

Members
 View Profile  See their activity

  • Posts

    19

  • Joined

  • Last visited

 Content Type 

Everything posted by speedlearner

  1. speedlearner
    Here is the hyperlink to the article I was reading: http://www.itk.ilstu.edu/faculty/javila/SVG/SVG_drawing1/elliptical_curve.htm
  2. speedlearner
    I don't understand the X-Axis-Rotation. One definition says it indicates how the ellipse is rotated relative to the current coordinate system. What do they mean by rotated? What do they mean by the current coordinate system?
  3. speedlearner
    I tried to combine XHTML and SVG in one of my latest projects. It worked until I started adding namespaces. Then I discovered the Namespace-based Validation Dispatching Language. I wasn't sure if it could be linked to the eXist database program. And if it can, how can I use it? By all means let me know.
  4. speedlearner
    I've isolated the problem. I created a new HTML document. SVG_Ellipse_1.html <html> <head> <title>SVG Ellipse</title> <link rel = "stylesheet" type = "text/css" href = "http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Ellipse.css"> </link> <script language = "javascript" src = "http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Ellipse_Test_2.js"> </script> </head> <body onload = "Setup()"> <svg id = "Image_Box"> <ellipse id = "My_Ellipse"> </ellipse> </svg> <input id = "My_Data" type = "text"> </input> </body> </html> Notice this document has no namespaces. I also created a new Javascript document. SVG_Ellipse_Test_2.js function Setup() { SVG_Data = new XMLHttpRequest(); SVG_Data.open("GET","http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Ellipse.xq", true); SVG_Data.onreadystatechange = function () { if (SVG_Data.readyState = 4) { Retrieved_Data = SVG_Data.responseText; Retrieved_Data = Retrieved_Data.split("*"); Attribute_List = ""; Coordinate_List = ""; for (Counter = 0; Counter < 8; Counter++) { Attribute_List = Attribute_List + Retrieved_Data[Counter] + "*"; Counter = Counter + 1; Coordinate_List = Coordinate_List + Retrieved_Data[Counter] + "*";} Attribute_List = Attribute_List.split("*"); Coordinate_List = Coordinate_List.split("*"); document.getElementById("My_Ellipse").setAttribute("cx", "100"); document.getElementById("My_Ellipse").setAttribute("cy", "100"); document.getElementById("My_Ellipse").setAttribute("rx", "30"); document.getElementById("My_Ellipse").setAttribute("ry", "80"); document.getElementById("My_Data").value = document.getElementById("My_Ellipse").getAttribute("cx"); } } SVG_Data.send(); } When I did this, everything worked fine. I will try to add namespaces to my html document in the next couple of days. Could namespaces cause my webpage not to work. And if so, why?
  5. speedlearner
    I changed a few things in my Javascript document. I removed the for next loop and replaced it with the following code: document.getElementById("My_Ellipse").setAttribute("cx", "100"); document.getElementById("My_Ellipse").setAttribute("cy", "100"); document.getElementById("My_Ellipse").setAttribute("rx", "40"); document.getElementById("My_Ellipse").setAttribute("ry", "40"); I verified that the computer was setting the attributes by using the getAttriibute command. I also changed my html document into an XHTML document. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.TedTheSpeedlearner.com XML_SVG_Ladder.xsd"> After I made the changes, I opened the webpage. Still the ellipse didn't appear on my webpage. I have no idea why.
  6. speedlearner
    I found one error and corrected it. In the Javascript code I have two for next loops. In the second for next loop I listed Coordinate_Pair instead of Coordinate_List. I'm unable to locate the second error. It says: Uncaught InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '' is not a valid attribute name. What is this error?
  7. speedlearner
    I'm using the eXist database program. I stored the following documents inside the HTML_Student collection: SVG_Ellipse.html <html xmlns="http://www.TedTheSpeedlearner.com" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.TedTheSpeedlearner.com XML_SVG_Ladder.xsd"> <head> <title>SVG Ellipse</title> <link rel="stylesheet" type="text/css" href="http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Ellipse.css"/> <script language="javascript" src="http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Ellipse_Test_1.js"/> </head> <body onload="Setup()"> <svg:svg id="Image_Box"> <svg:ellipse id="My_Ellipse"/> </svg:svg> <input id="My_Data" type="text"/> </body> </html> Please note that the schema document that is listed in this document doesn't exist yet. I will create this later. SVG_Ellipse.css #Image_Box { height: 500px; width: 800px;} #My_Ellipse { fill: none; stroke: blue; stroke-width: 3;} SVG_Ellipse_Test_1.js var SVG_Data var Retrieved_Data var Attribute_List var Coordinate_List var Counter function Setup() { SVG_Data = new XMLHttpRequest(); SVG_Data.open("GET","http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Ellipse.xq", true); SVG_Data.onreadystatechange = function () { if (SVG_Data.readyState = 4) { Retrieved_Data = SVG_Data.responseText; Retrieved_Data = Retrieved_Data.split("*"); Attribute_List = ""; Coordinate_List = ""; for (Counter = 0; Counter < 8; Counter++) { Attribute_List = Attribute_List + Retrieved_Data[Counter] + "*"; Counter = Counter + 1; Coordinate_List = Coordinate_List + Retrieved_Data[Counter] + "*";} Attribute_List = Attribute_List.split("*"); Coordinate_List = Coordinate_List.split("*"); for (Counter = 0; Counter < 4; Counter++){ document.getElementById("My_Ellipse").setAttribute(Attribute_List[Counter], Coordinate_Pair[Counter]);} document.getElementById("My_Data").value = Coordinate_List [0]; } } SVG_Data.send(); } SVG_Ellipse.xml <SVG_Data_Collection xmlns="http://www.TedTheSpeedlearner.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.TedTheSpeedlearner.com SVG_Ellipse_Data_Schema.xsd"> <ellipse> <X_Center_Coordinate>100</X_Center_Coordinate> <Y_Center_Coordinate>100</Y_Center_Coordinate> <X_Radius_Coordinate>40</X_Radius_Coordinate> <Y_Radius_Coordinate>40</Y_Radius_Coordinate> </ellipse> </SVG_Data_Collection> SVG_Ellipse_Data_Schema.xsd <schema xmlns="http://www.w3.org/2001/XMLSchema" xmlns:target="http://www.TedTheSpeedlearner.com" targetNamespace="http://www.TedTheSpeedlearner.com" elementFormDefault="qualified"> <complexType name="Ellipse_Type"> <sequence> <element name="X_Center_Coordinate" type="string"/> <element name="Y_Center_Coordinate" type="string"/> <element name="X_Radius_Coordinate" type="string"/> <element name="Y_Radius_Coordinate" type="string"/> </sequence> </complexType> <element name="SVG_Data_Collection"> <complexType> <sequence> <element name="ellipse" type="target:Ellipse_Type"/> </sequence> </complexType> </element> </schema> SVG_Ellipse.xq xquery version "3.0"; declare default element namespace "http://www.TedTheSpeedlearner.com"; declare option exist:serialize "method=text media-type=text/plain"; let $header-addition := response:set-header("Access-Control-Allow-Origin","*") let $doc := doc("SVG_Ellipse.xml") let $svg-data := $doc/SVG_Data_Collection/ellipse let $First_Data_Name := $svg-data/X_Center_Coordinate let $Data := concat("cx*",$First_Data_Name, "*") let $Second_Data_Name := $svg-data/Y_Center_Coordinate let $Data := concat($Data, "cy*",$Second_Data_Name, "*") let $Third_Data_Name := $svg-data/X_Radius_Coordinate let $Data := concat($Data, "rx*",$Third_Data_Name, "*") let $Fourth_Data_Name := $svg-data/Y_Radius_Coordinate let $Data := concat($Data, "ry*",$Fourth_Data_Name) return $Data When I enter http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Ellipse.html into the address of my web browser, the textbox appears and the coordinate number appears in the textbox. However, the ellipse doesn't appear. I tried to remove the set attribute command from the Javascript document and place the coordinates directly inside the ellipse element of my html document, but nothing changed. Why won't my ellipse appear?
  8. speedlearner
    Why did I place commas after the quotation marks? I was taught years ago that when you create a Javascript array, you have to place a comma after each piece of data. Had I known that I would have to separate the data once the computer retrieved it from the database, I would have used a different character to separate the array elements. Now that I know this, I will try to create a Javascript object that will fill this void. Once I do, I will let you know.
  9. speedlearner
    I began this project by storing my array data inside a XML document so I and the eXist database can find it easily. I retrieved this data by concatenating the data and then used an XMLHTTPRequest to send the data from the database to a Javascript variable. Now you're suggesting that I disassemble the data using a search pattern (regular expression) and a string search method before storing it inside a Javascript array? I find that very inefficient. I think Brendan Eich or one of his staff should create a more efficient means of transferring data from a variable to an array. Perhaps a new Javascript object is in order.
  10. speedlearner
    I used AJAX to retrieve concatenated data from a XML document. Now I need to store that data into a Javascript array. How do I do this? My Javascript Code: var SVG_Data var Retrieved_Data var Coordinate_Pair var Element_List var Counter function Setup() { SVG_Data = new XMLHttpRequest(); SVG_Data.open("GET","http://localhost:8080/exist/rest/db/apps/HTML_Student/Database_Retrieval.xq", true); SVG_Data.onreadystatechange = function () { if (SVG_Data.readyState = 4) { Retrieved_Data = SVG_Data.responseText; document.getElementById("Information").value = Retrieved_Data; Coordinate_Pair = new Array(); Coordinate_Pair.push.apply(Retrieved_Data); Element_List = new Array("Top_Ladder_Line","Middle_Ladder_Line", "Bottom_Ladder_Line"); for (Counter = 0; Counter < 3; Counter++) { document.getElementById("Information").value = Coordinate_Pair[Counter]; document.getElementById(Element_List[Counter]).setAttribute("points", Coordinate_Pair[Counter]);} } } SVG_Data.send(); } The concatenated data I received from the eXist database: "60,30 60,80 150,80 150,30", "60,130 60,80 150,80 150,130", "60,180 60,130 150,130 150,180"
  11. speedlearner
    I have an update. I changed my Javascript document. Now it looks like this: var Data_Display var My_Data var My_Data2 function Setup() { My_Data2 = ""; My_Data = new XMLHttpRequest(); My_Data.open("GET","http://localhost:8080/exist/rest/db/apps/HTML_Student/Database_Example.xq", true); My_Data.onreadystatechange = function () { if (My_Data.readyState > 0) { My_Data2 = My_Data2 + " " + My_Data.readyState document.getElementById("Information").value = My_Data2; } } My_Data.send(); When I made the change and opened Database_Example.html, the numbers 2, 3, and 4 appeared in my textbox. This is proof positive that my webpage is opening the Database_Example.xq file which is stored inside the eXist database program. However, the results I want to appear in my webpage still wont appear in my textbox. And I still don't know why.
  12. speedlearner
    In the eXist database, folders are called collections. That's why I stored Database_Example.js into the HTML_Student collection. I'm sure I won't be the last person to ask about the Google Chrome developer tools. So I found them and I will now share them with everyone else. If anyone is looking for the developer tools, all they have to do is open a webpage, hold down the ctrl button, hold down the shift button, and press the letter J. You can also right click the webpage and click inspect element in the pop up dialog box. I made adjustments to some of my code. Database_Example.html <!DOCTYPE html> <html> <head> <title>Database Example</title> <link rel = "stylesheet" type = "text/css" href = "Database_Example.css"> </link> <script language = "Javascript" src = "http://localhost:8080/exist/rest/db/apps/HTML_Student/Database_Example.js"> </script> </head> <body onload = "Setup()"> <input id = "Information" type = "text"> </input> </body> </html> Database_Example.css #Information { position: absolute; top: 300px; left: 400px; font-size: 30pt;} Database_Example.js var Data_Display var My_Data function Setup() { My_Data = new XMLHttpRequest(); My_Data.open("GET","http://localhost:8080/exist/rest/db/apps/HTML_Student/Database_Example.xq", true); My_Data.onreadystatechange = 4; My_Data.send(); } Database_Example.xs xquery version "3.0"; let $header-addition := response:set-header("Access-Control-Allow-Origin","*") for $Data in doc("Database_Example.xml")/xml/svg/svg_data where $Data = 100 return $Data Database_Example.xml <xml> <svg> <svg_data>100</svg_data> </svg> </xml> I stored Database_Example.js, Database_Example.xq, and Database_Example.xml into the HTML_Student collection of the eXist database. I also stored a copy of Database_Example.html and Database_Example.css into the HTML_Student collection of the eXist database. I opened Database_Example.html from Notepad ++. Then I opened Database_Example.html by typing the following url into the Google Chrome address bar: http://http://localhost:8080/exist/rest/db/apps/HTML_Student/Database_Example.html I opened the Google Chrome developer tools. The developer tools have several menus. Elements, Network, Sources, Timeline, Profiles, Resources I opened the Network menu. Something that looked like a spreadsheet appeared. It has several headers. Name, Status, Type, Initiator, Size, Time, Timeline I looked at the Name column. According to the spreadsheet, Database_Example.html ran first. Then Database_Example.css ran next. This was followed by Database_Example.js Finally Database_Example.xq executed. Then I looked at the status column. According to the spreadsheet, Database_Example.html finished it's execution. Then Database_Example.css finished it's execution. When Database_Example.js executed, it returned a 304 code. According to the HTTP codes, it means that nothing changed in Database_Example.js after it executed. When Database_Example.xq executed, it returned a 200 code. From what I uderstand, the XQuery executed fine. But still nothing appeared in my textbox. I suspect that there is some error in my Javascript code. But I'm still not able to find it. Do you have any suggestions?
  13. speedlearner
    I read the article you sent to me. And I have a few questions var invocation = new XMLHttpRequest();var url = 'http://bar.other/resources/public-data/';function callOtherDomain() {if(invocation) {invocation.open('GET', url, true);invocation.onreadystatechange = handler;invocation.send(); In the invocation.open statement, I see the word Get, the URL of the resource I want to open, and the word true. What is the word true? I also see the invocation.onreadysetchange. Why is it set to handler? And what is the word handler? I don't understand.
  14. speedlearner
    WHat adjustments would I need to make to create a CORS request in my Javascript document?
  15. speedlearner
    I stored the Javascript code inside the eXist database program. What does that mean? It means I stored a copy of my Database_Example.js into the HTML_Student collection in eXist. Use your browser's developer tools to look at the ajax request and check the response from the server. In order for responseXML to be populated, the response from the server will need to have the content-type header set to XML, so check the response headers for the ajax request to make sure it has the right content type. You can also look at the response body to see the actual data that the server responded with. I'm using Google Chrome. I have no idea how to find the developer tools in Google Chrome. I reread the AJAX tutorial. I made the following adjustments to my Javascript document: var Data_Display var My_Data function Setup() { My_Data = new XMLHttpRequest(); My_Data.onreadystatechange=function() { if (My_Data.readyState==4 && My_Data.status==200) { document.getElementById("Information").value = My_Data.responseXML;} } My_Data.open("GET","http://localhost:8080/exist/rest/db/apps/HTML_Student/Database_Example.xq"); My_Data.send(); When I did, the words object XMLDocument appeared in my textbox. I have yet to achieve the result I want to achieve. What else am I doing wrong?
  16. speedlearner
    I created several modifications. I stored the Javascript code inside the eXist database program. This improved a lot of things. Then I made the following changes: Here is my HTML code: <!DOCTYPE html> <html> <head> <title>Database Example</title> <link rel = "stylesheet" type = "text/css" href = "Database_Example.css"> </link> <script language = "Javascript" src = "http://localhost:8080/exist/rest/db/apps/HTML_Student/Database_Example.js"> </script> </head> <body onload = "Setup()"> <input id = "Information" type = "text"> </input> </body> </html> Here is my Javascript code: var Data_Display var My_Data function Setup() { My_Data = new XMLHttpRequest(); My_Data.open("GET","http://localhost:8080/exist/rest/db/apps/HTML_Student/Database_Example.xq"); My_Data.send(); document.getElementById("Information").value = My_Data.responseXML; Here is my XQuery code: xquery version "3.0"; let $header-addition := response:set-header("Access-Control-Allow-Origin","*") for $Data in doc("Database_Example.xml")/xml/svg/svg_data where $Data = 100 return $Data Here is my XML Code: <xml> <svg> <svg_data>100</svg_data> </svg> </xml> All the errors have disappered. But nothing appears in my textbox. I still don't know why.
  17. speedlearner
    So you're saying that to use the eXist database in my webpage, I have to have the apache server software. Is that correct?
  18. speedlearner
    So for all of this to work I have to store my Javascript code inside the eXist database program?
  19. speedlearner
    This is my Javascript code: var Data_Display var My_Data function Setup() { My_Data = new XMLHttpRequest(); My_Data.open("GET","http://localhost:8080/exist/rest/db/apps/HTML_Student/Database_Example.xq"); My_Data.send(); document.getElementById("Information").value = My_Data.responseXML; } This is my XML code: <xml> <svg> <svg_data>100</svg_data> </svg> </xml> This is my XQuery: xquery version "3.0"; for $Data in doc("Database_Example.xml")/xml/svg/svg_data where $Data = 100 return $Data When I ran the Javascript code, the computer gave me an Access Control Allow Origin error. It told me that I needed a CORS request. Since I have no idea what a CORS request is or how to insert it into my code, I'm stuck. Can anyone assist me?
×
×
  • Create New...