I have to develop an image viewer application. The designed application should have the following features
Zoom in functionality
Zoom out functionality
Magnifying functionality
Pan functionality
Image overview functionality
I have to develop the application in Asp.net application. I have the following questions
What will be the better method to develop such application , I mean Whether it is implemented using Asp.net controls or standard HTML controls
Have any scope of HTML5 in developing such application?
Can i get any customizable open source project written in javascript or jQuery?
My answers to your questions:
I would use HTML, since you don't need anything from the server.
There is, you can search google for info.
Look at the info below.
I would try the following steps:
Look for examples of the required features.
Strip these examples down and build them up again according to your requirements.
Create a holder for the image. You can load the image from the server with jQuery and AJAX
Implement controls for zooming, panning. Use the implementation you created in step 2
There is alot of information to be found on the internet. Some examples are:
Zooming
http://www.tripwiremagazine.com/2012/07/jquery-image-zoom.html
Panning
http://manos.malihu.gr/jquery-image-panning
Overview
http://www.designzzz.com/jquery-slide-show-image-gallery-tutorials-downloads/
Tutorial for pan and zooming with HTML5 canvas
http://my.safaribooksonline.com/book/web-development/html/9781449308032/images-on-the-canvas/zooming_and_panning_an_image
For me,
I would use HTML,
Use HTML5 and CSS3 if you can,
Yes, there are plenty. Just type what you need. It seems what you are building is a image slider/gallery. Plenty of those on the web. Just look for it.
If you have to build it from scratch, what you could do is research, these css properties. scale, zoom, and transitions.
There you go, hope I pointed you in the right direction.
Related
How do i create a website background that has live graphics as in this website. The graphics is also interactive to mouse pointers.
I know it's done through javascript don't know what exactly that technology is called so that I could search about it.
It use particles.js, a lightweight JavaScript library for creating particles :)
You can get it from NPM.
One of the project requirements for my new java web project is to have dynamic charts that will load really fast.
While in discussion , it was asked if we could implement charts without using images ie without loading jpg, png files etc. Also files like pdf cannot be used.
Basically my question is
Can charts be implemented in jsp/javascript without using images,pdf etc ?
ie even api's used should not provide end result as image,or pdf etc.
I did not say no right away , as I have implemented charts in console applications in C on screen. Can we do something like that on a webpage ? ie show a graph by drawing on screen dots,lines,circles etc.But it should be possible inside a div ?
PS : Comments and answer from Lucien Stals helped to understand that the technology i was looking for was svg.
I am looking for some nudging in the right direction from some of the experienced java , javascript programmers in SO.
Many JavaScript chart libraries exist that render in HTML5 on your page. You can probably find one that meets other requirements or wishes of your team, since each have feature areas in which they excel. http://www.zingchart.com has also been adding many ways to include them in your charts if you decide to go with something other than vanilla JavaScript (jQuery, Angular, etc). Full disclosure: I'm on the ZingChart team. I can help you weigh the pro's and con's if you find a few that catch your interest.
A simple bar chart would be easy enough to create with DIVs and CSS.
Anything more complicated and I think you are talking SVG, which could be drawn using http://raphaeljs.com/, or maybe http://d3js.org/ .
Also look at the HTML5 canvas element.
I would suggest to use Google Chart Framework. I did use it in past for my project and it is good.
You can check highcharts http://www.highcharts.com/ . This can be integrated easily with your javascript .
Most of this js chart plugins expects data in array or json format and can dynamically render the charts.Easy to integrate in the web pages
jgccharts.js Jquery charts
jquery charts plugin
I am a complete novice at web development and I am wondering a few things about graphics rendering using JavaScript (not Flash or some other plugin). For example, is it possible to render arbitrary graphics (e.g. lines, curves, text, images etc.) inside a web page without using the Canvas feature found only in HTML5? I ask because I believe I have seen Google for example showing interactive graphics for one of their logo enhancements on their homepage for special anniversaries and the like before HTML5 was around and currently in browsers which don't even support HTML5. I also remember seeing animations in web pages during the 90s that were done in pure JavaScript.
So:
1) Is such graphics rendering possible using pure JavaScript?
2) If so, which APIs or libraries are being used?
3) Is it possible to decorate standard HTML controls with arbitrary graphics?
I am trying to determine the bounds of what is possible in a web-based UI.
For example, is it possible to render arbitrary graphics (e.g. lines, curves, text, images etc.) inside a web page without using the Canvas feature found only in HTML5?
Yes. Have a look at SVG, which has been around in some form or another since... 1992 or thereabouts.
There are plenty of docs and tutorials on the Mozilla Developer Network.
I ask because I believe I have seen Google for example showing interactive graphics for one of their logo enhancements on their homepage for special anniversaries and the like before HTML5 was around and currently in browsers which don't even support HTML5.
You saw SVG, which Google has used for Google doodles in the past and still uses for all sorts of stuff (portions of Google Maps on some platforms).
Sencha Touch seems like an amazing way to develop mobile apps. I've seen posts by people incorporating Jquery, D3.
At the same time the posts describing customizing controls seems to be fairly narrow.
Adding the picture of a kitten next to the slider and labeling the slider seems kinda tame compared to what ios can do in terms of custom controls, at least in terms of examples available. Most blog posts imply you can extend the control objects in Sencha or the CSS file.
These posts are not quite what I'm looking for - that's my problem. I can't see any examples of anyone changing default controls in Sencha touch, but they make it sound as if it might be possible to do anything.
This is my question:
Is Sencha Touch able to build an iOS or Android App incorporating any javascript library or HTML5? Are there any limitations here?
To give an example I trying to implement a custom slider, where a touch along a continuous line or a circle like this color selector will enter new values. Further if you incorporate a library like protovis or D3 (or Raphael charts) can Sencha display anything the graph canvas element will otherwise display? Will it take touch input and interact with the graph libraries the way that the HTML5 graph does?
The post you mentioned is not about customizing controls, it's about displaying a list from bound store, instead of of using just Ext.XTemplate (the system with Ext.view.View) to generate HTML, it uses ComponentView to generate Ext.Components instead.
It's hard to tell what you're asking, what in particular are you trying to do?
To address some of the questions you added:
Charts in Sencha are implemented using Raphael, which uses SVG, therefore all the elements in the chart can be interacted with using HTML events.
Everything that Sencha generates is valid HTML, you can listen to HTML events, but components usually abstract the lower level events into something that is easier to consume, (for example a data view abstracts the click so that it passes the record being clicked along with the event).
Therefore, the answer to the question is, YES, Sencha can co-exist with regular HTML. If you want the full benefit of the framework, you should always create an Ext.Component so that your components can be easily used within the framework's layout containers.
It's very easy to misuse Ext when trying to write regular HTML and still place that within the layout rendering pipeline. Ext.Component has a built in way of creating HTML out of templates, see http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-data and http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-tpl
I'm looking for a simple Flex or JavaScript based image editing component which can be embedded in a web application. It shouldn't be a web service but rather a component that I can download and customize (i18n etc.).
I only need some basic features: most important is cropping, optional features would be rotating and adjusting brightness/contrast.
Basically something like splashup.com, but as an open source application rather than a web-service.
Thanks a lot in advance for any hints!
-- Andreas
There is pixastic.
Pixastic is a JavaScript library which allows you to perform a variety of operations, filters and fancy effects on images using just a bit of JavaScript.
Be sure to read the documentation to make sure the operations you are looking to perform are supported by all browsers. There are some issues with IE.
They have a editor you can try. It shows off some of the features.
Your question suggests you want an out of the box solution, or at least a base to stand on.
Quick Google search reveals editImage. This doesn't look polished or bug free, however building on this or rolling your own should not be difficult.
Here is a good article on Image Manipulation in Flex. Towards the end of it read "Cropping, Panning and Zooming", your basically looking at 5 lines of code. I think you might even be happier building this yourself.
Thanks for your answers!
I ended up customizing and extending this component:
http://blog.mediablur.com/2008/02/20/flex-image-cropping-component/