Category Archives: Web Programming

Online JavaScript IDE for AstraNOS

The past few days have been filled with some exciting new features for AstraNOS.
I am adding things as I am using AstraNOS and certain features are missing.

Changes to the IDE

The IDE received a direct integration of the online help for QooxDoo as well as the ability to run your JS application windows directly from within the IDE.

Online JavaScript IDE
Online JavaScript IDE

Creating new application, and dialogs has never been that easy for me. This will be very helpful when I continue to work through the next few training videos for QooxDoo and AstraNOS.

New Class Dialog
New Class Dialog

Another add-on to the IDE is the “New Class” menu item which will now bring up the following dialog to select the type of class you want to create.
You can take the IDE for a spin using this link : https://www.AstraNOS.org/MiyamotoMusashi/BattleGround.php?course=1

Changes to the FolderView

New Context Menu Items
New Context Menu Items

Finally I added “Download”, “Copy”, and “Rename” to the context menu items in the Folder View, and “Paste” if you right click on an empty space.

This way you can now use the FolderView to work with files which is faster. Previously you would have to go to the ContentBrowser to achieve the same.

ContentBrowser Context Menu

The ContenView is still the main dialog to work on / with files as it supports working on files sitting in your box or DropBox accounts.

Dropbox Kaput :

Well, the ContenView WAS able to use Dropbox, until September this year. Here is DropBox’s announcement :
“In June 2016, we announced the deprecation timeline for API v1. When API v1 is retired in September 2017, any further API v1 calls will fail with a 400 error with the body:”

and sure enough …

Uncaught exception 'Dropbox\Exception_BadRequest' with message 'HTTP status 400
{"error": "v1_retired"}'

So I went ahead and I chose https://github.com/kunalvarma05/dropbox-php-sdk to replace the older library I was using. I am planning in completing the port within the next two days.

Program a random password generator in QooxDoo

I have created my first video in a series of planned videos on programming in QooxDoo.

Programming in QooxDoo:

QooxDoo is a object oriented JavaScript library which allows you to create any type of widget, like List controls, Tree controls, Windows etc. Inside the browser without the need to worry about browser compatibility.

Aside from being very easy to use, this framework is fully object oriented and is better than any other framework I have seen in the past. Obviously people have their own preferences, and frameworks like jQuery, and Angular are at the top of their game. QooxDoo like other frameworks has strong parts and its weak parts.

This episode goes through some basics first before I dive into the programming part. As mentioned above I create a random password generator which you can use whenever you are asked to either create a new password or re-new your old password.

You can find the video on YouTube.

Password Generator preview
Password Generator preview

The resulting application looks like this

What I have learned from my first video tutorial:

I found that my mic is too sensitive to the higher frequency ranges and going forward I will have to either find a hardware equalizer or do some post production on the audio in software.

Since I am using Linux, my setup is all open source and freely available. As such some of the shortcomings are that Audacity is crashing once in a while, KDenlive was constantly crashing and unusable so I had to switch to OpenShot. I may give Blender’s built in NLE ( Non Linear Video Editor ) a go in a future part.

My keyboard ‘hacking’ is way to loud and will either need to find another keyboard, try to get the right filter settings to suppress it as much as possible ( without too affecting the overall audio quality too much ) or place my mic in a better spot.

Bottom line:

I had a lot of fun putting this tutorial together. I spent probably twice as much time on getting my equipment in place, and preparing AstraNOS for the link to allow people to try for themselves Here …..

The next episode will take most likely less time overall and I will also try my best to cut down the duration of the next episode to be 10 minutes or less.

I learned a ton of things and I am going to continue to learn during my next videos.

AstraNOS Intro

I have spent the past few days working on my blog, and creating a new YouTube Channel. Please check it out under

https://www.youtube.com/channel/UChKSZPbizKmySaWmkue8viQ/videos

There is fairly little contents yet since I just set everything up over there. However over the next couple of weeks / months I am planning in filling it with a lot of practical tutorials on JavaScript, C++, multi threaded programming and some neat projects.

The first video is all about AstraNOS, which is one of my fun side projects. I have used this as a way to help setting up my gear and getting the first video out. Looking at the result is showing though that it is still rough around the edges but I am planing in working on the production quality.

AstraNOS has a lot of features which I have not mentioned in the video. I would encourage you to sign up for a free account and discover what is all possible with it. Going forward I may use the framework to allow users to easily access all of my programming material, online books and courses from one convenient place online.

AstraNOS intro

The neat thing is that it has built-in communications capabilities which will allow me to interact with my audience directly.

In case you have not yet done so, please feel free to go over to https://www.AstraNOS.org and create your own account. I would also be happy to receive feedback on which tools or features you would like to see there next.

As I mentioned in the video, I am heavily using AstraNOS on a day-to-day basis and here is the screenshot of my current ‘desktop’AstraNOS

 

Rpi WebRTC Streamer to Android WebRTC streaming

In this article I will setup Android WebRTC streaming to RPI-WebRTC-Streamer running on my Raspberry PI Zero W, to talk to each other.

Here is the architecture of RPI-WebRTC-Streamer.

Now why do we use WebRTC instead of directly streaming audio/video through a socket from the Raspberry PI to the Android device ?

It is helpful to understand how WebRTC works under the hood and how a connection is established.

The magic in WebRTC is the probing of the connection to allow two clients to talk P2P ( Peer-to-Peer ), even if they are behind a firewall or using NAT. There are plenty of online resources devoted to this complex topic ( E.g. https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/ )

The basic steps in establishing a WebRTC connection are:

  • Step 1: Signaling: both peers connect to a signaling server (using websockets over 80/443, comet, SIP,etc..) and exchange information (about their media capabilities, public IP:port pairs when they become available, etc.)
  • Step 2: Discovery: Devices connected to LAN or mobile networks are not aware of their public IP (and port) where they can be reached at so they use STUN servers located on the public Internet to discover their ip:port pair (ICE candidates). In the process they punch a hole through the NAT/router which is used in step3:
  • Step 3: P2P connection: once the ICE candidates are exchanged through the initial signaling channel each peer is aware of each other’s ip:port (and holes have been punched in NATs/routers) so a peer to peer UDP connection can be established.
  • Step 4: If a P2P connection can’t be established ( maybe through firewall rules or the usage of Symmetric NAT ) then TURN servers can be used, which will relay the data between the peers. Please note that this will require the TURN server to receive and send all video and audio and is the last resort in WebRTC.

Under normal circumstances you would establish the connection between two web-browser. However in this case I need to establish Android WebRTC streaming to the Raspberry PI Zero W. Fortunately we have the required tools and libraries available on both platforms and can take full advantage of this technology stack. This allows us to basically build a video conference similar to skype between the Raspberry PI and Android. As an aside, iOS can also handle WebRTC, which may be a project for later.

Android WebRTC Streaming:

  1. Lets first make sure you have the RPI WebRTC Streamer setup, as explained in my previous post.
  2. Then you have to install ADB onto your computer to be able to transfer the App to your Android phone.
  3. Connect your Android phone to your computer and make sure you have the developer option enabled
  4. Next get the source code for RPI WebRTC Streamer from github and install it onto your phone, like so.
    bash> git clone https://github.com/kclyu/rpi-webrtc-streamer.git
    bash> cd rpi-webrtc-streamer/misc
    bash> adb install AppRTCMobile.apk
    
  5. Next open the app on your Android phone
  6. Change settings of the Video encoder to H264 High
  7. Change the resolution to VGA(640 x 480)
  8. And then simply enter the IP address of your raspberry PI as the room number
Android WebRTC streaming in action
Android WebRTC streaming in action

Finally, here is the article from mpromonet if you ever feel like compiling rpi-webrtc-streamer https://www.raspberrypi.org/forums/viewtopic.php?t=186271.
You can even use docker containers to make things easier: https://hub.docker.com/r/mpromonet/webrtc-streamer/

As an aside, I found multiple Android app templates to use WebRTC

uv4l WebRTC vs rpi-webrtc-streamer

I have spent the past two days working with the uv4l driver to get WebRTC working. I eventually got everything to work with three major issues

  1. I could not get the transmitted quality to anything close to what I needed
  2. I could not get rid of the the watermark which was put over the video
  3. The complete CPU utilization for 640×480 was above 90% and caused issues.

Another slightly annoying issue was that I had to re-install Jessie after I found out that uv4l is currently not available for Raspbian stretch lite. I could only find the full version for Jessie, which requires at least a 8GB microSD card. And off I went to replace my 4GB microSD card.

On the positive side I installed rpi-webrtc-streamer from github and was able to look at the results in realtime right away.

Unlike uv4l, which is based off OpenWebRTC from Ericson, rpi-webrtc-streamer is based off the Native Code from www.WebRTC.org which seems to be a bit more responsive than uv4l.

Here are the steps I had to do to get things to work.

bash>  # First create a home for the code
bash>  mkdir utils && cd utils
bash>  git clone https://github.com/kclyu/rpi-webrtc-streamer.git

You can find the Android App under rpi-webrtc-streamer/misc/AppRTCMobile.apk
But first lets avoid the work and go straight to installing the software.

Go to https://github.com/kclyu/rpi-webrtc-streamer-deb and download the appropriate deb-package.

bash>  dpkg -i rws_xxx_armhf.deb
bash>  sudo systemctl start rws

Then simply point your browser at http://<IP Address>:8889/native-peerconnection/

Raspberry PI camera
Raspberry PI camera

I will be going through the setup and usage of the Android App which is part of rpi-webrtc-sstreamer in one of my next blog entries.

AstraNOS for the stars

So I have not written anything about AstraNOS, my web desktop, for a while. That was for a good reason, as I was busy doing a batch of other things the past months.

However I have never give up on it and I am still using it heavily all the time to store pics, ideas, notes, videos and other things.

Progress

I recently fixed my AWS instance and re-enabled Conference, my WebRTC based video conferencing tool. Also since I always have a multitude of windows open I added a virtual desktop feature to the mix.

 

The number of virtual desktops is currently hardcoded to 4 however I believe that this will be plenty. The current version of AstraNOS is now grown up enough to handle a lot of the everyday tasks. It provides a central place online to -feel-at-home.

Feel free to sign up for a free account <a href=”https://www.AstraNOS.org/virtual”>Here</a>, connect your DropBox account and link some youtube videos to your folders.

DyGraphs Pie Chart Plotter

DyGraphs is a decent Javascript library to plot time series data points.

DyGraphs plotter
DyGrpahs

I chose DyGraphs a long time ago mainly due to its small footprint of 123530 bytes for dygraph.2.0.0.min.js

One of the things it allows you to do now is to add a different plotter algorithm to plot data. One such example can be found on the demo page is that of a BarChart plotter. If you look at the code it is a fairly small addition.

One of the possible plots missing though is a PieChart. It happened that I needed a PieChart for my project and I did not want to switch to E.g. ChartJS [ Release 2.5.0 ] so I wrote my own little PieChart function for DyGraphs.

function pieChartPlotter ( e ) {
        var ctx  = e.drawingContext;
        var self = e.dygraph.user_attrs_.myCtx;
        var itm, nme, data = self._pieData;
        if ( ! data )  {
          var t, i, y, all, total = 0;
          data = {};
          all = e.allSeriesPoints; // array of array
          for ( t=0; t

The one thing you will see in this code is that I calculate the required PieChart data once and then check for its existance each time I enter this function. This is requried beause DyGraph does currently not call the plotter function in a context but rather in the global browser context ( I.e. the this object is the browser Window ).

So instead I ‘added’ ( read hacked ) myCtx to the dygraphs – plotter options to gain access to my local JavaScript object where I buffer the _pieData.

DyGraphs Pie Chart plotter
DyGraphs Pie Chart plotter

While this may not be the nicest pie chart around, it is a small, basic function which can be expanded on fairly easily.

Addendum: Here is how to use this code

    this._options  = {
      labels: ["Date","Count"],
      legend: 'always',
      title:  "  ",
      myCtx: this,
      animatedZooms: true,
      hideOverlayOnMouseOut: false,
      stackedGraph: false,
      clickCallback    : this.onGraphClicked,
      showRangeSelector: true,
      underlayCallback : this.highlightWeekend,
      legendFormatter  : this.legendFormatter,
      highlightSeriesOpts : {
        strokeWidth: 3,
        strokeBorderWidth: 1,
        highlightCircleSize: 5
      }
    };
    this._chart = new Dygraph ( dom, this._data.data, this._options );
    ...