FOSSASIA Confirms Annual Summit Takes Place from March 19-21 + DevSprints on March 22 at Lifelong Learning Institute in Singapore

We are glad to announce that the annual FOSSASIA Summit will take place from 19-21 March and the DevSprints on March 22, 2020 at the Lifelong Learning Institute (LLI) in Singapore after official meetings confirming that relevant measures are put in place to ensure the health and safety after the Covid-19 crisis. Singapore has been widely praised in the International community for preventing the spread of the virus, a Harvard study hails the country as a gold standard for case detection.  The FOSSASIA organization and LLI are following all recommendations of the Ministry of Health and taking necessary measures throughout the event. These include among others: Carrying out temperature screening for all attendees, providing health information on each day, adding prominent notices at entrances about hygiene measures, that are put in place throughout the venue, offering excellent bathroom and hand washing facilities, providing free disinfectants, increasing the frequency of cleaning of commonly used areas and more.  Everyone can help to prevent the spread by following hygiene measures and regularly washing hands. The FAQ of the ministry of health is a good starting point to learn more about the virus and how Singapore is stopping its spreading. The FOSSASIA Summit program will be online next week. We are happy that we are able to run the event with the help of the Lifelong Learning Institute and we cannot wait to see you in Singapore!  Global issues, pollution, the threat of climate change, new illnesses, lack of education and poverty show more than ever that it is vital that we all work together to save the planet. Only through open collaboration and sharing can we solve the problems of the world. We need to meet and share our experiences. Events like the FOSSASIA Summit are an important platform. Rest assured we are taking all necessary steps to ensure the continued health and safety of all participants at the event. More information on the FOSSASIA Summit 2020 is here. Please check out a list of confirmed speakers and sessions. Communities interested in running a DevSprint on Sunday, March 22 can still register here. See you in Singapore!

Continue ReadingFOSSASIA Confirms Annual Summit Takes Place from March 19-21 + DevSprints on March 22 at Lifelong Learning Institute in Singapore

Join Codeheat Coding Contest 2019/20

Master Git, contribute to Open Source, and win a trip to the FOSSASIA Summit Singapore with Codeheat! Codeheat is the annual coding contest for developers to contribute to Free and Open Source software (FOSS) and open hardware projects of FOSSASIA. Join development of real world software applications and win awesome prizes, build up your developer profile, learn new coding skills, collaborate with the community and make new friends from around the world! Sign up now for the fourth edition of Codeheat on the website and follow Codeheat on Twitter. Start date: September 15, 2019 End date: February 2, 2020 Which Projects Participate Open Event - Eventyay / Code / Chat SUSI AI - Website / Code / Chat Pocket Science Lab (PSLab) - Website / Code / Chat Phimpme Android - App / Code / Chat Meilix Linux Distribution - Code / Chat Voicerepublic - Website / Code / Chat Badge Magic- App / Code / Chat Neurolab - Code / Chat Badgeyay - Website / Code / Chat How to Join the Contest The contest is open to everyone. Participants can join at any time. Register on the site and check out the Frequently Asked Questions for more details.Also join the FOSSASIA Gitter chat and communicate with mentors and follow developers on project specific channels.  What are the Prizes Winners (3 prizes): Listed on website, certificate, 600SGD travel voucher, 5-night accommodation in Singapore, Tshirt and FOSSASIA limited edition swags. Finalist (7 prizes): Listed on website, certificate, travel voucher of 100 SGD, Tshirt and FOSSASIA limited edition swags. Active Contributors (unlimited): Certificate, CodeHeat Tshirt and FOSSASIA limited edition of swags (with at least 10 merged pull requests)Community Participants (unlimited): Digital Certificate of Participation (with at least 5 merged pull requests) What are the Judging Criteria Our jury will review the work of the 10 developers who have the highest number of quality contributions during the contest. Contributions include pull requests/code commits, scrum reports, articles, screencasts, community engagement and outreach activities. The mentors will look at the:   Sustainability, which means that we specifically value contributions that make the project sustainable by building a community where developers collaborate with each other in a friendly way and support the project development through peer reviews, on-boarding new members, and helping fellow contributors. It also means that, while code is the most important success criteria for winning the contest, furthermore we are looking for contributions in other areas to make projects easy to join, to deploy and to use. This includes: creating and enhancing documentationdeveloping how-toswriting technical blog postssharing work in regular scrum updates to enhance communicationorganizing local meetups, workshops, presentations  Quality vs. Quantity: The sheer number of pull requests is not the only criteria for choosing the winners. Quality work is appreciated - some issues are more challenging than others just by their nature (for example, heavy coding versus solving a text typo bug). It is entirely possible that someone who completed 53 issues could be chosen as a winner over someone who completed 88 issues. How Are…

Continue ReadingJoin Codeheat Coding Contest 2019/20

Neurolab data transfer – Establishing serial communication between Arduino and Android

In the development process of the Neurolab Android, we needed an Arduino-Android connection for transfer of data from datasets which included String and float data type values. In this blog post, I will show you how to establish a serial communication channel between Android and Arduino through USB cable through which we can transmit data bidirectionally. Requirements Hardware: Android PhoneArduino (theoretically from any type, but I’ll be using Arduino Uno)USB 2.0 Cable Type A/B (for Arduino)OTG Cable (On The Go)Normal USB Cable (for transferring the data from Android Studio to your phone) Software: Android StudioArduino IDE Wiring and Setup Wiring must be established in the following way:                                                                                  Figure: Android-Arduino Setup Working on the Android Side We would be using the UsbSerial Library by felHR85 for establishing serial communication. 1. Adding the dependency: a) Add the following line of code to your app level build.gradle file. implementation "com.github.felHR85:UsbSerial:$rootProject.usbSerialLibraryVersion" Note: The ‘usbSerialLibraryVersion’ may change from time to time. Please keep your project with the latest library version. Updates can be found here. b) Add jitpack to your project.build.gradle file. allprojects { repositories { jcenter() maven { url "https://jitpack.io" } } } 2. Working with Arduino: We need to program the Arduino to send and receive data. We achieve that with the help of Arduino IDE as mentioned above. Verify, compile and upload a sketch to the Arduino for sending and receiving data. If you are a complete beginner in Arduino programming, there are example sketches for this same purpose. Load an example sketch from under the communication segment and choose the serial communication sketch. Here, we will be working with a simple sketch for the Arduino such that it simply echoes whatever it receives on the serial port. Here is sketch code: // the setup routine runs once when you press reset: void setup() { // initialize serial communication at 9600 bits per second: Serial.begin(9600); } // the loop routine runs over and over again forever: void loop() { char incomingByte; // If there is a data stored in the serial receive buffer, read it and print it to the serial port as human-readable ASCII text. if(Serial.available()){ incomingByte = Serial.read(); Serial.print(incomingByte); } } Feel free to compile and upload it to your own Arduino. 2. Working with Android: Firstly, we need an USBManager instance initialized with the system service - ‘USB_SERVICE’. This needs to be done in an Activity (preferably main) so that this instance can be passed to the Communication Handler class, which we are going to create next.Now, we will be working with a class for handling the serial communications with our Android device and the Arduino board. We would pass the USBManager instance to this class wherein work will be done with that to find the USBDevice and USBDeviceConnection Starting with, we need to search for any attached Arduino devices to the Android device. We create a method for this and use the ‘getDevicesList’ callback to achieve this in the following way: public void searchForArduinoDevice(Context context) { HashMap usbDevices…

Continue ReadingNeurolab data transfer – Establishing serial communication between Arduino and Android

How to transfer data in files from different locations to app directory

In Android apps, we might have seen various instances in-app where we can import, export or save files. Now, where does the files go to or come from? There needs to be a specific folder or directory (maybe root) for a particular app which inturn contains the necessary files, the user has worked with from the app. In this blog, we will be learning about the backend of how to create directories and store files in them dynamically with proper content. Context I have been working with FOSSASIA on the project Neurolab-Android. In the app, we have various program modes, which has the option to save/record data. The saved data gets logged in a new file in the Neurolab directory/folder. Feel free to go ahead and explore the feature. The Save/Record feature in Neurolab can be found in the app bar or as an option in the drop down menu present in the app bar itself in any program mode. The feature becomes functional, once the data is imported with the import data feature which is also present in the app bar.                                               Figure: Demonstration of features in Neurolab Tutorial Now, starting off, there are apps out there wherein users can save files from different segments in the app and those saved files can be used by the app itself at other times as they belong to that app itself specifically. First off, we need to make sure we have a directory for our app, wherein the files will get stored. If the directory or folder is not present, it needs to be created. File directory = new File( Environment.getExternalStorageDirectory().getAbsolutePath() + File.separator + DIRECTORY_NAME); if (!directory.exists()) { try { directory.mkdir(); } catch (Exception e) { e.printStackTrace(); } } Now, once the directory is present, we can go ahead to keep the saved files in it. Also we will be implementing category-wise storage of the files. Simply put, we will be storing csv files in the CSV folder, xls files in the Excel folder, etc. In the below code example, we see the use case of CSV ‘category’. private void categoryWise() {File categoryDirectory = new File( Environment.getExternalStorageDirectory().getAbsolutePath() + File.separator + DIRECTORY_NAME + File.separator + category); if (!categoryDirectory.exists()) { try { categoryDirectory.mkdir(); } catch (Exception e) { e.printStackTrace(); } }} For saving a file in our app, we need to get (import) the file into our app. Once the file is imported, we can get the path of the file with the help of its URI. Let’s assign the path to a variable named ‘importedFilePath’. Then we place the imported file in the required category directory within our parent app directory depending and deciding upon the extension of the imported file. File importedFile = new File(importedFilePath); FilePathUtil.setupPath(); Date currentTime = Calendar.getInstance().getTime(); SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String fileName = sdf.format(currentTime); File dst = new File(Environment.getExternalStorageDirectory().getAbsolutePath() + File.separator + DIRECTORY_NAME + File.separator + categoryDirectory + File.separator + fileName + ".$extension"); if (!dst.exists()) { try { categoryWise() transfer(importedFile, dst); } catch (IOException e) {…

Continue ReadingHow to transfer data in files from different locations to app directory

How to fix undetected Arduino boards in Android

In the development process of the Neurolab Android app, we needed an Arduino-Android connection. This blog explains how to  establish the connection and getting the Arduino board detected in my Android device Context-connecting the board and getting it detected Arduino boards are primarily programmed from the Desktop using the Arduino IDE, but they are not limited to the former. Android devices can be used to program the circuit boards using an application named Arduinodroid. Arduino is basically a platform for building various types of electronic projects and the best part about it is that, it is open-sourced. Arduino, the company has got two products The physical programmable circuit board (often referred to as a microcontroller).  Examples of Arduino circuit boards - UNO, UNO CH340G, Mega, etc. Find more here. Connecting the board and getting it detected Arduino boards are primarily programmed from the Desktop using the Arduino IDE, but they are not limited to the former. Android devices can be used to program the circuit boards using an application named Arduinodroid. In this blog, we are going to use Arduinodroid app for establishing a connection between the Arduino board and the Android device, getting the board detected in the Android phone and uploading a sketch to it. Materials/Gadgets required:- Arduino board (UNO preferably)Arduino-USB CableOTG CableAndroid device Now, one of the most frequent issues, while establishing a connection and getting the Arduino board detected with the Android device, is the error message of: “No Arduino boards detected” in the Arduinodroid app. There can be a few core reasons for this - Your Android mobile device isn’t USB-OTG supported - Probably because it is an old model or it might be a company/brand-specific issue.Disabled OTG Mode - Be sure to enable USB-OTG mode (only if your device has one) from the Developer options in your Android device settings. Even after trying and making sure of these above points, if you still continue to get an error while uploading a sketch from the Arduinodroid app like this:                                                             Figure 1: The Error Message Follow the steps below carefully and simultaneously one after the other: Look for any external module attached to your Arduino board using jumper wires. If so, remove those connections completely and press the reset button on the Arduino circuit board. The attached modules can be one of the following: Micro SD Card module, Bluetooth module, etc.Remove pin connections, if any from the TX and RX pin-slots in the Arduino board. These pre-attached pins can cause unnecessary signal transfers which can hinder and make the actual port of Arduino board busy.Before connecting the Arduino to the Android device, go to the drop down menu in the app at the top-right corner -> Settings -> Board Type -> Arduino -> UNONow, you need to code a sketch and make it ready for compile and upload to the circuit board. We will use a basic example sketch for this case. Feel free to try out your own custom coded Arduino sketches. Go to the…

Continue ReadingHow to fix undetected Arduino boards in Android

Open is Becoming the New Common Foundation across Business, Government, Science, and Industry

Interview with Shanker V Selvadurai, Vice President & Chief Technology Officer of Cloud and Cognitive Software for IBM Asia Pacific Could you briefly introduce yourself? I am Shanker Selvadurai and currently the Vice President & Chief Technology Officer of Cloud and Cognitive Software for IBM Asia Pacific. I am based in Singapore and lead the technical organization that helps clients across Asia Pacific to explore and co-create cloud-based solutions that leverage data, analytics and artificial intelligence (AI) capabilities to deliver better decisions and outcomes. I joined IBM in 2006.  Prior to IBM, I held key leadership positions in areas of research, development, consulting, sales and marketing with technology companies like AT&T, NCR and Fujitsu as well as start-up BlueGill Technologies. During this period I lead teams varying in size from 6 to over 1,000 while being based in North America, Europe and Asia. I have a Bachelor of Science degree and a Master of Business Administration. I am also an Open Group Certified Distinguished Architect. Besides having published international patents/papers, I have actively contributed to international technology standards committees that include the IFX Forum, OFX Consortium and the Microsoft Advisory Council. I was also an adjunct lecturer at the Singapore Management University, teaching courses related to Services Science and Advanced Business Technology. Tell us about your session at the FOSSASIA Summit, what will you cover? At the FOSSASIA Summit, I am participating in a panel on “Business, Government, Science – What Opportunities Does “Open” Bring to Society”.  I hope to share IBM’s involvement in the open source movement, how businesses like IBM benefit from open source, as well as share thoughts about approaching open contribution and open governance in the future. Shanker V Selvadurai handing over IBM Cloud Prize for Hackathon Winners Business, Government, Science - What Opportunities Does "Open" Bring to Society from your point of view? Open is becoming the new common foundation across business, government, science, and industry today.  For example, companies that still compete head-to-head in the marketplace are coming together to collaborate in open source communities.  They contribute to open source software and use it in their own IT systems and applications. They gain a competitive advantage — even though they may be helping their competitors in the short run.  The data demonstrates that companies with open source programs see more benefits from open source code and community participation. IBM Connecting with Open Source Community at FOSSASIA Summit International IBM Team Participating in FOSSASIA Summit What is the role of Free Open Source Software in cloud and AI solutions in IBM? Our offering portfolio, especially for our growth initiatives such as cloud and AI, is based on a solid foundation of open technologies.  Most of our strategic initiatives are founded on open source projects or communities, and we work across a wide variety of internal stakeholders to ensure that that the contributions we make to the community also provide greater value to our clients. IBM Training on Open Source Cloud and AI Technologies at FOSSASIA…

Continue ReadingOpen is Becoming the New Common Foundation across Business, Government, Science, and Industry

Enforcing Constraints Throughout a Flask Back-End

Recently it was discovered that Open Event Server does not validate attendees’ tickets. Specifically, it was possible to create an arbitrary number of attendees who’d be attending an event on the same ticket! To fix this, a constraint had to be set up across different layers of Open Event Server, which is based on Flask and Postgres. This post will demonstrate how the constraint was added in the server, and these steps should apply in general to any Flask-based server with a relational back-end. First of all, the immediate idea that comes after investigating such an issue, is to add a UNIQUE constraint to the database. For this specific case, the problem was in ticket_holders table of the Open Event database. There was originally no check imposed on the ticket_id and event_id columns. As can be seen in the ticket_holders schema (using the \d+ ticket_holders command), there is no mention of uniqueness on either column. The initial guess was that the combination of ticket_id and event_id should be unique throughout the table to avoid multiple holders attending on the same ticket. However,imposing uniqueness on just the ticket_id column would’ve also worked. So, to be on the safer side, I moved ahead by adding uniqueness on both the columns. To fix this, we need to make changes to the ticket_holder model. So, in the ticket_holder model file, we add a __table_args__ attribute to the TicketHolder class. This attribute represents the various constraints imposed on the ticket_holders table: class TicketHolder(db.Model): __tablename__ = "ticket_holders" __table_args__ = ( db.UniqueConstraint('ticket_id', 'event_id', name='ticket_event'), ) # this is the constraint we add id = db.Column(db.Integer, primary_key=True) firstname = db.Column(db.String, nullable=False) lastname = db.Column(db.String, nullable=False) … … … The TicketHolder class has attributes named ticket_id and event_id, so to add a unique constraint over them, we pass their names to the UniqueConstraint constructor. Also, any suitable name can be given to the constraint, I chose ‘ticket_event’ to simply emphasize the relationship. Now that we’ve edited the database model file, we have to perform a database migration. Before we command the migration, we have to remove the entries that potentially violate the constraint we just imposed. As a temporary fix, I connected to the database and deleted all non-unique rows via plain SQL. For a more consistent fix, I will implement this simple deletion code in the database migration file, if need be. So, once the non-unique rows are gone, we perform the database migration as follows: $ python manage.py db migrate And then, $ python manage.py db upgrade These commands may be different for different projects, but their purpose is the same - to update the database. The upgrade command generates a migration file which looks as follows: from alembic import op import sqlalchemy as sa import sqlalchemy_utils # revision identifiers, used by Alembic. revision = '9d21de792967' down_revision = '194a5a2a44ef' def upgrade(): op.create_unique_constraint('ticket_event', 'ticket_holders', ['ticket_id', 'event_id']) def downgrade(): op.drop_constraint('ticket_event', 'ticket_holders', type_='unique') We can see that the upgrade() function has the command for adding our constraint. Once the database…

Continue ReadingEnforcing Constraints Throughout a Flask Back-End

Adding Port Specification for Static File URLs in Open Event Server

Until now, static files stored locally on Open Event server did not have port specification in their URLs. This opened the door for problems while consuming local APIs. This would have created inconsistencies, if two server processes were being served on the same machine but at different ports. In this blog post, I will explain my approach towards solving this problem, and describe code snippets to demonstrate the changes I made in the Open Event Server codebase. The first part in this process involved finding the source of the bug. For this, my open-source integrated development environment, Microsoft Visual Studio Code turned out to be especially useful. It allowed me to jump from function calls to function definitions quickly: I started at events.py and jumped all the way to storage.py, where I finally found out the source of this bug, in upload_local() function: def upload_local(uploaded_file, key, **kwargs): """ Uploads file locally. Base dir - static/media/ """ filename = secure_filename(uploaded_file.filename) file_relative_path = 'static/media/' + key + '/' + generate_hash(key) + '/' + filename file_path = app.config['BASE_DIR'] + '/' + file_relative_path dir_path = file_path.rsplit('/', 1)[0] # delete current try: rmtree(dir_path) except OSError: pass # create dirs if not os.path.isdir(dir_path): os.makedirs(dir_path) uploaded_file.save(file_path) file_relative_path = '/' + file_relative_path if get_settings()['static_domain']: return get_settings()['static_domain'] + \ file_relative_path.replace('/static', '') url = urlparse(request.url) return url.scheme + '://' + url.hostname + file_relative_path Look closely at the return statement: return url.scheme + '://' + url.hostname + file_relative_path Bingo! This is the source of our bug. A straightforward solution is to simply concatenate the port number in between, but that will make this one-liner look clumsy - unreadable and un-pythonic. We therefore use Python string formatting: return '{scheme}://{hostname}:{port}{file_relative_path}'.format( scheme=url.scheme, hostname=url.hostname, port=url.port, file_relative_path=file_relative_path) But this statement isn't perfect. There's an edge case that might give unexpected URL. If the port isn't originally specified, Python's string formatting heuristic will substitute url.port with None. This will result in a URL like http://localhost:None/some/file_path.jpg, which is obviously something we don't desire. We therefore append a call to Python's string replace() method: replace(':None', '') The resulting return statement now looks like the following: return '{scheme}://{hostname}:{port}{file_relative_path}'.format( scheme=url.scheme, hostname=url.hostname, port=url.port, file_relative_path=file_relative_path).replace(':None', '') This should fix the problem. But that’s not enough. We need to ensure that our project adapts well with the change we made. We check this by running the project tests locally: $ nosetests tests/unittests Unfortunately, the tests fail with the following traceback: ====================================================================== ERROR: test_create_save_image_sizes (tests.unittests.api.helpers.test_files.TestFilesHelperValidation) ---------------------------------------------------------------------- Traceback (most recent call last): File "/open-event-server/tests/unittests/api/helpers/test_files.py", line 138, in test_create_save_image_sizes resized_width_large, _ = self.getsizes(resized_image_file_large) File "/open-event-server/tests/unittests/api/helpers/test_files.py", line 22, in getsizes im = Image.open(file) File "/usr/local/lib/python3.6/site-packages/PIL/Image.py", line 2312, in open fp = builtins.open(filename, "rb") FileNotFoundError: [Errno 2] No such file or directory: '/open-event-server:5000/static/media/events/53b8f572-5408-40bf-af97-6e9b3922631d/large/UFNNeW5FRF/5980ede1-d79b-4907-bbd5-17511eee5903.jpg' It’s evident from this traceback that the code in our test framework is not converting the image url to file path correctly. The port specification part is working fine, but it should not affect file names, they should be independent of port number. The files saved originally do not have port specified in their name, but…

Continue ReadingAdding Port Specification for Static File URLs in Open Event Server

Publish an Open Source app on Fdroid

Fdroid is a famous software repository hosted with numerous free and open source Android apps. They have a main repository where they allow developers hosting free and ad free software after a thorough check up on the app. This blog will tell you how to get your project hosted in their repository using steps I followed to publish the PSLab Android app. Before you get started, make sure you have the consent from your developer community to publish their app on Fdroid. Fdroid requires your app to use all kind of open resources to implement features. If there is any closed source libraries in your app and you still want to publish it on Fdroid, you may have to reimplement that feature by any other mean without using closed source resources. They will also not allow to have Google’s proprietary “play-services” in your app along with proprietary ad services. You can find the complete inclusion policy document from their official page. When your app is fully ready, you can get started with the inclusion procedure. Unlike how we are publishing apps on Google Play, publishing an app on Fdroid is as simple as sending a pull request to their main repository. That’s exactly what we have to do. In simple terms all we have to do is: Fork the Fdroid main data repository Make changes to their files to include our app Do a pull request First of all you need a GitLab account as the Fdroid repository is hosted in GitLab. Once you are ready with a GitLab account, fork and clone the f-droid-data repository. The next step is to install the fdroid-server. This can be simply done using apt: $ sudo apt install fdroidserver Once that is done, go into the directory where you cloned the repository and run the following command to read current meta data where it saves all the information related to existing apps on Fdroid; $ fdroid readmeta This will list out various details about the current meta files. Next step is to add our app details into this meta file. This can be done easily using following command or you can manually create folders and files. But the following is safer; $ fdroid import --url https://github.com/fossasia/pslab-android --subdir app Replace the link to repository from the --url tag in the above command. For instance the following will be the link for fossasia-phimpme android; $ fdroid import --url https://github.com/fossasia/phimpme-android --subdir app This will create a file named as “org.fossasia.pslab” in the metadata directory. Open up this text file and we have to fill in our details. Categories License Web Site Summary Description Description needs to be terminated with a newline and a dot to avoid build failures. Once the file is filled up, run the following command to make sure that the metadata file is complete. $ fdroid readmeta Then run the following command to clean up the file $ fdroid rewritemeta org.fossasia.pslab We can automatically add version details using the following command: $ fdroid…

Continue ReadingPublish an Open Source app on Fdroid

Variable Font Size Badgeyay

Badgeyay is a simple badge generator that aims for promoting an open-source tool for generation of badges in PDF format. The project has options to choose from predefined set of images or upload a background image. User can choose from set of fonts and color of the same. But now Badgeyay also has option to choose custom font-size in generation of badges. To implement font size feature,  first, the component that is determining the font of the label has to be identified. The label that determines the text on the badge is the <text> label and within it, the label that determines the properties of the text is <tspan>. So mainly we need to alter the properties in the tspan. The property that determines the font size for the badge is font-size and its default value is set to 31.25 px. If the property in the labels changed, then we can see the corresponding changes in the PDF generated from the svg. Now the challenges were: To Determine the font value from the frontend. Using the same for the font-config. Changing the built svg accordingly. Procedure Firstly frontend component has to be changed to incorporate a slider to give input for the variable font size. So a range input is inserted with range from 15 px to 45 px and default as 30 px. The size_print label gets changed dynamically to show the value selected from the range slider. <li> <input type="radio" name="fontsize" id="font-size-picker"> Choose font size </li> <section id="font-size-input" style="display:none;"> <label for="inputFile" id="size_print"></label> <div> <input type="range" id="font-size" max=45 min=15 step=5 value=30  class="form-control" name="font_size"> </div> </section> After adding the component, form script is changed to add toggle behaviour to the button. For adding the toggling behaviour in the component, checkbox is used and the value of the label is updated dynamically as the slider value is changed. $("#size_print").text($("#font-size").val() + " px");       $("#font-size-picker").click(function () {           if ($(this).is(":checked")) {               $("#font-size-input").css("display", "block");           } else {               $("#font-size-input").css("display", "none");           }       });       $("#font-size").on('input', function () {           $("#size_print").text($(this).val() + " px");       }); After completing the work on the frontend, it is necessary to modify the backend too. The method for choosing custom font has to be refactored. It now checks whether the custom font is set or font size variable is set, and creates a config file for fonts which after use gets deleted. font_config = {}    # custom font is specified    if custom_font != '':        font_config['font'] = custom_font    if font_size != '':        font_config['font_size'] = font_size    if custom_font != '' or font_size != '':        json_str = json.dumps(font_config)        print(json_str)        f = open(os.path.join(app.config['UPLOAD_FOLDER'], 'fonts.json'), "w+")        f.write(json_str)        f.close() The generator class is modified as well to accommodate the changes, by adding a new class attribute called font_size. We find the keys in the dict object loaded from the file and assign the same to class attribute. if 'font_size' in self.DATA.keys():                self.font_size = self.DATA['font_size'] Make the necessary change in the svg, so that font size change can be represented in the generated PDF. Replace the old font size with the new…

Continue ReadingVariable Font Size Badgeyay