Getting Declarative (X)3D Into HTML
Total Page:16
File Type:pdf, Size:1020Kb
Load more
Recommended publications
-
X3DOM – Declarative (X)3D in HTML5
X3DOM – Declarative (X)3D in HTML5 Introduction and Tutorial Yvonne Jung Fraunhofer IGD Darmstadt, Germany [email protected] www.igd.fraunhofer.de/vcst © Fraunhofer IGD 3D Information inside the Web n Websites (have) become Web applications n Increasing interest in 3D for n Product presentation n Visualization of abstract information (e.g. time lines) n Enriching experience of Cultural Heritage data n Enhancing user experience with more Example Coform3D: line-up of sophisticated visualizations scanned historic 3D objects n Today: Adobe Flash-based site with videos n Tomorrow: Immersive 3D inside browsers © Fraunhofer IGD OpenGL and GLSL in the Web: WebGL n JavaScript Binding for OpenGL ES 2.0 in Web Browser n à Firefox, Chrome, Safari, Opera n Only GLSL shader based, no fixed function pipeline mehr n No variables from GL state n No Matrix stack, etc. n HTML5 <canvas> element provides 3D rendering context n gl = canvas.getContext(’webgl’); n API calls via GL object n X3D via X3DOM framework n http://www.x3dom.org © Fraunhofer IGD X3DOM – Declarative (X)3D in HTML5 n Allows utilizing well-known JavaScript and DOM infrastructure for 3D n Brings together both n declarative content design as known from web design n “old-school” imperative approaches known from game engine development <html> <body> <h1>Hello X3DOM World</h1> <x3d> <scene> <shape> <box></box> </shape> </scene> </x3d> </body> </html> © Fraunhofer IGD X3DOM – Declarative (X)3D in HTML5 • X3DOM := X3D + DOM • DOM-based integration framework for declarative 3D graphics -
Document Object Model
Document Object Model DOM DOM is a programming interface that provides a way for the values and structure of an XML document to be accessed and manipulated. Tasks that can be performed with DOM . Navigate an XML document's structure, which is a tree stored in memory. Report the information found at the nodes of the XML tree. Add, delete, or modify elements in the XML document. DOM represents each node of the XML tree as an object with properties and behavior for processing the XML. The root of the tree is a Document object. Its children represent the entire XML document except the xml declaration. On the next page we consider a small XML document with comments, a processing instruction, a CDATA section, entity references, and a DOCTYPE declaration, in addition to its element tree. It is valid with respect to a DTD, named root.dtd. <!ELEMENT root (child*)> <!ELEMENT child (name)> <!ELEMENT name (#PCDATA)> <!ATTLIST child position NMTOKEN #REQUIRED> <!ENTITY last1 "Dover"> <!ENTITY last2 "Reckonwith"> Document Object Model Copyright 2005 by Ken Slonneger 1 Example: root.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE root SYSTEM "root.dtd"> <!-- root.xml --> <?DomParse usage="java DomParse root.xml"?> <root> <child position="first"> <name>Eileen &last1;</name> </child> <child position="second"> <name><![CDATA[<<<Amanda>>>]]> &last2;</name> </child> <!-- Could be more children later. --> </root> DOM imagines that this XML information has a document root with four children: 1. A DOCTYPE declaration. 2. A comment. 3. A processing instruction, whose target is DomParse. 4. The root element of the document. The second comment is a child of the root element. -
TR 102 199 V1.1.1 (2003-10) Technical Report
ETSI TR 102 199 V1.1.1 (2003-10) Technical Report Services and Protocols for Advanced Networks (SPAN); Preliminary analysis of Broadband multimedia services 2 ETSI TR 102 199 V1.1.1 (2003-10) Reference DTR/SPAN-130320 Keywords broadband, multimedia, service ETSI 650 Route des Lucioles F-06921 Sophia Antipolis Cedex - FRANCE Tel.: +33 4 92 94 42 00 Fax: +33 4 93 65 47 16 Siret N° 348 623 562 00017 - NAF 742 C Association à but non lucratif enregistrée à la Sous-Préfecture de Grasse (06) N° 7803/88 Important notice Individual copies of the present document can be downloaded from: http://www.etsi.org The present document may be made available in more than one electronic version or in print. In any case of existing or perceived difference in contents between such versions, the reference version is the Portable Document Format (PDF). In case of dispute, the reference shall be the printing on ETSI printers of the PDF version kept on a specific network drive within ETSI Secretariat. Users of the present document should be aware that the document may be subject to revision or change of status. Information on the current status of this and other ETSI documents is available at http://portal.etsi.org/tb/status/status.asp If you find errors in the present document, send your comment to: [email protected] Copyright Notification No part may be reproduced except as authorized by written permission. The copyright and the foregoing restriction extend to reproduction in all media. © European Telecommunications Standards Institute 2003. All rights reserved. -
Exploring and Extracting Nodes from Large XML Files
Exploring and Extracting Nodes from Large XML Files Guy Lapalme January 2010 Abstract This article shows how to deal simply with large XML files that cannot be read as a whole in memory and for which the usual XML exploration and extraction mechanisms cannot work or are very inefficient in processing time. We define the notion of a skeleton document that is maintained as the file is read using a pull- parser. It is used for showing the structure of the document and for selecting parts of it. 1 Introduction XML has been developed to facilitate the annotation of information to be shared between computer systems. Because it is intended to be easily generated and parsed by computer systems on all platforms, its format is based on character streams rather than internal binary ones. Being character-based, it also has the nice property of being readable and editable by humans using standard text editors. XML is based on a uniform, simple and yet powerful model of data organization: the generalized tree. Such a tree is defined as either a single element or an element having other trees as its sub-elements called children. This is the same model as the one chosen for the Lisp programming language 50 years ago. This hierarchical model is very simple and allows a simple annotation of the data. The left part of Figure 1 shows a very small XML file illustrating the basic notation: an arbitrary name between < and > symbols is given to a node of a tree. This is called a start-tag. -
BIM & IFC-To-X3D
BIM & IFC-to-X3D Hyokwang Lee PartDB Co., Ltd. and Web3D Korea Chapter [email protected] Engineering IT & VR solutions based on International Standards BIM . BIM (Building Information Modeling) . A digital representation of physical and functional characteristics of a facility. A shared knowledge resource for information about a facility forming a reliable basis for decisions during its life-cycle; defined as existing from earliest conception to demolition. http://www.directindustry.com/ http://www.aecbytes.com/buildingthefuture/2007/BIM_Awards_Part1.html Coordination between the different disciplinary models. (© M.A. Mortenson Company) 4D scheduling using the BIM model (top image) and the details of site utilization and civil work (lower image) used for coordination and communication with local review agencies and utility companies. (© M.A. Mortenson Company) http://www.quartzsys.com/ Design http://www.quartzsys.com/?c=1/6/27 OpenBIM . A universal approach to the collaborative design, realization and operation of buildings based on open standards and workflows. An initiative of buildingSMART and several leading software vendors using the open buildingSMART Data Model. http://buildingsmart.com/openbim OpenBIM & IFC . IFC (ISO/PAS 16739) . The Industry Foundation Classes (IFC) : an open, neutral and standard ized specification for Building Information Models, BIM. The main buildingSMART data model standard buildingSMART Web3D Consortium International IFC Web3D (ISO/PAS 16739) Web3D Korea Chapter buildingSMART KOREA - Inhan Kim, What is BIM?, Aug. 2008, http://www.cadgraphics.co.kr/cngtv/data/20080813_1.pdf BIM CAD Systems . Autodesk Revit Architecture . Bently Achitecture . Nemetschek Allplan . GRAPHISOFT ArchiCad . Gehry Technologies (GT) Digital Project . CATIA V5 as a core modeling engine . Vectorworks Architect Simple IFC-to-X3D Conversion . -
Understanding Javascript Event-Based Interactions
Understanding JavaScript Event-Based Interactions Saba Alimadadi Sheldon Sequeira Ali Mesbah Karthik Pattabiraman Motivation • JavaScript – Event driven, dynamic, asynchronous • Difficult to understand the dynamic behavior and the control flow – Lower level events – Their interactions 1 Challenge 1: Event Propagation html Handler head body Triggered P div a div Handler p Triggered h1 table p Handler Triggered caption tr Handler User td Triggered Click label input table textarea button Handler 2 Triggered Challenge 2: Asynchronous Events Timeout for page expiry Server request for login Server response for login User logs in 3 Challenge 2: Asynchronous Events Timeout for page expiry Server request for login View Server response for login gallery Server request Server request Server response Server response 3 Challenge 2: Asynchronous Events Timeout for page expiry Server request for login Server response for login View Server request slideshow Server request Server response Server response Timeout for next image 3 Challenge 2: Asynchronous Events Timeout for page expiry Server request for login Server response for login Server request Server request Server response Server response Timeout for next image Server request image Server response Timeout callback Timeout callback page expiry 3 Challenge 3: DOM State function submissionHandler(e) { $('#regMsg').html("Submitted!"); var email = $('#email').val(); html if (isEmailValid(email)) { informServer(email); head Body $('#submitBtn').attr("disabled", true); } } P div a srvrMsg . function informServer(email) -
Practical Initialization Race Detection for Javascript Web Applications
Practical Initialization Race Detection for JavaScript Web Applications CHRISTOFFER QUIST ADAMSEN, Aarhus University, Denmark 66 ANDERS MØLLER, Aarhus University, Denmark FRANK TIP, Northeastern University, USA Event races are a common source of subtle errors in JavaScript web applications. Several automated tools for detecting event races have been developed, but experiments show that their accuracy is generally quite low. We present a new approach that focuses on three categories of event race errors that often appear during the initialization phase of web applications: form-input-overwritten errors, late-event-handler-registration errors, and access-before-definition errors. The approach is based on a dynamic analysis that uses a combination of adverse and approximate execution. Among the strengths of the approach are that it does not require browser modifications, expensive model checking, or static analysis. In an evaluation on 100 widely used websites, our tool InitRacer reports 1 085 initialization races, while providing informative explanations of their causes and effects. A manual study of 218 of these reports shows that 111 of them lead to uncaught exceptions and at least 47 indicate errors that affect the functionality of the websites. CCS Concepts: • Software and its engineering → Software testing and debugging; Additional Key Words and Phrases: event race detection, JavaScript, dynamic analysis ACM Reference Format: Christoffer Quist Adamsen, Anders Møller, and Frank Tip. 2017. Practical Initialization Race Detection for JavaScript Web Applications. Proc. ACM Program. Lang. 1, OOPSLA, Article 66 (October 2017), 22 pages. https://doi.org/10.1145/3133890 1 INTRODUCTION It is well known that event races are the cause of many errors in JavaScript web applications [Steen 2009]. -
Web Components in Action MEAP
MEAP Edition Manning Early Access Program Web Components in Action Version 2 Copyright 2018 Manning Publications For more information on this and other Manning titles go to www.manning.com ©Manning Publications Co. We welcome reader comments about anything in the manuscript - other than typos and other simple mistakes. These will be cleaned up during production of the book by copyeditors and proofreaders. https://forums.manning.com/forums/web-components-in-action welcome Thank you very much for purchasing the MEAP for Web Components in Action. I’ve been speaking and blogging for over a decade now, and the common thread throughout has been that there hasn’t really been a common thread. I get excited about new technologies and techniques, but ultimately move to the next new thing. Web Components have been a bit different for me. I spoke at a few conferences and wrote some blog posts about them, and I did move on to other new and exciting things, but the difference here is that I never stopped building with Web Components. They’ve been a staple of my web development workflow for four years now. Like many web developers, I too have cycled through many frameworks and libraries that help with application development. Most we really good! It’s easy to laugh at a three or four year old framework years later, but it’s been very interesting to see how we as web developers progress as we try to make better and better applications with better and better tools. I’ve also been fortunate enough to use many other programming languages and platforms as well. -
Webgl™ Optimizations for Mobile
WebGL™ Optimizations for Mobile Lorenzo Dal Col Senior Software Engineer, ARM 1 Agenda 1. Introduction to WebGL™ on mobile . Rendering Pipeline . Locate the bottleneck 2. Performance analysis and debugging tools for WebGL . Generic optimization tips 3. PlayCanvas experience . WebGL Inspector 4. Use case: PlayCanvas Swooop . ARM® DS-5 Streamline . ARM Mali™ Graphics Debugger 5. Q & A 2 Bring the Power of OpenGL® ES to Mobile Browsers What is WebGL™? Why WebGL? . A cross-platform, royalty free web . It brings plug-in free 3D to the web, standard implemented right into the browser. Low-level 3D graphics API . Major browser vendors are members of . Based on OpenGL® ES 2.0 the WebGL Working Group: . A shader based API using GLSL . Apple (Safari® browser) . Mozilla (Firefox® browser) (OpenGL Shading Language) . Google (Chrome™ browser) . Opera (Opera™ browser) . Some concessions made to JavaScript™ (memory management) 3 Introduction to WebGL™ . How does it fit in a web browser? . You use JavaScript™ to control it. Your JavaScript is embedded in HTML5 and uses its Canvas element to draw on. What do you need to start creating graphics? . Obtain WebGLrenderingContext object for a given HTMLCanvasElement. It creates a drawing buffer into which the API calls are rendered. For example: var canvas = document.getElementById('canvas1'); var gl = canvas.getContext('webgl'); canvas.width = newWidth; canvas.height = newHeight; gl.viewport(0, 0, canvas.width, canvas.height); 4 WebGL™ Stack What is happening when a WebGL page is loaded . User enters URL . HTTP stack requests the HTML page Browser . Additional requests will be necessary to get Space User JavaScript™ code and other resources WebKit JavaScript Engine . -
Chapter 10 Document Object Model and Dynamic HTML
Chapter 10 Document Object Model and Dynamic HTML The term Dynamic HTML, often abbreviated as DHTML, refers to the technique of making Web pages dynamic by client-side scripting to manipulate the document content and presen- tation. Web pages can be made more lively, dynamic, or interactive by DHTML techniques. With DHTML you can prescribe actions triggered by browser events to make the page more lively and responsive. Such actions may alter the content and appearance of any parts of the page. The changes are fast and e±cient because they are made by the browser without having to network with any servers. Typically the client-side scripting is written in Javascript which is being standardized. Chapter 9 already introduced Javascript and basic techniques for making Web pages dynamic. Contrary to what the name may suggest, DHTML is not a markup language or a software tool. It is a technique to make dynamic Web pages via client-side programming. In the past, DHTML relies on browser/vendor speci¯c features to work. Making such pages work for all browsers requires much e®ort, testing, and unnecessarily long programs. Standardization e®orts at W3C and elsewhere are making it possible to write standard- based DHTML that work for all compliant browsers. Standard-based DHTML involves three aspects: 447 448 CHAPTER 10. DOCUMENT OBJECT MODEL AND DYNAMIC HTML Figure 10.1: DOM Compliant Browser Browser Javascript DOM API XHTML Document 1. Javascript|for cross-browser scripting (Chapter 9) 2. Cascading Style Sheets (CSS)|for style and presentation control (Chapter 6) 3. Document Object Model (DOM)|for a uniform programming interface to access and manipulate the Web page as a document When these three aspects are combined, you get the ability to program changes in Web pages in reaction to user or browser generated events, and therefore to make HTML pages more dynamic. -
Ch08-Dom.Pdf
Web Programming Step by Step Chapter 8 The Document Object Model (DOM) Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller. 8.1: Global DOM Objects 8.1: Global DOM Objects 8.2: DOM Element Objects 8.3: The DOM Tree The six global DOM objects Every Javascript program can refer to the following global objects: name description document current HTML page and its content history list of pages the user has visited location URL of the current HTML page navigator info about the web browser you are using screen info about the screen area occupied by the browser window the browser window The window object the entire browser window; the top-level object in DOM hierarchy technically, all global code and variables become part of the window object properties: document , history , location , name methods: alert , confirm , prompt (popup boxes) setInterval , setTimeout clearInterval , clearTimeout (timers) open , close (popping up new browser windows) blur , focus , moveBy , moveTo , print , resizeBy , resizeTo , scrollBy , scrollTo The document object the current web page and the elements inside it properties: anchors , body , cookie , domain , forms , images , links , referrer , title , URL methods: getElementById getElementsByName getElementsByTagName close , open , write , writeln complete list The location object the URL of the current web page properties: host , hostname , href , pathname , port , protocol , search methods: assign , reload , replace complete list The navigator object information about the web browser application properties: appName , appVersion , browserLanguage , cookieEnabled , platform , userAgent complete list Some web programmers examine the navigator object to see what browser is being used, and write browser-specific scripts and hacks: if (navigator.appName === "Microsoft Internet Explorer") { .. -
A Trusted Infrastructure for Symbolic Analysis of Event-Driven Web
A Trusted Infrastructure for Symbolic Analysis of Event-Driven Web Applications Gabriela Sampaio Imperial College London, UK [email protected] José Fragoso Santos INESC-ID/Instituto Superior Técnico, Universidade de Lisboa, Portugal Imperial College London, UK [email protected] Petar Maksimović Imperial College London, UK [email protected] Philippa Gardner Imperial College London, UK [email protected] Abstract We introduce a trusted infrastructure for the symbolic analysis of modern event-driven Web applica- tions. This infrastructure consists of reference implementations of the DOM Core Level 1, DOM UI Events, JavaScript Promises and the JavaScript async/await APIs, all underpinned by a simple Core Event Semantics which is sufficiently expressive to describe the event models underlying these APIs. Our reference implementations are trustworthy in that three follow the appropriate standards line-by-line and all are thoroughly tested against the official test-suites, passing all the applicable tests. Using the Core Event Semantics and the reference implementations, we develop JaVerT.Click, a symbolic execution tool for JavaScript that, for the first time, supports reasoning about JavaScript programs that use multiple event-related APIs. We demonstrate the viability of JaVerT.Click by proving both the presence and absence of bugs in real-world JavaScript code. 2012 ACM Subject Classification Software and its engineering → Formal software verification; Software and its engineering → Software testing and debugging Keywords and phrases Events, DOM, JavaScript, promises, symbolic execution, bug-finding Digital Object Identifier 10.4230/LIPIcs.ECOOP.2020.28 Acknowledgements Fragoso Santos, Gardner, and Maksimović were partially supported by the EPSRC Programme Grant ‘REMS: Rigorous Engineering for Mainstream Systems’ (EP/K008528/1) and the EPSRC Fellowship ‘VetSpec: Verified Trustworthy Software Specification’ (EP/R034567/1).