Notez que nous avons une page HTML minimale. Vous pouvez couper et coller le code dans votre éditeur préféré. Et n’oubliez pas de couper et coller le SVG pour remplacer le commentaire. Ma version de Chrome requiert que la page soit au format HTML pour que la section JavaScript soit disponible. Il s’agit donc d’un navigateur qui traite toujours SVG de manière distincte. Mais, nous sommes bien loin des jours  . 
 Si vous faites un copier-coller parfait, vous pouvez afficher la page et voir la porte AND passer du rouge au vert encore et encore. 
  Lectures recommandées :  Décomposition du cercle SVG en chemins 
 Création de panneaux à partir de composants VUE 
 Nous sommes déjà sur la bonne voie pour donner vie à un seul panneau, mais si nous voulons gérer de grandes collections de panneaux de manière raisonnable, nous aurions du pain sur la planche. Ce serait particulièrement le cas si nous nous basions simplement sur notre premier exemple. 
 Alors que le premier exemple nous montre comment modifier de manière asynchrone une vue d'objet, il ne nous montre pas comment lier la vue à l'état d'un objet de données. encore moins celui qui gère une machine. Nous pouvons certainement comprendre comment la démonstration  setInterval  peut être remplacée par un gestionnaire  fetch mais nous pourrions même ne pas obtenir l'état d'une machine du serveur Web servant la page contenant le SVG. De plus, lorsque nous obtenons les données, nos programmes doivent maintenant connaître la structure DOM de la page donnée. 
 Heureusement, les frameworks tels que Vue sont devenus populaires et peuvent nous épargner beaucoup de travail. 
 Il est facile de se renseigner sur Vue. La documentation de  Vue  est très accessible. Donc, si cette discussion prend trop d'avance, vous pourrez passer un peu de temps à apprendre à connaître Vue sur son propre site Web. Mais, il y a de très bonnes discussions au sein des pages Smashing.  Krutie Patel  a écrit un article remarquable sur la création d'une infographie.  Souvik Sarkar  nous explique comment créer un tableau de bord météo avec Vue. 
 Sélection de groupes de panneaux associés 
 Pour la première étape, nous devons nous intéresser à la recherche de groupes de panneaux. Une des raisons pour cela est d’abord que c’est au niveau de la structure de nos interactions humaines. 
 L’utilisateur cherche quelque chose qui l’intéresse. Peut-être s’intéresse-t-il à tous les appareils situés dans une même ville. Peut-être a-t-il de nombreux lots de produits liquides et souhaite-t-il se limiter à un type de produit, chaque lot étant régi par une petite collection de dispositifs IoT. Donc, l'utilisateur va d'abord chercher pour obtenir une petite liste. 
 Voici le processus: 

 Rechercher des groupes de panneaux par caractéristiques / paramètres. 
 Afficher une liste d'icônes représentant des groupes. 
 Sélectionner un élément icon (click / tap). 
 Commencez à utiliser les panneaux identifiés par l'icône lorsqu'ils apparaissent. 

 Une autre raison pour laquelle il s'agit d'une bonne première étape est que nous pouvons utiliser Vue dans sa forme la plus simple. Aucun outil de construction nécessaire. Nous allons simplement inclure  vue.js  avec une balise script en HTML. En fait, nous n’avons même pas besoin de le télécharger. Il existe un site qui sert une copie de travail de  vue.js . 
 La balise suivante suffit: 

  
 J'ai copié la balise de script directement à partir de Documentation Vue sur l'installation.
 Nous avons maintenant besoin d'une page Web capable de charger des icônes et d'en faire quelque chose de simple à utiliser. Vue rend cela très facile. En fait, je viens d'écrire une petite application pour gérer une liste Twitter à l'aide de Vue. Il ne gère que les champs de texte. Comme il est un peu plus simple qu'un  SPWA  utilisant des icônes, nous pouvons l'examiner, puis le modifier pour qu'il soit notre cadre d'application d'une page souhaité.
 Voici une partie de l'aspect de la page. like:
 Cela ressemble à une page assez simple. Chaque entrée numérique externe est un créneau horaire contenant un ou deux tweets. Le deuxième tweet est facultatif. Si vous modifiez un tweet, les mécanismes Vue mettent à jour un objet JavaScript. Cette page permet à l'utilisateur de cliquer sur le bouton «Mettre à jour les entrées» pour indiquer au serveur que quelque chose a changé, via sa fonction de gestionnaire de boutons.
 Pour que le gestionnaire de boutons puisse relayer des données sur le serveur, il doit changer. l'objet de données Vue dans une chaîne JSON. Maintenant, vous pouvez vous demander à quel point il sera difficile de traduire un objet Vue en JSON. Il s'avère être une ligne de code. Vous pouvez trouver la ligne dans le code source suivant, mais si vous souhaitez la trouver plus rapidement, elle est mise en surbrillance dans le paragraphe situé après le code source.
 La page a l'air simple. Les apparences peuvent être trompeuses. Bien sûr, la page a l'air simple, mais le code est-il simple? Oui, c'est vrai! En utilisant Vue, la page gère le contenu des champs de manière presque magique. Voici le code:


  
  
          

        
        
  
            

                
 tweets mangage 
                
 Mon moteur de tweet personnel.
                Cette page accède à une page tweet personnelle appartenant à {{tweetOwner}}. 
 
                 Update Entries 
            
            
          
          

            

                
                

                    
                    
                
                
                

                    
                
            
          
        
   
 Donc, pour souligner les lignes étonnantes qui parlent de la puissance du cadre, répétons ici:
 A. Ceci extrait les données.
 postOptionsObject.body = JSON.stringify (twtApp.tweets);
 B. Ceci met les données dans Vue et affiche la mise à jour de l'écran:
 twtApp.tweets = JSON.parse (text) // text est la réponse du serveur.
 Il semble qu'il y aura un bon moyen d'exprimer la façon dont les données mettront à jour les panneaux pour l'IoT.
 Maintenant, passons aux tweets en icônes cliquables conçues pour extraire des composants de le serveur Web.
 Des tweets aux panneaux Récupération d’icônes
 Les gens aiment utiliser SVG pour les icônes. Ils aiment utiliser SVG plus que d’autres choses, autant que je sache. Je ne vais que sur le nombre de sites Web qui vendent ou distribuent des icônes créées en SVG. Le point de vente est que les graphiques en ligne ont moins d'octets que les images. Et si je devais demander des listes d'images avec un comportement semblable à celui d'un bouton, j'aurais peut-être récupéré des fichiers PNG ou JPEG à l'époque où SVG était en iframes. Mais nous pouvons même trouver des bibliothèques dans les listes de contributeurs Vue qui nous aident à créer une portion d’icônes.
 Nous pouvons transformer la page  tweets  en une liste d’icônes renvoyée comme résultat de recherche. Juste un petit code doit être changé. Bien sûr, il y a quelques points à surveiller si nous voulons que les icônes SVG soient chargées en tant que boutons. Vue fournit des mécanismes pour insérer du HTML dans l'application. Ces mécanismes doivent être utilisés ou les éléments DOM extraits du serveur ne sont pas interprétés.
 Voici le type de rendu que vous pouvez obtenir si vous suivez votre première impulsion en créant un guidon  . emplacement variable dans le DOM de l'application.
 Voici le code qui produit le résultat sur l'image:

          

            
                 {{icon}}
            
          
        
  
 Notez que nous sommes passés de boucles en tweets à icônes en boucles.  tweet in tweets  a été remplacé par  icon dans iconList . Notre  twtApp  s'accroche à l'élément du DOM  #tweetAppDiv tandis que notre  iconApp  s'accroche à l'élément du DOM  #iconAppTry . Dans l'objet d'option Vue, le sous-objet  data  a un  tweets  dans la première application et une  iconList  dans la seconde. Les champs sont tous deux des tableaux vides qui reçoivent des données lorsque la routine  fetch  fait son travail.
 Mais nous avons trop imité notre application de tweet. Dans le code ci-dessus, iconList est un tableau et le serveur est censé envoyer un tableau de chaînes. Supposons donc que le serveur nous ait envoyé du code HTML et que nous le décodions correctement avec le tableau attribué à  data.iconList . Ensuite, vous pouvez voir l’image ci-dessus.
 Maintenant, changeons un peu le code. Dans ce code révisé, on peut voir ce qui suit:
 v-html = "icon"> 
 Vue répond à la syntaxe v-html en insérant le DOM de l'élément  icon . Notez que la syntaxe est incluse après la directive de boucle en tant qu'attribut supplémentaire de la balise  span 
 en supprimant la syntaxe du guidon   et en utilisant  v-html notre image passe à quelque chose de plus compréhensible:
 

          

            
            
          
        
  
While v-html is a quick way to do things, the Vue team recommends using components to get the desired HTML into the page. That seems like a good idea, and we shall soon set about doing that.
But, let’s use the v-html syntax for our next example.
It’s time to set up our working example for fetching SVG icons. Let’s have those icons be responsive to a button click. Once those are working, we can get the panels associated with an icon.
Let’s suppose that the SVG required for icons is stored in a database. For our example, we can just fetch a JSON file from the server. The grown-up version of the icon server would store many such files in a database, and deliver them to the page with the same mechanisms.
Also, it’s best if the SVG arrives on the page URL encoded since we will be using JSON parse. The SVG can be decoded by calling JavaScript’s decodeURIComponent function.
In order to simulate the response to searching, we can make use of several JSON files. The page can have one button for each file. Here is the code for the page:


  
  
          

        
        
  
            

            
Request MCU Groups
            
These are groups satistfying this query: {{queryToken}}.
 
            Find All
            Find 5 Point
            Find 6 Point
            

          
          

            
                

                
            
          
        
   
Here is one display of icons that have been fetched from the server:
The data being sent is an array with the following kind of structure:
{
 "style" : {
     "color" : "red",
     "backgroundColor" : "yellow"
 },
 "icon" : svg1,
 "name" : "thermos"
},
Here, svg1 is SVG taken from a file. Of course, a righteous server would have taken the structure from a database, where the SVG would be stored in the structure.
Here is a snippet from the above code. This is the code that fetches the JSON and places the array of structures into the Vue app. You can see the promise structure of fetch in use. The text is parsed, and in the next line, the encoded SVG is decoded. One more line, and Vue updates the page. The number of buttons in the button bar will be equal to the length of the JSON array.
fetch(url).then((response) => {  // this is now browser native
    response.text().then((text) => {
             var newData = JSON.parse(text); // DATA UPDATE! Ça y est.
                newData = newData.map(obj => {
                           obj.icon = decodeURIComponent(obj.icon);
                           return(obj)
                       });
             // the page update right away with new data.  
             iconApp.iconList = newData;  
        });
});

Now, just two more snippets. The Vue app. The reader will notice that the @click directive has been included on the buttons. The data element, iconEntry.nameis passed to a method within quotes.
The method is defined within the Vue app:


    

    


Here is the snippet for the definition of methods. The methods object is added just after the data object within the app parameter object:
,
methods: {
  goGetPanel: (pname) => {
      // `this` inside methods points to the Vue instance
      alert('Hello ' + pname + '!')
  }
}
The reader should find the goGetPanel definition, and the use of it was pointed out for the @click handler. In our final application, the alert call can be replaced by a function that fetches panels from the server.
A Component Library For IoT Panels
We could just decide that panels that we fetch from the server can be HMTL or just SVG drawings, but if there are going to be many kinds of panels, we would hope that the job of creating panels could be simplified by having libraries of components to choose from. We can imagine that SVG editors could be improved to allow library components to be dropped onto pictures as part of editing. Then, if the SVG editor could output a version of the picture with component tags, then the use of Vue would allow the picture to be created while ensuring that the JavaScript automation and animation is neatly woven together. For our discussion, some hand editing can help us get there.
If we want to create panels out of Vue components, then we had better figure out how to make the components and then collect them together into something useful. We will have to switch to using command line tools provided by Vue and organize our workflow.
Components
The Vue documentation points out that the component data section (subobject) of the component definition needs to be a function that returns data. The reason for this is that Vue needs to keep data separate among the instances. So, in going from a Vue application initialization to a component definition there is another small code change.
In this first snippet of code a Vue application is being initialized:
var iconApp = new Vue({
      el: '#iconApp',
      data: {  // this is the data field that can be easily updated
      },
      methods : {
        ...
      }
});
In this new snippet of code, a component is being defined and registered. First, notice that instead of creating a new Vue instance, a component named iconic is being registered. Then, the data field returns custom data for any iconic instance that the Vue app makes. Finally, the template field is present at the end of the component registration. Any HTML that might have been written on the web page to display the component can be part of the template.
Vue.component('iconic',
          data: () => { 
            var instanceData = {
                // data fields named for the 
                // variables appearing in the template
                onevar : "test"
            }
            return(instanceData);
          },
          methods : {
            ...
          },
          template: '
This appears in every instance {{onevar}}
'
    });
So, we can imagine a panel with thermometers. So, if someone provided a thermometer component, we would expect a component definition somewhere in our code. As such:
Vue.component('thermometer',
          data: () => { 
            var instanceData = {
                // data fields named for the 
                // variables appearing in the template
                temperature : 0
            }
            return(instanceData);
          },
          methods : {
            ...
          },
          template: '
Some SVG will go here
'
    });
We are trying to create something that looks like this:
The thermometer component is very similar to the first components that you will come across in the Vue tutorials. But, it’s a little tricky to figure out how to update it. There is a better way of defining the component for reactivity using properties. And, that is in the following:
Vue.component('thermometer', {
    props: ['temperature'],
    computed : {
        y: function() {
            var t = this.temperature/100;
            var h = 54.724472;
            var y_bar = 41.176476  // starts near the top
            // pretend the scale is 1 to 100, so that the temperature is a precentage
            return((1 - t)*h + y_bar)
        },
        height : function() {
            var t = this.temperature/100;
            var h = 54.724472; // as high as the whole range
            var y_bar = 41.176476
            // pretend the scale is 1 to 100, so that the temperature is a precentage
            return(t*h)
        }
    },
    template: '#thermometer-template'
})
So, instead of representing temperature as a data element. It is represented as a property under props. Then, there is a new section, computedthat provides variables that are functions of the property. We see this.temperature being used for both y and height. These computed variables are being used in the SVG as attributes for a rectangle.
In SVG, y grows from the top down. So, when we want the rectangle to be small at the bottom of the thermometer, the y of the red box has to be lower, and the height has to be reduced so that (y + height) stays at the thermometer zero.
Notice the template field in the definition of the components. It is in fact, a document element ID. The element being referred to is a script section with the special type: type="text/x-template". The script element is where the SVG for the thermometers is. And, the SVG makes use of Vue variables and control terms so that reactivity can be defined.
Here is some of the SVG:
 The reader can find id="thermometer-template" at the top, and looking further down to the rect elements, the computed variables can be found.
Here the variable uses are separated out. The Vue shorthand syntax for v-bind is in use, with :height="height" and the same for y:
 x="111.90748"
         :height="height"
         :y="y"
When the parent of the SVG elements sets variables that act as input to the thermometer property temperatureVue recalculates height and y. As a result, the position and height of the red box change.
It helps to have a listing of the Vue app that makes use of the thermometer.

    
    
  
        

            
Set Temperature
            
These are groups satistfying this query: {{queryToken}}. 
            mid
            low
            high
        
        
        
        

    
  
That is the whole thing. There are three buttons which call the updateTemp method of the thermoApp Vue application. The data section has two temperature variables. And, each thermometer updates its temperature when the values change.
The code for the two thermometers called out below can be found on the HTML assigned to the Vue app.

        
Notice that application uses the function formalism for the method definition. Defining updateTemp this way updateTemp: function (tval1,tval2) allows for the instance variable this to be accessed.
Also, defining updateTemp this way updateTemp: (tval1,tval2) => assigns this to an internal data structure that does not react and update the view.
Assembling a Panel
Each IoT panel can be a component. Vue provides a way of defining components with subcomponents. Alternatively, there is a slot mechanism that can be used to yield a component that can wrap around any HTML content.
In the following few paragraphs, let’s look at making a panel out of subcomponents. There are two forms that follow quickly from our examples. In one case, the thermometers can be subcomponents called out in JavaScript. In another case, the components are defined independently but are mentioned in the HTML.
In both cases, the same HTML can be used for the template. Here is our panel as a template:
The only difference between the first detailing of the application is that a div element is surrounding the two thermometers. Vue will throw an error if the template is missing a top level DOM element. The div passes the Vue requirement, and the multiple elements may be included inside of it.
Now, we may see the two thermometers side by side. Passing the temperatures from the top to the final thermometer has values cascading down. At the top level, the panel joins the application when a single line is included in the application DOM.
The template for the panel, although simple, seems to indicate that panels can be easily designed in term of components. It’s as if a language for just IoT components is possible.
Now, the template definition for the panel is simple enough. Here it is with the subcomponents defined independently:
Vue.component('thermo-panel', {
              props: ['temp1','temp2'],
              template: '#thermo-panel-template'
            });
That is about as much as is required to make the panel functional. It is true that this version relies on a long list of properties for defining values to be updated as messages come into the page. But, this is a good start. Updating the data object at the top level does the job of animating the thermometers. However, as the panels become complicated, there may need to be another method for showing change.
Having made mention to the other ways of specifying subcomponents, for the panel, we should take a look at it. Here it is:
Vue.component('thermo-panel', {
              props: ['temp1','temp2'],
              template: '#thermo-panel-template',
              components: {
                // a sub component for the labels
                'thermometer': {
                  props: {
                    temperature: Number,
                  },
                  template: '#thermometer-template',
                  computed : {
                    y: function() {
                        var t = this.temperature/100;
                        var h = 54.724472;
                        var y_bar = 41.176476  // starts near the top
                        // pretend the scale is 1 to 100, so that the temperature is a precentage
                        return((1 - t)*h + y_bar)
                    },
                    height : function() {
                        var t = this.temperature/100;
                        var h = 54.724472; // as high as the whole range
                        var y_bar = 41.176476
                        // pretend the scale is 1 to 100, so that the temperature is a precentage
                        return(t*h)
                    }
                  }
              }
            }
        });

There is certainly more code, but that is because the JavaScript for the thermometer component is included within the components list of thermo-panel. The two approaches do the same job, but they offer different ways of packaging component definitions.
At the moment, my preference is for the first way. It should be considerably easier to revise panels and have them retrieved dynamically if only changing template and properties is required. To this end, the independently defined components form a component library. But, although that seems better, in the following it becomes more convenient to use the second, seemingly more verbose way.
Given that we can make responsive panels out of components in clearly defined ways, I’ll explain how we can manage them as a database that can make simple queries in the next part of my article. Stay tuned!
(dm, yk, il)
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
 
   
 
Source link 
Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)