[newbie] afficher une image dans un widget

[ben_mtl]

Salut a tous,

Je me suis cassé un bras y'a pas longtemps alors vu que je peux pas aller jouer dehors je me suis mis en tete de fabriquer un Widget qui me facilitera la vie qd mon bras sera revenu :rateau:
Comme je fais du kayak, je fais un Widget qui va me renseigner sur les niveaux d'eau des rivieres. Les données sur le niveau des rivieres par chez moi sont données sur internet sous formes de graphiques générés automatiquement et presentés sous forme d'image .jpg
Dans le nom de chaque image il y a une refrence correspondant a la riviere.
L'idée c'est que mon Widget aille recuperer l'image correspondant a la riviere que je veux, je la rogne pour ne garder que la partie du graph qui m'est utile et ca s'affiche.
J'ai deja bien avancé sur le code HTML + JS, du moins pour la partie "front" du widget. Pour l'instant je suis en train de faire des tests donc j'ai fixé le nom de l'image a laquelle je veux acceder, en gros j'ai un Widget qui m'affiche une image provenant d'internet... et bien ca marche pas enfin ca fonctionne quand j'ouvre mon HTML dans firefox mais qd je l'execute en tant que Widget dans le dashboard... pas d'image.
J'ai vu qu'il faut ajouter une variable "AllowNetworkAccess" ds le info.plist pour autoriser le widget a acceder a internet mais quand j'ajoute cette variable le Widget s'eteind de suite...

Voila la partie de code qui me sert a afficher l'image rognée :

<div style="border: thin solid red; position: absolute; top: 32px; left: 25px; width: 218px; height: 179px; overflow: hidden;">
<div style="position: absolute; top: -381px; left: -480px;"><img style="width: 700px; height: 600px;" alt="chambly" src="http://www.cehq.gouv.qc.ca/ suivihydro/..%5Cdepot%5Csuivihydro%5Cimages%5C030401_Debit.jpg">
</div>
</div>

(y'a un espace ds l'extension du fichier dans la citation au dessus, j'arrive juste pas a l'enlever mais dans mon code il n'y est pas)

Quelqu'un pourrait me donner un coup de main SVP ?
Merci d'avance.

Benoit

 

[GrandGibus]

Salut,

Tu es sur la bonne piste ...

Il suffit d'avoir la section suivante dans ton Info.plist:

        <key>AllowNetworkAccess</key>
        <true/>

 

[GrandGibus]

Allez, dans un élan de générosité, voici un widget tout packagé.
Tu as:

• le javascript apple séparé
• l'animation pour le flip
• le flip
• l'arrière plan pour le copyright

C'est un peu crad (captures...), car fait à partir d'un vieux widget que j'avais réalisé, mais les bases devraient te servir .

 

[ben_mtl]

Ah voila, effectivement je m'etais planté avec la varible AllowNetworkAccess, j'avais mis

<key>AllowNetworkAccess</key>
<string>1</string>

ca me parraissait logique mais ca marche pas comme ca, héhé.:rateau:

En tous cas maintenant le test fonctionne, je peux continuer

Merci pour ton exemple de Widget, je vais examiner tout ca pour voir si ca me donne des idées.

Benoit

 

[ben_mtl]

Nouveau petit probleme :
Dans mon HTML j'ai une balise div qui apelle une image et qui a pour id "graph" :

<div style="position: absolute; top: -381px; left: -480px;" id="graph"><img style="width: 700px; height: 600px;" alt="Lachine / 67" src="http://www.cehq.gouv.qc.ca/        suivihydro/..%5Cdepot%5Csuivihydro%5Cimages%5C001003_Debit.jpg">
        </div>

Maintenant avec mon Javascript je voudrais pouvoir changer ce qu'il y a entre ces balises <div> et </div>, pour ca j'utilise :

document.getElementById("graph").innerText = "<img style='width: 700px; height: 600px;' alt='Rivi\350re Rouge' src='http://www.cehq.gouv.qc.ca/        suivihydro/..%5Cdepot%5Csuivihydro%5Cimages%5C040204_Debit.jpg'>";

Et bien devinez quoi : ca m'affiche plus rien :mouais:... au debut je pensais que ca vennait des " mais j'ai lu qu'il fallait les remplacer par des '.. mais là doit y'avoir une subtilité dans l'utilisation des caracteres que je ne saisis pas.

J'utilise la meme fonction JavaScript pour changer du texte entre 2 autres balises div ca fonctionne tres bien (mais c'est plus simple c'est juste 3 mots sans caracteres speciaux).

Merci

 

[p4bl0]

Nouveau petit probleme :
Dans mon HTML j'ai une balise div qui apelle une image et qui a pour id "graph" :

<div style="position: absolute; top: -381px; left: -480px;" id="graph"><img style="width: 700px; height: 600px;" alt="Lachine / 67" src="http://www.cehq.gouv.qc.ca/        suivihydro/..%5Cdepot%5Csuivihydro%5Cimages%5C001003_Debit.jpg">
        </div>

Maintenant avec mon Javascript je voudrais pouvoir changer ce qu'il y a entre ces balises <div> et </div>, pour ca j'utilise :

document.getElementById("graph").innerText = "<img style='width: 700px; height: 600px;' alt='Rivi\350re Rouge' src='http://www.cehq.gouv.qc.ca/        suivihydro/..%5Cdepot%5Csuivihydro%5Cimages%5C040204_Debit.jpg'>";

Et bien devinez quoi : ca m'affiche plus rien :mouais:... au debut je pensais que ca vennait des " mais j'ai lu qu'il fallait les remplacer par des '.. mais là doit y'avoir une subtilité dans l'utilisation des caracteres que je ne saisis pas.

J'utilise la meme fonction JavaScript pour changer du texte entre 2 autres balises div ca fonctionne tres bien (mais c'est plus simple c'est juste 3 mots sans caracteres speciaux).

Merci

document.getElementById("graph").innerHTML si c'est pour mettre du html

 

[ben_mtl]

OK merci, maintenant ca m'affiche l'image, par contre j'ai encore un souci (pour changer).
Pour rappel, le "back" de mon widget a une boite de choix, en fonction du choix, qd on reviens sur le "front" ca influe sur un texte (le nom de la riviere) et une photo (le graph du niveau d'eau).

Voici le code qui interprette le choix :

switch(SpotChoisi)            //recupere sa valeur,
            {
                case "001003":
                    document.getElementById("SpotText").innerText = SpotChoisi;   //donne la valeur de SpotChoisi à SpotText (Nom du champ de texte dans le html)
                    document.getElementById("graph").innerHTML = "<img style=\"width: 700px; height: 600px;\" alt=\"Lachine / 67\" src=\"http://www.cehq.gouv.qc.ca/        suivihydro/..%5Cdepot%5Csuivihydro%5Cimages%5C001003_Debit.jpg\">"; //colle la bonne image
                    document.getElementById("spotPopup").selectedIndex = 1;   //dis au html que le spot choisi est selectionné ds la boite de choix
                    break;
                case "030401":
                    document.getElementById("SpotText").innerText = SpotChoisi;
                    document.getElementById("graph").innerHTML = "<img style=\"width: 700px; height: 600px;\" alt=\"Chambly\" src=\"http://www.cehq.gouv.qc.ca/        suivihydro/..%5Cdepot%5Csuivihydro%5Cimages%5C030401_Debit.jpg\">";
                    document.getElementById("spotPopup").selectedIndex = 2;
                    break;
                case "040204":
                    document.getElementById("SpotText").innerText = SpotChoisi;
                    document.getElementById("graph").innerHTML = "<img style=\"width: 700px; height: 600px;\" alt=\"Rivi\350re Rouge\" src=\"http://www.cehq.gouv.qc.ca/        suivihydro/..%5Cdepot%5Csuivihydro%5Cimages%5C040204_Debit.jpg\">";
                    document.getElementById("spotPopup").selectedIndex = 3;
                    break;
                case "040110":
                    document.getElementById("SpotText").innerText = SpotChoisi;
                    document.getElementById("graph").innerHTML = "<img style=\"width: 700px; height: 600px;\" alt=\"Rivi\350re Du Nord\" src=\"http://www.cehq.gouv.qc.ca/        suivihydro/..%5Cdepot%5Csuivihydro%5Cimages%5C040110_Debit.jpg\">";
                    document.getElementById("spotPopup").selectedIndex = 4;
                    break;
                default:
                    document.getElementById("SpotText").innerText = "Lachine / 67";
                    document.getElementById("graph").innerHTML = "<img style=\"width: 700px; height: 600px;\" alt=\"Lachine / 67\" src=\"http://www.cehq.gouv.qc.ca/        suivihydro/..%5Cdepot%5Csuivihydro%5Cimages%5C001003_Debit.jpg\">";
                    document.getElementById("spotPopup").selectedIndex = 1;
                    break;
                    
            }

Au demarrage du widget ca me charge la photo du choix "default" et le nom de la riviere qui correspond.
Par contre quand je vais faire un choix au dos du Widget, quand je reviens sur le front ca me met a jour le nom de la riviere choisie mais la photo ne change pas, ca reste celle définie en "default". Faut-il forcer le widget a recharger l'image ? Je ne comprend pas trop comment il peut rafraichir le texte mais pas l'image.

Ah oui et puis tant qu'a y etre, comment faire pour definir le choix par defaut dans la boite de choix du "back" ? Par defaut au premier demarrage du widget il me selectionne le 2e choix (ca ne correspond pas a l'image chargée par defaut mais c'est le choix qui est coché au depart)..

 

[ben_mtl]

Apres un peu de temps a reflechir a tout ca et a examiner le code en details, le probleme ne viens pas de là, apparament c'est la partie qui extrait le choix de la liste au dos du Widget qui ne fonctionne pas : j'ai la variable qui reste non assignée... du coup je comprend pas non plus pourquoi le nom de la riviere change malgrés tout sur le "front"..

 

[Warflo]

Quand même au lieu de récrire toute ton <img />, je te conseil plutot:
document.getElementById('tonimage').src = "";
document.getElementById('tonimage').alt = "";