Page 1 of 1

HTML power button

Posted: Tue May 14, 2019 1:35 pm
by MinecraftTom16
I am making a web-based GUI for a raspberry pi HTPC box using HTML, and i wanted to add a power button to the menu. i have searched everywhere but i can't find a simple way to link HTML code and the Raspbian system. can someone tell me a way to simply add a virtual button to my website that shuts down the pi? :?:
BTW sorry if i posted this in the wrong place, but HTML is another programming language... so i thought i could maybe post it here.

Re: HTML power button

Posted: Tue May 14, 2019 2:07 pm
by topguy
What is the web-server that is running on the Raspberry Pi ?

Re: HTML power button

Posted: Wed May 15, 2019 6:51 am
by MinecraftTom16
this is going to be a local file, i'm not going to access it from other devices. i chose HTML because i know it the best. i want to get some code that i can put into the HTML, to make an image into a power button.

Re: HTML power button

Posted: Wed May 15, 2019 7:31 am
by gkreidl
kweb (MInimal Kiosk Browser) supports executing any kind of command from inside local HTML files (link, button, form or hidden).

Re: HTML power button

Posted: Wed May 15, 2019 12:17 pm
by topguy
Im guessing threadstarter ( and me too ) would like to see an example of that in HTML.

Re: HTML power button

Posted: Wed May 15, 2019 5:47 pm
by gkreidl

Code: Select all

<a href="file:///homepage.html?cmd=leafpad"><button>Text Editor</button></a>
creates a button to open Leafpad.

Code: Select all

<a href="file:///homepage.html?cmd=sudo%20shutdown%20-h%20now"><button>Shutdown</button></a>
creates a button to shut down your RPi. Commands like that will be executed inside a terminal, which allows entering your password, if needed. This can be prevented by special settings.

There are two more types which allow executing kweb's keyboard or text commands:

Code: Select all

<a href="file:///homepage.html?kbd=q"><button>Quit Browser</button></a>

Code: Select all

<a href="file:///homepage.html?txt=!de_DE"><button>German (DE)</button></a>
This will select German language for the spell checker.

The following example will create a menu which lets you select and execute a program:

Code: Select all

<form name="execute" accept-charset="utf-8"
enctype="application/x-www-form-urlencoded" method="get"
action="file:///homepage.html">
<select name="cmd">
<option value="lxterminal">Terminal</option>
<option value="leafpad">Text Editor</option>
<option value="omxplayergui">omxplayerGUI</option>
</select>
<input value="Execute" type="submit"><br>
</form>
To execute hidden commands, create a small invisible iframe with a special command link as src attribute. Such commands will be excuted when the page is loaded.

Read the manual if you want to know more.