I am a fairly seasoned embedded programmer, but the Cloud is new to me. Is there a good resource to learn (top down fashion) about cloud functions etc. I have put together the over-the-net LED blink code, and embedded the HTML code on a page on my web site. It works, but I understand why only on a superfical level. I dont know the cloud mechanics behind it. Googling ‘Cloud tutorial’ or similar just gives a too wide range of hits.
Help appreciated.
Erlend
I’m not entirely sure whether there are resources available (yet?), but I can attempt to explain it crudely. I’ll throw a bunch of terms around which you can either Google about, or ask for more info here 
So, you’ve got the devices (Core/Photon/Electron/whatever), the Cloud (servers), and the client (user owned computer, devices, etc).
Let’s say you want to call a function.
Upon connection to the cloud (over TCP if I’m not mistaken), the device will broadcast its information (exposed variables, functions, and some special information regarding firmware versions). That will get registered in the cloud, and is exposed over a REST API. These are the HTML endpoints you make HTTP requests to, in order to get your desired information/action.
So, when you call a function with an HTML request, this gets processed at the REST endpoint. This checks whether the function is available (and the device is online, obviously), after which it will send the necessary information to the device over TCP.
The cloud is mainly the middle man that will pass your HTTP request on to the relevant device.
Getting a variable:
Device tells the cloud about exposed functions/variables when connected.
HTTP request -> REST endpoint -> cloud TCP to device -> device TCP to cloud -> REST endpoint back to your HTTP request.
Since it mostly (completely?) runs on node.js, you might want to investigate that specifically. I suspect they’re using something like Express to set up their endpoints, but they’d have to confirm that.
Anyhow, this is how I suspect it works. No guarantees that it does. Confirmation, or further explanation, from @dave would be nice. Alternatively, you could dive in to the Local Cloud, and see how that works. Should be very similar.
Thanks, that’s one step on the way. I want to get where I am fluid at putting together the HTML code I need to embed into my web pages - and write the photon code accordingly. And understand why it works.
Erlend
In that case, I’d suggest using the Javascript library, since that should abstract away quite a bit of the messy HTML requests that you have to make. You don’t really need to understand what’s going on ‘inside’ the cloud to get it to do what you want it to do. You can see it as a magical black box which spews out the things you requested, provided you requested it correctly. For creating HTML pages, you don’t need to know what’s going on in there. If you were to hack at the local cloud, then that would come in handy.
You can find the cloud API over here if you want to find out what endpoints are available: https://docs.particle.io/reference/api/
Touché, @BulldogLowell
Hi @Erlend,
A good place to start would be to checkout the Cloud functions available in the firmware here:
https://docs.particle.io/reference/firmware/photon/#cloud-functions
and the api reference will also help you discover what’s available:
https://docs.particle.io/reference/api/#devices
The CLI also wraps access to the API, so it’s a nice tool to use when getting familiar with the cloud:
And you can use something like Spark-JS / Particle-JS to use the api as well:
But in general our getting started guide tries to walk you through the various tools and resources that are available here:
https://docs.particle.io/guide/getting-started/intro/photon/
Thanks!
David
Thanks - I am busy reading.
Erlend
This is daunting. JSON is new to me. JS I know only superficially. The concept of webhooks is new. And more.
Is there an easy way for me to create a web page which will display some of my photon’s variables, and will have buttons to command some of it’s functions? One that is annotated preferably?
Maybe it is easyer for me to learn by ‘immersion’ instead of first learn all the new stuff first.
Erlend
Here you'll find a brilliant tutorial put together by the even more brilliant @bko
I’ve made a page like that using the javascript library, should you be interested. You can find it over here: http://jordymoors.nl/interface, along with the code on GitHub (check the link at the bottom of the page).
It’s not as daunting as it may appear. JSON is simply a way to structure data, and javascript isn’t too bad either. The neat thing is that it runs on both the client as well as the server, saving you the headache of learning different stacks.
Thanks. I am delving into @bko’s tutorials now - they are perfect for my brain. I am getting my hope back ; )
Erlend
The link you provided brings me to my own device overview page…?
If that's referring to the link in my last post, then nope. It guides you to a page I created using the Javascript library which gives you an overview of your devices, their variables, and their functions. It also allows you to interact with those, easily.
It's not a tool made by Particle (since I don't work for them), but it's merely a hacked together 'thingy' to try out the library. It turned out to be useful for quick/easy testing, which is why I still use it.
You log in to the Particle cloud with your credentials. That returns an API accesstoken. Using that, information about your devices is requested and displayed accordingly. You can use that same key to issue commands or requests variables.
Isn't that pretty much what you asked for when you said the following?
If not, then please elaborate on what it is that you're trying to achieve?
Sorry, I was confused by seeing the name of my own photon there.
Actually what I am trying to achieve is the skills to build a project like the @bko tutorial on a servo-adjuster, and an other on coffee machine monitor. So right now I am drilling into his tutorial which e.g. uses the HTML5 Input Type Range as a means of accepting user input on servo positioning. I am now struggling to find a way to set the size of this control - it does not seemto take width and heigth parameters.
Erlend
Hi @Erlend
See this page
look for the section “Styling the Slider”. In summary you need CSS (which you can put in your web page).
Thank you - I am just diving into it:
I couldn’t resist!input {
color: brown;
width: 50%;
}
button {
width: 12%;
}
does the trick in a simple way. Now I’ll folow your link.
Erlend
If that's the endgoal, then you needn't worry about what happens 'inside' the cloud. It's not really relevant as long as you know what happens when you put something specific in, and know what to expect as output.
In that case, you'd better spend your attention on HTML/CSS/Javascript. With those three, you should be able to go a long way on the internet 
With the CSS you used, ALL input and button elements will receive that styling. Try looking into CSS classes, which you can use to create custom CSS for certain elements. Should be better suited.
Thanks. Although I do not need to worry about what happens inside the cloud I still want to understand - at least superficially - what goes on. But for now I am happy to pursue the route you suggesting. CSS is actually quite fascinating stuff, and I have always wanted the HMI to look good, so it is rewarding in that respect to learn about it.
Have found a good resource for learning here: http://www.w3schools.com/css/css_list.asp
Erlend
Of course it’s okay to learn about it, it’s fascinating stuff. Luckily it’s not required to be able to build webpages like that. For those kinds of things, knowing the in- and output suffices. Once you start working on your own servers side applications things start to get a bit more interessting, albeit more complicated.
The mean stack is a great example of this. It uses Node.js to run the server, Express for the routing, MongoDB as a NoSQL database, and AngularJs as the front-end interface. It’s a full stack, all coded in JavaScript, which you can use to create some neat applications with.
At that point you can start creating your own server logic to handle things on the server. It provides a lot of flexibility, provided you have some sort of clue what you’re doing. I, for one, am still struggling with the latter. But playing around with that stack did gave me some insight into how servers like that can operate. That’s where I drew my estimate for the Particle Cloud from, since it’s based on the same technologies.
W3schools provide some awesome resources. It’s one of my default open tabs when trying to do any sort of web development. They have some great tutorials/examples.
If you’re interested in creating fancy user interfaces, you might want to look into AngularJS, and perhaps more particular Angular Material. It adheres to the ‘material design spec’ by Google to create a recognizable, good looking, interface, for both mobile as well as desktop applications. Pretty neat Its also particularly well suited to create single page applications, which require no page refresh to navigate around, providing a smoother overall experience
I’d suggest playing around with JavaScript until you’re rather comfortable with that, before attempting to do so, since AngularJS can be quite daunting at first.
Moving forward. Found this place
https://jsfiddle.net/leaverou/BNm8j/
-so now my code is:
input[name=degBox] {
-webkit-appearance: none;
color: brown;
width: 400px;
background-color: silver;
height: 40px;
}