Today I was searching around the web trying to figure out how to set the line thickness in HTML5 Canvas.
I stumbled across this great cheatsheet:
http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.png
It had the information I needed, after setting the context you do something like this to make the lines thicker:
1 | drawingContext.lineWidth=4; |
Then go ahead and do your stroke:
1 | drawingContext.stroke(); |
The line should now be more thick.
It seems pretty easy to notice how worried Microsoft is about Google. Just watch your favorite prime time television station for a bit and you’re sure to see ads for Bing, Microsoft’s new search engine trying to compete with Google. Well thats Microsoft trying to drink Google’s milkshake … What is Google doing to drink Microsoft’s?
-
Google Apps Are Rendering Microsoft’s Exchange Server Email Obsolete, Even For Businesses
Google Apps are superseding Outlook and Exchange server for businesses with their web based email, instant messaging and calendar. They’re all easy to use, shareable and available from anywhere. Did I mention they’re significantly less expensive? -
Docs Still Doesn’t Have All The Features As Office, But Its Getting There
Google Docs could use a little work in terms of competing with office. Nevertheless, they are easy to use, fast and get the job done. They are just a mild foreshadowing of the office applications on the web we have yet to see. This includes Microsoft’s own Office Live which may save them in this space. -
They Have Created Their Own Browser (Chrome) And Are Starting To Get Significant Market Share
Chrome is a solid browser that destroys Internet Explorer at supporting standards and is even implementing aspects of HTML 5 faster than Firefox (websockets) -
Google, Firefox And Safari Have Vastly Improved Javascript Performance
Javascript performance has recently exploded with the exception of Internet Explorer … big surprise. This will help all those applications that leverage Javascript, which will probably end up powering most of our future applications. Html 5 web workers also allow for multi-threading javascript further closing the gap between javascript performance and non web based languages.
-
HTML5′s Canvas Will Allow Any 2D Interfaces/Fonts To Be On The Web Without Flash, Silverlight Or Any Other Proprietary Plugin
Developers no longer need some fancy authoring software, or user’s with proprietary plugins in order to create great two dimensional interfaces, animations and applications. Get ready for the torrent of canvas powered apps.
-
Google Has Integrated 3D In The Browser
For those that say that you can’t have a truly web based os until you get 3d graphics in the browser, wait no more. There are now many options to get 3d in the browser and more coming. Google’s O3D is simply one of many fast 3d graphics plugins now available. -
They Provide Most Of The Revenue For Firefox
In 2006 Google provided 85% of Mozilla’s revenue through an agreement where Google is the default search provider setting on Firefox. Its been a few years but the contract was extended in 2008 to be valid until 2011. This means that Google has very strong influence over even more of the browser market and can try to convince Mozilla to integrate the technologies it wants to see in the browser. -
Google Is Coming Out With Their Own Operating System.
This is the obvious “massive straw” (… or should I say Wendy’s straw?) for sucking down the market share of Microsoft’s core products. As everything moves on to the web we’ll no longer need that clunky, slow, proprietary behemoth that is Windows. Instead we can hop on our computer as fast as we turn on the tv, navigate to our favorite web applications and get the operating system out of the way. As is pretty evident, there is pretty much nothing a windows application can do that its cloud counterpart can’t. The tools for those cloud applications are disproportionately made by Google. -
Google’s Not Doing The Work, You Are
Google’s not doing the work, or fighting this war. Its simply making the weapons. They’ve recently developed more open source apis and tools for the web than I can shake a stick at. -
They Have Cojones
Finally sick of dealing with the Chinese government’s bull, Google finally took a stand and said it will provide non-censored access to its search engine or leave the country. They did this in response to an attack on their servers where several Chinese dissidents GMail accounts were compromised. I wonder, who would be hacking Google’s servers looking for information on Chinese dissidents? Seems to me we all know what really happened with this one. Thank You, Google, for taking a stand.
Run Microsoft, Run! Google has set up the dominoes … its only a matter of time.
A lot of times developers use REST services or other data feeds that move data using XML. I tried doing this today and noticed the lack of a simple, extremely easy to follow tutorial on how to parse XML using python.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | #import library to do http requests: import urllib2 #import easy to use xml parser called minidom: from xml.dom.minidom import parseString #all these imports are standard on most modern python implementations #download the file: file = urllib2.urlopen('http://www.somedomain.com/somexmlfile.xml') #convert to string: data = file.read() #close file because we dont need it anymore: file.close() #parse the xml you downloaded dom = parseString(data) #retrieve the first xml tag (<tag>data</tag>) that the parser finds with name tagName: xmlTag = dom.getElementsByTagName('tagName')[0].toxml() #strip off the tag (<tag>data</tag> ---> data): xmlData=xmlTag.replace('<tagName>','').replace('</tagName>','') #print out the xml tag and data in this format: <tag>data</tag> print xmlTag #just print the data print xmlData |
There you have it, that is all you need to do to get a value out of a simple web based xml file using python.
If you want to do it from a file you can do it in a similar fashion:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | #import easy to use xml parser called minidom: from xml.dom.minidom import parseString #all these imports are standard on most modern python implementations #open the xml file for reading: file = open('somexmlfile.xml','r') #convert to string: data = file.read() #close file because we dont need it anymore: file.close() #parse the xml you got from the file dom = parseString(data) #retrieve the first xml tag (<tag>data</tag>) that the parser finds with name tagName: xmlTag = dom.getElementsByTagName('tagName')[0].toxml() #strip off the tag (<tag>data</tag> ---> data): xmlData=xmlTag.replace('<tagName>','').replace('</tagName>','') #print out the xml tag and data in this format: <tag>data</tag> print xmlTag #just print the data print xmlData |
And thats all you need to know to do the same with a file on your local machine.
If you have any questions post some comments on this post, thanks.
Today I wanted to try out websockets because I heard that Google Chrome just integrated a preliminary version of it. I discovered that their isn’t a simple straightforward guide for doing this with apache2. Here is a simple guide to getting it working:
Starting with:
- Ubuntu 9.10 (I think it will work with most recent versions of ubuntu and other distributions will work if you change the package manager commands)
- Apache2 installed and working (punch
sudo apt-get install apache2into the terminal, type 127.0.0.1 into the browser to check) - Python 2.6.x installed and working
- Subversion
Step 1: Install mod_python and get it working with apache
- Punch
sudo apt-get install libapache2-mod-pythoninto the terminal - In /etc/apache2/sites-available/default change the part that looks like:
1 2 3 4
Options Indexes FollowSymLinks MultiViews AllowOverride None Order allow,deny allow from allTo:
1 2 3 4 5 6 7
Options Indexes FollowSymLinks MultiViews AllowOverride None Order allow,deny allow from all AddHandler mod_python .py PythonHandler mod_python.publisher PythonDebug On
- Restart apache:
sudo /etc/init.d/apache2 restart - Test it by throwing something like this into a new file test.py in /var/www:
1 2
def index(req): return "Test successful"
- Navigate to localhost/test.py to see if the test is successful
Step 2: Get and Install pywebsocket
- Make sure you have subversion installed and run this in the terminal:
svn checkout http://pywebsocket.googlecode.com/svn/trunk/ pywebsocket-read-only - Now navigate into the pywebsocket-read-only folder where you downloaded it … aka
cd pywebsocket-read-only - Run
sudo python setup.py build - Then
sudo python setup.py install - Make a directory for the handlers … I made mine in my home directory as you can see below
- Now edit /etc/apache2/httpd.conf to include the following:
1 2 3 4 5
PythonPath "sys.path+['/usr/local/lib/python2.6/dist-packages/mod_pywebsocket']" PythonOption mod_pywebsocket.handler_root /home/travis/Desktop/websock_handlers PythonHeaderParserHandler mod_pywebsocket.headerparserhandler
The first path /usr/local/lib/python2.6/dist-packages/mod_pywebsocket is where you installed mod_pywebsocket and should be in a similar location for you.
The second path /home/travis/Desktop/websock_handlers is where I put my handlers directory.
Remember to change the paths to fit your implementation
Step 3: Make some handlers where you said they would be above and you should be all set
The title’s a mouth full but the problem is very interesting and not too hard to break down.
- Runge Kutta is a numerical method technique very usefull for solving ordinary differential equations on computers
- It keeps computational errors to a minimum and keeps your simulations using ordinary differential equations stable.
- Basic explanation of the method I’m using can be found here: http://en.wikipedia.org/wiki/Runge-Kutta_methods
- HTML5 is the new html specification currently being implemented by browsers that allows many new things including:
- Use of canvas objects (2D drawing on the web, see below)
- Websockets (persistent connections between clients and servers)
- Video and Audio
What I’ve done is use a combination of the html canvas tools with the runge kutta technique implemented in javascript to show two masses/objects orbiting eachother. You can do a bunch of neat things with this including processing orbits etc. Check it out:
Javascript code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | $(document).ready(function() { //get a reference to the canvas ctx = $('#canvas')[0].getContext("2d"); ax=100.0; ay=200.0; bx=200.0; by=100.0; adx=1; ady=1; bdx=-1; bdy=-1; time_step=1; setInterval(draw, 10); }); // runge kutta gravitational advance function f(p1,p2,dist){ var g=.05; return g*(1/dist^2)*((p2-p1)/dist); } function draw() { // stop iterating if they collide var dist=distance(ax,ay,bx,by); if(!dist<10){ k1_adx=f(ax,bx,dist); k2_adx=f(ax+time_step/2*k1_adx,bx,dist); k3_adx=f(ax+time_step/2*k2_adx,bx,dist); k4_adx=f(ax+time_step*k3_adx,bx,dist); adx+=time_step*(k1_adx+2*(k2_adx+k3_adx)+k4_adx)/6; k1_ady=f(ay,by,dist); k2_ady=f(ay+time_step/2*k1_ady,by,dist); k3_ady=f(ay+time_step/2*k2_ady,by,dist); k4_ady=f(ay+time_step*k3_ady,by,dist); ady+=time_step*(k1_ady+2*(k2_ady+k3_ady)+k4_ady)/6; k1_bdx=f(bx,ax,dist); k2_bdx=f(bx+time_step/2*k1_bdx,ax,dist); k3_bdx=f(bx+time_step/2*k2_bdx,ax,dist); k4_bdx=f(bx+time_step*k3_bdx,ax,dist); bdx+=time_step*(k1_bdx+2*(k2_bdx+k3_bdx)+k4_bdx)/6; k1_bdy=f(by,ay,dist); k2_bdy=f(by+time_step/2*k1_bdy,ay,dist); k3_bdy=f(by+time_step/2*k2_bdy,ay,dist); k4_bdy=f(by+time_step*k3_bdy,ay,dist); bdy+=time_step*(k1_bdy+2*(k2_bdy+k3_bdy)+k4_bdy)/6; } else{ console.log("stop moving\n"); } // update positions ax += adx; ay += ady; bx += bdx; by += bdy; ctx.clearRect(0,0,1000,800); ctx.beginPath(); ctx.arc(ax, ay, 10, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.arc(bx, by, 10, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); } function distance(x1,y1,x2,y2){ return Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)); } |
