create account

Blinkit | Standalone device v1.2 - User experience improvements by techtek

View this thread on: hive.blogpeakd.comecency.com
· @techtek · (edited)
$154.88
Blinkit | Standalone device v1.2 - User experience improvements
Ideal the users that uses the Blinkit standalone device should not need to do any coding related things. best would be when the device is turned on for the first time, it could be setup over WiFi with just the use of a mobile phone.

![](https://cdn.steemitimages.com/DQmVz2HXQqFJL54bTL1EW8KFmMyDed5g2fe4kUch1yihsAN/image.png)

![](https://i.imgur.com/wZKGQFa.png)

 

# WiFi Connectivity improvements

With this latest version, when the user turns the device on for the first time, the device will create a WiFi accesspoint "Blinkit Setup", connect a mobile phone or pc to the "Blinkit Setup" accesspoint, open a browser and enter the, WiFi credentials  of it and a Steem Username on the presented web-interface. Press save, and the device will switch to WiFi client mode and will now connect to the saved WiFi network with the saved Steem username on each boot. Connected to the internet and ready to Blink and beep on newly received Steem upvotes. 

Once the device is setup, it can be reset from within the the Blinkit web interface with a presented reset link.

When the device is brought to a other location (and / or out of the range of the previously saved WiFi network) it wont be able to connect, and therefor will enter back into WiFi hotspot mode, ready to receive new settings.



**How is it implemented?**


To make it possible for the device to switch between WiFi Accesspoint mode and Client mode, "WiFiManager" library is used, after researching, this was the most complete solution for the task, it did need a lot of trial and error, and each error on a Arduino takes around a minute to recompile and upload to the device, which can be a very annoying bottleneck for testing and troubleshotting things. (i think i spotted a few new grey hairs in my beard)


To add Wifimanager's functionality into the Blinkit stand alone device, the following is added to it's code:

-  
- WiFiManager hotspot mode is set to start with password protection, password: 87654321 (documented in the readme as well)
- edited WiFiManager.h changed the text and button colours to be in line with Blinkit
- WiFiManagers presented options are limited to only the once that are required for Blinkit.  "Configure Wifi"

 

WiFiManager implementation:

![](https://i.imgur.com/IofqX5O.png)





 

WiFiManager is a very awesome library for Arduino and the esp8266 , ...once all is up, and running and you get the "hang of it". But then the moment comes where it would be nice to  also save additional parameters for later use, and this is not handled by WiFimanger, presenting the additional settings with WiFiManager is a feature, but saving is not, and the quest continued to find and test how to do this, after a lot of searching and testing multiple approaches and days later, i finally found a Arduino project that makes use of WiFiManager and also adds and saves additional parameters. 


After merging the parts that make it possible to save and reload the saved additional parameter, it still didn't work, and it tuned out that the latest version of the AruinoJSON library (that by default is highlighted, is not supporting the required things) So be sure to NOT install the latest beta version and use the stable version.

It finally all worked,  some minor thing is that i would wanted to make the code more pretty, by renaming the variables to Blinkit related variabel names. (instead of blynk and blynk_token, which is related to the Blynk project, (and is where the code comes from) at this moment multiple attempts to do this have failed, and the decision for now is to keep the names like this, and i will try again to make this more pretty. In the last 2 weeks of development for this project i learned a lot and i'm sure this "issue" can also be fixed, by me or when the team members receive there boards, with the help of the team.  But for now it is working as required.

 

  ![](https://i.imgur.com/DJx9Z8G.png)
  
*When the device is turned on for the first time it creates a WiFi accesspoint "Blinkit Setup", connect to the WiFi network and browse to the setup page, and press the "Configure WiFi button"*


 

 



![](https://i.imgur.com/jYIhbSL.png)


*Select a available WiFi network you want to connect to, enter it's username and password, and enter in your, or someones Steem username you want to get upvote notifications for, and press save. The device will reboot and try to connect to the saved WiFi network, if it fails it will start the Wifi accesspoint mode again.*

 




 

 







# Splashscreen, Main screen icons, and other improvements

The previous version did not have any graphics displayed on the screen and had only text, but this new version have images: A Blinkit logo for the splashscreen, sound on/off icon, WiFi signal strength icon, and in front of the total received upvotes is a Upvote icon.


 

![](https://i.imgur.com/n5DTvjK.jpg)

*When the device starts a new splashscreen with Blinkit logo is shown.*


 

![](https://i.imgur.com/wZKGQFa.png)
*When the device is booted and is connected it shows the new mainscreen with the total recieved upvotes and the new animated icons for WiFi and Sound.*

**How is it implemented ?**

Made images need to be black and white and and a full screen image displayed on the oled screen would be 128x32 pixels (the resolution of the display.) the saved images needs to be converted to a XBM format (use a online converter) once converted open the image file with a text editor and the presented code can be used inside the Arduino sketch, to show the image on the oled display.  

- To show in the mainscreen the Sound icon and the WiFi signal icon if statements are used to determine what icon to show. 

![](https://i.imgur.com/VoNln3W.png)
*Storing the Upvote icon that is presented on the oled display*

 

 


![](https://i.imgur.com/Ok9QNvf.png)

*Showing the mute and unmuted sound icons when there state is changed*

 

Other improvements

- Readme is updated with the steps on how to install this new version. 

- A reset link is added to the Blinkit web interface that send to the web server the command to make the device reset the saved values. And to let the user know the device is resetting, the displays shows a text, to let the user now the reset is done.

![](https://i.imgur.com/IXiIdui.png)
*Code that makes the device do a "factory" reset.*

 

- The Blinkit .SVG logo in the web interface was generating some unexpected errors and it turned out that browsers don't like it being vector that much and instead of using a SVG vector image file with additional code to make it work, it is now changed to a more general .PNG image file.

![](https://i.imgur.com/fDxgPDv.png)
*Blinkit webinterface opened on a Mobile phone*

 

The previous posted version got suggestions from Utopian mod on things to improve on, the following point where fixed in this version as well: Changed to the suggested html breaks, removed dead code, removed white spaces.

 

The INO file is renamed to not include the version number, this is done so it can be overwritten on each commit and the progress of the work can be highlighted by Github.

 

## The Blinkit repository is updated

https://github.com/techtek/Blinkit

#### latest commit: [Blinkit v1.2](https://github.com/techtek/Blinkit/commit/a879e701d374d7eadb6d2685b273b85730aca54f) 

 


The following files are updated / added


- [Blinkitstandalone.ino](hhttps://github.com/techtek/Blinkit/commit/a879e701d374d7eadb6d2685b273b85730aca54f#diff-fe6449eb7fceb15a3ece3f5c17f7689e) 
- [Readme](https://github.com/techtek/Blinkit/commit/a879e701d374d7eadb6d2685b273b85730aca54f#diff-42271dbd4d4f55ca431cd4b7db454089)
- WiFiManager library



 

Thanks for reading and supporting the Blinkit project, if you want to get in contact, or want to help to contribute to the Blinkit project, please feel free to join the [Blinkit Discord server](https://discord.gg/73h8XqP) More details about blinkit can be found on the  [Blinkit website](https://techtek.github.io/Blinkit/)
πŸ‘  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 14 others
properties (23)
authortechtek
permlinkblinkit-standalone-v1-2-or-user-experience-improvements
categoryutopian-io
json_metadata{"tags":["utopian-io","development","blinkit","fundition-fk501ncfv","steemdev"],"image":["https://cdn.steemitimages.com/DQmVz2HXQqFJL54bTL1EW8KFmMyDed5g2fe4kUch1yihsAN/image.png","https://i.imgur.com/wZKGQFa.png","https://i.imgur.com/IofqX5O.png","https://i.imgur.com/DJx9Z8G.png","https://i.imgur.com/jYIhbSL.png","https://i.imgur.com/n5DTvjK.jpg","https://i.imgur.com/VoNln3W.png","https://i.imgur.com/Ok9QNvf.png","https://i.imgur.com/IXiIdui.png","https://i.imgur.com/fDxgPDv.png"],"links":["https://github.com/techtek/Blinkit","https://github.com/techtek/Blinkit/commit/a879e701d374d7eadb6d2685b273b85730aca54f","hhttps://github.com/techtek/Blinkit/commit/a879e701d374d7eadb6d2685b273b85730aca54f#diff-fe6449eb7fceb15a3ece3f5c17f7689e","https://github.com/techtek/Blinkit/commit/a879e701d374d7eadb6d2685b273b85730aca54f#diff-42271dbd4d4f55ca431cd4b7db454089","https://discord.gg/73h8XqP","https://techtek.github.io/Blinkit/"],"app":"steemit/0.1","format":"markdown"}
created2018-08-04 23:43:42
last_update2018-08-04 23:49:00
depth0
children14
last_payout2018-08-11 23:43:42
cashout_time1969-12-31 23:59:59
total_payout_value117.354 HBD
curator_payout_value37.527 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length8,107
author_reputation28,283,249,927,543
root_title"Blinkit | Standalone device v1.2 - User experience improvements"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,136,039
net_rshares100,332,518,456,910
author_curate_reward""
vote details (78)
@fundition ·
$0.06
**This project is being supported by @Fundition**

Fundition is a next-generation, decentralized, peer-to-peer crowdfunding and collaboration platform, built on the Steem blockchain.

#upfundition and #fundition tags on Steem represent the projects that are started on [https://fundition.io](https://fundition.io).

Are You Prepared to Make the World a Better Place too?

#### Read the full details of [Fundition Fund program](https://fundition.io/#!/fundprogram)
#### Learn more about Fundition by reading our [purplepaper](https://purplepaper.fundition.io)
 </sub> https://cdn.steemitimages.com/DQmaYfT3fnb6ZyqYLhjHQf3dtSMHiEE8XbThZK6eEhAG542/fundition-large.png 
 <sub><a href="https://fundition.io">**Join a community with heart based giving at its core**</a></sub> 
 <a href="https://steemit.com/fundition">![steemitf.png](https://cdn.steemitimages.com/DQmX3cy15dCdj13UHEXJweXi56Ke7wPygVATXTn9M4nJXnP/steemitf.png)</a><a href="https://twitter.com/funditionio">![twitterf.png](https://cdn.steemitimages.com/DQmNpvrZZwovgVjvFzECahb1Rxn3DHW44qQRR6ezKaW5tZm/twitterf.png)</a><a href="https://www.youtube.com/channel/UCLap9JqoF57ual0kjw5S_2w">![youtubef.png](https://cdn.steemitimages.com/DQmb4sujNswmgi3U9HMZhPrzewtnBiq4h2meN2GTGHFncZs/youtubef.png)</a><a href="https://www.facebook.com/funditionofficial">![facebookf.png](https://cdn.steemitimages.com/DQmY4Uc6ocy3pf5743kevVwY8vSta8s1AZEyXnRaQKRuE8P/facebookf.png)</a><a href="https://www.instagram.com/funditionofficial/">![instaf.png](https://cdn.steemitimages.com/DQmNSCP9MBQ6ND6nEJM7Tw3tHAHSqeXpUpspaoA9BVSSVqd/instaf.png)</a><a href="https://discord.me/fundition">![discordf.png](https://cdn.steemitimages.com/DQmSxkY56B9RZWXmhUyybUR7ZtsJAf2BHHyH2pGoFLLRaH2/discordf.png)</a>
πŸ‘  
properties (23)
authorfundition
permlinkre-techtek-blinkit-standalone-v1-2-or-user-experience-improvements-20180805t072726084z
categoryutopian-io
json_metadata{"tags":["utopian-io","upfundition","fundition"],"users":["fundition"],"image":["https://cdn.steemitimages.com/DQmaYfT3fnb6ZyqYLhjHQf3dtSMHiEE8XbThZK6eEhAG542/fundition-large.png","https://cdn.steemitimages.com/DQmX3cy15dCdj13UHEXJweXi56Ke7wPygVATXTn9M4nJXnP/steemitf.png","https://cdn.steemitimages.com/DQmNpvrZZwovgVjvFzECahb1Rxn3DHW44qQRR6ezKaW5tZm/twitterf.png","https://cdn.steemitimages.com/DQmb4sujNswmgi3U9HMZhPrzewtnBiq4h2meN2GTGHFncZs/youtubef.png","https://cdn.steemitimages.com/DQmY4Uc6ocy3pf5743kevVwY8vSta8s1AZEyXnRaQKRuE8P/facebookf.png","https://cdn.steemitimages.com/DQmNSCP9MBQ6ND6nEJM7Tw3tHAHSqeXpUpspaoA9BVSSVqd/instaf.png","https://cdn.steemitimages.com/DQmSxkY56B9RZWXmhUyybUR7ZtsJAf2BHHyH2pGoFLLRaH2/discordf.png"],"links":["https://fundition.io","https://fundition.io/#!/fundprogram","https://purplepaper.fundition.io","https://steemit.com/fundition","https://twitter.com/funditionio","https://www.youtube.com/channel/UCLap9JqoF57ual0kjw5S_2w","https://www.facebook.com/funditionofficial","https://www.instagram.com/funditionofficial/","https://discord.me/fundition"],"app":"steemit/0.1"}
created2018-08-05 07:27:30
last_update2018-08-05 07:27:30
depth1
children1
last_payout2018-08-12 07:27:30
cashout_time1969-12-31 23:59:59
total_payout_value0.046 HBD
curator_payout_value0.015 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,732
author_reputation67,180,851,310,507
root_title"Blinkit | Standalone device v1.2 - User experience improvements"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,164,039
net_rshares40,284,908,892
author_curate_reward""
vote details (1)
@techtek ·
Thanks for the support, much appreciated
properties (22)
authortechtek
permlinkre-fundition-re-techtek-blinkit-standalone-v1-2-or-user-experience-improvements-20180805t225921931z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-08-05 22:59:21
last_update2018-08-05 22:59:21
depth2
children0
last_payout2018-08-12 22:59:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length40
author_reputation28,283,249,927,543
root_title"Blinkit | Standalone device v1.2 - User experience improvements"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,235,207
net_rshares0
@helo ·
$0.09
* I like your new approach to track changes on github.
* Good job on bridging the world of software and hardware.


Your contribution has been evaluated according to [Utopian policies and guidelines](https://join.utopian.io/guidelines), as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, [click here](https://review.utopian.io/result/3/1212111).

---- 
Need help? Write a ticket on https://support.utopian.io/. 
Chat with us on [Discord](https://discord.gg/uTyJkNm). 
[[utopian-moderator]](https://join.utopian.io/)
πŸ‘  , ,
properties (23)
authorhelo
permlinkre-techtek-blinkit-standalone-v1-2-or-user-experience-improvements-20180806t122815981z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"links":["https://join.utopian.io/guidelines","https://review.utopian.io/result/3/1212111","https://support.utopian.io/","https://discord.gg/uTyJkNm","https://join.utopian.io/"],"app":"steemit/0.1"}
created2018-08-06 12:28:15
last_update2018-08-06 12:28:15
depth1
children1
last_payout2018-08-13 12:28:15
cashout_time1969-12-31 23:59:59
total_payout_value0.080 HBD
curator_payout_value0.007 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length605
author_reputation121,547,934,535,311
root_title"Blinkit | Standalone device v1.2 - User experience improvements"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,292,696
net_rshares59,804,639,673
author_curate_reward""
vote details (3)
@techtek ·
Thank you for moderating and reviewing the post
properties (22)
authortechtek
permlinkre-helo-re-techtek-blinkit-standalone-v1-2-or-user-experience-improvements-20180806t123729822z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-08-06 12:37:30
last_update2018-08-06 12:37:30
depth2
children0
last_payout2018-08-13 12:37:30
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length47
author_reputation28,283,249,927,543
root_title"Blinkit | Standalone device v1.2 - User experience improvements"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,293,549
net_rshares0
@steemmakers ·
$0.06
<div class='pull-right'><center><a href='http://www.steemmakers.com'><img src='https://www.steemmakers.com/img/comment_logo_makers.png' /></a></center></div><b>Congratulations</b> This post has been upvoted by SteemMakers. We are a community-based project that aims to support makers and DIYers on the blockchain in every way possible. <br/><br/>Join our <a href='https://discord.gg/EFGbRuW'>Discord Channel</a> to connect with us and nominate your own or somebody else's posts in our review channel.<br/><br/><b>Help us to reward you for making it !</b> Join <a href='https://www.steemmakers.com/#/Trail'>our voting trail</a> or <a href='https://www.steemmakers.com/#/Delegation'>delegate steem power</a> to the community account. <br/><br/>Your post is also presented on the community website <a href='http://www.steemmakers.com'>www.steemmakers.com</a> where you can find other selected content. <br/><br/>If you like our work, please consider upvoting this comment to support the growth of our community. Thank you.
πŸ‘  
properties (23)
authorsteemmakers
permlinkre-techtek-blinkit-standalone-v1-2-or-user-experience-improvements-20180806t065530224z
categoryutopian-io
json_metadata""
created2018-08-06 06:55:18
last_update2018-08-06 06:55:18
depth1
children1
last_payout2018-08-13 06:55:18
cashout_time1969-12-31 23:59:59
total_payout_value0.043 HBD
curator_payout_value0.013 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,019
author_reputation1,907,312,584,548
root_title"Blinkit | Standalone device v1.2 - User experience improvements"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,267,841
net_rshares39,196,390,174
author_curate_reward""
vote details (1)
@techtek ·
Thanks for the support, much appreciated
properties (22)
authortechtek
permlinkre-steemmakers-re-techtek-blinkit-standalone-v1-2-or-user-experience-improvements-20180806t111008090z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-08-06 11:10:09
last_update2018-08-06 11:10:09
depth2
children0
last_payout2018-08-13 11:10:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length40
author_reputation28,283,249,927,543
root_title"Blinkit | Standalone device v1.2 - User experience improvements"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,286,122
net_rshares0
@techtek ·
Testing standalone module - upvotes
properties (22)
authortechtek
permlinkre-techtek-blinkit-standalone-v1-2-or-user-experience-improvements-20180812t143630265z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-08-12 14:36:30
last_update2018-08-12 14:36:30
depth1
children5
last_payout2018-08-19 14:36:30
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length35
author_reputation28,283,249,927,543
root_title"Blinkit | Standalone device v1.2 - User experience improvements"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,959,670
net_rshares0
@techtek ·
test
πŸ‘  
properties (23)
authortechtek
permlinkre-techtek-re-techtek-blinkit-standalone-v1-2-or-user-experience-improvements-20180812t143650522z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-08-12 14:36:51
last_update2018-08-12 14:36:51
depth2
children4
last_payout2018-08-19 14:36:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length4
author_reputation28,283,249,927,543
root_title"Blinkit | Standalone device v1.2 - User experience improvements"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,959,696
net_rshares567,656,369
author_curate_reward""
vote details (1)
@techtek ·
test
πŸ‘  
properties (23)
authortechtek
permlinkre-techtek-re-techtek-re-techtek-blinkit-standalone-v1-2-or-user-experience-improvements-20180812t143858106z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-08-12 14:39:00
last_update2018-08-12 14:39:00
depth3
children3
last_payout2018-08-19 14:39:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length4
author_reputation28,283,249,927,543
root_title"Blinkit | Standalone device v1.2 - User experience improvements"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,959,890
net_rshares567,656,369
author_curate_reward""
vote details (1)
@utopian-io ·
$0.07
Hey @techtek
**Thanks for contributing on Utopian**.
We’re already looking forward to your next contribution!

**Want to chat? Join us on Discord https://discord.gg/h52nFrV.**

<a href='https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1'>Vote for Utopian Witness!</a>
πŸ‘  
properties (23)
authorutopian-io
permlinkre-blinkit-standalone-v1-2-or-user-experience-improvements-20180808t225009z
categoryutopian-io
json_metadata"{"app": "beem/0.19.42"}"
created2018-08-08 22:50:09
last_update2018-08-08 22:50:09
depth1
children1
last_payout2018-08-15 22:50:09
cashout_time1969-12-31 23:59:59
total_payout_value0.054 HBD
curator_payout_value0.017 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length299
author_reputation152,955,367,999,756
root_title"Blinkit | Standalone device v1.2 - User experience improvements"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,572,639
net_rshares54,442,388,836
author_curate_reward""
vote details (1)
@techtek ·
Thank you
properties (22)
authortechtek
permlinkre-utopian-io-re-blinkit-standalone-v1-2-or-user-experience-improvements-20180808t225009z-20180809t140951673z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-08-09 14:09:51
last_update2018-08-09 14:09:51
depth2
children0
last_payout2018-08-16 14:09:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length9
author_reputation28,283,249,927,543
root_title"Blinkit | Standalone device v1.2 - User experience improvements"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,645,798
net_rshares0