ASTUCE: voir les images de votre caméra-réseau comme un visiteur

Si vous avez une Netcam (ou caméra-réseau) sur votre réseau local et que vous l'affichez sur un de vos sites, il est possible que vous ne puissiez la voir depuis votre réseau (c'est semble-t-il un bug ou une restriction des Livebox). Seule solution, passer par un proxy ou un VPN pour virtuellement "venir de l'extérieur" avec une ip différente.

Une autre solution, c'est d'afficher l'image de votre "cam" en passant par un de ces petits proxy php facile à mettre en place. Je m'en suis fait un avec PhpProxy (ou Poxy). J'en avais déjà un sur un autre serveur mais j'en ai refais un en 2-3 mouvements. J'en ai un autre sur Google Apps mais au-delà de 100 utilisateurs, ça "coince"...

Mon petit dernier (sur mon serveur perso), je ne le partage pas, pour qu'il reste performant mais vous pouvez utiliser celui de Mountain View mais bien souvent il ne fonctionne pas, donc, je ne vous le conseille pas:

Mon proxy Appspot (Google)

Vous collez donc l'adresse de l'image de votre Netcam dedans puis OK!


Si ça ne fonctionne pas, allez ici: http://www.newipnow.com/, c'est le même genre de proxy mais il est assez performant. Je l'ai mis dans mes favoris. Vous pouvez choisir différents serveurs.
Une fois votre image affichée, il suffit de récupérer l'URL dans la barre d'adresse et de l'utiliser pour afficher votre "webcam" dans votre page.

Chez moi, ça fonctionne du tonnerre... Et ça ne change pas grand-chose pour vos visiteurs si le proxy est bon. Si un jour vous ne la voyez plus s'afficher, alors dans ce cas, essayez avec un autre proxy. Si ça ne marche toujours pas, il faudra peut-être chercher ailleurs (serveur ou Netcam en panne).

Exemple (c'est surtout pour moi que c'est intéressant, cela ne change rien pour vous):

Ma netcam à St Martin (Antilles Fr). L'île au loin est Anguilla, domaine perso de Sa Majesté Elisabeth II... Rien à voir la nuit (pour info, quand il est midi en France, il est 6 h du matin à St Martin en été et 7 h en hiver)

Truc: 

1. si Blogger refuse d'insérer l'image distante pour une raison obscure, insérez à la place une image fixe.
2. allez dans le code HTML de votre post et remplacez l'adresse dans le src par celle récupérée dans votre barre d'adresse (exemple la mienne: http://audrey.newxip.info/r.php?nin_u=Oi8vdmlzaXRvcjpwb2ludGVkdWJsdWZmQG5iYmMuZHRkbnMubmV0L2ltYWdlL2pwZWcuY2dp&nin_b=1).
3. Blogger ne rechignera plus (en principe!)
4. Vous pouvez aussi raccourcir votre adresse avec http://lc.cx/ - raccourcisseur d'URL (c'est le cas ci-dessus: http://lc.cx/beachcam)
5. Une autre solution: afficher l'image dans un iframe:

<iframe frameborder="1" height="512" scrolling="no" src="http://lc.cx/beachcam" width="640"></iframe>

Cette astuce du proxy peut être aussi utilisée si vous vous voulez créer un serveur HTTP perso et peut-être même pour un serveur FTP. En effet, le problème est le même: on ne peut pas accéder à son propre serveur depuis notre réseau local. Pas facile donc pour vérifier que tout fonctionne (Il faut se connecter depuis chez le voisin!). Notez en passant que le serveur d'une Netcam est un serveur HTTP miniaturisé.

Bordure DIV

<div align="left" style="border-width: 2px; border-style: solid; border-color: #FA4509; width:600px; height:120px;">

Contenu

</div>

créer une grande image satellite avec Google Map

http://www.ehow.com/how_8610345_create-satellite-picture-google-map.html

La taille maximum des carte pouvant être capturée est limitée à 1200x500 pixels

En suivant ce tuto (en Anglais), vous pourrez créer de beaucoup plus larges cartes.

Ça peut être intéressant "pour faire joujou" avec les images satellite de wunderground.com (voir précédent article)

Image satellite sur mesure

Avec wunderground.com j'ai découvert il y a déjà pas mal de temps que l'on peut créer des images satellite adaptées à sa propre région. Ces images peuvent être mises-à-jour toutes les 2 ou 3 minutes mais comme les images des satellites américains sont en fait renouvelées moins souvent, je pense qu'il s'agit d'interpolation.

A partir de cette URL, on peut changer et faire beaucoup de choses (tout ce qui est en rouge peut être changé). On reconnaîtra la latitude, longitude (négative pour les longitudes Ouest), le zoom, les dimensions (width et height), sat_ir4 est le type de satellite, gtt, c'est l'opacité des nuages. Vous pouvez préciser extension=jpg ou png, mais évidemment, il est conseillé de prendre jpg pour les grandes images, car c'est moins lourd. En mettant basemap=0, on ne voit plus que les nuages, les frontières et les côtes. On peut s'en servir donc pour bidouiller ses propres cartes (en se servant de Google Earth par exemple). A la place de sat_ir4 on peut mettre sat_vis_thumb (nuages plus réalistes mais visible de jour uniquement). IR c'est pour infra-rouge (visible nuit et jour).

Comme toujours quand on insère une image avec Blogger elle reçoit automatiquement un lien. On peut donc modifier ce lien comme on veut. Ici, j'ai mis un zoom de 3 dans le lien contrairement à l'adresse de l'image qui a un zoom de 2.

En superposant un calque transparent on peut ajouter des légendes ou signaler un lieu favori.

Sur 2 de mes blogs, j'utilise une image de 1920x1080 faisant office de background comme ici: NBBC Meteo

Vous pouvez aller sur cette page qui contient plusieurs exemples ainsi que les différents paramètres applicables http://nbbc-wx.blogspot.fr/p/blog-page.html

http://wublast.wunderground.com/cgi-bin/WUBLAST?lat=18&lon=-63&zoom=4&width=600&height=700&key=sat_ir4&basemap=1&gtt=60&num=1&timelabel=1&delay=25&borders=1&theme=WUBLAST_WORLD&extension=jpg&proj=ll

Ci-dessous, une image satellite en mode visible montrant l'Atlantique Tropical Nord et les éventuelles formations de cyclones. La limite verticale correspond à la frontière entre le satellite européen Meteosat et le satelite américain Goes-East. Malheureusement, Meteosat n'envoie une nouvelle image dans le domaine public que seulement toutes les 6 h alors que les américains sont comme d'habitude moins radins (ou moins dissimulateurs?) et fournissent des images toutes les demies-heures. C'est donc à l'origine des décalages et du changement de couleur. Avec un gtt=10, la différence de couleur se voit moins.

http://wublast.wunderground.com/cgi-bin/WUBLAST?lat=12&lon=-39&zoom=2&width=850&height=320&key=sat_vis_thumb&basemap=1&gtt=60&num=1&timelabel=1&delay=25&borders=1&theme=WUBLAST_WORLD&extension=jpg&proj=ll

Ci-dessous, l'ouest de la France en "visible" mais sans les côtes, seulement les nuages. basemap=0 et borders=0. Et extension=png est important si vous voulez la superposer à votre propre carte perso. Sinon, jpg est plus léger.

http://wublast.wunderground.com/cgi-bin/WUBLAST?lat=47.75000000&lon=-3.36666703&zoom=4&width=600&height=600&key=sat_vis&basemap=0&gtt=0&num=1&timelabel=1&delay=25&borders=0&theme=WUBLAST_WORLD&extension=png&proj=ll

La même avec les côtes (ou les frontières). Si vous cliquez sur l'image vous zoomez à 5. Notez qu'ici le gtt=60 au lieu de zéro ne donne aucune différence.

Et pour finir, une animation: ici, il s'agit d'une animation satellite du nord des Petites Antilles. Le gtt est à 80 et fonctionne ici. Cela permet de mieux voir les nuages légers (en gris foncé).
Pour passer en mode animation, remplacer  num=1 par num=15 (par défaut) et extension=jpg par extension=gif  

http://wublast.wunderground.com/cgi-bin/WUBLAST?lat=18&lon=-63&width=640&height=640&gtt=80&num=15&delay=25&key=sat_ir4&zoom=3&basemap=1&borders=1&theme=WUBLAST_WORLD&extension=gif&proj=ll

Voir cet exemple

Le code: 

http://wublast.wunderground.com/cgi-bin/WUBLAST?lat=18&lon=-63&width=670&height=600&gtt=80&num=6&delay=25&key=sat_ir4&zoom=3&basemap=1&borders=0&theme=WUNIDS

• Le"gtt". C'est l'opacité (ou la sensibilité). Avec un gtt=400, on ne voit plus aucun nuages même les plus intenses. A 200, on ne voit que les plus intenses. En général, je règle de 60 à 80. En-dessous de 60, on ne voit guère de différences. Sur certaines cartes, le gtt n'agit pas. 
• Astuce: en mettant le "gtt=400", il n'y a plus de nuages. Donc, vous pouvez faire une capture de la carte pour la retravailler à votre guise.
• Si Blogger n'accepte pas votre URL ou la massacre, il suffit de la raccourcir avec Google URL Shortener ou avec http://lc.cx/
• Pour tâtonner et voir ce que votre URL peut donner, faites les modifications dans la barre de navigation de votre browser. Notez que si vous voulez que les modifs soient visibles instantanément, faites "créer un nouvel article", insérer une image à partir de l'URL, collez votre URL dans la case ad-hoc puis faites vos essais à ce stade. Toutes les modifications de valeurs se verront instantanément dans l'aperçu en-dessous.

Lien en relation: 

• 2 exemples de bricolages intéressants avec mes propres cartes et les images de Wunderground: http://st-martin-basic.blogspot.fr/2011/08/satellite-local-zoom-sur-nos-iles-cest.html
• Le titre (en-tête) de mon site/blog http://st-martin-meteo-weather.blogspot.fr/ a été créé à partir d'une image satellite de wunderground visible transparente laissant apparaître en-dessous ma chère petite île. Attention, cela ma demandé des heures de tâtonnements et de bricolages pour y arriver... (je suis parvenu à déformer l'image des nuages pour "coller" à peu près à la perspective de l'île). Si vous la regardez alors qu'il fait encore nuit ici (-5 h par rapport à la métropole en hiver, -6 h en été), vous ne verrez que île sans les nuages. Notez le lien "moins de nuages!" et "Plus de nuages" qui agit sur le "gtt". L'image de l'île a été créée et retravaillée à partir de Google Earth.
• http://wwwghcc.msfc.nasa.gov/GOES/getsatellite.html vous permet de créer votre propre image satellite. Hélas, ça ne fonctionne plus à tous les coups...
• Vous pouvez aller ici: http://wwwghcc.msfc.nasa.gov/GOES/goeseasthurrir.html . C'est moins souple que le précédent et surtout moins facile que mon truc avec Wunderground...
• ...et une page perso faite à partir de ces images de la NASA: http://meteo-weather-2.blogspot.fr/p/satellite-regional.html

•  Ces images ne peuvent pas en principe être transparente mais vous pouvez les superposer avec des images transparentes ou des Flash comme ici: http://meteo-weather-2.blogspot.fr/p/satellite-regional.html

Et enfin... un petit formulaire pour un peu faciliter les choses. Vous pouvez changer la latitude, longitude, le zoom, largeur et hauteur et le type de satellite : sat_vis_thumb, sat_vis ou infra-rouge: sat_ir4. Bah, j'aurais préféré faire un formulaire à plusieurs entrées mais je n'ai pas encore trouvé comment faire... Quand on clique sur OK, l'image sat s'affiche dans un autre onglet. Il suffit de récupérer l'URL dans la barre de navigation.

Iframe semi-transparent avec image d'arrière-plan

Un DIV contenant l'image satellite d'arrière-plan et un iframe affichant un texte par dessus (Vigilances Météo France pour les Petites Antilles et la Guyane). Je n'ai pas mis la Guyane dans l'image satellite parce qu'étant loin, l'image aurait été trop grande.

On remarquera le style de l'iframe contenant notamment background-color: rgba(255, 255, 255, 0.7)
C'est RGBA qui permet de régler la transparence ou l'opacité. Plus le chiffre est faible plus l'image est transparente. Je pense qu'on peut l'utiliser aussi avec un tableau ou un DIV.
line-height: 20px; c'est l'interligne du texte qui sera affiché dans l'iframe. timelabel=0 Pas d'heure indiquée. timelabel=1 L'heure est indiquée.


<div style="background-image: url(http://wublast.wunderground.com/cgi-bin/WUBLAST?lat=15&amp;lon=-62&amp;zoom=4&amp;width=600&amp;height=700&amp;key=sat_ir4&amp;basemap=1&amp;gtt=60&amp;num=1&amp;timelabel=0&amp;delay=25&amp;borders=1&amp;theme=WUBLAST_WORLD&amp;extension=jpg&amp;proj=ll); border: 0px solid black; height: 700px; text-align: center; width: 600px;">
<iframe frameborder="0" height="700px" name="vigilance" scrolling="no" src="http://www.meteo.gp/donnees/bulletin/special/alert_gene_libre_2007.php" style="background-color: rgba(255, 255, 255, 0.7); color: #575757; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; padding-top: -10px; text-align: center;" title="Vigilances-Watches" width="600"></iframe>
</div>

Adresse FTP dans Blogger

Quand on veut mettre une adresse FTP dans un lien, BLOGGER l'efface instantanément lorsque l'on édite le message en mode "rédiger".

La parade: raccourcir l'URL avec Google URL Shortener (ne fonctionne pas avec Dot.tk)

Raccourcissement d'URL perso - URL Shortener

ATTENTION! Certaines URL obtenues ne fonctionnent pas! J'utilise maintenant lc.cx

J'ai utilisé l'API de DotTK avec mon sempiternel modèle de formulaire et ça fonctionne.

Raccourcir une URL

Voici le code: 

<table align="center" style="width: 100%px;">

    <tbody>

<tr>

        <td height="55" width="100%"><div align="center" style="line-height: 120%; margin-bottom: 0; margin-top: 0;">

Raccourcir une URL</div>

<div align="center" style="line-height: 120%; margin-bottom: 0; margin-top: 0;">

<input id="__blogname" size="25" value="URL à raccourcir (avec http://)" />  <button onclick="window.open('http://api.dot.tk/tweak/shorten?long=http://' + document.getElementById('__blogname').value + '');">OK !</button><br />

... avec Dot TK<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4D9bLyvwFFsrQRvCL6xPADREFyJSNysxgUlhHoWf8vvaqVw2CvJJ2jDLB7D-IwT_dxfYvpWg2nm2-vhUP0Y5gDt1qJRK8QeHvesVTOuRnOgcI4I8EyDsD1R2keixV8_07yTELd4RXJtcj/s1600/dottk_logo.jpg" imageanchor="1" style="line-height: 120%; margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4D9bLyvwFFsrQRvCL6xPADREFyJSNysxgUlhHoWf8vvaqVw2CvJJ2jDLB7D-IwT_dxfYvpWg2nm2-vhUP0Y5gDt1qJRK8QeHvesVTOuRnOgcI4I8EyDsD1R2keixV8_07yTELd4RXJtcj/s1600/dottk_logo.jpg" /></a></div>

</td>    </tr>

</tbody>

</table>

Ensuite, j'en ai fait une "application" Google Chrome avec lien sur le Bureau. Voici le lien pour faire votre "app": http://simpleblogbase.blogspot.fr/2013/08/blog-post.html 

Un widget va être ajouté dans la barre à droite

Voici l'icône pour votre raccourci sur le Bureau

100 outils et Widgets pour votre blog

http://www.blogdumoderateur.com/presentation-de-100-outils-et-widgets-pour-blog/

Ça eut été bien... Mais hélas, ça date pas mal (2007!) et donc pas mal de liens ne répondent plus ou pas comme on voudrait... Dommage.

Impossible importer une vidéo dans mon blog

 Ce n'est pas souvent que j'importe des vidéos perso dans mes blogs mais hier, j'ai voulu le faire et impossible!

Ça rame, ça mouline, mais le choix de la vidéo ne s'affiche pas. Même problème sur Youtube pour créer un diaporama d'ailleurs... (aucune information de ce côté)

Recherche sur Google ce matin:

http://mestrucspourblogger.blogspot.com/2009/10/inserer-une-video-personnelle.html
et surtout pour la mise à jour en fin d'article :

Le service de publication des vidéos de Blogger (Google Vidéo) est arrêté depuis le 29 avril 2011. Les vidéos personnelles doivent donc être hébergées sur Youtube ou Dailymotion et le code obtenu peut ensuite être publié dans le corps de message du blog.

Je vais me rabattre sur Picasa3...

Bonne surprise: PICASA3 est dans le Synaptic de MINT. Ce n'est pas le cas pour toutes les distros Linux.

Convertir une séquence d'images en video

Convertir une séquence d'images en video

Les motivations peuvent être très diverses. Personnellement, j'utilise le célèbre ZyGrib, un logiciel puissant de météo qui permet de créer une animation visible dans le logiciel mais pas de l'enregistrer en tant que vidéo, hélas... mais seulement comme série d'images.

Sous Linux, j'ai trouvé la parade: le logiciel EKD ( EnkoDer-Mixer) qui permet de convertir une série d'images très facilement et rapidement dans le format voulu. Il suffit d'installer tous les formats (codecs) dans votre Linux. Personnellement  je fais la conversion de ma série d'images en FLV qui est un format universel (Flash). Bon, ce n'est pas encore très au point, mais je vais m'améliorer!


Ci-dessous, un exemple. Il s'agit d'une série d'images du 15 août 2013 concernant la Tempête Tropicale ERIN. Je voulais montrer à mes visiteurs qu'il y avait peu de danger car le système était prévu de passer bien au nord de notre île.

Je précise que l'animation ci-dessous a été fabriquée avec http://flv-player.net/ mais cela revient au même (c'est seulement plus long). la voici ici en mp4 (je n'ai pas le temps de mettre en ligne le FLV)

https://dl.dropboxusercontent.com/u/19586410/VIDEO/erin.mp4

Si vous avez besoin de conseils: CONTACT dans les widgets à droite.

EKD est ici: http://ekd.tuxfamily.org/ Il permet de faire aussi beaucoup d'autres choses. Il est disponible pour Linux, MAC OSX et même Windows. Il fonctionne conjointement avec FFmpeg qui est aussi "cross-platform" c'est-à-dire fonctionnant sur plusieurs OS.

ReCaptcha Google

Il y a comme ça des services Google complètement ignorés du grand public...

Il s'agit ici de ReCaptcha, un système de protection anti-spam par Captcha powered by Google.

Test: cliquez sur le lien ci-dessous:

CONTACTEZ MOI - CONTACT ME

Voici le code pour info seulement (c'est le mien) donc ne l'utilisez pas tel quel! (j'ai d'ailleurs trafiqué le code, il ne fonctionnera pas ainsi..)

<a href="http://www.google.com/recaptcha/mailhide/d?k=01Vd941YxxxxxxxxxF6WBCafQ==&amp;c=Su4uWyGZLUxxxxxxxxxxxxxxxxxxxxR4GnDslGz1=" onclick="window.open('http://www.google.com/recaptcha/mailhide/d?k\075xxxxxxxxxxxxxxxxxRF6xxxxCafQ\710\710\46c\75SuxxxxxxxxxxxY1MS6yU6lpIw\075', '', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=300'); return false;" title="Reveal this e-mail address">CONTACT</a>

Où obtenir gratuitement votre code perso?

http://www.google.com/recaptcha/mailhide/

Voici le code d'origine pour un email "bidon" obtenu avec recaptcha. En bleu, ce que vous pouvez changer (3 points à remplacer par exemple par "Contactez-moi!" et en rouge ce que vous pouvez supprimer... Et ça fonctionne, pas de problèmes!

mone<a href="http://www.google.com/recaptcha/mailhide/d?k=01Vd941YIuM_YYbRF6WBCafQ==&amp;c=nDWmvcd2qJub_bPNY7YHMu56_VmEwcxIc9-uJ0Y0D8k=" onclick="window.open('http://www.google.com/recaptcha/mailhide/d?k\07501Vd941YIuM_YYbRF6WBCafQ\75\75\46c\75nDWmvcd2qJub_bPNY7YHMu56_VmEwcxIc9-uJ0Y0D8k\075', '', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=300'); return false;" title="Reveal this e-mail address">...</a>@gmail.com

Vous pouvez aussi mettre votre code entre des DIV pour l'aligner comme vous voulez
<div style="text-align: center;">votre code</div>

Vous pouvez aussi modifier le style du lien en mode "rédiger" par exemple, caractères gras, italiques, etc.. aucun problème, ça continuera à fonctionner.

Voici ce que ça donne si vous le laissez tel-quel... Seuls les 3 petits points son cliquables. Pas terrible, n'est-ce pas?

mone...@gmail.com

Ooops! J'ai oublié de préciser pour les petits Newbies:

Ce code peut se mettre dans une message Blogger, un Widget HTML-Javascript ou sur un site web classique, où vous voulez!

Héberger un site sur Google Drive

Toujours sur Labnol.org...

The Easiest Way to Host your Website on Google Drive

http://www.labnol.org/internet/host-website-on-google-drive/28178/

Toujours d'excellentes idées... Remarquez qu'on peut faire la même chose encore plus simplement avec Dropbox.