مع التطور السريع للاقتصاد المحلي، أصبح لدى الناس متطلبات أعلى وأعلى للسلامة. من أجل منع حدوث المواقف التالية، عليك التفكير في تركيب نظام أمني: تقديم الأدلة والقرائن: في العديد من المصانع أو البنوك أو السرقات أو الحوادث، يمكن للوكالات ذات الصلة اكتشاف الحالة بناءً على معلومات الفيديو، وهو أمر مهم للغاية فكرة. هناك أيضًا بعض النزاعات أو الحوادث، ويمكن بسهولة العثور على مسؤوليات الموظفين المعنيين من خلال تسجيل الفيديو. ارتفاع تكلفة الدفاع الجوي المدني: في الوقت الحاضر، عندما تفكر العديد من الأماكن في الأمن، فإنهم يفكرون في تعيين حراس أمن. يتكلف كل حارس أمن 800 شهريًا ويعمل ثلاث نوبات يوميًا، وتتطلب نوبة واحدة من الموظفين ما يقرب من 40 ألف يوان سنويًا تكلفة معدات الأمن الإلكترونية ليست رخيصة، وهناك حاجة أقل لاستبدال معدات الأمن الإلكترونية في غضون بضع سنوات. ولذلك فإن تكلفة الدفاع الجوي المدني مرتفعة نسبيا. مساعدة الدفاع الجوي المدني: في معظم الحالات، من الصعب جدًا الاعتماد بشكل كامل على الأشخاص لضمان السلامة. تتطلب العديد من الأشياء مساعدة المعدات الأمنية الإلكترونية (مثل أجهزة المراقبة وأجهزة الإنذار) لتكون أكثر كمالا. ويجب استخدامه في المناسبات الخاصة: في ظل بعض الظروف القاسية (الحرارة العالية، البرودة، المغلقة، وغيرها)، يصعب على الأشخاص الملاحظة بوضوح بالعين المجردة، أو ببساطة أن البيئة غير مناسبة لبقاء الأشخاص، لذلك ويجب استخدام معدات الأمن الإلكترونية. الإخفاء: باستخدام الأجهزة الأمنية الإلكترونية، لن يشعر الأشخاص العاديون أنهم مراقبون طوال الوقت، ويتم إخفاء ذلك. ضمان أمني على مدار 24 ساعة: لتحقيق متطلبات الأمان دون انقطاع على مدار 24 ساعة، يجب مراعاة المعدات الإلكترونية. المراقبة عن بعد: مع تطور تكنولوجيا الكمبيوتر وتكنولوجيا الشبكات، أصبحت المراقبة عن بعد وعرض الصور من أماكن مختلفة ممكنة الآن ويمكن للعديد من قادة الشركات مشاهدة حالة أي فرع حول العالم في الوقت الفعلي عبر الإنترنت، وهو ما يساعد على ذلك فهم الوضع في الوقت المناسب. الحفاظ على الصور: إن تطور تقنية الفيديو الرقمي يسمح بحفظ الصور من خلال أجهزة التخزين الرقمية الحاسوبية، مما يسمح بحفظها لفترات زمنية أطول وبصور أكثر وضوحا. إدارة الإنتاج: يمكن للمديرين فهم الوضع على الخط الأمامي للإنتاج في الوقت المناسب وبطريقة بديهية، مما يسهل القيادة والإدارة.
نظرًا للطلب الكبير على أنظمة المراقبة في الصين، سنقدم لكم اليوم كيفية إنشاء الجزء الأمامي من نظام المراقبة.
http://www.hightopo.com/demo/metro/demo2.html أدخل الصفحة وانقر بزر الماوس الأيمن فوق عنصر الفحص لعرض نموذج التعليمات البرمجية المصدر.
التأثير الديناميكي لهذا المثال هو كما يلي:
لنقم ببناء المشهد الأساسي أولاً في HT، إحدى الطرق الشائعة جدًا لاستيراد المشاهد الخارجية إلى الداخل هي تحليل ملفات JSON. إحدى فوائد استخدام ملفات JSON لإنشاء المشاهد هي أنه يمكن إعادة تدويرها باستخدام جسون. بعد ذلك، سيستخدم HT الدالة ht.Default.xhrLoad لتحميل مشهد JSON، ويستخدم DataModel.deserialize(json) المغلف بـ HT لإلغاء تسلسله، وإضافة الكائن الذي تم إلغاء تسلسله إلى DataModel:
ht.Default.xhrLoad('demo2.json', function(text) { var json = ht.Default.parse(text); if(json.title) document.title = json.title;// تغيير عنوان ملف JSON يتم تعيينه إلى عنوان المتغير العالمي dataModel.deserialize(json);//Deserialize graphView.fitContent(true);// تكبير طوبولوجيا الترجمة لعرض جميع العناصر الرسومية، أي السماح بعرض جميع العناصر});في HT، عند إنشاء كائن نوع البيانات، سيتم تعيين سمة معرف له تلقائيًا داخليًا، والتي يمكن الحصول عليها وتعيينها من خلال data.getId() وdata.setId(id). لا يُسمح بتعديل قيمة المعرف بعد إضافة كائن البيانات إلى DataModel، يمكنك استخدام dataModel.getDataById(id) للعثور على كائنات البيانات بسرعة. يوصى عمومًا بتعيين سمة المعرف تلقائيًا بواسطة HT. يمكن تخزين المعرف الفريد لأهمية أعمال المستخدم في سمة العلامة. تسمح وظيفة Data#setTag(tag) بأي تغيير ديناميكي لقيمة العلامة يمكن العثور على الكائن من خلال DataModel#getDataByTag(tag)، ويدعم حذف كائنات البيانات من خلال DataModel#removeDataByTag(tag). نقوم هنا بتعيين سمة العلامة لكائن البيانات في JSON، والحصول على كائن البيانات من خلال وظيفة dataModel.getDataByTag(tag) في الكود:
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 YellowAlarm = dataModel.getDataByTag('yellowAlarm');لقد قمت بعمل العناصر المقابلة لكل تسمية في الصورة أدناه:
ثم نقوم بتعيين الكائنات التي تحتاج إلى تدوير ووميض. يقوم HT بتغليف وظيفة setRotation (الدوران) للدوران، ومن خلال الحصول على زاوية الدوران الحالية للكائن، نضيف راديان معينًا بناءً على هذه الزاوية ونسميها بانتظام من خلال setInterval. حتى تتمكن من تدوير نفس القوس خلال فترة زمنية معينة:
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); fan2.setRotation(fan2.getRotation() + deltaRotation*3); Camera1.setRotation(camera1.getRotation() + deltaRotation/3); إذا (الوقت - ستيرتايم> 500) { ستيريندكس--؛ (straIndex < 0) { tierIndex = 8 } ستيرتايم = time } for (var i = 0; i < 8; i++) {// نظرًا لوجود بعض العناصر المتشابهة، فإن أسماء العلامات التي قمنا بتعيينها متشابهة، لكنها متشابهة تم استبدالها بـ 1، 2، 3، لذلك نستخدم حلقة for للحصول على var color = ستيرIndex === i '#F6A623' : '#CFCFCF'; dataModel.getDataByTag('ستير_1_' + i).s('shape.border.color', color); dataModel.getDataByTag('ستير_2_' + i).s('shape.border.color', color); (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' }}, 5 );يقوم HT أيضًا بتغليف وظيفة setStyle لتعيين النمط، والذي يمكن اختصاره بـ s. للحصول على أنماط محددة، يرجى الرجوع إلى دليل HT لأنماط الويب:
for (var i = 0; i < 8; i++) {// نظرًا لوجود بعض العناصر المتشابهة، فإن أسماء العلامات التي قمنا بتعيينها متشابهة، ولكن تم تغييرها إلى 1 و2 و3 لاحقًا، لذلك نستخدم حلقة for للحصول على var color = ستيرIndex === i ? '#F6A623' : '#CFCFCF'; dataModel.getDataByTag('ستير_2_' + i).s('shape.border.color', color);}نقوم أيضًا بإجراء التحكم في التوقيت على وميض ضوء التحذير إذا كان عددًا زوجيًا من الثواني، فسيتم ضبط لون خلفية الضوء على عديم اللون ، تم ضبطه على اللون الأحمر:
if (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');}تم حل المثال بأكمله بسهولة، بسهولة. . .
تلخيصما ورد أعلاه هو شرح تفصيلي لمثال مراقبة مركز التسوق استنادًا إلى HTML5 Canvas الذي قدمه المحرر، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب . أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!