Awesome Angular 4 form validator routine

One of the things I like the most about Angular is the ability to make even complex forms relatively simple. In Angular 1 I had a library of form helpers that I wrote, the basic idea was initially show a blank form, when user fills in (dirties) an entry it should do validation. When the user click on the submit button it should do validation of all items on the form, submit the form if no errors and show any errors if there were any. This sounds simple enough but in reality it was a few hundred lines of code to do it correctly.

Angular 2+ (Angular 4 on Ionic 3 in this case) make life a lot easier, especially once you’ve got to terms with the FormBuilder framework. To force whole-form validation (including any subforms) simply create a module called form-tools.ts looking like:

Then you can easily use it from another class as follows:

Fan/Light remote control teardown and documentation

I recently bought a few ceiling fan controllers from AliExpress, I’m guessing there are a lot more out there with a similar electrical design so I thought perhaps my notes on tearing these down would be useful for someone as I didn’t find this elsewhere on the internet. As I was taking them apart to replace the wireless section with an ESP8266 for WiFi remote control I thought I’d document the design of these devices a bit.

Firstly, the main circuits run at 12v – the relays are triggered by that voltage, and the remote control uses a small 12v battery too. However the radio is only rated for 5v, so I think there must be a 5v circuit there as well probably obtained via resistors from the 12v circuit. The basic block layout is that the radio receiver connects to an unmarked chip (in some models this connects to an AT24C02N which presumably holds the last state of the relays). The unmarked chip has 5 output tracks running from it to an ULN2003A which boosts the signal to 12v to trigger the relays. 4 tracks go to the 4 relays (one for the light, and 3 for fan control which has live, 3uF and 2.5uF (2uF in some models) capacitors to regulate the speed). The 5th track goes to a buzzer which is triggered when it gets powered on or receives a command from the remote controller. Unfortunately I can’t remember the order that fan relays were triggered as I wrote it down lost it, but it was something along the lines of:

high live
medium 3uF + 2.5uF
low 3uF

The radio receiver in the ceiling fan based on a SYN470R chip and the transmitter uses an EV1527 to encode the data to send to the fan. It sends 24-bits – a 20 bit id and a 4 bit code. Here are the hex codes for the commands as discovered by my patches to allow this device to work on a C.H.I.P board:

1

3

a

Command Hex code
low 8
medium 2
high 6
stop c
toggle light on/off 5
timer 1h 4
timer 2h
timer 4h
timer 8h

Uploading videos to YouTube with perl

As part of a perl project recently I needed to generate a load of videos (using the excellent MLT framework) and upload them to YouTube. As the bulk of the project was already in perl, I needed to write a YouTube upload module for it. Here’s a rough overview of how to authenticate and upload a video (chunked rather than loading it all into memory at once) with perl. Note as well it was quite a struggle to get long-term auth tokens from the Google services – one slight mistake with a parameter and they only give temporary grants which last for an hour or two rather than indefinitely.

As per this bug report you need to hack LWP::Authen::OAuth2::AccessToken::Bearer to enable the chunked uploads to work, otherwise it throws an error.

The auth_id and auth_secret parameters are given by the google code console when you sign up for YouTube API access, and the redirect_uri should be where the web app would redirect to after displaying the Google oauth permission grant screen. The first time you run the script, you’ll need to save the auth_code / auth_token parts and use them in future when calling. Even though it should grant a new auth token each time the script is run you still need to present the original one from the look of things.

Element scrolling within Angular (1) pages

Back to Angular 1 for today’s post as I’ve been doing some work on an older project today. As we all know, in the old days of the web, you could scroll to items within the page by using an <a> element with a hash reference, like:

With the advent of single-page sites and multiple ajax pages under them however, the hash section of a query parameter is increasingly unable to be used. On Angular 1 with angular-route this becomes impossible.

So what if for example you want to have some references at the top of a page within an Angular application which will scroll the user down to certain sections below, just like the hash references used to do? There are a number of suggestions on the internet for this but they are not very reusable, so I decided to create a simple directive that does this:

This is slightly complicated by the fact that I am using an element with class="main-page" with overflow: auto set to contain the scrollable section of the app. If you don’t have a layout like this just replace the $('.main-page') part with $('body').

Then you can easily create elements like:

Ionic 3 – Allowing back button action to be specified on a page-by-page basis

Ionic 3 is great as I’ve said in previous posts, however there are a few issues with its out-of-the box handling of back button on Android. Normally it just goes back to the previous page which is usually what you want, however this is not what you want when you are in a popup or modal on the page, or in some other cases you may want to capture the back event and do something else with it on a page-by-page basis. Fortunately it’s pretty straight forward to override this as I discovered.

Firstly, we want to override the back button action for the whole app. Open up app/app.component.ts:
and in the constructor:

This basically defaults to going back if it is possible to, if not then it will take you to the first tab if it is a tab view. However if your active page has a backButtonAction() function, it will delegate to that.

So for example in a modal class you can add something like:

which will dismiss the modal and go back to the page that called it, rather than the default action of simply going back a page.

Remove Windows Phone CSS in Ionic 2/3 to save space

Lets face it, no-one uses Window Phone any more. However, in Ionic 3 there are several skins which are built in to the CSS to emulate the display of the platform that the app is running on. These are ios (iOS, apple devices), md (Material Design – Android devices and Ionic default skin) and wp (window phone). As each of these is different and affects almost all widgets, they are each responsible for roughly 25% of the CSS size of ionic (which can be big – 250kb or so).

So, as no-one uses windows phone and we don’t want to have to test multiple platforms we can easily remove it from the CSS build to save time, space and complexity.

Firstly, copy the SASS config into our custom config directory; we will use this to override the default Ionic SASS config:

Then edit your package.json file and create or add a config dictionary to it like:

Finally, open up config/sass.config.js, find the excludeFiles section and add the following:

If you don’t want to match different platforms with different Ionic themes/skins (which while nice takes quite a bit of time to fully test), you can choose to use eg the Material Design skin only by doing something like:

CKEditor Plugin Validation for Multiple Requirements

I’ve been working on a few CKEditor plugins recently for some projects. When building the elements of a dialog you create a data structure like:

This is great, but what if you want multiple validation criteria for example it must be a number and not empty? There are a handful of hacks and examples of this online, but looking through the code I found an undocumented (and otherwise unused) function which enables you to combine multiple validation functions:

You can pass as many validation functions into this as you want and it will combine them, but only allows you to specify one validation message unfortunately.

Full-stack Linux development (AngularJS, Bootstrap, Modern Perl) and Life in Turkey