grunig-nodes
Version:
Grünig Nodes Library
242 lines (212 loc) • 12.5 kB
HTML
<script type="text/javascript">
RED.nodes.registerType('Magazine-Position', {
category: 'Grunig',
color: 'rgb(176, 223, 227)',
defaults: {
name: { value: ""},
posTextOnly: { value: false},
magSelect: { value: "Mag2"},
// Data-Felder
magType: { value: 10},
invertDirection: { value: false},
magLoadingPos: { value: -11},
magLoadingTime: { value: 6},
magMoveTime: { value: 1},
magFormat: { value: "height"},
forceIncrementValue: { value: false},
incrementValue: { value: -1.42},
invertedIncrementValue: { value: -1.42},
//description: { value: "# Übergabe der Werte\nDie Werte Magazin Position und MachineID müssen durch einen Funktions-Node übergeben werden.\n\nCode:\n\n msg.payload = {};\n msg.payload.MachineNameSVG = flow.get(\"fMachineNameSVG\");\n msg.payload.Mag1Pos = flow.get(\"fMag1Pos\");\n msg.payload.Mag2Pos = flow.get(\"fMag2Pos\");\n msg.payload.Mag1Locked = flow.get(\"mag1Locked\");\n msg.payload.Mag2Locked = flow.get(\"mag2Locked\");\n return msg;\n\n---\n\n# Magazin Auswahl\nEs muss ausgewählt werden welches Magazin vorhanden ist.\n\nMagazin 1 ist beim \"Eingang\" der Maschine.\n\nMagazin 2 ist beim \"Ausgang\" der Maschine.\n\n\n---\n\n# Mag Typ\nAuswahl ob das Magazin ein 5er oder 10er Magazin ist.\n\n---\n\n# Selector\nHier kommt der Name der Animation, der beim SVG-Node deklariert werden muss.\n\nBeispiel:\n\n #G170E350_Mag2Move\n\n---\n\n# Richtung invertieren\nDas Invertiert die richtung des Magazins. \n\nMagazin Position 1 und 10 werden getauscht.\n\n---\n\n# Mag Ladeposition\nDas ist die Position, an der das Magazin entladen und geladen wird.\n\nDer Wert kann je nach SVG abweichen.\n\nWertempfehlung:\n\n 11\n\nDer Wert muss durch ausprobieren genauer ermittelt werden.\n\n---\n\n# Mag Ladezeit\nHier kommt die Zeit, die benötigt wird um das Magazin zur Entlade- / Ladeposition zu verschieben in Sekunden.\n\nWertempfehlung:\n\n 6\n\n---\n\n# Mag Bewegungszeit\nDas ist die Zeit, die benötigt wird um das Magazin von einer Position zur nächsten Position zu verschieben in Sekunden.\n\nWertempfehlung:\n\n 1-2\n\n---\n\n# Mag Format\nEs muss ausgewählt werden ob das Magazin in Quer- oder Hochformat ist.\n\n---\n\n# Inkrementwert erzwingen\nWenn das gesetzt wird, müssen Inkrementwerte eingegeben werden.\n\nDer Inkrementwert ist die Distanz, von einer Position zur nächsten Position vom Magazin.\n\nEs kann sein, je nach SVG, dass diese Distanz abweicht und dann kann man Manuell den Wert eingeben.\n\n---\n\n# Inkrementwert / Invertierter Inkrementwert\nDiese Felder müssen nur ausgefüllt werden, wenn __Inkrementwert erzwingen__ ausgewählt ist.\n\nDer Invertierte Inkrementwert wird nur benötigt, wenn __Richtung invertieren__ ausgewählt ist." }
},
description: "Test",
inputs:1,
outputs:1,
icon: "sort.svg",
label: function() {
return this.name || "Magazine-Position";
},
oneditprepare: function() {
// Diese Funktion wird ausgeführt, wenn das Formular zum Bearbeiten des Knotens geladen wird
// Verweis auf das aktuelle Knotenobjekt
var node = this;
node.dirty = true;
// Eingabefeld für den Namen
var nameInput = $("#node-config-input-name");
nameInput.val(node.name);
// Checkbox posTextOnly
var posTextOnlyInput = $("#node-config-input-postextonly");
posTextOnlyInput.prop('checked', node.posTextOnly);
// Selector für Magazin
var magSelectInput = $("#node-config-input-magselect");
magSelectInput.val(node.magSelect);
// Eingabefeld für den Magazine Typ
var magTypeInput = $("#node-config-input-magtypeinput");
magTypeInput.val(node.magType);
// Checkbox invertDirection
var invertDirectionInput = $("#node-config-input-invertdirectioninput");
invertDirectionInput.prop('checked', node.invertDirection);
// Eingabefeld für die magLoadingPos
var magLoadingPosInput = $("#node-config-input-magloadingposinput");
magLoadingPosInput.val(node.magLoadingPos);
// Eingabefeld für die magLoadingTime
var magLoadingTimeInput = $("#node-config-input-magloadingtimeinput");
magLoadingTimeInput.val(node.magLoadingTime);
// Eingabefeld für die magMoveTime
var magMoveTimeInput = $("#node-config-input-magmovetimeinput");
magMoveTimeInput.val(node.magMoveTime);
// Selector für magFormat
var magFormatInput = $("#node-config-input-magformatinput");
magFormatInput.val(node.magFormat);
// Checkbox invertDirection
var forceIncrementValueInput = $("#node-config-input-forceincrementvalueinput");
forceIncrementValueInput.prop('checked', node.forceIncrementValue);
// Eingabefeld für incrementValue
var incrementValueInput = $("#node-config-input-incrementvalueinput");
incrementValueInput.val(node.incrementValue);
// Eingabefeld für die invertedIncrementValue
var invertedIncrementValueInput = $("#node-config-input-invertedincrementvalueinput");
invertedIncrementValueInput.val(node.invertedIncrementValue);
// Änderungsereignis für den Namen
nameInput.on("change", function() {
node.name = nameInput.val();
RED.nodes.dirty(true);
RED.nodes.node(node.id).changed = true;
});
// Änderungsereignis für posTextOnly
posTextOnlyInput.on("change", function() {
node.posTextOnly = posTextOnlyInput.prop('checked');
RED.nodes.dirty(true);
RED.nodes.node(node.id).changed = true;
});
// Änderungsereignis für magSelect
magSelectInput.on("change", function() {
node.magSelect = magSelectInput.val();
RED.nodes.dirty(true);
RED.nodes.node(node.id).changed = true;
});
// Änderungsereignis für magType
magTypeInput.on("change", function() {
node.magType = magTypeInput.val();
RED.nodes.dirty(true);
RED.nodes.node(node.id).changed = true;
});
// Änderungsereignis für invertDirection
invertDirectionInput.on("change", function() {
node.invertDirection = invertDirectionInput.prop('checked');
RED.nodes.dirty(true);
RED.nodes.node(node.id).changed = true;
});
// Änderungsereignis für magLoadingPos
magLoadingPosInput.on("change", function() {
node.magLoadingPos = magLoadingPosInput.val();
RED.nodes.dirty(true);
RED.nodes.node(node.id).changed = true;
});
// Änderungsereignis für magLoadingTime
magLoadingTimeInput.on("change", function() {
node.magLoadingTime = magLoadingTimeInput.val();
RED.nodes.dirty(true);
RED.nodes.node(node.id).changed = true;
});
// Änderungsereignis für magMoveTime
magMoveTimeInput.on("change", function() {
node.magMoveTime = magMoveTimeInput.val();
RED.nodes.dirty(true);
RED.nodes.node(node.id).changed = true;
});
// Änderungsereignis für magFormat
magFormatInput.on("change", function() {
node.magFormat = magFormatInput.val();
RED.nodes.dirty(true);
RED.nodes.node(node.id).changed = true;
});
// Änderungsereignis für forceIncrementValue
forceIncrementValueInput.on("change", function() {
node.forceIncrementValue = forceIncrementValueInput.prop('checked');
RED.nodes.dirty(true);
RED.nodes.node(node.id).changed = true;
});
// Änderungsereignis für incrementValue
incrementValueInput.on("change", function() {
node.incrementValue = incrementValueInput.val();
RED.nodes.dirty(true);
RED.nodes.node(node.id).changed = true;
});
// Änderungsereignis für invertedIncrementValue
invertedIncrementValueInput.on("change", function() {
node.invertedIncrementValue = invertedIncrementValueInput.val();
RED.nodes.dirty(true);
RED.nodes.node(node.id).changed = true;
});
}
});
</script>
<!-- Styles -->
<style>
div.form-row label {
width: 180px;
display: inline-flex;
}
div.form-row input {
width: 60%;
}
.form-row {
margin-bottom: 10px;
}
</style>
<script type="text/html" data-template-name="Magazine-Position">
<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="Name">
</div>
<div class="form-row">
<label><i class="fa fa-check-square-o"></i>Nur Positionstext anzeigen</label>
<input type="checkbox" id="node-config-input-postextonly">
</div>
<div class="form-row">
<label for="node-config-input-magselect"><i class="fa fa-object-group"></i> Magazin auswählen</label>
<select id="node-config-input-magselect">
<option value="Mag1">Magazin 1</option>
<option value="Mag2">Magazin 2</option>
</select>
</div>
<div class="form-row">
<label for="node-config-input-magtypeinput"><i class="fa fa-object-ungroup"></i> Magazintyp</label>
<input type="number" id="node-config-input-magtypeinput" placeholder="Magazintyp">
</div>
<div class="form-row">
<label><i class="fa fa-sort-amount-desc"></i> Richtung umkehren</label>
<input type="checkbox" id="node-config-input-invertdirectioninput">
</div>
<div class="form-row">
<label for="node-config-input-magloadingposinput"><i class="fa fa-arrows-h"></i> Ladeposition</label>
<input type="text" id="node-config-input-magloadingposinput" placeholder="Ladeposition">
</div>
<div class="form-row">
<label for="node-config-input-magloadingtimeinput"><i class="fa fa-clock-o"></i> Ladezeit</label>
<input type="text" id="node-config-input-magloadingtimeinput" placeholder="Ladezeit">
</div>
<div class="form-row">
<label for="node-config-input-magmovetimeinput"><i class="fa fa-clock-o"></i> Bewegungszeit</label>
<input type="text" id="node-config-input-magmovetimeinput" placeholder="Bewegungszeit">
</div>
<div class="form-row">
<label for="node-config-input-magformatinput"><i class="fa fa-cogs"></i> Magazinformat</label>
<select id="node-config-input-magformatinput">
<option value="height">Hochformat</option>
<option value="width">Querformat</option>
</select>
</div>
<div class="form-row">
<label><i class="fa fa-sliders"></i> Inkrementwerte überschreiben</label>
<input type="checkbox" id="node-config-input-forceincrementvalueinput">
</div>
<div class="form-row">
<label for="node-config-input-incrementvalueinput"><i class="fa fa-plus"></i> Inkrementwert</label>
<input type="text" id="node-config-input-incrementvalueinput" placeholder="Inkrementwert">
</div>
<div class="form-row">
<label for="node-config-input-invertedincrementvalueinput"><i class="fa fa-minus"></i> invertierter Inkrementwert</label>
<input type="text" id="node-config-input-invertedincrementvalueinput" placeholder="invertierter Inkrementwert">
</div>
</script>