Blynk web-client

avin · February 3, 2019, 8:16pm

Hello guyz! I really love Blynk but I’m very sad there is no web client for it

So I started to implement my own web-client for Blynk to view projects in browser on PC and other non Android/IOS devices.

Check out my progress here https://github.com/avin/blynk-web-client

Online version: http://blynk-client.surge.sh
Latest builded version you can host yourself: https://github.com/avin/blynk-web-client/archive/gh-pages.zip

Currently some widgets may be buggy or not full functional yet, but I’m working on it) If you find it usefull and found something not working for you - give me know using issues on github.

mikekgr · February 3, 2019, 10:40pm

I will check it tomorrow.
Many thanks for your contribution to this, something that is missing from lot of us…

Thanks and Best Regards,
Mike Kranidis

Gunner · February 3, 2019, 11:20pm

Something is rumored to be coming along with Blynk 2.0

Meanwhile, I like how your version simply grabs all the project info and tries to replicate it.

OK, so it will not replace my “desktop” Arduino emulator, yet But a very good start!

ThatGuy_ZA · February 4, 2019, 5:10am

Any chance you could elaborate on this? Is this why we haven’t been seeing any server updates in a while?

Gunner · February 4, 2019, 5:57am

No. I am only repeating what I see here from the Devs.

And last server update was only 21 days ago, isn’t that recent enough for a fairly mature system??

scropion86 · February 4, 2019, 6:02am

is think the alignment and functionality still not working fine

the web client

the Blynk dashboard

Gunner · February 4, 2019, 6:04am

Probably becasue it is dealing with an unknown entity called tabs… thus grabbing widgets it can recognise and landing them all on the same level.

I would call this an early Alpha stage, so still very good for that.

avin · February 4, 2019, 7:15am

Thank you for reply! TABs are reason of this problem - I’ll implement them as soon as possible

ErfanDL · February 4, 2019, 7:44am

thanks avin. can we install it on a local server ?

Gunner · February 4, 2019, 7:48am

I can answer that… Yes, it doesn’t install (EDIT - looks like there is an install option) but runs on your browser, so as long as that PC/browser is in the same network, just type in your Local Server IP (LAN) and port.

It shows as an unsecure link… but I really don’t know much about all that, so I hope it is not downloading all my “pirated” movies

avin · February 4, 2019, 8:10am

Yes, sure. But currently you have to build it yourself (I plan to make build-releases later, when the app will be more stable)

I added build instructions to readme file at https://github.com/avin/blynk-web-client

avin · February 4, 2019, 8:17am

I made link to simple HTTP (non HTTPS) because default browser security policy do not allow to make connections to non secure sources (http and ws) from https hosted webpage
But any way you can use https if it works well for you https://blynk-client.surge.sh

ErfanDL · February 4, 2019, 9:35am

thanks. now I’m building from source for testing on my server

ErfanDL · February 4, 2019, 10:25am

@avin
I’m build on my local server it’s running and logged in to my device but the button not working when I’m pressed

Capkture

also the button is not working from: http://blynk-client.surge.sh/

avin · February 4, 2019, 1:45pm

@scropion86 TABs are implemented now, check this out!
@ErfanDL - buttons logic has beed fixed, it should works fine now

scropion86 · February 5, 2019, 7:50am

now it looks fine , but Buttons not changing STATES correctly , Blynk app status not reflect to the WEB UI and also the Opposite

i assumed because of Geo Location and Server IP i got the server that my APP is connected to and added that to your WEB UI and still not working

also the notification widget apearing as below

scropion86 · February 5, 2019, 8:08am

Note >>
My project has 6 separate tokens , you WEB UI is importing the entire project based on API http://blynk-cloud.com/auth_token/project
but only the token which entered in WEB UI connection details will only reflect and work fine

i think you need to allow for entering multiple Token for project such mine

but i don’t know how to set the Token based on the Device ID mostly Blynk App is Get the Token by query it against the Device ID from Database

here is my setup

 "devices": [
{
  "id": 0,
  "name": "hall 1",
  "boardType": "ESP8266",
  "vendor": "hall 1",
  "connectionType": "WI_FI",
  "isUserIcon": false
},
{
  "id": 16707,
  "name": "hall 2",
  "boardType": "ESP8266",
  "vendor": "hall 2",
  "connectionType": "WI_FI",
  "isUserIcon": false
},
{
  "id": 84239,
  "name": "living ",
  "boardType": "ESP8266",
  "vendor": "living ",
  "connectionType": "WI_FI",
  "isUserIcon": false
},
{
  "id": 63795,
  "name": "bed",
  "boardType": "ESP8266",
  "vendor": "bed",
  "connectionType": "WI_FI",
  "isUserIcon": false
},
{
  "id": 26617,
  "name": "kids",
  "boardType": "ESP8266",
  "vendor": "kids",
  "connectionType": "WI_FI",
  "isUserIcon": false
},
{
  "id": 92188,
  "name": "touch",
  "boardType": "ESP8266",
  "vendor": "touch",
  "connectionType": "WI_FI",
  "isUserIcon": false
}

],

avin · February 5, 2019, 8:43am

Thank you for reply, I should dig in more deeply

avin · February 5, 2019, 4:29pm

Yo! I have just added ability to use multi-tokens projects with this client - just paste all tokens of your project and it should works fine.

Here is an example of using some tokens (keep tokens order, it should be like mobile client gave them to you)

Link is the same http://blynk-client.surge.sh

ErfanDL · February 5, 2019, 6:04pm

Thanks its nice. But the push button not working