qm-virtual-communication-send-receive/send-receive.html

virtual-communication send-receive module - Node-Red

<script type="text/javascript">
    RED.nodes.registerType('send-receive',{
        category: 'virtual communication',
        color: '#0080FF',
        defaults: {
            name:{ value: "" },
            mapeamento:{ value:"", type: "communication-mapping" },
            message_send:{ value:"" },
            substr:{value:""},
            timeout:{ value:"1000", validate: RED.validators.number() },
            compare_select: {value:"none"},
            equalTo: {value: ''},
            different: {value:''},
            extract_flag: { value: false},
            extract_info: { value: ''},

            qtdSendReceive:{value:0},
            controle:{value:0},

            port_send_N:       { value:["","","","","","","","","","","","","","","","","","","","","","","","","","","",""] }, //default port_send
            port_receive_N:    { value:["","","","","","","","","","","","","","","","","","","","","","","","","","","",""] }, //default port_receive


            message_send1:{ value:"" }, timeout1:{ value:"1000" }, compare_select1: {value:"none"}, equalTo1: {value: ''}, different1: {value:''}, substr1: {value: ''}, extract_flag1: { value: false}, extract_info1: { value: ''},
            message_send2:{ value:"" }, timeout2:{ value:"1000" }, compare_select2: {value:"none"}, equalTo2: {value: ''}, different2: {value:''}, substr2: {value: ''}, extract_flag2: { value: false}, extract_info2: { value: ''},
            message_send3:{ value:"" }, timeout3:{ value:"1000" }, compare_select3: {value:"none"}, equalTo3: {value: ''}, different3: {value:''}, substr3: {value: ''}, extract_flag3: { value: false}, extract_info3: { value: ''},
            message_send4:{ value:"" }, timeout4:{ value:"1000" }, compare_select4: {value:"none"}, equalTo4: {value: ''}, different4: {value:''}, substr4: {value: ''}, extract_flag4: { value: false}, extract_info4: { value: ''},
            message_send5:{ value:"" }, timeout5:{ value:"1000" }, compare_select5: {value:"none"}, equalTo5: {value: ''}, different5: {value:''}, substr5: {value: ''}, extract_flag5: { value: false}, extract_info5: { value: ''},
            message_send6:{ value:"" }, timeout6:{ value:"1000" }, compare_select6: {value:"none"}, equalTo6: {value: ''}, different6: {value:''}, substr6: {value: ''}, extract_flag6: { value: false}, extract_info6: { value: ''},
            message_send7:{ value:"" }, timeout7:{ value:"1000" }, compare_select7: {value:"none"}, equalTo7: {value: ''}, different7: {value:''}, substr7: {value: ''}, extract_flag7: { value: false}, extract_info7: { value: ''},
            message_send8:{ value:"" }, timeout8:{ value:"1000" }, compare_select8: {value:"none"}, equalTo8: {value: ''}, different8: {value:''}, substr8: {value: ''}, extract_flag8: { value: false}, extract_info8: { value: ''},
            message_send9:{ value:"" }, timeout9:{ value:"1000" }, compare_select9: {value:"none"}, equalTo9: {value: ''}, different9: {value:''}, substr9: {value: ''}, extract_flag9: { value: false}, extract_info9: { value: ''},
            message_send10:{ value:"" }, timeout10:{ value:"1000" }, compare_select10: {value:"none"}, equalTo10: {value: ''}, different10: {value:''},  substr10: {value: ''}, extract_flag10: { value: false}, extract_info10: { value: ''},
            message_send11:{ value:"" }, timeout11:{ value:"1000" }, compare_select11: {value:"none"}, equalTo11: {value: ''}, different11: {value:''},  substr11: {value: ''}, extract_flag11: { value: false}, extract_info11: { value: ''},
            message_send12:{ value:"" }, timeout12:{ value:"1000" }, compare_select12: {value:"none"}, equalTo12: {value: ''}, different12: {value:''},  substr12: {value: ''}, extract_flag12: { value: false}, extract_info12: { value: ''},
            message_send13:{ value:"" }, timeout13:{ value:"1000" }, compare_select13: {value:"none"}, equalTo13: {value: ''}, different13: {value:''},  substr13: {value: ''}, extract_flag13: { value: false}, extract_info13: { value: ''},
            message_send14:{ value:"" }, timeout14:{ value:"1000" }, compare_select14: {value:"none"}, equalTo14: {value: ''}, different14: {value:''},  substr14: {value: ''}, extract_flag14: { value: false}, extract_info14: { value: ''},
            message_send15:{ value:"" }, timeout15:{ value:"1000" }, compare_select15: {value:"none"}, equalTo15: {value: ''}, different15: {value:''},  substr15: {value: ''}, extract_flag15: { value: false}, extract_info15: { value: ''},
            message_send16:{ value:"" }, timeout16:{ value:"1000" }, compare_select16: {value:"none"}, equalTo16: {value: ''}, different16: {value:''},  substr16: {value: ''}, extract_flag16: { value: false}, extract_info16: { value: ''},
            message_send17:{ value:"" }, timeout17:{ value:"1000" }, compare_select17: {value:"none"}, equalTo17: {value: ''}, different17: {value:''},  substr17: {value: ''}, extract_flag17: { value: false}, extract_info17: { value: ''},
            message_send18:{ value:"" }, timeout18:{ value:"1000" }, compare_select18: {value:"none"}, equalTo18: {value: ''}, different18: {value:''},  substr18: {value: ''}, extract_flag18: { value: false}, extract_info18: { value: ''},
            message_send19:{ value:"" }, timeout19:{ value:"1000" }, compare_select19: {value:"none"}, equalTo19: {value: ''}, different19: {value:''},  substr19: {value: ''}, extract_flag19: { value: false}, extract_info19: { value: ''},
            message_send20:{ value:"" }, timeout20:{ value:"1000" }, compare_select20: {value:"none"}, equalTo20: {value: ''}, different20: {value:''},  substr20: {value: ''}, extract_flag20: { value: false}, extract_info20: { value: ''},
            message_send21:{ value:"" }, timeout21:{ value:"1000" }, compare_select21: {value:"none"}, equalTo21: {value: ''}, different21: {value:''},  substr21: {value: ''}, extract_flag21: { value: false}, extract_info21: { value: ''},
            message_send22:{ value:"" }, timeout22:{ value:"1000" }, compare_select22: {value:"none"}, equalTo22: {value: ''}, different22: {value:''},  substr22: {value: ''}, extract_flag22: { value: false}, extract_info22: { value: ''},
            message_send23:{ value:"" }, timeout23:{ value:"1000" }, compare_select23: {value:"none"}, equalTo23: {value: ''}, different23: {value:''},  substr23: {value: ''}, extract_flag23: { value: false}, extract_info23: { value: ''},
            message_send24:{ value:"" }, timeout24:{ value:"1000" }, compare_select24: {value:"none"}, equalTo24: {value: ''}, different24: {value:''},  substr24: {value: ''}, extract_flag24: { value: false}, extract_info24: { value: ''},
        },
        inputs:1,
        outputs:1,
        icon: "COM.svg",
        label: function() { return this.name? "Send Receive - " + this.name: "Send Receive" },
        paletteLabel: "Send Receive",
        oneditprepare: function() {
            var node = this;
            var self = this
            self.controle = self.qtdSendReceive;

            for(var i=1; i<=self.controle; i++){
                $(".sendReceive"+i).show();
            }
            if(!self.controle || self.controle < 0){
                self.controle = 0;
            }
            $("#addSendReceive").click(function(){
                self.controle = self.controle+1 <= 24 ? self.controle + 1 : 24;
                $(".sendReceive"+self.controle).show();
            });
            $("#remSendReceive").click(function(){
                $(".sendReceive"+self.controle).hide();
                self.controle = self.controle-1 >= 0 ? self.controle - 1 : 0;

            });
            
            $(".compare_select").on("change", function(e) {

                var QTD = $(this).data("select"); //no caso do 0 QTD vem com um string vazia
                var compare = $(this).val();
                if (compare === "none") {$((".node-input-equal-to"+QTD)).hide();$((".node-input-different"+QTD)).hide();$((".node-input-substr"+QTD)).hide();}
                if (compare === "equal") {$((".node-input-equal-to"+QTD)).show();$((".node-input-different"+QTD)).hide();$((".node-input-substr"+QTD)).hide();}
                if (compare === "different") { $((".node-input-equal-to"+QTD)).hide(); $((".node-input-different"+QTD)).show();$((".node-input-substr"+QTD)).hide();}
                if (compare === "substr") { $((".node-input-equal-to"+QTD)).hide(); $((".node-input-different"+QTD)).hide();$((".node-input-substr"+QTD)).show();}
            
            });
            
            $(".extract_flags").on("change", function(e) {

                var QTD = $(this).data("flag"); //no caso do 0 a QTD vem com uma string vazia
                if ($(this).is(':checked')) {
                    $(("#node-input-extract_info"+QTD)).show();
                }else {
                    $(("#node-input-extract_info"+QTD)).hide();
                }

            });

            var ports = []
            var config_mapeamento = RED.nodes.node(this.mapeamento)
                ports = [
                {value:"RS232_DB9", label:"RS232_DB9 -", hasValue:false},
                {value:"RS232_RJ11", label:"RS232_RJ11 -", hasValue:false},
                {value:"RS485", label:"RS485 -", hasValue:false},
                {value:"UART_COM", label:"UART_COM -", hasValue:false},
                {value:"UART_1", label:"UART_1 -", hasValue:false},
                {value:"UART_2", label:"UART_2 -", hasValue:false},
                {value:"UART_3", label:"UART_3 -", hasValue:false},
                {value:"UART_4", label:"UART_4 -", hasValue:false},
                {value:"I2C", label:"I2C -", hasValue:false},
                {value:"SPI", label:"SPI -", hasValue:false},
            ];

            for(var QTD = 0 ; QTD <=24; QTD++){ //PREENCHE AS PORTAS
                var POS = QTD;
                if(QTD == 0){ QTD = ""}
                $(("#node-config-input-port_send"+QTD)).typedInput({
                    default: this.port_send_N[POS],
                    types:ports
                });
                $(("#node-config-input-port_receive"+QTD)).typedInput({
                    default: this.port_receive_N[POS],
                    types:ports
                });
            }
            
        },
        oneditresize: function() {
            if(!$("#red-ui-header-button-deploy").hasClass("disabled")){
                $("#node-dialog-ok").click()
                $("#red-ui-header-button-deploy").click()
                $("#red-ui-deploy-dialog-confirm-deploy-deploy").click()
            }
        },
        oneditsave: function() {


            for(var QTD = 0; QTD <= 24; QTD++){ //ATUALIZA PORTAS
                var POS = QTD;
                if(QTD == 0){ QTD = ""}
                var send = $(("#node-config-input-port_send"+QTD)).typedInput('type');
                var receive  = $(("#node-config-input-port_receive"+QTD)).typedInput('type');

                $(("#node-config-input-port_send"+QTD)).typedInput('value', send);
                this.port_send_N[POS] = $(("#node-config-input-port_send"+QTD)).typedInput('value');
                $(("#node-config-input-port_receive"+QTD)).typedInput('value', receive);
                this.port_receive_N[POS] = $(("#node-config-input-port_receive"+QTD)).typedInput('value');

            }
            
            this.qtdSendReceive = this.controle;
        }
    });

</script>

<style>

    label{ width: 100% !important; margin-bottom: 2px !important; }
    .columm{ display: flex !important; flex-direction: column !important;}
    .columm-30{ display: flex !important; flex-direction: column !important; width: 30% !important; float: left !important; }
    .columm-50{ display: flex !important; flex-direction: column !important; width: 50% !important; float: left !important; }
    .columm-70{ display: flex !important; flex-direction: column !important; width: 70% !important; float: left !important; }
    hr { width: 40% !important; float: left !important;}
    .hr-new { width: 35% !important; float: left !important;}
    .hr-div-receive{ display: flex !important; justify-content: space-between !important; }
    .optional{ height: max-content !important; margin-top: 10px !important; }
    .descript{ text-align: center; }
    .descript-div{ max-width: 444px !important; }
    span.red-ui-typedInput-type-label { width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .btn-aln{ display: flex !important; flex-direction: row-reverse !important; align-content: center; align-items: flex-end; }
    .extract_infos{ width:220px !important }

</style>

<script type="text/html" data-template-name="send-receive">

    <div class="form-row columm descript-div">
        <strong class="descript">
            Sends a message to a port and expects a return according to the port that was configured, along with a flag if it was due to a timeout or not.
     </strong>
    </div>
    <div style=" position: relative; display:flex;">
        <div class="form-row columm-70">
            <label style="width: 50% !important;" for="node-input-name" ><i class="fa fa-tag"></i> Identification Note</label>
            <input type="text" id="node-input-name" placeholder="Name" style="width: 100%">
        </div>
        <div class="form-row columm-30" style="align-items: flex-end !important;">
            <label style="width: max-content !important; padding-right: 24px;"><i class="fa fa-list-ul"></i> Item</label>
            <div class="form-row btn-aln" >
                <a id="addSendReceive" class="red-ui-button" ><i class="fa fa-plus"></i></a>
                <a id="remSendReceive" class="red-ui-button" style="margin-right: 5px;" ><i class="fa fa-minus"></i></a>
            </div>
        </div>
    </div>
    <div class="form-row">
        <label for="node-input-mapeamento"><i class="fa fa-map"></i> PCI Connection Map</label>
        <input type="text" id="node-input-mapeamento">
    </div>
  
    <!-- ******************************************* -->
    <div id="SendReceives"></div>
    <script type="text/javascript">
        function constructor(){
            
            for(var QTD = 0; QTD <= 24;QTD++){
                var POS = QTD;
                var show = "display:none;";
                if(QTD == 0){ show = ""; QTD ="";  }

                var newReceive = document.createElement("div");
                newReceive.setAttribute("class", "sendReceive"+QTD); 
                newReceive.setAttribute("style", show);
                newReceive.innerHTML =  
                `<div class='hr-div-receive'> 
                    <hr class='hr-new'> <span class='optional'>Send-Receive ${POS}</span><hr class='hr-new'>
                </div>

                <div style=' position: relative; display:flex;'>
                    <div class='form-row columm-70'>
                        <label for='node-input-message_send${QTD}'><i class='fa fa-envelope'></i> Message</label>
                        <input type='text' id='node-input-message_send${QTD}' placeholder='message send' style='width:100%;'>
                    </div>
                    <div  class='form-row columm-30' style='padding-left: 10px;'>
                        <label for='node-input-timeout${QTD}'><i class='fa fa-clock-o'></i> Timeout</label>
                        <div> 
                            <input type='number' id='node-input-timeout${QTD}' placeholder='timeout'  style='width:80%; margin-right: 5px;'>ms
                        </div> 
                    </div> 
                </div>

                <div class='form-row columm'>
                    <label for='node-input-port_send${QTD}'><i class='fa fa-microchip'></i> Port send</label>
                    <input type='text' id='node-config-input-port_send${QTD}' style='width:70%'> 
                </div>
                <div class='form-row columm' style='margin-top:4%;'>
                    <label for='node-input-port_receive${QTD}'><i class='fa fa-microchip'></i> Port receive</label>
                    <input type='text' id='node-config-input-port_receive${QTD}' style='width:70% !important'>
                </div>

                <div style=' position: relative; display:flex;'>
                    <div class='form-row columm-50' style='margin-top: 8px;'>
                        <label for='node-input-compare_select${QTD}'><i class='icon-tag'></i>Comparison Type:</label>
                        <select class='compare_select' id='node-input-compare_select${QTD}' data-select='${QTD}' style='width: 140px;'>
                            <option value='equal'>Equal to</option>
                            <option value='different'>Different of</option>
                            <option value='substr'>SubStr</option>
                            <option value='none' selected>None</option> 
                        </select> 
                    </div>
                    <div class='form-row columm' style='display: flex; margin-top: 8px;'>
                        <div class='node-input-equal-to${QTD}'>
                            <div class='columm'>
                                <label for='node-input-equalTo${QTD}' style='width: max-content; !important'><i class='icon-tag'></i>Equal To: </label>
                                <input type='text' id='node-input-equalTo${QTD}' style=' width:220px !important'>
                            </div>
                        </div>

                        <div class='node-input-different${QTD}'>
                            <div class='columm'>
                                <label for='node-input-different${QTD}' style='width: max-content; !important'><i class='icon-tag'></i>Different of: </label>
                                <input type='text' id='node-input-different${QTD}' style='width:220px !important'> 
                            </div> 
                        </div>
                        
                        <div class='node-input-substr${QTD}'>
                            <div class='columm'>
                                <label for='node-input-substr${QTD}' style='width: max-content; !important'><i class='icon-tag'></i>SubStr : </label>
                                <input type='text' id='node-input-substr${QTD}' style=' width:220px !important '>
                            </div> 
                        </div> 
                    </div> 
                </div>

                <div class='columm' style='display: flex;'>
                    <div class='form-row' style='margin-bottom: 4px;'>
                        <input type='checkbox' id='node-input-extract_flag${QTD}' class='extract_flags' data-flag='${QTD}' style='width: 3%;margin: 0;' autocomplete='off'>
                        <label for='node-input-extract_flag${QTD}' style='width: 22% !important; padding-left: 5px;user-select: none;'>Extract info</label>
                    </div>
                    <input type='text' id='node-input-extract_info${QTD}' class='extract_infos' autocomplete='off' dir=''>
                </div>`
                
                document.getElementById("SendReceives").appendChild(newReceive);
            }
        }
        constructor();
    </script>
</script>

<script type="text/html" data-help-name="send-receive">
    <p>Sends a message to a port and expects a return according to the port that was configured, along with a flag if it was due to a timeout or not.</p>
</script>