Processing math: 0%
Hochschule Kempten      
Fakultät Elektrotechnik      
Interface Electronics       Fachgebiet Elektronik, Prof. Vollrath      

Interface Electronics

Making of a Web report

Prof. Dr. Jörg Vollrath


This documentation/presentation shows how to do a web page for documentation of results.

Overview

Motivation


Options:

Benfits:

File structure

General directory web_Template.
Web page html file is in subdirectory "2017_Group01".
The other directories contain general used modules.
  • Chart_2013_09_11: A chart drawing JavaScript module.
  • css: Web page color scheme and general appearance
  • google-code-prettify: Code highlighting
  • MathJax: Displaying equations using a LATEX
  • QRCode: Generates QR codes from text
  • scripts: JavaScript files
  • SPICE_HTML_2018_02: Displays LTSPICE schematics
Local installation for offline operation.
Open Access: No cost.
Download the ziped directory web_Template.zip .
Unzip the file.
There is a general directory web_Template.
The web page html file is located in a subdirectory "2017_Group01".
Different projects or groups can have separate directories.
The other directories contain general used modules.
  • Chart_2013_09_11: A chart drawing JavaScript module.
  • css: The formatting for the web page: color scheme and general appearance
  • google-code-prettify: Code highlighting and line numbering for many programming languages
  • MathJax: Displaying equations on a web page using a LATEX style notation.
  • QRCode: Generates QR codes from text and display the link for the current file
  • scripts: JavaScript files
  • SPICE_HTML_2018_02: Displays LTSPICE files directly in the web page and enables the user to redo simulations.
  • ui: JavaScript presentation module
All files are installed locally to be able to display all web content without internet connection.
The web page will be displayed offline, with different internet browser on different devices.
Since all pages can be downloaded it enables the user to add and modify content.
A locally installed web server can enable file writing and saving of user data.
With this installation you can also copy the Internet files from Interface Electronics to your local drive in a separate directory and use and modify them offline.
The goal is to enable faster and broader advancement of learning material, to ease learning and give open no cost access.

Operation

Presentation mode

There is a button to switch between presentation and handout mode.
Top right corner.
Graphics and text are scaled accordingly.

Hovering with the mouse in the lower right you can select the next slide or bring you back to outline mode

Editors

Text Editor likeNotepad++
Syntax highlighting
Special control sequences needed. (HTML, JavaScript)
Very compact code.

HTML Authoring: Microsoft Expression Web
WYSIWYG Editor
What you see is what you get
Creates a lot of overhead formatting
No JavaScript live view.

HTML tags

The easiest way to get to know the HTML tags is via an Internet search.

Some structure can be generated using "DIV" or "SPAN".
  1. <div id="myDivID" class="slide">
  2. </div>
  3. <SPAN id="mySpanID" class="slide">
  4. </SPAN>
 HTML Comments:
  1. <!----- Column1 ----------->
 Headings:
  1. <h1>Header 1</h1>
  2. <h1>Header 2</h1>
  3. <h1>Header 3</h1>
 Images:
  1. <img src="Images/Notepad++.png" width="300">

Presentation module

A module S5 is used for switching between presentation mode and handout.
This scales all text and graphics accordingly and adds controls.
Each slide starts with a 'div' with 'class' "slide". 
  1. <div class="slide">
  2. <h1>Presentation module></h1>
  3. <table><tr><td><!----- Column1 ----------->
  4. <br>
  5. <br>
  6. </td><td> <!-------- Column 2 -------------------->
  7. <img src="Images/Notepad++.png" width="300">
  8. </td></tr></table> <!-------- Column 2 End-------------------->
  9. <div class="handout"></div>
  10. </div>
 Each slide can have additional text with a 'div' with 'class' "handout".
The presentation module needs following code: 
  1. <!-- metadata -->
  2. <meta name="generator" content="S5" />
  3. <meta name="version" content="S5 1.1" />
  4. <meta name="presdate" content="20121001" />
  5. <meta name="author" content="Joerg Vollrath" />
  6. <meta name="company" content="Kempten University of Applied Science" />
  7. <!-- configuration parameters -->
  8. <meta name="defaultView" content="outline" />
  9. <meta name="controlVis" content="hidden" />
  10. <!-- style sheet links -->
  11. <link rel="stylesheet" type="text/css" href="../css/style.css" media="all" />
  12. <link rel="stylesheet" href="../ui/default/slides.css" type="text/css" media="projection" id="slideProj" />
  13. <link rel="stylesheet" href="../ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" />
  14. <link rel="stylesheet" href="../ui/default/print.css" type="text/css" media="print" id="slidePrint" />
  15. <link rel="stylesheet" href="../ui/default/opera.css" type="text/css" media="projection" id="operaFix" />
  16. <!-- embedded styles -->
  17. <style type="text/css" media="all">
  18. .imgcon {width: 525px; margin: 0 auto; padding: 0; text-align: center;}
  19. #anim {width: 270px; height: 320px; position: relative; margin-top: 0.5em;}
  20. #anim img {position: absolute; top: 42px; left: 24px;}
  21. img#me01 {top: 0; left: 0;}
  22. img#me02 {left: 23px;}
  23. img#me04 {top: 44px;}
  24. img#me05 {top: 43px;left: 36px;}
  25. </style>
  26. <!-- S5 JS -->
  27. <script src="../ui/default/slides.js" type="text/javascript"></script>
  28.  
 There is also code needed for displaying the slide:
  1. <div class="layout">
  2. <div id="controls"><!-- DO NOT EDIT --></div>
  3. <div id="currentSlide"><!-- DO NOT EDIT --></div>
  4. <div id="header"></div>
  5. <div id="footer">
  6. <hr>
  7. <h1>2017 01 11 Interface Electronics 10 Pipeline Prof. Dr. Joerg Vollrath  </h1>
  8. </div>
  9. </div>
 The best stratgey is to reuse example code, copy it and modify it.
During modification check the result in a web browser frequently to catch errors early.

LTSPICE schematics

JavaScript module
SPICE_HTML_2018_02/LTSPICE.js

Canvas, Control, Link, Code parts

Add schematics to processing list

ID has to be the same as the schematic name.

Include JavaScript LTSPICE drawing module

  1. <!-- LTSPICE -->
  2. <SCRIPT SRC="../SPICE_HTML_2018_02/LTSPICE.js"></SCRIPT>

Create a canvas and controls

The ctrlid DIV gives the option to show the LTSPICE source code, change fontsize and line thickness.
The link gives you direct acces to the LTSPICE file.
Subcircuits are comma separated listed.
All files have to be in a subdirectory LTSPICE.
  1. <canvas id="WS2011_Prob4" width="400" height="300" level="1" class="LTSPICE"
  2. 	  sym="Switch"> </canvas>

Add to LTSPICE queue

  1.      document.addEventListener("load", findLT());

Buttons



PrintPage

Tables and Buttons

Code 000 001 010 011 100 101 110 111
Vout[V]
INL[LSB]
DNL[LSB]
Tables can be generated with 'border = 1' and without 'border = 0'.
They can be used to generate 2 column slides.
  1. <!-- TABLE -->
  2. <table border=1>
  3. <tr><td>row 1, col 1</td><td> row 1, col 2 </td><td> row 1, col3 </td></tr>
  4. <tr><td>row 2, col 1</td><td> row 2, col 2 </td><td> row 2, col3 </td></tr>
  5. <tr><td>row 3, col 1</td><td> row 3, col 2 </td><td> row 3, col3 </td></tr>
  6. </table>
A B C D E F
5 v1 I(R1) I(Gleichung) Fehlerquadrate I(R1*0.999) Fehler(R1*0.999
6 -2.00 -1.00E-02 -0.0666667 =(C6-B6)*(C6-B6) =A6/(0.999*$B$2) =(E6-B6)*(E6-B6) 
  1. <table cellspacing="0" cellpadding="5" border="1" 
  2.        bordercolorlight="#000000" bordercolordark="#000000" bordercolor="#000000">
  3. 					<tr bgcolor="#CCCCCC">
  4. 					<td width="100" align="right" ></td>

Source Code Highlighting

  1. <!-- LTSPICE -->
  2. <SCRIPT SRC="../SPICE_HTML_2013_03_11/LTSPICE.js"></SCRIPT>
  3. <!-- Prettify Google -->
  4. <link href="../google-code-prettify/src/prettify.css" type="text/css" rel="stylesheet" />
  5. <script type="text/javascript" src="../google-code-prettify/src/prettify.js"></script>
  6. <script type="text/javascript" src="../google-code-prettify/src/lang-vhdl.js"></script>
  7. ...
  8.      document.addEventListener("load", prettyPrint());

Using JavaScript

A table and graph can be generated with JavaScript.
Reso-
lution (Bits);Sam-
ple rate [MHz];Power consumption 
[W]; Architecture, Technology 
(Si, GaAs, SiGe,..); Power supply 
 voltage[V]	; ADC Input 
range, DAC out-
put range;Feature size [um];	Chip size mm2;Typ: ADC, DAC;Year;Cita-
tion
4;35000	;4.5	;Flash, SiGe;3.3;NA	; 0.18	; 8	; ADC	; 2009 ;[1]
12; 104M; 0.88m  ;SAR ;1.1/1.2;  N/A; 0.028; 0.003;  ADC; 2016; [2] 
9; 1.8G; 44m; Pipeline; 1.2; N/A; 65; 0.15; ADC; 2016; [3]

A section can be made non visible by setting "style='display:none'".
Reso-
lution (Bits)		Sam-
ple rate [MHz]		Power consumption
[W]		 Architecture, Technology
(Si, GaAs, SiGe,..)		 Power supply
voltage[V] 		ADC Input
range, DAC out-
put range		Feature size [um] Chip size mm2Typ: ADC, DACYearCita-
tion
435000 4.5 Flash, SiGe3.3NA 0.18 8 ADC 2009 [1]
12 104M 0.88m SAR 1.1/1.2 N/A 0.028 0.003 ADC 2016 [2]
9 1.8G 44m Pipeline 1.2 N/A 65 0.15 ADC 2016 [3]

Drawing Charts

After including the code:
  2.   <!-- ChaRt -->
  3.   <SCRIPT src="../Chart_2013_03_11/Chart_basic.js"></SCRIPT>
Charts can be generated.

There should be a function to draw a chart ("plotSine").
This uses the function Scatterplot.
This draws a chart of the values of the aXY array in a canvas with the id "sineChart".
This function has to be added to the drawings with the add_chart(plotSine) function. 
  2.      function plotSine() {
  3. 	  var aXY = new Array();
  4. 	  var grN = 30;
  5.       for (var i = 0; i < grN; i++) {
  6. 	    aXY[i] = i;
  7. 		aXY[i + grN] = 10 * Math.sin(i * Math.PI /5)
  8. 	  }
  9. 	  ScatterPlot("sineChart","Heading",aXY,grN,
  10. 	              "x axis","lin","auto",
  11. 				  "y axis","lin","auto","Grid");
  12. 	 }			
  13.      add_chart(plotSine);

Equations with MathJax

After including the code:
  1. <!-- MathJax -->
  2. <script type="text/x-mathjax-config">
  3.   MathJax.Hub.Config({
  4.     extensions: ["tex2jax.js"],
  5.     jax: ["input/TeX","output/HTML-CSS"],
  6.     tex2jax: {inlineMath: [["$$","$$"],["\\(","\\)"]]}
  7.   });
  8. </script>
  9. <script type="text/javascript" src="../MathJax/MathJax.js"></script>
 Equations can be set in LATEX style:
([  V_O = V_{ref} \sum_{i=0}^{N-1}  \frac{D_{i}}{2^{N-i}}  \)
V_O = V_{ref} \sum_{i=0}^{N-1} \frac{D_{i}}{2^{N-i}}

Parsing and formatting numbers

  1. parseInt(text);
  2. parseFloat(text);
  3. a.toFixed(4);
  4. a.toExponential(4);
 Example:
var text = '23.465';
a.toExponential(4): 2.3000e+1
a = parseFloat(text);
a = parseFloat(text)<br> a.toFixed(4): 23.4650
a.toExponential(4): 2.3465e+1

JavaScript Animation: MOSFET

Cross section
Ugs [V] Uds [V] Ubs [V]
0 0 0
Output curve

transfer curve


Inline image and QR code

The document includes the QR code JavaScript.
<!-- QR Code -->
<script src="../QRCode/jsqr-1.0.2.js" type="text/javascript"></script>

<canvas id="thisQR"></canvas>
At the end of this document the QR code of this webpage is displayed in the canvas.
An inline Image can be inserted with following code. 
  1. <img src="data:image/png;base64,iVBOR" alt="" width="300" />
The string can be generated with:
https://www.base64-image.de/ 
  1.         var blobUrl = URL.createObjectURL(data.blob);
Example:

Pasting images into a document

JavaScript code:
  1. <!-- Paste helping function -->
  2. <script type="text/javascript" src="../scripts/paste.js"></script>
  3.  
  4.     $(function(){
  5.       $('.p1textarea').pastableTextarea();
  6.       $('.p1demo').on('pasteImage', function(ev, data){
  7.         var blobUrl = URL.createObjectURL(data.blob);
  8.         $('<div class="result" id="blob1"> <a href="' + blobUrl + '">'
  9. 		   + '<img src="' + data.dataURL +'" width="600">' 
  10. 		   + '</a></div>').insertAfter(this);
  11.       }).on('pasteText', function(ev, data){
  12.         $('<div class="result" id="blob1"></div>').text('text: "' 
  13. 		                    + data.text + '"').insertAfter(this);
  14.       });
  15.     });
 Insert here the picture.

  1. Insert here the picture.<br><br>
  2. 		  <textarea class="p1demo p1textarea" id="BCounter" rows="2" cols = "60">
  3. Copy a screenshot (< Alt > < Druck > ) from the Clipboard ( < Strg > v ). 
  4. </textarea>

Loading external files


An example is given with LTSPICE in the LTSPICE Javascript code using JQuery.

  1. 	   try {
  2.             $('#idDivExternalFile').load('filename.ext');      
  3. 	   } 
  4.        catch(err){}
The file 'filename.ext' is loaded into the block with id 'idDivExternalFile'.
Parsing the external file has to be done after load.
A function is looking at the length of the content and is then evaluating the content.
  1. function startEval() {
  2.     var notloaded = false;
  3.     if ( document.getElementById("idDivExternalFile").innerHTML.length < 60)  { 
  4.         notloaded = true;
  5.     }
  6.     if ( notloaded ) { 
  7.         setTimeout(startEval,500);
  8.     } else { 
  9.         evaluate("idDivExternalFile"); 
  10.     }
  11. }

Selecting and reading a client file


A file select button is given below.


  1. <input type="file" id="fileinput" />
 An example is given with LTSPICE in the LTSPICE Javascript code.

  1.   document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
  2.   function readSingleFile(evt) {
  3.     //Retrieve the first (and only!) File from the FileList object
  4.     var f = evt.target.files[0]; 
  5.     var r = new FileReader();
  6.     if (f.name.substr(f.name.length-3,3)=="asc") {
  7.         r.onload = function(e) { // look at data
  8.            var contents = e.target.result;
  9. 	    }
  10. 	    r.readAsText(f);		
  11. 	 } else {
  12.         r.onload = function(e) { // look at data
  13.            var contents = new DataView(e.target.result);
  14. 	    }
  15. 	    r.readAsArrayBuffer(f);
  16.      }
  17.   }
 The function r.onload is evaluating the data from the client file.
There are different functions for ASCII text data and for binary data available.

Select Box

  1.  <SELECT id="sOption" onclick="allS();">
  2.   <option value="0" selected="">Option 0 </option>
  3.   <option value="1" >Option 1 </option>
  4.   <option value="2" >Option 2 </option>
  5.   <option value="3">Option 3 </option>
  6.  </SELECT>	 
  7.  <script type="text/javascript"> 
  8.   <!-- Begin
  9. 	function allS() {
  10. 	  document.getElementById('option').innerHTML = document.getElementById('sOption').value; 
  11.     }
  12.   //  End -->
  13.   </script >
 Selected Option:

SVG drawings

External svg is working
Example.svg
svg section only gives error in slide.js
TypeError: object.className.search is not a function
https://www.w3schools.com/graphics/svg_intro.asp
Inkscape (https://inkscape.org/en/) drawing program.

Making drawings



The following shows the example section with comments.
The comments should not be in the original file.
  1. <canvas id="myDrawing" class="drawS" width="200"
  2.         height="100">
  3. BB|100|100|                  First line always 
  4.                              bounding box
  5. SS|#777777|                  Stroke style
  6. PB|                          Begin Path
  7. LI|0|0|10|10|                Line           
  8. ST|                          Stroke
  9. </canvas>
  10.  
  11. document.addEventListener("load",findDrawS());
class: "drawS", drawSimple.js
Planned implementation:
Line by line simple human readable format according to canvas functions.
First 2 characters define element.
PB: Begin Path beginPath()
PC: Close Path closePath()
LI: Line x1,y1,x2,y2..moveTo(), lineTo(),
AR: ARC
RF: Fill rectangle
RC: Rectangle
RS: Stroke rectangle
FT: Fill text
SF: Fill style
IM: Image
SS: Stroke style
ST: Stroke
FI: Fill
LW: Linewidth
FO: Font
AL: Alpha
CS: Save context
CR: Restore context
CT: Translate context
CA: Rotate angle context
SE: Start element/block
EL: Element
XE: End element/block
##: Comment

Overlap

Norway
Top Left
Canvas Top Left
A container class has to have a css element position relative to document content. Then an absolute position for the text can be chosen.

  1. <style>
  2. img.ov {
  3.     position: absolute;
  4.     left: 0px;
  5.     top: 0px;
  6.     z-index: -1;
  7. }
  8. .container {
  9.     position: relative;
  10. }
  11.  
  12. .topleft {
  13.     position: absolute;
  14.     top: 8px;
  15.     left: 16px;
  16.     font-size: 18px;
  17. }
  18. </style>
  19. <table><tr><td>
  20. <div class="container">
  21.   <img src="Images/w3css.gif" alt="Norway" width="100" height="140">
  22.   <div class="topleft">Top Left</div>
  23. </div>
  24. </td><td>
  25. <div class="container">
  26.   <canvas id="test" width="100" height="100"></canvas>
  27.   <div class="topleft">Canvas Top Left</div>
  28. </div>
  29. </td></tr></table>

JELIB Layout display


Library: jelib/sclib.jelib
cell: BUFGP

Writing documents and programs

Reuse code and use templates



Start with this file and modify the content.


Local file system Error


Chrome gives a local file system error for downloading external files without having a web server.

- close Chrome
- open a command line: cmd.exe
- insert: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
perhaps you must adjust your chrome path.
Chrome starts and should be able to display LTSPICE files.

Enable Firefox to load local files:
Address: about:config
set the flag privacy.file_unique_origin to false
LTSPICE schematics can be displayed in the browser.
Be aware of file names. No special characters and no space.


A node.js web server can be installed.
Install node on your computer.
Start node command window: 
  1. MyFolder>npm install connect serve-static
Make a file for node.js called server.js
  1.  
  2. var connect = require('connect');
  3. var serveStatic = require('serve-static');
  4. connect().use(serveStatic(__dirname)).listen(8080, function(){
  5.     console.log('Server running on 8080...');
  6. });
 Start the server in the web directory with:
node server.js

Other


Markdown: Showdown.js




  Hochschule für angewandte Wissenschaften Kempten, Jörg Vollrath, Bahnhofstraße 61 · 87435 Kempten
  Tel. 0831/25 23-0 · Fax 0831/25 23-104 · E-Mail: joerg.vollrath(at)fh-kempten.de
Impressum