Remote Control Web Interface

[phenze]

As explained here : https://github.com/bk1285/rpi_wordclock/issues/18 @bk1285 has implemented a new way to communicate with the wordclock (socket connection)

For the Remote Control to work we need another Web Interface which uses this socket connection

I would do this with node.js since apache will be a little bit oversized. This node.js Server can then by started with the wordclock. I think i will get this working.

@fecub can you please explain how you get your server working ?

@bk1285 : Any other suggestions ?

[fecub]

@euchkatzl https://github.com/fecub/rpi_wordclock/blob/remote_controller/wordclock_tools/wordclock_socket.py It runs on his own thread.

class wordclock_socket(threading.Thread):
    def __init__(self, config):
        # server things
        # self.bind_ip   = "127.0.0.1"
        self.bind_ip = "192.168.0.132"
        self.bind_port = 10001
        self.server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
        self.server.bind((self.bind_ip,self.bind_port))
        self.server.listen(5)  # starts listening

        # property
        self._request =''
        self.tmp=''

        self.button_left = int(config.get('wordclock_interface', 'pin_button_left'))
        self.button_return = int(config.get('wordclock_interface', 'pin_button_return'))
        self.button_right = int(config.get('wordclock_interface', 'pin_button_right'))

        self.virtual_button_left = int(config.get('wordclock_interface', 'virtual_pin_button_left'))
        self.virtual_button_return = int(config.get('wordclock_interface', 'virtual_pin_button_return'))
        self.virtual_button_right = int(config.get('wordclock_interface', 'virtual_pin_button_right'))

        threading.Thread.__init__(self)

        print (bcolors.OKGREEN + "[*] Listening on %s:%d" % (self.bind_ip, self.bind_port) + bcolors.ENDC)

in wordclock.py, i've added this line, to init the socket self.wso = wso.wordclock_socket(self.config)

passed object to a plugin over run(wcd, wci, wso): and via remote_event = wso.waitForEvent(0.5) listening for request.

def waitForEvent(self, seconds):
        while True:
            returnvalue = -1
            if (self.request() == "bleft"):
                print("bleft girdi")
                returnvalue = 17
            if (self.request()== "bmiddle"):
                print("bmiddle girdi")
                returnvalue = 22
            if (self.request() == "bright"):
                print("bright girdi")
                returnvalue = 24

            self.set_request("")
            return returnvalue

        time.sleep(seconds / 10)

you can send any command to socket. For first test, i send commands from client like "bleft" "bmiddle" "bright".

[phenze]

@fecub Yes this is the socket code for the wordclock ! But we need a external WebPage with interacts with the Wordclock over this Socket Connection (as a client). For this we need a Web Server to display that page.

Have you done that already ? Or how did you "talk" to your socket ?

[mrksngl]

Hi @fecub you should base your work on the current "development" branch, it will be merged to master eventually. AND: we did already something similar in that branch :)

[fecub]

@euchkatzl No I have don't created a Webpage. I've written only a very primitive small python client on my socket implementation. Which interacts with the running socket on the clock. For test purposes, not more.

# example usage: python client.py bmiddle
import socket, sys

# create a socket object
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

# get local machine name
# host = socket.gethostname()
host = '192.168.0.132'
#host = '127.0.0.1'
port = 10001

if(len(sys.argv) <= 1):
    print("no option")
    print("option: bleft, bmiddle or bright")
    sys.exit() 

# connection to hostname on the port.
s.connect((host, port))
s.send(str(sys.argv[1]))
# Receive no more than 1024 bytes
tm = s.recv(1024)

s.close()

print("Answer from Server: %s" % tm.decode('ascii'))

But I saw that the new socket implementation of @bk1285 . It accepts json, which is not compatible with the above code.

@mrksngl ah ok missed it :)

[bk1285]

Hi all! Wow! Very busy here today. Great to see all the discussion! :) @euchkatzl I'd take webpy into consideration. Since we use python already to run the wordcock, I think this is a quite convenient way to setup a webserver and provide some webcontent (allowing templated html-files via Templator as well as css-styling, if needed). I did already some tests with it. To avoid double work, you can take a look there, as soon as I pushed the work (I try to get that done soon! ;)

To keep a common understanding of the progress, please check https://github.com/bk1285/rpi_wordclock/projects/2 Besides the buttons, I'd consider the most important interfaces for a next release to be the Android-app and the web-interface, discussed in this issue.

Regards, Bernd

[phenze]

Alright great ! Looking forward to see your work !

[mrksngl]

@euchkatzl @bk1285 I pushed my work (changes on the clock and the app) to my github account.

Notes on the clock:

• It's possible, that my fork won't be merged over here, think of it as an "idea". And yeah, it's also possible that I force-push some changes, so for your own good: don't base your work on that :-)
  • It also changes the behaviour a bit: when a plugin exits, it won't start the default plugin but will return to the main menu. First: changing plugins from the app was easier to implement, second: I found the old behaviour confusing, third: I like to destroy ideas of @bk1285. Just kidding :-).
  • It also needs some rework in some plugins (e.g. some plugins can't exit) and needs some bug fixes.
  • And I also pushed the emulator branch. As I said: it's just a hack!

Notes on the app:

• As I said: my first Android app, written down in a week or so. It lacks documentation.
• UI Concepts: I use one Activity (plus another Activity for the settings) and have 3 Fragments, of which exactly one at a time is displayed on the main activity.
• Network Communication: I added 2 (+ some minor) classes. One of it does all the json/socket stuff, the other one implements the protocol. These classes do not know anything about threads (except some methods, marked synchronized). Idea: easy reuse in other projects.
• Exchange between threads: There is a class (CommProxy), creating two threads: one receiving, decoding, calling callbacks, the other one sending. When a callback is issued by the wordclock object, it's first handled in this proxies receive thread, relaying the callback on the UI thread. Vice versa, when the UI thread wants to send something, I used a little overload magic, which creates the message to be sent, but instead of sending it directly (which is forbidden on the UI thread -- good design by google imho), I push the message on a blocking queue which is processed by the sending thread.
• oO we should definitely discuss this in the corresponding repository :)

[phenze]

@mrksngl Your Android App is looking very good ! I have made some changes for the Thread <> UI Communication. That would be my approach for that. You can have a look at it here (https://github.com/euchkatzl/wordclock-android)

[phenze]

I have adopted @mrksngl emulator to work with OS X (perhaps also Windows). This is very usefull for developing stuff ;) Thank a lot for the idea @mrksngl !! 👍

I think all you need to install is wxPython package via pip.

If anybody is interested check it out here : https://github.com/euchkatzl/rpi_wordclock/tree/develop

[mblonski2015]

Hey, I am just in the process of building a word clock and I am thinking of using hardware buttons or a web page or any other way to control the clock by phone. I have done some other projects where I needed to control a python script by phone. I prefer UDP or TCP/IP connections and sending just the ASCII/text I need to take some action. In order to prepare an easy GUI on a tablet or phone, I use the free software command fusion. It's a designer software on windows and the final file can then be uploaded to a webspace and will be downloaded from the app on the phone.The app is called iviewer. It works on iOS and android. As long as you don't need to change pages, it's free to use. Since I can't help with the python stuff (that's way to advanced than I could understand) I'd like to help with the phone part of it. I can make GUI and provide it on a server. I also have a tiny web page, which I host on my other raspberry (apache) to control my blinds and lights. This page could be adapted to control the clock. It sends UDP commands by php. All I need, in order to help is, some one who help me on how I could adapt the original word clock installation on my pi to this branch. A simple to do list, would be perfect and then I'll make a GUI over the weekend which sends the three commands as a tcp/ip or UDP to the IP:10001.

[Tihmann]

I'm using the version from the develop branch. Which android app is working with that branch? Has somebody an apk as download?

[mrksngl]

@Tihmann There's no APK by now. As you said: It's the development branch ;) Right now I'm quite busy with other projects, but at least @bk1285 and I thought about another Wordclock session in the near future. Hang on...

[phenze]

Finally i have done an implementation with WebPy. So there is no need anymore for external dependencies like WebIOPI or other stuff. Check it out here: https://github.com/euchkatzl/rpi_wordclock/commit/104d78d0e70777eebed285d1a724bee8b0a2b4a1 (Develop Branch)

NOTE: This is still experimental an not tested on a real raspberry. I have only tested it on my local simulator. I will finish this due the next weeks. But for anybody who is interested feel free to test it or leave some comments so that we can improve it.

@bk1285 @mrksngl : Can you have a look at it ?

[plotaBot]

I prefer using a websocket based webcontrol... (and as a little extra: a xml file for storing custom RGB patterns etc) I recently programmed a websocket client using materialize.css and code based on @toblum's McLightning. Chek it out!

It is responsive and pretty straight forward to modify. If you want to, I'll be able to rewrite this site to the needs of rpi_wordclock. I'll consider adding the mentioned custom RGB patterns

• virtual remote buttons
• RGB sliders/input fields and colorselector
• plugin selector
• ... am I missing soemthing?

Can someone explain to me how the websocket work?

PS for the curious: I programmed this to ignite fireworks on New Year's Eve ;) It uses a WeMos (Arduino+WiFi) and 2 shiftregisters.

[bk1285]

Hi @plotaBot, indeed, very nice. I hope to soon push this branch https://github.com/bk1285/rpi_wordclock/tree/feature/webinterface to provide a JSON-based interface to select plugins, send RGB-colors, etc. .... :)

[bk1285]

...checkout latest develop: I just released a new version of the wordclock-api. Testing + feedback welcome.