TW as a html and svg editor

[barro...@gmail.com]

NOTE:  There may be information/tricks I may not know involving what I show, these are techniques I was able to do with what I know and have really served me well despite extra workflow steps.  Any corrections or feedback is always welcomed.

Two things I use TW and its html based nature and its preview panel for.  Since TW accepts html/css/xml code entry in the edit window and its preview window will display it real time, I code html/web pages (for use in & out of TW) and svg images with TW.  Attached images show the code in the edit window and the code's output in the preview window.  The right sidebar is set to hide in these screenshots.

1) SVG creation by hand coding and editing:

If one doesn't mind hand coding their svg's, the preview panel will show elements as you type their valid tag.  Adjusting their position, size, etc. is simple as changing coordinates, parameter values in the edit window.  The changes display in the preview window as you type.  This also acts as validation, if you don't code an element properly, it won't display properly.  So if something doesn't display properly, you will be able to tell there is a code error and potentially give a clue to what it is by what's being displayed.  It also gives immediate feedback of any corrective editing.  The attached image shows a svg of a city block and its buildings (code in edit window on left, preview panel and the svg image on right) created fully in TW by hand coding (HTML5 Canvas wasn't used).

I do this for svg tiddlers, but the svg code can be exported as a plain text file with extension .svg (svg/xml is a text format) if you have enabled such in TW's export options (TW main site explains that).  Or copy and paste the svg code from the tiddler edit window into a text editor and save it with a .svg extension.  A text editor is perhaps best, TW's plain text export strips all non-code line breaks from the code and you end up with a file that is one line of all the text.

2) HTML for external web page creation:

I code pure html pages for use inside TW as well as for stand alone external html pages using the edit/preview features described above.  The CSS  is kept in a stylesheet tiddler just for the page being worked on.  Do this if you don't want to use TW's stylesheet CSS for the external page.  Also don't use Wikitext if the page is going to be an external page- it won't be able to access the Wikitext markup outside of TW (except if you save it as a static html file which will have TW's style CSS).

Issues apply with html code export.  TW's static html export will work if you want TW's styling for the web page.  But if you export the html code as a plain text file with extension .html (if you have enabled such in TW's export options) you will get a file that is one line of text.  Also it won't have the header code needed for a working html file or the CSS in the stylesheet tiddler made for it.

To get around that, I use a text editor (Notepad ++).  This is not so much an issue since I will be using it to validate my html, even if its an exported static html file from TW.  First I insert necessary html header code in a new file in NP++.  Second, copy and paste the CSS from the stylesheet tiddler into a style header section in the new file or into a separate external stylesheet.  Third, copy and paste the html code from the tiddler edit window.  Lastly, validate the html and save it with a .html extension onto the local hard drive for uploading to the domain it will be on.

[Mohammad]

Great stuff.

Worth to be included properly in Tiddlywiki.com.

One area of using TW is using it as a platform for html5/css3 development.

--Mohammad

[barro...@gmail.com]

Thank you kindly, Mohammad :)  TW has allowed me to so many things with it-- still learning it all.  The plain text export stripping out noncode line breaks, I'm working on--when I figure that out I would be able to export any text format file directly out of TW.  I know there's ways to combine the tiddler with html with the stylesheet css in one tiddlers so it can be exported out combined. The html in a tiddler, there's something about that I need to show which you would find of interest.  Look for a new post in this thread.

[barro...@gmail.com]

This was made just using div's and their borders (including the oval-- its a div). Using div's allow me to nest items inside them like the TW check mark svg's.  For any arrows between blocks I was planning on using svg's I can easy make inside TW-- for customized arrows over what the railroad diagrams TW provides (which I have problems seeing the lines they use)

[Mohammad]

It is good to share the code (wiki) if you dont mind.

Tiddlyspot.com or github can host them.

Cheers

Mohammad

[barro...@gmail.com]

I don't mind.  I was going to post something about it as an alternate way to make columns in a tiddler.  The coding isn't too hard, I believe I can detail it in a post.  But I do have to set up something along the lines of a hosted TW-- I have these things I have been detailing here as well as the wiki guide and help pages I made back in the summer, so having a TW for all of it would be optimal.  I do have a domain-- if TW is secure enough I can quickly set my TW in a subdomain for the interim.

[TonyM]

Barro,

Thanks for sharing. I have being planning to use it this way for some time at least for html.

The ability to serve other files with the latest version, and the innerwiki plugin are also opening up the posibility of extending tiddlywiki to a website development kit. You can also use iframes to include a finished html page inside a tiddler.

With a little work I can see the wikitext and widjets being used to generated html pages from content in tiddlywiki, not to mention other formats.

On windows I have installed a generic text printer, then I can open in new window and print any tiddler as it appears directly to the appropriate location and file name. Of course we can control how a tiddler is displayed including as unrendered html.

I am keen to use tiddlywiki for batch and powershell scripts as well.

Regards
Tony

[barro...@gmail.com]

heya Tony,

I haven't upgraded yet but its on the list of too much to do, so I'll check the serving other files you mentioned.

What started me on using html pages in TW is the project I have is a combination of html pages of a web version as well as the pdf pages of the printed version and I wanted to be able to work with both in the same place-- so my personal project TW has it where I can view the pdf's and all the web version content (web version of story as well as several mock websites) have been incorporated into the wiki as web pages.  Using html I found was the best way for my goals to incorporate image along with text together in a tiddler.  These in-wiki web pages are basically the original html versions with their headers removed and their css style section moved to a stylesheet tiddler.

The video game engine I work with uses database files using text and json format so I've looking at building the databases in a planning TW from the planning and info developed in the TW and then exported in an export format that can be easily imported into the engine.  I use the iframe trick to view the engine database files in TW for reconciling against what the planning TW has.

What is the innerwiki plugin?

[TonyM]

Barro.

Thanks once again for sharing, I think workflow and high level description of tw use are important to share. Innerwiki is plugin beta jeremy has made to assist documentation. His own words are best used to describe it but let me try from my own perspective.

It allows you to spawn an instance of tiddly wiki in an iframe and specify which tiddlers to include. Svg annotation and the ability to screen shot the result using the node version is importiant to jeremy.

A caution is of course you could demand a lot of memory quickly.

I am identifying quite a few opportunities in addition to jeremys planned use. For example you could have a single wiki full of macros and plugins and recipies for demo and download wikis, for each macro you can simply open and save for publishing. No need to maintain seperate wikis for publishing small specific wikis.

I see uses for testing, data generation, sophisticated export and builds, troubleshooting and more. Maybe even special import processes.

Watch this space
Tony