Category: Android

IoT Starter Kit for Makers

There are so many situations where you’d want to add automation to an electrical appliance, remotely control it or to keep check on it in real time.

You’d probably start by making an Arduino based hardware device with needed components / modules. Programming firmware to read values and take actions based on those values, or just publish the values online service to access them from anywhere. Last part will be to have some way to get it talking with your mobile phone.

Introducing our Flutter ESP8266 IoT Starter Kit, its two projects in one pack!

Flutter ESP8266 IoT Starter Kit – App in Dark Theme

For last few years, we’ve been doing projects which needed such automation, remote control or monitoring. We developed a template project, cloned it for every new requirement and customized as per our needs. It’s a boilerplate with all the basic requirements such as device settings, connectivity, data publishing and most importantly keeping device connected.

We decided to help other developers by releasing a ready-to-go package, full source code of a Flutter based mobile app along with ESP8266 firmware. Its available now at CodeCanyon, follow the link below:

https://codecanyon.net/item/flutter-esp8266-iot-starter-kit/29599018

Once you get copy of Flutter ESP8266 IoT Starter Kit, all you have do to is open both projects one by one in VS Code, and build. The steps are described in online documentation, which are quite easy to follow.

App Screenshots and Wiring Diagram

We just added pre-compiled APK on product website so you can try out the app as well, visit the following link for more:

https://orison.biz/projects/flutter-esp8266-iot-starter-kit/

If you have any questions, feel free to leave a comment below, I’ll try to get back to you as soon as I can.

P.S. Pre-compiled app connects and share data from live embedded device. We just replaced relay board and buzzer with LEDs so it doesn’t make noise :)

Auto Discovery for Photon Server in Unity

Unity has become my first choice for most of the projects I do. Majority of them are branded games, some with custom hardware interaction, and some just plain apps.

The best thing about Unity is, it’s easy as Flash was for quick drag’n drop design and interaction components, plus it’s way more powerful and extendable.

Now back to the topic. In one of my current projects, I started using Photon Server. It’s pretty awesome and well supported server platform for multiplayer games, and realtime apps.

Photon Server in LAN enviroement provides no auto discovery APIs in PUN SDK. While, Unity’s own networking APIs have built-in auto discovery machanism. So, I made a simple solution for my project.

Use Unity’s auto discovery APIs to broadcast server’s address, so clients can connect to server easily.

Here’s pretty simple implementation of the idea:

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Networking;
using System.Collections;

public class LanDiscoveryScript : NetworkDiscovery
{
    // Use this for initialization
    void Start()
    {
        Initialize();

        if(Application.isMobilePlatform)
        {
            StartAsClient();
            //log("Starting client...");
        }
        else
        {
            // set broadcast data as IP address
            broadcastData = Network.player.ipAddress;

            StartAsServer();
            //log("Starting Server IP: " + broadcastData);
        }
    }

    // only running as client will receive broadcast event
    public override void OnReceivedBroadcast(string fromAddress, string data)
    {
        base.OnReceivedBroadcast(fromAddress, data);

        //log("OnReceivedBroadcast: " + fromAddress + "\nData: " + data);

        // set server's IP in PUN and connect to it
        PhotonNetwork.PhotonServerSettings.ServerAddress = data;
        PhotonNetwork.ConnectUsingSettings("1.0");
    }
}

 

This is just very basic example to give you the idea, you can use it as it is, or customize it with more data sent to clients as per app’s requirement.

Imminent Death of Adobe Flash

My fellow Flash developers, this post’s title and the post is not to start a new flaming war on the subject, it’s just an opinion which you may or may not agree with.

I posted some of the following ideas in a private forum, so I thought I’d just save some typing and add some more thoughts in original forum post(s) and publish here on my blog. This post is also long overdue, so here it goes.

I think Flash is really a strong brand and awesome technology. There are certain things Adobe have done wrong in terms of strategy and vision for this technology.

Macromedia and later Adobe pushed Flash Player too hard on mobile devices. Back in 2005 when I won a t-shirt from Flash Lite competition, all the developers sent a clear message to Flash team, that on mobile, Flash apps are the future, as all the apps submitted were installable apps on Symbian OS, not mobile browser based.

Flash’s experience in mobile browser was too bad, there were no contents optimized for mobile, and Adobe tried to run existing content in mobile browser, which failed miserably. So we saw Steve Jobs’s thoughts on Flash. Which I agree to, also for lazy engineers part. The focus should’ve been on installable mobile apps from the start. For same reason Adobe had to pull the Android version. I do not see why Flash team failed to see it early.

I also noticed that Flash product team tried hard to sell the Flash Player / AIR to ODMs to embed / pre-install in devices. They did for some, like Nokia / Blackberry. Idea was a clear fail from start, as there was no way to update Flash Player / AIR until ODMs releases an OS update. Also the failed idea to get share of revenue from Flash Player based games/apps if a developer makes more than a million in a year. That was just crazy.

Pretty late, Adobe recognized and thought, oh! we should package the runtime with the app, so it will run correctly with its required version of runtime, and not depend on ODMs (we made a product SWF2Go in 2007 which did this). I can’t believe what sort of people were in Flash team who did not recognized this from the very start where I personally sent emails to Flash team, managers with same idea, am sure many other developers may have asked them the same.

Now in current situation, the only bad name Flash gets is from its Flash Player in the browser. What Flash team can do now is to split the player, one only with AS2 support, which I believe is the root cause of most security issues, and one with only AS3 runtime. This should’ve been the strategy from the start. But Adobe kept two runtimes in same player. Continuously improving on AS3 version, and deprecating the AS2 version.

We need tons of new language features in AS3, not just renamed APIs. Look at C# for example, evolution from v1 to latest. And this is really important moving forward. I do not see any new language features since AS3 was introduced with Flash Pro CS3. Here I’d like to share a post from Dave Yang’s FB feed, which summarizes exactly my point about why I and many other Flash developers held on to AS2 for too long.

DaveYang-FB-Post-Programing

For installable apps, AIR needs to drop HTML (webkit) and just keep AS3. I have not seen a single AIR app which is done with HTML, it’s a useless feature which wastes bytes with every deployment. All I see is AS3 apps and games in stores, so I always think why there’s this HTML thing in AIR, when Adobe also promotes another product PhoneGap, which does the same thing, makes mobile apps with HTML. Can anyone from Adobe tell me why AIR needs HTML support?

Also, AIR needs to support more platforms if it needs to gain some ground in future, i.e. Windows Phone / Mobile support which is top requested feature, but it seems that no one at Adobe cares anymore.

flash-cs3

Now Flash Pro, this tool was awesome until CS3. Even before that there were versions which didn’t come with new features but just re-write of the Panels system. I’ve seen so many versions of Flash Pro which just did that. The team wasted time in re-writing Panels system, instead if improving on or adding new useful features. For example, the Info Panel did not show real-time X, Y and other details when mouse was held down (fields just froze until mouse is released), until I filed a feature in CS4 (I was first time in beta), and it was implemented in CS5.5. Two versions later, because team were re-writing the Panels (lazy engineers as Jobs pointed out). Unbelievable.

There are tons of things which Flash Pro team can bring, return to the core idea which made Flash popular, Design, Timeline, Animation and Scripting them. Each of these features Flash Pro can borrow ideas from other tools. And even they can come up with a new version in one iteration which can be so new and feature rich, many designers and developers will appreciate and will upgrade for sure.

I see why Flash is dead as there’s no revenue coming from this investment for Adobe. I.e. Flash Pro CC, most are holding back on CS6 or older versions like myself. AIR is free and a developer can use AIR SDK with free FlashDevelop or other tools to make apps, so Adobe do not get anything for their investment going forward with AIR. Flash Player team also gets a bad name when we see some security issues now and then, again there’s not much revenue from Flash Player (other than the Flash Player install page which keeps trying to install some useless software along).

Update 1:

Another reason, that all my Flash developer contacts from 2004 onwards have moved on to something else around 2010-ish. Some switched technology, some even on different directions doing amazing 3D printing, embedded hardware stuff.

What Adobe needs to do is to make Flash Pro, the tool so feature rich, so awesome that developer buys a copy, like the old days of Flash 5. Make the app store prominent and attractive to developers, to buy and sell pre-built assets ready to use in projects or to extend the editor.

unity3d

Unity is a perfect example Flash team can follow. Look how they’ve not wasted time in re-writing panels, but they made Unity Editor so open that there’s a whole ecosystem for extensions. And brilliant idea of selling pre-built assets. They are making tons of money from this idea. They were able to give away free version of Unity, along with a perpetual or subscription version and cloud build. I see great strategy to make revenue from tool, and the assets store for developers. I am using free version, but I have bought extensions, from which they got something. Maybe in future I might go for Pro version as well.

There’s still time, and if Adobe can make and follow good strategy, which I currently don’t see (hence the post’s title), they can come back in game again.

BTW, about me, I am developing with Flash since 1998 (ver 3/4). Done great stuff with Flash, contributed to Flash Player (no credits) and Flash Pro (top beta tester, CS4 to first CC), and developer of SWF2Go.com, Flash Lite to Symbian app maker.

Would love to hear what you think about Flash and its future.

// chall3ng3r //

Slides and Code From Mobile Game Development with Adobe Flash Workshop

Recently I did couple of workshop for Mobile Game Development with Adobe Flash at Jinnah University for Women. In first one we covered basics and getting used to the Flash Pro IDE, and basics of ActionScript 3, Timeline, MovieClips and other concepts in Flash.

Mobile Game Development using Adobe Flash- chall3ng3r - final

In 2nd follow-up workshop, we did some intermediate experiments, and completed a game, Popcornia, with real graphics, Timeline and AS3.

[slideshare id=15617758&doc=mobilegamedevelopmentusingadobeflash-chall3ng3r-final-121213025833-phpapp02]

Download Source: mobile-game-development-with-flash-chall3ng3r.zip

The download contains full source of the game Popcornia, I did some more tweaks when I got home from workshop, so I recommend participants to download this updated version.

Ported to BlackBerry 10 OS

I ported this game for BlackBerry 10 based Z10 with very small modifications. Download full source code and batch files which use BB10 SDK command-line tools to package and signing.

// chall3ng3r //

QR Coder for Mobile Devices

Being a mobile app developer, I have to keep few devices around me all day for debugging and testing my apps. Nowadays, all smartphones come with Bluetooth, WiFi and now NFC technologies, but they all fail to talk to each other for even simple text data exchange.

I find myself in situations where I need to quickly get piece of text from one device to another. It could be a link, some text copied from browser, or SMS message I received on one device, and need to get on other device without messing around with apps or wires.

QRCoder-demo

Yesterday this idea came to my mind when I was reading a lengthy article on my HTC Titan and received system notification that I need to recharge or else phone will power off. I wanted to quickly open the same article on my Nokia E7 which I was also carrying with me.

As I described earlier, that we currently don’t have any standard way to get these devices talk to each other directly without going through the “cloud”, so I was stuck there.

I quickly jumped back to my seat, and started some experiments. After an hour I did my first test and and it was a success!

I wrote a tiny JavaScript which can be added into mobile browser’s favorites, and when you need to share current page’s link with another device, you can just go to that saved Favorite, which will execute my JavaScript, which will finally render a QR Code right on top of the page.

Now you just need to point your other smartphone or tablet camera to it with a QR Code reader app of course (built-in in WP and other OS’s), and voila! The link will now open up.

It works in PC browsers as well, so if you need to quickly open a link on your tablet or smartphone from PC, you can save this in bookmarks toolbar in IE/Chrome/FF/Safari, and click it to instantly make a QR code for current link.

I tested it on all major PC browsers, and on my Nokia E7 and HTC Titan. Works great! It should run on all mobile browsers which support editing of bookmark URL, so you can insert the code there.

BTW, I used old Google Charts APIs to make the QR codes.

And finally here’s the code which you can copy and save as favorite in your mobile browser.

javascript:(function(){function QRCoder(){var u=window,t=document,n=t.createElement("div"),r=t.createElement("img"),i;r.src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl="+window.location,n.id="QRCoder",n.style.padding="60px",n.style.border="1px solid #f00",n.style.textAlign="center",n.style.backgroundColor="#ccc",n.onclick=function(){t.body.removeChild(t.getElementById("QRCoder"))},i=t.createElement("div"),i.style.fontFamily="tahoma",i.innerHTML="tap to hide",n.appendChild(r),n.appendChild(i),n.style.zIndex=6999,n.style.position="fixed",n.style.top="10px",n.style.left=u.innerWidth/2-130+"px",t.body.appendChild(n)}QRCoder();})()

Remember, there are no line breaks in this code. It’s just one long line of JavaScript code :)

Step by step guide:

  • Select and copy the above JavaScript code. On PC, do triple-click on code to select all code
  • Open web browser on mobile or PC
  • Add / save this page as bookmark or favorite
  • Now select and edit the saved bookmark
  • In name field, type “! QRCoder”. The character in start makes sure the bookmark is always on top of the list in your bookmarks list. Easy to tap :)
  • In Location / Address field, just paste the JavaScript code you copied in first step.
  • Ok / Done to save. Now go to any website and from bookmarks / favorites, tap on “! QRCoder”

To quickly land on this page, scan this QR code from your smartphone or tablet:

qrcoder-chall3ng3r

Tested on following devices / OS:

  • PC / Mac / Linux – Check
  • iPhone, iPad – Check
  • Windows Phone 7.5 – Check
  • Symbian Anna / Belle – Check
  • Z10 / BB10 – Check
  • ToDo: Android

I know when this gets published, many non-techy users are going ask how to save this code in mobile browser as favorite. So, here’s a little video demonstration on a Windows Phone:

[YouTube link for mobile viewing]

Kindly ignore audio/video quality and any narration mistakes, this is my first ever video, done really quick :D

It’s a quick and dirty hack to solve a problem. You can also hack it further as per your liking.

I would love to hear any feedback or a tweet :)

// chall3ng3r //

Android Player for BlackBerry PlayBook – Virtual Keys

You might already know Android Player for BlackBerry PlayBook was leaked recently. It looks like pretty much intentional leak just to keep in the news while they work as slow as they can to complete it.

Anyway, I found the required files on CrackBerry forums and gave it a try. At first couple of attempts, after waiting for minutes I got some JAVA socket exception errors, but on third try, it went all fine.

The first thing I did was setup my email account so I can finally use PlayBook for some professional use, rather than just watching movies in spare time.

I was able to sync my Google Apps email, calendar and contacts easily using Android Player for PlayBook. However, there are not buttons to navigate. There’s a left to right swipe gesture on bottom bezel which works as Back command and swipe down for Options command on Android.

later, I explored the sys.android.bar and found there are actually "Virtual Keys" as PNG files for portrait and landscape orientations. So, I took a screenshot of Browser running in Android Player and Photoshop-ed the Virtual Keys PNG image on the the PlayBook screen just to get the idea how it’s gonna look. See for your self in bellow screenshot.

playbook-android-player-keys

playbook-android-player

Looks nice, and it will be quite easy to navigate within Android Player with these standard Android buttons.

I think this is a great idea to allow Android apps run on PlayBook, as we have already seen how slow RIM is coming up with native email client, which gives us the idea how future updates going to come.

Just couple of days ago I was asking from a local mobile gadgets shop to exchange my PlayBook with a Samsung Galaxy Tab. Good that I didn’t went all the way to exchange it :D

// chall3ng3r //