-1
<!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">
    <meta name="viewport" content = "height = 300, width = 580, user-scalable = no" /> 
    <title>RaspRover</title>
    <script type="text/javascript" src="/webiopi.js"></script>
    <script type="text/javascript">
    function init() 
    {
        var button;

        button = webiopi().createMacroButton("bt_up", "/\\", go_forward, stop);
        $("#up").append(button);

        button = webiopi().createMacroButton("bt_left", "<", turn_left);
        $("#middle").append(button);

        button = webiopi().createMacroButton("bt_stop", "X", stop);
        $("#middle").append(button);

        button = webiopi().createMacroButton("bt_right", ">", turn_right);
        $("#middle").append(button);

        button = webiopi().createMacroButton("bt_down", "\\/", go_backward, stop);
        $("#down").append(button);


    }

    function go_forward() 
    {
        webiopi().callMacro("go_forward");
    }

    function go_backward() 
    {
        webiopi().callMacro("go_backward");
    }

    function turn_right() 
    {
        webiopi().callMacro("turn_right");
    }

    function turn_left() 
    {
        webiopi().callMacro("turn_left");
    }

    function stop() 
    {
        webiopi().callMacro("stop");
    }
    webiopi().ready(init);
    </script>
    <style type="text/css">
        button {
            margin: 5px 5px 5px 5px;
            width: 50px;
            height: 30px;
            font-size: 18pt;
            font-weight: bold;
            color: black;
            background-color:yellow;
        }

        input[type="range"] {
            display: block;
            width: 160px;
            height: 45px;
        }

        img{

            width:320px;
            height:240px;
            margin-left:10px;

            left:115px;
            top:0px;


        }



    </style>
</head>
<body>
<table  width=550px>

<td id="spacing">
    <div id="up" align="center"></div>
    <div id="middle" align="center"></div>
    <div id="down" align="center"></div>
</td>






</body>
</html>






/*** this is my python file... ****/

# Imports
import webiopi
import math 

GPIO = webiopi.GPIO

# -------------------------------------------------- #
# Constants definition                               #
# -------------------------------------------------- #

# Left motor GPIOs
L1=4  # H-Bridge 1
L2=17 # H-Bridge 2

# Right motor GPIOs
R1=19 # H-Bridge 3
R2=21 # H-Bridge 4

# -------------------------------------------------- #
# Left Motor Functions                               #
# -------------------------------------------------- #

def left_stop():
    GPIO.output(L1, GPIO.LOW)
    GPIO.output(L2, GPIO.LOW)

def left_forward():
    GPIO.output(L1, GPIO.HIGH)
    GPIO.output(L2, GPIO.LOW)

def left_backward():
    GPIO.output(L1, GPIO.LOW)
    GPIO.output(L2, GPIO.HIGH)

# -------------------------------------------------- #
# Right Motor Functions                              #
# -------------------------------------------------- #
def right_stop():
    GPIO.output(R1, GPIO.LOW)
    GPIO.output(R2, GPIO.LOW)

def right_forward():
    GPIO.output(R1, GPIO.HIGH)
    GPIO.output(R2, GPIO.LOW)

def right_backward():
    GPIO.output(R1, GPIO.LOW)
    GPIO.output(R2, GPIO.HIGH)

# -------------------------------------------------- #
# Macro definition part                              #
# -------------------------------------------------- #
@webiopi.macro
def go_forward():
    left_forward()
    right_forward()

@webiopi.macro
def go_backward():
    left_backward()
    right_backward()

@webiopi.macro
def turn_left():
    left_backward()

@webiopi.macro
def turn_right():
    left_forward()

@webiopi.macro
def stop():
    left_stop()
    right_stop()



# -------------------------------------------------- #
# Initialization part                                #
# -------------------------------------------------- #

# Setup GPIOs
GPIO.setFunction(L1, GPIO.OUT)
GPIO.setFunction(L2, GPIO.OUT)

GPIO.setFunction(R1, GPIO.OUT)
GPIO.setFunction(R2, GPIO.OUT)

stop()

# -------------------------------------------------- #
# Main server part                                   #
# -------------------------------------------------- #


# Instantiate the server on the port 8000, it starts immediately in its own thread
server = webiopi.Server(port=8000, login="webiopi", password="raspberry")

# Register the macros so you can call it with Javascript and/or REST API

server.addMacro(go_forward)
server.addMacro(go_backward)
server.addMacro(turn_left)
server.addMacro(turn_right)
server.addMacro(stop)
# -------------------------------------------------- #
# Loop execution part                                #
# -------------------------------------------------- #

# Run our loop until CTRL-C is pressed or SIGTERM received
webiopi.runLoop()

# -------------------------------------------------- #
# Termination part                                   #
# -------------------------------------------------- #

# Stop the server
server.stop()

# Reset GPIO functions

GPIO.setFunction(L1, GPIO.IN)
GPIO.setFunction(L2, GPIO.IN)


GPIO.setFunction(R1, GPIO.IN)
GPIO.setFunction(R2, GPIO.IN)

The problems I'm facing are:

1.html page is not loading from my custom location, it shows the default webiopi html page...

  1. html page of [http://webiopi.trouch.com/Tutorial_Basis.html][1] is loading from custom location and working perfectly fine when executed.

need your help.. please help me out

  • Welcome to the Raspberry Pi part of the Stack Exchange network - I do have to say that this question would benefit from (further) editing - I am not that clear about what is going on. IMHO I think you need to explain a little more about your situation - what hardware is involved, what have you done to configure the set-up...? – SlySven Feb 22 '16 at 18:58
0

Have you tried opening it using http://[Pi's IP address]:8000/HTMLFileName.html?

You sometimes need to explicitly mention your HTML file's file name. Make sure the Python file and the HTML file are in the same folder.

  • ya i have tried this. the method suggested by you is when you save the html folder in htdocs of webiopi. my custom webpage is not loading even though i have specified the path in config file. it shows the default webpage. – shubham bhuyan Feb 23 '16 at 5:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.