Genauso geht es mir auf Arbeit auch: Es werden fancy GUIs gemalt und dann, am Schluss wird noch geklärt, ob das überhaupt möglich ist. Ob sich die Daten auch performant beziehen lassen.
Web Interface suggestion
-
-
Websocket + JSON wäre schon sinnvoll wenn man eh schon so viel neu macht. Man muss halt klein anfangen. Dann ist es auch nicht direkt unfassbar viel (immer noch genug)
Ich kann auch immer helfen, nur kann ich nicht alles selbst bauen.
EN:
Websocket & JSON would be nice, too. Considering the amount of Work for a new frontend a proper backend is kind mandatory.
I can Help/Support but currently I cant do all the work
-
Ich bin nicht wirklich der WebEntwickler und schon gar nicht der Grafiker. Idealerweise würde die e2-JSONAPI erweitert, oder? Wenn du bei Vue schaust, würde Axion für den Aufruf der API zur Anwendung kommen.
-
-
Installier dir mal enigma2-plugin-systemplugins-jsonapi. Da kommt ein json zurück. Wenn du hier nach jsonapi suchst, findest du sogar ein Beispiel. Die API müsste fürs webif noch sehr stark ausgebaut werden
-
-
-
Im Browser wird schwierig, da du dort nur die URL eingeben kannst und das immer GET sind. Ich hab die Aufrufe bei mir über twisted abgesetzt. Da kann ich sagen, dass der Aufruf mit POST gemacht werden soll. Den data-binary-Teil als postdata. Und zwar den dict über json.dump zu nem JSONObject konvertiert.
Bei Axios scheint das so zu gehen:
-
Im Chrome und Firefox geht das prinzipiell auch. Dafür kann man z.B. Javascript Konsole und fetch() nutzen: https://stackoverflow.com/a/50610235
Wenn es dir ums einfache testen geht: Das geht neben cURL auch wunderbar mit PowerShell: https://docs.microsoft.com/en-…request?view=powershell-7
Es geht natürlich auch mit Python, Java, etc.
-
Ich würde den Postman empfehlen, der ist genau für das Testen von Webservices gedacht: https://www.postman.com/
-
JavaScript
Alles anzeigen<div id="test"> {{ message }} </div> <script> const test = new Vue({ el: '#test', data () { return { message: null } }, mounted () { axios .post('/api/call', { method: 'enigma2.systeminfo.modelname', id: 0 }) .then(response => {this.message = response.data.result }) .catch(error => { console.log(error) }) } }) </script>
Einfach mal so quick & dirty eingebaut. Der Modelname wird angezeigt. Aber z.B. error-Handling ist noch nicht sauber drin. Auch SessionId habe ich auf 0 gesetzt.
-
Hi,
mit Postman klappte der Aufruf der JSON APi schon gestern ohne Probleme.
Mit axion und vue.js bekommen ich:
CodeAccess to XMLHttpRequest at 'http://dm900.fritz.box/api/call' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Ich weiss nicht wie ich das umgehen kann...
-
Hm, den Fehler hab ich nicht erhalten. Habs allerdings nur mit http://ip-adresse/api/call und mit /api/call versucht. Kriegst du den Fehler auch, wenn du nur /api/call als URL übergibst?
-
HTML
Alles anzeigen<!DOCTYPE html> <html lang="en" <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="chrome"> <title> Vue.js Testseite</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="test"> {{ message }} </div> <script> const test = new Vue({ el: '#test', data () { return { message: null } }, mounted () { axios .post('http://dm900.fritz.box/api/call', { method: 'enigma2.systeminfo.modelname', id: 0 }) .then(response => {this.message = response.data.result }) .catch(error => { console.log(error) }) } }) </script> </body> </html>
So klappt es nicht , was mache ich hier falsch ?
-
das ist wegen Cross-origin policy. Ich führe den Aufruf direkt im WebIf der Dreambox aus.
-
Hi, so weit bin ich schon gekommen , dachte man kann es evtl. umgehen ?
Wie rufst du es im WebIF der Dreambox genau auf ? Meine die index.html ( mit demDreambox Browser)?
Ich stehe aktuell auf der Leitung..
-
Ich hab mir vue.js und axion.min.js heruntergeladen und nach web-data/lib kopiert (im WebInterface-Ordner). Dann hab ich einfach in der index.html die beiden libs includiert. Meinen Code hab ich dann einfach eingefügt am Ende. Wie gesagt, q&d. Dann ruf ich das WebInterface am PC auf. Dann bin ich nicht cross-site.
Im Schluss sollte das WebInterface ja dann ohne Anbindung ans Internet auch funktionieren. Deshalb hab ich die libs heruntergeladen. Und der Aufruf der API wird ja auch immer same-origin sein.
Noch ein Zusatz: du kannst deine index.html auch auf die Box kopieren in web-data/tpl/default und dann aufrufen. Sie darf dann natürlich nicht mehr index.html heissen
-
Danke für die Erklärung !
-
Das json API Plugin würde ich eher nicht nehmen. Lieber was neues, schlankes und sehr "straightes".
So einfach wie nur möglich zu nutzen .
Idealerweise halt noch mit optionalem Websocket, das kann man aber ggf auch nachrüsten.
-
Ok now we sparked life into this issue
But please please could we stick to English language?? and yes i know that Dream Multimedia is an German company but we are many users/developers like me, who are not speaking or writeing in German
And the Web Interface would be a fun project to work with and make more modern, for the moment i have adapted the OpenSource WebIf to my Dreambox One UltraHD
but thats just a temporary solution. But what i get is an docked remote and a much faster user interface with no flicker and wating for screenshots to update.
So there is possible to cerate soemthing amazing