-
Notifications
You must be signed in to change notification settings - Fork 4
Home
Welcome to the airppt wiki!
I'm constantly coming up with ideas for apps that will help me in my daily use. I don't need complex interfaces, just a few buttons and labels in the right layout (or at least placeholders in the right position, so I don't have to mess with the CSS). UI takes too long for prototypes - easier to make in Powerpoint. Hmm...wouldn't it be great if Powerpoint was my UI designer?
Powerpoint's simple drag and drop interface makes it easy to prototype and demonstrate UIs. However, whenever we want to build the "real" thing, we have to startover as nothing ports over from our intial powerpoint elements except the colors and layouts that we manually input. Tools such as Sketch or GrapeJS exist, but they come with a learning curve, a cost and bloat.
Existing PPT2HTML projects exist, but they aren't designed to be extensible - just for display in a browser. I want raw HTML so that I can use in websites, apps, and an extensible framework to reuse Powerpoint as a designer for other applications.
This project will make my life easier because it allows me to:
- Drop some shapes/images/textboxes in powerpoint for a UI,
- Parse Powerpoint Elements into a standardized JSON format
- Generate HTML and CSS shapes from the JSON
- Deploy an app with Electron or publish a website
The difficulty in this project is parsing Office Open XML format and converting that to renderable HTML. The project is written in Typescript. In order to remain extensible, this is a safe choice.
I will explain the code, and detail how it works at the same time:
main.ts - This is the entry point for the code. It begins by unzipping the powerpoint file and initializing an elementparser instance. This passes in raw XML, that's what powerpoint is made up of.
gridscaler - This is a special class that handles converting from Powerpoint's X,Y absolute coordinates to a CSS grid that is column based.
elementparser.ts - Element parser is a class that takes in raw XML files. It features a getProcessedElement() that takes in an PPT XML Element and converts it to a structured object. It calls a lot of smaller parsers to break the work. You can use this parser class to go from PPT to any other medium, not just HTML. It returns nice standardized JSON.
renderers.ts - Renderer.ts is an abstract class that generates HTML and CSS that relates to a Powerpoint Element. It takes in a Powerpoint Element, the type of CSS to generate, and any raw XML if needed. It then exposes two methods: render() and addCSSattribute(), one of them returns HTML and the other is a static way to add CSS. This is where you can introduce new parsers. There are also a few helpers that automatically generate the CSS for common things like borders, fonts etc.
generators - This folder contains everything that puts together HTML files, CSS files and also a file writer to write the file.
| PPT Element | Supported | Attributes | Notes |
|---|---|---|---|
| Rectangle | Yes | Text, Borders, Lines, ColorFill,ImageFill | |
| Triangle | Yes | Text, Borders, Lines, ColorFill,ImageFill | |
| Ellipse | Yes | Text, Borders, Lines, ColorFill,ImageFill | |
| TextBox | Yes | Borders, Lines, ColorFill | Textboxes are converted to HTML Input Boxes |
| Images | Yes | LocalImages, Images from Online | No image edits are preserved, only sizes |
More work needs to be done on parsers that can also support more shape attributes like getting infromation for transparency and shadows.
You can extend the supported elements by writing your own renderer. Send a PR back. I'm more than happy to set up a video call to explain to you this.
Powerpoint supports a lot of preset shapes that this project can also support if added.
See Creating a Renderer