Samples and Examples - PDF and ZIP file downloads

Aug 2011

Use the Contact form and make an enquiry.

Regarding material on this page, enquire for:

  • Web Apps resources, help, advice, for study, learning and development work.
  • Collaboration in design and origination of Web Apps as teaching aids.
  • Technical Web Apps for remote or mobile workers.

For students, teachers, engineers and ego-free programmers.

Scalable Vector Graphics - SVG

May 2016

SVG - W3C docs. For engineers and programmers, for working diagrams and illustrations in Web apps, there is:

Sketsa SVG Editor

Worked example - pencil drawing of geometric figure (egg shape) inserted as image in Sketsa SVG Editor then 'traced' using the Sketsa Toolbox and DOM Editor. Resulting .svg file, copied from the Sketsa Source Editor, then used to copy/paste listed SVG statements. Graphic at left (click to enlarge) shows Sketsa eggshape.svg with the pencil diagram and SVG lines and paths overlaid in red, also a circular path selected and the DOM editor used to edit the path.

There is a PDF description with source code of EggShape application, taking things from pencil diagram to Sketsa Editor to PHP; try the web app here:

 

EggShape app uses JavaScript to check user inputs, calculate results and refresh SVG with dimensional changes. Next, the Catenary (calculate catenary curve) app uses Xajax to call PHP functions for calculations. Catenary app might be something of a model for (technical) web apps with SVG graphics and using Xajax. Set of template files available - basic Xajax functionality that should provide RAD. Available for download - Zip files with all source code for the SVG Catenary app and Template files source code and instructions. Try the catenary app here:

SVG GUI

Jan 2011

Graphic user interface (GUI), Javascript and SVG, UI controls: Text boxes, Buttons, Tooltips, Checkboxes and Radiobuttons, Drop-down Lists, Multiple Selection Lists, Slider controls. Go to carto.net and pick up on the SVG Button, etc., objects, listed under heading 'Interactivity and SVG GUI'. For each control object a separate carto.net web page is provided with description and instructions for use together with links to the javascript files available for download; also see link to example of object in each case. Source code of examples is useful. For example, see the carto.net Buttons example and (in web browser) right-click and select 'View Page Source'.

Available here is Zip file download of carto.net component descriptions, carto.net examples and source files. Using this material, web app svg_gui.svg in the Zip file gives a demo of controls for web pages/apps using SVG and Javascript. Again, go to carto.net and pick up on most of their material, maybe good for different projects. Check out demo SVG web app controls here:

Controls resize with page size

SVG Animation - Linkage Design

Jan 2011

Carto.net has published set of articles covering SVG animation features and presenting practical examples.

Example here uses setInterval() method called in Javascript to animate SVG  diagram of slider crank mechanism.

Source code is available here. Uses Javascript setInterval() to repeatedly call function that calculates new position then uses SVG setAttribute() to (in this case) change (x, y) coordinates.
This scheme probably applicable to many different solutions.

 

SVG-Edit

Online SVG-Edit

Open SVG-Edit in browser here.
A user guide for SVG-edit is here.
List of SVG elements and attributes that SVG-edit supports is here.

Button toggles drop-down menu - select Image Library > IAN Image Library (log-in). In SVG-Edit as shown, hazard warning sign is taken from IAN Image Library under heading Processes: Chemical - Click on the library illustration opens in SVG editor. Integration & Application Network (IAN) is at ian.umces.edu. IAN provides online version of SVG-Edit (renamed Diagram Creator) with direct access to the IAN Symbol LIbraries. At ian.umces.edu/symbols/ there is video tutorial for Diagram Creator and links to other resources.

 

Button toggles SVG markup. As shown above, markup is changed to prepare for inclusion as html (HTML5) inline SVG; changes result from instructions on 'SVG symbol...' webpage at css-tricks.com (but there are no CSS tricks here).

 

 

Given SVG markup in SVG-Edit, simply the path statements are copied for each symbol, each is given id and viewBox set from symbol width and height specified in the markup.