commit 698767481f29217ac81132f1db258516fbf5cecd
parent ffe5405492cdd037dce2cc059612535154c2d9d9
Author: rbckman <rob@tarina.org>
Date: Thu, 9 May 2024 11:54:21 +0100
better web interface
Diffstat:
5 files changed, 303 insertions(+), 28 deletions(-)
diff --git a/gonzopi.py b/gonzopi.py
@@ -134,6 +134,7 @@ def main():
showmenu = 1
showmenu_settings = True
showhelp = False
+ oldchecksync = ''
overlay = None
overlay2 = None
underlay = None
@@ -1965,6 +1966,12 @@ def main():
vumetermessage('filming with '+camera_model +' ip:'+ network + ' '+camerasconnected)
disk = os.statvfs(filmfolder)
diskleft = str(int(disk.f_bavail * disk.f_frsize / 1024 / 1024 / 1024)) + 'Gb'
+ checksync = str(int(disk.f_bavail * disk.f_frsize / 1024 / 1024 )) + 'Mb'
+ if checksync == oldchecksync:
+ rectime = ''
+ else:
+ rectime = 'SYNCING.. '
+ oldchecksync = checksync
#print(term.yellow+'filming with '+camera_model +' ip:'+ network
print(camselected,camera_recording,cameras)
#writemessage(pressed)
diff --git a/srv/gonzopiserver.py b/srv/gonzopiserver.py
@@ -17,7 +17,8 @@ if rundir != '':
urls = (
'/c/?', 'index',
- '/(.*)?', 'films'
+ '/f/(.*)?', 'films',
+ '/api','api'
)
#--------------USB filmfolder-------------------
@@ -335,5 +336,91 @@ class films:
scenes = countscenes(filmfolder, film)
return render.filmpage(allfilms, film, scenes, str, filmfolder, counttakes, countshots, shots, i.scene, takes, i.shot, i.take, checkvideo, randhash)
+
+class api:
+ def GET(self):
+ i=web.input(func=None,selected=None)
+ if i.func == 'record':
+ sendtocamera(ip,port,'REC')
+ elif i.func == 'retake':
+ print('retake')
+ elif i.func == 'up':
+ sendtocamera(ip,port,'UP')
+ elif i.func == 'down':
+ sendtocamera(ip,port,'DOWN')
+ elif i.func == 'left':
+ sendtocamera(ip,port,'LEFT')
+ elif i.func == 'right':
+ sendtocamera(ip,port,'RIGHT')
+ elif i.func == 'view':
+ sendtocamera(ip,port,'VIEW')
+ elif i.func == 'middle':
+ sendtocamera(ip,port,'MIDDLE')
+ elif i.func == 'delete':
+ sendtocamera(ip,port,'DELETE')
+ elif i.func == 'picture':
+ sendtocamera(ip,port,'PICTURE')
+ interface=open('/dev/shm/interface','r')
+ menu=interface.readlines()
+ vumeter=open('/dev/shm/vumeter','r')
+ vumetermessage=vumeter.readlines()[0].rstrip('\n')
+ menudone=''
+ p=0
+ film=None
+ if menu != '':
+ for i in menu:
+ if p == 0:
+ selected=int(i)+3
+ if p > 1:
+ if selected == p:
+ #menudone=menudone+'<b> '+i.rstrip('\n')+' </b> | '
+ menudone=menudone+'<ka style="text-decoration:none; font-size:20px;" color:fff;" href="">'+i+'</ka>'
+ else:
+ #menudone=menudone+i.rstrip('\n')+' | '
+ menudone=menudone+'<a style="text-decoration:none; font-size:20px;" href="?selected='+str(p-3)+'"> '+i+' </a>'
+ #if p == 7:
+ # menudone=menudone+'<br>'
+ #if p == 13:
+ # menudone=menudone+'<br>'
+ #if p == 21:
+ # menudone=menudone+'<br>'
+ #if p == 30:
+ # menudone=menudone+'<br>'
+ if p == 3:
+ try:
+ film=i.split(':')[1].rstrip('\n')
+ except:
+ film=None
+ if p == 4 and film != None:
+ scene=int(i.split(':')[1].split('/')[0])
+ if p == 5 and film != None:
+ shot=int(i.split(':')[1].split('/')[0])
+ if p == 6 and film != None:
+ take=int(i.split(':')[1].split('/')[0])
+ if p > 0 and selected == 423:
+ menudone=menudone+'<ka style="text-decoration:none; font-size:20px;" color:fff;" href="">'+i+'</ka>'
+ if p > 2 and film == None:
+ menudone=menudone+'<ka style="text-decoration:none; font-size:20px;" color:fff;" href="">'+i+'</ka>'
+ p = p + 1
+ thumb = ''
+ video = ''
+ if film != None:
+ if selected == 4:
+ video = '/'+filmfolder + film + '/scene' + str(scene).zfill(3) + '/scene.mp4'
+ elif selected == 5:
+ video = '/'+filmfolder + film + '/scene' + str(scene).zfill(3) + '/shot' + str(shot).zfill(3) + '/take' + str(take).zfill(3) + '.mp4'
+ elif selected == 6:
+ video = '/'+filmfolder + film + '/scene' + str(scene).zfill(3) + '/shot' + str(shot).zfill(3) + '/take' + str(take).zfill(3) + '.mp4'
+ else:
+ video = '/'+filmfolder + film + '/scene' + str(scene).zfill(3) + '/shot' + str(shot).zfill(3) + '/take' + str(take).zfill(3) + '.mp4'
+ thumb = '/'+filmfolder + film + "/scene" + str(scene).zfill(3) + "/shot" + str(shot).zfill(3) + "/take" + str(take).zfill(3) + ".jpeg"
+ if os.path.isfile(basedir+thumb) == True:
+ writemenu=menudone+'<br><br>'+vumetermessage+'<br><a href="'+video+'"><img src="'+thumb+'"></a>'
+ else:
+ writemenu=menudone+'<br><br>'+vumetermessage+'<br>'
+ f = open(basedir+'/static/menu.html', 'w')
+ f.write(writemenu)
+ f.close()
+
application = app.wsgifunc()
diff --git a/srv/static/style.css b/srv/static/style.css
@@ -5,6 +5,7 @@ body
background-color:#000;
color: #f4f4f4;
font-family: monospace;
+ width: 90%;
}
pre
@@ -19,4 +20,11 @@ pre
a
{
color: #FCD612;
+ padding: 5px;
+}
+
+img
+{
+ width: 90%;
+ max-width: 800px;
}
diff --git a/srv/templates/base.html b/srv/templates/base.html
@@ -3,7 +3,7 @@ $def with (content)
<HEAD>
<meta charset="utf-8">
<title>Gonzo Pi | a reboot of filmmaking </title>
- <link rel="stylesheet" href="/static/style.css?v=45" type="text/css" rel="stylesheet"/>
+ <link rel="stylesheet" href="/static/style.css?v=115" type="text/css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/static/jquery-3.7.1.min.js" type="text/javascript"></script>
</HEAD>
diff --git a/srv/templates/index.html b/srv/templates/index.html
@@ -1,5 +1,85 @@
$def with (films, cameras, menu, selected,name,scene,shot,take,str,randhash,thumb,vumetermessage,func,filmfolder)
+
<script>
+function Get(yourUrl){
+ var Httpreq = new XMLHttpRequest(); // a new request
+ Httpreq.open("GET",yourUrl,false);
+ Httpreq.send(null);
+ return Httpreq.responseText;
+}
+(function($$)
+{
+ $$(document).ready(function()
+ {
+ var refreshtime = 1000;
+ var oldrefreshtime = 100;
+ idleTime = 0;
+ //Increment the idle time counter every second.
+ var idleInterval = setInterval(timerIncrement, 1000);
+ function timerIncrement()
+ {
+ idleTime++;
+ if (idleTime > 1)
+ {
+ refreshtime = 1000;
+ }
+ if (oldrefreshtime != refreshtime)
+ {
+ refreshtime = 500;
+ }
+ else
+ {
+ refreshtime = 100;
+ }
+ oldrefreshtime = refreshtime;
+ }
+
+ $$.ajaxSetup(
+ {
+ cache: false,
+ beforeSend: function() {
+ $$('#content').hide();
+ $$('#loading').show();
+ },
+ complete: function() {
+ $$('#loading').hide();
+ $$('#content').show();
+ },
+ success: function() {
+ $$('#loading').hide();
+ $$('#content').show();
+ }
+ });
+
+ var myFunction = function(){
+ refresh();
+ console.log(refreshtime);
+ clearInterval(interval);
+ interval = setInterval(myFunction, refreshtime);
+ }
+ var interval = setInterval(myFunction, refreshtime);
+ });
+
+ function refresh(){
+ var $$container = $$("#menu2");
+ $$container.load('/static/menu.html');
+ $$.ajax({
+ method: "GET",
+ type: "Content-type",
+ url:"/api",
+ success: function(result) {
+ },
+ error: function(result) {
+ console.log('error', result);
+ }
+ })
+ }
+ $$(this).on('keydown', function (event) {
+ idleTime = 0;
+ refreshtime = 10;
+ });
+})(jQuery);
+
$$(document).on('keydown', function (event) {
if (event.which == 37) {
$$('#LEFT').trigger('click');
@@ -24,6 +104,7 @@ $$(document).on('keydown', function (event) {
}
});
</script>
+<input></input>
connected
<pre>use keyboard to control</pre>
$for i in cameras:
@@ -37,17 +118,8 @@ $for i in cameras:
<a href="?func=search">SEARCH</a>
</div>
+<div id="menu2" style="margin:0 auto; width:99%" ></div>
<div id="menu" style="margin:0 auto; width:99%">
-$vumetermessage
-<br>
-$ y=0
-$for m in menu[3:]:
- $if selected == y:
- <b>$m[:-1]</b>
- $else:
- <a href="?selected=$y">$m[:-1]</a>
- $ y+=1
-<br>
</div>
$if thumb != '':
$ picture= '/'+filmfolder + name + "/scene" + str(scene).zfill(3) + "/shot" + str(shot).zfill(3) + "/picture" + str(take).zfill(3) + ".jpeg"
@@ -58,23 +130,124 @@ $else:
$ take_link='/'+filmfolder + name + "/scene" + str(scene).zfill(3) + "/shot" + str(shot).zfill(3) + "/take" + str(take).zfill(3) + ".mp4"
$ scene_link='/'+filmfolder + name + "/scene" + str(scene).zfill(3) + "/scene.mp4"
$ film_link='/'+filmfolder + name + "/" +name+ ".mp4"
-$if selected == 0:
- <a href='$film_link'><img width="80%" src="$picture?$randhash"/></a><br>
-$elif selected == 1:
- <a href='$scene_link'><img width="80%" src="$picture?$randhash"/></a><br>
-$elif selected > 1:
- <a href='$take_link'><img width="80%" src="$picture?$randhash"/></a><br>
-<br>
+$if thumb != '':
+ $if selected == 0:
+ <a href='$film_link'><img width="80%" src="$picture?$randhash"/></a><br>
+ $elif selected == 1:
+ <a href='$scene_link'><img width="80%" src="$picture?$randhash"/></a><br>
+ $elif selected > 1:
+ <a href='$take_link'><img width="80%" src="$picture?$randhash"/></a><br>
+ <br>
<script>
-$$('#LEFT').on('click', function () { window.open('?func=left',"_self");return false; });
-$$('#RIGHT').on('click', function () { window.open('?func=right',"_self");return false; });
-$$('#DOWN').on('click', function () { window.open('?func=down',"_self");return false; });
-$$('#UP').on('click', function () { window.open('?func=up',"_self");return false; });
-$$('#RECORD').on('click', function () { window.open('?func=record',"_self");return false; });
-$$('#RETAKE').on('click', function () { window.open('?func=retake',"_self");return false; });
-$$('#DELETE').on('click', function () { window.open('?func=delete',"_self");return false; });
-$$('#VIEW').on('click', function () { window.open('?func=view',"_self");return false; });
-$$('#MIDDLE').on('click', function () { window.open('?func=middle',"_self");return false; });
+$$('#LEFT').on('click', function () {
+ $$.ajax({
+ method: "GET",
+ type: "Content-type",
+ url:"/api?func=left",
+ success: function(result) {
+ },
+ error: function(result) {
+ console.log('error', result);
+ }
+})
+});
+$$('#RIGHT').on('click', function () {
+ $$.ajax({
+ method: "GET",
+ type: "Content-type",
+ url:"/api?func=right",
+ success: function(result) {
+ },
+ error: function(result) {
+ console.log('error', result);
+ }
+})
+});
+$$('#DOWN').on('click', function () {
+ $$.ajax({
+ method: "GET",
+ type: "Content-type",
+ url:"/api?func=down",
+ success: function(result) {
+ },
+ error: function(result) {
+ console.log('error', result);
+ }
+})
+});
+$$('#UP').on('click', function () {
+ $$.ajax({
+ method: "GET",
+ type: "Content-type",
+ url:"/api?func=up",
+ success: function(result) {
+ },
+ error: function(result) {
+ console.log('error', result);
+ }
+})
+});
+$$('#RECORD').on('click', function () {
+ $$.ajax({
+ method: "GET",
+ type: "Content-type",
+ url:"/api?func=record",
+ success: function(result) {
+ },
+ error: function(result) {
+ console.log('error', result);
+ }
+})
+});
+$$('#RETAKE').on('click', function () {
+ $$.ajax({
+ method: "GET",
+ type: "Content-type",
+ url:"/api?func=retake",
+ success: function(result) {
+ },
+ error: function(result) {
+ console.log('error', result);
+ }
+})
+});
+$$('#DELETE').on('click', function () {
+ $$.ajax({
+ method: "GET",
+ type: "Content-type",
+ url:"/api?func=delete",
+ success: function(result) {
+ },
+ error: function(result) {
+ console.log('error', result);
+ }
+})
+});
+$$('#VIEW').on('click', function () {
+ $$.ajax({
+ method: "GET",
+ type: "Content-type",
+ url:"/api?func=view",
+ success: function(result) {
+ },
+ error: function(result) {
+ console.log('error', result);
+ }
+})
+});
+$$('#MIDDLE').on('click', function () {
+ $$.ajax({
+ method: "GET",
+ type: "Content-type",
+ url:"/api?func=middle",
+ success: function(result) {
+ },
+ error: function(result) {
+ console.log('error', result);
+ }
+})
+});
+
</script>
