summaryrefslogtreecommitdiff
path: root/graphics/circuit_macros/examples/svg/tstSVG.htmx
diff options
context:
space:
mode:
Diffstat (limited to 'graphics/circuit_macros/examples/svg/tstSVG.htmx')
-rw-r--r--graphics/circuit_macros/examples/svg/tstSVG.htmx261
1 files changed, 176 insertions, 85 deletions
diff --git a/graphics/circuit_macros/examples/svg/tstSVG.htmx b/graphics/circuit_macros/examples/svg/tstSVG.htmx
index 65425998fc..ccb14e00b8 100644
--- a/graphics/circuit_macros/examples/svg/tstSVG.htmx
+++ b/graphics/circuit_macros/examples/svg/tstSVG.htmx
@@ -5,63 +5,131 @@
<meta http-equiv="Content-Style-Type" content="text/css">
<!--meta http-equiv="Content-Script-Type" content="text/javascript"-->
<TITLE>SVG Examples: Circuit_macros Version XXX</TITLE>
+<meta name="keywords" content="HTML"
+content='Circuit elements, basic circuits, logic circuits and other diagrams,
+electric circuits, resistor, capacitor, inductor, diode, sources, amplifier,
+integrator, fuse, switch, antenna, opamp, transformer, relay, contact, jack,
+plug, FET, UJT, thyristor, bipolar transistor, nport, windings, timer,
+optical isolator, rectifier, bistable, oscillator, CMOS, MOSFET, power supply,
+NAND gate, controlled source, synchronous machine, digital circuit, signal-flow
+graph, latch, decoder, flipflop, full adder, logic diagram, crossbar switch,
+dimensioning, control system, graph, RGB colors, recursion, binary tree,
+flowcharts, picture overlay, ASME Y14.5' >
+
<style type="text/css">
</style>
+<link rel="shortcut icon" href="../Circuit_macros.ico" type="image/x-icon" />
</HEAD>
-<BODY>
-<H2>SVG Circuit_macros examples, Version XXX</H2>
-<hr>
+<!-- ---------------------------------------------------------------------
+define(`ifinstr',`ifelse(`$2',,`$1',index(`$1',`$2'),-1,
+ `ifinstr(shift(shift(shift($@))))',`$3')')
-<p>
- These diagrams are in .svg format.
- <A HREF="examples.pdf">Pdf</A>
- and
- <A HREF="examples.html">png</A>
- versions are also available.
- The PDF equivalent can be found in examples.pdf of the distribution.
-</p>
- <p>
- Click on the link to view the source of each diagram.
-</p>
-<hr>
+define(`m4tt',`<g style="font-family:monospace">')
define(`cfig',`
<p>
-<!--[if lt IE 9]><embed src="$1.svg" sinclude($1.siz)><![endif]-->
+
+<!--[if lte IE 8]><embed src="$1.svg" sinclude($1.siz)><![endif]-->
<!--[if gte IE 9]>
-<object data="$1.svg" sinclude($1.siz) type="image/svg+xml" class="img">
+<object dx="4" data="$1.svg" sinclude($1.siz) type="image/svg+xml" class="img">
</object> <![endif]-->
<!--[if !IE]><!-->
<object data="$1.svg" sinclude($1.siz) type="image/svg+xml" class="img">
- </object> <!--<![endif]-->
+ </object> <![endif]-->
+
+<br><br>
+ifelse(`$2',,,`
+<a href="$1.txt" TYPE="text/plain" TARGET="_blank" alt="$1">$1.m4:</a>
+`$2' changecom(,)&`#'8194;changecom(`#')')
-<br>
-<a href="$1.txt" TYPE="text/plain" TARGET="_blank">$1.m4</a>
</p>
-<hr>')
+ifinstr(`$3',y,,`<hr>')')
-define(`m4tt',`<g style="font-family:monospace">')
+--------------------------------------------------------------------- -->
-<!--
-<embed pluginspage="http://www.adobe.com/svg/viewer/install/" />
--->
+<BODY>
+<table cellpadding="0" cellspacing="0"
+ width="700px" border="0" align="center" ><tr><td>
+<H2>SVG Circuit_macros examples, Version XXX</H2>
+<hr>
+
+<p>
+ This file shows diagrams in .svg format;
+ <A HREF="examples.html">png</A>
+ versions are also available.
+ The PDF equivalent can be found in examples.pdf of the distribution.
+</p>
+
+<p>
+The diagrams shown below have been adapted from the Circuit_macros
+examples in order to test the svg output of dpic. Generating svg line
+art is straightforward, but TeX, LaTeX, and related word
+processors do not produce svg. Either less-sophisticated text formatting
+must be employed or an
+ <A HREF="https://en.wikibooks.org/wiki/LaTeX/Export_To_Other_Formats">
+ intermediate format</A>
+such as pdf can be
+produced, followed by an additional processing step to convert to svg.
+Two possibilities for the latter are
+ <A HREF="https://www.ctan.org/pkg/dvisvgm">dvisvgm</A>
+and
+ <A HREF="https://github.com/dawbarton/pdf2svg">pdf2svg</A> although
+there may be font-related issues for some diagrams.
+<br>
+Many circuit and similar diagrams intended for the web do not
+require sophisticated labels, however; the examples shown below might
+be representative.
+</p>
<p>
-These diagrams have been adapted from the Circuit_macros examples in
-order to test the <em>experimental</em> svg output of dpic.
-Generating the line art is relatively straightforward, but
-the labeling is not created by a text processor and must, therefore, be
-more basic.
+ Click on the link to view the source of each diagram.
</p>
+<hr>
<p>
+There are a number of other issues:
<ul>
+ <li> Embedding .svg files in html documents with the &lt;embed&gt; or
+ &lt;object&gt; tag seems to be a perennial issue.
+ <li> This file has been tested mainly by using Firefox.
+ <li> The Adobe reader apparently requires a line of the form
+ <br> &lt;embed src="figure.svg" width="x" height="y" type="image/svg+xml"
+ /&gt;
+ This means that the html file has to contain dimension
+ information for each figure, whereas Firefox can
+ determine the figure size
+ from the &lt;svg ... object. Currently, dpic includes a comment line
+ giving reasonable dimensions in pixels but this has to be insterted into
+ the &lt;embed or &lt;object line. A makefile does it easily but
+ otherwise this could be tedious.
+ <li> The default font face is not specified in all of these diagrams but is
+ inherited from the enclosing document, so the appearance of labels can
+ differ depending on the browser. Some of these diagrams set the font at
+ the beginning of the diagram source.
+ <li> The &lt;svg tag may require modification
+ from the default used for this test. Dpic might be modified to
+ allow the generation of custom headers but that has not been done.
+ <li> Diagrams such as these contain text labels
+ that have to be treated differently from the LaTeX-compatible versions.
+ Apparently there is no direct way to know the bounding box of arbitrary svg
+ text.
+ <!-- text, as discussed
+ <a href="http://www.aditus.nu/jpgraph/jpg_svg.php" TARGET="_blank">here,</a>
+ for example. -->
+ Consequently, text placement is approximate and may require
+ manual adjustment.
+ Rather than patch the original source files for svg production, edited copies
+ have been used. The configuration file svg.m4 read by m4
+ prior to libcct.m4 contains the following macros defined for svg.
+ Others could be defined to exercise some of the media capabilties of svg.
+ They are subject to change:
<ul>
<li>
m4tt`'svg_font(</g>font-face,nominal size[:dptextratio],textoffset,
dpic commands`'m4tt)</g>:
+ Change font face, size, textratio and dpic textoffset parameters.
Change font face and dpic m4tt`'textht</g>, m4tt`'dptextratio</g>,
and m4tt`'textoffset</g> parameters.
If arg4 is blank, the font is changed and
@@ -95,10 +163,10 @@ more basic.
for setting larger or smaller text size, default 100
<li>m4tt svg_sub(</g>text, size percent, y displ, x displ`'m4tt)</g>:
subscript
- <li>m4tt svg_sup(</g>text, size percent, y displ, x displ`'m4tt)</g>:
- superscript
<li>m4tt svg_ul(</g>text`'m4tt)</g>: underlined text
<li>m4tt svg_ol(</g>text`'m4tt)</g>: overlined text
+ <li>m4tt svg_sup(</g>text, size percent, y displ, x displ`'m4tt)</g>:
+ superscript
<li>m4tt svg_hat(</g>character`'m4tt)</g>: circumflex-accented character
<li>m4tt svg_frac(</g>numerator[:wid], denominator[:wid]`'m4tt)</g>:
basic fraction, wid in drawing units
@@ -119,81 +187,104 @@ more basic.
<li>m4tt svgLinkString</g> as above but for strings attached to objects
<li> Greek and other symbols:
-<table cellpadding="0" cellspacing="0" width="100%" >
+<!--
+ Reference:
+ https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
+ and
+ https://www.toptal.com/designers/htmlarrows/math/
+ -->
+<table cellpadding="2" cellspacing="0" width="75%" >
<tr>
-<td width="8%"> m4tt svg_alpha</g> <td align="left"> changecom(,)&`#'945;changecom(`#')
-<td width="8%"> m4tt svg_beta</g> <td align="left"> changecom(,)&`#'946;changecom(`#')
-<td width="8%"> m4tt svg_Gamma</g> <td align="left"> changecom(,)&`#'915;changecom(`#')
-<td width="8%"> m4tt svg_gamma</g> <td align="left"> changecom(,)&`#'947;changecom(`#')
-<td width="8%"> m4tt svg_Delta</g> <td align="left"> changecom(,)&`#'916;changecom(`#')
-<td width="8%"> m4tt svg_delta</g> <td align="left"> changecom(,)&`#'948;changecom(`#')
+<td width="10%"> m4tt svg_alpha</g> <td align="left"> changecom(,)&`#'945;changecom(`#')
+<td width="10%"> m4tt svg_beta</g> <td align="left"> changecom(,)&`#'946;changecom(`#')
+<td width="10%"> m4tt svg_Gamma</g> <td align="left"> changecom(,)&`#'915;changecom(`#')
+<td width="10%"> m4tt svg_gamma</g> <td align="left"> changecom(,)&`#'947;changecom(`#')
+<td width="10%"> m4tt svg_Delta</g> <td align="left"> changecom(,)&`#'916;changecom(`#')
+<td width="10%"> m4tt svg_delta</g> <td align="left"> changecom(,)&`#'948;changecom(`#')
<td width="10%"> m4tt svg_epsilon</g> <td align="left"> changecom(,)&`#'949;changecom(`#')
-<td width="8%"> m4tt svg_zeta</g> <td align="left"> changecom(,)&`#'950;changecom(`#')
+<td width="10%"> m4tt svg_zeta</g> <td align="left"> changecom(,)&`#'950;changecom(`#')
+</tr>
<tr>
-<td width="8%"> m4tt svg_eta</g> <td align="left"> changecom(,)&`#'951;changecom(`#')
-<td width="8%"> m4tt svg_Theta</g> <td align="left"> changecom(,)&`#'920;changecom(`#')
-<td width="8%"> m4tt svg_theta</g> <td align="left"> changecom(,)&`#'952;changecom(`#')
-<td width="8%"> m4tt svg_iota</g> <td align="left"> changecom(,)&`#'953;changecom(`#')
-<td width="8%"> m4tt svg_kappa</g> <td align="left"> changecom(,)&`#'954;changecom(`#')
-<td width="8%"> m4tt svg_Lambda</g> <td align="left"> changecom(,)&`#'923;changecom(`#')
-<td width="8%"> m4tt svg_lambda</g> <td align="left"> changecom(,)&`#'955;changecom(`#')
-<td width="8%"> m4tt svg_mu</g> <td align="left"> changecom(,)&`#'956;changecom(`#')
+<td width="10%"> m4tt svg_eta</g> <td align="left"> changecom(,)&`#'951;changecom(`#')
+<td width="10%"> m4tt svg_Theta</g> <td align="left"> changecom(,)&`#'920;changecom(`#')
+<td width="10%"> m4tt svg_theta</g> <td align="left"> changecom(,)&`#'952;changecom(`#')
+<td width="10%"> m4tt svg_iota</g> <td align="left"> changecom(,)&`#'953;changecom(`#')
+<td width="10%"> m4tt svg_kappa</g> <td align="left"> changecom(,)&`#'954;changecom(`#')
+<td width="10%"> m4tt svg_Lambda</g> <td align="left"> changecom(,)&`#'923;changecom(`#')
+<td width="10%"> m4tt svg_lambda</g> <td align="left"> changecom(,)&`#'955;changecom(`#')
+<td width="10%"> m4tt svg_mu</g> <td align="left"> changecom(,)&`#'956;changecom(`#')
+</tr>
<tr>
-<td width="8%"> m4tt svg_nu</g> <td align="left"> changecom(,)&`#'957;changecom(`#')
-<td width="8%"> m4tt svg_Xi</g> <td align="left"> changecom(,)&`#'926;changecom(`#')
-<td width="8%"> m4tt svg_xi</g> <td align="left"> changecom(,)&`#'958;changecom(`#')
-<td width="8%"> m4tt svg_Pi</g> <td align="left"> changecom(,)&`#'928;changecom(`#')
-<td width="8%"> m4tt svg_pi</g> <td align="left"> changecom(,)&`#'960;changecom(`#')
-<td width="8%"> m4tt svg_rho</g> <td align="left"> changecom(,)&`#'961;changecom(`#')
-<td width="8%"> m4tt svg_Sigma</g> <td align="left"> changecom(,)&`#'931;changecom(`#')
-<td width="8%"> m4tt svg_sigma</g> <td align="left"> changecom(,)&`#'963;changecom(`#')
+<td width="10%"> m4tt svg_nu</g> <td align="left"> changecom(,)&`#'957;changecom(`#')
+<td width="10%"> m4tt svg_Xi</g> <td align="left"> changecom(,)&`#'926;changecom(`#')
+<td width="10%"> m4tt svg_xi</g> <td align="left"> changecom(,)&`#'958;changecom(`#')
+<td width="10%"> m4tt svg_Pi</g> <td align="left"> changecom(,)&`#'928;changecom(`#')
+<td width="10%"> m4tt svg_pi</g> <td align="left"> changecom(,)&`#'960;changecom(`#')
+<td width="10%"> m4tt svg_rho</g> <td align="left"> changecom(,)&`#'961;changecom(`#')
+<td width="10%"> m4tt svg_Sigma</g> <td align="left"> changecom(,)&`#'931;changecom(`#')
+<td width="10%"> m4tt svg_sigma</g> <td align="left"> changecom(,)&`#'963;changecom(`#')
+</tr>
<tr>
-<td width="8%"> m4tt svg_tau</g> <td align="left"> changecom(,)&`#'964;changecom(`#')
+<td width="10%"> m4tt svg_tau</g> <td align="left"> changecom(,)&`#'964;changecom(`#')
<td width="10%"> m4tt svg_upsilon</g> <td align="left"> changecom(,)&`#'965;changecom(`#')
-<td width="8%"> m4tt svg_Phi</g> <td align="left"> changecom(,)&`#'934;changecom(`#')
-<td width="8%"> m4tt svg_phi</g> <td align="left"> changecom(,)&`#'966;changecom(`#')
-<td width="8%"> m4tt svg_chi</g> <td align="left"> changecom(,)&`#'967;changecom(`#')
-<td width="8%"> m4tt svg_Psi</g> <td align="left"> changecom(,)&`#'936;changecom(`#')
-<td width="8%"> m4tt svg_psi</g> <td align="left"> changecom(,)&`#'968;changecom(`#')
-<td width="8%"> m4tt svg_Omega</g> <td align="left"> changecom(,)&`#'937;changecom(`#')
+<td width="10%"> m4tt svg_Phi</g> <td align="left"> changecom(,)&`#'934;changecom(`#')
+<td width="10%"> m4tt svg_phi</g> <td align="left"> changecom(,)&`#'966;changecom(`#')
+<td width="10%"> m4tt svg_chi</g> <td align="left"> changecom(,)&`#'967;changecom(`#')
+<td width="10%"> m4tt svg_Psi</g> <td align="left"> changecom(,)&`#'936;changecom(`#')
+<td width="10%"> m4tt svg_psi</g> <td align="left"> changecom(,)&`#'968;changecom(`#')
+<td width="10%"> m4tt svg_Omega</g> <td align="left"> changecom(,)&`#'937;changecom(`#')
+</tr>
<tr>
-<td width="8%"> m4tt svg_omega</g> <td align="left"> changecom(,)&`#'969;changecom(`#')
-<td width="8%"> m4tt svg_micro</g> <td align="left"> changecom(,)&`#'956;changecom(`#')
-<td width="8%"> m4tt svg_ohm</g> <td align="left"> changecom(,)&`#'937;changecom(`#')
-<td width="8%"> m4tt svg_lt</g> <td align="left"> changecom(,)&`#'60;changecom(`#')
-<td width="8%"> m4tt svg_gt</g> <td align="left"> changecom(,)&`#'62;changecom(`#')
-<td width="8%"> m4tt svg_leq</g> <td align="left"> changecom(,)&`#'8804;changecom(`#')
-<td width="8%"> m4tt svg_geq</g> <td align="left"> changecom(,)&`#'8805;changecom(`#')
-<td width="8%"> m4tt svg_prime</g> <td align="left"> changecom(,)&`#'8242;changecom(`#')
+<td width="10%"> m4tt svg_omega</g> <td align="left"> changecom(,)&`#'969;changecom(`#')
+<td width="10%"> m4tt svg_micro</g> <td align="left"> changecom(,)&`#'956;changecom(`#')
+<td width="10%"> m4tt svg_ohm</g> <td align="left"> changecom(,)&`#'937;changecom(`#')
+<td width="10%"> m4tt svg_lt</g> <td align="left"> changecom(,)&`#'60;changecom(`#')
+<td width="10%"> m4tt svg_gt</g> <td align="left"> changecom(,)&`#'62;changecom(`#')
+<td width="10%"> m4tt svg_leq</g> <td align="left"> changecom(,)&`#'8804;changecom(`#')
+<td width="10%"> m4tt svg_geq</g> <td align="left"> changecom(,)&`#'8805;changecom(`#')
+<td width="10%"> m4tt svg_prime</g> <td align="left"> changecom(,)&`#'8242;changecom(`#')
+</tr>
<tr>
-<td width="8%"> m4tt svg_backsl</g> <td align="left"> changecom(,)&`#'92;changecom(`#')
-<td width="8%"> m4tt svg_pound</g> <td align="left"> changecom(,)&`#'35;changecom(`#')
-<td width="8%"> m4tt svg_comma</g> <td align="left"> changecom(,)&`#'44;changecom(`#')
-<td width="8%"> m4tt svg_lparen</g> <td align="left"> changecom(,)&`#'40;changecom(`#')
-<td width="8%"> m4tt svg_rparen</g> <td align="left"> changecom(,)&`#'41;changecom(`#')
-<td width="8%"> m4tt svg_emsp</g> <td align="left"> |changecom(,)&`#'8195;changecom(`#')|
-<td width="8%"> m4tt svg_ensp</g> <td align="left"> |changecom(,)&`#'8194;changecom(`#')|
-<td width="8%"> m4tt svg_thinsp</g> <td align="left"> |changecom(,)&`#'8201;changecom(`#')|
+<td width="10%"> m4tt svg_backsl</g> <td align="left"> changecom(,)&`#'92;changecom(`#')
+<td width="10%"> m4tt svg_pound</g> <td align="left"> changecom(,)&`#'35;changecom(`#')
+<td width="10%"> m4tt svg_comma</g> <td align="left"> changecom(,)&`#'44;changecom(`#')
+<td width="10%"> m4tt svg_lparen</g> <td align="left"> changecom(,)&`#'40;changecom(`#')
+<td width="10%"> m4tt svg_rparen</g> <td align="left"> changecom(,)&`#'41;changecom(`#')
+<td width="10%"> m4tt svg_circ</g> <td align="left"> changecom(,)&`#'710;changecom(`#')
+<td width="10%"> m4tt svg_deg</g> <td align="left"> changecom(,)&`#'176;changecom(`#')
+<td width="10%"> m4tt svg_grave</g> <td align="left"> changecom(,)&`#'96;changecom(`#')
+</tr>
+</table>
+<table cellpadding="2" cellspacing="0" width="75%" >
<tr>
-<td width="8%"> m4tt svg_circ</g> <td align="left"> |changecom(,)&`#'710;changecom(`#')|
-<td width="8%"> m4tt svg_deg</g> <td align="left"> |changecom(,)&`#'176;changecom(`#')|
+<td width="8%"> m4tt svg_emsp</g> <td width="50px" align="left"> |changecom(,)&`#'8195;changecom(`#')|
+<td width="8%"> m4tt svg_ensp</g> <td width="50px" align="left"> |changecom(,)&`#'8194;changecom(`#')|
+<td width="8%"> m4tt svg_thinsp</g> <td width="50px" align="left"> |changecom(,)&`#'8201;changecom(`#')|
+</tr>
</table>
</ul>
<li> Inkscape: It may be efficient to define elements by macro and to
- place them using a WYSIWYG graphics editor. A draft page intended
+ place them using a wysiwyg graphics editor. A draft page intended
for Inkscape is included. A reasonable variety of elements is defined
- but should be customized for particular applications.
+ but many more could be added and they should be customized for
+ particular applications. Adjustments may also have to be made to
+ obtain the proper snap-to actions.
<li> Link experiments: Click on the resistor or source of quickSVG
to go to external
files in new windows. Click on "n-port" in NportSVG to replace the diagram
and then "back" to return.
- <li> Some of the assumptions used to create this draft may be naive. Comments
- are welcome.
+ <li> Some of the assumptions used to create this draft may be
+ na&`#'239;ve.
+ Comments are welcome.
</ul>
+
<hr>
cfig(XXXXX)
+</td>
+</tr>
+</table>
</BODY>
</HTML>