First QooxDoo Application

I have created the second video in the JavaScript Bushido series.

In this video I am taking a step back and going to the basics.

Installing Qooxdoo from github, and starting your first project.

To retrieve qooxdoo from command line you have to type


  bash> git clone https://github.com/qooxdoo/qooxdoo.git 

This will take some time to complete the download because a git repository contains the complete history. Once the download completes you can create a new project through


  bash> mkdir workspace && cd workspace && ../qooxdoo/create-application.py --name=DemoApp
  bash> cd DemoApp && ./generate.py build

The final result:

This will generate a simple push button on a web page.

First Qooxdoo Application
First Qooxdoo Application

Now granted that this is not the coolest web page out there but you have only spent about 5 minutes to create it. Now if you spend some more time on it you can eventually create more complex applications, like a Random Password Generator ( approx 100 lines of code ) or a simple calculator ( approx 200 lines of code ).

As a matter of fact you can create quite complex applications which natively support multiple languages, multiple Themes, multiple icon sets etc … . I believe if you have an idea of a complex web based application you will find a solution with Qooxdoo.

As with the first episode, you can checkout the code online Here …

Questions or suggestions ?

Please don’t hesitate to leave a comment below if you have questions or suggestions. I had fun creating this short tutorial and I hope it is useful to you.

Cloud abstraction layer

The plain pain

Imagine that you have written a really good web app, and you have distributed it to many customers these customers in turn acquired a lot of customers.

Now fast forward a few months and all of a sudden you are getting calls to help fix issues with your platform. For some unforsaken reason your cloud storage integration stopped working.

Because you have moved on to the next thing you have only limited time to spend on fixing the issue. What you eventually discover is that a service provide decided to change the API from version X to version Y.

Now you have to sit down and spend a couple of days fixing what is been broken.

Sleep Mode Zero
Sleep Mode Zero

That is something you have to deal with all the time in an actively changing web environment.

APIs change and certain providers may stop offering services or worse go out of business.

How to avoid the pain

Most web based APIs use a RESTFul interface to their services. As such the steps involved in utilizing a online service is usually accomplished through OAuth2 authorization to gain secure access to users data, followed by the utilization of the actual API.

As a developer you are free to develop to a specific API or to abstract the API in a way where you can easily replace one service/API with another.

However every single line of code you write you will have to maintain yourself and make sure that changes over time will not break functionality.

Cloud abstraction layer, the better way

Every now and then you can do one better though. Take for example web storage. There are many providers of web storage, such as box, Dropbox, S3, Google storage etc. If you want to offer a wide selection of possible back-end storage platforms you would be well advised to look into a framework such as Flysystem for PHP.

The PHP League Logo
The PHP League Logo

Flysystem abstracts it the different back-end APIs and provided a unified interface. You can find a multitude of third party connectors, such as Azure, S3, Dropbox, box etc. You can also find some strange adaptations such as GitHub or flicker for it in case you have use for it.

The most important thing to remember though is that if one of the available back-end APIs changes you will be able to replace it with almost no additional work required on your side.

Also if a provider goes out of business, you can quickly switch to another provider. And finally, if a service provider changes the API version and ignores backwards compatibility you can simply replace the old library with a new library with the same API calls.

There are however some shortcomings to adding an cloud abstraction layer

  • It is usually not as comprehensive in its feature set
  • The additional code will slow down the requests a few milliseconds
  • It will increase the projects complexity
  • Not every supported back-end-API may provide the required data. E.g. certain storage back-ends don’t support a file system natively

AstraNOS integration

Since I had to move from Dropbox v1 to Dropbox v2, I switched over to utilize the cloud abstraction layer provided by Flysystem for AstraNOS. Integrating the OAuth2 client from the PHP League us also unifying the signups mechanism for cloud storage back-end ( and more if I ever need to ).

Working Dropbox integration
Working Dropbox integration

With this addition I will now be able to increase the available back-end services with little additional work, though I would guess that it still requires a good day per back-end.

However this is a price worth paying if we can leverage multiple cloud based back-ends at the same time and in the same environment. Working seamlessly between them as it has been intended.

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.

RIP TechShop

We do not have a TechShop in our area however anytime a space where makers meet and create, teach, and discover closes it is a setback to education, innovation and curiosity.

“We have grown from one location in Menlo Park to 10 locations across the US and 4 Internationally..”

About TechShop

Founded in October 2006, TechShop started as a membership-based, do-it-yourself (DIY) workshop and fabrication studio. Over a decade later, TechShop, Inc. grew into an international consulting company sharing it’s makerspace expertise with grade schools and fortune 500 companies alike.

TechShop offered consulting, market assessments, licensing options, curriculum, and various other managed services to economic development councils, libraries, non-profits and educational institutions, design firms and other makerspaces. TechShop encourages you to find a way to grow the maker movement in your community. It’s worth the effort.

TechShop-Makerspace

RIP TechShop

Yesterday TechShop suddenly filed for Chapter 7 bankruptcy protection. TechShop is no more and its remaining assets will be sold off by the appointed Trustee.

Embrace

It hits home insofar as we have purchased one of the original Embrace bracelets for my son who has seizures. This device will send out an alarm when a seizure occurs to the connected phones. It was listed as one of the success stories coming out of the TechShop.

+200,000 infants reached
+13,000 health care workers trained
105 programs in 20 countries
A life-saving incubation blanket for babies. In 2008, a group of Stanford students sought to address high mortality rates among premature and low-birth-weight babies by designing a better incubator for the developing world. The invention, the Embrace infant warmer, was prototyped at TechShop San Francisco and is now saving thousands of lives worldwide.

Here is the link to the TechCrunch story about the demise of TechShop.

As I am still working on my Video Doorbell, I can use NOVA-Labs which is very close by. As of today, some Americans will no longer have the ability to roll down the road to get their inventions into reality.

It would be great if the likes of Amazon, Apple, Google would step up and sponsor these types of locations all around to keep the spark of innovation going.

With this bit of sad new I will go and start my Friday.

Startup ignite November 2017

Today I went to one of our local startup incubator called startup ignite.

Startup Ignite Flyer
Startup Ignite Flyer

The Meetup was originally started by Amu Fowler in ? 2014 ? And over the years I went to a few of these meetings on and off. I find it very interesting to meet new people, and see what ideas or dreams they have.

Meeting Amu at the Ignite Meetup
Meeting Amu at the Ignite Meetup

The Place:

This months Meetup was focused on patent on general and how they retire to a startup. You can find a link to the video below.

NOVA-Labs Logo
NOVA-Labs Logo

It was held at the NOVA-labs facilities in Reston VA, which in itself is another very interesting space to discover. I have a few projects which could use a 3D printed Chassis or use some of their tooling or build a 12ft tall Optimus Prime.  But I leave this to another time.

NOVA-Labs mad science going on
NOVA-Labs mad science

The People:

In the past I have mostly met and talked with people who were in the ideation phase or in the very initial phase of building a prototype or advancing their ideas. This time around I met a few folks who were in beta testing ( rukku.io ).

I had also a very techie talk with Keith Fowler, who is one of the organizers and likes to talk about programming languages probably add much as I do.

The good, the better, and the best:

Overall the Meetup was about twice the size since the last time I went and the content of the speeches and presentations were at a great level. I can only recommend to go and visit one of those meetups if you are ever in the greater northern Virginia area.

Maybe it’s just me, maybe it’s the free pizza or maybe it’s the flair of the startup scene … but whatever it is, you will leave the place with a great satisfaction and who knows you may catch the startup bug.

Startup Ignite crowd
Startup Ignite crowd

Results from Fiverr for a new backdrop

I needed a new backdrop image for my YouTube Channel and while I was trying to come up with a good idea I wanted to see which results from Fiverr I could expect.

Fiverr
Fiverr

So at first I wanted to try the “Request a Gig”. However I did not appreciate that this feature is a curated feature and my request was rejected the next morning for some technical reasons. Obviously I sent in a support request because I wanted to understand what I had done wrong.

In the meantime I went ahead and was looking through the hundreds of designers who offered their services. This took about two hours of my time, which is exactly the reason I sent out the Request a Gig – request in the first place.

eventually I found a designer who had good reviews and was not asking for US $2800,- but a more reasonable $5,- for Basic, $15,- for standard, and $30 for the VIP package. Since I did not need VIP treatment but at the same time I though $5,- was on the cheap side, I went ahead and requested the $15,- standard package.

However I wanted to get at least one or two ideas / samples from him before I placed my order to avoid working with some one who is on a completely different train. So I contacted him, send him my requirements, and was surprised to see about 30 minutes later 4 screenshots with initial design suggestions.

Out of those I found one design which I considered a good starting point. So I asked him if he is willing to make some changes and replace some of the elements in the image with others. Wow, within about 15 minutes he had applied my changes.
I was impressed and wanted to place my order but he insisted that I first had to be happy with the results before I placed my order. I thought he wanted to avoid bad reviews, and as long as you don’t place an order I guess you can send a bad review ?

So anyways, long story short, it took a few hours back and forth, me on my smart phone, and he on his computer to eventually arrive to the image below.

Results from Fiverr

Backdrop created with Fiverr.

I was really happy with the results from Fiverr, and went ahead, placed my order and he sent the Adobe Illustrator file plus some rendered JPGs. However I found out that Inkscape on Linux would load the whole source file as a single Layer which was not what I wanted. So I asked him to send me the file as an SVG, which he promptly did, though yet again I could only see a single Layer.

I went again back and asked him to provide me the layers in separate layers, which he uploaded right away. All in all he provided me
12 layers
which I could then import in The GIMP in separate Layers and render to my liking.

Results from Fiverr

Overall this was a great experience and after I acknowledged the reception of my goods Fiverr offered the opportunity to give him another tip, which I gladly did.

All together, including tips and fees, I spent $27,- on the image and I had a great experience.

I have to say though that Fiverr is taking a bite out of you if you end up going for the $5,- Fiverr is charging you $1,- for a gig, Wich amounts to a whopping 16.66% of the total cost.

I will be going back and get some more artwork done for my SoftwareSamurai blog, or my YouTube Channel

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

 

Ordering a new TV

Going through the process of getting a new TV is always a stressful situation.

Wall Mount:

With our kitchen remodeling we were also in need of placing a TV over our fireplace. So the first search was for a proper wall-mount.
Finding one which fits the bill but does not bust the wallet was no easy feat and I finally ended up getting the AEON-5030, Pull-Down over Fireplace wall mount.


Pull down TV mount for fireplace - Aeon 50300

The Television:

Now this only took me an hour or two. Looking for a good TV on the other hand is a completely different beast. I wanted to get a 60 inch TV as 65 inch was too big to fit, and 50 inch seemed small by today’s standards.

So off I went to look at Walmart, BestBuy, Costco, Target and so on. Here were some of my requirements I was looking for in the new TV

  • 60 inch screen size
  • less than 60 pounds
  • 4k UHD resolution
  • Should be below $1000,-

Interestingly after some hours of wandering in the marketing forest, looking at different models of different brands, I found only one TV which fulfilled all of my requirements.

The LG 60UJ7700.

LG UJ7700

We picked our TV up at a BestBuy nearby for less than my set target of $1000,- and I am very excited about our new living room decor. I recommend you check out the LG 60UJ7700 at a store nearby, or if you like you can follow the link below and get one from Amazon.

AMAZON Affiliate link:

Now let’s talk some tech:

SUMMARY
Size 60 inch IPS display
Resolution 3840 x 2160
Display Type 4K UHD TVs
Display Format 4K UHD 2160p
HDMI Port(s) 4 (HDCP 2.2)
2 USB, 1 RF In (Antenna/Cable), 1 Composite In, 1 Component In, 1 Ethernet, 1 Optical
Operating System webOS 3.5
Active HDR with Dolby Vision™, Wider Color Gamut, Ultra
Natural Voice Recognition Yes

DIMENSIONS / WEIGHT
TV without Stand (WxHxD) 52.9” x 30.6” x 2.5”
TV with Stand (WxHxD) 52.9″ x 33.3″ x 10.7″
TV Shipping Dimensions (WxHxD) 58.7″ x 34.6″ x 6.9″
TV without Stand Weight 45.9 lbs
TV with Stand Weight 46.7 lbs

Review:

The LG 60UJ7700 features WebOS 3.5, the newest version of WebOS. As we know, WebOS is a smart TV platform which has a lot of low-level options but it still offers simple navigation. The user interface and layout is also designed attractively with strip bar at the bottom of the screen contains quick access to most of popular apps. Additionally, its performance is fast and responsive. Once an app is launched, the loading in time is very fast. Additionally, selecting between apps or multitasking also feels very responsive. Meanwhile, talking about apps provided, there are plenty of interesting and useful apps available. There are VoD apps like YouTube, Netflix, Amazon Videos, Hulu, Google Play Movies and more, web browser, LG Contents Store, Social Networking, and many more.

LG Magic Remote
The Magic Remote comes as the controller for the LG 60UJ7700. Like previous versions, there is a built-in microphone for voice navigation. The remote acts as a “point and click” input device which functions like a mouse on your PC. This certainly makes entering text, surfing the internet, and other navigation easier. However to fully enjoy those activities a external, physical keyboard with trackpad would do much better.

The use of an IPS panel causes black level and contrast produced by the LG 60UJ7700 to be weak, however this allows the LG 60UJ7700 to have a very wide viewing angle which is far better than TVs without IPS panels. This means the picture quality will look more consistent when the TV is viewed from the side.

Now as you can see from the picture below, in our case that won’t make a whole lot of a difference to us but it is worthwhile noting.

Construction Site
Construction Site

I will post some more images once we put this one up on our wall.

Wrapping it all up

Building a video doorbell requires little more than curiosity, a good grasp on software and very basic know-how on hardware.
For example, I did not even have to design or solder a single circuit so far, as the Raspberry PI Zero W allows you to use its internal pull-down or pull-up resistors.

For the past two weeks I have been working on building a Video Doorbell. I build all the pieces, connected the electronic side, and installed OS and software packages. Now we are starting to see results.

Video Doorbell Chassis:

I have finally been able to pack all into one chassis and close it in.

  • Empty chassis
    Empty chassis
    Empty chassis
  • Added electronics and screws
    Added electronics and screws
    Added electronics and screws
  • All enclosed
    All enclosed
    All enclosed

There are still a few items remaining …

  1. Add the microphone ( waiting for delivery )
  2. Properly configure WebRTC to connect from outside the home network.
  3. Write the Android / iOS apps to receive the notifications.
  4. Connecting our current wireless doorbell button to the back of the chassis.
  5. Spray paint the chassis
  6. Connecting the power source to the Video Doorbell
  7. Screwing it to the door.

I have prepared our existing doorbell button by adding two wires to overwrite the push button. These two wires will simply connect to the new button on our Video Doorbell. I will not need to worry about a power supply for this part of the system as it is powered by its own little battery. I will leave that battery in place as is.

The mechanical, and electrical challenges are nearly solved and the most important remaining bits are now in software.

Video Doorbell Software:

I created a placeholder for the required software pieces in GitHub.

Below is a screenshot from the RPI-WebRTC-Streamer web page, connecting to the camera. I have found the connection to be quite unreliable and will have to make sure that there is a much more solid connection rate possible before I go ahead and expose the interface to the outside.

Once you connect you can see that the video is upside-down. That is due to wiring constraints, which forced me to mount the camera upside-down into the chassis. However this will be an easy fix in software.

Fun-fun-fun

Today I have weed my door as the previous wires were cut and left dead. Another unexpected surprise came when I realized that there are no remaining power outlets left in the basement.

So tomorrow I will have shut down the power to our basement, wire a power strip to a power hub and screw it into the wall.