QmlPaint - how to make paint application with QML - Revision history

Hamishwillee: Hamishwillee - Change to use new video player which works with Lumia 920 and other mobile browsers

2013-01-30T04:52:08Z

Hamishwillee - Change to use new video player which works with Lumia 920 and other mobile browsers

Hamishwillee: Text replace - "`" to ""`


2012-10-11T01:18:15Z
Text replace - "<code cpp>" to "<code cpp-qt>"

			
			
			
			
		
		← Older revision
		Revision as of 01:18, 11 October 2012
		
Line 49:
Line 49:
  Canvas item images are plain images. Load image to backup, create visible pixmap from backup image and display it. When implementing file handling methods which are visible to QML, Qt uses file paths but QML uses URL. Convenient way to change URL to file path and vice versa is to use QUrl class toLocalFile/fromLocalFile methods.   Canvas item images are plain images. Load image to backup, create visible pixmap from backup image and display it. When implementing file handling methods which are visible to QML, Qt uses file paths but QML uses URL. Convenient way to change URL to file path and vice versa is to use QUrl class toLocalFile/fromLocalFile methods.
    
− <code cpp> + <code cpp-qt>
  void ImageCanvas::setUnderneathImage(QUrl filename)   void ImageCanvas::setUnderneathImage(QUrl filename)
  {   {
Line 88:
Line 88:
  Creating empty image can be assigned instantly to image to be shown. Backup image is created from this image. This is faster way to show image in UI, also creating plain empty image is faster than loading image what makes this preferred approach. And like in loading image, backup image is created.   Creating empty image can be assigned instantly to image to be shown. Backup image is created from this image. This is faster way to show image in UI, also creating plain empty image is faster than loading image what makes this preferred approach. And like in loading image, backup image is created.
    
− <code cpp> + <code cpp-qt>
  void ImageCanvas::createEmpty(int width,int height)   void ImageCanvas::createEmpty(int width,int height)
  {   {
Line 119:
Line 119:
  First, using properties for scaling makes it easy access from QML. As QML is mostly informing new scaling resolutions to image. Keep also original sizes, it comes handy when showing image in original size.   First, using properties for scaling makes it easy access from QML. As QML is mostly informing new scaling resolutions to image. Keep also original sizes, it comes handy when showing image in original size.
    
− <code cpp> + <code cpp-qt>
  Q_PROPERTY(QSize sourceSize READ sourceSize WRITE setSourceSize NOTIFY sourceSizeChanged)   Q_PROPERTY(QSize sourceSize READ sourceSize WRITE setSourceSize NOTIFY sourceSizeChanged)
  Q_PROPERTY(QSize originalSourceSize READ originalSourceSize WRITE setOriginalSourceSize NOTIFY originalSourceSizeChanged)   Q_PROPERTY(QSize originalSourceSize READ originalSourceSize WRITE setOriginalSourceSize NOTIFY originalSourceSizeChanged)
Line 126:
Line 126:
  As these properties are only variables, setters for those does not do any magic actions yet. Now look for visible image updating which is '''paint(QPainter* painter, const QStyleOptionGraphicsItem* styleOption, QWidget* widget)''' method from derived QDeclarativeItem class. Making things easy, canvas item also knows it's width and height and these are coming from QDeclarativeItem. QML is handling width and height reporting. In updating, check is width and height matching with image size. When image wanted resolution is same as screen resolution, don't do scaling, otherwise do scaling. QPainter::drawPixmap will handle drawing, only important in scaled drawing is to calculate image's rectangle right and this is done already in QML side with PinchArea.   As these properties are only variables, setters for those does not do any magic actions yet. Now look for visible image updating which is '''paint(QPainter* painter, const QStyleOptionGraphicsItem* styleOption, QWidget* widget)''' method from derived QDeclarativeItem class. Making things easy, canvas item also knows it's width and height and these are coming from QDeclarativeItem. QML is handling width and height reporting. In updating, check is width and height matching with image size. When image wanted resolution is same as screen resolution, don't do scaling, otherwise do scaling. QPainter::drawPixmap will handle drawing, only important in scaled drawing is to calculate image's rectangle right and this is done already in QML side with PinchArea.
    
− <code cpp> + <code cpp-qt>
  onPinchFinished: {   onPinchFinished: {
                   var setHeight = flickable.contentHeight;                    var setHeight = flickable.contentHeight;
Line 143:
Line 143:
  And then updating UI, here will be determined do need draw scaled or not scaled:   And then updating UI, here will be determined do need draw scaled or not scaled:
    
− <code cpp> + <code cpp-qt>
  void ImageCanvas::paint(QPainter* painter, const QStyleOptionGraphicsItem* styleOption, QWidget* widget)   void ImageCanvas::paint(QPainter* painter, const QStyleOptionGraphicsItem* styleOption, QWidget* widget)
  {   {
Line 186:
Line 186:
    
  === Prepare point ===   === Prepare point ===
− <code cpp> + <code cpp-qt>
  class CanvasPoint   class CanvasPoint
  {   {
Line 201:
Line 201:
  Then we need get point from QML. The point where finger is pointing. Get only when position is changed, if following separately X/Y axis changing leads to situation where QML is informing all the time new points and points get to drawn on places where not wanted.   Then we need get point from QML. The point where finger is pointing. Get only when position is changed, if following separately X/Y axis changing leads to situation where QML is informing all the time new points and points get to drawn on places where not wanted.
    
− <code cpp> + <code cpp-qt>
                         
  MouseArea{   MouseArea{
Line 216:
Line 216:
  Set point to Qt side, call update image:   Set point to Qt side, call update image:
    
− <code cpp> + <code cpp-qt>
  Q_PROPERTY(QPoint penPosition READ penPosition WRITE setPenPosition NOTIFY penPositionChanged)   Q_PROPERTY(QPoint penPosition READ penPosition WRITE setPenPosition NOTIFY penPositionChanged)
    
Line 227:
Line 227:
  Mouse event reports resolution points where it is. This means; if screen width is 360 pixels, mouse event never report over that. Lets imagine flickable image has resolution of 1024 by 768 and screen resolution is 360 by 480. Now if move flickable to show image from 500 by 500, mouse event still report X and Y based on screen resolution and not to image resolution. If image is same size as screen resolution, no problem at all. But when using bigger sized images, mouse event points need to be calculated to match into image. Map mouse event point to image, calculate X and Y scale ratios from shown image divided by declarative item. Then same for backup image, note that same ratios cannot be used as backup is not scaled in any point but shown image can be.   Mouse event reports resolution points where it is. This means; if screen width is 360 pixels, mouse event never report over that. Lets imagine flickable image has resolution of 1024 by 768 and screen resolution is 360 by 480. Now if move flickable to show image from 500 by 500, mouse event still report X and Y based on screen resolution and not to image resolution. If image is same size as screen resolution, no problem at all. But when using bigger sized images, mouse event points need to be calculated to match into image. Map mouse event point to image, calculate X and Y scale ratios from shown image divided by declarative item. Then same for backup image, note that same ratios cannot be used as backup is not scaled in any point but shown image can be.
    
− <code cpp> + <code cpp-qt>
  void ImageCanvas::updateImage()   void ImageCanvas::updateImage()
  {   {
Line 334:
Line 334:
  Undo is like reversed image updating. Drawn points which are stored to QList containers, makes it easy to remove drawing from image. Note that points are removed from list containers, new visual image is created from backup without scaling. Then draw points, scale image and update to screen.   Undo is like reversed image updating. Drawn points which are stored to QList containers, makes it easy to remove drawing from image. Note that points are removed from list containers, new visual image is created from backup without scaling. Then draw points, scale image and update to screen.
    
− <code cpp> + <code cpp-qt>
  void ImageCanvas::undo()   void ImageCanvas::undo()
  {   {
Line 373:
Line 373:
  Saving is close to methods like undo and update. Looping thru drawn point container, using painter to draw those to backup image. As saving original image with drawing, use backup and it's associated point container.   Saving is close to methods like undo and update. Looping thru drawn point container, using painter to draw those to backup image. As saving original image with drawing, use backup and it's associated point container.
    
− <code cpp> + <code cpp-qt>
  void ImageCanvas::save(QString filename)   void ImageCanvas::save(QString filename)
  {   {



Jupaavola: Jupaavola - /* Scaling */
2012-05-28T05:37:21Z
Jupaavola - - Scaling

			
			
			
			
		
		← Older revision
		Revision as of 05:37, 28 May 2012
		
Line 172:
Line 172:
  }   }
  </code>   </code>
  + 
  + Note that you don't need to take care of drawn points or anything what have been drawn on canvas. Drawn points are stored in list containers but points itself are actually drawn directly to image data. So points become static with image.
    
  == Drawing ==   == Drawing ==




Jupaavola: Jupaavola - /* Scaling */
2012-05-28T05:30:36Z
Jupaavola - - Scaling

			
			
			
			
		
		← Older revision
		Revision as of 05:30, 28 May 2012
		
Line 124:
Line 124:
  </code>   </code>
    
− As these properties are only variables, setters for those does not do any magic actions yet. Now look for visible image updating which is '''paint(QPainter* painter, const QStyleOptionGraphicsItem* styleOption, QWidget* widget)''' method from derived QDeclarativeItem class. Making things easy, canvas item also knows it's width and height and these are coming from QDeclarativeItem. QML is handling width and height reporting. In updating, check is width and height matching with image size. When image wanted resolution is same as screen resolution, don't do scaling. QPainter::drawPixmap will handle drawing, only important in scaled drawing is to calculate image's rectangle right. + As these properties are only variables, setters for those does not do any magic actions yet. Now look for visible image updating which is '''paint(QPainter* painter, const QStyleOptionGraphicsItem* styleOption, QWidget* widget)''' method from derived QDeclarativeItem class. Making things easy, canvas item also knows it's width and height and these are coming from QDeclarativeItem. QML is handling width and height reporting. In updating, check is width and height matching with image size. When image wanted resolution is same as screen resolution, don't do scaling, otherwise do scaling. QPainter::drawPixmap will handle drawing, only important in scaled drawing is to calculate image's rectangle right and this is done already in QML side with PinchArea.
  +  
  + <code cpp>
  + onPinchFinished: {
  +                 var setHeight = flickable.contentHeight;
  +                 var setWidth = flickable.contentWidth;
  +                 if(flickable.contentHeight>canvas.originalSourceSize.height)
  +                     setHeight = canvas.originalSourceSize.height;
  +                 if(flickable.contentWidth>canvas.originalSourceSize.width)
  +                     setWidth = canvas.originalSourceSize.width;
  +  
  +                 flickable.resizeContent(setWidth,setHeight,pinch.center);
  +                 canvas.sourceSize = Qt.size(setWidth,setHeight);
  +                 flickable.returnToBounds()
  +             }
  + </code>
  +  
  + And then updating UI, here will be determined do need draw scaled or not scaled:
    
  <code cpp>   <code cpp>



Jupaavola: Jupaavola - /* Scaling */
2012-05-28T05:20:50Z
Jupaavola - - Scaling

			
			
			
			
		
		← Older revision
		Revision as of 05:20, 28 May 2012
		
Line 115:
Line 115:
  == Scaling ==   == Scaling ==
    
− Creating bigger image than screen resolution is, scaling will be important part. While this generates also difficulties, when mouse event reports X/Y values, those are mapped to screen resolution itself. Therefore it is needed too calculate new mouse points, scale visible graphic surface and of course update drawings. + Creating bigger image than screen resolution is, scaling will be important part. While this generates also difficulties, when mouse event reports X/Y values, those are mapped to screen resolution itself. Therefore it is needed to calculate new mouse points, scale visible graphic surface and of course update drawings.
    
  First, using properties for scaling makes it easy access from QML. As QML is mostly informing new scaling resolutions to image. Keep also original sizes, it comes handy when showing image in original size.   First, using properties for scaling makes it easy access from QML. As QML is mostly informing new scaling resolutions to image. Keep also original sizes, it comes handy when showing image in original size.




Jupaavola: Jupaavola -
2012-05-24T18:47:16Z
Jupaavola -

			
			
			
			
		
		← Older revision
		Revision as of 18:47, 24 May 2012
		
Line 347:
Line 347:
           update();            update();
       }        }
  + }
  + </code>
  + 
  + == Saving ==
  + 
  + Saving is close to methods like undo and update. Looping thru drawn point container, using painter to draw those to backup image. As saving original image with drawing, use backup and it's associated point container.
  + 
  + <code cpp>
  + void ImageCanvas::save(QString filename)
  + {
  +     qDebug() << __PRETTY_FUNCTION__ << " pen: " << m_penPoints.isEmpty() << " image: " << m_sourceImage.isNull() << " filename: " << filename;
  +     m_error = SaveError;
  +     m_saveInProgress = true;
  +     m_penEnabled = false;
  +     if(!filename.isEmpty()){
  +         QString path(QDesktopServices::storageLocation(QDesktopServices::PicturesLocation));
  +         qDebug() << "path: " << path;
  +         QString fn("e:/");
  +         fn.append( path.split('/',QString::SkipEmptyParts).last());
  +         fn.append("/");
  +         fn.append(filename);
  +         if(!fn.endsWith(".jpg"))
  +             fn.append(".jpg");
  + 
  +         QFile file(fn);
  +         file.remove();
  +         QImage tmp(m_sourceImage);
  + 
  +         QScopedPointer<QPainter> p(new QPainter());
  +         p->begin(&tmp);
  +         for(int i=0;i<m_penPoints.count();i++){
  +             CanvasPoint cpoint = m_penPoints.at(i);
  +             p->setPen(cpoint.pen);
  +             switch(cpoint.type){
  +             case DrawPen:{
  +                 p->drawPoint(cpoint.start);
  +             }break;
  +             case DrawLine:{
  +                 p->drawLine(cpoint.start,cpoint.end);
  +             }break;
  +             default:break;
  +             }
  +         }
  +         p->end();
  + 
  +         QScopedPointer<QImageWriter> w(new QImageWriter(fn));
  +         w->write(tmp);
  +         if(!w->error()){
  +             m_error = NoError;
  +         }
  +     }
  +     m_penEnabled = true;
  +     m_saveInProgress = false;
  +     emit saveChanged();
  }   }
  </code>   </code>




Jupaavola: Jupaavola -
2012-05-24T11:43:33Z
Jupaavola -

			
			
			
			
		
		← Older revision
		Revision as of 11:43, 24 May 2012
		
Line 34:
Line 34:
  Paint application also needs undo. Idea is quite simple, save drawed points so those can be popped out from image.   Paint application also needs undo. Idea is quite simple, save drawed points so those can be popped out from image.
    
− While this item is not derived from QDeclarativeImage or any other image class, it need to implement some of the functions by itself. Drawing and scaling are the most important. + This item is not derived from QDeclarativeImage or any other image class, it need to implement some of the functions by itself. Drawing and scaling are the most important. Reason for this is the QDeclarativeImage does not offer way to modify or access directly to image data itself.
    
  Whole example can be founded from projects:   Whole example can be founded from projects:
Line 41:
Line 41:
  == Creating canvas and loading image ==   == Creating canvas and loading image ==
    
− Canvas item is best to create with to images, one for display and one for backup. Without scaling of displayed image, backup is not necessary. But when using scaling, like using canvas in Flickable, it is too painful to figure out where is finger pointing and what could be image and display scaling.   + Canvas item with undo functionality must be created with two images, one for display and one for backup. Without scaling of displayed image, backup image is not necessary. But when using scaling, like using canvas in Flickable, it is too painful to figure out where is finger pointing and what could be image and display scaling.  
    
  Creating empty image and loading from image differs slightly. As creating image in the example, is creating first the displayed image and then backup which is also image used to saving. But in loading method, image is first loaded and then put on to display image. Reason here were to keep displayed image as long as we can, if in image reading occurs error the application won't erase ongoing work.   Creating empty image and loading from image differs slightly. As creating image in the example, is creating first the displayed image and then backup which is also image used to saving. But in loading method, image is first loaded and then put on to display image. Reason here were to keep displayed image as long as we can, if in image reading occurs error the application won't erase ongoing work.
    
− Remember when using Image source from QML, it is QUrl to file but Qt wants filename as QString. Use QUrl::toLocalFile() to convert. + === Loading image ===
  +  
  + Canvas item images are plain images. Load image to backup, create visible pixmap from backup image and display it. When implementing file handling methods which are visible to QML, Qt uses file paths but QML uses URL. Convenient way to change URL to file path and vice versa is to use QUrl class toLocalFile/fromLocalFile methods.
    
  <code cpp>   <code cpp>
Line 81:
Line 83:
       emit underneathImageChanged();        emit underneathImageChanged();
  }   }
  + </code>
  + === Create empty image ===
    
  + Creating empty image can be assigned instantly to image to be shown. Backup image is created from this image. This is faster way to show image in UI, also creating plain empty image is faster than loading image what makes this preferred approach. And like in loading image, backup image is created.
  + 
  + <code cpp>
  void ImageCanvas::createEmpty(int width,int height)   void ImageCanvas::createEmpty(int width,int height)
  {   {
Line 108:
Line 115:
  == Scaling ==   == Scaling ==
    
− Creating bigger image than screen resolution is, scaling acts important part and it also affects to drawing.   + Creating bigger image than screen resolution is, scaling will be important part. While this generates also difficulties, when mouse event reports X/Y values, those are mapped to screen resolution itself. Therefore it is needed too calculate new mouse points, scale visible graphic surface and of course update drawings.
    
− So, using property for this to make easy access from QML. As QML is mostly informing new scaling resolutions to image. Keep also original sizes, it comes handy when showing image in original size. + First, using properties for scaling makes it easy access from QML. As QML is mostly informing new scaling resolutions to image. Keep also original sizes, it comes handy when showing image in original size.
    
  <code cpp>   <code cpp>
Line 117:
Line 124:
  </code>   </code>
    
− That was about settings scale resolutions, more important is to draw image in correct size. Handle this in paint method what is protected from QDeclarativeItem. Of course QML should not inform what kind of image it wants. Just easiest way, draw image to here. Canvas item also knows it's width and height. If those are not matching with image size, draw scaled and otherwise full size. + As these properties are only variables, setters for those does not do any magic actions yet. Now look for visible image updating which is '''paint(QPainter* painter, const QStyleOptionGraphicsItem* styleOption, QWidget* widget)''' method from derived QDeclarativeItem class. Making things easy, canvas item also knows it's width and height and these are coming from QDeclarativeItem. QML is handling width and height reporting. In updating, check is width and height matching with image size. When image wanted resolution is same as screen resolution, don't do scaling. QPainter::drawPixmap will handle drawing, only important in scaled drawing is to calculate image's rectangle right.
    
  <code cpp>   <code cpp>
Line 151:
Line 158:
  == Drawing ==   == Drawing ==
    
− Example takes care of two different drawing styles; single points and lines. All data is stored in two QList's, one for displayed image and and with original image resolution. Original image resolution is not changed, then why to need separate point storage for it ? + Example takes care of two different drawing styles; single points and lines. All draw point data is stored in two QList's, one for displayed image and and with original image resolution. Original image resolution is not changed but other list keeps inside scaled image points which resolution can be changed.
    
− It's the undo function, if keep only one storage for points it would be possible to take drawed points out from screen but not from image to be saved. Also, editable image meaning the one to be displayed could be scaled and so are the points also. Both lists are following own image resolutions and cannot be mixed together. + Undo function is also dependant of history of drawed points. If keep only one storage for drawn points it would be possible to take those out from screen image but not from image to be saved. Also, editable image meaning the one to be displayed could be scaled and so are the points also. Both lists are following own image resolutions and cannot be mixed together.
    
  Single point drawing is little bit easier, take mouse event point and put coordinates to point. But when drawing line, there is one and few other issues. First is line need starting point. This could be single point on screen and then appending new point to list with this single point as starting and other screen tap to ending point. Or do not draw anything before second tap, line ending coordinates is there. Now if want line to follow last line ending, look for last point from list. Currently last ones ending is new starting.   Single point drawing is little bit easier, take mouse event point and put coordinates to point. But when drawing line, there is one and few other issues. First is line need starting point. This could be single point on screen and then appending new point to list with this single point as starting and other screen tap to ending point. Or do not draw anything before second tap, line ending coordinates is there. Now if want line to follow last line ending, look for last point from list. Currently last ones ending is new starting.
Line 188:
Line 195:
  </code>   </code>
    
− Point to Qt side, set it and call update image: + Set point to Qt side, call update image:
    
  <code cpp>   <code cpp>
Line 199:
Line 206:
  === Updating image ===   === Updating image ===
    
− While talking all the time about scaling, it is mostly visible in here updateImage() function. Mouse pointer event reports resolution points where it is. Meaning, if screen width is 360 pixels, it never report over that even flickable is showing image from different point. Drawing points need take care of image position on screen and finger tap position on screen, then calculate scaling and applying it to point. And of course, scaling of shown and backup image are different. + Mouse event reports resolution points where it is. This means; if screen width is 360 pixels, mouse event never report over that. Lets imagine flickable image has resolution of 1024 by 768 and screen resolution is 360 by 480. Now if move flickable to show image from 500 by 500, mouse event still report X and Y based on screen resolution and not to image resolution. If image is same size as screen resolution, no problem at all. But when using bigger sized images, mouse event points need to be calculated to match into image. Map mouse event point to image, calculate X and Y scale ratios from shown image divided by declarative item. Then same for backup image, note that same ratios cannot be used as backup is not scaled in any point but shown image can be.
    
  <code cpp>   <code cpp>
Line 306:
Line 313:
  === Undo ===   === Undo ===
    
− Here is also implemented undo function. Idea is simple, as points are stored then pop out last one. This is why we have two images and both have own lists which contains points. Loop through images with lists, draw all points and update. + Undo is like reversed image updating. Drawn points which are stored to QList containers, makes it easy to remove drawing from image. Note that points are removed from list containers, new visual image is created from backup without scaling. Then draw points, scale image and update to screen.
    
  <code cpp>   <code cpp>
Line 317:
Line 324:
           m_editImage = QPixmap::fromImage(m_sourceImage);            m_editImage = QPixmap::fromImage(m_sourceImage);
           m_penPoints.takeLast();                     m_penPoints.takeLast();         
  +         m_penPointsScreen.takeLast();
           QScopedPointer<QPainter> p(new QPainter());            QScopedPointer<QPainter> p(new QPainter());
           p->begin(&m_editImage);            p->begin(&m_editImage);



Hamishwillee: Hamishwillee - Bot update - Fix metadata etc
2012-05-16T04:06:22Z
Hamishwillee - Bot update - Fix metadata etc

			
			
			
			
		
		← Older revision
		Revision as of 04:06, 16 May 2012
		
Line 9:
Line 9:
  |platform= Symbian Anna/Belle   |platform= Symbian Anna/Belle
  |devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->   |devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
− |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->   + |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
− |signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer --> + |signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
  |capabilities= LocalServices ReadUserData UserEnvironment WriteUserData   |capabilities= LocalServices ReadUserData UserEnvironment WriteUserData
  |keywords= qml image flickable canvas drawpoint drawline scaled   |keywords= qml image flickable canvas drawpoint drawline scaled
  |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->   |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
  |translated-by= <!-- [[User:XXXX]] -->   |translated-by= <!-- [[User:XXXX]] -->
− |translated-from-title= <!-- Title only -->   + |translated-from-title= <!-- Title only -->
  |translated-from-id= <!-- Id of translated revision -->   |translated-from-id= <!-- Id of translated revision -->
− |review-by=<!-- After re-review: [[User:username]] --> + |review-by= <!-- After re-review: [[User:username]] -->
  |review-timestamp= <!-- After re-review: YYYYMMDD -->   |review-timestamp= <!-- After re-review: YYYYMMDD -->
  |update-by= <!-- After significant update: [[User:username]]-->   |update-by= <!-- After significant update: [[User:username]]-->
Line 166:
Line 166:
       CanvasPoint(){}        CanvasPoint(){}
    
−      QPen    pen; +      QPen pen;
       QPointF start;        QPointF start;
       QPointF end;        QPointF end;
−      int     type; +      int type;
  };   };
  </code>   </code>



Chintandave er: Chintandave er - edited ArticleMetdata
2012-05-13T16:57:55Z
Chintandave er - edited ArticleMetdata

			
			
			
			
		
		← Older revision
		Revision as of 16:57, 13 May 2012
		
Line 3:
Line 3:
    
  {{ArticleMetaData <!-- v1.2 -->   {{ArticleMetaData <!-- v1.2 -->
− |sourcecode= http://projects.developer.nokia.com/QmlPaintExample + |sourcecode= [http://projects.developer.nokia.com/QmlPaintExample QmlPaintExample]
  |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->   |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
  |devices= Nokia N8   |devices= Nokia N8
Line 21:
Line 21:
  |update-by= <!-- After significant update: [[User:username]]-->   |update-by= <!-- After significant update: [[User:username]]-->
  |update-timestamp= <!-- After significant update: YYYYMMDD -->   |update-timestamp= <!-- After significant update: YYYYMMDD -->
− |creationdate= <!-- Format YYYYMMDD --> + |creationdate= 20120510
  |author= [[User:jupaavola]]   |author= [[User:jupaavola]]
  }}   }}




Jupaavola: Jupaavola -
2012-05-12T21:11:18Z
Jupaavola -

			
			
			
			
		
		← Older revision
		Revision as of 21:11, 12 May 2012
		
Line 11:
Line 11:
  |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->     |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
  |signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->   |signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
− |capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. --> + |capabilities= LocalServices ReadUserData UserEnvironment WriteUserData
  |keywords= qml image flickable canvas drawpoint drawline scaled   |keywords= qml image flickable canvas drawpoint drawline scaled
  |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->   |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->

← Older revision		Revision as of 04:52, 30 January 2013
Line 425:		Line 425:
	== Demo video ==		== Demo video ==

−	~~{{#ev~~:youtube\|5Uy3C58pW50~~\|400}}~~	+	<mediaplayer>http://www.youtube.com/watch?v=5Uy3C58pW50</mediaplayer>

QmlPaint - how to make paint application with QML - Revision history

Hamishwillee: Hamishwillee - Change to use new video player which works with Lumia 920 and other mobile browsers

Hamishwillee: Text replace - "" to ""

Jupaavola: Jupaavola - /* Scaling */

Jupaavola: Jupaavola - /* Scaling */

Jupaavola: Jupaavola - /* Scaling */

Jupaavola: Jupaavola -

Jupaavola: Jupaavola -

Hamishwillee: Hamishwillee - Bot update - Fix metadata etc

Chintandave er: Chintandave er - edited ArticleMetdata

Jupaavola: Jupaavola -

Hamishwillee: Text replace - "`" to ""`