Could this be used to test mobile phone layouts reliably? Jeremy Ruston wrote: > > Software documentation is better with screenshots. However, the problem is > that screenshots go out of date the moment a typo is fixed or a drop shadow > is deepened. So I’ve been interested for some time in the idea of a tool > that could automate the generation of TiddlyWiki screenshots from a set of > tiddlers. > > This could be done by creating a separate wiki for each screenshot, > loading it up with the tiddlers required for the screenshot. The cool thing > about the way that TiddlyWiki maintains the entire user interface state in > the tiddler store is that we can restore any specific state of the user > interface just by arranging the right tiddlers. So, we could create a wiki > that shows a tiddler in the process of being edited, or one that shows the > dropdown in the “filter” tab of the advanced search tiddler. > > Then we’d need a mechanism for creating a PNG from the wiki under Node.js > so that we can automate it. That part turns out to be quite > straightforward: Google’s Puppeteer project allows a headless installation > of Chrome to be controlled from a Node.js application. Thus the Node.js > application can spin up a virtual page in Puppeteer, load it with HTML and > then there’s an API call to take a screenshot. All of this is documented in > numerous blog posts and official docs. For example: > > > https://buddy.works/guides/how-take-screenshots-with-puppeteer-headless-chrome > > But, I wanted to do a bit better: setting up a wiki is time consuming and > having one for each screemshot would mean a lot of jumping around between > wikis. And I didn’t like the idea of having to set up an entire wiki with > just a couple of tiddlers in it. > > The solution I’ve come up with is a new plugin called “innerwiki” that > enables wikis to be constructed on the fly and either embedded in a tiddler > in the browser, or rendered as a PNG under Node.js. One can type a complete > description of a wiki in just a few lines, editing a single tiddler. Here’s > a simple example: > > <$innerwiki width="1200" height="400" style="width:100%;" > filename="screenshot-1"> > <$data title="HelloThere" text="This tiddler is inside a wiki"/> > <$data title="$:/DefaultTiddlers" text="HelloThere"/> > </$innerwiki> > > The innerwiki widget sets up a blank wiki of a specified virtual width and > height, and then injects the tiddlers described by the data widgets > embedded within it. In this example, we inject a “HelloThere” tiddler and > then we set up $:/DefaultTiddlers so that the new tiddler is displayed at > startup. Here’s how it renders: > > > Because it’s an iframe, the innerwiki is completely interactive (however > everytime it is refreshed it will revert to its original content). > > One quite satisfying-but-useless thing is that it is entirely possible to > embed an innerwiki within an innerwiki: > > > > Under Node.js these innerwikis can be turned into PNG screenshots with the > screenshot command: > > tiddlywiki mywiki --screenshot [tag[screenshot]] > > You can try out the innerwiki plugin in the prerelease: > > https://tiddlywiki.com/prerelease/plugins/tiddlywiki/innerwiki/ > > Any comments or questions are welcome. > > Best wishes > > Jeremy > > > >
-- You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/tiddlywikidev. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/da7358f2-47e8-44e5-a667-575918023ce7%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
