graphics.h compiler logo graphics.h compiler

Developer Integration Guide

Embed Graphics.h Anywhere

Learn how to easily integrate our BGI DOS compiler directly into your own website, blog, or virtual classroom sandbox using the custom JavaScript SDK or direct Iframe endpoint query parameters.

Overview

Our embedding architecture allows safe, sandbox-contained execution of legacy BGI graphics programs on modern pages. By loading the Javascript SDK, parent window environments can programmatically pass code strings into WebAssembly-powered DOSBox emulator frames, compiling and running on-demand entirely client-side.

Quick Start

Step 1: Include the SDK Script

Include the client-side JavaScript SDK on your web page. This loads the GraphicsHEmbed global class onto the window scope.

HTML 
<script src="https://graphicsh.online/static/js/sdk.js"></script>

Step 2: Add Host Element

Establish a mount container placeholder in your DOM where the interactive runner element will render.

HTML 
<div id="graphicsh-embed"></div>

Step 3: Instantiate and Run Snippets

Construct the embed handler, specifying option arguments (e.g. target origin URL), and call runSnippet().

JavaScript 
const embed = new GraphicsHEmbed('#graphicsh-embed', {
  baseUrl: 'https://graphicsh.online',
  scale: 1
});

// Run raw instructions inside graphics.h boilerplate
embed.runSnippet(`
setcolor(LIGHTRED);
circle(320, 240, 150);
outtextxy(230, 240, "Interactive SDK Embed Output");
`);

JavaScript SDK API Reference

Detailed specification parameters for custom developer overrides and configurations in the GraphicsHEmbed JavaScript constructor.

Constructor Options

Passing an options configuration object to new GraphicsHEmbed(targetSelector, options) overrides default layout and target parameters:

Option Type Default Description
baseUrl String "" The domain pointing to the compiler platform (e.g. "https://graphicsh.online"). Defaults to relative paths if omitted.
scale Number 1 A scaling factor adjusting the output resolution. Iframe dimensions scale dynamically: (640 * scale) by (480 * scale).
title String "graphics.h compiler output" The descriptive accessibility title attribute applied to the generated layout iframe.

Methods

Use the SDK reference handles to trigger updates dynamically:

Method Arguments Return Type Description
runSnippet(code, options) code: String, options: Object void Instructs the compiler workspace to build and launch code content immediately inside the emulated environment. See method options below.

Snippet Methods Options

Options parameters passed to runSnippet(code, { ... }) control compilation layout wrappers:

Option Type Default Description
boilerplate Boolean true Wraps the script automatically inside standard BGI includes (#include <graphics.h>, initgraph(), getch(), closegraph()) and main() block logic. Set to false if passing complete files.
focus Boolean false When set to true, keyboard input focus shifts automatically to the compiled output window after execution completes.

Direct Iframe Query Parameters

For platforms where executing external JavaScript is blocked, you can embed the iframe directly and pass snippet attributes directly through query variables:

HTML 
<iframe src="https://graphicsh.online/embed?code=circle(320%2C240%2C100)%3B&boilerplate=true&scale=1" 
        style="width: 640px; height: 480px; border: 0;"></iframe>

Query Variables

Parameter Type Description
code String URL-encoded C++ graphics snippet code. The workspace compiles and runs this on frame load.
boilerplate String Set to "false" to disable the standard template wrapper if the code parameter is already a complete C++ application.
scale String Numeric string scale factor (e.g. 1.5, 0.8) adjusting iframe styling layout properties.

Live SDK Demo Sandbox

Mount and execute BGI scripts programmatically using the console box below. Click the run button to see the SDK build the frame and compile.