Hello,
I would like to convert a qr-code number (for instance 001001) to a URI Image and show that in a ui table.
I would like to do that in "vanilla" javascript or with help from nodes.
i can create a qr code with the qrcode-generator node and show it in html with the following flow:
Code:
[{"id":"583db9df.a992b8","type":"inject","z":"a34ad955.984fd","name":"","props":[{"p":"qrcodeinput","v":"12345","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"str","x":460,"y":1340,"wires":[["63080d19.8348cc"]]},{"id":"63080d19.8348cc","type":"qrcode-generator","z":"a34ad955.984fd","name":"","qrtype":"text2qr","text2qrText":"1234","ssid":"","hiddenssid":false,"wifitype":"","phonenum":"","smsphonenum":"","smstext":"","mailto":"","mailsubject":"","mailbody":"","latitude":"","longitude":"","colorlight":"#ffffff","colordark":"#000000","printstatus":true,"x":650,"y":1340,"wires":[["4f5db828.2f762"]]},{"id":"3f722f9c.1dcdd8","type":"ui_template","z":"a34ad955.984fd","group":"84037d42.46728","name":"","order":0,"width":"15","height":"10","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1000,"y":1340,"wires":[[]]},{"id":"4f5db828.2f762","type":"template","z":"a34ad955.984fd","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img width=\"60px\" height= \"60px\" src=\"{{{payload}}}\">","output":"str","x":820,"y":1340,"wires":[["3f722f9c.1dcdd8"]]},{"id":"84037d42.46728","type":"ui_group","z":"","name":"Group 4","tab":"f3dcc58e.bfd5d8","order":4,"disp":true,"width":"33","collapse":false},{"id":"f3dcc58e.bfd5d8","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":19,"disabled":false,"hidden":false}]
The real payload with the numbers for the cr codes looks like that:
Its a bigger flow and the data comes from a database.
I would like to convert the number under Barcode1,2,3 et. to a URI Image string to show on html without loosing the payload and its structure.
Maybe per adding a new output like msg.payload.URI1 ,2,3,4 ...etc.
I work through the array of objects with a loop to get my array:
let arr = []
let obj
var Fsize = 12
var k = 0 //Komponentenzähler
//var goggle = "<a href=" + '"'+"http://sites.google.com"+'"'+ "title="Beispiel das der Link funktioniert"><img src="+'"'+"https://media-exp1.licdn.com/dms/image/C510BAQERYJ4HI46uuA/company-logo_200_200/0/1519887010870?e=2159024400&v=beta&t=1mCqQUZuWboad9WV0k5EYBhaH9jaUDeAIFdrEXNt2xk"+'"'+ "border=+'"'+ "0"+'"'+" Height="100px" Width="100px"></a>"
//<a href="http://sites.google.com" title="Beispiel das der Link funktioniert"><img src="https://media-exp1.licdn.com/dms/image/C510BAQERYJ4HI46uuA/company-logo_200_200/0/1519887010870?e=2159024400&v=beta&t=1mCqQUZuWboad9WV0k5EYBhaH9jaUDeAIFdrEXNt2xk" border="0" Height="100px" Width="100px"></a>
for(k=0;k<1000;k++){
if(msg.payload[k]){
}else{
break
}
}
function isNull() {
for (var i = 0; i < arguments.length; i++) {
if (
typeof arguments[i] !== 'undefined'
&& arguments[i] !== undefined
&& arguments[i] != null
&& arguments[i] != NaN
&& arguments[i]
) return arguments[i];
}
}
for(let i=0;i<k;i++){
obj = {}
obj.Device_Name = "<div style=' font-size:"+Fsize+"px'>"+msg.payload[i].Device_Name+"</div>"
obj.Device_Nr = "<div style=' font-size:"+Fsize+"px'>"+msg.payload[i].Device_Nr+"</div>"
//obj.Device_Barcodes = "<div style=' font-size:"+Fsize+"px'>"+msg.payload[i].Device_Barcodes+"</div>"
var string = msg.payload[i].Device_Barcodes
var splittedstring = string.split("\n")
obj.Barcode1 = splittedstring[0]||""
obj.Barcode2 = splittedstring[1]||""
obj.Barcode3 = splittedstring[2]||""
obj.Barcode4 = splittedstring[3]||""
obj.Device_Serial = "<div style=' font-size:"+Fsize+"px'>"+msg.payload[i].Device_Serial+"</div>"
obj.Device_Type = "<div style=' font-size:"+Fsize+"px'>"+msg.payload[i].Device_Type+"</div>"
obj.Booking_DateTime = "<div style=' font-size:"+Fsize+"px'>"+msg.payload[i].Booking_DateTime+"</div>"
obj.Booking_Remarks = "<div style=' font-size:"+Fsize+"px'>"+msg.payload[i].Booking_Remarks+"</div>"
obj.Location_Name = "<div style=' font-size:"+Fsize+"px'>"+msg.payload[i].Location_Name+"</div>"
if(isNull(msg.payload[i].Documents)){
obj.Documents = Grundpfad + msg.payload[i].Documents
//obj.Documents = "<div style=' font-size:"+Fsize+"px'>"+Grundpfad + msg.payload[i].Documents+"</div>"
}else{
obj.Documents = "Kein Dokument hinterlegt"
//obj.Documents = "<a href="http://sites.google.com" title="Beispiel das der Link funktioniert"><img src="https://media-exp1.licdn.com/dms/image/C510BAQERYJ4HI46uuA/company-logo_200_200/0/1519887010870?e=2159024400&v=beta&t=1mCqQUZuWboad9WV0k5EYBhaH9jaUDeAIFdrEXNt2xk" border="0" Height="100px" Width="100px"></a>"
}
arr.push(obj)
}
const komps = arr;
function compare(a, b) {
const Device_TypeA = a.Device_Type.toUpperCase();
const Device_TypeB = b.Device_Type.toUpperCase();
let comparison = 0;
if (Device_TypeA > Device_TypeB) {
comparison = 1;
} else if (Device_TypeA < Device_TypeB) {
comparison = -1;
}
return comparison;
}
komps.sort(compare);
//node.warn(arr)
msg.payload = komps
msg.topic = k
return msg;
So in my thoughts i would like to do that in the loop.
may be someone has an idea for that ?
Dearly
Chorum
