إضافة زر تحويل النص إلى كلام للتطبيق - كتاب هندسة البرمجيات - الصف 12 - الفصل 1 - المملكة العربية السعودية

إضافة زر تحويل النص إلى كلام للتطبيق Adding a Text-To-Speech Button to the Application ستُضيف الآن زرًا يقوم بتنشيط مكوّن TextToSpeech (تحويل النص إلى كلام) الذي يستخدم نظام صوت جهاز الهاتف المحمول لقراءة نص محدد بصوت عال. لإضافة زر تحويل النص إلى كلام ١. من مجموعة (واجهة المستخدم) User Interface ، أضف مكوّن Button (زر) إلى Screen1 (شاشة 1) ، وأعد تسميته إلى text_to_speech_button (زر_تحويل_النص_إلى_الكلام). ٢. من مكوّن text_to_speech_button (زر_تحويل_النص_إلى_الكلام) ، اضبط خاصية BackgroundColor (لون الخلفية) إلى None (بدون) ، ثم امسح خاصية Text (النص) ، واضبط خاصية Image (الصورة) إلى أيقونة مكبر صوت. شكل 4.10: إضافة زر تحويل النص إلى كلام وزارة التعليم Ministry of Education 2025 - 1447 210 --- VISUAL CONTEXT --- **DIAGRAM**: شكل 4.10: إضافة زر تحويل النص إلى كلام Description: A screenshot of the MIT App Inventor development environment, illustrating the process of adding a Text-to-Speech button. The interface is divided into several panels: 1. **Palette (leftmost panel):** Lists various user interface components. The 'Button' component is highlighted with a blue circle containing the number '1', indicating it should be selected and dragged. 2. **Viewer (center panel):** Displays a phone emulator showing the current state of the application's user interface. The app is titled 'Visit_SA_App' and shows 'Discover Saudi Arabia' and 'Al Masmak' with an image of a building. At the bottom, there are three icons: a plus sign, a speaker icon (which will be the Text-to-Speech button), and a book icon. The speaker icon is highlighted with a blue circle containing the number '5'. 3. **Components (top-right panel):** Shows a hierarchical list of components currently in the application. The 'text_to_speech_button' is selected and highlighted with a blue circle containing the number '2'. Other components visible include 'AlMasmak', 'VerticalArrangement1', 'title_label', 'description_label', 'HorizontalArrangement', 'zoomin_button', 'zoomout_button', and 'map_button'. 4. **Properties (bottom-right panel):** Displays the properties of the currently selected component, 'text_to_speech_button'. Key properties shown include 'BackgroundColor' (set to None, highlighted with a blue circle containing the number '3'), 'Enabled' (checked), 'FontSize' (14.0), 'Image' (speaker_icon.png, highlighted with a blue circle containing the number '5'), and 'Text' (empty, highlighted with a blue circle containing the number '4'). The overall diagram shows the visual steps and corresponding property adjustments required to implement the Text-to-Speech functionality. Key Values: Palette components: Button, CheckBox, DatePicker, Image, Label, ListPicker, ListView, Notifier, PasswordTextBox, Slider, Spinner, Switch, TextBox, TimePicker, WebView, Viewer app name: Visit_SA_App, Viewer screen content: Discover Saudi Arabia, Al Masmak, Text for Label1, +, speaker icon, book icon, Components list: AlMasmak, VerticalArrangement1, title_label, description_label, HorizontalArrangement, zoomin_button, zoomout_button, text_to_speech_button, map_button, Map1, Properties for text_to_speech_button: BackgroundColor: None, Enabled: true, FontBold: false, FontItalic: false, FontSize: 14.0, FontTypeface: default, Height: Automatic, Width: Automatic, Image: speaker_icon.png, Shape: default, ShowFeedback: true, Text: (empty), TextAlignment: center: 1, TextColor: Default, Visible: true, Media files: Jeddah.png, Riyadh.png, al_masmak.jpg, al_masma_sized.jpg, color_icon.png, jeddah_nav-img.png, ksa_vision_logo.jpg, map_icon.png, riyadh_nav-img.png, speaker_icon.png, welcome-screen.png Context: This diagram visually guides the user through the steps of adding a Text-to-Speech button in MIT App Inventor, demonstrating where to find components, how to rename them, and how to adjust their properties as described in the accompanying text instructions.