I'm a noob and new to web-development and i'm overwhelmed with the multitude of languages. I got the basic understanding on whats going on but I still don't know where I am getting stuck.
I have a DS18B20 connected to my Raspberry Pi and I am able to fetch the temperature in the terminal. I am running the WebIOPi successfully as well and able to see the temperature in its default web page under Devices. So I was hoping to create my own web page that would do the exact same thing with other options for future. I got a hold of some tutorials on WebIOPi and i got 4 files. An HTML file, the JavaScript file, the CSS file and a Python file. In my understanding the HTML file contains the logic and links to other things like clickable buttons and backgrounds etc. The CSS file contains the background and maybe text, the JavaScript file contains animation and buttons? Here I get confused. Last but not least the Python file is what runs the code that contains sensor model and libraries. I configured the Webiopi config file with my sensors serial number as mentioned here: http://webiopi.trouch.com/OneWireTemp.html. I am loosely trying to follow this tutorial where I got most parts of the code: http://webiopi.trouch.com/Tutorial_Devices.html.
Now when I log into the webpage from my browser the background is displayed correctly, but nothing else. There is no box or button showing the temperature. Pictures are attached. I was hoping for a button like attached in the picture.
Any guidance or help would be appreciated!
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebIOPi | UNB Temperature</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
<script type="text/javascript" src="/scripts/bacon.js"></script>
<link rel="stylesheet" type="text/css" href="/styles/bacon.css">
<script type="text/javascript">
// declare few global variables
var tmp;
webiopi().ready(init);
// defines function passed to webiopi().ready()
function init() {
// setup helpers to remotely control devices
tmp = new Temperature("tmp");
// automatically refresh UI each seconds
setInterval(updateUI, 1000);
}
// function called through setInterval
function updateUI() {
// call Temperature.getCelsius REST API
// result is asynchronously displayed using the callback
tmp.getCelsius(temperatureCallback);
}
// callback function used to display the temperature
function temperatureCallback(sensorName, data) {
// jQuery functions
$("#bt_heater").text(data + "°C");
}
bacon.js
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div align="center">
<button id="bt_mode" onclick="toggleMode()"/><br>
<button id="bt_heater" onclick="toggleHeater()"/>
</div>
</body>
</html>
bacon.css
body {
background-color:#000000;
background-image:url('/img/wall.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
script.py
import webiopi
GPIO = webiopi.GPIO
AUTO = True
def loop():
if (AUTO):
tmpwebiopi.deviceInstance("tmp")
celsius = tmp.getCelsius()
print ("Temperature: %f" % celsius)
webiopi.sleep(1)
I do not know about your specific case, but to me it seems quite obvious that there is nothing to see here. You have been mixing up things quite a bit.
To clarify things
This is quite coarse and might deviate, but it should suffice as a start and should apply here.
The obvious errors in your code
script-section, there should be markup defining the buttons you want to display. Currently there is none, hence there is nothing to see (but the HTMl-body, which is added automatically - and since the background color is defined for the body it is displayed)All in all your HTML file should look more like this.