Development Articles

Working with JavaScript Classes

hello="world"; return hello; Run the following block, it should return an object with four properties, name, height, weight, and the number of eyes it has. class Animal { constructor(name, height, weight, eyes){ = name; this.height = height; this.weight = weight; this.eyes = eyes; } } return new Animal("cat", 1.3, 14, 2);

Spectre Elasticsearch Desktop GUI

The team at OakFrame and TimeRocket have done it again, a collaboration of epic-proportions. We've put our heads together to build the ultimate in cross-platform Desktop GUIs for Elasticsearch. This was a new challenge for us, and we're excited to be able to show it off. Our goal with this release is to bring and […]

HTML5 JavaScript GeolocationAPI with Example

First, let’s set up a helper function that is going to convert coordinate latitude and longitude to a pixel X and Y position. This will be useful for displaying our coordinates on a 2d image of a map, which we’ll be doing later. function coordinatesToXY(image_size_x, image_size_y, coords){ return { x : (image_size_x) * (180 + […]

HTML5 JavaScript DeviceOrientation with Example

device = { absolute:null, alpha:null, beta:null, gamma:null } data=[]; function handleOrientation(event) { device.absolute = event.absolute; device.alpha = event.alpha-180; device.beta = event.beta; device.gamma = event.gamma; } DeviceOrientationEvent.requestPermission() .then( response => { // (optional) Do something after API prompt dismissed. if ( response == "granted" ) { Scrap.print("permission granted") } }) .catch( e => { Scrap.print("permission denied") […]

HTML5 JavaScript Webcam and Example

Let's get started by setting up some HTML Elements to be used for displaying the webcam video stream. video_element = document.createElement("video"); video_element.autoplay = true; video_element.playsinline = true; video_element.setAttribute('playsinline', 'playsinline'); // For iOS = "100%"; Now we'll set up the asynchronous function to start the video stream. startVideo = async function(){ stream = await navigator.mediaDevices.getUserMedia({ […]

Basic Programing with Javascript

Welcome to the OakFrame Interactive Basic Programming with Javascript course. This course is provided through an interactive javascript notebook, powered by Scraps-JS, our open-source library. Each Scrap (or code cell), can be run independently. Let's start by running our first Javascript Scrap. // You can edit me dog = "dog"; fox = "fox"; return (dog […]

Fluid Viewports vs Fixed Screens in Native Web Apps

When designing an experience we must consider the rendering capabilities of the devices and platforms we run on. OakFrame is not only run in our own environments but powering millions of capable experiences. By leveraging the full browser rendering system and offering full control over how that browser renders frames, we are able to take […]

Scraps-JS Realtime Javascript Notebook + Source

Scraps-JS, a state-driven interactive javascript notebook/workspace app. Add this HTML code to the <head> section of your Web App. <link rel="stylesheet" href="dist/scraps.css" type="text/css" /> This is a Scrap. Place them in the body. <div class="scraps-js">hello="hello";</div> Then, place the script at the bottom of your page, preferably near the end of the <body> tag, after all […]

Oak Studio Documentation

Simple to Embed and Integrate We designed OakFrame to be easy to extend in order to provide further integration opportunities. If you prefer to run your own code in web development environments, you will be able to download the entire source from GitHub. You can build a full web application with OakFrame or a simple […]

Concurrent and Adaptive Narrative

Narrative and Player Expression As a narrative and game designer, you must consider that you are designing for two processors. The technology, the hardware running the code and algorithms, and the psychology, what is happening in the player's mind. Players are exploring possibility spaces, a set of problems that are interesting and enjoyable. When presented […]