Interface Electronics

Making of a Web report

Prof. Dr. Jörg Vollrath

Overview

Motivation
File structure
Operation
Editors
Making a slide, Templates
Tables, Equations, Hand out
LTSPICE schematics
Pictures
Plotting graphs
Buttons
Links
QR-code

Motivation

Options:

Word, Powerpoint
PDF
HTML, JavaScript

Benfits:

Everywhere, all devices fast access
No conversion of documents
Interactive elements

File structure

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.

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".


<div class="slide">
<h1>Presentation module></h1>
<table><tr><td><!----- Column1 ----------->
<br>
<br>
</td><td> <!-------- Column 2 -------------------->
<img src="Images/Notepad++.png" width="300">
</td></tr></table> <!-------- Column 2 End-------------------->
<div class="handout"></div>
</div>

Each slide can have additional text with a 'div' with 'class' "handout".

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


<!-- LTSPICE -->
<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.
There has to be sections "<PRE> for subcircuits and the main circuit.


<canvas id="WS2011_Prob4" width="400" height="300" class="LTSPICE" level="1"
	          sym='Switch'> </canvas>

Add to LTSPICE queue


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

Tables and Buttons

Code	000	001	010	011	100	101	110	111
Vout[V]
INL[LSB]
DNL[LSB]

Source Code Highlighting


<!-- LTSPICE -->
<SCRIPT SRC="../SPICE_HTML_2013_03_11/LTSPICE.js"></SCRIPT>
<!-- Prettify Google -->
<link href="../google-code-prettify/src/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../google-code-prettify/src/prettify.js"></script>
<script type="text/javascript" src="../google-code-prettify/src/lang-vhdl.js"></script>
...
     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'".

Drawing Charts

After including the code:


  <!-- ChaRt -->
  <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.


     function plotSine() {
	  var aXY = new Array();
	  var grN = 30;
      for (var i = 0; i < grN; i++) {
	    aXY[i] = i;
		aXY[i + grN] = 10 * Math.sin(i * Math.PI /5)
	  }
	  ScatterPlot("sineChart","Heading",aXY,grN,
	              "x axis","lin","auto",
				  "y axis","lin","auto","Grid");
	 }			
     add_chart(plotSine);

Equations with MathJax