Remote Spark Web App

Ok, here you go… formatting the page just right with the gauge to the right of the button was pretty tricky, so I just bundled the lock/unlock function into one button to make room for a larger centered gauge for Engine Temperature:

https://github.com/technobly/Remote-Spark/tree/master/JUSTGAUGE%20DEMO

It’s pretty hacky by my standards, but I don’t have time to make it super clean and pretty… but it should get you going in the right direction! Good luck!

2 Likes

BDub, can I ask what you used to create the CSS file?

I didn’t create any CSS file… just used the one jFlasher had, the Bootstrap one, and then in the html file I have a Style block for the Gauges, and some javascript code that overrides the Bootstrap button and text input field CSS. Yeah it’s a mess but it works! I just type all of this in manually via Sublime Text 2.

BDub, I don’t do a lot of html type programming (DOH!). Are there tools for doing this more graphically?

You need to look for WYSIWYG (What you see is what you get) editors. The last one I used was Dreamweaver, but it’s kind of intense. There are probably a bazillion different free ones. Hopefully some real web developers chime in here… I just dabble here and there.

Also, you can load your HTML up in Chrome (F12) or Firefox, and then open the developer tools and tweak the CSS live to get an idea of what looks better, and then just translate your changes to your text editor. This is pretty much what I do.

Thanks BDub! :smile:

Thanks @BDub ,
This is what the I need :smiley:

@peekay123 For graphical editing is best to use Dreamweaver.
But it is not free.

Hi,
I’m looking at getting a spark core to add wifi to my auto start, and to just play around, so this looks great! I need help understanding how the app is used on an iphone. Do I have to sign up and pay apple to modify this app or even just to run it on my phone? I’m clueless as to how iphone apps are developed exactly. I recently looked into it and thought that I would either have to pay apple or jailbreak my phone just to have a custom app of my own.

Thanks, and sorry for being such a newb!

O wait, are these apps running on the web, not as an iphone app? My question still stands about creating an iphone app, but please point me in the right direction about web apps too? Thanks!

Hi @pitchlynn! This “app” is just a webpage (i.e. web app) that can be run from any browser that can run javascript. You can run this web app from your local computer, or to run it from your phone you need to upload the files to a web host somewhere. Your Core ID and Access Token are in the index.html file, so you shouldn’t make the URL public or your Spark account will likely be “messed with”. There are other ways of hiding your details by using server side PHP to dish up the webpage, without exposing your info… but that makes the whole app more complicated and I wanted to keep it as straight-forward as possible so it’s easier to digest.

Basically what’s going on here (simple yet somewhat detailed picture):

  • You load the URL containing the index.html file in your Web Client (i.e. Chrome, Safari, Firefox, etc)

  • The browser loads JQuery, Bootstrap, and whatever other javascript libraries are needed to run various functions in the index.html file

  • Your browser renders the HTML/CSS and kicks off the javascript code in the index.html file.

  • A bunch of things happen (setting up elements, overriding CSS, javascript hooks are attached to buttons), and then through javascript, some timers are started to make requests for any Variables you’ve set up. Also if you click any buttons you’ve set up for Function calls, requests are made.

  • The requests are HTTP POST and GET ajax requests that are handled through the JQuery library. These are like the curl requests from your command line (if you use curl). These requests are talking to the Spark Cloud server, requesting to pull data from your Core and/or make a function call on your Core.

  • Spark Cloud forwards the request to your Core, and the Core returns data from functions and variables. This info is returned to Cloud, and back to your Client side web app in the form of JSON data.

  • From there we pick apart what the responses were, and update the Client side HTML page through JQuery.

I just pay for web hosting since I have quite a few websites and host some for friends and family, so it’s very easy to just FTP into my website and drag and drop these files there.

:spark: If anyone knows of some good (free) web hosts for small amounts of data, please post them here and I’ll add them to my getting started sections in github for these examples.

Azure gives you 10 free websites
http://www.windowsazure.com/en-us/pricing/calculator/.

Interesting @kareem613 have you used this service? I’m thinking you need to give them your credit card up front most likely. From the pricing it looks like the limiting factor with the FREE option is 60 minutes per day use: http://www.windowsazure.com/en-us/pricing/details/web-sites/

I wonder then if you are cut off after 60 minutes, or if they just start billing you per hour used. Still though, if it really was 10 cents per hour, that’s pretty cheap as long as you don’t keep your web app open all day.

Thanks for all the info and some web hosting options. I’m looking forward to hearing more about a free host. I checked all my paid services that might include web hosting but they have all dropped that feature over the years: Local ISP, Apple Mobileme account (wife’s brother works at apple and provides her account).

Ok, found free a solution. Following google’s instructions. You simply upload your HTML file to google drive in a folder, share it, and use the WebViewLink to access the web app. Piece of cake!

This is however a public webpage that anyone can reach so that might be an issue. But if I don’t share the link with anyone maybe it safe enough for my project. Anyone have thoughts on that?

I have a thought, send me the link (in a PM)… but don’t share it with me (I would assume you’d have to add my email as a shared member)… and I’ll see if I can view it :smile: I have no desire to do anything with your ID’s if I can view it… trussst me :smile:

Hmm…haha, well I don’t even have my spark core yet (it will be here in 3 days, yippie!) But I was able to open the link on my iphone with no problem so I’m sure you could open it too. In order to host a webpage from google drive it requires that you set it to public. There is no way to do it privately or with specific people. But if I don’t give the link out then who would anyone know it was there?

@pitchlynn if you’re not doing anything that requires intense security, then “security through obscurity” (i.e. not sharing the web link) is good for prototyping. If you want a more secure mechanism, you need a more complete web-app.

We’ve been discussing building out more tutorials and examples that include building the whole web app side, and providing tools for easier prototyping.

Alternately, there is a new way! We just released a command line interface:

If you’ve ever used the command line, this is a very straightforward way to interact with your Core over the API without using curl, which is the default tool in our documentation. And if you haven’t used the command line, it’s not as scary as it sounds :slight_smile:

Zach, how can spark-cli be used on a Windows platform?

:smile:

I am looking at controlling my Spark through a web-app but want it accessible from anywhere

This seems like a good way… apart from security…

Is there a way to have this store the Core ID and Access Token within a cookie on the browser side which the user has to enter the first time they open the web page?

This will also allow one person to host a webapp… and lots of people use it with their individual cores?

I am not a web developer, just a tinkerer! So this may not be possible, but an idea?

@peekay123 Check it out! https://community.spark.io/t/tutorial-spark-cli-on-windows/3112

@gorstj Yes this would be possible. I’m not sure exactly how to do the cookies on your smartphone, but definitely cookies or local storage via chrome/firefox is doable. However, you could also just force the user to login via their Spark username/password and get access to everything that way. It would be a little bit of scripting to login, retrieve access_token, look for a list of Cores, if more than 1 present the user with a prompt for which one to use, and then embed the details in the app for the session. This is obviously not a great way to make a remote control, so a persistent login would be ideal.

If anyone has an example of this for iPhone web apps via safari (or other phones/browsers) please let me know!

1 Like