XML3D and Drupal

XML3D and Drupal

xml3d rubick

The XML3D Module provides a simple and easy way to integrate the XML3D models and applications into Drupal. The current 7.x-1.x version allows to simply enter the XML3D code into a Long Text field that has the XML3D Input Field formatter. The content will then be displayed on the page in the form of an iframe having the same size as the XML3D application.

The project has been added to Drupal.org. Here is its sandbox link: http://drupal.org/sandbox/vkosenko/1959792.

 

We added this module to the blog and added a field with a XML3D example, see it at the end of this Article in action.

Requirements

The module has the following requirements:
  • Drupal 7
  • the field, field_ui, libraries modules
  • a browser with Web GL support (currently, Firefox and Chrome)
    • if you have a Intel GPU Chip and are using Chromium/Chrome on a Linux based OS, try to enable "Override software rendering list Mac, Windows, Linux, Chrome OS" under chrome://flags
  • the js library files (xml3d.js and camera.js) must be located in the corresponding folder in the libraries directory (the current version of the module uses XML3D version 4.3):
    xml3d library files structure

Adding the Field Type

After having installed and enabled the XML3D module, you must create a field of the Long Text type by going to Structure -> Content types -> Manage Fields:

xml3d add field

Then you must assign the XML3D Input Field formatter to the field by going to Structure -> Content types -> Display Fields and select it from the Format drop-down list:

xml3d manage display

In order to add/modify your XML3D content you just need to go to your content type that contains a field with the XML3D formatter and paste the content into the field (you can grab the code from one of the examples available: http://xml3d.github.com/xml3d-examples/):

xml3d add content

The content is supposed to have one tag containing the rest of the content.

After performing all the step correctly, you should be able to see your XML3D content visualized:

xml3d rubick

As mentioned above, the XML3D element will be presented as an iframe that will have the size of the content inside (the width and height parameters of the element will be used for this). By default, the iframe has neither borders nor scrolling. That can easily be changed via the CSS file in the module ([modules folder]/xml3d/css/xml3d.css). The iframe has a class named "xml3d_frame" that you can use for styling it.

Global Integration into Drupal

While working on the module we met some obstacles. The major obstacle was the requirement to use the MIME-type application/xhtml+xml for the pages that have XML3D content. Moreover, the page must start with:

 

 

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
 

The problem is that a standard page in Drupal is not of application/xhtml+xml type and it has the following header (doctype) element:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>"<?php print $rdf_namespaces; ?>>

The header is hard coded in the html template file (modules/system/html.tpl.php) and is not/or hardly editable from within a module (it could be overridden by a theme, though). Thus, the first attempt to set the MIME type with php and change the header in the template file manually failed (it worked in Chrome only).

The second attempt to build in an iframe and put the content using JavaScript on the fly failed as well. It worked neither in Chrome nor in Firefox. Different techniques have been used here: starting from contentDocument.open('') (or contentWindow.document) with different MIME types including 'application/xhtml+xml' and finishing with '...src="data:application/xhtml+xml...."'.

At the end, an iframe referring to a separate page (generating the content for a certain field) was decided to be used. The page must receive four arguments: entity type, entity id, field name and delta. For example: http://example.com/xml3d/iframe/node/18/field_testxml3d/0

To Do

The current version of the module is aimed to present a simple integration of the XML3D technology into Drupal. Thus, the content to be inserted is not supposed to be very long.

As an alternative option to the currently implemented variant could be uploading a file (or files) with the content to be inserted or selecting from a predefined list of content residing on the same or a third-party server. It would make the integration process of large pieces of code easier for the end user.

Example:

 
(RUBIKS CUBE CML3D)

 

About Cocomore

Als Agentur für Kommunikation und IT zeichnet Cocomore sich durch Exzellenz in Kreation und Technologie aus. Mit 140 Mitarbeitern und Büros in Frankfurt am Main, Genf und Sevilla entwickelt und betreut das Unternehmen Kommunikations-, E-Commerce- und CRM-Lösungen (Customer Relationship Management). Zu den Kunden gehören unter anderem Nestlé, Procter & Gamble, Merz, Otto, Sanofi und der VDMA (Verband Deutscher Maschinen- und Anlagenbau). Die Cocomore AG ist Mitglied im W3C (World Wide Web Consortium) und hat Projekte in über 30 Ländern realisiert. Mit Erfolg: In einer Kundenbefragung von brand eins und Statista wurde Cocomore in der Kategorie „Digital und Internet“ zu den 5 besten Kommunikationsagenturen Deutschlands gewählt. Auch im Bereich Nachhaltigkeit überzeugt Cocomore und ist für Corporate Social Responsibility-Leistungen von EcoVadis zertifiziert. Mehr Informationen unter www.cocomore.de