Con el rápido desarrollo de la economía nacional, las personas tienen cada vez mayores requisitos de seguridad. Para evitar que ocurran las siguientes situaciones, debe considerar instalar un sistema de seguridad: Proporcionar pruebas y pistas: en muchas fábricas, bancos, robos o accidentes, las agencias pertinentes pueden detectar el caso basándose en información de vídeo, lo cual es muy importante. clave. También hay algunas disputas o accidentes, y las responsabilidades del personal relevante se pueden encontrar fácilmente mediante la grabación de video. Alto costo de la defensa aérea civil: hoy en día, cuando muchos lugares piensan en seguridad, piensan en contratar guardias de seguridad que cuestan 800 por mes y trabajan tres turnos al día. Un turno de personal requiere casi 40.000 yuanes al año. El costo de los equipos de seguridad electrónicos no es barato y hay menos necesidad de reemplazar los equipos de seguridad electrónicos en unos pocos años. Por tanto, el coste de la defensa aérea civil es relativamente alto. Asistencia de defensa aérea civil: en la mayoría de los casos, es muy difícil depender exclusivamente de las personas para garantizar la seguridad. Muchas cosas requieren que la asistencia de equipos de seguridad electrónicos (como monitores y alarmas) sea más perfecta. Debe usarse en ocasiones especiales: en algunas condiciones duras (mucho calor, frío, cerrado, etc.), es difícil para las personas observar claramente a simple vista, o el ambiente simplemente no es adecuado para que las personas se queden, por lo que Se deben utilizar equipos de seguridad electrónicos. Ocultamiento: al utilizar equipos de seguridad electrónicos, la gente común no sentirá que están siendo monitoreados todo el tiempo y está oculto. Garantía de seguridad las 24 horas: Para alcanzar los requisitos de seguridad ininterrumpida las 24 horas se deben considerar los equipos electrónicos. Monitoreo remoto: con el desarrollo de la tecnología informática y la tecnología de redes, el monitoreo remoto y la visualización de imágenes desde diferentes lugares se ha hecho posible. Ahora muchos líderes de empresas pueden observar la situación de cualquier sucursal en todo el mundo en tiempo real a través de INTERNET, lo que resulta propicio. comprender la situación de manera oportuna. Preservación de imágenes: El desarrollo de la tecnología de vídeo digital permite guardar imágenes a través de dispositivos informáticos de almacenamiento digital, lo que permite guardarlas durante períodos de tiempo más largos y con imágenes más claras. Gestión de la producción: los gerentes pueden comprender la situación en la primera línea de producción de manera oportuna e intuitiva, lo que facilita el mando y la gestión.
En vista de la gran demanda de sistemas de monitoreo en China, hoy le presentaremos cómo crear la parte frontal de un sistema de monitoreo.
http://www.hightopo.com/demo/metro/demo2.html Ingrese a la página y haga clic derecho en el elemento de inspección para ver el código fuente de ejemplo.
El efecto dinámico de este ejemplo es el siguiente:
Primero construyamos la escena básica. En HT, una forma muy común de importar escenas externas al interior es analizar archivos JSON. Uno de los beneficios de usar archivos JSON para crear escenas es que nuestra escena actual se puede reciclar. utilizando JSON. A continuación, HT usará la función ht.Default.xhrLoad para cargar la escena JSON y usará DataModel.deserialize(json) encapsulado en HT para deserializarlo y agregar el objeto deserializado al DataModel:
ht.Default.xhrLoad('demo2.json', function(text) { var json = ht.Default.parse(text); if(json.title) document.title = json.title;//Cambiar el título del archivo JSON se asigna a la variable global título dataModel.deserialize(json);//Deserializar graphView.fitContent(true);//Ampliar la topología de traducción para mostrar todos los elementos gráficos, es decir, dejar que se muestren todos los elementos});En HT, cuando se construye el objeto de tipo de datos, se le asignará automáticamente un atributo de identificación internamente, que se puede obtener y configurar a través de data.getId() y data.setId(id). No se permite modificar el valor de identificación. después de agregar el objeto de datos al modelo de datos, puede usar dataModel.getDataById(id) para encontrar objetos de datos rápidamente. En general, se recomienda que HT asigne automáticamente el identificador único de la importancia comercial del usuario en el atributo de etiqueta. La función Data#setTag (etiqueta) permite cualquier cambio dinámico del valor de la etiqueta. El objeto se puede encontrar a través de DataModel#getDataByTag(tag) y admite la eliminación de objetos de datos a través de DataModel#removeDataByTag(tag). Aquí configuramos el atributo de etiqueta del objeto de datos en JSON y obtenemos el objeto de datos a través de la función dataModel.getDataByTag (etiqueta) en el 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 amarilloAlarm = dataModel.getDataByTag('amarilloAlarm');Hice los elementos correspondientes a cada etiqueta en la siguiente imagen:
Luego configuramos los objetos que deben rotarse y flashearse. HT encapsula la función setRotation (rotación) para la rotación. Al obtener el ángulo de rotación actual del objeto, agregamos un cierto radian en función de este ángulo y lo llamamos regularmente a través de setInterval. Entonces puedes rotar el mismo arco dentro de un cierto intervalo de tiempo:
setInterval(function(){ var tiempo = new Date().getTime(); var deltaTime = tiempo - lastTime; var deltaRotation = deltaTime * Math.PI / 180 * 0.1; lastTime = tiempo; fan1.setRotation(fan1.getRotation( ) + deltaRotación*3); fan2.setRotación(fan2.getRotación() + deltaRotation*3); cámara1.setRotation(camera1.getRotation() + deltaRotation/3); cámara2.setRotation(camera2.getRotation() + deltaRotation/3); if (tiempo - escaleraTime > 500) { escaleraIndex--; (stairIndex < 0) { stairIndex = 8; } stairTime = time } for (var i = 0; i < 8; i++) {// Debido a que hay algunos elementos similares, los nombres de etiquetas que configuramos son similares, pero son reemplazado con 1, 2, 3, entonces usamos el bucle for para obtener var color = stairIndex === i ? '#F6A623' : '#CFCFCF'; dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color); dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', color); (nueva Fecha().getSeconds() % 2 === 1) { yellowAlarm.s('forma.fondo', nulo); redAlarm.s('forma.fondo', nulo); } else { yellowAlarm.s('forma.fondo', 'amarillo'); redAlarm.s('forma.fondo', 'rojo'}); );HT también encapsula la función setStyle para establecer el estilo, que puede abreviarse como s. Para estilos específicos, consulte el manual de estilo de HT para Web:
for (var i = 0; i < 8; i++) {// Debido a que hay algunos elementos similares, los nombres de etiquetas que configuramos son similares, pero se cambian a 1, 2 y 3 más adelante, por lo que usamos el bucle for. para obtener el color var = stairIndex === i ? '#F6A623' : '#CFCFCF'; dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color); dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', color);}También realizamos control de tiempo en el parpadeo de la luz de advertencia. Si es un número par de segundos, el color de fondo de la luz se establece en incoloro. De lo contrario, si es Alarma amarilla, se establece en Alarma roja. , se pone en rojo:
if (nueva Fecha().getSeconds() % 2 === 1) { alarmaamarilla.s('forma.fondo', nulo); redAlarm.s('forma.fondo', nulo);}else {alarmaamarilla.s ('forma.fondo', 'amarillo'); redAlarm.s('forma.fondo', 'rojo');}Todo el ejemplo se resolvió muy fácilmente. . .
ResumirLo anterior es una explicación detallada del ejemplo de monitoreo de centros comerciales basado en HTML5 Canvas presentado por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. . ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!