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:
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:
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.
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:
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:
