QTextBlockFormat.setLeftMargin(1em): How To? - html

In a html-list with bullets, on change of the fontsize via format.setFontPointSize() the bullets drive out of the editor. I figured out the bullets stay on the same position on fontsize-change if I set the padding-left to 1em (tried this in a html-editor).
How can I achieve this for a list entry in Qt? Can I only set it to a pixel value and not to an element value?
fmt=cur.charFormat()
charSize=fmt.fontPointSize()
if charSize==0.0:
charSize=14
if direction=="up":
fmt.setFontPointSize(charSize+1)
if textList:
blockFormat=cur.blockFormat()
#blockFormat.setLeftMargin(blockFormat.leftMargin()+0.4)
blockFormat.setLeftMargin(1em)
cur.mergeBlockFormat(blockFormat)
else:
fmt.setFontPointSize(charSize-1)
if textList:
blockFormat=cur.blockFormat()
#blockFormat.setLeftMargin(blockFormat.leftMargin()-0.4)
blockFormat.setLeftMargin(1em)
cur.mergeBlockFormat(blockFormat)
cur.mergeCharFormat(fmt)

You can set the default indentation for text lists in the QTextDocument instance that you are creating (I think the default is 40). Multiples of this value will be used for each indentation level in the list.
QTextDocument *doc = new QTextDocument();
doc->setIndentWidth(20);
QTextCursor *cursor = new QTextCursor(doc);
QTextListFormat listFormat;
listFormat.setIndent(1); // First indent level, indent is 20
cursor->insertList(listFormat);
// Insert items into the list
listFormat.setIndent(2); // Second indent level, indent is 40
cursor->insertList(listFormat);
// Insert nested list items

Related

Additional legend or text box window in a plot in octave

I would like to add to my plot a text or a legend box with comments.
At the moment my legend is plot at northeastoutside and i would like to add the new legend (or textbox) to the position southeastoutside.
Thanks!
Lacking more information about your case:
To the best of my knowledge one axes object can only have a single legend object. You can create a second legend with a second axes object. Each legend will only list data elements associated with each axes. Adapted from Matlab Newsgroup thread
a = [1:0.01:2*pi]; %create sample data
b = sin(a);
linehandle1 = line(a,b); %creates a line plot with handle object
axeshandle1 = gca; % gets the handle for the axes object just created
legendhandle1 = legend('y = sin(x)', 'location', 'northeastoutside'); %makes first legend
axeshandle2 = axes('Position',get(axeshandle1,'Position'),'xlim',get(axeshandle1,'xlim'),'ylim',get(axeshandle1,'ylim'),'Visible','off','Color','none'); %makes invisible axes with same position and scaling
linehandle2 = line(pi/2,1,'Color','r','Marker','o','Parent',axeshandle2); %puts data set on 2nd axes
linehandle3 = line(pi,0,'Color','b','Marker','x','Parent',axeshandle2);
legend_handle2 = legend('peak','zero','location','southeastoutside'); %creates legend to go with 2nd axes
If you just want text in that 2nd box, not necessarily legend info or data labels, you can play around with annotation as described above. This has the advantage of being simpler to call, but maybe harder to get the exact position/result you want. There are a large number of property options that can be adjusted to get the desired appearance. A few are shown in the example. It may be there are easier ways to set the size/position based on the legendhandle.
a = [1:0.01:2*pi]; %create sample data
b = sin(a);
plot(a,b);
legendhandle = legend('y = sin(x)','location','northeastoutside');
annotation('textbox',[0.875 0.1 0.1 0.1],'string','my text','edgecolor','k','linewidth',1,'fitboxtotext','off');

How to draw timelines in a tree table

I am writing an analyzer to visually see where my application is spending time. The interface that I am trying to achieve (see below) is something similar to a tree table with
lines or boxes to denote response time.
be a collapsible tree like graph
the ability to display metrics in the table columns (e.g., start time, cost, etc)
the ability to display the labels or description and metrics on the left and lines on the right
I create the following diagram (see below) in R -- unfortunately, although the graph production is automated, the approach is not interactive. I was wondering if you could suggest a better way -- maybe a tree table. I looked at many Swing, JavaFx tree table examples. I have not seen an example that has lines (time lines) in a tree table.
Any suggestions would be greatly appreciated. Thanks in advance.
You can show any node in a TreeTableCell using the grahic property in javaFX. This includes Rectangles.
This is a simple example of showing bars in a column using Rectangles:
// Arrays in TreeItems contain {startValue, endValue} (both positive)
TreeItem<int[]> root = new TreeItem<>(new int[]{0, 10});
root.getChildren().addAll(new TreeItem<>(new int[]{0, 5}), new TreeItem<>(new int[]{5, 10}));
TreeTableView<int[]> ttv = new TreeTableView<>(root);
// Column displaying bars based on data of TreeItem. Do not use this as
// the first column, otherwise the alignment be off depending on the
// distance to the root.
TreeTableColumn<int[], int[]> column = new TreeTableColumn<>();
column.setCellValueFactory(c -> c.getValue().valueProperty());
final double BAR_SIZE = 20;
column.setCellFactory((t) -> new TreeTableCell<int[], int[]>() {
// the bar
private final Rectangle rectangle = new Rectangle(0, 10);
{
setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
// bar invisible by default
rectangle.setVisible(false);
setGraphic(rectangle);
}
#Override
protected void updateItem(int[] item, boolean empty) {
super.updateItem(item, empty);
if (!empty && item != null) {
// resize and display bar, it item is present
rectangle.setWidth((item[1] - item[0]) * BAR_SIZE);
rectangle.setTranslateX(item[0] * BAR_SIZE);
rectangle.setVisible(true);
} else {
// no item -> hide bar
rectangle.setVisible(false);
}
}
});
// add a columns new column
// add a additional empty column at the start to prevent bars being
// aligned based on distance to the root
ttv.getColumns().addAll(new TreeTableColumn<>(), column);
Things you need to do
use a data type different to int[]; the cell value factory and TreeTableCell needs to be adjusted accordingly; an example of a more complex model can be found e.g. in the oracle tutorial: https://docs.oracle.com/javase/8/javafx/user-interface-tutorial/tree-table-view.htm
Choose better colors; These colors could e.g. be stored in a Map and created if a new one is needed.
add additional colums

Scene2d - absolute positioning

I want to add 3 numbers next to each other on the same row in a table, I also want there to be about 100 units padding between each number. Under these numbers are words that correspond to them, for example:
0 0 0
Total Wins Losses
However, if the I use padding, ie table.add(actor).padLeft(100);, then changing the number from say 0 to 160 would also move the number to the right, since I'm using padding. example:
160 0 0
Total Wins Losses
How can I avoid this behaviour? It must be a common scenario.
I suggest to create a custom class that extends the WidgetGroup.
Inside this class you manage two labels, one for the number and one for the "label" of the number.
Then you can easily set the relative position of the labels respect each other without keeping in mind where they are positioned inside the tabel.
Maybe the constructor of this special class could accept a String for the "label" and the initial value of the number.
Tell me if the idea it's clear or if you need more info.
Luca
What I would do is set all the cells in the table to be centred, by default, with a little padding on left and right, as follows:
Table table1 = new Table();
// Set defaults for all cells in table. Alignment and padding in this case.
table1.defaults().align(Align.center).pad(0, 20, 0, 20);
Label number1 = new Label("160", skin);
Label number2 = new Label("0", skin);
Label number3 = new Label("0", skin);
table1.add(number1);
table1.add(number2);
table1.add(number3);
table1.row();
Label label1 = new Label("Total", skin);
Label label2 = new Label("Wins", skin);
Label label3 = new Label("Losses", skin);
table1.add(label1);
table1.add(label2);
table1.add(label3);
table1.row();
Try that.

Set cursor/selection for contenteditable div

Setting focus is simple enough: node.focus(). I've had limited success looking at other answers. I can set the cursor at either the beginning or end, or I can select the whole contents with this code in chrome:
// if start==0 means the beginning, start===1 means the end
function setSelection(node, start, length) {
var range = document.createRange();
range.setStart(node, start);
range.setEnd(node, length);
//range.collapse(true);
var selection = getSelection()
selection.removeAllRanges();
selection.addRange(range);
}
So the question is: how can I set the cursor more granularly, say at character 2. Also, how can I set the selection, for example from character 2 to character 5?
MDN tells me that Range.setStart has different behavior for Text, Comment, or CDATASection nodes than other nodes. If I could get setStart to treat a div like a Text node, I think my problem might be solved.
Anyone have any ideas?

Controlling tab space in a <pre> using CSS?

Is it possible to specify how many pixels, etc. the tab space occupies in a <pre> using CSS?
for example, say i have a piece of code appearing in a <pre> on a web page:
function Image()
{
this.Write = function()
{
document.write(this.ToString());
return this;
};
...
}
Image.prototype = new Properties();
...
is it possible to specify a different amount of space the tab indents the line using CSS?
If not, is there any workarounds?
While the above discussion provides some historical background, times have changed, and more relevant information and possible solutions can be found here: Specifying Tab-Width?
attn admin: possible duplicate of ref'ed question.
From CSS 2.1, § 16.6.1 The 'white-space' processing model:
All tabs (U+0009) are rendered as a horizontal shift that lines up the start edge of the next glyph with the next tab stop. Tab stops occur at points that are multiples of 8 times the width of a space (U+0020) rendered in the block's font from the block's starting content edge.
CSS3 Text says basically the same thing.
From HTML 4.01 § 9.3.4 Preformatted text: The PRE element
The horizontal tab character (decimal 9 in [ISO10646] and [ISO88591] ) is usually interpreted by visual user agents as the smallest non-zero number of spaces necessary to line characters up along tab stops that are every 8 characters. We strongly discourage using horizontal tabs in preformatted text since it is common practice, when editing, to set the tab-spacing to other values, leading to misaligned documents.
If you're concerned with leading tabs, it's a simple matter to replace them with spaces.
/* repeat implemented using Russian Peasant multiplication */
String.prototype.repeat = function (n) {
if (n<1) return '';
var accum = '', c=this;
for (; n; n >>=1) {
if (1&n) accum += c;
c += c;
}
return accum;
}
String.prototype.untabify = function(tabWidth) {
tabWidth = tabWidth || 4;
return this.replace(/^\t+/gm, function(tabs) { return ' '.repeat(tabWidth * tabs.length)} );
}