Community
OpenEnergyMonitor

Community

Image insertion in dashboard

in addition to my previous message, see attached, the error code when trying to create directory

What you see on your Mac is a web page that is generated by a program called Apache, that runs on the Raspberry Pi inside the emonPi.

Therefore, so that the image will always be available, you must have the image file in the Raspberry Pi.

You must use a terminal program to communicate with the Pi and make the directory, then transfer the image file from your Mac into the Pi. I don’t use a Mac so I cannot help you with that. I am sure you will find instructions or help on the Raspberry Pi website.
(Search in French for “remote desktop connection from mac to raspberry pi” “remote desktop connection” - see the next post.)

The SSH password for your emonPi is emonpi2016
When you get into your emonPi, you must put it into read-write mode.
The command is rpi-rw, and to restore it to read-only when you have finished, rpi-ro

An easier or more universal method is to place the image file somewhere that it can be accessed via the web, eg a image sharing website or dropbox etc and then just use wget from the emonPi’s emoncms image folder (once created). I have a dropbox “temp” folder that I can drag and drop any files to and use the “share link” url with wget to pull files in to any Pi or VM etc.

That might cause some confusion, search for “remote access from mac to Pi” instead. “remote desktop connection” will return lots of links using remote vnc’s and the like, they will depend on the target having a desktop environment which the emonPi does not.

[edit - In fact forget the search, look here (https://guide.openenergymonitor.org/technical/credentials/#ssh) ssh from a mac is just like Linux]

Using the method above will avoid having to install any additional software for “samba” filesharing etc and be easier to do than the trickier methods using scp.

I use Remmina, which calls itself a “remote desktop client”.

That looks like it can indeed do remote desktop (as well as ssh etc) but the emonPi cannot.

A “remote desktop” is to look at a (local) desktop from a remote location, emonSD is built on the “lite” version of Raspbian and doesn’t have any of the remote desktop packages.

For example Windows 10 has a remote desktop application built in, so it too could be used to “remote desktop” a Pi if the Pi had a desktop (and vnc or xrdp installed), but searching “windows 10” or “remote desktop” will not necessarily return anything that can access a emonPi. I just thought the search term was not clear, but he shouldn’t actually need any application, just the Mac’s command-line.

and file transfer:

I’m not sure what you’re trying to say there, that is a remote console or shell session not a desktop.

This is a pic I just grabbed from https://www.linux.com/blog/3-ways-run-remote-desktop-raspberry-pi

Even if you “remote desktop” from a Windows or Mac etc, you would get whatever OS desktop is installed on the remote device, eg with a (normal) Pi Raspbian, open in a window. But there is no desktop installed on the emonPi.

Yes you can use a “remote desktop utility” that also does ssh and scp as your pics demonstrate, but that is still not a remote desktop.

I wasn’t looking to start a argument, it was clear to me that searching “remote desktop” was going to confuse things further as it is not possible to “remote desktop” an emonpi without significant changes. But as it turns out, it’s irrelevant now as no client utility is required from a Mac, if ssh works, scp will possibly work too for file transfer, but personally I would still opt for the “dropbox + wget” method as the scp command line commands can be tricky to get right without the GUI (like your utility uses).

Personally, I don’t use 3rd party services when it’s easy enough not to. But we’ve run run off-topic here.

The initial confusion, which I didn’t realise at first, is Gerard didn’t appreciate that he couldn’t access a picture on the Mac from the emonPi, and I didn’t realise he didn’t know that all the sources for the web page needed to be either on the Pi, or visible on the Internet (which his Mac is not).

Moot point by now, but what’s difficult about:

scp [email protected]:/path/to/file /destination/path
or
scp /some/file [email protected]:/destination path

e.g.
scp /home/pi/my_script.py [email protected]:/home/bt
to copy a python script from the /home/pi directory of the machine you’re currently sitting at to the /home/bt directory of another machine on your LAN
or
scp [email protected]:home/pi/my_script.py /home/bt
to copy the file in the opposite direction

The ip address can also be a domain name.

I understand that my problem is to create a /var/www directory on my computer

When trying to create a www path, I get the following message (see attached file).

How can I get the permission?

No, you must work on your emonPi. You already have a /var/www directory there. It is there, or in a directory below that, where you must put your picture image file.

Non, vous devez travailler sur votre emonPi. Vous avez déjà un répertoire /var/www là-bas. C’est là, ou dans un répertoire ci-dessous, où vous devez mettre votre fichier image.

See / Voir: https://guide.openenergymonitor.org/technical/credentials/#ssh:

Pour se connecter à emonPi / emonBase via ssh:

Linux / Mac: ouvrir la fenêtre du terminal $ ssh pi @ emonpi ou $ ssh pi @ <IP ADDRESS>

Recherche Google ‘Raspberry Pi SSH’ pour de nombreux tutoriels, Adafruit a un bon guide.

SSH: port 22,
utilisateur, pi
pass: emonpi2016

Ensuite, vous devez mettre votre emonPi en mode lecture / écriture:
$ rpi-rw

Lorsque vous avez copié le fichier, vous devez mettre l’emonPi en mode lecture seule:
$ rpi-ro

Mon emonPi a l’adresse IP 192.168.1.64 Le vôtre sera différent - l’écran vous le dira. L’image que je copie est /home/r/Pictures/phone.png.

Thank you for the translation into French which is very useful to me.

I managed to create the directory /var/www/images in emonPi and copy the file “test.png” (see attachment)

Unfortunately, I still can not insert “test.png” in my dashboard with the following link. Is the syntax correct?

The link is not quite right. The “root” for the web server is the physical file “/var/www”. therefore as the image is in the directory “/images” relative to that, that is what your link must be:

Le lien n’est pas tout à fait correct. La “racine” pour le serveur web est le fichier physique “/var/www”. Par conséquent comme l’image est dans le répertoire “/images” par rapport à cela, c’est ce que votre lien doit être:

<img src = "/images/test.png">

Thank you Paul for the time spent trying to solve this problem.

Unfortunately, despite changing the path as suggested, I still cannot insert an image into my dashboard. I also tried with the full path (/var/www/images/test.png) without success.

There may be a specificity with the imac and I will try to look for that side.

Hi Gerard,

What do you get if you connect to your Raspberry Pi via ssh and issue the command ls -l /var/www ?

Hi Bill,

This is what I get with the command ls -l /var/www

Thanks, Gerard.

Your images directory needs to be inside the

/var/www/html/ directory. e.g. /var/www/html/images

The html part of the path was missing.

You can create a new directory: sudo mkdir /var/www/html/images (then delete the old one)
OR
you can move the existing directory: sudo mv /var/www/images /var/www/html/

After you create or move your images directory (and you’re finished copying your images into it)
you’ll need to change its owner to www-data.

To do that, put the filesystem into read-write mode with the rpi-rw command,
then issue the command: sudo chown -R www-data:www-data /var/www/html/images/*

Thank you Bill, problem is solved

I first create /var/www/html/emoncms/images directory, then, copy « test.png" from my iMac to /images

After that, I change the path like this

YW,S!

I’d advise putting the images directory in /var/www/html instead of /var/www/html/emoncms
to prevent any issues in the future if/when you update emonCMS.

Otherwise, good to hear you got it working!

Might someone explain how I bring up the “Configure element” dialogue box as shown in the opening post above? I have a dashboard hosted by OEM’s emoncms.org and would like to add images similar to those shown on the top of this page. https://www.redelectrical.co.uk/solar-tesla-powerwall-immersion-ev-monitor/

Also, is there a good place to find similar icons that are suitable for an OEM dashboard?

TIA