node-red-contrib-tello/tello.html

Tello control using Node-RED

<script type="text/javascript">
    RED.nodes.registerType('takeoff',{
        category: 'Tello',
        color: '#ff993f',
        defaults: {
            name: {value:""},
        },
        inputs:1,
        outputs:1,
        icon: "font-awesome/fa-plane",
        label: function() {
            return this.name||"takeoff";
        }
    });

    RED.nodes.registerType('land',{
        category: 'Tello',
        color: '#ff993f',
        defaults: {
            name: {value:""},
        },
        inputs:1,
        outputs:1,
        icon: "font-awesome/fa-plane",
        label: function() {
            return this.name||"land";
        }
    });

    RED.nodes.registerType('up',{
        category: 'Tello',
        color: '#ff993f',
        defaults: {
            name: {value:""},
            distance: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "font-awesome/fa-plane",
        label: function() {
            return this.name||"up";
        }
    });

    RED.nodes.registerType('down',{
        category: 'Tello',
        color: '#ff993f',
        defaults: {
            name: {value:""},
            distance: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "font-awesome/fa-plane",
        label: function() {
            return this.name||"down";
        }
    });

    RED.nodes.registerType('forward',{
        category: 'Tello',
        color: '#ff993f',
        defaults: {
            name: {value:""},
            distance: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "font-awesome/fa-plane",
        label: function() {
            return this.name||"forward";
        }
    });

    RED.nodes.registerType('back',{
        category: 'Tello',
        color: '#ff993f',
        defaults: {
            name: {value:""},
            distance: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "font-awesome/fa-plane",
        label: function() {
            return this.name||"back";
        }
    });

    RED.nodes.registerType('right',{
        category: 'Tello',
        color: '#ff993f',
        defaults: {
            name: {value:""},
            distance: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "font-awesome/fa-plane",
        label: function() {
            return this.name||"right";
        }
    });

    RED.nodes.registerType('left',{
        category: 'Tello',
        color: '#ff993f',
        defaults: {
            name: {value:""},
            distance: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "font-awesome/fa-plane",
        label: function() {
            return this.name||"left";
        }
    });

    RED.nodes.registerType('clockwise',{
        category: 'Tello',
        color: '#ff993f',
        defaults: {
            name: {value:""},
            deg: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "font-awesome/fa-plane",
        label: function() {
            return this.name||"clockwise";
        }
    });

    RED.nodes.registerType('counterclockwise',{
        category: 'Tello',
        color: '#ff993f',
        defaults: {
            name: {value:""},
            deg: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "font-awesome/fa-plane",
        label: function() {
            return this.name||"counterclockwise";
        }
    });

    RED.nodes.registerType('flip',{
        category: 'Tello',
        color: '#ff993f',
        defaults: {
            name: {value:""},
            direction: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "font-awesome/fa-plane",
        label: function() {
            return this.name||"flip";
        }
    });

    RED.nodes.registerType('speed',{
        category: 'Tello',
        color: '#ff993f',
        defaults: {
            name: {value:""},
            speed: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "font-awesome/fa-plane",
        label: function() {
            return this.name||"speed";
        }
    });

    RED.nodes.registerType('state',{
        category: 'Tello',
        color: '#ff993f',
        defaults: {
            name: {value:""},
            command: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "font-awesome/fa-search",
        label: function() {
            return this.name||"state";
        }
    });

    RED.nodes.registerType('streamon',{
        category: 'Tello',
        color: '#ff993f',
        defaults: {
            name: {value:""},
        },
        inputs:1,
        outputs:1,
        icon: "font-awesome/fa-video-camera",
        label: function() {
            return this.name||"streamon";
        }
    });

    RED.nodes.registerType('streamoff',{
        category: 'Tello',
        color: '#ff993f',
        defaults: {
            name: {value:""},
        },
        inputs:1,
        outputs:1,
        icon: "font-awesome/fa-video-camera",
        label: function() {
            return this.name||"streamoff";
        }
    });
</script>

<!-- takeoff Node -->
<script type="text/x-red" data-template-name="takeoff">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/x-red" data-help-name="takeoff">
    <p>This node sends command 'takeoff' to Tello</p>
</script>

<!-- land Node -->
<script type="text/x-red" data-template-name="land">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/x-red" data-help-name="land">
    <p>This node sends command 'land' to Tello</p>
</script>

<!-- up Node -->
<script type="text/x-red" data-template-name="up">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-distance">Distance(cm)</label>
        <input type="number" id="node-input-distance" placeholder="Distance">
    </div>
</script>

<script type="text/x-red" data-help-name="up">
    <p>This node sends command 'down' to Tello</p>
    <p>Distance required 20-500</p>
    <p>If Distance form is blank, it refers <code>msg.payload</code> value</p>
</script>

<!-- down Node -->
<script type="text/x-red" data-template-name="down">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-distance">Distance(cm)</label>
        <input type="number" id="node-input-distance" placeholder="Distance">
    </div>
</script>

<script type="text/x-red" data-help-name="down">
    <p>This node sends command 'down' to Tello</p>
    <p>Distance required 20-500</p>
    <p>If Distance form is blank, it refers <code>msg.payload</code> value</p>
</script>

<!-- forward Node -->
<script type="text/x-red" data-template-name="forward">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-distance">Distance(cm)</label>
        <input type="number" id="node-input-distance" placeholder="Distance">
    </div>
</script>

<script type="text/x-red" data-help-name="forward">
    <p>This node sends command 'forward' to Tello</p>
    <p>Distance required 20-500</p>
    <p>If Distance form is blank, it refers <code>msg.payload</code> value</p>
</script>


<!-- back Node -->
<script type="text/x-red" data-template-name="back">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-distance">Distance(cm)</label>
        <input type="number" id="node-input-distance" placeholder="Distance">
    </div>
</script>

<script type="text/x-red" data-help-name="back">
    <p>This node sends command 'back' to Tello</p>
    <p>Distance required 20-500</p>
    <p>If Distance form is blank, it refers <code>msg.payload</code> value</p>
</script>

<!-- right Node -->
<script type="text/x-red" data-template-name="right">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-distance">Distance(cm)</label>
        <input type="number" id="node-input-distance" placeholder="Distance">
    </div>
</script>

<script type="text/x-red" data-help-name="right">
    <p>This node sends command 'right' to Tello</p>
    <p>Distance required 20-500</p>
    <p>If Distance form is blank, it refers <code>msg.payload</code> value</p>
</script>


<!-- left Node -->
<script type="text/x-red" data-template-name="left">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-distance">Distance(cm)</label>
        <input type="number" id="node-input-distance" placeholder="Distance">
    </div>
</script>

<script type="text/x-red" data-help-name="left">
    <p>This node sends command 'left' to Tello</p>
    <p>Distance required 20-500</p>
    <p>If Distance form is blank, it refers <code>msg.payload</code> value</p>
</script>

<!-- clockwise Node -->
<script type="text/x-red" data-template-name="clockwise">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-deg">Angle(deg)</label>
        <input type="number" id="node-input-deg" placeholder="Angle">
    </div>
</script>

<script type="text/x-red" data-help-name="clockwise">
    <p>This node sends command 'cw' to Tello</p>
    <p>Angle required 1-360</p>
    <p>If Angle form is blank, it refers <code>msg.payload</code> value</p>
</script>

<!-- counterclockwise Node -->
<script type="text/x-red" data-template-name="counterclockwise">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-deg">Angle(deg)</label>
        <input type="number" id="node-input-deg" placeholder="Angle">
    </div>
</script>

<script type="text/x-red" data-help-name="counterclockwise">
    <p>This node sends command 'ccw' to Tello</p>
    <p>Angle required 1-360</p>
    <p>If Angle form is blank, it refers <code>msg.payload</code> value</p>
</script>

<!-- flip Node -->
<script type="text/x-red" data-template-name="flip">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-direction">Direction</label>
        <select id="node-input-direction" placeholder="Direction">
            <option value="f">forward</option>
            <option value="b">back</option>
            <option value="l">left</option>
            <option value="r">right</option>
        </select>
    </div>
</script>

<script type="text/x-red" data-help-name="flip">
    <p>This node sends command 'flip' to Tello</p>
    <p>Direction required to choose from selectbox</p>
</script>

<!-- Speed Node -->
<script type="text/x-red" data-template-name="speed">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-speed">Speed(cm/s)</label>
        <input type="number" id="node-input-speed" placeholder="Speed">
    </div>
</script>

<script type="text/x-red" data-help-name="speed">
    <p>This node sends command 'speed' to Tello</p>
    <p>Distance required 10-100</p>
    <p>If Speed form is blank, it refers <code>msg.payload</code> value</p>
</script>

<!-- streamon Node -->
<script type="text/x-red" data-template-name="streamon">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/x-red" data-help-name="streamon">
    <p>This node sends command 'streamon' to Tello</p>
</script>

<!-- streamoff Node -->
<script type="text/x-red" data-template-name="streamoff">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/x-red" data-help-name="streamoff">
    <p>This node sends command 'streamoff' to Tello</p>
</script>

<!-- Ask State Node -->
<script type="text/x-red" data-template-name="state">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-command">Command</label>
        <select id="node-input-command" placeholder="Command">
            <option value="battery?">battery?</option>
            <option value="speed?">speed?</option>
            <option value="time?">time?</option>
            <option value="height?">height?</option>
            <option value="temp?">temp?</option>
            <option value="attitude?">attitude?</option>
            <option value="baro?">baro?</option>
            <option value="acceleration?">acceleration?</option>
            <option value="tof?">tof?</option>
            <option value="wifi?">wifi?</option>
        </select>
    </div>
</script>
<script type="text/x-red" data-help-name="state">
    <p>This node sends state commands to Tello</p>
    <p>These commands select from selectbox</p>
</script>