In the previous posting, I have provided a demo example how to add scripts to scale svg grphics. I was going to add svg graphics in my blog and to show the scaling feature. However, I struggled for two days to make it working but without luck.
I can add script functions to my blog through Blogger's layout settings. In this sense, I have control of my HTML page. Here I mean by having control of HTML page is that you can edit and update the HTML page to web sever. However, I cannot find a way to submit svg graphics to my Blogger server. What I tried was to upload my svg to another site, Open Clip Art Library. I added my scripts to a svg xml graphic.
This brings a problem: my Blogger and my svg are in two different sites. What I found out is that the scripts in my blog does not have access to the scripts in my svg file. JavaScript has security reason to prevent calling scripts on other sites. What have been working in my local computer as shown in the demo would not work any more when I changed the svg reference to a different site!
In order to make this working, you have to put svg in your site.
Anyway, the instructions in my demo still work well if you follow this rule: you have the control of both html and svg files on one site.
The demo shows you a way to attach script functions defined in svg to the object in your html file. In JavaScript world, anything is object. A tag <object> is a DOM element. It also can be obtained by DOM documention object's getElementById() method. The unique feature of JavaScript is that you can attach or detach a function as a method to a object dynamically! That's basic technique I used in the demo. In this way, you can control the scale of svg from your html page.
That is one way to do it. I further investigated an alternative way to scale svg: adding scripts to a svg xml file. This provides some UIs in the svg: two small circles on the top-left corner the svg graphic with some mouse events(mouseover, mouseout and mouseup for click). By clicking on the left circle, it will scale down the svg; while clicking on the right circle, scaling up the svg.
I thought there is no attachment from my html and svg. The scripts in svg should be able to work. Nop! Since the svg is referenced by another site, any function or DOM method calls stop working.
Here is my svg with scripts at Open Clip Art Library. I put it here but the scripts in the svg do not work:
Open the dog graphic in another tab or browser window. Try it out and enjoy it!
NOTE: don't zoom in or scale the svg too big. It will slow down your browser for minutes. I event got crash once! If you scale too small or too big, refresh the page to restore to its original size.
Friday, October 31, 2008
Scaling SVG Graphics with Javascript (2)
Monday, October 27, 2008
Scaling SVG Graphics with Javascript (1)
This blog, as well as coming ones, contains information about how to scale svg graphics by using JavaScript. It is based on the article of svg scaling with JavaScript. You need to have the control of the source codes of both the html page and svg so that you can add JavaScripts codes.
I discovered svg just recently, and like it very much. Inread of using jpg or png like bitmap graphics, svg is totally based xml. It is a standard way to display graphics at much more control by programmers. However, the first problem I encountered is to scale svg, or change the size of svg graphics. Soon I found the above article. It provides a very simple way to scale svg. It has limitations. The biggest problem is that it can only scale one svg graphic since it linked the graphics set dimension and scale methods to top window object. There is only one top window object.
Then I spent some week's evening time to figure out alternative ways to do it. Finally, I got a better way to scale svg. You can scale as many svg graphics as you like and the scales for each one are different. I am very satisfied with the current solution. Here I put them summarized in this and coming blogs, as well as some examples.
Here is the link to get the demo of HTML and SVG graphics files.
Enjoy it.
Thursday, October 23, 2008
Stack OverFlow: Developers' Q&A Social Site
I found a very good web site: StackOverFlow. It is basically a developers' Q&A social group. You can post any questions there. All the questions are categorized by tags. I added some tags I am interested in and some questions. Actually, I posted some answers first.
I got this web site information while I was walking outside downtown Calgary during my lunch break, listening a podcast by Scott Hanselman. The topic is all about StackOverFlow web site for almost one hour. That's great talk.
Today I google the site, found it, and joined the site. One interesting thing is that you don't need to create a new account. I used my Blogger account(googl's actually) to join the site. That saves me time and brain for another new account. Just for a few hours, I earned 1 point for my reputation. It is an encouragement to spend sometime to share programming experience and learn something as well. I always get valuable knowledge and solutions from web, forums, and discussion groups. This one is the right one for me! I think I'll use it more than other ones. One shop for almost all my skill areas.
Sunday, October 19, 2008
SVG and DropBox Web Share Space Tool
SVG is a xml file for defining graphics and it is a World Wild Web Consortium (W3c) recommendation. It is very cool graphics. With SVG, it opens a door to create interactive and dynamics graphics with scripts so that web page content is more dynamic.
One interesting about SVG graphics is that you cannot copy the image by right click. The image is defined by xml source codes in a SVG tag. What you can do is to open the source codes and copy the SVG tag section and save it as a SVG file. You can either use a browser or Adobe SVG Viewer. There are many SVG editor tools available as well.
The graphics is defined as SVG tag in an xml file. However, one problem is that you cannot directly place the xml graphics section in a html web page. It has to be placed in the same way as other graphics, ie, referenced by a link. Therefore I could directly place a SVG graphics in my Blogger, when I first learned about SVG. Blogger does allow me to place a graphics like jpg or png files, but does not support SVG. Blogger does not provide any space for me to directly put my files.
Today, I found a web tool called as DropBox. It is a web tool to share your files between you computer and your account there. With DropBox public shared space available. I can place my svg files there so I can reference to it by using embed tag.
Here is one svg file I saved in my public space and make a short name to it:
medium
Or click Feather Pan. I got this SVG graphics from Open Clip Art Library by wsnaccad.
I created a short name by MetaMark for the long name link. The only problem is that both tools are only active if your file and link active at least something like 90 days. I am not sure how long they are available. Anyway, for a blog entry, as long as it is working for the time being, it is OK. I can change the link later on if they are not working. There always some other options available.
Saturday, October 18, 2008
Add Categories or Labels to My Blog
I have added Blogger's new gadget Labels to my blog. To add a gadget is very simple. Just go to your blogger's Layout tab in Customize link on the top right corner. There should a link as Add a Gadget in the layout page:
To add a label to your posts, just type a label text in Blogger's editor's lower right input box ("Labels for this post"). If you have already defined some labels for your posts, you may see some labels displayed as Label Sense Completion.
To remove a label, you have to remove that label from all your posts.
It is really nice to be able to display Categories in my blog so that I can easily jump to the posts I did before. In addition to that, I'll have a picture what I have posted. For other browsers, I think this provides valuable information about my blogs.
Friday, October 17, 2008
JavaScript Class-less Objects
Nice article on JavaScript Class-less Objects. Enjoy reading the article!
Thursday, October 16, 2008
Blogger Layout and Gadget
I have not touched my layout for a long time. Today I tried to add a twitter to my blog my new twitter account. I realized that I can also add a twitter gadget from Blogger's layout. Actually, there a tons of gadgets available. That's really great! I like some of them.
One of gadgets is Label, something like tags you can define for your blog. While you create a new blog, you can add labels on your blog. This is a very convenient way to group blogs. With Label gadget, you will provide a way for you and other browsers or follows to get interested topics. I'll try to add my own labels to my blog. Hopefully, the Label gadget will be able to provide some visual information about those labels.
Saturday, October 11, 2008
Web Tool: Short URL
I read an article about web tool to make URL short long time ago (last year?). That is ShortURL. However, the site may not free soon as I recall a warning in the article. Now I think that I do need a tool to redirect long urls such as my blog entries to a short one. By gooling web, I found MetaMark.
The short URL generated by this site is not a user friendly one, but it works. According to the information of this site, if the url has not been used for more than two years, it may expire. For short term use, this web tool is great. For example, my previous post is at http://xrl.us/otgzf, comparing to http://davidchuprogramming.blogspot.com/2008/10/web-tools-firebug-and-smushit.html.
Here is the form I copied from the site to do the job:
I did several tests. If you use it to generate one and try the same long URL again, the one first time generated is returned back. Therefore, you just cannot change it. It does not check if the URL exists or not. I gave a none-existing one, and it still generated a new short name, which is not not-found-url. May be this is a way to change it (by making the previous existing one invalid). The web server just generates an alternative short URL, no matter the URL you provide is valid or none-short one. I tried to get a short URL for "http://google.ca". The new one is "http://xrl.us/bemw2" (it may exist or I just generate one for it):).
A related technique about URL is to implement ASP.Net's MVC framework. Its URL is based on controller, action and router. You can construct your own user-friendly URLs. The URLs based on ASP.Net MVC does not contain .aspx or .html suffix and not url parameters like ¶1=value1... You will see more short and user friendly URLs on web. The Metamark page mentioned that it is using MVC pattern. Maybe this server just use the pattern to build a very simple, random and short URL mapped to a long URL.
You can do the same thing for your company's web pages. Most of them are not-user-friendly URLs and hard to remember. By using ASP.Net and MVC framework, you can define a structure of URL and mapping user-friendly URLs to a existing ones without any change to the old ones. It should be very simple project.
Update: One of the great feature of Metamark web tool server is that you can provide a nickname and secret. The nickname must be unique one, not taken by others. Then the generated URL is [server_home]\[nickname]-[secret]. You could create a user-friendly URL! This blog is at http://xrl.us/shortURL1-WebTool. "shortURL" has been taken. I had to add "1" to it.
The generated short URL does not take any suffix like ".aspx" or ".html", which is not needed actually!
Web Tools: FireBug and Smushit
Two great tools for Web developers: FireBug and Smush.it.
FireBug provides a view panel on the bottom with a lots of options to view such as Console, HTML, CSS, Script, DOM and more. If you click on Inspect to toggle it on, then you can hover your web page to see selections with updates on FireBug panel. I think it will save a lots of time for Web-developers to debug their web-pages. You may find out more about what actually in your client side web page codes when you debug your ASP.Net applications.
Smush.it is a great tool by some Google developers. You simply upload your image and to see how much it can smush. For example, I posted a blog on my Mac log with png image. After smush.it, it reduces 37%. The logic is very simple. It tries to turn off some image bits which will not make much difference in view. I'll use this tool to reduce my images on web. It for-sure will make your web page much faster for your clients!
Thursday, October 09, 2008
Apple Programming: User Defaults
Just started to look at some Apple Xcode application examples. That's a whole new huge framework for OS X. One application is about user defaults. In Windows there are many ways to store application defaults or values such as Registry, XML file, Ini file or Active Directory.
In Mac OS X, Apple provides a plist and bundle for user preferences and in Objective-C, there are some classes can be used to get user default values, NSUserDefaults for example:
NSUserDefaults *defaults;
// Get all the defautls for the current app
defaults = [NSUserDefaults standardUserDefaults];
// Register 2 defaults in case they are not available in user defaults
// Note, the registerDefaults does not change defaults.
[defaults registerDefaults:[NSDictionary dictionaryWithObjectsAndKeys:
@"Joe", @"first_name",
@"NO", @"is_married",
nil]];
//...
NSString firstName;
BOOL married;
// the following two calls will return the user's individual preferences,
// if they are available. Otherwise, it will just return the values we
// registered previously. Saves us some hassle!
firstName = [defaults stringForKey:@"first_name"];
married = [defaults boolForKey:@"is_married"];
That's quit difference way to do in Mac. Very interesting! Some good links about User Preference Defaults:
- O'Reily Mac DevCenter.com: Mac OS X's Preferences System (and More!)
- Apple Developer Center: NSUserDefaults Class Reference
- CocoaDev(WikiWikiWeb) article: NSUserDefaults
Friday, October 03, 2008
SQL Server Database Mail
I use msdb.dbo.sp_send_dbmail to send email notification in SQL Server. Recently I migrated our DB to a new server. The problem I encountered is my SQL SP does not working any more.
Finally, I find out this is the SQL server configuration issues. There are some configuration settings to be done on SQL server level.
First, I have to turn the mail feature on by using the command:
sp_configure 'Database Mail XPs', 1
reconfigure
Next, I have to configure the Database Mail. Here is the picture to access the configuration:
where you have to create a Database Mail account and profile. Basically, the configuration contains information about mail server, SMTP Authentication. The profile will be created for you after you add a new account.
One thing you have to do in the Database Mail configuration is that to set the default profile as you will use in
sp_send_dbmail so that you would not need to specify a profile.For my case, I use this sending mail feature to send file attachment in some cases. My notification report mail contains information from DB in html format. The content may be very big. If the content is very big, it will take time to open the mail. In case of very large size content, I'll send the report as an attachment file.
By default, the file size for Database Mail configuration is 1,000,000 bytes. It is very small in most cases. I have to change it to 10,000,000 or about 10MB. This can be done in Database Mail configuration.
After all these settings, my email notification runs with success.
Thursday, October 02, 2008
ASP.Net MVC
Just watched a training video Creating Task List on ASP.Net MVC. It is very impressive. MVC design pattern has been used for Windows application and now the framework for ASP.Net is available.
I have used this or MVP in several desktop applications before and I have not touched this type of design for several month. I'm very glad to see the new package available.
MVC pattern provides very good design infrastructure with separations of UI, Controller and Model. In addition to this model, I prefer to add a Repository level to separate data base and classes. The Repository model is responsible to provide data as objects and interface for updating objects back to DB.
Any good design pattern does not resolve all the issues. Still you have to keep good practice to use them. I understand that the tutorial video is just an instruction to MVC. My comments on the practice in this video is that there are too many client to server calls. To create a new task you have to make a call to server side to add a new task. However, to mark a task as completed, I don't think that the Complete action call to server for each edit is necessary. It could be done on client side to mark one or more tasks as completed. Add a Save button to save changes. This will avoid frequent calls to server.
In order to do that, I think client side script may be needed to handle these changes. In addition to that, you have to handle redirect change by client to another page. That means a warning message to indicate changes.
New design patterns would provide a gateway to design a better applications. You should remember that that does not resolve all the problems or make your application in a good structure. It'll take time to master skills to develop good applications.
Add Scripts to Client Side Page 3
In my first post on this topic, I mentioned that there some cases that prompts may not be desired. You can avoid prompt display for a control's click event by calling the base class's method BypassModifiedMethod().
This method actually disables the prompt display by setting the client side page level script var on click event:
m_needToConfirm = false;
However, in case of saving failure, such as exception raised from back-end DB, a postback call may be called back to the client side with some error message being displayed. This would cause a problem: if the user redirects to another page, the prompt would not be displayed and the changes may not be lost.
To resolve the problem, I added a method
ResetOnSubmit() in the base class. You should call this method on Page_Load event for postback case if you want to reset the flag variable back.protected void Page_Load(object sender, EventArgs e)
{
...
if (!IsPostBack)
{
base.ResetOnSubmit();
...
}
...
}
Another handy method I added to the client side base class is
DebugChanges():protected void DebugChanges(
WebControl wc,
string wcEventAttribute,
string clientIDForDisplay)
{
string script = string.Format("javascript: displayChanges('{0}')",
clientIDForDisplay);
wc.Attributes[wcEventAttribute] = script;
}
where
displayChanges() is a client side javascript function registered on the client side page level. This function will display the current monitored changes and original values on a WebControl specified by control's event. You call this method in Page_Load event to add this debug feature. You can decide when the control is visible. I used a URL request parameter to enable the visibility of a control in one case. See my previous post on Using Query String Parameters in ASP.Net Page.As I promised in my previous post, here is the source codes of ClientSidePage class.
Wednesday, October 01, 2008
SQL Server Project (5)
I have written several blogs on SQL Server Projects. Here is the list of links of previous posts:
Recently we moved our SQL server from one virtual machine to a real PC SQL server. DBAs created the new server and installed a blank SQL server. After that, we had to move our DBs to the new user.
Generally, DBAs don't give us sa password. What they did is to created an appsupport user with almost as same as settings as sa for us. We use this user to back up the existing DBs and copied to the new PC for restoring.
The restoring process went very well. Almost every thing has been set up as same as the existing DBs. However, for SQL database project, as I mentioned in previous articles, some Asymetric Keks for assembly keys and Log Permissions have to be set up in master db. Fortunately, I logged the steps to do that (as I wrote in my previous articles) and restored the keys and permissions in master DB.
One thing I realized that the master DB as created by sa and our other DBs with SQL database projects were restored by appsupport. The owners of these DBs are different. As a result, I could not deploy my project to DBs. The error messages say that the owners are different and they could be changed by ALTER... I used this command to change the DB(MyDB for example) owner:
ALERT AUTHORIZATION DATBASE::MyDB TO sa
I think that if DBs' owners are different, you cannot deploy your project from Visual Studio 2005. You have to make change to keep them in sync.
The second thing I had to do is to set DB TRUSTWORTH on:
ALTER DATABASE MyDB SET TRUSTWORTHY ON
since I referenced System.Web.dll framework assembly in my SQL database project. Otherwise an exception would be thrown out when Ssytem.Web.dll classes are called.
The last thing is to give permissions to Windows' users since I have to use VS to deploy my project remotely to the SQL server with Windows authentication. Instead of give permissions(alter and create assembly) to one user, I created a Role on SQL server DB called as db_developers and adding my user name as a member of the role. Then I set related permissions to the role.
After all these settings, I can deply my project remotely to the SQL server DB and run the deployed assembly based ST with success.
Posts
