src/ui-mobile/declarative/BoardWidget.qml

   1 /*
   2  *   Copyright (C) 2011 Lukáš Karas <lukas.karas@centrum.cz>
   3  *
   4  *   This program is free software; you can redistribute it and/or modify
   5  *   it under the terms of the GNU General Public License as published by
   6  *   the Free Software Foundation; either version 2 of the License, or
   7  *   (at your option) any later version.
   8  *
   9  *   This program is distributed in the hope that it will be useful,
  10  *   but WITHOUT ANY WARRANTY; without even the implied warranty of
  11  *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  12  *   GNU General Public License for more details.
  13  *
  14  *   You should have received a copy of the GNU General Public License
  15  *   along with this program; if not, write to the
  16  *   Free Software Foundation, Inc.,
  17  *   59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
  18  */
  19
  20 import QtQuick 1.1 // version 1.1 include PinchArea
  21 import Qt 4.7
  22 import QtWebKit 1.0
  23
  24 Rectangle {
  25     id: board
  26     width: 100
  27     height: 62
  28     color: "transparent"
  29
  30     signal sendWbMessage(string sessionId, string xmlContent);
  31     signal messageSent(string content);
  32
  33     property int canvasWidth : 640;
  34     property int canvasHeight: 480;
  35     //property string uid : "demo@makneto.org"
  36
  37     function log(msg){
  38         console.log("II [BoardWidget.qml]: "+msg);
  39     }
  40     function error(msg){
  41         console.log("EE [BoardWidget.qml]: "+msg);
  42     }
  43     function warn(msg){
  44         console.log("WW [BoardWidget.qml]: "+msg);
  45     }
  46
  47     //signal foregroundColorChanged(variant color)
  48     signal whiteboardMessageReceived(string data, string contact)
  49     property bool whiteboardInitialiyed: false
  50     property variant queue: undefined
  51
  52     function onWhiteboardMessageReceived(data, contact){
  53         if (whiteboardInitialiyed){
  54             whiteboardMessageReceived.disconnect(onWhiteboardMessageReceived);
  55             return;
  56         }
  57
  58         if (queue===undefined)
  59             queue = [];
  60
  61         var obj = {};
  62         obj.contact = contact;
  63         obj.data = data;
  64
  65         var tmp = queue;
  66         tmp.push(obj);
  67         queue = tmp;
  68         //log("whiteboard is not initialized... "+JSON.stringify(queue.length));
  69     }
  70
  71
  72     state: "normal"
  73     states: [
  74         State {
  75             name: "normal"
  76             /*
  77             PropertyChanges {
  78                 target: stateIcon
  79                 source: "img/fullscreen.png"
  80             }
  81             */
  82             AnchorChanges { target: board; anchors.top: board.parent.top; anchors.left: board.parent.left; }
  83         },
  84         State {
  85             name: "fullscreen"
  86             /*
  87             PropertyChanges {
  88                 target: stateIcon
  89                 source: "img/minimize.png"
  90             }
  91             */
  92             AnchorChanges { target: board; anchors.right: board.parent.right; anchors.bottom: board.parent.bottom}
  93         }
  94     ]
  95
  96
  97     Behavior on width {
  98         NumberAnimation{duration: 200}
  99     }
 100     Behavior on height {
 101         NumberAnimation{duration: 200}
 102     }
 103     Behavior on opacity {
 104         NumberAnimation{duration: 200}
 105     }
 106
 107     transitions: Transition {
 108            // smoothly reanchor myRect and move into new position
 109            AnchorAnimation { duration: 200 }
 110        }
 111
 112     Component.onCompleted: {
 113         whiteboardMessageReceived.connect(onWhiteboardMessageReceived);
 114         //toolbar.foregroundColorChanged.connect(board.foregroundColorChanged);
 115     }
 116
 117     BoardToolbar{
 118         id: toolbar
 119         anchors{bottom: parent.bottom; right: parent.right; top: parent.top}
 120         BorderImage { source: "img/lineedit.sci"; anchors.fill: parent }
 121         width: 60
 122     }
 123
 124     Rectangle{
 125         id: wrapper
 126         color: parent.color
 127         anchors{top:parent.top; right: toolbar.left; left: parent.left; bottom: parent.bottom}
 128         //width: 0
 129         //height: 0
 130         //anchors.fill: parent
 131
 132         Component.onCompleted: {
 133             wrapper.width = board.width;
 134             wrapper.height = board.height;
 135         }
 136
 137
 138         PinchArea{
 139             id: pinchArea
 140             anchors.fill: parent
 141
 142             property variant currentZoom : -1
 143             pinch.minimumScale: currentZoom
 144             pinch.maximumScale: currentZoom
 145             pinch.dragAxis: Pinch.XandYAxis
 146
 147             onPinchStarted: {
 148                 log("onPinchStarted "+pinch.scale);
 149             }
 150
 151             onPinchUpdated: {
 152                 log("onPinchUpdated "+pinch.scale);
 153             }
 154
 155             onPinchFinished: {
 156                 log("onPinchFinished "+pinch.scale);
 157             }
 158         }
 159
 160         WebView {
 161             id: wbView
 162             anchors{fill: parent}
 163             settings.pluginsEnabled: false
 164
 165             pressGrabTime:0
 166
 167             javaScriptWindowObjects: [QtObject {
 168                     WebView.windowObjectName: "connector"
 169                     function getUID(){ return board.parent.sessionId; }
 170                     function init() {
 171                         log("html part of whiteboard is initialized! lets make big stufs...");
 172                         // html part is loaded, init MaknetoWhiteboard...
 173                         wbView.evaluateJavaScript ( 'MaknetoWhiteboard.instance.init('+board.canvasWidth+', '+board.canvasHeight+')' );
 174
 175                         //var zoom = Math.min( wbView.width / (wbView.contentsSize.width *0.3), wbView.height / (wbView.contentsSize.height *0.3) );
 176                         //wbView.evaluateJavaScript ( '$("#workArea").scrollLeft(640)');
 177                         wbView.calculateZoom();
 178
 179                         whiteboardMessageReceived.connect(onWhiteboardMessageReceived);
 180                         toolbar.foregroundColorChanged.connect(onForegroundColorChanged);
 181                         messageSent.connect(onMessageSent);
 182                         whiteboardInitialiyed = true;
 183                         while (queue !== undefined && queue.length !== 0){
 184                             var tmp = queue;
 185                             var obj = tmp.shift(); // take first element (from array begin)
 186                             queue = tmp;
 187                             //log("queue message: "+obj.data);
 188                             onWhiteboardMessageReceived(obj.data, obj.contact);
 189                         }
 190                     }
 191                     function onForegroundColorChanged(c){
 192                         //log("onForegroundColorChanged "+c);
 193                         wbView.evaluateJavaScript ( 'MaknetoWhiteboard.instance.setForegroundColor("'+c+'")' );
 194                     }
 195                     function onWhiteboardMessageReceived(data, contact){
 196                         wbView.evaluateJavaScript ( 'MaknetoWhiteboard.instance.processXmlCommand('+JSON.stringify(data)+')' );
 197                         //log("on whiteboard msg received from "+contact+" "+JSON.stringify(data));
 198                     }
 199                     function onMessageSent(content){
 200                         wbView.evaluateJavaScript ( 'MaknetoWhiteboard.instance.messageSent('+JSON.stringify(content)+')' );
 201                     }
 202                     function sendMessage(xmlMessage){
 203                         //log(xmlMessage);
 204                         sendWbMessage(board.parent.sessionId, xmlMessage);
 205                         return true;
 206                     }
 207                 },
 208                 QtObject {
 209                     WebView.windowObjectName: "console"
 210                     function log(msg)   { console.log("II [Whiteboard]: " + msg); }
 211                     function debug(msg) { console.log("DD [Whiteboard]: " + msg); }
 212                     function warn(msg)  { console.log("WW [Whiteboard]: " + msg); }
 213                     function error(msg)  { console.log("EE [Whiteboard]: " + msg); }
 214                 }
 215             ]
 216
 217             function calculateZoom(){
 218                 var contentWidth = canvasWidth * 3;
 219                 var contentHeight = canvasHeight * 3;
 220                 pinchArea.pinch.minimumScale = Math.max( wbView.width / contentWidth, wbView.height / contentHeight  );
 221                 pinchArea.pinch.maximumScale = Math.min( (wbView.width *6) / contentWidth, (wbView.height *6)/ contentHeight );
 222                 var idealScale = Math.min( wbView.width / canvasWidth, wbView.height / canvasHeight  );
 223                 if (idealScale < pinchArea.pinch.minimumScale)
 224                     idealScale = pinchArea.pinch.minimumScale;
 225                 var zoom = pinchArea.currentZoom;
 226                 if (zoom < 0)
 227                     zoom = idealScale;
 228                 if (zoom > pinchArea.pinch.maximumScale)
 229                     zoom = pinchArea.pinch.maximumScale;
 230                 if (zoom < pinchArea.pinch.minimumScale)
 231                     zoom = pinchArea.pinch.minimumScale;
 232                 log("set zoom "+zoom+" ("+idealScale+") <"+pinchArea.pinch.minimumScale+", "+pinchArea.pinch.maximumScale+">");
 233                 wbView.evaluateJavaScript ( 'MaknetoWhiteboard.instance.setZoom('+zoom+')' );
 234                 return zoom;
 235             }
 236
 237             onContentsSizeChanged: {
 238                 //log("WebView content size: "+contentsSize.width+"x"+contentsSize.height);
 239                 //wbView.heuristicZoom(contentsSize.width/2, contentsSize.height/2, 10);
 240                 // webView.contentsScale
 241                 calculateZoom();
 242             }
 243
 244             //html: "<html><head><script>console.log(\"This is in WebKit!\"); window.connector.qmlCall();</script></head><body><h1>Qt WebKit!</h1></body></html>"
 245             url:"qrc:/whiteboard/main.html"
 246         }
 247     }
 248
 249     onWidthChanged:{
 250         wbView.renderingEnabled = false;
 251         wbView.renderingEnabled = true;
 252     }
 253     onHeightChanged:{
 254         wbView.renderingEnabled = false;
 255         wbView.renderingEnabled = true;
 256     }
 257
 258 }