Sunday, 19 September 2021

 

Putting Maths, Physics and Chemistry symbols in web pages served by Node.js
There are many ‘tex softwares’ to perform letting mathematical and other symbols in web pages but I recommend using Mathjax for this purpose. Mathjax is an open source javascript based software which can easily be adopted in Nodejs.
We can directly make link from cdn with <script src=’……’></script> code in our web page but I always prefer to make a separate copy of mathjax in our server.
To adopt mathjax in our nodejs server we have to first install mathjax with the npm(node package manager). We use mathjax3 as it has many advantages over mathjax v2.
Rendering MathJax in Nodejs system, is not a simple client side task. We have to follow few steps in our web app(server).
We need to access npm first. After getting npm we could use it to install mathjax into node system.
So at the server side or at the local pc which runs localhost by Node.js,
 npm install mathjax@3
Note: Otherwise, we have to update the package.json file and add the following line inside dependencies key section like this:
Package.json
{
  "name": "Render Math",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
    "express": "^4.17.1",
    ……………………………
    "mathjax": "^3.1.2",
    …………………………..
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
Then we have to run npm.
This will install mathjax in node_modules folder in our base project.
Now we got mathjax installed in our system.
Now follow the following steps to render mathjax to our web pages from our nodejs server.
1.                 Configure mathjax in script tag within header section of the html page.
<html>
            <head>
            <meta name='viewport' content="width=device-width, initial-scale=1.0" charset="utf-8">
            <script>
                        window.MathJax = {
                                    tex: {
                                                inlineMath: [['$', '$'], ['\\(', '\\)']]
                                    },
                                    svg: {
                                                fontCache: 'global'
                                    }
                        };
            </script>
            </head>
</html>
2.     . Now load the mathjax with the code: <script type=”text/javascript” scr=“path/tex-chtml.js id=”MathJax-script” async></script>. This is also inside <head></head> section in the html file.
Here ‘path’ is the path of the tex-chtml.js file which should be served by the Nodejs server.
NOTE: When we installed the mathjax through npm, the working components of the mathjax are stored inside the mathjax/es5 directory. So, if we put all the components of mathjax/es5 directory into a base directory folder and name it as mathjax, the text-chtml.js file will be accessible from “/mathjax/tex-chtml.js” location. So, in this case the ‘path’ inside the second script tag should be replaced as “/mathjax”.
Thus, now the src path should be “/mathjax/tex-chtml.js”
3.     . Up to this, the code required for rendering maths and other related symbols in our web page is like this:
<html>
            <head>
            <meta name='viewport' content="width=device-width, initial-scale=1.0" charset="utf-8">
            <script>
                        window.MathJax = {
                                    tex: {
                                                inlineMath: [['$', '$'], ['\\(', '\\)']]
                                    },
                                    svg: {
                                                fontCache: 'global'
                                    }
                        };
            </script>
            <script type=”text/javascript” scr=“/mathjax/tex-chtml.js id=”MathJax-script” async></script>
            </head>
</html>
4.    .  The above code is required to render mathjax from the own copy of mathjax from the server. It is now the task of the server/web app to serve the mathjax files to the webpages. So, we require the following code in the Nodejs web app:
 
app.get('/mathjax*', (req, resp)=>{
            var path = req.url;
            if(fs.existsSync(__dirname+path)){
                        fs.readFile(__dirname + path, function(err, data){
                                    if(err){
                                                resp.writeHead(404);
                                                resp.write(err);
                                                resp.end();
                                    }else{
                                                //logger.debug('caught..echo');
                                    resp.writeHead(200, {
                                                'Content-Type': 'text/javascript'
                                    });
                                    resp.write(data);
                                    resp.end();
                                    }
                        });
            }else resp.end('Not found');
});
NOTE: It is worthy to mention that all the concerned nodejs components are kept inside the /mathjax directory inside base directory. Also, we used a wildcard character (*) after ‘/mathjax’. So, we could access the tex-chtml.js and any other component file from this url path.
5.     Now restart Nodejs and put some mathematical expression like $ x^3 + y^3 $ inside anywhere in the web content. This will appear as

. It is important that every expression which contain mathematics or such symbols should be written inside two ‘$’ characters or should be preceded by “\\(“ and followed by “\\)” characters.
 
All of static contents containing mathematical expressions will be displayed by now.
 
To render mathematical expressions for dynamic web pages we have to use mathjax typesets. There two types of mathjax typesets – synchronous and asynchronous.
For the synchronous way, we have to use MathJax.typeset(). It will tell mathjax to look for mathematics in the page for any unprocessed mathematical expressions and then typeset it.
 
For the asynchronous way we have to use MathJax.typesetPromise();
The following code snippet should be followed:
 
function doMathJax(div,s){
const done = document.createElement('span');
            done.textContent = '';
            const syncTypeset = div;
            syncTypeset.innerHTML = s;
            setTimeout(async ()=>{
                        await MathJax.typesetPromise();
                        syncTypeset.appendChild(done.cloneNode());
            },1000);
}
Function doMathJax will render mathematical expressions inside the variable s to the html element div.
 
We can do it also as following:
MathJax.typesetPromise().then()=>{
            //modify the DOM here.
            MathJax.typesetPromise();
}).catch((err)=> console.log(err.message));

Thursday, 2 January 2020


SUBHRA’S LAB SERVICES


è Conduct Exam/Interview/Survey Online

·       Conduct Exam/interview/survey remotely through over the internet.
·       To accomplish this Examiner/Interviewer/Surveyor has to send an html form to each of the examinee/interviewee/surveyee
·       The examinee/interviewee/surveyee will answer each/some of the questions and at the end will submit the forms from his/her own mobile phone.
·       The Examiner/interviewer/surveyor will get the responses from the html form and will generate the reports as per his/her requirements.

è ICLOCK-G (Internet Device)

·       DISPLAYS THE TIME(IST) AS DOWNLOADED FROM NTP SERVER
·       DISPLAYS THE CAPTION TEXT AS DIRECTED BY THE USER
·       ONCE SETUP IS DONE THE CAPTION TEXT WILL CHANGE FROM TIME TO TIME
·       THERE IS A CERTAIN TIME INTERVAL BETWEEN TIME DISPLAY & SCROLLING CAPTION TEXT DISPLAY
·       THE USER WILL STORE THE CAPTION TEXTS & DISPLAY TIME/DATE IN GOOGLE SERVER
·       OPERATIONS CAN BE PERFORMED FROM ANY REMOTE PLACE ALL OVER THE WORLD
·       SUITABLE FOR RECEPTIONS, PUBLIC/PRIVATE EVENTS, COUNTERS, OFFICE BOSS’S BACK WALL ETC.

è GONG BELL SCHEDULER (Internet Device)

·       GONG BELL IS SCHEDULED TO RING AS SET BY THE USER
·       AN USER CAN SET A MAXIMUM EIGHT NUMBER OF TIME EPOCHS AT WHICH THE BELL WILL BE SCHEDULED TO RING FROM HIS/HER ANDROID SET
·       AN USER CAN ALSO ISSUE COMMAND TO RING A BELL WHENEVER HE/SHE WANTS
·       ALL OF THESE OPERATIONS CAN BE PERFORMED FROM ANYWHERE IN THIS WORLD
·       BLYNK SERVER & BLYNK APPS ARE USED FOR THE ABOVE OPERATIONS
·       SUITABLE FOR SCHOOLS, WORKSHOPS, INDUSTRIES ETC.

è DISPLAY BOARD WITH CAPTION TEXT SCHEDULER (Internet Device)

·       DISPLAY BOARDS ARE USED TO DISPLAY TEXTS IN ENGLISH/BENGALI
·       TEXTS CAN BE CHANGED REMOTELY FROM ANYWHERE IN THIS WORLD
·       ONCE SETUP IS DONE THE CAPTION TEXT WILL CHANGE FROM TIME TO TIME
·       THE USER CAN STORE THE CAPTION TEXTS & DISPLAY TIME/DATE IN GOOGLE SERVER
·       SUITABLE FOR SHOPS, COUNTERS, HOSPITALS, EMERGENCIES ETC.
·       SPECIALITY IN VERTICAL SCROLLING (UP AND DOWN)

è PCB DESIGNING (USING KICAD)

·       DESIGNING PRINTED CIRCUIT BOARD UPTO TWO LAYERS
·       SUITABLE FOR MICROCONTROLLER INSTALLATION, IC INSTALLATION AND DIFFERENT ELECTRONICS COMPONENT INSTALLATION
·       MAKE A COMPLEX CIRCUIT EASILY ACHIEVABLE

è ANDROID PROGRAMMING

·       OBJECT ORIENTED PROGRAMMING
·       DIFFERENT MODIFIERS
·       ANDROID PROGRAMMING ENVIRONMENT
·       JAVA PROGRAMMING BASICS
·       CREATING DRAWABLE .PNG FILE FOR DIFFERENT SCREENS
·       MANIFEST FILE FOR GRANTING PERMISSIONS FOR DIFFERENT APPS
·       YOUR FIRST ANDROID APP
·       DIFFERNET TYPES OF APPS
  

è ARDUINO PROGRAMMING

·       WORKSHOP ON ARDUINO PLAYGROUND
·       Pre requirements for the Candidates:
·       Physics/Maths with Prior Knowledge of programming language C.
·       Course Details:

Day1
·       Microcontroller
·       ii. Atmega328
·       iii. What is Arduino, Why Arduino
·       iv. Arduino uno, Arduino pro mini
·       v. Arduino ide
·       vi. Hardware Requirements
·       vii. Programming concepts

Day2
·       viii. Hardware connections
·       ix. First Blink program
·       x. Programming Concepts

Day3, Day4
·       xi. Programming Concepts
·       xii. Real Life Project:
o   Switch off/on a light with an ordinary remote control
o   Detecting Human presence in an area under surveillance.
o   Communicating with rf433 Receiver/transmitter.

Day5.
·       Watchdog reset.

Project Kit:
Remote Control (to be supplied
Motion Detector (to be supplied)
Radio frequency transmitter/Receiver. (to be supplied)

Benefits of this Workshop:
i. Making products like street light timer.
ii. Switching off/on selected electrical goods with ordinary remote control.
iii. Making devices for counting of total number of people entered in a hall or in a closed space.
iv. Detecting a particular object from a number of objects.
v. Devising surveillance devices.
vi. Etc.

8051 PROGRAMMING

o   8051 Architecture
o   Kill uVision – the Programming Environment for 8051
o   8051 Basic Circuit
o   First 8051 program
o   8051 Burner
o   Uploading code (.hex file) to 8051
o   8051 Timer Programming
o   8051 Interrupt Programming
o   Interfacing different Devices (any two) with 8051

Thursday, 5 July 2018

MOVING MESSAGE DISPLAY
Parts Required:

  1. 7x5 Led Matrix(4 Pieces)
  2. IC 74HC595(4 Pieces)
  3. Arduino Pro Mini 
  4. Bread Board (2 Pieces)
  5. Connecting Wire.
I have tested this on Bread Board.
The operating environment in desktop computer is Arduino IDE.
Any message can be displayed...










                                     

       







Saturday, 30 December 2017

Digital Clock(Show Piece)

Digital Clock from Subhra's Lab. It is an 8051 microcontroller implementation of rtc ds1307. Operates in 5 volt, supplied from a mobile charger. The PCB is designed by Subhra's Lab, the seven segment digits are displayed by the microcontroller using multiplexing method. Software is written in C language by Subhra's Lab using Keil microvision ide. The .hex file produced by Keil is burned to the 8051 mcu with a special burner software driver from willar.com using burner device from vegarobokit. 









Tuesday, 26 December 2017

Magic Microcontroller


WHAT IS A MICROCONTROLLER
Microcontroller is a actually a small computer developed on a single integrated circuit. Microcontroller is a combination of one or more Microprocessor and a small memory unit. Microprocessors do all the logical operations with the help of memory addresses. These logical operations leads to control one or more peripherals. The logical operations are programmable. There are some input ports and some out put ports. Input ports can receive inputs from users or can read inputs from one or more sensors. It may react through an interrupt which the MCU (microcontroller unit) listens on certain ports.

WHERE THE MCUs ARE USED
The MCUs are used in most of automated processes. From switching on/off street lights automatically at certain times of day-night circles to automatic opening and closing of the door of a gateway, from the operation lift in a multistoried building to the remote controlled toys. Every the automation us done easily with the application Microcontroller.




There are different kinds of microcontrollers available. Some of these are Atmega, Attiny, 8051, 8052 etc.
Our concern of applications are 8051 and Atmega based Arduino boards.



8051
8051 series of MCUs contains microcontrollers like at89c51, at89c52, st89s51, at89s52 etc. These microcontrollers are 40 pin micros. It has four ports P0, P1, P2, P3. Each port address an eight bit register. Thus each bit of port P0 is addressed as P0.0, P0.1, P0.2.....P0.7 and each bit of port P1 is addressed as P1.0....P1.7 and so on. Pin 9 of the 8051 is designated as the reset pin. And two pins , pin 18 and 19 are designated for the outside crystal clock pulse. Pin 31 ia to be connected to Vcc along with the pin 40. Pin 20 is connected to the ground. There are two interrupt pins designated for accepting outside interrputs. These pins are P3.2 and P3.3.

Arduino boards
These are Atmega based boards which implements mostly Atmega168 microcontrollers. 

PROGRAMMING 8051
8051 can be programmed both in C language as well as in low level assembly languages. We can use programming environments like Small Device C Compilar (SDCC) as well as Keil microVision. The C programs are written, debugged and compiled and .hex files are produced at the end. Microcontrollers are burned (programmed) with these hex files with a special 8051 burner software driver using a 8051 burner board from vegarobokit. The burner software is from Willar.com. There are other 8051 burner devices like one from Robosoftlabs.com, .hex files can be written to 8051 using this device with any usb flush burner like ProgISP. 

PROGRAMMING ARDUINO
There are different versions of Arduino boards like Arduino Uno, Arduino pro, Arduino pro mini etc. There is a special programming environment Arduino IDE for prgramming Arduino boards. Many predefine software library packages are there. Program files produced have .ino extension.  The boards are burned ( programmed) with this IDE software itself.

subhra.mukherjee.kol@gmail.com

Monday, 25 December 2017

STEPS FOR DESIGNING A PCB(USING KICAD)

1. Draw the schematic( In kicad)

2. Ds1307 was not in component library. With the help of an existing component , modidied it and named it as ds1307 using libedit( as far as i remembered)

3. After completing schematic do the erc Check.( Electrical rules check).

4. Do the necessary correction.

5. Now generate the netlist file. Use the default pcbnew option.

6. Now run cvpcb from the schematic window to assign footprints to the corresponding components. Observed that footprints for 7segments(both 1inch and .56 inch were not present).

7. Open Pcbnew and click 'new module'  to open footprint editor.

8. First set the grid value to 1.27mm.
then draw the pads in through hole mode and spacing between pins 2.54mm. This is done according the to the concerned datasheet.

9. After drawing footprint save it with a name( 7segment-ca && 7segment-ca-56in) in the current active library/directory named 'display'.

10. Now run cvpcb again. Assign the corresponding footprints to the components. Click 'save'. All information will be saved in a given name with a .cmp extension.

11. Now run pcbnew for a second time. Read the netlist file. All components along with footprints will pile on the top left corner of the pcbnew window.

12. Draw a line arround it with the select tool and drag it in the middle of pcbnew window.

13. For a complex design like rtc autorouting is required. KiCad does not have this facility, but it has allied software FreeRouting for autorouting from FreeRouting.net. Plugin for FreeRouting is there in 'Tool' option in pcbnew window.

14. What I have done: Download FreeRouting zip archieve from github. It is freerouting-master.zip of 8.?? Mb size. This archieve has a folder named 'binaries'. This folder contains two files: freerouting.jar & freerouting.exe. I executed freerouting.exe, a small window appeared seeking the .dsn file exported from kicad.

15. Previously from the dialogbox of 'tool'-->FreeRouting option in pcbnew window i exported my RTC layout as RTC.dsn file which is received by FreeRouting window.

16. A new window according to the size of layout will be opened. Click button Autorouting. The traces will be started drawing by the software itself.

17. After completing autorouting the layout board is to be exported to session file with .ses extension. Close FreeRouting window.

18. Open KiCad again now import board layout from the corresponding session file( .ses file) generated by FreeRouting software. There were no border line mentioned. Select Edges-Cuts from the options menu. Now selecting ... tool draw the board outline by clicking at the four corners of the board. End the drawing by double clicking the mouse.

19. Now produce gerber files. Go to File-->plot menu dialog from pcbnew layout window. Keep the default options. Select gerber from the plot menu. Select the required destination folder. Now press gerber button. Four files will be generated for 2 layers pcb. Again generate the drill file. Set the destination folder, press drill button. Note: Here something must be done for putting the correct solder mask over the pcb(i did not do this as i made the pcb without solder mask with a HAL finish).

20. Now produce the map file from the same plot window. Send these set of files to the manufacturer.

Contact Subhra: subhra.mukherjee.kol@gmail.com

Subhra's Philosophy