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.

Running SiteMesh on AppEngine

Does SiteMesh work on Google AppEngine (Java preview)?

Short answer: Yes.

Longer answer: Yes. It does. So long as you check 2 things…

1. Upgrade

You need SiteMesh version 2.4.2 or greater. Earlier versions do not support AppEngine.

Download here

2. Disable static file serving

If you want decorators to be applied to static content (e.g. to .html files), the following needs to be added to WEB-INF/appengine-web.xml:

<static-files> 
  <exclude path="**"/> 
</static-files>

This forces the static resources to be served by the Servlet engine, rather than a separate static web-server. Without this, the files served by the static web server will not be decorated.

Happy AppEngining.

ASP.NET MasterPages and SiteMesh

It’s nice to see the SiteMesh approach catching on… ASP.NET 2.0 includes a features called MasterPages, which is a kind of hybrid of SiteMesh and Tiles .

Specifying a master page with ASP.NET is similar to how you do with SiteMesh – a plain HTML page containing common look and feel, with placeholders for the actual content. However with master pages, you need to change the actual pages serving the content to map fragments of content back to the place holders in the master page. This adds yet more noise to typically already noisy ASP.NET pages – a minor downer.

Overall, it’s looking pretty promising. A nice bonus is how the page designer in VS.NET will render your master page when editing content pages, but grey it out. Look.

Anyhoo… I’ll be demonstrating SiteMesh.NET and talking about MasterPages at the Bangalore .NET User Group tomorrow (Thursday) night. If you’re in the area, please drop on by.

StaticMesh first cut

Rune Toalango Johannesen has created a first cut of StaticMesh – an offline version of SiteMesh for building static web-sites.

Like SiteMesh, it takes a plain HTML document (content) and an HTML decorator (presentation) to generate some pretty content as its output.

Unlike SiteMesh, it does not require a runtime Servlet engine to do this. It gets it content and decorators from files and outputs to more files.

You can run it as a standalone application, embed it in existing apps or use Ant to invoke it.

The Ant task usage is as simple as you’d expect:





Content pages are plain old HTML. Anything can generate these (even MS Word!).

Decorators are also plain HTML with lots of prettyness. SiteMesh parses the content pages, which are made available to the decorator using Velocity variables such as $title and $body. Velocity is very friendly and doesn’t confuse web-development tools such as DreamWeaver.