How to create svg html tag from code?

Frappe Framework Customization
1

Hi guys, I am trying to use Barcode feature in erpnext v13 .

I saw a Barcode type in the doctype declaration and it works just fine in normal form operation.

Have anyone tried to generate the barcode data from the python code and not from the form ?

I have tried to set the value of the barcode from the python code , but it seems erpnext has somekind of wrapper creation mechanism specifically for barcode type during form saving process. So, my barcode data is not being generated into svg tag as supposed to be as if it were created from the regular form.

I saw a node module of JsBarcode and frappe has a form control in their structure to generate html based barcode svg data to be injected into the database table upon form saving.

Any idea how can I perform barcode data correctly (svg based) directly from the python code ?

thanks

2

I managed to handle this by using another mechanism.

Finally I don’t use the jsbarcode library provided by erpnext in JS/HTML front end.
Instead, I use the python-barcode package downloaded from pypi and create a custom unit to directly inject the generated svg into the doctype field from the python source.

Now , I use this feature to automatically attach barcode to many doctype, such as serial no, item, and warehouse.

I anyone interesting about this mechanism, I will be happy to share my code

3

please share the code here. thanks.

4

First , I installed the python-barcode package using pip inside erpnext python environment.

Then, I create a new python file as a helper. In my case, I put the file inside erpnext/utilities path. My python programming is not very good and perhaps you can improve my code . Here is the helper file :

import barcode
import tempfile
import os

def get_svg_from_text_code128(value):
    #example : code128
    code = barcode.get('code128', value)
    options={
    'module_width':0.4,
        'module_height':15,
        'font_size':16,
        'text_distance':6,
        'quiet_zone':5
    }    

#create the temp file
f = tempfile.NamedTemporaryFile()
namer=f.name
f.close()
code.save(namer,options)

#read the file    
contents=''
with open(namer+'.svg') as ff:
    contents=ff.read()
    ff.close()
    
#remove the temp file
os.remove(namer+'.svg')
    
#get the svg tab only part
pos=contents.find('<svg ')
final_content=''
after_svg_tag=''
if pos>=0:
    #print('perform substring')
    after_svg_tag=contents[pos+len('<svg '):]
    	    
    #inject data  barcode value
    #final_content=contents[pos:]
    final_content='<svg data-barcode-value="'+value+'" '+after_svg_tag	    
    
#print('final content ==> '+final_content)	    

return final_content

Then I use this method somewhere else where I want to automatically generate the barcode, for example in my case I modified the serial_no.py inside the “Serial No” doctype . Here is my example :

serial_no_doc.serial_barcode = get_svg_from_text_code128(serial_no_doc.serial_no)

Now, I often use this mechanism to automatically generate barcode in many areas of the erpnext doctype

The keypoint of svg generation of the barcode to be detected by the frappe is the “data-barcode-value” attribute in the svg tag. This attribute will be detected by frappe to show the value in the form editor .

The frappe itself doesn’t care about the different variation of the generated svg as long as it is a standard svg format . That’s why the barcode svg generated by the python-barcode package will still be detected correctly in the frappe form.

1 Like