grunig-nodes/nodes/G-FrameManager.html

Grünig Nodes Library

<script type="text/javascript">
    RED.nodes.registerType('G-FrameManager', {
        category: 'Grunig',
        color: 'rgb(176, 223, 227)',
        defaults: {
            name: { value: "" },
            frameId: { value: "" },
            process: { value: "none" },
            function: { value: "none" },
            database: { value: "", type: "remote-database" }
        },
        inputs: 1,
        outputs: 1,
        icon: "leveldb.svg",
        label: function() {
            return this.name || "G-FrameManager";
        },
        oneditprepare: function() {            
            // Verweis auf das aktuelle Knotenobjekt
            var node = this;

            // Eingabefeld für den Namen
            var nameInput = $("#node-config-input-name");
            nameInput.val(node.name);

            // Eingabefeld für die frameId
            var frameIdInput = $("#node-config-input-frameid");
            frameIdInput.val(node.frameId);

            // Eingabefeld für den process
            var processInput = $("#node-config-input-process");
            processInput.val(node.process);

            // Eingabefeld für die Funktion
            var functionInput = $("#node-config-input-function");
            functionInput.val(node.function);

            // Änderungsereignis für den Namen
            nameInput.on("change", function() {
                node.name = nameInput.val();
                RED.nodes.node(node.id).changed = true;
                RED.nodes.dirty(true);
            });

            // Änderungsereignis für die frameId
            frameIdInput.on("change", function() {
                node.frameId = frameIdInput.val();
                RED.nodes.node(node.id).changed = true;
                RED.nodes.dirty(true);
            });

            // Änderungsereignis für den process
            processInput.on("change", function() {
                node.process = processInput.val();
                RED.nodes.node(node.id).changed = true;
                RED.nodes.dirty(true);
            });

            // Änderungsereignis für die Funktion
            functionInput.on("change", function() {
                node.function = functionInput.val();
                RED.nodes.node(node.id).changed = true;
                RED.nodes.dirty(true);
            });
        }
    });
</script>

<!-- Styles -->
<style>
    div.form-row label {
        width: 140px;
        display: contents;
    }

    .form-row {
        margin-bottom: 10px;
    }
</style>

<script type="text/html" data-template-name="G-FrameManager">
    <div class="form-row">
        <label for="node-config-input-name">
            <i class="fa fa-tag"></i> Name
        </label>
        <input type="text" id="node-config-input-name" placeholder="Enter name">
    </div>
    <div class="form-row">
        <label for="node-config-input-frameid">
            <i class="fa fa-picture-o"></i> FrameID
        </label>
        <input type="text" id="node-config-input-frameid" placeholder="Enter Frame ID">
    </div>
    <div class="form-row">
        <label for="node-config-input-process">
            <i class="fa fa-cogs"></i> Process
        </label>
        <select id="node-config-input-process">
            <option value="none">Get from Payload</option>
            <option value="FrameCleaning">Frame cleaning</option>
            <option value="Stretching">Stretching</option>
            <option value="Coating">Coating</option>
            <option value="Exposing">Exposing</option>
            <option value="Developing">Developing</option>
            <option value="Printing">Printing</option>
            <option value="Washing">Washing</option>
            <option value="Decoating">Decoating</option>
            <option value="Decreasing">Decreasing</option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-config-input-function">
            <i class="fa fa-gear"></i> Function
        </label>
        <select id="node-config-input-function">
            <option value="none">Get from Payload</option>
            <option value="ReadProgram">Read Program</option>
            <option value="ReadAllData">Read All Data</option>
            <option value="CounterIncrease">Counter Increase</option>
        </select>
    </div>

    <div style="height: 20px;"></div>
    
    <div class="form-row">
        <label for="node-input-database"><i class="fa fa-tag"></i>Database</label>
        <input type = "text" id="node-input-database">
    </div>
</script>