Solució Exercici: Estats - Comptaquilòmetres cotxe

<div class="page"> <div class="cover text-center"> <img class="mx-auto" src=/itb/images/logo_mislata.png alt="logo"> # Solució Exercici: Estats - Comptaquilòmetres cotxe <div class="text-end fit-content ms-auto my-3 mt-auto pt-3"> <p><strong>Autor:</strong> Joan Puigcerver Ibáñez</p> <p><strong>Correu electrònic:</strong> j.puigcerveribanez@edu.gva.es</p> <p><strong>Curs:</strong> 2024/2025</p> </div> <div> <p>Aquest material és una obra derivada a partir del material de: <strong>Sergio Badal</strong></p> <p class="fw-bold mb-0">Llicència: BY-NC-SA</p> <p class="d-none d-md-block">(Reconeixement - No Comercial - Compartir Igual)</p> <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.ca" target="_blank"> <img class="mx-auto" src="/itb/images/license.png" alt="Licence"/> </a> </div> </div> </div> {:toc} # Diagrama d'estats cotxe Volem modelar els diferents estats i accions que hi poden haver en la pantalla d'un cotxe. Aquesta pantalla pot estar en 3 estats: - __Compta quilòmetres__: El compta quilòmetres total mostra la distància total recorreguda pel vehicle. - __Comptador viatge__: Mostra la distància recorreguda pel vehicle des del moment en què es va reiniciar per última vegada. Només aquest és reiniciable. - __Consum__: Mostra els litres cada 100 km consumits. Apretant un botó es permet alternar entre els 3 modes, sempre en l'ordre anterior sense possiblitat de tornar enrere. En el mode __comptador viatge__, podem mantindre apretat el botó per reiniciar el comptador. Si no es manté apretat, passa al següent estat. Cal utilitzar __entry__, __do__, __exit__ quan siga necessari. ## Solució ::: solution <div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="{"highlight":"#0000ff","nav":true,"resize":true,"toolbar":"zoom layers tags lightbox","edit":"_blank","xml":"<mxfile host=\"app.diagrams.net\" modified=\"2024-04-22T09:46:02.898Z\" agent=\"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36\" etag=\"d-SYxsBRrvEuuRM_D038\" version=\"24.2.7\" type=\"google\">\n <diagram name=\"Page-1\" id=\"2YBvvXClWsGukQMizWep\">\n <mxGraphModel dx=\"2074\" dy=\"1114\" grid=\"1\" gridSize=\"10\" guides=\"1\" tooltips=\"1\" connect=\"1\" arrows=\"1\" fold=\"1\" page=\"1\" pageScale=\"1\" pageWidth=\"850\" pageHeight=\"1100\" math=\"0\" shadow=\"0\">\n <root>\n <mxCell id=\"0\" />\n <mxCell id=\"1\" parent=\"0\" />\n <mxCell id=\"Wbr10UhurKWa1ZI_zyCr-31\" style=\"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;\" parent=\"1\" source=\"Wbr10UhurKWa1ZI_zyCr-1\" target=\"rUmXZGd3vIKuDlGXPuo1-1\" edge=\"1\">\n <mxGeometry relative=\"1\" as=\"geometry\">\n <mxPoint x=\"200\" y=\"160\" as=\"targetPoint\" />\n </mxGeometry>\n </mxCell>\n <mxCell id=\"Wbr10UhurKWa1ZI_zyCr-1\" value=\"\" style=\"ellipse;html=1;shape=startState;fillColor=#000000;strokeColor=#ff0000;\" parent=\"1\" vertex=\"1\">\n <mxGeometry x=\"235\" y=\"80\" width=\"30\" height=\"30\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"IcmS1CPiVGpFXhYCCC_2-3\" value=\"Apretar el botó\" style=\"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;\" parent=\"1\" source=\"rUmXZGd3vIKuDlGXPuo1-1\" target=\"IcmS1CPiVGpFXhYCCC_2-1\" edge=\"1\">\n <mxGeometry relative=\"1\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"rUmXZGd3vIKuDlGXPuo1-1\" value=\"Compta quilòmetres\" style=\"swimlane;fontStyle=1;align=center;verticalAlign=middle;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=0;resizeLast=1;container=0;fontColor=#000000;collapsible=0;rounded=1;arcSize=30;strokeColor=#ff0000;fillColor=#ffffc0;swimlaneFillColor=#ffffc0;dropTarget=0;\" parent=\"1\" vertex=\"1\">\n <mxGeometry x=\"155\" y=\"160\" width=\"190\" height=\"100\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"rUmXZGd3vIKuDlGXPuo1-2\" value=\"&lt;b&gt;entry/ &lt;/b&gt;Mostrar quilòmetres&lt;div&gt;&lt;b&gt;do/ &lt;/b&gt;Actualitzar els quilòmetres&lt;br&gt;&lt;b&gt;exit/&lt;/b&gt;&amp;nbsp;Amagar quilòmetres&lt;/div&gt;\" style=\"text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;spacingLeft=4;spacingRight=4;whiteSpace=wrap;overflow=hidden;rotatable=0;fontColor=#000000;\" parent=\"rUmXZGd3vIKuDlGXPuo1-1\" vertex=\"1\">\n <mxGeometry y=\"30\" width=\"190\" height=\"70\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"IcmS1CPiVGpFXhYCCC_2-6\" value=\"Apretar el botó\" style=\"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;\" parent=\"1\" source=\"IcmS1CPiVGpFXhYCCC_2-1\" target=\"IcmS1CPiVGpFXhYCCC_2-4\" edge=\"1\">\n <mxGeometry relative=\"1\" as=\"geometry\">\n <Array as=\"points\">\n <mxPoint x=\"250\" y=\"450\" />\n <mxPoint x=\"250\" y=\"450\" />\n </Array>\n </mxGeometry>\n </mxCell>\n <mxCell id=\"IcmS1CPiVGpFXhYCCC_2-1\" value=\"Distància recorreguda\" style=\"swimlane;fontStyle=1;align=center;verticalAlign=middle;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=0;resizeLast=1;container=0;fontColor=#000000;collapsible=0;rounded=1;arcSize=30;strokeColor=#ff0000;fillColor=#ffffc0;swimlaneFillColor=#ffffc0;dropTarget=0;\" parent=\"1\" vertex=\"1\">\n <mxGeometry x=\"160\" y=\"320\" width=\"180\" height=\"110\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"IcmS1CPiVGpFXhYCCC_2-2\" value=\"&lt;b&gt;entry/ &lt;/b&gt;Mostrar distància recorreguda&lt;br&gt;&lt;b&gt;exit/&lt;/b&gt;&amp;nbsp;Amagar distància recorreguda\" style=\"text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;spacingLeft=4;spacingRight=4;whiteSpace=wrap;overflow=hidden;rotatable=0;fontColor=#000000;\" parent=\"IcmS1CPiVGpFXhYCCC_2-1\" vertex=\"1\">\n <mxGeometry y=\"30\" width=\"180\" height=\"80\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"IcmS1CPiVGpFXhYCCC_2-4\" value=\"Consum\" style=\"swimlane;fontStyle=1;align=center;verticalAlign=middle;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=0;resizeLast=1;container=0;fontColor=#000000;collapsible=0;rounded=1;arcSize=30;strokeColor=#ff0000;fillColor=#ffffc0;swimlaneFillColor=#ffffc0;dropTarget=0;\" parent=\"1\" vertex=\"1\">\n <mxGeometry x=\"170\" y=\"500\" width=\"160\" height=\"100\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"IcmS1CPiVGpFXhYCCC_2-5\" value=\"&lt;b&gt;entry/ &lt;/b&gt;Mostrar el consum&lt;div&gt;&lt;b&gt;do/ &lt;/b&gt;Actualitzar el consum&lt;br&gt;&lt;b&gt;exit/&lt;/b&gt;&amp;nbsp;Amagar el consum&lt;/div&gt;\" style=\"text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;spacingLeft=4;spacingRight=4;whiteSpace=wrap;overflow=hidden;rotatable=0;fontColor=#000000;\" parent=\"IcmS1CPiVGpFXhYCCC_2-4\" vertex=\"1\">\n <mxGeometry y=\"30\" width=\"160\" height=\"70\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"IcmS1CPiVGpFXhYCCC_2-8\" value=\"Reiniciar distància recorreguda\" style=\"swimlane;fontStyle=1;align=center;verticalAlign=middle;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=0;resizeLast=1;container=0;fontColor=#000000;collapsible=0;rounded=1;arcSize=30;strokeColor=#ff0000;fillColor=#ffffc0;swimlaneFillColor=#ffffc0;dropTarget=0;\" parent=\"1\" vertex=\"1\">\n <mxGeometry x=\"440\" y=\"345\" width=\"210\" height=\"60\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"IcmS1CPiVGpFXhYCCC_2-9\" value=\"&lt;b&gt;do/ &lt;/b&gt;Reiniciar distància recorreguda\" style=\"text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;spacingLeft=4;spacingRight=4;whiteSpace=wrap;overflow=hidden;rotatable=0;fontColor=#000000;\" parent=\"IcmS1CPiVGpFXhYCCC_2-8\" vertex=\"1\">\n <mxGeometry y=\"30\" width=\"210\" height=\"30\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"IcmS1CPiVGpFXhYCCC_2-12\" value=\"Mantindre botó apretat\" style=\"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;\" parent=\"1\" source=\"IcmS1CPiVGpFXhYCCC_2-2\" target=\"IcmS1CPiVGpFXhYCCC_2-8\" edge=\"1\">\n <mxGeometry x=\"0.1858\" y=\"10\" relative=\"1\" as=\"geometry\">\n <mxPoint x=\"1\" as=\"offset\" />\n </mxGeometry>\n </mxCell>\n <mxCell id=\"IcmS1CPiVGpFXhYCCC_2-14\" style=\"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;\" parent=\"1\" source=\"IcmS1CPiVGpFXhYCCC_2-9\" target=\"IcmS1CPiVGpFXhYCCC_2-2\" edge=\"1\">\n <mxGeometry relative=\"1\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"IcmS1CPiVGpFXhYCCC_2-15\" value=\"Apretar el botó\" style=\"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;\" parent=\"1\" source=\"IcmS1CPiVGpFXhYCCC_2-4\" target=\"rUmXZGd3vIKuDlGXPuo1-1\" edge=\"1\">\n <mxGeometry relative=\"1\" as=\"geometry\">\n <Array as=\"points\">\n <mxPoint x=\"100\" y=\"565\" />\n <mxPoint x=\"100\" y=\"203\" />\n </Array>\n <mxPoint x=\"100\" y=\"150\" as=\"targetPoint\" />\n </mxGeometry>\n </mxCell>\n </root>\n </mxGraphModel>\n </diagram>\n</mxfile>\n\n"}"></div><script type="text/javascript" src="https://viewer.diagrams.net/js/viewer-static.min.js"></script> <figcaption>Figura 1: Diagrama d'estats d'un comptaquilòmetres</figcaption>