A Deep Learning Weekend

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

A Deep Learning Weekend
Well, this has been an interesting journey as I’ve been working on making my own widgets for Node-Red. I thought I’d share some of the things I’ve picked up. There’s a short video to go with this. Experienced javascript object users please look away now. Those not interested in JavaScript look away now.

C Programmer:As a life-long C programmer, I came into JavaScript with some trepidation. Like alternative universes, JavaScript may look similar to C but it is not the same and that led to all manner of silly mistakes over time. However as I see a tiny light at the end of the tunnel, I have to say, it was worth the effort. Despite being a client-side interpreted language, it really is great fun to use.

The gauge:Well, as long as you keep it simple that is. When designing my first attempt at a gauge for Node-Red, I realised that a typical gauge operation goes like this:

Some features such as the background are typically set in an init function, once only. Other features such as needle positions are set dynamically and will change during operation.

This is generally handled one of two ways either by setting a value and then calling an update function, or by running something in the background which checks for value changes so all you have to do is change a variable. On many of the gauges you’ll see flashing lights and smooth movement of gauge needles that implies something running constantly or at least checking for changes and running when change is needed.

Concerns:This worries me as there can be quite some overhead in updating an entire gauge, umpteen times a second. So I decided that what was needed was a layering system as you might find in Photoshop such that I could lay down the basic design and background of a gauge once only then dynamically clear and write to a top layer whenever changes are required. Such changes might include the state of a flashing light or a needle not being where you want it, requiring successive incremental updates until the needle or needles do get to be where you want.

I then started thinking about variables and functions (methods). Did I want to update variables such as the needle pointer directly (direct variable manipulation) or did I want to do a one-off correction to the input value before passing it through (that needs a method/function).

That led me to create, as you will have seen earlier, a large blob of JavaScript for my gauge, including initial setup then a timer-driven function to update the gauge regularly. That was stage one.

html5 Canvas:In the process I discovered (by looking at what others had done) that HTML5 Canvas (which really is easy once you get past the initial learning curve) Is a great choice. What did not come so easily was the realisation that the canvasses themselves are indeed transparent and you can layer one directly on top of another just like Gimp or Photoshop layers. That led me to split the job into two the overall backdrop which remains fixed throughout operation and the top layer with my LEDs, needles and set points on it.

Adding a bunch of variables to this for setup and defaults brought me out into a sweat as I struggled to imagine how two or more gauges would interact. And THAT led me onto objects something I’d never really touched in JavaScript before specifically to wrap up my entire code into a definition which meant I could then simply create instances for each gauge without worrying about all those variables interacting. That was the point I lost two days in deep learning last week.

Having wrapped everything up in a bulletproof package I was then faced with the question of how to make updates outside the package. The obvious way (and the one I’ve adopted) is a series of callable functions i.e. mygauge1.needle1(50);

In the process I had to learn how to make functions accessible outside of the “object”. That was easy enough.

Here is a simple example the assumption is that you have a jQuery link (to update a div) and a DIV called “fred”

1. function myobj(){
2. this.init=function() { this.v1=5; setInterval(test, 25,this); }
3. this.doubleit=function(r) { this.v1=r*2; }
4. test=function (localthis) { $("#fred").html(localthis.v1); }
5. }
6. brian=new myobj;
7. brian.init();
8. // brian.doubleit(12);
9. // brian.v1=7;

There is a lot to this and I’ll be using the word “this” a lot so for clarify I’ll use italics for the special meaning of this . It may look strange at first but if you follow me it soon won’t.

Definition:So the point of this was to create a test object definition an object that would simply put a value in a DIV (I know, slightly overkill but I was trying to prove a point). We start off with the definition in line 1.

Take a look at the code above there is a lot in here despite their being only 9 lines. I figured any more and people might run away.

First things first on line 1 define the object. I’m not making anything here just defining it (ending in line 5).

Within the object I’m defining is a function called init (line 2). That does two things it sets a local variable to 5 and starts off a timer which will run every 25ms and which will call an internal function called test, passing this to it. Stop do not get hung up on this yet.

Line 3 defines a function that doubles that local variable.

Line 4 defines the function that will be called every 25ms.

Line 6 is where things start to happen. I’m making an instance of my object and calling it brian. At this point nothing happens.

Line 7 I call the internal init function which does two things it sets v1 to value 5 and starts the timer and from there on the function “test” is called every 25ms to put the value of v1 onto the DIV. You’ll see “5” appear in your DIV if you test this somewhere.

So far so good. How do I now interact with that value. I wanted the choice of updating a variable or calling a function. The two commented lines are two ways to do this their operation should be self-explanatory.

But here’s the think. Line 9 simply won’t interact with local variables inside the definition and we don’t want them to we want interaction with specific instances of the object like “brian” for example. And that’s where “this” comes in. Add that to a variable name or a function name and it becomes accessible to the outside world. For example you CANNOT do brian.test() and that’s a good thing!

Scope:So plastering this all over the place allowed me to keep all variables and functions private and only “expose” those I needed. LOVELY. But for one thing it didn’t work.

I could not show the value of v1 in the div. Had I kept it completely private by not using this , it would have worked. And then I realised WHY. this refers to the current place i.e. inside of brian in this case. But the function “test” runs asynchronously every 25 ms. It isn’t part of this . Indeed it has it’s own this . so inside test, this.v1 referred to something that doesn’t exist. It occurred to me that JavaScript which will basically let you pass anything in a function, would not mind if I passed this to the test function… so I did. Clearly I’d have to call it something else in the function so I called it localthis . And guess what it worked.

These ideas then form the basis of my current gauge. I can built a massive machine with lots of variables and functions inside and have no worries about interactions with other gauges because I’m only “exposing” stuff I want…. and gauge1.v1 has nothing to do with gauge2.v1

Of course I’m assuming that was as clear as mud- but if you are interested, go have a play in

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JavaScriptJavaHTMLHTML5jQueryPhotoshop
tags: function,was
本文标题:A Deep Learning Weekend

技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(109)