pimatic-iframe Plugin

---

@Yves911 Great! I have also filed a pull request with a bug fix. https://github.com/Oitzu/pimatic-iframe/pull/6

Thanks @mwittig, this module is very simple and so useful for me…

1.1.2 released.

Just an idea: would it be possible to feed this plugin with the adress from the location plugin to show a map of your position?

@Anduril I think it should be possibly to do this with a pimatic rule, but it is a little bit tricky as you cannot simply load googlemaps into the iframe like 'https://www.google.de/maps/?q' + $latitude + ',' + $longitude as googlemaps generally denies embedding. If you want to embed googlemaps though you need to obtain an apikey following the instructions given in the Embeeded API Guide. See also the Trouble Shooting section at https://github.com/Oitzu/pimatic-iframe/blob/master/README.md

@AnduriI
I think I got it working with location-plugin-address…

As @mwittig says you need to create the API-Key
Then create a new file /home/pi/pimatic-app/node_modules/pimatic-mobile-frontend/public/map1.html and put this inside:

<iframe
  width="330"
  height="330"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/directions?key=xxxxxxxxxxxxxxxxxxx
&origin=Street+123,+12345+city,+country,
  &destination=homestreet.+46,+12345+home_city,+home_country,
  &mode=driving" allowfullscreen>
</iframe>

Insert the Key in line5. then put your homeposition in line 7.
If you want to have more destinations, create map2.html, map3.html…

Create a new file /home/pi/map.sh (or put it in your script folder)This script will change the origin-address in line 6 to the address variable from locatian-plugin. Change ip, user, pw, and variablename of location in the link.

#!/bin/bash
# map.sh
# shellscript for use pimatic-location-variable to show googlemaps with pimatic-iframe

loc1=$(curl -s -o \
  -X GET \
  --user xxxxxx:xxxxxx \
http://IP/api/variables/loc1.address | grep -w "value" | sed 's/"value"://g' | sed 's/"//g' | sed 's/ /+/g')

loc2=$(curl -s -o \
  -X GET \
  --user xxxxxx:xxxxxxx \
http://IP/api/variables/loc2.address | grep -w "value" | sed 's/"value"://g' | sed 's/"//g' | sed 's/ /+/g')

#echo $loc1
#echo $loc2

A="&origin="
sed -i -e 6c"$A$loc1" /home/pi/pimatic-app/node_modules/pimatic-mobile-frontend/public/map1.html
sed -i -e 6c"$A$loc1" /home/pi/pimatic-app/node_modules/pimatic-mobile-frontend/public/map2.html

config

    {
      "class": "iframeDevice",
      "id": "my_iframe_map",
      "name": "google_maps",
      "url": "map.html1",
      "width": 330,
      "height": 330,
      "border": 0,
      "scrolling": "no",
      "scale": 1,
      "reload": 43220
    },
    {
      "id": "maps-buttons",
      "name": "Google Maps",
      "class": "ButtonsDevice",
      "buttons": [
        {
          "id": "button_maps_loc1",
          "text": "Loc1"
        },
        {
          "id": "button_maps_loc2",
          "text": "Loc2"
        }
      ]
    },

rules:
if button_maps_loc1 is pressed
then $map-reload = $map-reload+1 and execute "sudo bash /home/pi/map.sh" and after 1 seconds load my_iframe_map with "map1.html?rand=$map-reload"

if button_maps_loc2 is pressed
then $map-reload = $map-reload+1 and execute "sudo bash /home/pi/map.sh" and after 1 seconds load my_iframe_map with "map2.html?rand=$map-reload"

Have fun

magic-tune

Edit: 11.10.2015 cache issue fixed (create a variable $map-reload value = 1)

I noticed that my gmap-iframe loads only for the first time after clearing the browser-cache with correct position. To prevent this issue I have insert a variable $map-reload to the link, wich is increase +1 when button is pressed…

if button_maps is pressed 
then $map-reload = $map-reload+1 and execute "sudo bash /home/pi/map.sh" and after 1 second load my_iframe_map with "map1.html?rand=$map-reload"

@Anduril
or much easier
load the iframe directly with $location.address variable in the rule…

load my_iframe_map with "https://www.google.com/maps/embed/v1/directions?key=XXXXXXXXXXXXXXXXXXXX&origin=$loc1.address,&destination=Zielstrasse+12,+23456+Zielstadt&mode=driving"

thank you very much @magic-tune, I will give it a try in the next days.

ok in general it works, I’m able to draw a map with a route. only 2 problems: first is the size of the map. Can I auto-size the map to the size of my pimatic device? (I don’t know how to add a screenshot, otherwise I would show what I mean).
Second is a problem with my $loc.address variable. I tried with a variable device to show my address, but it only gets UNKNOWN and when using it in iframe it’s only “-”. In the location device and in the variables tab of pimatic the address is correct.

@Anduril said:

I don’t know how to add a screenshot, otherwise I would show what I mean

You can post images as follows:

![alternative text](URL to picture)

a direct upload is not supported, therefore you’ll need a pic hoster or use www.youscreen.de for making screenshots and edit & upload direcly to their server.

Please also make sure you have read the configuration details described in the README. You can scale the iframe content to get a better fit.

retried with the $loc1.address, which seems to work now. Maybe it has a problem with specific formats: when doing the last tests the location plugin state my street number as 20-21. Maybe that confused the parsing and lead to the trouble.

@leader21 i have the same problem in landscape mode

@n3ro
that’s not nice did you try to move the devices around? like iframe1, weather forecast, iframe2? or iframe1, iframe2, weather forecast …
i am using only one iframe on the page. setting it to the top of the group helped me.

@leader21

This helps a little. Now i have “Sonne” between this two iframes.

We need some improvement here

i have recently the problem, that my iframe content only display the name of the config but the stream from from my ip-camera will not be displayed, anything ideas?

my config:
{
“class”: “iframeDevice”,
“id”: “cam”,
“name”: “Instar IP HD Kamera”,
“url”: “http://192.168.X.XX:XXXXcgi-bin/hi3510/mjpegstream.cgi?-chn=XXXXXXXXXX”,
“width”: 640,
“height”: 480,
“border”: 0,
“scrolling”: “yes”,
“scale”: 0,
“reload”: 43200
},

Thanks, for your help

@christoph.ch
Are you using https for pimatic?
There is also a ip-camera-plugin by funky81.

@christoph.ch Regarding HTTP/HTTPS mixed-mode limitations see also https://github.com/Oitzu/pimatic-iframe/blob/master/README.md#troubleshooting for details

@magic-tune yes, i use https, i have seen the plugin ipcamera, i also have the problem that i not see a picture. If i use VLC, the link was working…

@mwittig said: thx