Tag Archives : HowTo


HTML5 Canvas: Smooth, variable width lines with transparency. 2

When making a drawing app with HTML5 canvas, you might come up against the problem of making a smooth, variable width line. Eventually you might find that you can make several calls to ctx.quadraticCurveTo(x,y,xc,yc) and get some kind of effect. If you stroke every 2 or 3 points, then as long as the line width is very small, you won’t notice the jaggedness. Unfortunately, if you try to do this with semi-transparent lines, the effect is truly horrible. To solve this problem, instead of drawing lines, I simply draw very thin shapes, and fill them with a color. This allows for 1) variable thickness and 2) nice transparency. Variable transparency is a problem I haven’t quite figured out yet. It may require composing the shape from individual pixels, which is simply too slow, especially in IE. What I am writing is a drawing App that works with the Wacom Web Plugin, and therefore varies line thickness based on pressure. I would like to vary opacity too, but this seems problematic right now. A solution that may be possible is to fill the shape with a complex gradient, if it is possible to create semi-transparent stops. Here is an image of what the program does so far:   Each line is actually a full shape, with varying degrees of opacity. Thickness and thinness is accomplished with pen pressure from the Wacom Intuous5 tablet. As the line is drawn, a temporary line is shown to the user, when they lift the pen, that line disappears, and a […]

jadczyk_line_eq1

HTML5 Canvas, Pixel Compositing, Transparency, and why all the trivia!

One thing I really hate about new technology are all the early adopters who incessantly post the same trivial examples. They cross link them too. So you can go from one page to the next, and see essentially the same example, just with the bits renamed or moved around. At a certain point, I got it into my head that I wanted to make a quickie HTML5 App that works with my Intuous5 Wacom Pad. Wacom has a web plugin that let’s you get data about pen pressure and so on from the tablet. So I started to work on it, and found the said trivial examples and started mashing something up. Pretty soon it became apparent that if I wanted my lines to look good, I might have to anti-alias them, or so I am trying, I don’t know if it will work, because I just spent the better part of 2 hours looking for a solution to a simple problem. If you look for examples of pixel level manipulation for HTML5 Canvas, you will find the same trivial examples over and over again, which basically say: var id = context.createImageData(1,1); var d = id.data; d[0] = r; // where r is 0…255 … context.putImageData(id,x,y); If you actually want a full trivial example, use google, they abound. The problem with the above is: it replaces the entire pixel, all the way to the background, erasing any colors beneath it. The alpha channel of the pixel doesn’t make it transparent to what was under the […]


Qt C++: Threaded Communication with Artema Hybrid on Linux

Communicating with an Artema Hybrid CC Payment device is actually deceptively simple. I’ve written an application what uses a webkit widget exclusively for the UI display, and so I hook into the Javascript to provide some extra functionality to the app, in this case, reading and writing to/from the Artema Hybrid device. The documentation that I received was in German exclusively, so this took a bit of work to get going, but once you have it down it’s very easy. The device is connected via it’s POS connection Serial->RJ45 connection to a Serial->USB (FTDI chipset) converter that gets plugged into a usb port. You use the standard open, read, write and close functions. The Artema Hybrid constantly communicates with your system, so you’ll need to create a QThread to run in the background reading from the device once every second. The Artema Hybrid will send you an ENQ (0×05) and you need to respond with either an ACK (0×06) or an STX (0×02). With the way that I have it set up, the c++ code does the absolute minimum required which is it reads from the device and emits a dataRead() signal which is connected in Javascript. If I read ENQ, then I emit dataRead(“ENQ”). and in the Javascript function that is connected to the dataRead() signal, I see if the string passed up == ENQ. In the javascript, I have an array of data to write to the device, if that array is empty, I just write back to the Device ACK, otherwise, I […]


Rails will_paginate links to wrong page 4

Well, While setting up a website today I found a bit of retardation in will_paginate. Aside from poor and complicated documentation and an incredible amount of bloat for what amounts to a very simple kind of website component, I found that will_paginate was linking to /?page= on a page that showed in the url bar as /products, so the link should have been /products?page=. So I looked around for a quick fix, and this is the best I got: Revisited: roll your own pagination links with will_paginate and Rails 3 OH MY GAWD. You have to be shitting me. That is hands down the most retarded thing I have ever seen. So, like the little hack monster that I am, I did it faster and easier with less code. If you want to change the pagination links, you can do it with jQuery. $(‘div.pagination a’).each(function () { var url = $(this).attr(‘href’); url = url.replace(‘/’,”); $(this).attr(‘href’,url); }); Why? Because ideally, will_paginate shouldn’t give a shit about the url, that’s not its job, that’s my job, its job is to ADD get parameters, and manage what those parameters should be, anything else is retarded.


Spree Commerce, eBay Trading API, and the eBay Accelerator Toolkit from Intradesys EbatNs

In this bit, I talk about using the EbatNs SDK for the eBay Trading API, to list items from your Spree Commerce store, or really any rails application. Filled with production code examples from an honest to god real live and working spree site that interfaces with the eBay trading API to Add, Revise, and End items, on ebay when they sell in your store, or on your store when they sell on eBay.


HowTo set hostname/domainname on linux 1

If you’ve gotten this error: hostname: Name or service not known when typing hostname -f, then here is a solution. I got this error while trying to install Plesk. I couldn’t find a single clear response, most people spent their time showing how smart they are by explaining how host names work, and what it means to linux, who cares. This is how I fixed the problem, maybe it will help you: This is on Ubuntu 10.4, don’t know how will this will transfer over to other distros, but I don’t imagine it will be much different. $ nano /etc/hosts Add this, replacing mysite with your actual site/domain 127.0.0.1 mysite.com mysite xxx.xxx.xxx.xxx mysite.com $ echo “mysite” > /etc/hostname $ hostname -F /etc/hostname $ domainname -F /etc/hostname


HowTo JavaScript/jQuery place divs in a circle, calculate a cirlce etc. 4

So, I was working with my father, a physicist and mathematician, who wants to have a little math example done in javascript. We haven’t finished the meat and potatoes of the project, but one hurdle was the necessity to place 8 divs in a circle on the page. This is a variation on the Tirgrams and Clifford Algebras demonstration that comes with the Mathmatics software Wolfram. Essentially this displays the trigrams in a clock formation, right to left around a circle. I looked around for a few examples and none of them seemed to work out the way I wanted them too, so I asked him to help and this is what we came up with. //trigrams are a class that contain divs displaying 1 of 8 trigrams. function draw() { var windowWidth = $(window).width(); var windowHeight = $(window).height(); var center = {x: windowWidth / 2 – 100,y: windowHeight / 2}; //100 is the width of the div var doc = 150; // radius var cpos = {x: center.x, y: center.y – doc }; //because the first div needs to be on top for (var i in trigrams) { trigrams[i].css({top: cpos.y, left: cpos.x, position: ‘absolute’});//this method just sets the .css left and top cpos = {x: cpos.x – center.x, y: cpos.y – center.y}; cpos = get_position(cpos.x,cpos.y); cpos.x = center.x + cpos.x; cpos.y = center.y + cpos.y; $(‘body’).append(trigrams[i]); } } function get_position(x,y) { var z = x; x = 1/Math.sqrt(2) * (z – y); y = 1/Math.sqrt(2) * (z + y); return {x: x, y: y}; […]


Tip: Flex/AS3 keyboardEvent listener

If you are writing a flex app, you might get this error TypeError: Error #1009: Cannot access a property or method of a null object reference. if you do, it simply means that you are trying to do something with an object that hasn’t yet been created. If that object is the stage, then you are probably calling an init funtion on creationComplete. If you change this to applicationComplete, you’ll have the stage present. <?xml version=”1.0″ encoding=”utf-8″?> <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” creationComplete=”init();” … >


HowTo Knock it off with crazy MYSQL queries and the qTranslate plugin unistall

We’ve all done it. Either we learn some tricks in MYSQL, or read a cool post about some obscure programming trick you can do with SQL and decide to try it in a pinch on a live database. Just don’t do it. 9 times out of 10 you have access to SSH, and PHP, and you can write a script that will do what you want. You can also “test” it on a small set of inputs and have it echo out the necessary queries to the console instead of sending them to MYSQL. This is called the poor man’s unit test, or poor man’s BDD. Now, on one word press site, before the whole wordpress MU thing, we made the mistake of using qTranslate, well, it’s not evil, it’s just not good, so we wanted to stop using it, however, there’s no real way out of it. Search around and you find this post on their boards DON’T YOU EVEN DARE DO THIS. It’s just bad programming. You will probably hose your database doing this. Instead, let’s look at a more sensible solution, using your favorite scripting language, Ruby or PHP will do fine, I’ll choose PHP. $connection = mysql_connect(‘mysql.yoursite.com’,’user’,’pass’); mysql_select_db(‘yourdb’); $prefix = ‘your_table_prefix’; $res = mysql_query(“select * from {$prefix}posts limit 5″); //limit for testing $wanted_language = ‘en’; function split_text($text,$quicktags = true) { //The following code is kluged from the actual qTranslate Plugin $split_regex = “#(<!–[^-]*–>|\[:[a-z]{2}\])#ism”; $current_language = “”; $result = array(); $blocks = preg_split($split_regex, $text, -1, PREG_SPLIT_NO_EMPTY|PREG_SPLIT_DELIM_CAPTURE); foreach($blocks as $block) { if(preg_match(“#^<!–:([a-z]{2})–>$#ism”, $block, […]