04.TheClockCycleDiagramWindow

La ventana del diagrama de ciclos de reloj

En esta ventana se muestra la tabla con el historial de la ejecución de la simulación.

Esta tabla representa las instrucciones en las distintas etapas, siendo la instrucción la fila, y la etapa la columna.

Esto nos permite representar las instrucciones y los datos que se leen, calculan o escriben en cada momento.

Esta tabla está hecha con un canvas de HTML 5 para representar flechas de los adelantamientos, movimientos, los colores de las distintas etapas, etc.

Stalls and Forwarding:

Las paradas se representan en cajas, que se superponen con un color correspondiente al escenario parado. El contenido de la caja da más información sobre el tipo de puesto:

Tipo	Descripción
R-Stall	RAW-Stall. Una flecha roja muestra (f habilitada) la instrucción que provoca la parada.
T-Stall	Trap-Stall. Esta pérdida ocurre solo por una Instrucción de Trampa. Una instrucción Trap permanece en la etapa IF, hasta que no haya otras instrucciones en la canalización.
W-Stall	WAW-Stalls. Una flecha roja muestra (si está habilitada) la instrucción que provoca el bloqueo.
S-Stall	Puesto estructural, No hay suficientes recursos para atender la instrucción.
Stall	Si una instrucción de punto flotante está en la etapa MEM, la siguiente instrucción se detendrá en la etapa intEX, etiquetada con "Stall".

Los adelantamientos se representa con una flecha verde que muestra el origen y el destino del adelantamiento.

Tabla

Ejecución

Como podemos ver en la imagen anterior se muestran los distintos adelantamientos en distintos colores (Rojo o verde)

Desplazamientos

Como podemos ver se han incluido cuatro botones de desplazamiento, representados con flechas (Arriba, Abajo, Izquierda, Derecha).

Estos botones de desplazamiento se han enlazado a los eventos del teclado para poder mover la ventana de forma cómoda, rápida y fluida.

• Desplazamiento:
  • (i ↑): Desplazamiento hacia arriba
  • (k ↓): Desplazamiento hacia abajo
  • (j ←): Desplazamiento hacia la izquierda
  • (l →): Desplazamiento hacia la derecha

Además, se ha añadido un icono de selección (mano) este indica cuando hemos seleccionado la tabla y vamos a desplazarnos dentro de ella, ya que las teclas de dirección del teclado se usan para moverse en el navegador.

De esta forma hemos indicado cuando bloqueamos el desplazamiento del navegador frente al de la tabla, para que no se produzca un efecto parallax.

Desarrollo

Para la representación de la ejecución las tablas se reciben los datos, indicando la fila y columna que van a representar, de esta forma es más sencillo la representación en formatos JSON.

{
  "pipeline": {


    "arrows": [
      {
        "fromAddressRow": 4,
        "fromStep": 6,
        "toAddressRow": 5,
        "toStep": 7,
        "color": "0x00FF00"
      },
      {
        "fromAddressRow": 5,
        "fromStep": 6,
        "toAddressRow": 6,
        "toStep": 7,
        "color": "0xFF0000"
      }
    ]
  }
}