Monthly Archives: December 2016

Project Boxes

boxestmpCCAFor those few of us left in the world who don’t have 3d printers… boxes for our projects are always an issue…  I’ve decided I want to use DIN rail enclosures because in Spain, the large household Din rail mains boxes are dirt cheap – just need some enclosures for power supplies and SBCs and ESP8266 boards – and I hit this by accident..

Some of these are DIRT cheap – like a tenner for 5 boxes… I’m still wading through. So the question is – do others have links to similarly inexpensive boxes? 

OH! So there I was struggling to find power supplies that would fit in the box alongside my Pi (I ended up with orange boxes – not ideal, but cheap) – and I found this….. 2amps – just the job!!!!

Facebooktwittergoogle_pluspinterestlinkedin

More Dashboard Buttons

Old buttonsThis is about creating buttons for Node-Red Dashboard. If you’re looking in for the first time – this is what Node-Red Dashboard buttons currently look like. The light blue background colour can be changed as can the text colour but that’s about it. And when you press on them, there is some marginal change but not very distinctive.

New buttonsIf you read the previous article on buttons you will know that things are much better now thanks to the use of templates – and that using a template for a button, you can achieve the same functionality but with better colouring and shaping options – rounded corners for example. Of course, having played with this for a few days, the novelty of coloured buttons on my Node-Red Dashboard soon faded and I yearned for something a little more modern.

Ignore the knobs – they belong to another blog entry – the three buttons on the top – the rightmost one (blue) is as we have up to now – it is blue and when pressed flashes yellow. It also vibrates on a mobile phone – all of that was discussed in a previous entry. The two on the left however are new and use background images. They still flash when pressed, they still vibrate – but the image is up to you – the images you see on these were not made to any particular size – maybe 50mm square – in PowerPoint (without the text) and saved as PNG images. The pattern is a bog-standard PowerPoint gradient so lots of nice colours already done for you – just right-click save the rectangle from PowerPoint or wherever.

The trick to maintaining compatibility then when pressing a button is to store away whatever the background colour AND image is, do the button press stuff then restore both the background image and colour. This works a treat.

I would have LIKED to do the background image definition as a CLASS but for some reason that would not work – so it is a style – if anyone can correct this I’d much rather add class “greenish” to the button than a style.

Here is my styling that goes into a template all on it’s own – and an example button which again goes into a template.

<style>
  .filled { 
      height: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
  }
  .nr-dashboard-template {
      padding: 0;
      margin: 0;
      overflow-x: hidden;
      overflow-y: hidden;
  }
  .rounded {
  border-radius: 20% 20% 20% 20%;
}
  .round {
  border-radius: 100% 100% 100% 100%;
}
   .bigfont {
  font-size: 18px;
}
   .smallfont {
  font-size: 12px;
}

</style>

<script>
    $('.vibrate').on('click', function() {
      navigator.vibrate(100);
    });
    
    function restore_bg(x,y) {
                $(this).css("background-color", x);
                $(this).css("background-image", y);
                
        };

    $('.touched').on('mousedown', function() {

        var x= $(this).css("background-color");
        var y= $(this).css("background-image");  
        $(this).css("background-image", "");  
        $(this).css("background-color", "yellow");
        
        setTimeout(restore_bg.bind(this,x,y),200);
        navigator.vibrate(80);
    });
</script>

and a button - if you want roundish use class "rounded" - if you want round use class "round".

<md-button 
    class="alerted filled touched bigfont rounded vibrate" 
    style="background-image: url('/myimages/orangeish.png'); background-size: 100% 100%; background-repeat: no-repeat;"
    ng-click="send({payload: 'Red Button'})"> 
    bg-image<br/>button
</md-button> 

Facebooktwittergoogle_pluspinterestlinkedin

The Ongoing Knob

jQuery KnobI refer you to this article if you’re new in here - http://tech.scargill.net/more-dashboard-goodness/ – we’ve been having a lively discussion and lots of exciting new possibilities coming out of a chance discovery of the JQUERY KNOB and what is now our ability to integrate that with Node-Red. The purpose of this is to increase the usability of the web-based Node-Red Dashboard by introducing new and useful controls.

I won’t go through the history here – it’s all in that blog entry which you should read first before getting into discussion here.

So now we can create a touch/mouse-driven knob for Node-Red Dashboard, in a template – and we can replicate as many of these as we like in a tab. Many thanks to those who helped get this off the ground.

But once the novelty wears off, we find that we need more work on this for some scenarios. The knob can be coloured and it’s shape and size can be changed but what about that value in the middle. Early attempts at adding a “%” sign or similar failed miserably – until I actually started looking at the docs for the knob – at which point some things became clear.

I can think of two immediate modifications to the basic knob which come in as useful – the first is the addition of a percentage or degrees character – the second is slightly more complicated. I want to use the knob to show a time in hours and minutes and to let me alter that – worse I want the time to increment in 15 minute intervals – giving me back a value in minutes while SHOWING HH:MM -  so - how to do that:

It turns out to be surprisingly easy if you’ll bear with me.

So firstly the easy one – setting limits and steps can all be done in the input definition.

<input  id="jqueryknob{{$id}}"
        class="cDial1"
        data-width="98%"
        data-height="98%" 
        data-cursor=true
        data-thickness=.25
        data-linecap=round
        data-fgColor="#66CC66"
        data-bgColor="#CCAAAA"
        data-angleOffset=-125
        data-angleArc=250
        data-min="0"
        data-max="1440"
        data-step="15"

        value="{{msg.payload ?  msg.payload : 0}}"
>

If you refer back to the original article – the input definition is in there and I’ve simply lifted that and added 3 more lines – so now we can have any start and any end values and a step – in my case the number of minutes in the day. So how do we get from THAT to the display above right.

It turns out there is an extra bit we can shove into the code… a snippet from the original blog follows with something new – two examples here.

$("#jqueryknob" + scope.$id).knob({
    'format': function (value) {
        return value + ‘%’;
    },
               
    change : function (value) {
    },
    release : function (value) {
        if(scope.msgSend)scope.sendData(value);
    },

The above adds a percentage sign to the display WITHOUT affecting the actual output from our template – you could of course add any other symbol. The example below though looking more complex is just formatting to give me my HH:MM format – again without affecting the output of the template which in this case is in minutes.

 

$("#jqueryknob" + scope.$id).knob({
   'format': function (value) {
        return ("0" + (Math.floor( value / 60))).slice(-2) + ":" + ("0" + (value % 60)).slice(-2);
    },
               
    change : function (value) {
    },
    release : function (value) {
        if(scope.msgSend)scope.sendData(value);
    },

So that one addition above allows you to control what you see in the text of the knob without affecting the actual value.

I suspect there is far more to be gained from further examination of this widget. ANGULAR also has a knob - https://radmie.github.io/ng-knob/ and that has some nice features including subtitles. Perhaps we can look at this one sometime!

For now here is the latest update of the actual code used in my test knob – set the template to 6*6. I’ve removed a line that wasn’t doing anything and changed msg.payload to msg so in future we might add more stuff in there (thanks Dave).

Don’t forget to create a template with the CSS in it – and make sure your template tickbox settings are like this.

 

Template tick-box settings 

Enjoy.

Facebooktwittergoogle_pluspinterestlinkedin

The Orange Pi Zero

Those of you who read my stuff will know that I’ve never been impressed by the Orange Pi boards – the utter lack of communication from the company really is stunning and initially the boards used to get very hot – but then came Armbian and all that changed – third party support and lots of info.  With that in mind I’ve been looking forward to getting an Orange Pi Zero.

Orange Pi Zero

This is not a high end board but it REALLY is cheap so I had to see it working. Well, I’ve started and up to now I’m not stunningly impressed.  But whether it is the BOARD or the SOFTWARE I’m not yet sure. I installed DIET PI – which has worked so well elsewhere and in this case you really are counting on the operating system working from day one because there is no video output. I loaded up the DietPi software and there is a text file on the SD you can go in and setup WIFI etc. This board has both Ethernet and WIFI but I wanted to go in at the deep end. Well, I failed – no-where on the network could we find the board despite setting it up correctly. Ultimately I chickened out and plugged in an Ethernet lead (there’s a long story of broken leads here but we’ll put that to one side).

The board connected up no problem – I went into the setup and set up the WIFI – it found my access point and connected. I changed IP address – voila.  Rebooted – no sign of WIFI (sigh).  I had several attempts at this with a clean SD each time and for now I’ve given up.

My script loaded without apparent issue, on the Ethernet connection.  The thing is – I see these cheap boards as upmarket ESP8266s, i.e. peripherals for dotting around the house – and so the WIFI absolutely must work.

If you’ve read some recent posts I’ve been playing with a VM version of Debian that loads my script up in 18 minutes – well, the Orange Pi Zero isn’t quite like that – it’s nearly done now and at 1 hr 20 minutes – not stunningly fast but no worse than a Raspberry Pi 2.

Now bear in mind when I did a review of the WIFI only FriendlyArm NanoPi Air I commented how much faster the eMMC was – well of course you don’t have that option here. This is a nice, cheap board, cheaper than the Air but I would not want to swap.

Well, the script all worked, no problem – nice little board but the WIFI just would not work reliably – WIFI  is necessary so that it can be used as a place-anywhere peripheral – I remain convinced the better bet is the FriendlyArm product UNLESS you’re planning to use hardwired.

And that started off a WHOLE conversation in here which led to trying XENIAL (Armbian version). After some messing around as the very latest version did not have WIFI installed AT ALL by the look of it.

I also noted that the domain name was not accessible from Windows – as it would have been on a Debian system (Samba) – a line has now been added to the script to ensure that HOSTS is read first.

PHPSYSINFO needed a slight mod – that was provided by Mr Shark and that is backward compatible.

As things stand – I cannot recommend this board for anyone wanting to use it with WIFI.  If you are daft enough to go to the ATTROCIOUS Orange Pi site – you’ll find links for the software – November is the latest at the time of writing and it is irrelevant because there are two links – a BAIDU link in Chinese – and a Google Drive link which AS USUAL is utterly DEAD. So you can go and get DietPI – I could not get the WIFI to work reliably – or grab the latest Armbian – and I could not get the WIFI to work at ALL.  In both cases I’ve now written back to their forums with requests for help and logs in the case of Armbian. Time will tell.

Meanwhile – GPIO for these boards has taken a turn for the better with node-red-contrib-opi-gpio – direct control over GPIO pins from Node-Red – not anything fancy mind you, just input and output – the package is set up for the Orange Pi, not the ZERO so I found some pin differences but if you refer to the actual port bit PA0 etc then this works a treat. That’s a great step forward. Follow the instructions here to install including the additional setup.

https://www.npmjs.com/package/node-red-contrib-opi-gpio

GPIO Orange Pi Zero Node-Red

I also tried this on the NanoPi M3 – sadly – no.

Facebooktwittergoogle_pluspinterestlinkedin

More from Sonoff

Sonoff Mains PlugToday I got a couple of new(ish) gadgets from Sonoff – one being a UK version of their WIFI mains adaptor. So the point of this if you don’t know Sonoff is that their stuff is solid and inexpensive – not two words you normally find in the same sentence. The mains adaptor is absolutely solid – and when it powers on it has a nice coloured ring light to let you know it is working.  Sonoff have their own software for this but as it is ESP8266-based I usually put my own in or use Arendst’s Sonoff-MQTT-OTA-Arduino software – which up to now is proving reliable and has one advantage over my own – it is smaller and fits into the Sonoff devices without replacing the FLASH (well, it has two advantages – it supports the Amazon Echo – but as I use HA-Bridge to do that, the subject is moot).

So – I opened the unit up and Sonoff have even now kindly put labelling on the 4-hole connector inside for programming – very nice of them.

What can I say, Sonoff SCit worked first time, I can fire off MQTT commands to turn the thing on and off and can override that with the button on the front. Most other similar products I’ve seen are either proprietary, expensive or generally naff – this is GOOD and no secrets – you can get diagrams, change software and it works well.  Like the other Sonoff mains control boxes, good product – good price ($12.86 plus whatever post to get to your location – but even then – compare that to B&Q rip-offs). Lovely.

And with that, I’ll move onto the Sonoff SC – the unit you see on the right. No it is not a loudspeaker. To quote the company - Sonoff SC is an ESP8266 based WiFi environmental monitor device. It detects current temperature, humidity, light intensity, air quality, and even sound levels, and directly send realtime data to iOS/Android APP EWeLink

Sonoff SCAnd yes, I believe there is some source out there but this one is likely to be a little more difficult to DIY as it contains both an ESP8266 and an Atmel 328 – no doubt for two things that need A/D where the ESP8266 has only one analog input. So this gadget contains a SHARP Dust sensor, a DHT11 (I know, the crappy one) temperature and humidity sensor, a light sensor (a simple ORP-12) and a microphone – so it is a test-everything unit.  It runs off 5v.

So we ran it up this afternoon – there’s a nice phone app and it only takes 5 minutes to setup – I’m trying to think where you would use this – maybe in an old-folks home you were running just to keep an eye on everything?

Sonoff SCFor me it fails in that there’s no MQTT connection so unless you use their App the use is limited but they DO claim it is “hacker friendly” so when someone goes to the bother of making a complete replacement software – with MQTT and the option to replace the hated DHT-11 with a marginally more expensive DHT-22 – I may just take more of an interest.

Sonoff SCThe thing is you have light sensing in the range of “dusky, normal and bright” – I’m not sure what use that is – had they made this more than $19 they could have used one of those little light sensors that gives exact LUX out for visible and also measures humidity and temperature accurately.

As it is they’ve used an ORP-12 device which is a bit basic.  Still – if I made a super-duper one and had a 3d printed case made, it would look like something out of Dr Who so hats off to them for making this at a price in a sensible case. It is almost worth getting one for the case to then gut it and do your own thing! Recently in the blog we’ve covered all of these sensor scenarios except for the dust sensing and there’s plenty of doc on that.  Worth a second glance.

Depending on the device you are using you can click on any of these images to get larger ones.

Update 12/JAN/2017:  Reader Jayhttp://tinkerman.cat/sonoff-sc-with-mqtt-and-domoticz-support/ pointed me to this link which gives the oppotunity to replace the lacklustre DHT11 with a DHT22 on the Sonoff SC and to upgrade the software - nicely written article.  And secondly - just to say I now have three of the mains UK sockets in full time use and not a hitch - they work perfectly using this software (latest version as of a couple of weeks ago - but note at the time of writing he's just today updated the software again).

Facebooktwittergoogle_pluspinterestlinkedin

Merry Christmas

Some of you may be heading off home to see family so we might not hear from you for a little while. Others will be settling down at home for a Christmas of gadgets…

Christmas in Bellingham  - front of our house

Either way, by Christmas there’s a good chance there will be 6,000 of you signed up to this blog and 5,000 on Facebook – so I’ll take this opportunity in both cases (sorry if you’re on both) to wish you all a very Merry Christmas and a Happy New Year.  I’ll be around for most but not all of it.

Thanks for looking in – and if you’ve not logged in – now’s a good time.

Regards

 

Pete.

Facebooktwittergoogle_pluspinterestlinkedin

ODroid C2

Odroid C2You’ll see in an earlier post a little picture of the Odroid C2 and following on from my last blog, I’ve had tremendous fun playing with the Virtual Debian – i.e. DietPi – and I just happened to be looking at the Dietpi site (which is very nice incidentally) and I noted a board I recently acquired – the Odroid C2.  I’m getting quite excited about this – read on…

As you click on the various boards you see comparisons of performance of the various boards including the Raspberry Pi, Orange Pi and others – most of which I have – AND the C2 – and the latter appears to out on top by some way and in some cases by a LONG way (and as you’ll see later it is not expensive)!

  • Amlogic ARM® Cortex®-A53(ARMv8) 1.5Ghz quad core CPUs
  • Mali™-450 GPU (3 Pixel-processors + 2 Vertex shader processors)
  • 2Gbyte DDR3 SDRAM
  • Gigabit Ethernet
  • HDMI 2.0 4K/60Hz display
  • H.265 4K/60FPS and H.264 4K/30FPS capable VPU
  • 40pin GPIOs + 7pin I2S
  • eMMC5.0 HS400 Flash Storage slot / UHS-1 SDR50 MicroSD Card slot
  • USB 2.0 Host x 4, USB OTG x 1 (power + data capable)
  • Infrared(IR) Receiver
  • Ubuntu 16.04 or Android 5.1 Lollipop based on Kernel 3.14LTS (and of course as you’ll see – DIETPI – Debian !!)

Well, I had to give that a shot! They mention it is very fast and part of that will be down to eMMC and fast Ethernet – not to mention the 2GB of RAM – well, I don’t have the eMMC module – but I DO have a new, fast Samsung Ovo+ SD. So – I grabbed the DietPi  image.

I ran my new PI script to get the Pi user in there and then the main script – I linked to it in the last post. I can only say the script ran FAST – way faster than a Pi and instead of up to an hour, sometimes more, it was all done in just under 20minutes. Not as fast as the VirtualBox version but faster than my other SBCs.

But I noted – the GPIO routines (WiringOP) didn’t load and I noticed there was no GIT installed – I would not have noticed that in the VirtualBox versions as I didn’t install GPIO.

After the Odroid rebooted – I checked to see if everything worked… and most of it did – VERY quickly.

However – once again – no Webmin, though I’d not noticed any issued – did not load!

I decided to tackle the GPIO first – and installed GIT and tried again.

MAKE not found….

Turns out there was a broken repository – the forum for DietPi had a solution which any time soon should end up on their website.

Then I could not get the time synced  - you could not make this off – the main pool servers were out of action…

All of that will be history by the time you read this I would think. I have another way to grab Webmin and that worked – I’ve altered my script accordingly.

So the upshot of this is that everything appears to work with the Odroid C2 and it is FAST even without eMMC. Now, some of the prices I’ve seen on Ebay are a bit OTT but the price seems reasonable if you go directly to HardKernel at $40 plus postage wherever you are.

In the process of doing the install I noted that there is a specific install of WiringPi for the Odroid C2

git clone https://github.com/hardkernel/wiringPi.git
cd wiringPi
./build
sudo chmod a+s /usr/local/bin/gpio

I’ve included that as an option in my script (I really do need a menu system) and if installed, it is indeed possible for the following to work… taking GPIO 1 as an example

gpio mode  1 out

gpio write 1 1

gpio write 1 0

There are two PWM pins (33 and 19) on the C2 according to this documentation however in the “gpio readall” I’m not actually seeing those numbers appear so at this point – without getting into specific addresses etc. and sticking with the simple GPIO utility you can call from, say, Node-Red, I’m not sure how to access them.  Attempts to do any PWM just return “Unsupport function on on ODROD-C2 model”. Looks as if there are a couple of analog inputs as well, yet to be tested. By the look of it, hardware SPI is not supported.

This could still end up as my main Node-Red controller!

GPIO pinout for Odroid C2

Facebooktwittergoogle_pluspinterestlinkedin

Virtual Pi

Every time I screw up badly, I end up having to go through to the house, swap SDs on the Raspberry Pi and start another backup. AND I’m told by our friend from Raspbian that I should not be doing this as live backups are asking for problems. Now, to be fair I’ve never HAD A problem with the Raspberry Pi SD copy program but that’s not to say I won’t – and of course none of the other Pi-like machines I own have such a simple backup facility (don’t go giving me a lecture on complex Linux backups please).

tmpD42CAnd so it was that one of our readers (MrShark) put me onto a VPS (virtual Private Server) facility this week – for less than £3 a month you can have your own virtual Debian. I took this up for a trial as I’d had immense difficulty in the past with Virtual PC etc. on my computer due to making the mistake of installing Docker.  So I’ve been playing over the weekend with this VPS service called OVH. Now, their service works really, really well - but the customer service is virtually non-existent as far as I can tell.  It was with that in mind that I grabbed some coffee today and sat down to clean up my Windows 10 PC and install VirtualBox.

I followed the instructions and downloaded a virgin Debian – expecting the same kind of experience that I got out of OVH or one of my little SBCs (I should say at this point that my script – which installs the kitchen sink – works absolutely perfectly on OVH).  Up came a fully-laden Debian complete with graphical desktop and all the trimmings… I went into a terminal and the first thing that came to mind was “sudo apt-get update”.  Well, that’s what you do, isn’t it.

Nope. No “sudo” – never heard of it, mate. This came as something of a shock. Anyway turns out it wasn’t installed, I sorted that and did an update. After a file edit to stop it looking for repositories on a DVD that the VM doesn’t have – I was away with a full update and upgrade. Dare I try my script.

tmpE86DWell, that failed at the first hurdle – virtually every one of the general pre-requisites and utilities I normally install failed miserably. So much for Linux not having the version issues Windows (supposedly) does! Debian isn’t even the same as Debian!

It was at that point of utter despair that my pal Jonathan called in on Skype as if sensing I was getting annoyed. No – you don’t want to do it like that, he said,  there’s a ready-built DIETPI image for VirtualBox.

And so there was.

I grabbed the image from the DIETPI website, loaded it in, created a PI user (I’ve a short script for that, too)  and loaded up my script. NOT A SINGLE ERROR – it’s not even this clean on a proper PI !!! Mosquito, Node-Red, my start-up page, MQTT, SQLITE – it’s all there!!

I’ve done a backup of the basic Debian and a backup of Debian plus all my tools and toys – and now I’m ready to take on the world. For those who don’t know, VirtualBox, DietPi and my script are all available on the web and all available for free. What a great way to test stuff out, now I can make changes to the script fearlessly (my ain is to make it a lot “cleaner” – without all the messages you can’t do anything about), safe in the knowledge that if the whole thing explodes, I’m a button-push away from starting again and it’s all a LOT faster than a PI on my Windows 10 machine (which was super fast about 4 years ago).

Can’t QUITE see how to get the USB emulation going so I can mess with SDs, but no doubt someone reading in here will have figured that out. If you do try out my script – make sure you tell it that this is NOT a real Pi – and don’t try adding GPIO….

DietPi on VirtualBox

Facebooktwittergoogle_pluspinterestlinkedin

More Dashboard Goodness

tmp4ECCLast week, I got as far as some new buttons on Node-Red Dashboard along with fancy colour change and vibrate - you'll see some new buttons if you head off back to that entry.

So, what’s those  round things with numbers in them?  No,  not more gauges – but CONTROLS – a finger control for DIY Nest Displays! Well, several of them in fact.

Thanks to lots of work and some great feedback you'll see in here not to mention a little inspiration, we can now both input to the knob and output from it. This has SO much potential (not this example but the general idea - we can use most JQUERY controls in here ). We have had SO many issues along the way, interaction between knobs, not saving on refresh etc… lots of people have contributed – including ideas from the guys at IBM  -and today, reader Jorgen Antonsen provided the last piece of the puzzle.

So here is the library – demos in there – I picked the second demo – and I really think it is a winner. Here’s what we did:

In node-red settings.js I have a directory I can put stuff in like Javascript and css that won’t get wiped on an update of the dashboard.

httpStatic: '/home/pi/.node-red/public',

Now… you could create in there, say, folders for js and css like I did originally – but that would be a mistake – because they’ll conflict with the directories that Node-Red itself uses… so I called mine myjs and mycss.

Looking at the source of that page link I sent you, you’ll find a link to jquery.knob.min.js – grab that – and put it in the myjs folder. Now you have it available.

Here is what I put in my test page to bring up the nice (now simplified) controls you see above.  The second template is merely a duplicate of the first and so on – the ability to SCALE to the size of the template is new – and I’ve used 98% instead of 100% in the code because though 100% worked here in the demo – on my phone one of the knobs resized at 100%  - now it is perfect. I’d like to hear from anyone who gets a different result.

tmp7998

<script src="/myjs/jquery.knob.min.js"></script>

<script>
    (function(scope){
        scope.$watch('msg', function(data) {
            scope.msgSend = false;
            $("#jqueryknob" + scope.$id).val(data.payload);
            $("#jqueryknob" + scope.$id).change();
            scope.msgSend = true;
        });
        scope.msgSend = true;
        scope.value = 0;
        scope.sendData = function(data){scope.send({payload:data})};   
        scope.init= function(){
            $("#jqueryknob" + scope.$id).knob({
                change : function (value) {
                    //console.log("change: " + value);
                },
                release : function (value) { 
                    if(scope.msgSend)scope.sendData(value);
                },
                cancel : function () {
                },
                draw : function () { }
            }); 
        }
        //Wait for angular to assign id to DOM element
        setTimeout(function(){
            scope.init();
        },200)
    })(scope);
     
</script>

<input  id="jqueryknob{{$id}}"
        class="cDial1" 
        data-width="98%" 
        data-height="98%"  
        data-cursor=true 
        data-thickness=.4
        data-linecap=round
        value="{{msg.payload ?  msg.payload : 0}}"
>

 

So - if you SET either of these controls by using the mouse/finger,  they will set outputs... and survive a refresh. Spot on.

Manual injection will update the display without sending anything out of the template – while finger/mouse control of the knob will send output values out of the node. This is the expected behaviour.

Variations on these controls can be used to set temperature, time bands (see the other examples) and so much more and once we all understand how this is working – using other JQUERY controls should be easy.

Now – you see in the code above where it says data width and height 100% – that causes issues for the standard template – but as we’ve already cleared out all the padding from the template – why not go the whole hog and get rid of any scroll bars… Beware of altering data-thickness – that is what causes a problem if too thick (just make the item a little smaller).

This needs to go into a style – in a template BEFORE our knobs..

.nr-dashboard-template {
padding: 0;
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
}

I’ve manually altered some colours – but I’m looking forward to someone coming up with a means to separately inject msg.fsColour so we can dynamically change this depending on value (thermostats!)

Been a good day, really.

more buttonsComing up next – controlling the colour!

Meanwhile,  if you want MORE buttons – check out this flow to put into Node-Red… on a page all on it’s own I suggest.

https://bitbucket.org/snippets/scargill/XXGB4

This should get you going! See image on the right

Facebooktwittergoogle_pluspinterestlinkedin

Node Red Weather

One of the many things that Node-Red makes easy to capture – is the weather – and all credit is due to the people who put the DARKSKY API together.

Animated weather

What you are seeing above is a 6 day forecast in ANIMATED, COLOUR images (I appreciate it does not look animated here). It is LOVELY. This is running on my Raspberry Pi and of course the display, being a web page can be displayed on a tablet, a PC screen, a phone or an integrated touch-screen. Don’t go using old browsers though – this makes use of HTML5 and vector graphics so you should be reasonably up to date.

To get a nice pretty weather forecast for your home control display or whatever you plan to use it for, you need:

a. information

b. A display mechanism

In this case the information comes from DarkSky via a simple API

DarkSky

If you wish to “call” the DarkSky API you may do this up to 1000 times a day for free. Reader Jay and I felt that grabbing the information every 5 minutes might be a good start. Once the novelty wears off you might consider every 15 minutes or so. A timestamp node is simply used as a trigger – to get the information when Node-Red powers up and every 5 minutes from there on.

An HTTP request gets you a massive object with just about everything you could ever want to know about the weather and finally a function attempts to read that object with minimal error checking. I say this because in the past I’ve had the very odd bad package from DarkSky using the NODE that is available (I suggest you avoid that at least for now) which does not harm but looks bad in the logs!

The “http request” node in the middle requires little information – just your unique code which you get when you sign up (for free) with DarkSky – and your longitude and latitude.

DarkSky details

Here is the full URL I used with a fictional key – and my own coordinates.

https://api.darksky.net/forecast/xxxxxxxxxxxx/55.130575,-2.2534091?units=uk2

Now you COULD read all the information from the new object and make a whole boatload of MQTT messages – some of which you might never use. If you were to do this – your flow might look like this.. and my thanks to reader Jay for saving me all that work.

massive flow

i think you’ll agree that is slightly over the top – but it does give you an idea of how much info you can get out of this and that is NOT a complete list.

On the other hand it was good fun for a bit, checking out all the info

info from DarkSky

So, instead, what we’re going to do is simply pull out of the object what we need… See below. When this is called, the function I’ve dropped in after that simply contains…

try {
var weathertest=msg.payload.currently;
global.set("DarkSky",msg.payload);
node.send (msg);
}
catch(e) {}

"weathertest" is used purely to provoke an error if there is something wrong with the data and can be ignored from now on. So now with luck we have an object called “DarkSky” out of which we can pull all manner of things as needed – and of course being global we can access this from any flow at any time.

So – here’s a EXAMPLE function to get the current weather summary

try {
msg.payload=global.get("DarkSky").currently.summary;
node.send(msg);
}
catch(e) {}

What’s with the “try—catch”? Well, this is new for me – that comment I made above about accessing anything at any time - I got sick of seeing harmless complains about undefined objects in my logs due to using something before it has been defined – or bad data coming through etc.,  so my new thing is to actually check that a variable exists before using it. If you call this function BEFORE you’ve grabbed the weather for the very first time – nothing will output – simple!

So – how far can we go with this? VERY far – it’s a BIG object but for what we need here – it is all very simple.

global.get(“DarkSky”).when.what

where “when” is one of the following:

  • minutely
  • hourly
  • currently
  • daily.data[x] where x starts at 1 for today and goes to 7 days,

msg.payload=global.get("DarkSky").daily.data[2].humidity;  // humidity for tomorrow !!

“what” can be one of the following:

  • summary
  • nearestStormDistance
  • precipIntensity
  • precipProbability
  • temperature
  • apparentTemperature
  • humidity
  • windSpeed
  • visibility
  • cloudCover
  • pressure
  • icon

I’m sure you’ll  agree that’s a pretty damned comprehensive selection, nicely hidden away in an object for you to pick out what you need. cloudCover and humidity you might want to multiply by 100 to make them useful – and temperature is in degrees C though you can no doubt change that to anything you want – read the API docs.

For now what we’re interested in is the icon – the name of an icon to represent the weather for seven days. The icon can be one of the following:

  • clear-day
  • clear-night
  • partly-cloudy-day
  • partly-cloudy-night
  • cloudy
  • rain
  • sleet
  • snow
  • wind
  • fog

It JUST so happens that there is a set of animated icons called SKYCONS which match up with this exactly – and they are in technicolour – you have control over the colour of various bits of them including:

  • main
  • moon
  • fog
  • fogbank
  • snow
  • leaf
  • rain
  • sun

So putting this all together – you can make a full colour set of icons which adjust for each of several days. As I am using Node-Red Dashboard, 6 icons fit nicely onto my phone so I simply picked the next 6 days.

You might want to satisfy yourself that you can grab this data before moving onto the next stage. Get yourself a DarkSky account, punch in the details and maybe go and grab today’s weather. Of course without these icons you still have lots of info you can use for wall displays or maybe calculating what to do with your heating system – for example in cold weather, if it is damp I like to ramp the heating up just a little more.

And now, onto the imagery.

You will need to be comfortable with creating a folder to put JavaScript libraries for use with Node-Red. In the Node-Red settings file you can define such a directory – just make sure you don’t call it “js” as Node-Red already has one of those and you’ll end up in trouble. I call mine “myjs”.  Go and grab the skycons.js file and put it on your system. You’ll find a lot of information in that link I’ve just given you.

For 6 days your flow will look like this..

weather flow

So – every 5 minutes or however often you choose, grab the relevant icon from the global object you are populating and inject it into one of these templates.

Here is the code for template 1.

<script src="/myjs/skycons.js"></script>

<canvas id="icon1"  width="50" height="50"></canvas>

<script>
var skycons = new Skycons({"monochrome": false, 
                "colors": { 
                      "main": "#779966", 
                      "moon":"#666666",
                      "fog": "#555522",
                      "fogbank": "#884488",
                      "cloud": "#999999",
                      "snow": "#aaaaaa",
                      "leaf":"#00ff00",
                      "rain": "#0000ff",
                      "sun": "#ff3300"
                    } });
skycons.add("icon1", Skycons.PARTLY_CLOUDY_DAY);
skycons.play();

    (function(scope) {
        scope.$watch('msg.payload', function(data) {
           if (data=="clear-day") skycons.set("icon1", Skycons.CLEAR_DAY);
           if (data=="clear-night") skycons.set("icon1", Skycons.CLEAR_NIGHT);
           if (data=="partly-cloudy-day") skycons.set("icon1", Skycons.PARTLY_CLOUDY_DAY);
           if (data=="partly-cloudy-night") skycons.set("icon1", Skycons.PARTLY_CLOUDY_NIGHT);
           if (data=="cloudy") skycons.set("icon1", Skycons.CLOUDY);
           if (data=="rain") skycons.set("icon1", Skycons.RAIN);
           if (data=="sleet") skycons.set("icon1", Skycons.SLEET);
           if (data=="snow") skycons.set("icon1", Skycons.SNOW);
           if (data=="wind") skycons.set("icon1", Skycons.WIND);
           if (data=="fog") skycons.set("icon1", Skycons.FOG);
        });
    })(scope);

</script>

The other templates are identical EXCEPT that: they don’t need the include – and they don’t need the definition of skycons. Also – wherever you see “icon1” – change that to “icon2” etc.. up to “icon6” assuming you want 6 days. “icon7” if you want to go all the way to 7 days.

If this does not work smoothly – check out that you ARE pointing to the javascript library and that you’ve made no mistakes – check that the data is actually going into the template node and make sure you have an up to date Node-Red and Node-Red Dashboard.  That will serve well later as I’m no-where NEAR finished making use of templates… just the thorny matter of getting data into and out of them to get to grips with.

If you have problems formatting these images - I noted when moving them mine came out stretched - this is some js and css  I use for other purposes but I think you need the padding css in a template (make this the first template - auto size - it will not show up) - to remove padding around the edges .

<style>
  .filled { 
      height: 100% !important;

      padding: 0 !important;
      margin: 0 !important;
  }
  .nr-dashboard-template {
      padding: 0;
      margin: 0;
  }
  
  .rounded {
  border-radius: 12px 12px 12px 12px;
}
 
   .bigfont {
  font-size: 18px;
}

   .smallfont {
  font-size: 12px;
}
  
</style>

<script>
$('.vibrate').on('click', function() {
  navigator.vibrate(100);
});

function restore_bg(x) {
            $(this).css("background-color", x);
    };

$('.touched').on('mousedown', function() {
    var x= $(this).css("background-color");
    $(this).css("background-color", "yellow");
    
    setTimeout(restore_bg.bind(this,x),200);
    navigator.vibrate(80);
    });
    
</script>
Facebooktwittergoogle_pluspinterestlinkedin