New Touch Commands

[LukeSkywalker92]

Since many of you are asking about new commands (e.g. #40) for the touch controls I'm thinking about adding some kind of navigation/controll bar at the bottom of the screen, that appears when the screen is touched once and dissapears after some seconds or a second touch on the screen. There we could have navigation buttons for the slideshow, a button for voice message reply and the requested delete and favorize commands. This way new controls can be easily added in the future.

But I'm not sure if this makes the use to complicated for older people?!

What do you think about a navigation/controll bar with buttons?

[nautical-miles]

Hi, this is exactly what I'm looking for. I don't think it will cause any confusion for older people. From my point of view it is not more complicated as pressing the center of the screen for a longer time to make a voice response to a picture.

[mistau]

nice idea - my proposal is to make the new touch control menu optional, i.e. it can be enables/disabled in the config file. This leaves it to any implementer of a teleframe if he thinks the extra level of complexity is required and/or manageable by the user of the frame. I was thinking about a shutdown feature as I always feel unwell just powering off a running Linux system - this could in my view be addressed by a touch menu as well.

[LukeSkywalker92]

I started with the development with #46.

[LukeSkywalker92]

I think we should collect all possible commands here.

Until now we have:

• navigation through images
• play/pause slideshow
• delete images
• favorize images
• send voice message
• shutdown/reboot system
• maybe update the teleframe software
• mute notifications

[LukeSkywalker92]

The touch bar is now implemented in #46.

to try it you need to add

touchBar: {
    height: "100px"
  }

to your config.

to add new elements one needs to edit

var touchBarElements = [
  new TouchBarElement("left", "far fa-arrow-alt-circle-left", previousImage),
  new TouchBarElement("play", "far fa-play-circle", play),
  new TouchBarElement("pause", "far fa-pause-circle", pause),
  new TouchBarElement("right", "far fa-arrow-alt-circle-right", nextImage),
  new TouchBarElement("voice", "fas fa-microphone-alt", record),
]

in renderer.js.

For now all availiable functions are implemented. Now the question is, if it should be possible to configure the touch bar elements in the config?!

[gegu]

Great idea and yes configurable options would be better.

I don't think that a touchbar is more complicated. Because the icons are self explaining like an old VCR and it should be clear what they do. And one short touch gesture to show the touchbar is easy to remember.

[sohamakl]

When the monitor is just switch to black screen in night mode it would be great to toggle between night and photo mode.

I would prefer to configure the navigation bar via the config file.

[LukeSkywalker92]

It is already implemented to configure it via the config file. At the moment I’m working on starring pictures to save them from being deleted...

[LukeSkywalker92]

I'm done with the implementation of the touch bar. The commands included for now are:

Element	Description
previousImage	Navigate to the previous Image.
nextImage	Navigate to the next Image.
play	Resume slideshow.
pause	Pause slideshow.
playPause	Toggle between play and pause.
record	Record voice reply.
starImage	Star the active image to prevent it from beeing deleted.
deleteImage	Delete the active an image.
mute	Mute notification sounds.
shutdown	Shutdown the system.
reboot	Reboot the system.

For more commands we should use extra feature branches in the future. Pleas have a look at the PR #46 and test it. I would like to get some feedback before merging it. It would also be helpful if someone could test it on a raspberry, because i updated all the node modules which means we have a new electron version...

[nautical-miles]

I tried to install it on one of my raspberries. It failed with the installation of electron. No matter if I do the manual install or using the script.

[gegu]

Try npm install electron@^5.0.6 to temporary fix it

@LukeSkywalker92 electron is the only module making problems.

[LukeSkywalker92]

Hmm..I upgraded the electron version to use the backdrop-filter css property for the Touch Bar...

[LukeSkywalker92]

can you please try the solution of this: https://stackoverflow.com/questions/58877932/problem-installing-electron-js-on-raspberry-pi-3

[gegu]

it works :thumbsup:

echo arch=armv7l>~/pi/TeleFrame/.npmrc
npm install

[LukeSkywalker92]

it should be fixed wit 82d2789 now. can you please try it on a pi?

[gegu]

Yes, but have to delete the folder node_modules/electron if updating from an older version. A fresh install works.

[gegu]

There is another issue. In the new version electron displays a menu bar.

The option frame: false removes it - https://stackoverflow.com/questions/39091964/remove-menubar-from-electron-app - Tried win.removeMenu() without success

// main.js
...

function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 1024,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    },
    frame: false
  });

...

[nautical-miles]

it works 👍

echo arch=armv7l>~/pi/TeleFrame/.npmrc
npm install

Yes, but have to delete the folder node_modules/electron if updating from an older version. A fresh install works.

It might sound stupid but I can't get this version installed. @gegu: can you please tell me the steps to install this version of TeleFrame on a pi Thanks

[gegu]

Use the lastest commit from branch feature/touch-controll-bar

cd ~/TeleFrame  # change it if you use another path
rm -rf node_modules/electron
npm install

My previous post have an error - ~/pi/TeleFrame/.npmrc should be ~/TeleFrame/.npmrc

[nautical-miles]

OK, I'm making progress. My steps so far:

• clean install of raspian buster
• install nodejs via apt-get from raspian
• cloned TeleFrame from github (feature/touch-controll-bar)
• npm install inside TeleFrame folder
• got the same error message as seen above. TeleFrame refuses to start
• removed node_modules/electron
• installed electron 5.0.6 as mentioned above
• npm install again
• copied config.example.js to config.js and added the bot token
• went into tools folder and ran: bash tf.sh
• Teleframe started :-)
• for convenience I ran a few parts of the install script (no screen saver, no mouse, pm2) manually

What's left:

• TeleFrame is not running with the latest electron
• Test if it still hangs or is finally stable

If it is stable I leave it as is for now as I like to have two screens as a present for christmas.

Anyway, thanks for your help. You did a great job with this software.

[gegu]

Hmm, have you tried to update npm sudo npm install npm@latest -g? The version from apt-get is much older.

[gegu]

Following the steps from @nautical-miles give me the same results.

It's indeed required to install npm@latest to use this branch.

[LukeSkywalker92]

ok so we need to add this to the installation instructions.

[LukeSkywalker92]

I'm not sure if we also need to modify the script for automatic installation on raspberries. This would take some time for me...need to find a free raspberry for that...

[sohamakl]

I'd like to send you a Raspberry Pi 3 to support the project.

How can we exchange addresses?

[nautical-miles]

Hmm, have you tried to update npm sudo npm install npm@latest -g? The version from apt-get is much older.

Hi gegu, for testing I removed the Teleframe folder and updated npm to the latest version. Then I cloned TeleFrame again and tried the installation. It failed again. So far it works only with 5.0.6. Maybe it is also an issue with the previous installation as I did not do a clean install of Raspian.

Still testing if Teleframe hangs with electron 5.0.6. --- update --- After 2 1/2 hours the screen froze again.

Problem in front of the keyboard? I found a folder node_modules also in the home folder of the pi user I was not aware of before. Removed that completely and the electron in TeleFrame/node_modules. Did a npm install in the TeleFrame folder again and now it went smoothly without any errors. Back to square one on testing if Teleframe hangs after some time.

The problem is still there. TeleFrame froze again. To see what's going on I left pm2 log TeleFrame running. When it freezes the last entry is: draw call returned Not enough memory available. Expect corruption.

[LukeSkywalker92]

I'd like to send you a Raspberry Pi 3 to support the project.

How can we exchange addresses?

Thank you very much, but you don't need to do that =) I have enough pi's lying around at home. With free I mean one that I don't use for something else at the moment...

But I really like that you want to support this project. I think you can do this best with giving us some of your time at the moment. Testing, reporting bugs, helping others with problems, helping to improve the documentation, maybe document fixes in a wiki etc..

By the way, I only tested the software on a rpi3. Did anyone of you test it on rpi4 yet?

[gegu]

@LukeSkywalker92 the installation of node 10.x runs without problems. The only thing to notice is to omit npm when calling apt-get install nodejs.

I found out that the electron install process lacks. No success installing electron globally, but TeleFrame works without it.

After the first npm install in the TeleFrame folder it's always needed to remove node_modules/electron and call npm install twice.

The attachement contains the script I have used to successfully install the TeleFrame branch feature/touch-controll-bar into a clean raspbian buster on a pi3.

Hope it helps a little bit.

install_raspberry.zip

[LukeSkywalker92]

Thanks for your investigations. I will have a look into it when I find some time 👍🏼

[sohamakl]

I have tested gegu‘s script on a raspberry pi 4 with success.

[sohamakl]

I found a little issue. Deleting the last photo didn‘t clear the screen. The photo is still visible.

[gegu]

I found a little issue. Deleting the last photo didn‘t clear the screen. The photo is still visible.

That was fixed. For now you can test the branch feature/touch-controll-bar from my TeleFrame repo.

[LukeSkywalker92]

It seems like we're not alone with the electron problems: electron/electron/issues/20479

[LukeSkywalker92]

I'm going to merge it to develop now. We still have the electron problem and the screen-freeze of @nautical-miles . but I don't think this should be fixed with this feature.

[gegu]

@nautical-miles did you activate toggleMonitor?

[gegu]

@LukeSkywalker92 we should also look at the solution creating the .npmrc. This creates a wrong .npmrc under windows.

[nautical-miles]

@nautical-miles did you activate toggleMonitor?

Hi gegu, yes toggleMonitor is active.

[gegu]

I have found a solution for installing electron on raspi - Commit

As described in https://github.com/electron/electron/issues/20723#issuecomment-556915720, the argument --arch=armv7l is required for the installation process to work - npm install --arch=armv7l.

The global installation also works in the same way.

The creation of the .npmrc is no longer necessary.

[nautical-miles]

The latest version of electron does not work for me. Even with "npm install --arch=armv71 electron" the installation fails. Removing electron from node_modules and installing electron 6.1.5 works for me right now. At least TeleFrame is starting. I still have the issue with electron freezing after some time (can be hours or days) on a raspberry pi 3. Maybe this version of electron is working.

[Trenar]

Even with "npm install --arch=armv71 electron" the installation fails.

The last character is an L, not a one. So you need to typ --arch=armv7l

[nautical-miles]

You are right. Once typed in correctly the install went through. Now electron has the version 7.1.2. Let's see how stable that is.

[Trenar]

A little off topic that came to my mind today: What do you think about small strings above or below the symbols in the touchbar? They may be small and hard to read (at least for elder people) but if the bar gets more and more crowded with features, it should be possible to have a hint what hides behind each touch symbol

[sohamakl]

What about a new sybmole e.g. a questionmark and a help screen that shows a language specific explenation for all visible symboles?

[sohamakl]

https://fontawesome.com/icons?d=gallery&q=question

[Saku86]

Hey there, I created a Teleframe for my family and it works great. My mum had one suggestion. When she enters the room she is never sure if there is a new message. Is it possible to implement a small icon in the corner that signals that a new picture has arrived? And when you touch the screen the symbol disappears so the teleframe knows that the new message has been seen? Would be great.

[Trenar]

Actually, there is such a symbol, have a look at the showNewest touch bar icon. It turns green if a new image has arrived and on click, teleframe jumps to the newest image in gallery

[Saku86]

Oh great. Thank you. Do you have an idea how to use the touch bar without a touch display? I use an old monitor with a keyboard. Is it possible for me to use the same features with a keyboard or mouse only?