taboca / mural-web-fisl-15

Mural Web HD FISL
0 stars 1 forks source link

Identify next show events, for Carrossel #16

Open taboca opened 10 years ago

taboca commented 10 years ago

General overview pt-BR

A questão de achar quais elementos rotacionar é, realmente, o mais crítico - e acredio, infelizmente o mais difícil. Neste código, https://github.com/taboca/mural-web-fisl-15/blob/master/static/grade2/app.js#L246, mesmo sendo um pouco bagunçado ala Taboca, é o código que faz o tal "corte", ou seja, dado uma tabela, na forma de string, que representa células em 2d, ele corta no ponto da "hora do momento" se o dia for o dia de hoje.

Então tem-se:

xABCD 0 1 2 3

Esta acima seria a tal tabela em 2D.

E vale lembrar, que eu sigo, ainda, a linha do GridType, ou seja, daquele esquema que eu fiz onde eu posso converter essas "strings em 2D" em table-less DIV. Daí, falar nisso é importante porque o ponto caso abaixo é muito relevante.

xABCD 0Pxxx 1Pxxx 2xxxZ 3xxxZ

Veja, acima, que eu coloquei uma palestra P e outra Z. Porque essas tem 2 caracteres? porque em 2D, trata-se da indicação que elas cruzam essas "barreiras de horários", no caso, eles: 0,1,2,3.

Esses são os que chamo de cortes. Mas, obviamente por P, por exemplo, existir em hora 0 e hora 1, P é um único elemento, ele não possui corte no HTML final, nos DIV. Ele tem corte acima, na forma table-2d-string, porque isso é muito relevante para saber refazer a tabela caso seja necessário, por exemplo, cortar no nível hora = 0. Vejamos:

xABCD 0Pxxx <- corte 1Pxxx 2xxxZ 3xxxZ

Cortada:

xABCD 1Pxxx 2xxxZ 3xxxZ

Veja que, ao simplesmente retirar uma sub-string acima, na hora/linha 0, eu tenho ainda uma informação que é verdadeira, pois existe a presença do P na hora 1. E daí eu mando para o gerador de divs que faz o grid.

Essa função https://github.com/taboca/mural-web-fisl-15/blob/master/static/grade2/app.js#L246 faz esse corte. O tal do this.rawBuffer é a entrada global dessa função. O rawBuffer seria algo como:

xABCD0Pxxx1Pxxx2xxxZ3xxxZ

O importante é que neste ponto de corte, ou seja, na hora que cortar = true, ou seja, no código https://github.com/taboca/mural-web-fisl-15/blob/master/static/grade2/app.js#L288 é o momento que ele coloca uma flag, nos elementos que estão na tal linha de corte. Daí é possível saber qual é a próxima linha de corte que ainda não chegou. As "linhas de cortes" são simplesmente a agregação de todas as horas, de todos os eventos. Ou seja, se eu tenho 1000 eventos onde alguns começam as 9 e terminam as 9:15 e outros começam as 10, e terminam as 11, a minha lista de "linha de corte" seria 9, 9:15, 10, 11.

Ou seja, com essa "redução", existem várias maneiras de identificar os próximos. Uma dela é , por exemplo, ver todos os elemtos eventos que iniciam depois da linha de corte do momento, ou seja, depois da faixa que estamos. Digamos que estamos em 9:14, nós sabemos que de 9:15-10, nnao tem nada, ou seja, none, e que de 10-11 tem eventos, ou seja, os da próxima linha de corte são 10-11, ou seja, este é o array de elementos.

Uma coisa que vale avisar, do meu source, é que o tal array de strings está em unicode :) em caracteres Chineses ou algo do tipo. Isso é porque eu precisei de mais de 250. E com tal "caracter" eu posso achar o item do evento com a função:

charToElement[electChar]

Ela que me traduz o caracter "ASC" para o evento JSON/object que tem as informações.