I recently discovered asciidoc as an amazing tool to create software documentation. Does anybody knows a way to draw screen prototype / GUI mockup?
Probably there is no direct integration like it is plantuml for diagrams. If so, is there a lean windows or linux tool to draw gui prototypes offline and export as vector graphic which can be imported within an asciidoc document?
I'm using ditaa for drawing: http://ditaa.sourceforge.net/
If the odds are good i'll start a project to bring some WYSIWYG =)
Ex:
- mockup name and age input fields
[ditaa]
--
/-------------------------\
| +---------------+ |
| name:| | |
| +---------------+ |
| |
| +---------------+ |
| age:| | |
| +---------------+ |
| |
|/----------------------\ |
|| Validate | |
|\----------------------/ |
| |
\-------------------------/
--
Render
The example above is really nice :-)
A WYSIWYG integration in eclipse can be found at
https://marketplace.eclipse.org/content/asciidoctor-editor
The output of the example inside editor looks like:
PS: I am the author of the mentioned plugin.
The https://plantuml.com/salt does exactly that. You have to include Asciidoc Diagram which is required for any PlantUml diagram.
Here is an example from the user guide:
#startsalt
{
Just plain text
[This is my button]
() Unchecked radio
(X) Checked radio
[] Unchecked box
[X] Checked box
"Enter text here "
^This is a droplist^
}
#endsalt
I tested it with the Intellij IDEA plugin, HTML5 and PDF backend with the maven plugin.
It works fine.
It generates WebP (https://developers.google.com/speed/webp) which might be a deal breaker for some as it is not widely adopted (e.g: imgur does not support).
Note: The guide uses the <b> for bold however Creole is supported so the ** works too.
Related
Tools used for processing content from PDF or Microsoft Word (DOC, DOCX), when parsing documents with images that have text labels overlaid on them, extract these labels separately to the images. The result is each such image being extracted without the overlaid text and then followed by one or more paragraphs of that text, out of context.
In such cases, an image like (a)
-------------
| Level 2 |
-------------
| Level 1 |
-------------
is extracted as (b)
-------------
| |
-------------
| |
-------------
Level 2
Level 1
This is "standard" behavior for tools used for PDF or Word processing, like Apache PDFBox and POI.
Is there any way of handling this, in the Apache tools, or any other similar tool?
The ideal solution would be to extract both the image and the labels as a single entity, like (a) above. Alternatively, image and label extraction could be deactivated together.
Ultimately, there should be way for avoiding the "pollution" of the document text with the labels, which otherwise appear out of content.
I'm new in web development and I've used both of them and apply basically the same functionalities, which tool is more effective (more used, under more active development) and has more interesting features HTML Canvas element or PHP GD library?
It really depends on what you're building. For example, HTML Canvas can render via WebGL any 3d, whereas GD library is a 2D drawing library (even though you can fake 3D there.)
Another point is, one is backend (PHP,) the other is frontend (HTML) meaning in one, the processing is taken by your server, vs taken by the user, on the user device, which sometimes can be very slow.
I would say, given my experience and recent developments, the Canvas API offers more options than PHP GD. And if you want to do it in the backend, you can use node-canvas.
Additionally, because Canvas happens in the front-end, there's an option for it to be interactive (whether 2d or 3d) which any back-end rendering framework would not offer.
|-------------------------------------|
| Feature | GD | HTML Canvas |
|-------------------------------------|
| 3D | No | Yes |
| Static | Yes | Yes |
| Interactive | No | Yes |
| Performance | Server | User |
|-------------------------------------|
TL;DR: if you have to do too many calculations, go back-end, if you have to do just a few, but many times (different for each user) do it front-end.
Is it possible to write one word with left alignment and one word with right alignment in a single cell in LibreOffice Calc?
Like that: | normal Cell one | Halli _________ Hallo | normal Cell three |
Everytime I try to simulate it with many spaces between Halli and Hallo, there are format problems when I convert it to PDF.
Format the cell to have a distributed horizontal alignment [my LO 4.1.6.2 on Linux offer this option].
Stayed that way after exporting to PDF.
This is not a programming question - use SuperUser for software handling questions next time, please.
I set the font linking to SimSun for my fonts at Window registry.
When I apply that font to my richedit control, it have below behavior:
First, it display SimSun - ok
When I add text that is not CKJ unicode, then add more text in CKJ, the font window selected is Microsoft Ya Hei instead of SimSun
Here is screenshot:
The fonts are:
"阿哥": SimSun
"◎": Segoe UI Symbol
"[āgē] đại ca" Arial
"对兄长的称呼。" Microsft Ya Hei
How I can force window to choose SimSun instead of Microsft Ya Hei in this case?
EDIT
Thank #Cody Gray for perfect answer. Here is worked code:
CHARFORMAT2 cf2;
memset(&cf2, 0, sizeof(CHARFORMAT2));
cf2.cbSize = sizeof(CHARFORMAT2);
cf2.dwMask = CFM_FACE | CFM_SIZE | CFM_CHARSET | CFM_LCID;
cf2.lcid = 0x0804;
cf2.yHeight = 280;
cf2.bCharSet = CHINESEBIG5_CHARSET;
wcscpy(cf2.szFaceName, L"SimSun");
SendMessage(rtbhWnd, EM_SETCHARFORMAT, SCF_SELECTION | SCF_ASSOCIATEFONT, (LPARAM)&cf2);
cf2.cbSize = sizeof(CHARFORMAT2);
cf2.dwMask = CFM_FACE | CFM_SIZE | CFM_CHARSET | CFM_LCID;
cf2.lcid = 0x0409;
cf2.yHeight = 220;
cf2.bCharSet = ANSI_CHARSET;
wcscpy(cf2.szFaceName, L"Segoe UI");
SendMessage(rtbhWnd, EM_SETCHARFORMAT, SCF_SELECTION | SCF_ASSOCIATEFONT2, (LPARAM)&cf2);
You can set the default font for character representations by sending the RichEdit control an EM_SETCHARFORMAT message with the SCF_ASSOCIATEFONT flag.
This involves filling in a CHARFORMAT2 structure with the characteristics of the desired font as well as the LCID corresponding to the locale of the desired character representation, as outlined in the documentation.
See also: How to Use Font Binding in Rich Edit Controls
It looks like to me that Windows 8 introduced the "Microsoft YaHei" font as the default UI font for the Simplified Chinese script. I think (but I'm not certain) that SimSun used to be the default font for this script, so that would explain it if you were seeing this behavior on some systems and not others.
I'm trying to place two images side-by-side, and ideally center the whole block in an Asciidoctor project. The code below works in the HTML5 output, but stacks the images when rendered to a PDF.
[.clearfix]
--
[.left]
.Title1
image::chapter3/images/foo.png[Foo, 450, scaledwidth="75%"]
[.left]
.Title2
image::chapter3/images/bar.png[Bar, 450, scaledwidth="75%"]
--
Is it possible to 1) render side-by-side images in a PDF and 2) center the block of images? If it's possible to specify the space between them, that would be great too.
Thanks,
Matt
Not sure if you can specify the space between them, but you're using the block image instead of the inline (image::...[] vs image:..[], note the colons). I'm also not sure how centring works in pdf as I don't do a lot of pdf generation, but if those are the only things on that line, they may center, or maybe a .center would do it?
1) render side-by-side images in a PDF
Yes. Following eskwayrd answer for Asciidoctor: how to layout two code blocks side by side? you can insert your image inside a table with only 2 columns.
[cols="a,a"]
|===
| image::foo.png[]
| image::bar.png[]
|===
I would in your case even completely hide the table
[cols="a,a", frame=none, grid=none]
|===
| image::foo.png[]
| image::bar.png[]
|===
2) center the block of images
This is currently complicated in PDF.
Well our block is now a table so we have a few options in HTML. Aligning the content with < and > is simple enough and works.
[cols=">a,<a", frame=none, grid=none]
|===
| image::foo.png[]
| image::bar.png[]
|===
Setting the table width to automatic and centering it also works in HTML:
[%autowidth, cols="a,a", frame=none, grid=none, role="center"]
|===
| image::foo.png[]
| image::bar.png[]
|===
These two methods however, for some reason, do not work in PDF when converting with asciidoctor-pdf. One "solution" for PDF would be to expand your table with extra empty columns left and right and trying to adjust their width with integers.
[cols="3,1a,1a,3", frame=none, grid=none]
|===
|
| image::foo.png[]
| image::bar.png[]
|
|===