Posts Tagged ‘ Web ’

Resistor color codes – now in DuckDuckGo search results

Remember a few weeks back I announced resisto.rs, a no-frills resistor color code calculator?

Welllll, if you happen to be a user of DuckDuckGo, it’s now even easier. See the resistor colors directly in your search results!

 

Image

Try it out at DuckDuckGo.

And thanks to DuckDuckGo for making it so easy to extend your search engine.
Here’s the code.

resisto.rs

I never have a resistor color chart handy when I need one. So I built a little web-app. Fast loading, simple, mobile friendly, and to the point.

http://resisto.rs/

resisto.rs

Updated website for Smoothie Charts

Smoothie Charts has a new website. Rather than add to it, I ended up taking stuff out. It’s simple and to the point. It also works well on mobile / tablets.

http://smoothiecharts.org/

Image

A 3D WebGL GCode viewer, for understanding 3D printers

Towards the end of 2011, I built a 3D printer (RepRap Prusa Mendel). It took 6 weeks of evenings and weekends.

Here it is, printing an Octocat I found on Thingiverse:

Image

Image

Image

To help understand the model better, I created a WebGL based tool that can view GCode (the set of movement instructions sent to the printer).

Image

It’s built on MrDoob’s (excellent) three.js library, which brings 3D programming to mortals.

If you work with .gcode files, try it out:

Code is over on GitHub:

And here’s a full set of photos journaling the building of the printer, and some things I’ve printed with it:

Webbit + SiteMesh = …. well, Webbit and SiteMesh

SiteMesh is now available for Webbit Server:

Tutorial here: https://github.com/joewalnes/webbit-sitemesh

A Simple Good Looking Context Menu, for jQuery

Yes, there are loads of context menu plugins already. But they require a fair amount of work to make them look good.

This one is easy to use, small, and looks good.

Demo

Features

  • Tiny library. Only dependency is jQuery.
  • Simple API.
  • Looks good out of the box, with no additional tweaking.
  • Designed to look and behave like a standard Windows context menu.
  • There’s so little code, it should be easy to add your own custom features.

The menu looks like this:

Installation

Include the files jquery.contextmenu.css and jquery.contextmenu.js in your page <head>. You also need jQuery. It is recommended that you use the HTML 5 DOCTYPE to ensure rendering consistency.

<!DOCTYPE html>
<html>
  <head>
    <script src="jquery-1.6.2.min.js"></script>
    <script src="jquery.contextmenu.js"></script>
    <link rel="stylesheet" href="jquery.contextmenu.css">
    ... rest of your stuff ...

You can get the files from here:

Usage

The plugin introduces a contextPopup() method to the jQuery object.

Assuming you have an element that you’d like to bind a context menu to:

<div id="mythingy">hello</div> 

You can wire up a context menu like this:

$('#mythingy').contextPopup({
  title: 'My Popup Menu', 
  items: [ 
    { label:'Some Item',
      icon:'icons/shopping-basket.png',
      action:function() { alert('clicked 1') } }, 
    { label:'Another Thing', 
      icon:'icons/receipt-text.png', 
      action:function() { alert('clicked 2') } },
    // null can be used to add a separator to the menu items
    null,
    { label:'Blah Blah', 
      icon:'icons/book-open-list.png', 
      action:function() { alert('clicked 3') } }
  ]});

Icons

The icons should be 16×16 pixels. I recommend the Fugue icon set (shadowless).

Go get it

It’s over on GitHub:

Introducing Smoothie Charts

There’s tons of great JavaScript charting libraries out there. Too many to choose from. I’ve just made it worse by adding yet another to the mix.

Before I go on, I want to balance karma a little – if you’re looking for a JavaScript charting library, just use Flot. I don’t know anything about your requirements, but I like my chances – everyone loves Flot (including me). It’s small, simple, great looking and flexible.

So why another library? Well, I had a very specific problem… I want to show real time streaming data pushed over a WebSocket. Although many of the charting libraries allow you to dynamically update data, none have really been optimized for a constant stream of data. I tried many (seriously, at least 40 libraries) and the constant updates just looked too jerky.

So Smoothie Charts was born. It’s not big, and it’s not clever. And it only works on Chrome and Safari. And it doesn’t support legends. Or pie-charts. In fact, it’s inferior in virtually every way to a library like Flot. But, it’s very good at displaying streaming data.

I use it for building web dashboards monitoring active system load (that look something like this).

Use it, hack on it, and contribute back.