Community
OpenEnergyMonitor

Community

Image insertion in dashboard

Hello,

I can’t insert an image in my dashboard.
I choose “Abc”; “paragraph”, then “configure element” in the toolbox (see screenshot1)
Screenshot2 shows the result
Screenshot1

Is that path relative to “/var/www/” - which is the web “root” directory as far as Apache is concerned - on the system where emonCMS is running? Remember that you cannot go above there, Apache has no knowledge of the rest of the directory structure.

Thank you Robert,

I am a beginner and I do not master the use of emoncms.
I got this path by dragging the image directly from the desktop to the dialog box.
Can you tell me the correct way to embed an image in a dashboard from the desktop or a folder on my computer?

Thank you for being indulgent with my English because I am French speaking

Your English is much better than my French. Don’t worry about it.

OK. What I was trying to say there is this. Apache, the web server program that runs emonCMS and sends you the web pages, has its own “root” directory. To the machine that is running emonCMS, if it’s a Linux machine, that is probably “/var/www”. (If it’s an emonPi, it is /var/www) The home page of a website will be in that directory.

To have your picture visible to Apache, so that emonCMS can link to it, you must move it into /var/www, or a directory below it. Then, on your dashboard, your link must be relative to /var/www.

So, say you create a directory /var/www/images, and you move the picture into that, in the machine, the picture is at /var/www/images/IMG_1705.png, but your link is <img src = "/images/IMG_1705.png">

Thank you for the clarification.

The machine that runs emoncms is an emonpi and my computer is an iMac.

Unfortunately, I made several attempts but I did not manage to insert an image into my dashboard

There may be a problem when creating the directory with “Terminal”. I will try to better understand the process.

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 ?