Customisation and localisation of Open Learning Resources vector graphics

This post is one of a series on a proposal for an Open Educational Resource vector graphics library.

Abstract

Vector graphics can be structured to identify sub-components which can be altered or replaced. It is therefore possible to customise vector graphics used in open-licensed learning materials automatically using sets of alternate "parts".

Introduction

There has been some discussion recently about the representativeness of graphic libraries like Unicode emojis (such as skin tone and gender), and about the customisation of games character appearances like those in the Sims. Historically, there has been a representation bias in the tech world, which is being addressed over time with internationalisation and equality efforts, which should see more inclusion and diverse cultures.

Beyond that, there are issues of engagement with students, who may respond to:

• favourite characters from various media
• people, objects and places that appeal to or are culturally appropriate them
• the ability to choose styles of pictorial representation

Authors, editors and adapters of (any contributors to) learning materials may also prefer to use libraries and tools for graphics that are component-built and can be easily customised (or automatically overridden). I specifically cover Open Educational Resources here, which are intended to be open-licensed, based on open formats and practicably editable.

I will cover personalisation a future post. I will not talk much about technology or tools here either, although I plan to build a demonstrator and document it later. Neither will I talk about text customisation (which is certainly possible, as you might know if you have used a tool like Adobe FrameMaker with conditional text features).

In this post, I will describe a scenario that takes us through the stages and roles to achieve the goal of customisation and localisation of vector graphics in learning materials:

1. the developer of a standard set of vector graphic components
2. the author of an Open Educational Resource
3. the administrator of a virtual learning environment
4. a student taking an online course

Scenario and assumptions

This scenario is set in the near future where an extensible basic standard set of vector library components has been established, to the point where it has been implemented by several key organisations and taken up by influential champions, even as discussion and disagreement are ongoing.

Developing a set of standard vector graphic components

A developer with a strong vector illustration skill set has been commissioned to produce a themed set of graphic components.

She downloads the latest template, reads the guidance, and checks out both exemplars and real-life samples. Each set comes in the form of a web page with a layout of inline Scalable Vector Graphics (SVG) shapes. This is handy because the same format is:

• human viewable
• machine importable
• search-engine friendly
• compatible (in the SVG section) with template and drawing tools

Sketch of part of template showing front, back and right views of person-1. Note for economy and efficiency that missing elements can be automatically replaced by symmetrical components. In the case of deliberately missing limbs, an invisible part can be inserted to prevent such replacement.

She completes and submits her set design, which is entitled Rollergirls.

Authoring an OER graphic

An author wants to illustrate a resource on village cricket. He uses a Cricketers graphic library (with players and equipment). His drawing tool allows him to drag, drop, pose and position graphical components, and import or draw his own. He is well aware of and approves of the customisation feature built into the graphical system, which he feels is useful in keeping students engaged.

An illustration of village cricket. Note that the figures of people are default size (1 cm per pixel base) for illustrative purpose here; they can easily be scaled, automatically respond to window size and be zoomable. The people are articulated on joints and can be posed in simple ways.

The author uploads his resource into his organisational VLE.

The VLE administrator

The administrator comes into work and finds six new graphic library set requests. She rejects one as not in keeping with policy, and another after it fails a validation check. A third one throws up a security warning about potentially problematic content: she can choose to automatically strip out that content, accept or reject it entirely. She rejects it. She then looks over the three submissions viewing them in sheet mode, which is like looking at an array of emojis, and rejects one on quality grounds. She then accepts two sets and imports them into her VLE. One of these is the Rollergirls set.

Students taking an online course

Students using the VLE have a customisation page where they can find a range of options, and when a new option is added, can choose to be notified. One student, learning about rustic games, finds that the Rollergirls set has been added, and chooses this option before proceeding to that week's material. Because he follows some religious strictures, he has also chosen to filter out references to alcohol.

Now, thanks to the automated transformation stylesheets, his view of the original image is transformed.

The original image has been automatically transformed. Any matching graphical component has been replaced by its counterpart in the new set. Also, any graphical object marked as 'alcohol' has been removed for this student's view, so the wine bottle and glass have disappeared from the table. Note: because I am showing both versions of the image in the one HTML page, I have made some code adjustments but there will still likely be minor interference in styling.

Some other possible case scenarios:

1. an old but popular set is forked to meet the requirements of students unhappy about the lack of representation of their ethnicity/gender/interests;
2. creative studies students produce their own set as a project (based on ancient Egypt, modern celebrities, geek culture);
3. a homesick student is cheered by seeing visual reminders of his homeland;
4. a student wants to see his comic book heroes in learning resources, and their outsized geometries can still be accommodated…
5. …as can the anthropomorphic/anthropometric cartoon animals favoured by his younger sister.

Why do this?

There are a number of reasons why I think this sort of thing might be a good idea.

1. student engagement: giving learners control over the appearance of their educational resources is (within bounds anyway) a good thing if it increases their engagement with topics;
2. customisation for diversity: this can be because institutions wish to accommodate a wider range of visualisations, without necessarily having some kind of quota system house style, and the default graphical design can be neutral (like crash test dummies or prototyping symbols) if necessary;
3. cultural requirements and localisation: this need not be the same as diversity, some requirements will be to constrain visuals, like the alcohol example, and if necessary, replace human depictions with geometric symbols, although sometimes you just want to replace broccoli with green peppers otherwise people will not get the joke;
4. cultural buzz: you might unleash local creativity, attract a guest artist, create talking points around openness and inclusion;
5. the technology and techniques are likely to bring other benefits, like easier to use graphical tools, and faster to download graphics that work better on mobile phones (if this is done properly);
6. separation of concerns: this approach allows parallel working;
7. continuous improvement: content components as open source software, version control, automatic updates;
8. digital literacy: improvements all round;
9. accessibility: done correctly, high-visibility styles, zoomable graphics, descriptive metadata in the markup (such as names of objects and preset poses) may make graphical content more generally accessible (and searchable);
10. student expectations: I think that students, used to games and avatars, are simply going to expect and want to customise their learning materials, especially if they are not appreciative of the depictions therein.

Challenges, problems and contraindications

Here I mull over possible objections.

I have used a wide range of SVG authoring tools, and although each have had their advantages, none I used was really code-friendly, so I don't think it is as simple as handing out an Illustrator template (good candidate, expensive licence). I had quite a difficult time working up a prototype, mostly due to editing problems and refactoring designs rather than complex coding. I plan to write up part of a requirements document if I have the time. Custom, possibly browser-based tools will very probably be required.

The technology may move on quicker and bypass efforts in this sphere (although that applies generally and is seldom reason not to make an attempt).

Standardisation is hard. Yes, but easier than all the combined effort producing a myriad of graphic house styles.

People are rubbish at putting in metadata. Which is why experts will probably be needed to label all those bottle of wine as "alcohol" and so forth.

Only a very small percentage of learning materials would benefit. I think this might be the case, but there will be some areas, like vocational studies, where there could be a concentrated benefit.

It would be a distraction from more pressing issues. Maybe, but I think the benefits of working smarter are many.

Vector graphics are boring/look like clip art/are awful when clashing styles appear in the same diagram. Well, I am not an illustrator, but real illustrators can do wonderful things with vector graphics, they are widely used, and some consistency can be created with graphical style guides.

The scale of an undertaking might mean relying on commercial organisations to develop the technology (who would want to place their characters and products within learning materials for free as advertising and brand development). As long as the technology and standards were all open, and supported open choice and user creation, then I do not see that as necessarily a bad thing. In fact, I think probably all of the technological and design problems have already been solved in the creative industries sector, so I would welcome their expertise added to an open design process.

Offensive or subversive content may be smuggling into VLEs. I dealt briefly with some of the security, validation and visual checking steps that may be required. Because my model requires administrator approval, and then opt-in from a user, there are immediate safeguards. Many graphical depictions may be offensive to many people; this way, learners might be able to chose a depiction more to their taste.

Code and examples

I have now produced a simple working demo which also supports my next post on personalisation, which continues this series on an OER vector graphic library. There is some code in this oer-vector-library project on Github.

Summary

It might be cool if people could change the graphics in their open learning materials. Also, it might not be practical or desirable.

To the extent possible under law, Sleeping Dog has waived all copyright and related or neighboring rights to the text of Customisation and localisation of Open Learning Resources vector graphics. This work is published from: United Kingdom.

Exploration of technology for online digital organisational campus maps

Abstract

What technologies might be used for creating online maps and floorplans of an organisation's campus(es)?

Introduction

I have been working on a simulation of a fictitious College, and already had a basic campus in X3D. This 3D environment could be brought online, ideally in a plug-in-free web page that also worked on mobiles.

Accompanying this would be a 2D campus map that could be explored by opening buildings, navigating floors and selecting individual rooms. SVG seemed a good, mobile-friendly vector graphic technology to look at.

Requirements

The benefits of such a map may seem largely self-evident (finding and getting to useful stuff around you), but there some helpful requirements specifications like the Jisc Elevator Uni Maps idea (obsolete link removed).

The 3D environment

Adapting my original X3D model and removing some unsupported elements, and using the x3dom libraries, I was able to get the Pict Harbour campus of fictitious Kelpie College 3D environment online (sorry, not rendering properly at this time).

Static screenshot of X3D campus

This approach has the following advantages:

• It works in modern web browsers with WebGL support without plug-ins
• The download requirements are relatively modest if the approximately 1 MB of library files is cached (my X3D campus model is only about 28 kB while the SVG road tile is about 22 kB and could be considerably optimised).
• Being XML-based with a DOM API, the X3D model is accessible to scripting, combines well with data, and is transformable.
• Efficient construction techniques can define and reuse components (although my models are probably more uniform than real architecture).

However, there are some real problems navigating the environment, especially on small touchscreens. I expect the x3dom people will increase support in this area, and I can build in extra help with viewpoints, onscreen guides and so forth.

The 2D campus maps and floorplans

The obvious candidate technology for presenting 2D maps and floorplans on web and mobile is Scalable Vector Graphics (SVG). It is an establish standards, can be highly efficient, is zoomable and mobile-friendly. And it is now standardised in HTML5 and SVG can be used inline in all modern browsers.

Like X3D, SVG is an XML application (or markup language), and therefore shares the XML family of technologies and support. Treelike structures are particularly well-supported by XML, and our structure here looks like:

• Organisation
  1. Campus
     1. Building
        1. Floor
           1. Room

My approach was to:

1. Produce the largest scale map first. I constructed the Pict Campus SVG map based on the X3D model, and drew it to scale using Autodesk Graphic (on the Mac). Which SVG drawing tool you use is a matter of preference, I guess. I have used Adobe Illustrator, Inkscape and others, which each have their advantages, but none of which produce really clean code in my experience, so be prepared to clean up the SVG after export.
2. A large part of the SVG campus map became the tile for the X3D campus model. This opens the possibility of dynamically writing textures to the X3D model, something I will return to later.
3. Draw the Old Building in a separate diagram using different layers for different floors, and grouping objects together hierarchically.
4. Prepare the diagram so that CSS styles can be used (Adobe Illustrator is better for this if you construct your diagram right).
5. Identify significant elements and classes of objects like floors and rooms (ideally using id attributes and custom classes, but use what you can and clean up after).

I have got as far as putting the Pict Harbour 2D campus map in SVG online, which at time of writing only has the "Old Building" as an active link to the web application serving the floorplans.

Pict Harbour campus Old Building Floor 1 in SVG, showing room doors and waypoints but no text labels

Data-driven modelling

Once I had the cleaned SVG for my sample campus, building, floors and rooms, I wrote a script to extract each object to a database table. This allows, for example, room geometry to be easily associated with other room properties and relations, such as charging points and timetabling.

Once in the database, the room data can be manipulated and the whole floorplan geometry written back out to a web page as a customised map, perhaps highlighting all selected rooms in a different colour, and generating links between the different levels of maps.

Usability, devices and accessibility

As I say on the github project read: the initial design is intended to test the technology rather than completing the user interface. There may be usability problems and the examples may not work on all devices. There will certainly be accessibility problems: however, it is expected that as a data-driven approach is a used, other interfaces could be generated (such as text descriptions and navigation steps) separately or on top of the ones presented here.

Navigating

I have not got search or navigating working yet, but using waypoints looks like a promising approach. I read the section on Waypoints and Navigation in AI For Games Developers by David M. Bourg and Glenn Seemann, and mocked up some database tables to see how it would work. The possible advantages in this approach include:

• navigation in and around buildings and floors is nothing like "as the crow flies", since there are obstacles and openings; stairs, ramps and lifts; and so forth;
• the quickest (optimal) way of reaching a location might be determined by the fewest waypoints (possibly weighted as described below);
• not all waypoints are equal, and not all are accessible to all, so you might mark some as stairs and others as lifts, say;
• waypoint can be represented on an interactive map, such as lines and circles in SVG or in a similar fashion as floor textures in X3D;
• alternative renderings can be as text or text-to-speech, in the form of directions (headings, distances, descriptions).

Design considerations

One of the big questions, especially moving from 3D to 2D and using a virtual environment, is "Which way up?". Sure, you can use coordinate transformations, but settling on the most appropriate grid may be your most important early decision, and may vary between campuses. In the end, I drew my simplistic campus map with notional "West" at the top, with origin at top-left and not at the entry viewpoint on the harbour wall as it is in the X3D model. Therefore every mapping between X3D and SVG required an x,y translation (but no scaling — everything was supposed to be in metres — and no rotation).

You might want to develop or reuse a graphic house style that can be represented by Cascading Style Sheets (CSS). The colour system is different between X3D and CSS, and lookups are probably more usable than conversions.

Source code

I have uploaded the basic source code to Github project org-map-floorplan.

Further work

I intend to follow this up with a future post to document any progress. These proofs of concept demos and prototypes need more work and no doubt a bit of design polish.

An interesting possibility is to use an X3D overlay as an Augmented Reality navigational assistance on a mobile device using its camera, so you can see labels, directions and waypoints on screen overlaid on live video. I cannot think of a way of showing this with a virtual environment, though.

Local facility search is another obvious addition, which will require some database work as well.

Exploration of technology for online digital organisational campus maps by Sleeping Dog is licensed under a Creative Commons Attribution 4.0 International License.