Regular Presentation

Controls: Space bar to navigate to the next slide.

I started creating the presentation generator when I was creating PowerPoint presentations to teach children computer programming.
In order to get the highlighting correct on my slides, I found that I was constantly copying ‘n’ pasting inbetween PowerPoint and my code editor.
I know about Markdown and a library for code highlighting, so I combined the two and I created the generator.

This demo ‘Features’ presentation is a presentation that I made during the creation of the generator.

Note The widget feature does not work currently, this is because I took it out of the most recent generator.

Since I created the generator I have been adding some new features, these include:

  • Charts using Chart.js
  • Point indicators
  • Animations
  • Index (No-linear presentation)

Below is a sample of the Markdown used to generate the presentation:

# Slide 1

1. [Link](www.example.com) & ![Image](img/img.png)
2. **Bold text** & *Italic text*
  * ^suberscript^ & ~subscript~

::: notes
Here are some speaker notes.
:::

# Slide 2

| T | A | B | L | E |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 |

Full Demonstration

Advantages and Disadvantages of Markdown

Disadvantages

  • Layout - PowerPoint and others use visual XY Layout, websites use a flow layout system, the is positioned by default along the top-left of the screen.
    In order to layout text, the default top-left needs to be modified with CSS. Our presentations default text to the centre and we use columns from Bulma.
    • Sizes - I have found when creating presentations that the sizes of images of tables that I create are too big, there needs to be devloped into the editor a friendly way of scaling the sizes of content.
  • WYSIWYG - PowerPoint is a What you see is what you get editor, what you see during design-time is what the viewer sees when presenting.
    With our approach, you cannot know what the presentation will look like until you have generated it.
    I hope this could be solve by implementing a live preview into the designer.

Advantages

  • Mobile - Business people will be able to quickly type presentations or slides whilst commuting or in a meeting.
    PowerPoint for Android allows presentations to be created on mobile devices, but the process seems long-winded see here
  • Sharing - Because the presentations are just plain text they can be easily shared via email or sections can be copy and pasted.
    This is not so easy with PowerPoint - The whole presentation must be saved and emailed as an atachment.
  • Features - Because the presentations are webpages, we can develop into the software features that exist on almost other website.
    Currently the software does make use of a few Open Source Software projects and more will be included:

Video recorder

I have started work on a video recorder using Puppeteer and FFmpeg.
This will allow our users the the ability to be able to download their presentations as video.

An early stage video can be seen here.

CodePen Integration

View the CodePen Components presentation

All the animations I currently have coded for in my presentation generator are simply .css files.
At the moment I only have three animations available, more will be developed in the future, these files are saved as XXXAnimation.css.
In future I will also look into using not only CSS files but JavaScript and HTML files too.

There are websites such as Code My UI that showcase snippets of coding examples from CodePen.

The animation files used in our Presentation generation software need not be embedded in my code, CodePen has a URL Extensions feature.
We could incorporate the files stored on CodePen into our Presentation generator, thus we would have millions of styles and animations available to us.

PowerPoint has a finite number of animations and text effect, we could harness the CodePen community to give our product infinite effects.

CodePen Integration could also give rise to a new Open Source project called CodePen Components.
This would be a new standard way of creating CodePens that would be compliant with our Presentation generation software.
We could also create CodePen Component bindings for popular NodeJS based front-end frameworks such as Angular, React or VueJS

I have started work on the CodePen Components project, a demo of which can be seen here

Virtual Reality Presentation

(Some functions of Virtual Reality presentation still need some work)

Control: Click your mouse onto a platform to navigate.

After I created the presentation generator I started to look at whether it was possible to extend the generator the generate using A-Frame.
This demo is what I created whilst working on the generator, it proves the concept that it was possible for me to extend my generator.
Below is markup that is used to create the presentation:

#  Virtual Reality

# Basic scene

* This is a basic scene
* We can also have text here.
  * **Style with CSS**{style="color:red;font-size:40px"}

<a-entity>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
</a-entity>

Demonstration

(Note the orbit animation does work, however navigation to platforms within the orbit cause the camera to be offset - This is a bug that will need to be fixed)

Also note that the position of the platforms relative to the previous platform can also be determined by the heading level: Heading 1 (#) - right, Heading 2 (##) - down, Heading 3 (###) - forward.
My idea is for this to be configured so that that the user can change this behaviour.

Uses

  • Class VR is aVirtual Realty system created by Avantis
    • We could partner with them to use our sorftware on their devices and allow teachers to create thir own content as opposed to using pre-built lessons.

Virtual Layout

Click your mouse to capture the input.
Controls: Keyboard arrows and mouse movement.

The Virtual Layout generate takes a 2D drawing in SVG (Scalable Vector Graphics) format and translates it into a 3D scene displayed using A-Frame.
This generator still needs work and is not in such an advanced state as the Presentation Generator.

The Virtual Layout that can be seen on the demonstration section of this site is generated from the following SVG image that is based on the British Museum floor plan:

British Museum

It is my idea that any Museum or such building that can produce a 2D floor plan can also very easily generate a Virtual Reality experience that could be hosted on there website.

I imagine the possible uses for this are:

  • Museums and such institutions.
  • Architects and construction companies who wish to easily generate an ‘artists impression’ of a project for their client.
  • 3D Printing Construction -> This is a future industry, but there have already been some success with building homes and it seems there are also some companies in existence.
  • Video Games companies -> When game developers create a level or a world, there are often sections repeated. A generator will speed up the time develops spend creating a level and will mean less repeated sections.

Virtual Reality Shopping Centres

Shopping Centres like the Grafton in Cambridge have store layout maps.
Note: Clicking on a store brings up a tooltip and a link to that customer's website.

We could create an application that would allow users to create their own layouts, which allows the user to not only generate a 2D map as above bu also a Virtual Reality scene.
The competed map and VR scene can then be either hosted and linked to on our own website, or downloaded and self-hosted on the user's own website.

The above map is built using Adobe Illustrator and is an SVG drawing.
Note: We could also develop a plugin for Adobe Illustrator and other such products to use our generator.

Ordnance Survey and Historic Locations

Ordnance Servey Maps contain building outlines, property boundries and contor lines.
Long term, it would be an interseting project to see if we can create a Virtual Reality village, town or landscape using their map.

Ordnance Survey isn't the only provider, Open Layers and Open Street Map can also be investigated.

We could also look at creating Historic Locations in VR like VR Rome, these could be used to educate children as well as creating experiences for museums.

Future Virtual Reality ideas

Art

This news article tells of primary school children learning about engineering by creating planes and robots.
Similarly, we could take the same approach with art and A-Painter for Virtual Reality.

Music

We could incorporate the JavaScript Audio API with VR to create Virtual instruments for schools, perhaps without the budget to buy instruments, could use to teach children about music.

Supporting BBC article -> Music education ‘risks being outdated by technology’

It would also be interesting to show children the effects of Synesthesia.
I believe both Stevie Wonder and Beethoven suffered from colour-sound Synesthesia. (More research needed)

Museum empty display

At time, museums take displays down when artefacts need cleaning, restoration or are on loan to another museum.
These empty displays could instead be replaced with QR codes and an Augmented Reality experience for visitors.

We could use the library AR.js to display 3D models inside the empty cases.
To do this we could offer museums a service whereby they could scan in their artefacts, these would be store on an online repository, once uploaded the user would have an option the generate and print a QR code.
This could could then be displayed in-place of the removed artefact, a visitor to the museum would then scan this code in using our app and display the model.

Virtual/Augmented Reality over Internet Protocol (VRoIP)

VRoIP would be simular to existing VoIP (Voice over Internet Protocol) technologies work, but instead of video we could display the user as an avatar in Augmented Reality.

We could experiment by using AR.js to display a user's avatar, this avatar would be decoded from a QR Code that would be place inside a room where the user's position should be .
We could then used Networked A-Frame, Http and other technologies to provide the communication between the users.

We could perhaps look into Skype Development and create this as an add-in for Skype for Hololens.
Applications for this would be VR Conferencing.