• References
    • Main
    • RenderKit
    • LibJS
    • Canvas
  • Components
    • Overview
    • Page
    • Basic
      • Rectangle
      • Text
      • Button
      • HTML Article
      • Toggle Button
      • Tiler
      • Web View
      • Image Zoomer
    • Navigation
      • Carousel
    • Forms
      • Form
      • Text Entry
    • Layout
      • Group
  • Web API
  • Tutorials
  • Contact
Menu
  • References
    • Main
    • RenderKit
    • LibJS
    • Canvas
  • Components
    • Overview
    • Page
    • Basic
      • Rectangle
      • Text
      • Button
      • HTML Article
      • Toggle Button
      • Tiler
      • Web View
      • Image Zoomer
    • Navigation
      • Carousel
    • Forms
      • Form
      • Text Entry
    • Layout
      • Group
  • Web API
  • Tutorials
  • Contact

Tutorials

Get started by creating your own custom actions, feeds and components that any user can add to their Umajin project.

Dev Environment

Setup Virtual Studio Code to work inside a Umajin Dev environment

Setup

Set Properties

Recommended documentation section
 

Get Values

Customization

Introduction to creation Custom Feeds, Components and Actions

Create
Loading...
All
Getting Started
Component
Actions & Dynamics
Communications
RenderKit

Creating a Custom Slider Component in Umajin

This is a fully working Slider Component where the user can specify the background and thumb graphics. They can also set the minimum, maximum and number of steps the Slider...
David Brebner
/
April 18, 2017

Using Global Variables within Umajin

Overview Learn how to use the Set Global Variable Action, and the getGlobalVar and setGlobalVar JavaScript functions to set variables that are accessible all throughout a project. In this example,...
Carolyn Harney
/
August 29, 2017

Using getData and setData to enable customization of components

Overview The getData and setData APIs allow you to gather databases stored in specific Components and alter the data as you please using setData in JavaScript code. This can be...
Carolyn Harney
/
July 27, 2017

Act it out game

https://youtu.be/qDVwUzsG2-0 This game is a digital version of the famous party game charades, but in reverse. You pick a theme and then everyone else has to act out a word...
David Brebner
/
January 2, 2021

Using getProperty and setProperty to enable customization of components

Overview The getProperty, and setProperty APIs allow you to gather data stored in your project and alter it as you please through JavaScript code. This can be useful if you...
Carolyn Harney
/
July 27, 2017

Creating a Five Star component in Umajin

Part 1 - Five Star Component This is a fully working 'Five Star' display for data binding - and input control for raising events. The user can adjust the graphics...
David Brebner
/
September 14, 2017

Donut style display meter

This control is going to enable us to display single values in a 'donut' style that has been popularized in many dashboarding tools. It's like a cross between a pie...
David Brebner
/
September 17, 2017

Creating an Animated Shape using RenderKit

This is an extended example of the RenderKit Component being used as a base for a Custom Component. The RenderKit has a number of special attributes and features which make...
David Brebner
/
April 18, 2017

Vertical Dodge Game

This is a very simple game involving dodging planets and collecting glowing stars. There is a two-layer parallax repeating starfield in the background. This uses sprites and the RenderKit to...
David Brebner
/
September 15, 2017

Using special effects (shaders) in Umajin

Using special effects (shaders) in Umajin Shaders are used to provide special effects to objects drawn in Umajin.  This document assumes you already have a working knowledge of shaders and...
David Brebner
/
April 2, 2020

Importing your ShaderToy code to Umajin

You can import your ShaderToy code for use in Umajin projects. Just note that ALL contributions to the Shadertoy site have individual licensing requirements and many are not available for...
Richard Rountree
/
April 13, 2021

Creating reusable components from ShaderToy code.

This example will show how to convert a ShaderToy shader into a reusable component inside the Umajin Editor.  If you have not read the first tutorial, you should read that...
Richard Rountree
/
April 19, 2021

Using apeConnect to enable real time communication between projects.

Overview The apeConnect API allows you to create your own real-time communication channel for your projects to communicate through. This can be useful if you would like to allow any type of...
Carolyn Harney
/
July 10, 2017

How to use a Google spreadsheet as a JSON data source

Overview When writing to Umajin or creating Custom Components, you may want a quick and simple way to store, edit and retrieve data. Especially if you hope to decrease the...
Carolyn Harney
/
August 23, 2017

Getting Started with BLE on Umajin

Overview This tutorial is a quick introduction to how Umajin works with BLE devices. First, we'll create an ESP32 BLE server, and then we'll develop an app by Umajin Editor...
Dianyi
/
February 18, 2019

Visual Studio Code Setup

To use the ‘Open with Visual Studio Code’ function in the Umajin Editor main menu, you will first need to install Visual Studio Code onto your desktop device.  To do this...
Mark Manderson
/
April 18, 2017

Introduction to Custom Feeds

Introduction This tutorial will show you how to create some relatively simple custom feeds to use in Feed Lists and Feed Item Views of your applications.  Custom Feeds can be used to...
David Brebner
/
April 18, 2017

Accessing Global Variables from Actions

Overview Using Advanced Actions, developers can access and alter values in their JavaScript files with the Umajin platform.  In this tutorial, we will make a basic two-page demonstration project with an...
Carolyn Harney
/
August 2, 2017
  • Developer Home
  • Umajin Home
  • Support Home
Menu
  • Developer Home
  • Umajin Home
  • Support Home