Category: javascript

Publishing to Npm on Git commit using Github Hooks and Travis

Posted on by John McLear

Travis-CI can auto “npm publish” your git repo to npmjs, this means that whenever you commit to your github repository your software is always updated and available to users via npm update. This should also work with pull requests so no need to jump onto CLI After a merge, just hit merge and after a few minutes / hours you should see your application updated on npmjs.

Step 1.

Create Travis-CI account, ideally signing in with your github account.

Step 2.

Find the repository you want to auto publish on the Travis Web interface (under your profile) and click Enable.

Step 3.

Install Ruby Gems

sudo apt-get install rubygems

Step 4.

Install travis CLI gem and json gem

sudo gem install json
gem install travis

Step 5.

Create a .travis.yml file in the root of your repository that looks like this (replacing your email)

language: node_js
deploy:
  api_key:
  email: your@emailhere.com
  provider: npm

Step 6.

Get your npmjs api key and copy it into the clip board (Copy the bit after the _auth =)

cat ~/.npmrc | grep _auth

Step 7.

Run the Travis CI secret key generator

travis encrypt --add deploy.api_key

When prompted paste your APIKey then hit Control D, don’t add an additional line break or enter.

Step 8.

Add, Commit and Push the new .travis.yml file, this will trigger a build on Travis

git add .travis.yml && git commit -m "Travis auto publish config" && git push

Step 9.

Head over to your Travis page and wait for your build to begin, if it doesn’t it’s likely you didn’t push correctly up to github.

Doing lots of packages?

You will only need to complete steps 5 to 9 on future packages (assuming you enabled them on travis)

getusermedia screenshot wrong size

Posted on by John McLear

The drawImage API is really poorly documented and has a confusing way of handling arguments. Because of this sometimes if you capture a screenshot from your webcam the capture / snapshot will be drawn with the wrong dimensions. To solve this you will need to redraw your canvas to the same size as your video input on capture and also specify the width/height on capture.

This tripped me up for a few minutes so I figured it was worth documenting..

<!DOCTYPE html>
<body style="margin:0;padding:0;font-family:Arial">
<video id="video" autoplay width=100%></video>
<img id="snapshot" src="">
<canvas id="canvas" style="display:none;"></canvas>

<script type="text/javascript">
var $ = function(id){return document.getElementById(id)}; // lazy dev is lazy
var localMediaStream = null;
var video = $('video'); // video stream
var canvas = $('canvas'); // invisible canvas
var snapshot = $('snapshot'); // output image
var ctx = canvas.getContext('2d');

// Start Video Stream
navigator.getUserMedia({video: true}, function(stream) {
  video.src = window.URL.createObjectURL(stream);
  localMediaStream = stream;
}, function(){
   alert("Enable and Allow your camera");
});

function snapshot() {
  if (localMediaStream) {
    canvas.width = video.offsetWidth; // update the canvas width and height
    canvas.height = video.offsetHeight;
    ctx.drawImage(video, 0, 0, video.offsetWidth, video.offsetHeight); // draw the captured content onto a canvas
    snapshot.src = canvas.toDataURL('image/png');
    video.style.display = "none";
  }
}
</script>
</body>
</html>

To test go to your development console and type “snapshot()”

Monitoring a Wind Turbine with a Raspberry Pi

Posted on by John McLear

saphonian_turbine_bladeless

As a weekend project I wanted to receive an email if my wind turbine wasn’t generating power when it should. I didn’t want to spend loads of money on fancy new equipment so I hacked it together mostly with equipment I had lying about.

Requirements

– Wind Turbine or Solar Panel (obviously)
– Bridge rectifier (converts the AC from the turbine to DC)
– Some sort of voltage regulator (10-24v –> 12v) (or to 5v and skip below)
– Car cigarette lighter mobile phone charger (£5)
– Raspberry Pi (£35)
– Delta Sigma ADC (£25)
– USB Cable (£1)
– 1 Hour free
– Met Office API Key (free — UK Only)

Steps

– Wire up the turbine and bridge rectifier
– Pop the bridge rectifier into the voltage regulator
– Put the regulated voltage through the car voltage adapter, this will give you 5v out
– Wire the 5v from the turbine into channel 0 on the Delta Sigma
– Pop the ADC into the Pi, follow this guide for setting up the software.

How it works

– The Pi asks the Met Office what the current wind speed is.
– If the wind speed is above a threshold then the Pi checks the turbine
– If the turbine isn’t generating 5v then email me.

Next Steps

– Use Machine Learning to find a better balance on announcements
– Rate limit announcements.
– Measure integer of turbine output instead of boolean state.
– Wire the Owl energy monitor up to the AC output of the grid tie inverter.
– Store value of state in something like Graphite or using Nagios for announcements

Get Etherpad Pad contents in Javascript

Posted on by John McLear 
function getElementByIdInFrames(id, base) {
  var el;
  if(el = base.document.getElementById(id)) {
    return el;
  }

  for(var i = 0, len = base.frames.length; i < len; i++) {
    if(el = getElementByIdInFrames(id, base.frames[i])) {
      return el;
    }
  }
}
getElementByIdInFrames("innerdocbody", window).innerHTML;

This means you can also do…

getElementByIdInFrames("innerdocbody", window).innerHTML = "Superducky";

And if you want to use jQuery a one liner will sort you out..

console.log($('iframe[name="ace_outer"]').contents().find('iframe').contents().find("#innerdocbody"));

NOTE: Due to a change in the jQuery API a . after iframe was removed — 10/02/2013

Means you can do..

$('iframe[name="ace_outer"]').contents().find('iframe').contents().find("#innerdocbody").html("Superducky");

Thanks to Mark Fisher for the jQuery example