User avatar
MinecraftTom16
Posts: 54
Joined: Wed Nov 08, 2017 4:29 am
Location: Bandung,Indonesia
Contact: Skype

HTML power button

Tue May 14, 2019 1:35 pm

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.

User avatar
topguy
Posts: 5617
Joined: Tue Oct 09, 2012 11:46 am
Location: Trondheim, Norway

Re: HTML power button

Tue May 14, 2019 2:07 pm

What is the web-server that is running on the Raspberry Pi ?

User avatar
MinecraftTom16
Posts: 54
Joined: Wed Nov 08, 2017 4:29 am
Location: Bandung,Indonesia
Contact: Skype

Re: HTML power button

Wed May 15, 2019 6:51 am

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.

gkreidl
Posts: 5997
Joined: Thu Jan 26, 2012 1:07 pm
Location: Germany

Re: HTML power button

Wed May 15, 2019 7:31 am

kweb (MInimal Kiosk Browser) supports executing any kind of command from inside local HTML files (link, button, form or hidden).
Minimal Kiosk Browser (kweb)
Slim, fast webkit browser with support for audio+video+playlists+youtube+pdf+download
Optional fullscreen kiosk mode and command interface for embedded applications
Includes omxplayerGUI, an X front end for omxplayer

User avatar
topguy
Posts: 5617
Joined: Tue Oct 09, 2012 11:46 am
Location: Trondheim, Norway

Re: HTML power button

Wed May 15, 2019 12:17 pm

Im guessing threadstarter ( and me too ) would like to see an example of that in HTML.

gkreidl
Posts: 5997
Joined: Thu Jan 26, 2012 1:07 pm
Location: Germany

Re: HTML power button

Wed May 15, 2019 5:47 pm

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.
Minimal Kiosk Browser (kweb)
Slim, fast webkit browser with support for audio+video+playlists+youtube+pdf+download
Optional fullscreen kiosk mode and command interface for embedded applications
Includes omxplayerGUI, an X front end for omxplayer

Return to “Other programming languages”