Current MS Students/Muhammad Hammad Lodhi
From CSWiki
Contents |
[edit] Jan 5 (week 1)
In the last week of class CS 590 the professor Dr. Russel Abbott gave us the introduction and an overview of the course how this course is important and how we are gonna take advantage from this course regarding our master,s thesis.Later he showed us some of the master thesis by giving us the idea how we can make and how we have to go through all this subject then he told us about 2 options which are thesis and non thesis option.I put up my meeting with Dr. Huiping Guo to ask her if she can be my project advisor and secondly i am thinking to make an SRS report for any compnay to put all their stuff online by which everyone can access it easily.
[edit] Jan 12 (week 2)
This Software Requirements Specification provides a complete description of all the functions, constraints and specifications of the WebOrder system to be designed for the ToolCo Company which sells tools and supplies to a diverse market.The document is intended to be read by project managers, developers, testers, marketing staff, users and documentation writers. The document is organized into 6 parts. 1. Introduction, 2. Overall Description, 3. System Features, 4. External Interface Requirements,5. Quality Attribute Requirements and 6. Other Requirements. All the parts are independent , however reading the document sequentailly helps the reader understand the WebOrder system better.ToolCo has decided to give a new perspective to their business by shifting to web commerce. Thus by having a WebOrder system, the organization can reduce the cost and can provide better customer service.The other benefits and goals which effect other departments are as follows
• Sales department – provides convenient way to describe items in product line- names, details, pictures and prices. • Customers-helps the customers to easily navigate to the desired item and place an order. • Warehouse department - it provides customer order to be picked, packed and shipped with minimum travel through the warehouse saving time and money. • Inventory department - helps re-orders items to avoid out of stock situations and have balanced inventory.
[edit] Jan 19 (week 3)
I am giving presentation on Software Requirement Specification of WebOrder for ToolCo Company. Media:SRS.ppt
[edit] Jan 26 (week 4)
I started work on Scalable Vector Graphics which defines graphics in XML format.I will give presentation and demonstration on some examples on 2nd feb.
SVG is a language for describing two-dimensional graphics and graphical applications in XML.SVG was developed by the W3C SVG Working Group starting in 1998, after Macromedia and Microsoft introduced Vector Markup Language (VML) whereas Adobe Systems and Sun Microsystems submitted a competing format known as PGML.
SVG allows three types of graphic objects:
1)Vector graphics
2)Raster graphics
3)Text
Graphical objects can be grouped, styled, transformed, and composited into previously rendered objects. SVG does not directly support z-indices that separate drawing order from document order for objects, which is a drawback with respect to other vector markup languages like VML. Text can be in any XML namespace suitable to the application, which enhances searchability and accessibility of the SVG graphics. The feature set includes nested transformations, clipping paths, alpha masks, filter effects, template objects and extensibility.
Following is the basic circle in SVG example which i tried and i am still working on it.
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.com/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.com/2000/svg"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/></svg>
[edit] Feb 2 (week 5)
This week i worked on examples of SVG and i get to know that how it is better than Flash.The biggest advantage SVG has over Flash is the compliance with other standards (e.g. XSL and the DOM). Flash relies on proprietary technology that is not open source. The some advantages of SVG are as follows SVG files can be read and modified by a large range of tools (e.g. notepad). SVG files are smaller and more compressible than JPEG and GIF images. SVG images are scalable . SVG images can be printed with high quality at any resolution . SVG images are zoom able. Any part of the image can be zoomed without degradation. Text in SVG is selectable and searchable (excellent for making maps). SVG works with Java technology. SVG is an open standard. SVG files are pure XML.
The drawbacks of SVG are as follows Drawback of SVG at the moment is that not all browsers support it. Mozilla browsers, Firefox, and Opera support SVG, and Microsoft plan to support SVG.
To view the SVG file If your browser does not support SVG files, you will need to download an SVG viewer to view SVG files. Firefox 1.5 and Opera 9 have native SVG support. If you are using one of these browsers, you do not need to install an SVG viewer.Download an SVG Viewer for FREE from Adobe.
Here are my slides which i am gonna present tomorrow Media:SVG.ppt
[edit] Feb 9 (week 6)
This week i worked in more detail about SVG all its elements.Firstly i found how SVG can work with Html and the same way we can embedd Html as last time i told you in class and showed you about XML.SVG files can be embedded into HTML documents with the <embed> tag, the <object> tag, or the <iframe> tag.
It would be great if we could add SVG elements directly into the HTML code, only by referring to the SVG namespace, like this
<html
xmlns:svg="http://www.w3.org/2000/svg">
This is an HTML paragraph
<svg:svg width="300" height="100" version="1.1" ><svg:circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg:svg></body> </html>
A filter effect consists of a series of graphics operations that are applied to a given source vector graphic to produce a modified bitmapped result.
Filter effects are defined by filter elements. To apply a filter effect to a graphics element or a container element the 'filter' property is set on a given element. Each 'filter' element contains a set of filter primitives as its children. Each filter primitive performs a single fundamental graphical operation (e.g., a Gaussian blur or a lighting effect) on one or more inputs, producing a graphical result. Because most of the filter primitives represent some form of image processing, in most cases the output from a filter primitive is a single RGBA bitmap image (however, it will be regenerated if a higher resolution is called on).
The original source graphic or the result from a filter primitive can be used as input into one or more other filter primitives. A common application is to use the source graphic multiple times. For example, a simple filter could replace one graphic by two by adding a black copy of original source graphic offset to create a drop shadow. In effect, there are now two layers of graphics, both with the same original source graphics.
The following table lists the filter primitives available in SVG 1.0 and SVG 1.1. SVG Tiny does not support filter effects, while SVG Basic supports only those filter primitives indicated by SVGB.
Name Element SVG Basic
Blend feBlend SVGB
Color matrix feColorMatrix SVGB
Component transfer feComponentTransfer SVGB
Composite feComposite SVGB
Convolve matrix feConvolveMatrix
Diffuse lighting feDiffuseLighting
Displacement map feDisplacementMap
Flood feFlood SVGB
Gaussian blur feGaussianBlur SVGB
Image feImage SVGB
Merge feMerge SVGB
Morphology feMorphology
Offset feOffset SVGB
Specular lighting feSpecularLighting
Tile feTile SVGB
Turbulence feTurbulence
How to apply a filter is as follows
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="4in" height="3in">
<defs>
<filter id="AFilter">
</filter>
</defs>
<text style="filter:url(#AFilter)">Text with a filter applied</text>
</svg>
- Here is my project prospective page:Prospectus
[edit] Feb 16 (week 7)
This week i campare SVG with Flash to find out which one is better and i got the following solutions.
Feature SVG Flash
Vector artwork Yes Yes
Alpha Channel Transparency Yes Yes
Pixel-Precise Layout Yes Yes
Typeface Selection Yes Yes
Typeface Embedding Yes Yes
Gradients Yes Yes
Masking Yes Yes
Open Standard Yes -
Live Filter Effects Yes -
Pinpoint Invalid Code Yes -
Extensible Yes -
Animation Yes Yes
Interaction Yes Yes
Filesize compression Yes Yes
Editable executable Yes -
both require browser plug-in; SVG will get built-in browser support (e.g. Mozilla)
open, royality-free, multi-vendor vs. closed, single-vendor
Free World Wide Web Standard vs. Macromedia Inc.
easy-readable plain-text vs. binary format
$50.000 Flash Generator license for creating large-scale dynamic graphics vs. inexpensive packages such as PHP, XSLT, JSP and others
both allow embedding of typefaces (fonts); SVG allows multiple SVG documents to reference same SVG font file; SVG applies typographic handling to original text to ensure your text is searchable and selectable
SVG supports Photoshop-like filter effects on vector graphics; Flash doesn't support filter effects
SVG is a truly open and extensible format; anyone is welcome to add functionality; Flash is controlled by Macromedia; you can't extend the format without violating their patents/copyright
Why SVG? Isn't Flash
Web Architecture - The Big Picture
XML Syntax - mixes easily with established and emerging XML standards such as: XHTML, XUL, MathML, XForms; XML is the lingua franca because it's simple, extensible, royality-free; operating system or programming language independent and much more
Web Services - mixes easily with Web Services; send SVG diagrams or animations via SOAP messages or create rich graphical user interfaces for Web Services
Styling with CSS - use a single style language for XHTML, XUL and SVG
Animation with SMIL - use SVG docs in multimedia SMIL presentations to mix vector graphics with audio and video
DOM and Scripting - use Javascript to access the SVG document tree at-run-time
Modul-Mania - use SVG Tiny or SVG Basic on mobile-devices (cell phones, palms, etc.)
[edit] Feb 23 (week 8)
This week i worked for SVG Gradients.
SVG Gradients
A gradient is a smooth transition from one color to another. In addition, several color transitions can be applied to the same element.
There are two main types of gradients in SVG:
Linear Gradients Radial Gradients
Linear Gradients
The <linearGradient> tag is used to define an SVG linear gradient.
The <linearGradient> tag must be nested within a <defs> tag. The <defs> tag is short for definitions and it allows definition of special elements such as gradients.
Linear gradients can be defined as horizontal, vertical or angular gradients:
Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ Angular gradients are created when x1 and x2 differ and y1 and y2 differ
Here is 1 example
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs><ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/></svg>
Code explanation:
The id attribute of the <linearGradient> tag defines a unique name for the gradient
The fill:url(#orange_red) property links the ellipse element to the gradient
The x1, x2, y1,y2 attributes of the <linearGradient> tag define the starting and ending position of the gradient
The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag.
The offset attribute is used to define where the gradient color begin and end
[edit] Mar 1 (week 9)
I am going to implement swing component. Swing Api will be used for making GUI of App.Batik Api for handling svg files and viewing it.
1. Svg Application will show any valid svg file. Svg App can load svg file from harddrive.You can browse and load svg file from system after loading u can add text to any position in svg file using input fields and on clicking svg elment the element name will be displayed after adding text we can get the new svg file.
2. Svg Application will diplay the element info which is clicked and make it highlighted. Element Recongination.
It means its gonna tell me that whether it is circle, rectangle and its gonna make that specified object color gray so it can
be highlighted from others.
3 Svg Application will put text on the last clicked mouse positon.
4. Svg Application will save the new added text svg in new file. This means that u can add text to any svg file at desired location
