Help with GGI call, Problem passing cgi parameters Options

[Pallama]

Hi. I am a senior citizen, complete noob writing some of my first html.

I have an IP PTZ security cam.

I’m trying to create an HTML interface for my raspberry pi / touch screen monitor.

The cam responds to the most common hi3510 cgi commands. However I think the cam doesn’t like Ajax.

I am having a hard time passing the below “preset location “ and the param.cgi arguments to the cam. They work in a browser bar but not in a script. The touch screen shows the buttons but nothing happens when I push them.

I have tried both the function call and the full url in the input statement. Neither works.

function ptzloc1()
{Uh
form1.action="http://192.168.1.247/web/cgi-bin/hi3510/param.cgi?cmd=preset&-act=goto&-status=1&-number=0";
form1.submit();
}

#And here is the input I’ve tried.


<div style = "position:absolute; left:80px; top:31px;">
<p>
<input type="button"; value="1" name="B4" onClick="http://192.168.1.247/web/cgi-bin/hi3510/param.cgi?cmd=preset&-act=goto&-status=1&-number=0">
<input type="button"; value="1" name="B4" onClick="ptzloc1()">

As I’ve said, it doesn’t seem to like Ajax since the cam has an “if (request == null) “ test in it but suggestions are welcome.

[pandy]

Hi and welcome to the forum.

The first button...

CODE

<input type="button"; value="1" name="B4" onClick="http://192.168.1.247/web/cgi-bin/hi3510/param.cgi?cmd=preset&-act=goto&-status=1&-number=0">

... the value of onclick needs to be like this.

CODE

<input type="button"; value="1" name="B4" onClick="window.location.href='http://192.168.1.247/web/cgi-bin/hi3510/param.cgi?cmd=preset&-act=goto&-status=1&-number=0'">

The function call I think will be fine if you remove the "Uh" you have at the start of the function. Where did that come from?

CODE

function ptzloc1()
{
   form1.action="http://192.168.1.247/web/cgi-bin/hi3510/param.cgi?cmd=preset&-act=goto&-status=1&-number=0";
   form1.submit();
}

Alternatively you could use the same method as with the second button.

CODE

function ptzloc1()
{
   window.location.href='http://192.168.1.247/web/cgi-bin/hi3510/param.cgi?cmd=preset&-act=goto&-status=1&-number=0'
}

I move this to the client side scripting forum, since it's more about JavaScript than HTML.

[Pallama]

Thanks. I will give this a try.
The Uh was a transcription error and was not in the script. I must have been dumbing out loud. 🤣

[pandy]

Well, the function seems to work even if the page times out. I guess your server isn't running.

[Christian J]

If you just want to make a GET request (i.e., a URL with a query string, the part of the URL after the "?" character) then an ordinary link should work just as fine:



------------ CODE SAMPLE ----------
<a href="http://192.168.1.247/web/cgi-bin/hi3510/param.cgi?cmd=preset&-act=goto&-status=1&-number=0">foo</a>
-----------------------------------


There's no need for javascript. Also, the javascript tries to submit a form, but the HTML example shows no FORM element, just a couple of buttons (you could use an Ajax request instead of submitting an HTML form, but that's unnecessarily complicated). BTW, your example uses plain javascript, not Ajax

But if you instead need to make a POST request (i.e., a form submission without using a query string), a form could be used for that.

[pandy]

Oh darn! I'm sorry, Christian. I wrote in your post...

But I managed to mend it by pasting in the text from the notification email. I think you made an edit though that I couldn't get back.

You are right. I didn't look too close since it worked for me (without the Uh) and I'm sleepy too. Now that I've realized there is no form I think it shouldn't work at all. Maybe the form is implied in some browsers and not in others? That would explain why it didn't work for the OP. but does for me.

Christian is right. If you choose to use the script version you should also have a complete form.

[Pallama]

Oh darn! I'm sorry, Christian. I wrote in your post...

Christian also pointed out that no form or JS is needed really. You could just use a normal link with the URL with query string.

I think I was right about the form being implied in k-mel. It doesn't seem to work in Edge and Crhome. Hard to say since they lack status bar, but I waited pretty long and nothing happened.

Trying to think through your response. If you like I can give you access to the cam and the full script. Let me know.
I tried both the changes you suggested
and the camera moves to location 1, (THANK YOU) but the browser jumps from the local html file I run (call it c:/testA.html) to the URL http://192.168.1.247/web/cgi-bin/hi3510/pa...1&-number=0

and displays

[Succeed]set ok.

instead of the stream

How do I stay on the streaming page?

[pandy]

Afraid I don't know about that. Maybe Christian understands it better.

A part of my sloppy post above got lost when I fixed it - but you quote that bit partly.

As you quote, I suspected that some browsers may see the form as implied which would explain why it worked for me (without the uh) but didn't for you. It seems that's the case. Your formless version does not work in Edge and Chrome, I think. It's hard to know since the server isn't up and those browser lack a status bar, but I waited pretty long and nothing happened. With k-meleon I see in the status bar that it tries to go to the requested URL and then it eventually times out.

But as said, you should use a complete form if you go with that version.

[Christian J]

Oh darn! I'm sorry, Christian. I wrote in your post...

No problem pandy, it looks mostly intact.

[Christian J]

How do I stay on the streaming page?

You could load the new URL in an IFRAME. Give links a TARGET attribute value that's the same as the IFRAME's NAME value, and the new pages should open inside the IFRAME instead:

CODE

<a href="http://192.168.1.247/web/cgi-bin/hi3510/param.cgi?cmd=preset&-act=goto&-status=1&-number=0" target="ifr">foo</a>

<iframe name="ifr"></iframe>

BTW, do you use some protection, so that not anyone from the Internet can get access to the web server at http://192.168.1.247/?

[pandy]

Oh, the streaming page is the page with the form? It sounded more advanced.

[Pallama]

Sorry, I am still struggling. Here is the entire script
I tried the ifr but the "foo" link takes me back to the cgi response: "[Succeed]set ok."

Re: security, I could be doing better. I think the camera is not very secure (here). The cam is ethernet wired, wireless disabled, my router has wireless with WPA2/WPA mixed personal, but the cam broadcasts rtsp and has a built in access through CamHiPro (which I need when I travel.)

Here is the starting code with PTZLOC buttons that don't work.

CODE

<html>
<head>
<title>Video Mobile</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<script src="http://192.168.1.247/web/cgi-bin/hi3510/param.cgi?cmd=getlanguage" type="text/javascript"></script>
<script type="text/javascript" src="http://192.168.1.247/web/js/language.js"></script>
<script language="javascript">
<!--
var img = new Image();
var imgObj;

function preload()
{
    img.src='http://192.168.1.247/web/tmpfs/auto.jpg?'+new Date;
}

function changesrc()
{
    img1.src=img.src;
    preload();
    setTimeout(changesrc,3500);
}

function update()
{
    imgObj = document.getElementById('img1');
    
    imgObj.src = img.src;
    img.src = "http://192.168.1.247/web/tmpfs/auto.jpg?" + (new Date()).getTime();
}

function takeError()
{
    img.src = "http://192.168.1.247/web/tmpfs/auto.jpg?" + (new Date()).getTime();
}

function startonload()
{
    img.src = "http://192.168.1.247/web/tmpfs/auto.jpg?" + (new Date()).getTime();
    img.onerror=takeError;
    img.onload=update;
}

function load()
{
    if (navigator.appName.indexOf("Microsoft IE Mobile") != -1)
    {
        preload();
        changesrc();
        return;
    }
    startonload();
}

function ptzUpSubmit()
{
    form1.action="http://192.168.1.247/web/cgi-bin/hi3510/ytup.cgi";
    form1.submit();
}

function ptzDownSubmit()
{
    form1.action="http://192.168.1.247/web/cgi-bin/hi3510/ytdown.cgi";
    form1.submit();
}

function ptzLeftSubmit()
{
    form1.action="http://192.168.1.247/web/cgi-bin/hi3510/ytleft.cgi";
    form1.submit();
}

function ptzRightSubmit()
{
    form1.action="http://192.168.1.247/web/cgi-bin/hi3510/ytright.cgi";
    form1.submit();
}

function ptzloc1()
{
       form1.action="http://192.168.1.247/web/cgi-bin/hi3510/param.cgi?cmd=preset&amp;-act=goto&amp;-status=1&amp;-number=0";
    form1.submit();
}

function ptzloc2()
{
    form1.action="http://192.168.1.247/web/cgi-bin/hi3510/param.cgi?cmd=preset&amp;-act=goto&amp;-status=1&amp;-number=1";
    form1.submit();
}

function ptzloc3()
{
    form1.action="http://192.168.1.247/web/cgi-bin/hi3510/param.cgi?cmd=preset&amp;-act=goto&amp;-status=1&amp;-number=2";
    form1.submit();
}

function ptzloc4()
{
    form1.action="http://192.168.1.247/web/cgi-bin/hi3510/param.cgi?cmd=preset&amp;-act=goto&amp;-status=1&amp;-number=3";
    form1.submit();
}

function ptzloc5()
{
    form1.action="http://192.168.1.247/web/cgi-bin/hi3510/param.cgi?cmd=preset&amp;-act=goto&amp;-status=1&amp;-number=4";
    form1.submit();
}

function ptzloc6()
{
    form1.action="http://192.168.1.247/web/cgi-bin/hi3510/param.cgi?cmd=preset&amp;-act=goto&amp;-status=1&amp;-number=5";
    form1.submit();
}

function ptzloc7()
{
    form1.action="http://192.168.1.247/web/cgi-bin/hi3510/param.cgi?cmd=preset&amp;-act=goto&amp;-status=1&amp;-number=6";
    form1.submit();
}

//-->
</script>
</head>
<body onLoad="load()">
<form name="form1" method="get" target="test">
</form>
<div style = "position:absolute; left:80px; top:20px;">  
<p>
<input type="button"; value="&and;" name="B3" onClick="ptzUpSubmit()">
<input type="button"; value="&or;" name="B2" onClick="ptzDownSubmit()">
<input type="button"; value="&lt;" name="B1" onClick="ptzLeftSubmit()">
<input type="button"; value="&gt;" name="B0" onClick="ptzRightSubmit()">
<button type="button"; name="B4" onClick="location.reload()"><script type="text/javascript">document.write("REFRESH");</script></button>
</p>
</div>
<div style = "position:absolute; left:400px; top:20px;">  
<p>
<input type="button"; value="1" name="B4" onClick="ptzloc1()">
<input type="button"; value="2" name="B5" onClick="ptzloc2()">
<input type="button"; value="3" name="B6" onClick="ptzloc3()">
<input type="button"; value="4" name="B7" onClick="ptzloc4()">
<input type="button"; value="5" name="B8" onClick="ptzloc5()">
<input type="button"; value="6" name="B9" onClick="ptzloc6()">
<input type="button"; value="7" name="B10" onClick="ptzloc7()">
</p>
</div>
<p><img id="img1" border="0" src="tmpfs/auto.jpg"></p>
<iframe name="test" style="none" width="0" height="0"></iframe>
</body>
</html>

This post has been edited by Pallama: Jan 3 2021, 01:50 PM

[Christian J]

I tried the ifr but the "foo" link takes me back to the cgi response: "[Succeed]set ok."

In my example you'd need separate links for every URL shown in your javascript code sample.

But I don't know what some of the scripts in your code same is doing, like this part:

CODE

<script src="http://192.168.1.247/web/cgi-bin/hi3510/param.cgi?cmd=getlanguage" type="text/javascript"></script>
<script type="text/javascript" src="http://192.168.1.247/web/js/language.js"></script>

--did you get your code sample from some documentation?

Anyway, the code example your latest does show a FORM element, but with the buttons outside it (a strange solution that may or may not work). You could try placing the </form> end tag after the buttons instead, but I haven't tested myself.

[Pallama]

In my example you'd need separate links for every URL shown in your javascript code sample.

But I don't know what some of the scripts in your code same is doing, like this part:

CODE

<script src="http://192.168.1.247/web/cgi-bin/hi3510/param.cgi?cmd=getlanguage" type="text/javascript"></script>
<script type="text/javascript" src="http://192.168.1.247/web/js/language.js"></script>

--did you get your code sample from some documentation?

Anyway, the code example your latest does show a FORM element, but with the buttons outside it (a strange solution that may or may not work). You could try placing the </form> end tag after the buttons instead, but I haven't tested myself.

The code is from the Jidetech cam "mobile" page "http://192.168.1.247/web/mobile.html" which I am trying to modify just to put ptzloc1-7 buttons on.
There are several other pages on the cam server including a web/admin page which controls cam parameters and settings but don't seem relevant to what I am trying to do with the mobile page, which is to put an autostart on my touchscreen raspberry pi near my door in kiosk mode. I have not tested the Pi yet, debugging in windows and ubuntu first.

The getlanguage is a line from the original script of the cam to set the interface language. Obviously I can delete it if I am the only user.

The programming is apparently ancient and all over the web (search hi3510) but the one I have been relying in is shown HERE