Com o rápido desenvolvimento da economia doméstica, as pessoas têm requisitos cada vez mais elevados de segurança. Para evitar que as seguintes situações aconteçam, é necessário considerar a instalação de um sistema de segurança: Fornecer evidências e pistas: Em muitas fábricas, bancos, roubos ou acidentes, as agências competentes podem detectar o caso com base em informações de vídeo, o que é muito importante dica. Existem também algumas disputas ou acidentes, e as responsabilidades do pessoal relevante podem ser facilmente encontradas através de gravação de vídeo. Alto custo da defesa aérea civil: Hoje em dia, quando muitos lugares pensam em segurança, pensam em contratar seguranças. Cada segurança custa 800 por mês e trabalha três turnos por dia. Um turno de pessoal requer quase 40.000 yuans por ano. o custo dos equipamentos de segurança eletrônica não é barato e há menos necessidade de substituir os equipamentos de segurança eletrônica dentro de alguns anos. Portanto, o custo da defesa aérea civil é relativamente elevado. Assistência de defesa aérea civil: Na maioria dos casos, é muito difícil confiar inteiramente nas pessoas para garantir a segurança. Muitas coisas requerem a assistência de equipamentos eletrônicos de segurança (como monitores e alarmes) para serem mais perfeitas. Deve ser usado em ocasiões especiais: sob algumas condições adversas (calor alto, frio, fechado, etc.), é difícil para as pessoas observarem claramente a olho nu, ou o ambiente simplesmente não é adequado para as pessoas ficarem, então devem ser utilizados equipamentos eletrônicos de segurança. Ocultação: Utilizando equipamentos eletrônicos de segurança, o cidadão comum não sentirá que está sendo monitorado o tempo todo, e isso fica oculto. Garantia de segurança 24 horas: Para atingir os requisitos de segurança ininterruptos 24 horas por dia, os equipamentos eletrônicos devem ser considerados. Monitoramento remoto: Com o desenvolvimento da tecnologia de informática e da tecnologia de rede, o monitoramento remoto e a visualização de imagens de diversos locais tornaram-se possíveis. Agora muitos líderes de empresas podem acompanhar a situação de qualquer filial ao redor do mundo em tempo real via INTERNET, o que é propício para. compreender a situação em tempo hábil. Preservação de imagens: O desenvolvimento da tecnologia de vídeo digital permite que as imagens sejam salvas através de dispositivos de armazenamento digital de computador, permitindo que sejam salvas por longos períodos de tempo e com imagens mais nítidas. Gestão da produção: Os gestores podem compreender a situação na linha de frente da produção de forma oportuna e intuitiva, o que facilita o comando e a gestão.
Tendo em vista a grande demanda por sistemas de monitoramento na China, hoje apresentaremos como criar a parte front-end de um sistema de monitoramento.
http://www.hightopo.com/demo/metro/demo2.html Entre na página e clique com o botão direito no elemento inspecionar para visualizar o código-fonte de exemplo.
O efeito dinâmico deste exemplo é o seguinte:
Vamos construir a cena básica primeiro. No HT, uma maneira muito comum de importar cenas externas para o interior é analisar arquivos JSON. Um dos benefícios de usar arquivos JSON para construir cenas é que eles podem ser reciclados. usando JSON. Em seguida, o HT usará a função ht.Default.xhrLoad para carregar a cena JSON e usará o DataModel.deserialize(json) encapsulado em HT para desserializá-lo e adicionará o objeto desserializado ao DataModel:
ht.Default.xhrLoad('demo2.json', function(text) { var json = ht.Default.parse(text); if(json.title) document.title = json.title;//Alterar o título do arquivo JSON é atribuído à variável global título dataModel.deserialize(json);//Desserialize graphView.fitContent(true);//Amplie a topologia de tradução para exibir todos os elementos gráficos, ou seja, deixe todos os elementos serem exibidos});No HT, quando o objeto do tipo Dados é construído, será automaticamente atribuído a ele um atributo id internamente, que pode ser obtido e definido por meio de data.getId() e data.setId(id). depois que o objeto Data é adicionado ao DataModel, você pode usar dataModel.getDataById(id) para localizar objetos Data rapidamente. Geralmente é recomendado que o atributo id seja atribuído automaticamente pelo HT. O identificador exclusivo da importância comercial do usuário pode ser armazenado no atributo tag. A função Data#setTag(tag) permite qualquer alteração dinâmica do valor da tag. O objeto pode ser encontrado por meio de DataModel#getDataByTag(tag) e oferece suporte à exclusão de objetos de dados por meio de DataModel#removeDataByTag(tag). Aqui definimos o atributo tag do objeto Data em JSON e obtemos o objeto Data por meio da função dataModel.getDataByTag(tag) no código:
var fan1 = dataModel.getDataByTag('fan1');var fan2 = dataModel.getDataByTag('fan2');var camera1 = dataModel.getDataByTag('camera1');var camera2 = dataModel.getDataByTag('camera2');var camera3 = dataModel.getDataByTag('camera3');var redAlarm = dataModel.getDataByTag('redAlarm');var amareloAlarm = dataModel.getDataByTag('yellowAlarm');Fiz os elementos correspondentes a cada etiqueta na imagem abaixo:
Em seguida, definimos os objetos que precisam ser girados e o HT encapsula a função setRotation (rotation) para rotação. Ao obter o ângulo de rotação atual do objeto, adicionamos um determinado radiano com base neste ângulo e o chamamos regularmente por meio de setInterval. então Você pode girar o mesmo arco dentro de um determinado intervalo de tempo:
setInterval(function(){ var time = new Date().getTime(); var deltaTime = time - lastTime; var deltaRotation = deltaTime * Math.PI / 180 * 0.1; lastTime = time; fan1.setRotation(fan1.getRotation( ) + deltaRotation*3); deltaRotation*3); camera1.setRotation(camera1.getRotation() + deltaRotation/3); camera2.setRotation(camera2.getRotation() + deltaRotation/3); if (tempo - stairTime > 500) { stairIndex--; (stairIndex < 0) { stairIndex = 8; } stairTime = time } for (var i = 0; i < 8; i++) {//Como existem alguns elementos semelhantes, os nomes das tags que definimos são semelhantes, mas são. substituído por 1, 2, 3, então usamos o loop for para obter var color = stairIndex === i ?#F6A623' : '#CFCFCF'; dataModel.getDataByTag('escada_1_' + i).s('shape.border.color', color); dataModel.getDataByTag('escada_2_' + i).s('shape.border.color', cor } se); (new Date().getSeconds() % 2 === 1) { yellowAlarm.s('shape.background', null); redAlarm.s('shape.background', null } else { yellowAlarm.s('shape.background', 'yellow'); redAlarm.s('shape.background', 'red' }}); );HT também encapsula a função setStyle para definir o estilo, que pode ser abreviado como s. Para estilos específicos, consulte o manual de estilo HT para Web:
for (var i = 0; i < 8; i++) {//Como existem alguns elementos semelhantes, os nomes das tags que definimos são semelhantes, mas são alterados para 1, 2 e 3 posteriormente, então usamos o loop for para obter o var color = stairIndex === i ?#F6A623' : '#CFCFCF'; dataModel.getDataByTag('escada_2_' + i).s('forma.border.color', cor);}Também realizamos o controle de tempo no piscar da luz de advertência. Se for um número par de segundos, a cor de fundo da luz será definida como incolor. Caso contrário, se for amarelo, será definido como amarelo. , está definido como vermelho:
if (new Date().getSeconds() % 2 === 1) { amareloAlarm.s('shape.background', null); redAlarm.s('shape.background', null);}else { amareloAlarm.s ('forma.fundo', 'amarelo'); redAlarm.s('forma.fundo', 'vermelho');}Todo o exemplo foi resolvido com muita facilidade. . .
ResumirA descrição acima é uma explicação detalhada do exemplo de monitoramento de shopping center baseado no HTML5 Canvas apresentado pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. . Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!