Search This Blog

Thursday, January 26, 2017

Study of an AngularJS application: Feeding Excel based data into an SVG Flowchart with AngularJS and NodeJS

Reference article
Implementing a Flowchart with SVG and AngularJS
Source code from original article is here.
 
Customization goals
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.


 
Most challenging challenge as a dummy
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).
 
Application environment
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




 
Snaps of the working application
1. Start the node server from the terminal:
image_thumb43
server is ready and starts listening on configured port:
image_thumb44


2. Launch a browser and navigate to the application’s configured URL:
image_thumb45
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:
image_thumb46
the nodes can be rearranged by mouse drag and drop:
image_thumb48




3. Delete one of the nodes from the feeder excel sheet:
image_thumb49
image_thumb50
refresh the browser and see the updated nodes – no server restart required:
image_thumb51



4. Check the logs and see that only the server side logging done is visible:
image_thumb52

 
When can we see the client side logs?
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:
image_thumb53
as well as the remote debugging port setting while launching Chrome:
image_thumb35














Saturday, January 16, 2016

Code share - Test Run Summary Table with collapsible point of failure details

Video is here.

Code is here:

File: myscript1.js

function repeatTest($scope) {
  $scope.tests = [
    {testName: "Test1", overallResult: "Pass", firstError: "-", lastError: "-"},
    {testName: "Test2", overallResult: "Fail", firstError: "Page not found", lastError: "Page not found"},
    {testName: "Test3", overallResult: "Fail", firstError: "Could not select value in combobox - EmpAgeRange", lastError: "Could not find editbox - EmpAddressLine2"}
  ];
}


File: index.html

<!DOCTYPE html>
<html>

  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="myscript1.js"></script>

  </head>

  <body ng-app="">
    <h1>Test Run Summary</h1>
    <div ng-controller="repeatTest">
      <table>
        <thead style="background-color: lightgray;">
          <tr>
            <td style="width: 30px;"></td>
            <td>Test Name</td>
            <td>Overall Result</td>
          <td>Point of Failure</td>
          </tr>  
        </thead>
        
        
        
        <tbody>
          <tr ng-repeat-start="test in tests">
            <td>
              <button ng-if="test.expanded" ng-click="test.expanded = false">-</button>
              <button ng-if="!test.expanded" ng-click="test.expanded = true">+</button>
            </td>
            <td>{{test.testName}}</td>
            <td>{{test.overallResult}}</td>
          </tr>
          <tr ng-if="test.expanded">
          <td />
          <td />
          <td />
            <td colspan="1">First Error: <br>{{test.firstError}}</td>
          </tr>
          <tr ng-if="test.expanded" ng-repeat-end="">
          <td />
          <td />
          <td />
            <td colspan="1">Last Error: <br>{{test.lastError}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body> 
</html> 

Monday, March 16, 2015

Multi XSD XML Validation

 

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.

Monday, November 10, 2014

Two-way XML Diffgram (XML structure sensitive)

    

With pretty printed source XMLs:

image

Same source XMLs, but in single line – diffgram output remains the same:

image

Download the program files from here.

Sunday, June 1, 2014

Experimenting with Visio and VBScript


This diagram is created:




















 
 
 
 
 
 
 
using this code:

















































 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Copy the code:

Option Explicit

Dim strVSDPath, filesys
Dim vsoApplication, vsoDocument, vsoPages, vsoPage
Dim vsoMaster1, vsoMaster2, vsoStencil
Dim vsoShape1, vsoShape2, vsoConnector1
Dim itr

Const visAutoConnectDirDown = 2     'Connect down.
Const visAutoConnectDirLeft = 3     'Connect to the left.
Const visAutoConnectDirNone = 0     'Connect without relocating the shapes.
Const visAutoConnectDirRight = 4     'Connect to the right.
Const visAutoConnectDirUp = 1         'Connect up.

' Visio file to be created.
strVSDPath = "D:\Workspace_Visio\TestRunFlow.vsd"

'delete any previously existing Suite file
Set filesys = CreateObject("Scripting.FileSystemObject")
If filesys.FileExists(strVSDPath) Then
    filesys.DeleteFile strVSDPath
End If
Set filesys = Nothing

' Bind to Visio object.
On Error Resume Next
'Set vsoApplication = CreateObject("Visio.Application")
Set vsoApplication = CreateObject("Visio.InvisibleApp")

If (Err.Number <> 0) Then
    On Error GoTo 0
    Wscript.Echo "Visio application not found."
    Wscript.Quit
End If
On Error GoTo 0


Set vsoDocument = vsoApplication.Documents.Add("Basic Diagram.vst")
Set vsoPages = vsoDocument.Pages
Set vsoPage = vsoPages.Item(1)
Set vsoStencil = vsoApplication.Documents("Basic Shapes.vss")

Set vsoMaster1 = vsoStencil.Masters("Rectangle")
'Set vsoMaster2 = vsoStencil.Masters("Rectangle")

Set vsoShape1 = vsoPage.Drop(vsoMaster1, 3.5, 7)
vsoShape1.Text = "Shape 1"
For itr = 2 to 3   
    Set vsoShape2 = vsoPage.Drop(vsoMaster1, 3.5, 5.5 + (itr - 1)*2)
   
    vsoShape2.Text = "Shape " & itr

    vsoShape1.AutoConnect vsoShape2, visAutoConnectDirDown
   
    Set vsoShape1 = vsoShape2
    Set vsoShape2 = Nothing
Next

vsoDocument.SaveAs strVSDPath
vsoDocument.Close

vsoApplication.Quit


'Set vsoApplication = Nothing
Set vsoShape1 = Nothing
Set vsoShape2 = Nothing
Set vsoConnector1 = Nothing

Set vsoMaster2 = Nothing
Set vsoMaster1 = Nothing
Set vsoStencil = Nothing
Set vsoPage = Nothing
Set vsoPages = Nothing
Set vsoDocument = Nothing
Set vsoApplication = Nothing

Wscript.Echo "Done"