qwe demo

Shows how to use the qwe library

by Fabio Filasieno

HTML

<script src="https://cdn.rawgit.com/filasienof/qwe/master/web/js/qwe.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/filasienof/qwe/master/web/css/style.css">
<div id="container-box">
    <div id="left-col">

        <h2 id="diagramTitle">Click the on a state and watch the log</h2>

        <div id="StateA" class="state box">
            state <strong>A</strong>

            <div id="StateB" class="state box">
                state <strong>B</strong> <span class="first-state">*</span>

                <div id="StateC" class="state box">
                    state <strong>C</strong>

                    <div id="StateD" class="state box">
                        state <strong>D</strong> <span class="first-state">*</span><br/><br/>
                    </div>
                    <div id="StateE" class="state box">
                        state <strong>E</strong><br/>
                    </div>
                </div>
                <div id="StateF" class="state box">
                    state <strong>F</strong> <span class="first-state">*</span>

                    <div id="StateG" class="state box">
                        state <strong>G</strong><br/>
                    </div>
                    <div id="StateH" class="state box">
                        state <strong>H</strong> <span class="first-state">*</span><br/>
                    </div>
                </div>
                <div id="StateX" class="state box">
                    state <strong>X</strong>
                </div>
            </div>
            <div id="StateY" class="state box">
                state <strong>Y</strong>
            </div>
        </div>
        <div id="StateZ" class="state box">
            state <strong>Z</strong>
        </div>

    </div>
    <div id="right-col">
        <div id="right-col-container">
            <h2>Diagram</h2>
            <p class="diagram-description">
                States are classified in <strong>leaf</strong> and...

JavaScript

qwe.dbgMode(true);
var log = $('#log');

var StateA = qwe.state('StateA');
StateA.trace  = function(text) {
    var state = this.hsm.state;
    log.append(state.name +': ' + text + '\n');
};
StateA.moveTo = function(e, state){ 
    log.append('executing Action "moveTo" ' + state.name +'\n');
    this.hsm.tran(state); 
};

var StateB = qwe.state('StateB', StateA);
var StateC = qwe.state('StateC', StateB, false);
var StateD = qwe.state('StateD', StateC);
var StateE = qwe.state('StateE', StateC);
var StateF = qwe.state('StateF', StateB);
var StateG = qwe.state('StateG', StateF, false);
var StateH = qwe.state('StateH', StateF);
var StateX = qwe.state('StateX', StateB);
var StateY = qwe.state('StateY', StateA);
var StateZ = qwe.state('StateZ');
// A Whole new state machine
StateZ.trace  = function(text) {
    var state = this.hsm.state;
    log.append(state.name +': ' + text + '\n');
};
StateZ.moveTo = function(e, state){ this.hsm.tran(state); };


function MyObject(){
    // Put here any state you want
}

var obj = new MyObject();
qwe.init(obj, StateA, function(srcState, currState){
    this.hsm.trace('Previous state was: ' + srcState.name);
    this.hsm.trace('Current state is: ' + currState.name);
});

///////////////////////////////////////////////////////////////////////////////////////
// From here just the scene setup
///////////////////////////////////////////////////////////////////////////////////////

log.html('');
log.append('qwe.dbgInspectState:\n');
log.append(qwe.dbgInspectState(StateA));
log.append('HSM Initialized\nClick on the diagram!\n');

function createEventHandler(state){
    function handler(e){
        log.html('');
        log.append('clicked ' + state.name + '\n');
        e.stopImmediatePropagation();
        obj.hsm.send('moveTo', state);
    }
    return handler;
}

$('#StateA').on('click', createEventHandler(StateA));
$('#StateB').on('click', createEventHandler(StateB));
$('#StateC').on('click',...