Kohshi's Blog

2014/01/07

QTableViewへ登録するQStandardItemにでユーザ定義型をくるませる

QTableView等のQ*View系のQt Model/View構造で管理されているビューを使用する場合、
もっとも簡単な使い方として、QStandardItemModelへQStandardItemをセットしていく事になる。

* QStandardItem = Table等に表示される1項目
* QStandardItemModel = Itemの集合（row/column/parent/childの概念）

この際に、Tableのセルに表示させる文字列（QString）以外にユーザ定義型をQStandardItem::setDataを使って格納することができる。

個人的にはクラスのポインタを各Itemに格納させておいて、TableView（or ListView）でDrag&Dropして順番を入れ替えた後、
入れ替えた順番でクラスのポインタを順にとってくるという事をしたかった。

[このサイト（QVariant の使い方）](http://qt-project.org/wiki/How_to_use_QVariant_Japanese)によるとポインタはもたせられなくてvoid*にしなさいとあるんだが、実際にはvoid*にしてもうまくいかなかったので追加調査

参考にしたのは以下の2つのサイト

* [Custom QVariant crash on drag in QTreeView](https://qt-project.org/forums/viewthread/22238)
* [QMetaType Class Reference](http://qt-project.org/doc/qt-4.8/qmetatype.html)

今回はポインタだったので不要だったかもしれないが、[こちらのサイト](http://milukiriu2010.blog71.fc2.com/blog-entry-145.html)によるとユーザ定義型の場合は追加で以下の3つが必要となるよう。

* QObjectの継承
* コピーコンストラクタの定義
* 代入演算子の定義

以下ではMyClassのconstポインタをQStandardItemに格納している。

まず、下準備として以下が必要。

```cpp

// const MyClass*をQMetaTypeとして使いますよという宣言
Q_DECLARE_METATYPE(const MyClass*);

// 以下のoperator定義はDrag&Dropをしたい場合に必要
// もしやらないと、"QVariant Invalid type to save" のようなエラーが大量にでる
// see. https://qt-project.org/forums/viewthread/22238
QDataStream& operator<<(QDataStream& out, const MyClass* const& rhs)
{
    out.writeRawData(reinterpret_cast<const char*>(&rhs), sizeof(rhs));
    return out;
}
QDataStream& operator >> (QDataStream& in, const MyClass*& rhs)
{
    in.readRawData(reinterpret_cast<char*>(&rhs), sizeof(rhs));
    return in;
}

// const MyClass*をQMetaTypeとして使う前（たとえばコンストラクタ）に以下を書く
MyApp::MyApp(){
    qRegisterMetaTypeStreamOperators<const MyClass*>("const MyClass*");
}

```

そして、実際に値をセットするときは

```cpp

void MyApp::setData(QList<MyClass*> myClasses){
    QStandardItemModel* model = qobject_cast<QStandardItemModel*>(myTableView->model());

foreach(const MyClass* class, myClasses) {
        QStandardItem* item = new QStandardItem(class->name());
        item->setData(QVariant::fromValue(class));
        model->appendRow(item);
    }
}

```

な感じでセット（myTableView => QTableView*ね）

逆に値を引っ張ってくる時は

```cpp

QList<MyClass*> MyApp::getData(){
    QStandardItemModel* model = qobject_cast<QStandardItemModel*>(myTableView->model());

QList<const MyClass*> myClasses;
    const int COLUMN_NO = 0;// setDataでMyClass*を格納したQStandardItemが入っているColumn番号 = 0
    for (int i = 0; i < model->rowCount(); i++) {
        myClasses.push_back(model->item(i, COLUMN_NO)->data().value<const MyClass*>());
    }
    return myClasses;
}

```

のような感じで取得できる。

2013/12/27

QTableViewでTable内のRowをDrag&DropでMoveだけさせる

年明けにやるんだけど忘れないようにメモ。

Qtで表とかSpreadsheetを追加したい場合はQTableViewというのを使うのが便利なんだけど、
Drag&DropでRowの位置を変更したいという場合結構ありそうな気がするんだけどもわりとやり方がめんどくさい。

以下のサイトでも質問されているけど自分がやりたい方法で実現してない

* [QTableView drag move rows](http://stackoverflow.com/questions/12168610/qtableview-drag-move-rows)
* [QTableView reorder rows in table](http://www.linkedin.com/groups/QTableView-reorder-rows-in-table-1531497.S.218641029)

２番めの投稿にもある通り、QTableView::verticalHeader()->setMovable(true)（setSelectionMovableは古い）すれば、
表のセルでなくてHeaderをDrag&DropすることでMoveできる。
これでもいいんだけど、やっぱりセル自体をDrag&Dropできたほうが直感的。という事で追加で調べてみた。

使うのはQTableViewとQStandardItemModelとQStandardItemというQTableViewを使う場合には
もっともポピュラーだと思われる方法。

QTableViewの配置はQt Designerで↓のように配置して

QTableViewの設定から以下の項目をセット
 
| key | value |
| ---- | ---- |
| QWidget::acceptDrops| true |
| QAbstractItemView::dragEnabled| true |
| QAbstractItemView::dragDropOverwriteMode| false |
| QAbstractItemView::dragDropMode| InternalMove |
| QAbstractItemView::defaultDropAction| MoveAction |
| QAbstractItemView::selectionBehavior| SelectRows |

一つ一つON/OFFしてないので不要なものも入ってるかも。

一見上記の設定だけでもMoveだけを許可してdragDropOverwriteModeをfalseにしてるのでうまくいきそうな感じがするんだが、
このままQStandardItemをセットするとDrag&Dropでセルとセルの間を選ぶとMoveされるんだけど、
セル自体を選ぶと上書きされてしまう。これを防ぐ方法がわからなくて困った。

ヒントになったのは以下

* [QAbstractItemView Class Reference dragDropOverwriteMode](http://qt-project.org/doc/qt-4.8/qabstractitemview.html#dragDropOverwriteMode-prop)

`Note: This is not intended to prevent overwriting of items. The model's implementation of flags() should do that by not returning Qt::ItemIsDropEnabled.`

”これ（＝dragDropOverwriteMode）はitemを上書きするのを防がない。flags()の実装でQt::ItemIsDropEnabledを返さない事で上書きを防げる。”

ということはQStandardItemModelを継承してflags()をreimplementしてQt::ItemIsDropEnabledのFlagを下ろせばいいのかとおもったんだが・・

以下のようにMyItemModelを作ってQStandardItemModelの代わりにnewしてQTableView::setModel()しても現象は変わらない・・。

```cpp

class MyItemModel : public QStandardItemModel
{
public:
  MyItemModel(QObject * parent = 0) : QStandardItemModel(parent){}
  MyItemModel(int rows, int columns, QObject * parent = 0) : QStandardItemModel(rows, columns, parent) {}
  
  virtual Qt::ItemFlags flags()const{
    return (QStandardItemModel::flags() & ~Qt::ItemIsDropEnabled);
  }
};

```

うーん。

じゃあModelをQStandardItemModelに戻して今度は以下のように各QStandardItem::setFlagでQt::ItemIsDropEnabledをOFFしてみたら
Item同士の上書きがなくなった！

```cpp

QStandardItem *item = new QStandardItem(QString("item00"));
item->setFlags(item->flags() & ~Qt::ItemIsDropEnabled);
mpModel->setItem(0, 0, item);

```

こんな感じ。

なんかMoveした瞬間に一瞬一列増えて消えてをしてるような気もするが・・。

2013/12/18

QCustomPlotで凡例をグラフの外に表示→ちょっとめんどい

凡例はデフォルトではグラフ領域の中に表示される＋設定で場所を指定できるみたいだが、
例えば入力を次々変えていってグラフを表示したい場合とか、グラフがどの領域にくるかわからない場合があるんだが。

そんな場合凡例はグラフ内でなくてグラフ外に表示しておいてほしいのでそのやり方を書いてみる。
結果、今の所設定一発っていうわけではなくて以下のページにもあるみたいにLayoutを調整して対応しないと
いけないので、たかが凡例をグラフ外にもっていく割にはめんどい印象・・。

* [Position of legend outside graph](http://www.qcustomplot.com/index.php/support/forum/63)

以下のQCPLegendのページにも以下のように書いてある。

* [QCPLegend Class Reference](http://www.qcustomplot.com/documentation/classQCPLegend.html)

> To move the legend to another position inside the axis rect, use the methods of the QCPLayoutInset. 
> To move the legend outside of the axis rect, place it anywhere else with the QCPLayout/QCPLayoutElement interface.

凡例を軸の内側に動かすためにはQCPLayoutInsetのmehodを使え。外に動かしたい場合はQCPLayout/QCPLayoutElementを使って外に配置しろ。
みたいなことをいってるので多分合ってると思うんだけど。

つまり例えば↓のようにQCPLayoutを使って自分で凡例を配置せよということらしい。

<img src="https://docs.google.com/drawings/d/1rmDaYE2xMOz1pQ5rY9yrx7My3kuHtIX0hPKa4lj30aw/pub?w=480&h=360">
  
↑を実現するには、

1. もともと用意されているグラフを描画するLayoutにColumnを追加してQCPLayoutGridを配置し
2. そこに3つのRowを追加して上下にPadding用のQCPLayoutElementを配置し
3. 中央にQCPLegendを配置

という感じ。例によってHistogramを例にしてコードにすると
  
```cpp: MainWindow.cpp
  // When initialize QCustomPlot

// Moved legend to outside of axis rect
  QCPLayoutGrid *subLayout = new QCPLayoutGrid;  // グラフの右に挿入されるQCPLayoutGrid(subLayout)
  ui.histogram->plotLayout()->addElement(0, 1, subLayout); // (Row, Column) = (0,1)にsubLayoutを追加
  subLayout->addElement(0, 0, new QCPLayoutElement); // subLayoutの(Row, Column) = (0,0)にPadding用QCPLayoutElementを
  subLayout->addElement(1, 0, ui.histogram->legend); // (Row, Column) = (1,0)に凡例（Legend）を追加
  subLayout->addElement(2, 0, new QCPLayoutElement); // 同Paddingを追加
  subLayout->setColumnStretchFactor(0, 0.01);        // subLayoutの横幅はなるべく小さくする
  subLayout->setRowStretchFactor(1, 0.01);           // subLayoutの凡例がはいるRow=1はなるべく小さくする
  ui.histogram->plotLayout()->setColumnStretchFactor(1, 0.01); // subLayoutが入るColumn=1の横幅はなるべく小さくする

```
  
  
もし、上記の設定なしだと以下の様に表示されるが、

上記のようにLayout設定すると以下のようになる。

なんとかグラフ領域の外にもっていけたけど、凡例の右側が切れてたりしてちょっとしっくりこないきもするなぁ。

2013/12/17

Bloggerでの投稿をmarkdownで書く

Bloggerのエディタが使いにくくて投稿しにくいのでなんとかmarkdownでできないかなと思い、
色々調べたら、いくつか参考にさせてもらったけどここ↓を主に参考にさせてもらってmarkdown対応してみました。

* [Ys' Library | JS/HTMLのtipsやガジェットについて書くブログ](http://yslibr4ry.blogspot.jp/2013/01/bloggermarkdowno.html)

基本は、

* htmlを直接記入するエディタモードを使う。
* markdown全体をtextareaで囲み、class="markdown"に割り当てる
* Javascriptでtext文を取得してshowdown.js等のmarkdown -> HTML変換をして置き換える

という方針みたいです。

詳細はリンク先をみてもらうとして、
自分の環境では以下の変更を加えました。

**トップページで複数の投稿が並んでいる際に、1番目の投稿以外はtextareaがそのまま表示されてしまう**

リンク先のサイトだと問題無く表示されていたのですが、自分の環境ではなぜか
一番先頭（最新）の投稿は正しく表示されるが2番目以降の投稿はtextareaにmarkdownでかかれた内容が、こんな感じ↓でそのまま表示されている状態になってしまいました。

リンク先には↓の“HTMLの編集“から</body>の前に以下のjavascriptを挿入するとなってました。

```javascript:
<script src="/path/to/showdown.js"></script>
<script>
var sd = new Showdown.converter(),
      mdEl = document.querySelector('.markdown'),
      converted = document.createElement('div');

converted.className = 'showdown';
converted.innerHTML = sd.makeHtml(mdEl.value);
mdEl.parentNode.replaceChild(converted, mdEl);
</script>
```

でも、自分環境だとどうもダメ（テンプレートのせい？）で、いろいろと試行錯誤した結果以下のようにしました。

```javascript:
<script src='/PATH TO/showdown.js'/>
<script type='text/javascript'>
  var sd = new Showdown.converter();
  var mdEls = document.querySelectorAll(".markdown");
  for(var i = 0; i < mdEls.length; i++){
    converted = document.createElement('div');
    converted.className = 'showdown';
    converted.innerHTML = sd.makeHtml(mdEls[i].value);
    mdEls[i].parentNode.replaceChild(converted, mdEls[i]);
    window.setTimeout(function() {
      document.body.className = document.body.className.replace('loading', '');
    }, 10);
  }
</script>
```

違いを要約すると、querySelector()の代わりにquerySelectorAll()を使って
textareaをNodeListで取得して全てのNodeに対してshowdownのmakeHtml()をかけて置き換えてるだけです。

最終的にはshowdown.jsのextensionのtable.jsを使って（showdownはデフォルトではtableの記述に未対応）以下のようにしました。

```javascript:
<script src='/PATH TO/showdown.js'/>
<script src='/PATH TO/extensions/table.js'/>
<script type='text/javascript'>
  var sd = new Showdown.converter({extensions: ['table']});
  var mdEls = document.querySelectorAll(".markdown");
  for(var i = 0; i < mdEls.length; i++){
    converted = document.createElement('div');
    converted.className = 'showdown';
    converted.innerHTML = sd.makeHtml(mdEls[i].value);
    mdEls[i].parentNode.replaceChild(converted, mdEls[i]);
    window.setTimeout(function() {
      document.body.className = document.body.className.replace('loading', '');
    }, 10);
  }
</script>
```

注意点としてはextensionのtable.jsは先頭に|がないと表にならない事。

ダメ

> First Header | Second Header | Third Header<br/>
> ------------ | ------------- | ------------<br/>
> Content Cell | Content Cell  | Content Cell<br/>

イケる

> | First Header | Second Header | Third Header |<br/>
> | ------------ | ------------- | ------------ |<br/>
> | Content Cell | Content Cell  | Content Cell |<br/>

これ以外はprettify.jsでのコードハイライトなども以下を参考にさせてもらいました。
どうもありがとうございます(^^)

* [Markdownで投稿した記事のソースコードの見た目をいい感じにする](http://yslibr4ry.blogspot.jp/2013/02/markdown.html)

最後に一点だけ注意点ですが、以下の歯車アイコンでモバイル向けの設定をカスタムにしないと、スマホで見た時にやっぱりtextareaがそのまま表示されちゃうので注意。

以下をカスタムにする。

結構たいへんだったけどやっぱしmarkdownでかけるとすいすい思いのままに書けてとってもグー！

登録: 投稿 (Atom)