Open repository for Flow components
Clone or download
Latest commit 76ce6bd Jan 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
alexaresponse Added components for implmentation of Alexa skils using TotalJS flow. Jun 3, 2018
alexarouter Fixed jComponent. Dec 17, 2018
code Improved components. Sep 2, 2018
commandercommands New improvements. Aug 6, 2017
commanderdependencies Fix height. Feb 9, 2018
commanderoutput Add new components. May 29, 2017
comment Added/changed icons May 1, 2018
console Added/changed icons May 1, 2018
count Updated to follow coding standards. May 24, 2018
counter Added icons May 5, 2018
cron Updated cron May 11, 2018
dashboardanalytics Improved stats. Nov 14, 2018
dashboardgroupanalytics Improved streamer for stats. Nov 14, 2018
dashboardoutput Added icons May 5, 2018
debug Update debug.js Jan 9, 2019
delay Updated groups Jan 27, 2018
device_light Added/changed icons May 1, 2018
device_outlet Added/changed icons May 1, 2018
device_switch Added icons May 5, 2018
device_thermostat Added/changed icons May 1, 2018
duration Updated groups Jan 27, 2018
email Improved components. Oct 12, 2018
eval Added eval component. Apr 5, 2018
event Improved component. Jan 15, 2019
feedtodelay Updated groups Jan 27, 2018
fi Improved FiFo components. Apr 5, 2018
filereader Added filereader May 31, 2018
filewriter Improved components. Apr 6, 2018
flowboardlight Merge branch 'master' of https://github.com/totaljs/flowcomponents May 15, 2018
flowboardoutput Fixed typo. May 15, 2018
flowboardsocket Fixed typos Jun 18, 2018
fo Improved FiFo components. Apr 5, 2018
ftpupload Added FTP upload. Jan 10, 2019
function Improved components. Sep 2, 2018
httpdownloader Fix grammar. Jan 26, 2018
httpgeoip Clean code. Dec 22, 2017
httplistener Fix components. Jan 26, 2018
httpreceiver Clean code. Dec 22, 2017
httpredirect Updated HTTP Redirect component. Jan 21, 2018
httprequest Removed `url` type from textbox. Feb 13, 2018
httpresponse Added better error handling. Jul 3, 2018
httproute Added `PATCH` method by Herve PROT. Jul 3, 2018
ifttthookrequest Added icons May 5, 2018
lastdata Clean code. Dec 22, 2017
lastusage Add updating date. Jan 19, 2018
logtodb Added icons May 5, 2018
megatimer Updated groups Jan 27, 2018
merge Clean code. Dec 22, 2017
mergetoobject Clean code. Dec 22, 2017
messengermessage Updated groups Jan 27, 2018
messengerrawdata Updated groups Jan 27, 2018
messengersender Updated groups Jan 27, 2018
messengerusers Updated groups Jan 27, 2018
modified Clean code. Dec 22, 2017
monitorconsumption Improved components. Apr 6, 2018
monitorcpu Clean code. Dec 22, 2017
monitordisk Clean code. Dec 22, 2017
monitormemory Clean code. Dec 22, 2017
monitornetwork Clean code. Dec 22, 2017
monitorprocess Clean code. Dec 22, 2017
monitorsuperadmin Clean code. Dec 22, 2017
mosca Added/changed icons May 1, 2018
mqtt Improved mqtt May 17, 2018
mqttpublish Improved mqtt May 17, 2018
mqttsubscribe Improved mqtt May 17, 2018
netatmo Update UI. Aug 7, 2017
nosql Improved components. Oct 12, 2018
pagerenderer Fix UI components. Aug 7, 2017
pagetemplate Improved components Aug 17, 2017
parser Clean code. Dec 22, 2017
pass Added icons May 5, 2018
range Added icons May 5, 2018
repository Disabled cloning. Jan 21, 2018
restcors Improved code. Aug 28, 2018
restexecoperation Added `controller` reference. Jul 26, 2018
restinterpreter Disabled cloning. Jan 21, 2018
restmiddleware Improve code. Jan 23, 2018
restoperation Fix typo. Jan 22, 2018
restproxy Fixed schema param. Sep 14, 2018
restresponse Fix readme. Jan 23, 2018
restroute Improved code. Aug 28, 2018
restschema New improvements. Jan 20, 2018
scheduler New changes. Feb 18, 2018
schema Fixed schema error handling. May 24, 2018
sms Clean code. Dec 22, 2017
split Fixed code. Jan 18, 2019
switch Fixed jComponent. Dec 17, 2018
template Clean code. Dec 22, 2017
timer Added default timer. Apr 1, 2018
transform Improve CodeMirror for DataTransform component. Jan 21, 2018
trigger Added/changed icons May 1, 2018
triggertoggle Improved triggertoggle May 17, 2018
twilio Clean code. Dec 22, 2017
uniqueinterval Added icons May 5, 2018
virtualwirein Added icons May 5, 2018
virtualwireout Added icons May 5, 2018
wsclient Fixed wsclient May 14, 2018
wsserver Added WebSocket components to templates May 12, 2018
xlstojson Fixed xlstojson Jun 3, 2018
build.js Fixed paths. Jun 21, 2018
buildtemplates.js Added template file builder Jan 17, 2018
flow.js Add missing method. Jan 17, 2018
readme.md Readme.md typo Jun 17, 2018
templates.json Updated templates. Feb 24, 2018
templates4.json Merge branch 'master' of https://github.com/totaljs/flowcomponents May 15, 2018
templates5.json Added WebSocket components to templates May 12, 2018

readme.md

Total.js Flow Components

This repository contains all Total.js Flow components.

Requirements:

  • install Node.js platform +v6
  • install Total.js framework $ npm install total.js
  • important Flow 4.0

Creating own components

  • clone an existing component
  • keep unique identificators
  • each component has to contain a test file YOURCOMPONENTNAME-run.js
  • keep readme 1:1 with readme in the component declaration

How to install a component to my Total.js Flow?

  • choose your component from this repository
  • upload componentname.js (via database icon in designer)
  • don't upload readme.md and componentname-run.js

Component API

  • IMPORTANT: exports.id can contain a-z 0-9 chars only.
// {String}, IMPORTANT (lower case without diacritics)
exports.id = 'component';

// {String}, optional (default: "component name")
exports.title = 'A component name (for human)';

// {String}, optional (default: "#656D78")
exports.color = '#656D78'; // use darker colors because the font color is "white"

// {Boolean}, optional (default: false)
exports.click = true;

// {Number}, optional (default: 0)
// +v3.0.0
exports.input = 0;

// or {Array of Colors}, input will have 2 inputs (red and blue)
// +v3.0.0
exports.input = ['red', 'blue'];

// {Number}, optional (default: 0)
exports.output = 1;

// or {Array of Colors}, output will have 2 outputs (red and blue)
exports.output = ['red', 'blue'];

// {String}, optional (default: "Common")
exports.group = 'Common';

// {String}, optional (default: "Unknown")
exports.author = 'Peter Širka';

// {String}, optional (default: "")
// Font-Awesome icon without "fa-"
exports.icon = 'home';

// {String or Object}, optional (default: undefined)
exports.status = 'DEFAULT STATUS TEXT';
// or
exports.status = { text: 'DEFAULT STATUS TEXT', color: 'red' };

// {String Array}
// optional (default: undefined), NPM dependencies
exports.npm = ['sqlagent', 'mqtt'];

// {Object}, optional (default "undefined")
// Default options for new and existing instances
exports.options = { enabled: true };

// Disables data cloning
exports.cloning = false;

// {Boolean}, optional (default: true)
// +v4.0.0
// hides stats under component box in designer UI
exports.traffic = false;

// {String}, optional (format: 'yyyy-MM-dd HH:mm')
// +v4.0.0
// Updated date
exports.dateupdated = '2017-17-10';

exports.install = function(component) {

    // =====================
    // DELEGATES
    // =====================

    // A close delegate (optional)
    // - "callback" argument must be executed!
    component.close = function(callback) {
        // This instance will be killed.
        // use this if some asyncronous work needs to be done
        // alternatively use component.on('close',...
    };


    // =====================
    // EVENTS
    // =====================

    component.on('click', function() {
        // optional
        // the component was clicked on in the designer
        // usefull for enabling/disabling some behavior or triggering some actions
    });

    component.on('data', function(message) {

        // RAW DATA
        // returns {Object}
        message.data;

        // Write value to data repository
        // returns {Message}
        message.set('key', 'value');

        // Read value from data repository
        // returns {Object}
        message.get('key');

        // Remove value from data repository
        // returns {Message}
        message.rem('key');

        // {Object Array} Array of all components the message has passed through (previous components)
        message.tracking;

        // {Object} Parent component (first component which started the flow)
        message.parent;

        // {Boolean} Is completed?
        message.completed;

        // {DateTime}
        message.begin;

        // How can I modify data?
        message.data = { newdata: true };

        // send this message :-)
        component.send(message);
    });

    component.on('<input-number>', function(message) {
        // message as specified above in 'data' event
        // input 0 to event '0' and so on
    });

    component.on('options', function(new_options, old_options) {
        // optional
        // options have changed in the designer
        // instance.options holds the new_options already
    });

    component.on('variables', function(variables) {
        // +v3.0.0
        // optional
        // global variables have been changed
        // instance.variable(key)
    });

    component.on('close', function() {
        // optional
        // This instance will be killed
    });

    component.on('reinit', function() {
        // optional
        // Designer has been updated, but this instance still persists
        // This instance can have new connections.
    });

    component.on('signal', function(data, parent) {
        // optional
        // Captured signal
        // @data {Object} - optional, can be "null", or "undefined"
        // @parent {Component} - a component which created this signal
    });

    component.on('service', function(counter) {
        // optional
        // Service called each 1 minute
    });

    // =====================
    // METHODS
    // =====================

    component.status(message, [color]);
    // Sends a status to designer
    // @message: {String/Object} - string will be formatted as markdown and object as JSON
    // color: {String} - "black" (default: "gray")

    component.debug(message, [style]);
    // Sends a debug message
    // @message: {String/Object} - string will be formatted as markdown and object as JSON
    // style: {String} - "info", "warning", "error" (default: "info")

    component.hasConnection(index);
    // Calculates connections
    // @index: {Number}
    // returns {Number}

    var message = component.send([index], data);
    message.set('repositorykey', 'value');
    console.log(message.get('repositorykey'));
    // Sends data
    // @index: {Number} - optional, the output index (otherwise all outputs)
    // @data: {String/Object}
    // returns Message;

    var message = component.send2([index], data);
    if (message) {
        // message will be sent
    } else {
        // no connections
    }
    // +v3.0.0
    // Alias for component.send() but with a check of connections

    component.set(key, value);
    // Writes a value to a private key-value store (data are stored on HDD)
    // @key {String}
    // @value {Object}
    // returns {Component}

    component.get(key);
    // Reads a value from a private key-value store (data are stored on HDD)
    // @key {String}
    // returns {Object}

    component.make(data);
    // Creates a new FlowData/Message instance.
    // @data {Object}
    // returns {Message}

    component.rem(key);
    // Removes a value from a private key-value store (data are stored on HDD)
    // @key {String}
    // returns {Component}

    component.variable(key);
    // +v3.0.0
    // Reads a value from global variables
    // @key {String}
    // returns {Object}

    component.signal([index], [data]);
    // Sends a signal to first connection (it emits "signal" event in target connection)
    // @index {Number} - optional, an output index (default: "undefined" --> all connections)
    // @data {Object} - optional, an additional data
    // returns {Component}

    component.click();
    // Performs click event.
    // returns {Component}

    component.log([a], [b], [c], [d]);
    // Writes some info into the log file
    // returns {Component}

    component.error(err, [parent|response|component]);
    // Creates error
    // returns {Component}

    component.save();
    // Saves current options, useful when options are changed internally. Options from settings form are saved automatically
    // returns {Component}

    component.reconfig();
    // If the component options changes on the server (not by recieving new options from designer) then use this to update options in designer

    // =====================
    // PROPERTIES
    // =====================

    component.custom;
    // {Object} - empty object for custom variables and methods

    component.name;
    // {String} - readonly, a component name (USER-DEFINED)

    component.reference;
    // {String} - readonly, a component reference (USER-DEFINED)

    component.options;
    // {Object} - readonly, custom settings

    component.state;
    // {Object} - readonly, latest state

    component.connections;
    // {Object} - readonly, all connections
};

exports.uninstall = function() {
    // OPTIONAL
};

Message

When is the message instance created?

// FIRST CASE:
component.on('data', function(message) {
    // Properties:
    message.id;               // {Number} A message identificator
    message.index;            // {Number} An input number
    message.begin;            // {Date} when it started
    message.data;             // {Anything} user defined data
    message.completed;        // {Boolean} is sending completed?
    message.tracking;         // {Array of Instances} all instances in order which they modified data
    message.parent;           // {Component} a parent instance

    // Methods (private message repository):
    message.set(key, value);  // Sets a key-value to message repository (doesn't modify data)
    message.get(key);         // Gets a key-value (doesn't read data from "data")
    message.rem(key);         // Removes a key-value (doesn't read data from "data")
    message.rewrite(data);    // Rewrites the current with new
});

// SECOND CASE
var message = component.send('YOUR-DATA-TO-CHILD-CONNECTIONS');

Multiple inputs

// data from all inputs go to 'data' event
component.on('data', function(message) {
    // message as specified above
    message.index; // Input number
});

// data from specific input go also to the corresponding event -> input 0 to event '0'
component.on('0', function(message) {
    // message as specified above
});

Client-Side

Events

ON('open.componentname', function(component, options) {
    // Settings will be open
});

ON('save.componentname', function(component, options) {
    // Settings will be save
});

ON('select.componentname', function(component) {
    // A component has been selected in designer.
});

ON('click.componentname', function(component) {
    // Performed "click"
});

ON('add.componentname', function(component) {
    // A component has been added.
});

ON('rem.componentname', function(component) {
    // A component has been removed.
});

ON('apply', function() {
    // Designer will be sent to server and then will be applied
});

Good to know

How to change count of outputs/inputs dynamically?

v3.0.0 This is possible on client-side only.

ON('save.componentname', function(component, options) {

    component.output = 5;
    // component.input = 3;

    // or
    component.output = ['green', 'red', 'blue'];
    // component.input = ['green', 'red', 'blue'];

    // or set output to default
    component.output = null;
    // component.input = null;
});

Components: jComponent +v11.0.0

Bellow jComponents can be used in Settings form:

  • autocomplete (declared body)
  • binder (declared in body)
  • calendar (declared in body)
  • checkbox
  • checkboxlist
  • codemirror
  • colorpicker (declared in body)
  • confirm (declared in body)
  • contextmenu (declared in body)
  • dropdown
  • dropdowncheckbox
  • error
  • exec (declared in body)
  • form
  • importer
  • keyvalue
  • loading
  • message (declared in body)
  • nosqlcounter
  • repeater
  • repeater-group
  • search
  • selectbox
  • textbox
  • textboxlist
  • validation
  • visible
  • multioptions
  • dragdropfiles
  • filereader

References:


Support

Total.js Support is applied for components which are from developers: Peter Širka and Martin Smola. Do you want own components? Contact us.

Contact