#Kinoma Samples
These samples demonstrate how to write Kinoma applications. They are all complete, open source code applications that you can borrow from.
-
Samples that have names of the form
element-xxx(easily accessible using the Kinoma Element filter) are for Kinoma Element only. They can be imported into [Kinoma Code] and run in the built-in Kinoma Element simulator (Mac OS version only) or deployed and run on the Kinoma Element device. -
All other samples are designed to run on the devices and platforms that KinomaJS supports, including Kinoma Create, iOS, and Android. They can be imported into [Kinoma Code] and run in the built-in Kinoma Create simulator or built as standalone native applications for Kinoma Create, iOS, and Android.
The samples are also available on our website, on the Kinoma Samples page.
Walk-through tutorials and projects based on a selection of these samples may be found in the tutorials folder.
This sample shows how to use Amazon's Alexa Voice Service v1 API to build a simple KinomaJS Alexa client. The application captures and uploads spoken voice in real time using the Pins library and HTTP chunked transfer encoding. A KinomaJS canvas object animation provides interactive input voice level and Alexa answer feedback. To use this sample, you need to have an Amazon developer account and "Login with Amazon" access tokens.
This sample uses two different BLLs. One BLL communicates with two potentiometers and sends their readings to the main thread, where they are interpreted as x, y coordinates; lines are drawn between the coordinates to make pictures. A second BLL gets readings from an accelerometer, and when these readings exceed a threshold, the drawing is erased. See the Analog Drawing Toy tutorial for more information.
This sample shows how to integrate the Sharp GP2Y0A02YK0F long-range infrared proximity sensor (available as SparkFun SEN-08958) with Kinoma Create. The analog sensor supports range readings between 15 and 150 cm. The application displays the range reading and plays a beep sound that increases in frequency as you get closer to the sensor.
This sample uses a BLL to poll values from an analog sensor and graphs these values using a KinomaJS canvas object. See the Analog Value Graph tutorial for more information.
This sample consists of a BLL and application for the Honeywell HIH-4030 humidity sensor. It includes a BLL simulator for use in Kinoma Code and a device BLL for use on Kinoma Create. The sample also uses the Texas Instruments TMP102 digital temperature sensor to provide a temperature-compensated humidity reading. The code demonstrates how to chain sensor readings using KinomaJS messages invoked from the main screen.
This sample sends HTTP requests to the Initial State REST API to upload sensor data to a data bucket. The values are read from an analog sensor plugged into pin 51 on Kinoma Create. Before running the application, sign up for a free Initial State account and replace the dummy text in the code with your bucket ID and access key, shown in your bucket's settings.
This sample shows how to use the MaxBotix LV-MaxSonar-EZ1 MB1010 sonar range finder with Kinoma Create. The BLL reads the MB1010 analog voltage pin and converts the voltage measured to a range in inches.
This sample shows how to use the SparkFun UV Sensor Breakout with Kinoma Create. This ML8511 UV Sensor developed by LAPIS Semiconductor provides a UV intensity reading through its analog output. The application displays the current sensor intensity value and the UV Index derived from it. (The UV Index calculation may require calibration for your part of the world.)
The sample makes your heartbeat visible on the Kinoma Create screen. Using the Pulse Sensor developed by World Famous Electronics (pulsesensor.com), available as SparkFun SEN-11574, the BLL monitors the analog signal to detect beats. The BLL is based on the sample Arduino code from World Famous Electronics, converted to JavaScript and modified for optimal use with KinomaJS.
This stripped-down application reads a value from an Analog Input pin and displays it on the Kinoma Create screen. It demonstrates how to implement an Analog pin BLL in KinomaJS. See the Analog Skeleton tutorial for more information.
This sample shows how to implement a BLL to read from an analog temperature sensor (TMP36 in this case) and display the results on the Kinoma Create screen.
This sample demonstrates how to use an analog trimpot to control the media player volume level. Both device and simulator BLLs are provided. The sample was developed using the Suntan TSR-3386U 10K trimpot (available as SparkFun COM-09806). The displayed volume control is implemented using KinomaJS containers and skins.
This sample shows how to implement a simple animated sprite. The frames are rendered from a horizontal image strip wrapped by a KinomaJS texture and skin. The skin is bound to a KinomaJS content object that drives the animation using an interval timer.
This sample provides a collection of KinomaJS behaviors for implementing animations commonly found in user interfaces. Examples show how to apply rotation, clipping, translation, fading, and blinking behaviors to KinomaJS containers. Easing functions are supported to further customize the animations. A sequencer behavior uses JavaScript 6 promises to drive sequential and parallel animations.
This application monitors the audio level using the Kinoma Create built-in microphone. The audioin BLL records audio samples, which it uses the calculate the peak and average sample levels, as well as the power level (RMS). The results are displayed in real time by the application, which also adjusts the screen color in real time: black for quiet, white for loud, and grays for in between.
This application demonstrates how to record and play up to 30 seconds of audio with the Kinoma Create built-in microphone and speaker. See the Audio Recorder Player tutorial for more information.
This sample is a bouncing-ball animation in which each ball is created as a content object using different variants from an image skin. The balls travel as a result of changing the content coordinates over time. The application is written using the KinomaJS JavaScript API and demonstrates how to use image skins and content timers.
This basic application demonstrates how to use the checkbox object from the Controls library. In addition to general setup, one option for implementing Check All is shown.
This basic application shows how coordinates are used in KinomaJS to specify the position and size of contents relative to their container. The application also uses the KinomaJS Array.prototype.map function to build a container list from an array of instantiating data.
This basic application shows how to display a dialog box and handle user input in KinomaJS.
This basic application shows how to distribute events across the KinomaJS containment hierarchy to simultaneously update multiple user interface elements.
This basic application demonstrates how to dynamically build a scrolling list from a simple array of items in KinomaJS. Tapping a list item triggers an action. Each list item also includes an embedded button (in blue) that triggers a different action when tapped.
This basic application makes a request to a simple web service to generate the MD5 hash of a string in KinomaJS. It demonstrates making requests using JSON, processing JSON responses, and doing basic error handling.
This sample demonstrates how to implement a BLE Apple Notification Center Service (ANCS) consumer. After an iPhone is paired with the application, received text, email, and phone call notifications are displayed on the Kinoma Create screen. Both BLE central and peripheral roles are supported by this application, which shows how to advertise the ANCS service solicitation and connect with the ANCS provider.
This sample demonstrates how to turn a light on or off by clapping into the Kinoma Create microphone. The application controls the BLE Satechi IQ Plug by monitoring the recorded audio level in real time and enabling the plug when the audio level reaches a peak threshold. The IQ Plug is discovered by name and controlled by writing to its control characteristic. See the BLE Clapper tutorial for more information.
This sample shows how to discover and control the BLE Colorific LED light bulb. An interactive touch color wheel displayed on the Kinoma Create screen is used to change the bulb color in real time. The application additionally shows how to configure the BLE connection intervals to achieve higher responsiveness when controlling BLE peripherals. See the BLE Colorific Light Bulb tutorial for more information.
The Griffin Technology PowerMate Bluetooth button is a wireless control knob that can be integrated into other projects. This sample application shows how to discover the button's primary GATT service, connect, and detect button presses and left/right spins. See the Griffin PowerMate Bluetooth Button tutorial for more information.
This sample demonstrates how to build a BLE central application that communicates with a BLE heart rate monitor. Once connected to the monitor, the application discovers the Bluetooth Heart Rate Service (0x180D) and the Heart Rate Measurement characteristic (0x2A37). Notifications are requested on the Heart Rate Measurement characteristic, enabling the application to display beats per minute. This application can be used as a companion to the ble-heart-rate-peripheral sample.
This sample demonstrates how to build a BLE peripheral application that simulates a heart rate monitor. As a peripheral, the application advertises the Generic Access (0x1800), Device Information (0x180A), Heart Rate (0x180D), and Battery (0x180F) GATT services. Once connected to a BLE client, the application simulates a heart rate monitor by writing measurement values to its local GATT database, which in turn automatically notifies the connected client. This application can be paired with any mobile app (such as Polar Beat) that communicates with BLE heart rate monitors, or used as a companion to the ble-heart-rate-monitor sample.
This sample integrates Kinoma Create with the BLE Miselu C.24 wireless MIDI keyboard. Notes played on the keyboard are displayed in real time on the Kinoma Create screen, and audio is played through the Kinoma Create speaker. The application interfaces to the keyboard as an Apple Bluetooth MIDI client and demonstrates full BLE service and characteristic discovery, notification enabling, configuration of high-performance connections, and audio synthesis. See the Bluetooth LE Miselu C.24 Keyboard tutorial for more information.
This sample shows how to discover and receive button press/hold notifications from Sony MESH Button Tags, which are small BLE peripherals dedicated to specific functions. The application first establishes a secure and encrypted connection as required by the tag. Once it is connected and services/characteristics are discovered, the application displays button presses on the Kinoma Create screen.
The BLE Satechi IQ Plug lets you control electronic devices and appliances from Bluetooth-enabled phones. This sample shows how to connect to the plug and turn it on and off from the Kinoma Create screen. It discovers the IQ Plug by matching the device name broadcast in BLE scan response packets. Once the plug is connected, the application controls it by writing commands to the plug's control characteristic. See the Bluetooth LE Satechi IQ Plug tutorial for more information.
This sample interfaces with the Blue Maestro Tempo Environment Monitor to display the measured temperature, relative humidity, and barometric pressure on the Kinoma Create screen. The Tempo provides these measurements in BLE scan response packets as custom manufacturer advertisement data. The application shows how to parse the advertisement data to extract the sensor measurements.
The TI SensorTag is a BLE development platform for prototyping IoT devices. This sample shows how to interface with each of the onboard BLE sensor services and display the sensor data on the Kinoma Create screen.
This sample demonstrates how to run a Kinoma BLL repeatedly (which is useful when polling a sensor, for instance). The application calls a BLL that traces to the console 10 times and then stops the repetition.
BLLs are JavaScript modules that contain the code for hardware modules and communicate directly with hardware pins. This sample demonstrates how to run a Kinoma BLL once. It shows how to pass parameters to a BLL, receive them in the BLL, and get results back from a BLL.
This sample shows how to implement an embedded web view container. The code embeds the web view with a browser container. (Note, the browser container is not available on Windows or Kinoma Create.) The application demonstrates how to display a web page in the browser, support browser forward/backward navigation, implement callbacks when the web page is loading/loaded, display a busy indicator using MobileFramework, and use anchor references to containers.
This sample is a camera application that supports live preview and capture. It demonstrates how to integrate the camera media reader with a picture container, use the KinomaJS Files API to write the captured image to storage, implement screen transitions, detect the platform at runtime, adapt container layouts to device orientation changes, use a canvas object to implement a button, and play one-shot sounds. (Camera support is not provided on Kinoma Create, but this application includes a mockup implementation for the Kinoma Code simulators.)
This MobileFramework example demonstrates how to use the HTML Canvas 2D API. Tapping the settings icon displays a menu that lets you select the drawing color and line thickness. The main container provides a 2D canvas to draw on. Selecting Play from the settings menu replays your drawing. This sample shows how to use the KinomaJS JavaScript API to build and draw on a HTML Canvas 2D Context.
This sample is an optional mobile companion app for the element-catdoor sample. It displays information about a cat's in-and-out activity based on data shared wirelessly by a Kinoma Element attached to a cat door. See the Cat Door project for more information.
This sample is an interactive animation using the HTML Canvas 2D API, with three modes: scan, pleasant surprise, and track, all accompanied by blinking and saccades of the eyes. The first two modes are randomly triggered, but the last responds to touch. The geometry is primarily composed of quadratic Bézier curves, and the eyes take advantage of the asymmetry available in the radial gradient. Every frame is recomputed using a periodic KinomaJS content timer that triggers an elastic state machine.
This client application is intended to run simultaneously with the coap-server sample; it demonstrates how to implement a CoAP protocol client. The KinomaJS application sends an observe request to the color server running on the same network and receives updates from that server. The client can send a new color by choosing from a palette, slider, or RGB color sensor (TCS34725).
This server application is intended to run simultaneously with the coap-client sample; it demonstrates how to implement a CoAP protocol server. The KinomaJS application serves color information and the server name to clients and also changes the color of an attached tri-color LED (available as SparkFun COM-10821) to match the server's information. Since CoAP is a standard protocol, you can use other CoAP clients with the server, such as the Ruby CoAP module. See scripts/test.rb for more information.
This sample demonstrates how to display a simple console for logging debugging messages on Kinoma Create. New messages are added to the end of the console log and auto-scrolled into view. The console log can also be viewed in a web browser.
This sample demonstrates how to integrate MobileFramework buttons and behaviors into an application. Button types include push, checkbox, radio, and radio group.
This Kinoma Create application is the remote DIAL client for the dial-remote sample. The application can be launched, quit, and configured by the dial-remote application. DIAL client applications can receive launch configuration parameters by supplying a /dial handler. The parameters are delivered in the query property of the handler's message. The number of balls displayed can be configured by the dial-remote application.
This MobileFramework example demonstrates how to use KinomaJS DIAL to remotely launch, configure, and quit the dial-client sample application (which must be installed on Kinoma Create). KinomaJS DIAL uses SSDP to discover DIAL servers, and DIAL requests are issued to the remote DIAL server. The target DIAL application name is the KinomaJS application ID. DIAL uses an HTTP POST request to launch applications. The body of the request contains the parameters passed to the application.
This application demonstrates how to set up and display MobileFramework dialogs. Various common controls are integrated into the dialog samples, and selected values are output when the dialogs are dismissed. Dialogs are built from a list of items returned by the onDescribe dialog behavior handler function.
This sample uses a Digital pin to read input from a physical button. When pressed, the button triggers an event in the application that removes a character from the string "Hello World!" on the Kinoma Create screen. This application demonstrates the setup and integration of a Digital Input pin BLL in KinomaJS. See the Digital In Hello World tutorial for more information.
This client application is intended to run simultaneously with the digital-light-websockets-server sample. It acts as a companion app that can switch on and off an LED hooked up to the server-side Kinoma Create. This sample shows how to discover servers using the built-in SSDP support in KinomaJS, create and invoke messages to the server using WebSockets, and keep the user interface of multiple client applications in sync with the server. See the Digital LED and WebSockets tutorial] for more information.
This server application is intended to run simultaneously with the digital-light-websockets-client sample. It shows how to connect to one or more clients using the built-in SSDP support and how to implement a BLL to turn on and off an LED in response to client commands sent via WebSockets. The server keeps all the clients synced with the state of the LED.
This sample uses a Digital pin to turn on and off an LED when a button is tapped on the Kinoma Create screen. It demonstrates the setup and integration of a Digital Output pin BLL in KinomaJS. See the Digital Out LED tutorial for more information.
This sample demonstrates how to use a Digital pin to read input from a physical button and use sub-pixel rendering to get smooth animation. It is a simple reflex testing game to play on Kinoma Create. Three sheep attempt to run across the screen, and the player's goal is to tap the button before they make it all the way across.
This client application is intended to be run simultaneously with the discovery-server sample. It demonstrates how to build a companion app that discovers and interacts with a device. The client discovers all com.marvell.kinoma.example.discoveryserver servers on the same network and, for each server discovered, displays a color swatch in a vertically scrolling container. The client requests the color from the server by invoking the server's /color handler. The list is updated on the fly as servers are discovered and lost. This sample shows how to discover servers using the built-in SSDP support in KinomaJS, how to create and invoke a cross-application message, and how to dynamically build a scrolling container of items.
This server application demonstrates how to implement a discoverable device and is intended to run simultaneously with the discovery-client sample. The application/device is made discoverable by setting the shared application property to true. The /color handler is called remotely by the client and returns a JSON object containing a CSS color string.
This MobileFramework example demonstrates how to build and apply a variety of effects to KinomaJS layers and pictures. Tapping the settings icon displays a scrolling menu of effect types; the effect you select is applied to the Effect layer. Tapping the Play button at the bottom of the menu applies the selected effect to a bouncing-ball animation. This application shows how to build and apply KinomaJS effects using the KinomaJS JavaScript API.
This sample changes the brightness of a PWM LED connected to Kinoma Element based on the reading from an analog sensor. It demonstrates using both the built-in analog BLL that works on a variety of sensors (including potentiometers and photoresistors) and a user-defined BLL for the LED.
This sample toggles an LED connected to Kinoma Element on and off every second. It demonstrates setting up a simple digital BLL.
This sample toggles an LED connected to Kinoma Element on and off whenever a button is pressed. It demonstrates the use of the built-in digital BLL for the LED and a user-defined BLL for the button. It also demonstrates the process of setting up two BLLs such that the reading of one is used to write the other.
This sample enables you to track a cat's in-and-out activity using an off-the-shelf cat door, a Kinoma Element, a basic LED, and two sets of magnetic reed sensors. See the Cat Door project for a walk-through of the code and instructions to build the project components. The catdoor-companion sample acts as an optional mobile companion app.
This application for Kinoma Element changes the color of a PWM tri-color LED to the color sensed by a TCS34725 RGB color sensor. It demonstrates the process of setting up two BLLs such that the reading of one is used to write the other.
This sample was written by Valkyrie Savage. It demonstrates how to interface Kinoma Element with a GPS receiver and SIM card (connected via an AdaFruit FONA board), enabling the device to communicate with its owner via text message. In this application it is used to inform the owner of his/her bike's location and another person with an ETA when the owner leaves the office.
This client application for Kinoma Element is intended to run simultaneously with the element-http-server sample. It sends the message "Hello!" and receives the response "Hello back!" if the server is active.
This server application for Kinoma Element can be run with the element-http-client example or by sending a request by other means. The HTTP server responds with an echo of the body of each request received.
This sample obtains the current temperature from an I2C temperature sensor (TMP102) connected to Kinoma Element and traces the value every second. It demonstrates the setup and integration of an I2C BLL on Kinoma Element.
This sample takes a reading from an analog sensor connected to Kinoma Element every three seconds and sends data to an Initial State bucket. Data is logged and can be visualized as a graph or saved in a file and analyzed. The application demonstrates the setup and integration of an analog BLL and the use of the HTTPClient module to send data to a web service. See the Analog Photocell and HTTPClient tutorial for more information.
This application for Kinoma Element takes a picture based on proximity sensing and posts the image to Amazon S3 cloud storage. It uses the VC0706 serial camera and the MaxBotix LV-MaxSonar-EZ1 MB1010 sonar range finder. To post images, sign up for a free AWS account and replace the dummy text in credentials.js with your access ID and access key. You can view your images in your AWS account or with the photo-door-client sample.
This simple application for Kinoma Element uses the setInterval and clearInterval functions from the Timer module and the SparkFun COM-11442 7-Segment Serial Display to create a stopwatch. Pause, reset, and start functions can be accessed via the command line.
This simple application for Kinoma Element shows how to turn a continuous rotation servo clockwise and counterclockwise.
This simple example for Kinoma Element controls the position of a hobby servo on pin 9 using input from an analog controller (such as a potentiometer, accelerometer, or sensors for proximity, temperature, moisture, flexion, and so on) on pin 3. For maximum control and responsiveness, both the sensor and the servo can be calibrated with minimum and maximum values. This sample uses built-in BLLs for PWM, analog, power, and ground; more complex control sensors may call for a custom BLL.
This sample reads the temperature from an I2C temperature sensor (TMP102) and changes the color of an RGB LED accordingly. It demonstrates the setup and integration of I2C and PWM BLLs and the process of setting up two BLLs such that the reading of one is used to write the other. See the I2C Temperature and PWM Tri-Color LED tutorial for more information.
This application for Kinoma Element reads a capacitive touch sensor and toggles a Tessel relay module when tapped. It demonstrates how to configure digital input and output sensors using the built-in digital BLL from the Pins module. See the Digital Relay and Capacitive Touch Sensor tutorial for more information.
This sample uses capacitive touch sensors and Tessel relay modules interfaced with Kinoma Element to create a network of two touch-controlled table lamps. It demonstrates the use of pins sharing and discovery. See the Twin Lamps project for more information.
This sample by Andrew Chalkley calls a web service created by the developer and changes the display on an 8x8 LED matrix (available as Adafruit 1857) to one of three emojis based on the command received. The command can be changed by selecting an emoji on http://wifigotchi.com before running the application. The application demonstrates the use of the HTTPClient module and an I2C sensor.
This MobileFramework example demonstrates how to use the global KinomaJS Files API to iterate over local files and directories. The application displays the results in a scrolling list view and provides for deep browsing into nested directories. In addition, previews are supported for image, audio, and video files. This sample is useful for understanding how to use the Files iterator to iterate over a directory, distinguish between file and directory results, implement command and screen handler behaviors, and build scrolling list-based views.
This sample demonstrates how to use the global KinomaJS Files API, which enables reading and writing text, binary, JSON, and XML files and manipulating/iterating directories.
This sample demonstrates how to implement an interactive, scrolling photo thumbnail grid. Tapping a thumbnail opens the full-size image using a zoom transition. The thumbnails are retrieved from a Flickr public feed using a tag search, and the resulting data set is delivered in JSON format. This is a good example of how to display images, adapt the layout to device orientation changes, use tool buttons or swipe to navigate between photos, invoke a message to fetch data from a REST API, and implement MobileFramework screen open/close transitions.
This minimal application creates a full-screen container and displays the text "Hello, KPR". Tapping the container changes the background color. This sample is useful for understanding how to build a basic KinomaJS application.
This sample uses 16 onscreen buttons and two analog joysticks attached to the front pins to make Kinoma Create act as a controller for games running on Windows, Mac OS, and Steam Link. It demonstrates the use of the Gamepad class of the HID library and analog sensors.
This sample demonstrates basic use of the Keyboard class of the HID library to make Kinoma Create act as a USB keyboard. You can send input by tapping the onscreen keyboard.
This sample uses the HID library to make Kinoma Create act as a USB mouse. The gray area on screen acts as a touchpad while the labeled buttons at the bottom enable the user to left-, middle-, and right-click.
This sample uses the HID library to make Kinoma Create act as a controller for the Spotify desktop application. A volume controller, play/pause button, and skip buttons send keyboard shortcut commands. The application also demonstrates how to use KinomaJS effects and layers to implement a colorful, animated background and how to build custom user interface elements with HTML Canvas.
This application interfaces to Kinoma Create a Wii Nunchuck that acts as a joystick for the game Bit Blaster XL. It builds on the i2c-wii-nunchuck-controller sample and demonstrates using the Keyboard and Gamepad classes of the HID library and an I2C sensor.
This sample changes the main container's skin to the color sensed by a TCS34725 RGB color sensor. R, G, and B readings are sent from the BLL to the main thread, where they are converted to hex notation. See the I2C Color Sensor tutorial for more information.
This sample consists of a BLL and application for the Hover touchless gesture sensor from Hover Labs. The sample includes a BLL simulator for use in Kinoma Code and a device BLL for use on Kinoma Create. It demonstrates how to write a BLL that uses both I2C and Digital pins and changes the direction of Digital pins at runtime.
This application builds on the i2c-nfc sample by using the same Adafruit PN532 NFC/RFID Controller Shield to create an interactive game that makes use of the NFC cards as controllers. The user places a card on the reader and can select an avatar/"monster" from about 15 options. The program takes advantage of the fact that data can also be written to an NFC card and uses it as a storage medium: the user's choice is effectively serialized onto the card as JSON data, and to proceed with gameplay the user can then bring the card to another Kinoma Create on which the companion sample i2c-monster-mayhem-gumball is running.
This sample is the companion application to the i2c-monster-mayhem sample and requires a properly programmed NFC card from that sample. The user places the pre-programmed card onto the NFC reader and then plays a simple memory game: all the possible candidate avatars/"monsters" scroll by, and once the correct avatar is shown (the one initially chosen by the user and programmed onto the card), the user must quickly remove the card from the reader to win the game and receive a gumball. The user is given three tries to do so and, if all attempts are exhausted, must select another monster with a Kinoma Create running i2c-monster-mayhem and reprogram the card.
This sample shows how to use the Adafruit PN532 NFC/RFID Controller Shield with Kinoma Create. The BLL can discover RFID sensors and read and write the data area on MIFARE Classic cards. The BLL communicates over I2C and can easily be adapted to work with other NFC devices that are based on the Philips PN532 NFC controller. The application shows how to display the ID of the discovered RFID.
This sample obtains the current temperature from an I2C temperature sensor and displays it on the Kinoma Create screen. It demonstrates the setup and integration of an I2C BLL in KinomaJS. See the I2C Temperature tutorial for more information.
This sample shows how to read the Tessel Accelerometer Module, which uses the NXP (formerly Freescale) MMA8452Q three-axis accelerometer. The application displays the values of the sensor in real time and animates a ball based on the x and y values of the accelerometer. The application and BLL can easily be adapted to other accelerometers.
This sample uses the Tessel Climate Module to retrieve the humidity and temperature values from a Silicon Labs Si7020 sensor. The BLL performs the necessary calculations to transform the raw sensor data to values convenient for the application to display. The application can easily be adapted for use with other humidity and temperature sensors.
This sample shows how to integrate the SparkFun Touch Shield (DEV-12013) with Kinoma Create. The Touch Shield uses an NXP (formerly Freescale) MPR121 sensor controller to communicate multi-touch gestures over I2C. The application displays the multi-touch results in real time on the Kinoma Create screen.
This sample integrates the SparkFun Infrared Proximity Breakout board (VCNL4000) with Kinoma Create. The board integrates a proximity sensor, ambient light sensor, and infrared emitter. The sensor communicates over I2C, and the application displays both proximity and the ambient light levels.
This sample reads an I2C Wii Nunchuck. The KinomaJS application uses a Solarbotics adapter to interface with the I2C line. Values read include the x-y joystick, c and z buttons, and the in-controller three-axis accelerometer.
This KinomaJS example displays a synchronized animation built with 256 balls/sprites. Each sprite's position and size are changed with every screen update. A content clock is used to update the display on every screen refresh. Tapping the screen changes the animation mode. This sample shows how to use KinomaJS content clocks, textures/skins, behaviors, and content coordinates to achieve full frame rate animations. It also contains icon resources required to enable testing of iOS export from Kinoma Studio.
This KinomaJS example displays a synchronized vortex animation built with text sprites. Each sprite's position and text size are changed with every screen update. A content clock is used to update the display on every screen refresh. Tapping the screen changes the animation mode. This sample shows how to use KinomaJS content clocks, textures/skins, styles, behaviors, and content coordinates to achieve full frame rate animations.
This sample uses HTML Canvas 2D to implement a virtual hypotrochoid device. Custom sliders control the radius and steps. The application demonstrates how to use canvas containers to render 2D drawing contexts, delegate and notify behaviors using container.distribute, and implement a basic touch slider control.
This MobileFramework example demonstrates how to manipulate KinomaJS layer objects. Tapping the settings icon displays a scrolling menu of layer settings. Slider controls may be used to adjust the selected layer’s origin, scale, skew, translation, opacity, and other properties. Tapping the Play button at the bottom of the menu displays a bouncing-ball animation within the layer.
This application shows how to use the LevelMeterWithProbe object found in the sampleGraph module of the built-in Creations library. You can use the object to graph data over time. Configurable options include the number of samples and colors of the graph bars. This object is the same one that the Pin Explorer application uses. If you press and hold on the graph, it freezes the current samples; you can then slide your finger over the samples to view their values.
This MobileFramework example demonstrates one approach for integrating display of the Apache License NOTICE file into a KinomaJS application. It demonstrates how to build a scrolling multi-style text view with active links.
This MobileFramework example demonstrates how to build a scrolling list view using KinomaJS. An HTTP request is issued to a web service that returns a JSON array of items. The items are loaded and displayed in the list. Tapping a list item opens a detailed item view. The application also demonstrates how to use a KinomaJS layout object to adapt the screen layout on device orientation changes.
This sample demonstrates how to use the Kinoma Create built-in logging support to capture trace output into a log file. Log files can be viewed and/or removed using the built-in Logs application.
This MobileFramework example demonstrates how to access the core media library on the iOS, Android, and Mac OS platforms to display photos and play media files. (Media library support is currently not available for Kinoma Create or Windows.) The application uses a tabbed view to display photo/video thumbnails and songs. Tapping a media item opens a dedicated media viewer screen. KinomaJS messages are used to request the media items.
This MobileFramework example shows how to build a media player using a KinomaJS media object. Media transport controls are provided to start, stop, and seek the media. The controls are displayed over the video and automatically hide/show when needed. Tapping the screen displays the controls. The current play time and duration are displayed and updated. This sample demonstrates how to integrate KinomaJS media playback, use content timers, and implement skin-based buttons and transitions.
This sample demonstrates how to use a MobileFramework menu button. The menu button displays the currently selected item in an active label. When the button is tapped, a modal menu of choices is displayed. The newly selected item is returned to the caller using a handler.
This sample demonstrates how to use features of the MultiTouch Library to create an interactive image viewer suitable for selecting a cropping area from an image. The image may be panned, zoomed, rotated, and tossed, with some animated constraints applied. Interactive gestures include tap, press and hold, drag, toss, and two-finger pinch. The sample's comments discuss the framework used, including TouchStateMachine and TouchBehavior.
This Kinoma Create application enables browsing multiple images by swiping between them. By making use of the slidePictureTouchStates module, it supports a wide range of single and multi-touch actions, including pinching to scale and pan, dragging and tossing the image, pressing and holding to zoom about a particular point, and tapping to zoom to view the entire image again.
This sample demonstrates how to implement OAuth 1.0a (Twitter) and OAuth 2.0 (Google) browser-based login and authentication. The browser is embedded in a web view container. (Note, the browser container is not available on Windows or Kinoma Create.) This application is useful for understanding how to use a browser container, MobileFramework buttons, and handlers to invoke HTTP requests and parse responses, and how to implement CommonJS JavaScript modules with exported methods.
This sample uses a layout container to demonstrate how to adapt layouts to device orientation changes. KinomaJS calls the onMeasureVertically and onMeasureHorizontally functions in layout containers when the device orientation changes. The application dynamically changes the container contents based on the current orientation.
This sample is a basic digital clock that is driven by a periodic update implemented by a pair of handlers. The time handler notifies the application of the time change and then invokes the delay handler to wait 1/2 second. Once the delay has completed, the time handler is invoked again. This technique is commonly used by applications that require periodic polling of a resource.
This sample is a companion application for the element-photo-door sample. It displays images in an Amazon S3 bucket on the screen. You can select an image to zoom in, click the trash button that appears in the top-right corner to delete an image from the bucket, or click the back button in the top-left corner to go back to the grid view of all images. This sample can be run on Kinoma Create or packaged for Android or iOS mobile devices. To upload and view images, sign up for a free AWS account and replace the dummy text in the credentials.js with your access ID and access key.
This sample is a minimal application that reads and displays the host platform string read from system.platform. Applications can query the platform string to wrap platform-specific code.
This sample demonstrates how to use a KinomaJS port object to implement a simple toggle switch. Tapping the switch toggles between the on and off states. The toggle state is displayed as text by another KinomaJS port object. The application demonstrates the use of various KinomaJS port functions, including drawImage, drawLabel, fillColor, and invalidate.
This sample demonstrates how to implement preferences settings that persist across application launches. The selected color swatch is stored across runs. The model.readPreferences function reads stored preferences; its optional third parameter can be used to initialize the preference value. The model.writePreferences function saves the preferences. This sample is also useful for learning how to build a containment hierarchy using KinomaJS.
This sample demonstrates how to use the port object's projectImage function, which enables a 3D projection to be defined in an intuitive way. Imagine holding a sheet of paper in one hand and a camera in the other; the paper would correspond to a 2D texture, and what the virtual camera sees is projected onto the port. The projectImage function takes as parameters a texture, a billboard description (including the size of the texture, 3D position, and 3D orientation), and a camera description (similar to the billboard description but also including a field of view). Orientations are described as quaternions, which are complex, but the sample includes conversion to and from angles expressed in degrees. Sliders enable the various billboard and camera parameters to be exercised.
This sample displays an auto-scrolling horizontal view of photos. Photo images are fetched from a Flickr feed using a proxy handler that returns an array of photo objects. A proxy handler is often used to filter data returned from a web service into a simplified format for use by the host application.
This sample sends and receives JSON messages using the PubNub messaging service. It is a good starting point for learning how to add device-to-device and device-to-web communication to your application. PubNub provides low-latency delivery of messages through the cloud. The application includes a full KinomaJS version of PubNub's JavaScript API.
This sample demonstrates control of 360-degree servos using PWM output from pins on the front (with two-argument pulse-width mode) or the back (with one-argument duty-cycle mode) of Kinoma Create. It also demonstrates how to implement a custom parts simulator and how to use data from an external JSON file. See the PWM Continuous Servo tutorial for more information.
This sample uses red/green/blue sliders to control the color of an RGB LED. The LED is controlled by PWM pins. Each slider is a KinomaJS canvas object that triggers an onChanged event when you move the slider to a new position. See the PWM Tri-Color LED tutorial for more information.
This sample demonstrates how to capture the contents of the KinomaJS application container as a JPEG image file. It then saves that JPEG to disk in the Documents Directory of the target platform.
This sample captures from a serial digital camera (VC0706) and displays photographs on the Kinoma Create screen when a button (connected to pin 53) is pressed. At startup, the main thread waits for three affirmative messages back from the camera BLL: one after initialization, one after setting the compression, and one after setting the image size. If all goes well, the main container's skin turns green and the user can take a photo by pressing the button. See the Serial Camera tutorial for more information.
This sample consists of a BLL and application for the SparkFun COM-11442 7-Segment Serial Display. It includes a BLL simulator for use in Kinoma Code and a device BLL for use on Kinoma Create. The application demonstrates how to display text strings (ticker tape style) and a digital clock with a blinking colon. The device can display all numbers and some letters and special characters. The sample also shows how to integrate the Kinoma Create full-screen standard keyboard.
This sample integrates a TTL fingerprint scanner (SparkFun GT-511C3) with a 5V solenoid (SparkFun ROB-11015) to prototype a fingerprint locking system. The prototype registers and stores authorized fingerprints on the scanner, and the authorized fingerprints can then unlock the door controlled by the solenoid. The prototype shows how to control the fingerprint scanner via a serial BLL and the solenoid using a digital output. It also shows how to integrate the Kinoma Create full-screen keyboard, play sounds, build scrolling lists, and display rotated graphics. See the Fingerprint Lock project for more information.
This sample consists of a BLL and application for the Adafruit Ultimate GPS Breakout (MTK3339). The application polls the GPS position periodically and displays the position on a map requested from the Google Static Maps API. The map is updated when the position changes.
This sample shows how to synthesize audio in real time for low-latency playback on Kinoma Create. You can use the onscreen multi-touch keyboard to play up to five simultaneous notes on the sine wave-based synthesizer. Additional synthesizer modes and an optional analog input for volume control have been added in. See the Synthesizer project for more information.
Sketchat (a contraction of "sketch" and "chat") is a "shared whiteboard" application for Kinoma Create; when something is drawn on one Sketchat it appears on all others. The application demonstrates how to discover other Sketchats on the network and how they can easily exchange information. The pen color can be chosen using a TCS34725 color sensor. An accelerometer is used so that shaking the Kinoma Create will clear the canvas. When the application is stopped, its drawing disappears from other Sketchats.
This sample displays a slideshow of images that animate picture scaling, panning, and opacity settings to implement Ken Burns-style transitions. It demonstrates how to dynamically add picture containers into the containment hierarchy, distribute events to container behaviors, use a content timer to drive animations, display a busy indicator, and invoke an HTTP request to fetch a photo collection from a public Flickr feed.
This Kinoma Create example streams live radio from the SomaFM service. Channels are selected using NFC cards and the Adafruit PN532 NFC/RFID Controller Shield. To make individual cards correspond to a unique station, change entries in the channels dictionary in credentials.js. This application demonstrates how to use a KinomaJS media object to play HTTP streams, build custom user interface elements with HTML Canvas 2D, use a proxy handler to fetch data from a web service, and use KinomaJS effects and layers to implement an animated image collage. You can optionally stream channel selections to a PubNub channel by changing the keys in credentials.js.
This MobileFramework example for Kinoma Create streams live radio from the SomaFM service. Channels are selected using a touch-controlled scrolling tuner. A music-artist image collage is displayed and updated on track changes. This sample demonstrates how to use a KinomaJS media object to play HTTP streams, build custom user interface elements with HTML Canvas 2D, use a proxy handler to fetch data from a web service, and use KinomaJS effects and layers to implement an animated image collage. The SomaFM player also supports KinomaJS DIAL and can be controlled remotely by the somafm-remote sample.
This MobileFramework phone application streams live radio from the SomaFM service and can be used to remotely control the somafm-player sample. Using KinomaJS DIAL, this application discovers the SomaFM player application running on Kinoma Create and can change channels and the volume level remotely. Channels are selected using a touch-controlled scrolling tuner. A music-artist image collage is displayed and updated on track changes. This sample demonstrates how to use the KinomaJS media object to play HTTP streams, build custom user interface elements with HTML Canvas 2D, use a proxy handler to fetch data from a web service, and use KinomaJS effects and layers to implement an animated image collage.
This sample displays a mockup camera preview with a shutter button. Tapping the button plays a shutter sound. The application calls Sound.play to play a WAVE file. It also demonstrates how to use a transition to simulate the shutter closing and opening.
This sample displays a spinning busy indicator by rotating a custom graphic using a periodic timer. The application displays the indicator half size by setting the scale and origin properties of the graphic's picture.
This simple application demonstrates SSDP usage. It starts an HTTP server on port 1234, registers an SSDP device with type ssdp.example.kinoma.marvell.com, and advertises a UPnP MediaRenderer with the AVTransport, ConnectionManager, and RenderingControl services. It also looks for available HTTP servers on the local network.
This sample demonstrates how to use content states to change a button's background and text colors when the button is tapped. The text color is defined by the text's style states. The button background color is defined by the skin states.
This sample (which is best viewed on a tablet-sized screen or simulator) demonstrates how KinomaJS cascades styles in the containment hierarchy. Content inherits the characteristics of its container style when the characteristics are undefined in the content's style. In this sample, applicationStyle defines a style for the root of the containment hierarchy, and nested containers build on applicationStyle by overriding various style characteristics, including point size, alignment, and color.
This sample displays a vertical scrolling column of text formatted with a wide variety of styles. It demonstrates the use of all the common text style attributes, including font, style, point size, alignment, leading, color, and margins.
This MobileFramework example demonstrates how to build a tabbed user interface screen. Each tab opens a different style pane. The tabs, which are placed in the screen footer area, are built using the MobileFramework screen's TabFooter object and skinned using the default sample theme tab skins. The tab-to-tab transition is managed by MobileFramework's TabListSwapTransition object. You can customize the tab look and behaviors by replacing or overriding these objects. For example, you can use the MobileFramework screen's TabLine object to implement a tab bar that can be placed anywhere on the screen and without icons.
This MobileFramework example demonstrates how to use KinomaJS to get and set various KinomaJS text and style properties, including font, point size, style, alignment, indentation, and margins. It also shows how to implement tappable text links and use text spans to display multi-styled text blocks. Tapping the settings button displays a scrolling menu of text and style options.
This sample demonstrates how to use tiled skins to fill content. It includes examples of nine-part and three-part horizontal/vertical tiled skins. The nine-part container is a button that changes color (state) when tapped. The application also shows how to use a layer to display rotated text.
This sample demonstrates how to use different timer techniques: one-shot, interval, repeating, handler.wait, and container.wait. It uses an interval timer to animate skin states.
This sample demonstrates the array of easing functions available for use when designing transitions. A simple "slide off" transition is displayed using the selected easing function.
This sample demonstrates how to use the Transitions library to configure and use a variety of transitions. The host application can further customize the behavior of each transition by overriding its duration and easing function used for pacing time.
This sample shows how to configure and capture recorded audio into a WAVE file.
This sample demonstrates how to build a simple web server with KinomaJS. Setting the application shared property to true shares the application as a service on the local network and enables the HTTP server. The application shows how to support GET and POST requests and serve static and dynamic web pages with images. Transactions are displayed in a scrolling log view.
This MobileFramework example demonstrates how to implement a WebSocket client in KinomaJS. Coupled with the websocket-server example, it implements a WebSocket-based chat client. The client discovers and connects to the server using SSDP and exchanges text messages with the server. This application is useful for understanding how to integrate WebSockets, use SSDP to discover server devices, and build user interfaces with editable text fields and transitions.
This sample demonstrates how to implement a WebSocket server in KinomaJS. Coupled with the websocket-client sample, it implements a WebSocket-based chat server. The client discovers and connects to the server using SSDP and, once the connection is established, exchanges text messages with the server. This application is useful for understanding how to build a WebSocket server and use KinomaJS text and scroller objects to display a scrolling list of messages.
This sample demonstrates how to issue an HTTP request to the OpenWeatherMap service and use the DOM parsing API of KinomaJS to parse the XML response. The temperature for the requested city is displayed. The application shows how to invoke a HTTP request to a web service, parse the XML response, display a busy indicator while waiting for the result, and implement a tappable link that opens in the device browser. (Note, browser support may not be available on all platforms.)
This simple application demonstrates Zeroconf usage. It starts an HTTP server on port 1234 and registers it with a service named "Sample Server". It also looks for available HTTP servers and services on the local network. To run this application in the simulators on Windows, first install Apple iTunes.
This sample integrates Digi's XBee radio (available as SparkFun WRL-10414) with GE Link light bulbs to build a ZigBee Home Automation gateway with Kinoma Create. The application shows how to commission, discover, and control the bulbs on the ZigBee network. See the Home Automation project for more information.
These samples are licensed under the Apache License, Version 2.0.