turbitron is an iOS app in the making.
It's an app for team excursions.
Here's the dev website:
www.taigatrails.group
Implementing a Flowchart with SVG and AngularJS
Source code from original article is here.
a) Feed the SVG flowchart nodes from excel datasheet
b) Understand a bit of the AngularJS and NodeJS client-server communication
c) Learn javascript debugging on server side as well as client side using VS Code editor
As a beginner to AngularJS-NodeJS, the customization is based on a partial study of the original article.
There was a space of time when I thought I was publishing the server side JSON data to the same URL as the front-end html page. And then trying to debug it and not knowing why: in one case the data was coming from the server side only, while in the other case it was coming from mocked data on client side. Kept on looking for whether data was getting lost, or did I need routing. There were debug sessions where both server side and client side individually appeared working correctly.
Some days later I realized I needed to consume server response data from different URL (it had to be different than URL of Index HTML page being viewed from browser).
a) OS: Windows 10 desktop
b) Code editor: Visual Studio Code
c) Server-side: NodeJS + ExpressJS
d) Client-side: AngularJS, SVG, JSON
e) Application Data source: Excel
f) Server Data-publish format: JSON
1. Start the node server from the terminal:
![]()
server is ready and starts listening on configured port:
2. Launch a browser and navigate to the application’s configured URL:
![]()
a 2-paned application opens up with the left pane showing the json data and the right pane showing the SVG nodes read from excel sheet:
![]()
the nodes can be rearranged by mouse drag and drop:
3. Delete one of the nodes from the feeder excel sheet:
![]()
![]()
refresh the browser and see the updated nodes – no server restart required:
4. Check the logs and see that only the server side logging done is visible:
Client side debugging is possible using VS Code editor. Some configurations are required – please refer the launch.json file from the customized application code base.
Also required is a VS Code extension - Debugger for Chrome:
![]()
as well as the remote debugging port setting while launching Chrome:
Here’s the video!
This program validates XMLs against referenced XSDs.
The XSDs are assumed to be external to (not embedded in) the XML.
List the XSDs and XMLs details in separate sheets in the program’s excel book and run the program.
The program will generate errors/ warnings in console window.
With pretty printed source XMLs:
Same source XMLs, but in single line – diffgram output remains the same:
Download the program files from here.