Hi there,
I was trying to understand how JS works with Wt, and thanks to Marco,
trying to get my image zoomed in/out.
According to Marco's instructions and reading Wt's doc, I just need a JSlot
object and connect the JavaScript code to it.
However, I am at a loos at how I can access my image. Thanks to the JS
prints, I know that the function is being accessed. When I check the value
of 'currentSize', it turns out to be NaN. Thus, I guess I am not accessing
my image successfully:
Do I necessarily need to include html tags (and thus build a webpage
structure) in order to access the dimensions of my image? Does imageResize
need to be a method of my own? Am I missing something?
This is the crux of the code:
Wt::WApplication *createApplication(const Wt::WEnvironment& env)
Wt::WApplication(env),
m_MyContainer(new MyContainer )
{
// Application title
this->setTitle("Zoom image example");
// Add the main container
root()->addWidget(m_myContainer);
}
private:
MyContainer * m_MyContainer;
};
Wt::WApplication *createApplication(const Wt::WEnvironment& env)
{
return new WtApplication(env);
}
int main(int argc, char **argv)
{
return Wt::WRun(argc, argv, &createApplication);
}
MyWidget::MyWidget(Wt::WContainerWidget * parent) :
Wt::WPaintedWidget(parent)
{
// Provide a default size
resize(300, 300);
// Trigger a repaint (paintEvent)
update();
}
void MyWidget::paintEvent(Wt::WPaintDevice *paintDevice)
{
Wt::WPainter painter(paintDevice);
// Draw (a 200x200 region of) the image
// The 'picture.png' image is located in the same folder as the
// the Visual Studio solution
Wt::WPainter::Image *m_Image = new Wt::WPainter::Image("picture.png", 200,
200);
painter.drawImage(20, 20, *m_Image);
}
MyContainer::MyContainer()
{
Wt::JSlot m_ResizeSlot;
// Call the method to initialize/setup the javascript code
std::string jsScrollZoom = ( boost::format( JS(function(obj, evt) {
if( $(window).width() < %d ) return;
var widget = %s;
var currentSize = parseInt(widget.currentSizeInPercent);
if(evt.detail < 0) { widget.imageResize(currentSize+2); } // zoom in
if(evt.detail > 0) { widget.imageResize(currentSize-2); } // zoom out
document.write('You scrolled over the image, isnt it? \n');
document.write('Event detail was ' + evt.detail + '\n');
//document.write('Wheel delta was ' + evt.wheelDelta + '\n'); //
evt.wheelDelta is undefined for Firefox
document.write('Current size is ' + currentSize + '\n');
}))
% MINIMUM_DESKTOP_SIZE
% this->jsRef() ).str();
m_ResizeSlot.setJavaScript(jsScrollZoom);
// Needed to avoid scrolling the page while zooming the image
this->mouseWheel().preventDefaultAction();
this->mouseWheel().preventPropagation();
// Bind the mousewheel event to the scroll slot
this->mouseWheel().connect(m_ResizeSlot);
}
Thanks again,
JON HAITZ
On 12 June 2013 18:02, Marco Gulino <marco.gul...@gmail.com> wrote:
>
> Hi! I just did something very similar, zooming in-out an html5 video on
> mouse scroll.
> I suggest not doing it "really" in Wt, but instead using a JSlot, this way
> you can skip server side processing, and resizing the image (or the
> container div, like I did) using jquery.
> You can find my code here:
> https://github.com/GuLinux/Pandorica/blob/master/src/player/html5player.cpp ,
> look up for the "HTML5PlayerPrivate::setZoomScroll" method.
>
>
>
> On Wed, Jun 12, 2013 at 5:51 PM, Jon Haitz Legarreta <
> jhlegarr...@vicomtech.org> wrote:
>
>> Hi there,
>> I would like to add zoom functionality to a simple display image done
>> with Wt. As far as I have seen in Wt's doc, the zoom in/out features are
>> only available for the WGoogleMaps.
>>
>> I guess I can handle mouse wheel events through Javascript. However, how
>> can still combine it with Wt?
>>
>> Thank you,
>> JON HAITZ
>>
>>
>>
>>
>> ------------------------------------------------------------------------------
>> This SF.net email is sponsored by Windows:
>>
>> Build for Windows Store.
>>
>> http://p.sf.net/sfu/windows-dev2dev
>> _______________________________________________
>> witty-interest mailing list
>> witty-interest@lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/witty-interest
>>
>>
>
>
> ------------------------------------------------------------------------------
> This SF.net email is sponsored by Windows:
>
> Build for Windows Store.
>
> http://p.sf.net/sfu/windows-dev2dev
> _______________________________________________
> witty-interest mailing list
> witty-interest@lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/witty-interest
>
>
------------------------------------------------------------------------------
This SF.net email is sponsored by Windows:
Build for Windows Store.
http://p.sf.net/sfu/windows-dev2dev
_______________________________________________
witty-interest mailing list
witty-interest@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/witty-interest
