RPI webpage THE QUEUE
Posted by kll on October 21 2015 17:25:41
for some month i play RPI ( systems ... ) but not really had a project,
now i want start here with a queuing system like for doctor / government office, bank...
as a special web application:
- one web page with max 9 "lines" and calling numbers 0 .. 999
- a login system for a admin and the 9 line "officers" to call the next number
- a audio output with text and number to call would be nice ( text to speech )
the RPI connects to big HDMI TV and shows in the browser that one webpage ( automatic after boot ) and from TV or extra audio amplifier the audio output.

the office desks must have a PC and call via browser same webpage from RPI. but need login ( to their line users ) to call next number
a admin must can reset all numbers to 0
and must be able to help about reset login passwords for the line officers.


step 1: RPI install apache php sql phpmyadmin
i will need to do this again on a new system setup, but here how i check /updated my current webserver:
first i was thinking of a bigger php framework like CodeIgniter ( but need 11MB )
so i follow:
apache...
phpmyadmin
sudo apt-get update
sudo apt-get install apache2 apache2-doc apache2-utils libapache2-mod-php5 php5 php-pear php5-xcache php5-mysql mysql-server mysql-client phpmyadmin

password for root sql user: mypisql
select apache2 for phpmyadmin
mypisql mypisql ( i use same password for phpmyadmin as for sql )
sudo nano /etc/apache2/apache2.conf
add line at end
Include /etc/phpmyadmin/apache.conf

sudo /etc/init.d/apache2 restart

on browser: 192.168.1.101/phpmyadmin
user root
pw mypisql




step 2: make basic webpage with user login system
now, for a internal LAN and a fixed number of users from one company a easy webpage login would do it,
but who knows, possibly the tool is so good that the service would be ONLINE?
( i would love to get the "number" at the immigration for visa extension and go some coffee shop / with free WIFI / until my number is up ).
i try to follow this, what should be secure.


DATABASE WORK:
sql cli or pypMyAdmin
DATABASE:
CREATE DATABASE `secure_login`;
DATABASE USER:
CREATE USER 'sec_user'@'localhost' IDENTIFIED BY 'eKcGZr59zAa2BEWU';
GRANT SELECT, INSERT, UPDATE ON `secure_login`.* TO 'sec_user'@'localhost';

CREATE TABLES:
CREATE TABLE `secure_login`.`members` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
`username` VARCHAR(30) NOT NULL,
`email` VARCHAR(50) NOT NULL,
`password` CHAR(128) NOT NULL,
`salt` CHAR(128) NOT NULL
) ENGINE = InnoDB;
CREATE TABLE `secure_login`.`login_attempts` (
`user_id` INT(11) NOT NULL,
`time` VARCHAR(30) NOT NULL
) ENGINE=InnoDB

CREATE LOGINUSER:

Username: test_user
Email: test@example.com
Password: 6ZaxN2Vzm9NUJT2y

INSERT INTO `secure_login`.`members` VALUES(1, 'test_user', 'test@example.com',
'00807432eae173f652f2064bdca1b61b290b52d40e429a7d295d76a71084aa96c0233b82f1feac45529e0726559645acaed6f3ae58a286b9f075916ebf66cacc',
'f9aab579fc1b41ed0c44fe4ecdbfcdb4cb99b9023abb241a6db833288f4eea3c02f76e0d35204a8695077dcf81932aa59006423976224be0390395bae152d4ef');


CREATE PHP FUNCTIONS and WEB PAGES
psl-config.php
db_connect.php
functions.php
sec_session_start()
login($email, $password, $mysqli)
checkbrute($user_id, $mysqli)
login_check($mysqli)
esc_url($url)
process_login.php
logout.php
register.php
register.inc.php
sha512.js
forms.js
formhash(form, password)
regformhash(form, uid, email, password, conf)
index.php
register_success.php
error.php
protected_page.php
the actual code can get from github


i also download from there and copy all needed files to RPI under:
/var/www/html/
and ( as database is not setup ) get

now i used phpMyAdmin SQL window and execute all above sql lines
so i have the database, the database user on this database, the 2 tables and the login user in members
but still get the same error.
there is a sql database password error:
sec_user password is eKcGZr59zAa2BEWU
but in /includes/psl-config.php see define("PASSWORD", "4Fa98xkHVd2XmnfK");
now it works:

register a new user:

login:

use protected page:



step 3: layout the ( max ) 9 line main page
now when i need a ( variable ) max 9 fields ( lines ) page can use HTML table ( old style ) or DIV
later animation ( for login users ) by scripts.
but as i just get the info about processing p5.js, why not test that first.
i just assume that hosting a p5 site is no problem on RPI,
to show it, is a different story ( browser dependent )
intro p5:
first i just try to make a easy front page with a graphic object and run it from my PC, from this server and from a RPI ( via webserver RPI and local ( XRPD ) RPI for browsertest.
-a- in firefox browser in a PC directory ok
-b- in this server see, IE9 not show anything, IE11 OK, FF 41.0.2 OK, Google Chrome Version 46.0.2490.80 m OK
-c- copy to RPI /var/www/html/processing5/..
call from PC: http://192.168.1.102/processing5/ OK
call from RDP and use browser ICEWEASEL ( that is my manually updated JESSIE SD and epiphany not work there )
file:///var/www/html/processing5/index.html or http://localhost/processing5/ OK


but even i was able to load the text and numbers from file, this is only possible from preload/setup, but not while running, so i could write the number to the file by php.. but a " static / local " page would not see that until reload... what now? use the
meta http-equiv="refresh" content="15"
even that will give some bad flickering of the page, but it gives a update ( with read from file every 15sec.
now i can try to edit the file and see the updated values: OK
to make the 9 panels in a for loop need some math, but also
a trick for the "line colors" and why not also get it from file ( #hhhhhh notation ).
i would like to say all works fine for the front end, but only on PC local path, and RPI server.. NOT on THIS SERVER??
here only see 8 panel and not time update ( until that 15sec ) and no running text on bottom??
and after some updates the server refuses it completely. possibly have to it all again in PHP HTML.
GRRR found it, only that server not see the first line of the color, so it founds only 8 and makes that error, when i include one line more ( with color ) all works??? is the "#" begin a problem? why only for this server here?


step 4: operation users call next number
here i start with a secure login php page to allow to operate / save to file /
the variable content, the called line numbers and the called text line.
the user list is fixed ( admin + 9 line users ) and coded in the operation
for the line number and the called text line. so register... not needed here.
this operation page queue_maint.php ( like the login page ) look ugly, possibly use html table / div later.

the code is php / html form / if(isset($_POST["btnXXXtForm"])) { } /
and should write to files ( what the P5 main page can read ( 15sec update ))
BUT how to write to file??
the php read i used works well:
$linenum = file('linenum.php'); // read file lines to array
all write attempts fail, i did all /var/www/ ... as user "pi", for test change back
sudo chown root:root linenum.php but still php can not write, but
sudo chown www-data:www-data linenum.php worked with
file_put_contents ('linenum.php',$linenum);
and the array to write is tricky
for ($i=0;$i<9;$i++) { $linenum[$i] = "0\r\n";} // where "\r" works, '\r' not!
for the line numbers RESET and NEXT i made a
include_once 'includes/queuefunctions.php'; with:
next_num(0); // reset all ...
i should also allow to adjust the 9 line texts


and colors and finally also the number of Queue lines used ( only admin functions ).




step 5: audio output text to speech on any next number
i found about this from here page 13.
sudo apt-get install espeak python-espeak python-tk
first i just test the examples.
i want later to play the sound via HDMI to the BIG TV what will show the main P5 page with the QUEUE numbers. But now working headless to get sound i first have to get the USB headset running again.
nano .asoundrcpcm.!default {
type plug slave {
pcm "hw:1,0"
}
}

ctl.!default {
type hw
card 1
}

and use aplay of some old recorded *.wav files. OK
check with espeak --help
now the test from terminal CLI
espeak -ven -k5 -s100 "my raspberry pi" -w "/run/shm/TtoS.wav"
aplay /run/shm/TtoS.wav

i like the "Stephen Hawking" sound, TtoS.wav
basically i want to generate a (only one ) sound file in RAM DISK
and play it ? repeatedly ?
now i only have to find out how to do above CLI commands via PHP.
i needed some time to get it, but it is not a usual multimedia web page what can play video and music,
because that would be a PHP command to put out a HTML / or java script../
to a client computers browser ( with media capabilities ) and play the sound there!
that i don't need, i want play sound ON THE SERVER computer to the server HDMI audio output
when some one change the called number or text in that webpage, from where ever.
so i play with PHP $returnstring = system($syscallstring, $retival); and i hear no sound.
while $syscallstring='ls -la'; works fine.
as we learn with the file write problem, the linux user running the PHP is www-data, and a groups www-data
show me not much, so i try to give that user audio privileges, sudo adduser www-data audio , but still not work. Also using exec(); instead of system(); no use.
finally in a 2 step i hear sound:

function audio_out($calltxt) {
$syscallstring = '/usr/bin/espeak -ven -k5 -s100 "'.$calltxt.'" -w "/run/shm/TtoS.wav" ';
//echo $syscallstring;
exec($syscallstring); // i must wait until the file is written,
// but i must not wait until the play is finished, so i want spawn the audio output
$syscallstring2 = 'nohup /usr/bin/aplay /run/shm/TtoS.wav > /dev/null 2>&1 &'; // OK
//echo $syscallstring2;
exec($syscallstring2);
}

the nohup and the & does the trick of a spawn instead of wait until sound play finished.
it works for the text input of CALL
and for the next button using:

$calltxt = "for ".$linearray[$line]." number ".$nextnum;
audio_out($calltxt);




as the stupid number file is overwritten so much, i think about to put it also in RAM DISK
i cleaned up the code, made file variables, and used /run/shm/ for call.php and linenum.php
auto generate if not exist...
all worked well in php, but in the p5 script ( main page ) i could not link to that path.
one more reason to dump that p5.js page.
OK, save it as index_p5.php and take the data essence
of the queue_maint.php for a new pure PHP index.php
and now the 2 often changed files to RAM DISK works.
p.s. you might think that with not using P5.js it would be good to change all from file to database ( like as the login user database ), well but for RPI with SD card OS still there should be no heavy writing to a database too, so the RAM DISK ( for this 2 infos ( number and call text ) ) is still the best way.
and, as mentioned, now for the PHP page i need that tabular layout.



used index.html
and the PHP QUEUE main page:

while in P5.js the line fields change the size on window resize,
the div table only does the width, a config of hight % does not work,
both can not change the text size on windows resize.
but i found some RESPONSIVE LAYOUT function to select css depending on windows size.
index_textsize.html
large.css medium.css mobile.css try it;
but no idea how to do a calculated text size Xem depending on window.


what makes this little project difficult to distribute is the
- sql / myphpadmin installation
- database setup , user and database create and table import
+ sorry, i want try a file version of the user system.
and i found it is heavy stuff, i needed to do a lot of diagnostic echo to find where the problems are,
one reason is that a login.php page calls a /includes/process_login.php page,
and both use the same /includes/functions.php but the path thinking must be different in the called functions, and now reading files is also path related ( while a sql db read was not ).
but now even the diagnostic says "login successful", my called queue_maint.php shows up as logged out. somewhere i must have changed something about the session parameters??
don't bet i get this one going.


step 6: admin tool: user / password change / reset