Training:Videos: Difference between revisions

Videos

Revision as of 22:21, 18 January 2024

Training

EXPLORE MDriven through Video

INTRODUCING THE MDRIVEN VIDEO EXPERIENCE
Watch videos tailored to simplify everything you need to know about MDriven.

Check out the official MDriven YouTube here: www.youtube.com/@MDrivenOfficial

Continue watching

<!DOCTYPE html>

MDriven designer installation Interface Overview :

@@ Line 74: / Line 74: @@
 </html>
 {{#widget:Videos}}
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+       .video {
+            display: flex;
+            flex-direction: row-reverse; /* Navigation on the right */
+            max-width: 100%;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            margin: 20px;
+        }
+.video__wrapper {
+            flex-grow: 1; /* Video takes remaining space */
+            position: relative;
+            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
+            height: 0;
+        }
+.video__wrapper iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: 8px;
+        }
+.video__navigation {
+            flex-basis: 300px; /* Width of the navigation panel */
+            padding: 10px;
+            background: #f7f7f7;
+            font-family: Arial, sans-serif;
+            line-height: 1.5;
+            font-size: 14px;
+            overflow-y: auto;
+            border-left: 1px solid #ccc;
+            list-style: none;
+            padding-left: 0;
+        }
+.navigation-item {
+            cursor: pointer;
+            color: #0066cc;
+            padding: 8px;
+            border-radius: 4px;
+            transition: background-color 0.3s, color 0.3s;
+            display: block;
+        }
+.navigation-item:hover {
+            background-color: #e6f0ff;
+            color: #004499;
+        }
+@media (max-width: 768px) {
+            .video {
+                flex-direction: column;
+            }
+.video__wrapper {
+                padding-bottom: 56.25%;
+            }
+.video__navigation {
+                flex-basis: auto;
+                border-left: none;
+                border-top: 1px solid #ccc;
+                padding-top: 15px;
+                order: 2; /* Navigation moves below the video */
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="video">
+        <div class="video__wrapper">
+            <iframe id="videoFrame" src="https://www.youtube.com/embed/RxBhb0K6ibo?rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe>
+        </div>
+        <div class="video__navigation">
+            <span data-video="RxBhb0K6ibo" data-start="35" tabindex="0"> <strong> MDriven designer installation</strong> </span>
+<strong> Interface Overview :</strong>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="148" tabindex="0"> Setting New Diagram </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="290" tabindex="0"> Add a category </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="396" tabindex="0"> Add a class </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="613" tabindex="0"> Processes </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="767" tabindex="0"> StateMachine diagram</span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="996" tabindex="0">TagExtensions </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1173" tabindex="0">Attributes</span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1260" tabindex="0"> Association</span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1359" tabindex="0"> FeaturePickForm </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1448" tabindex="0">Setting the color </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1534" tabindex="0">What to show on the diagram? </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1612" tabindex="0"> Delete/Hide from view </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1890" tabindex="0"> Filtering the repository tree</span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1982" tabindex="0"> Reintroduce/Introduce associations </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="2073" tabindex="0"> Anchor points and square line option </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="2200" tabindex="0"> Additional options: DimDefaults </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="2321" tabindex="0"> “modlr” file and "ecomdl" file </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="2501" tabindex="0"> Association tool </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="2697" tabindex="0"> PluralSuffix property </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="2936" tabindex="0"> Generalization/specialization mode</span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3203" tabindex="0"> Reference window  </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3300" tabindex="0"> Index model and report errors </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3340" tabindex="0"> Default String Representation  </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3486" tabindex="0"> <strong> “Enterprise Architect Information" window : </strong> </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="613" tabindex="0"> Processes </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3498" tabindex="0"> More on processes </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3508" tabindex="0"> Information </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3580" tabindex="0"> Actors </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3684" tabindex="0"> Applications </span>
+    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3714" tabindex="0"> Infrastructure </span>
+        </div>
+    </div>
+<script>
+        document.querySelectorAll('.navigation-item').forEach(item => {
+            item.addEventListener('click', function() {
+                var videoSrc = 'https://www.youtube.com/embed/' + this.getAttribute('data-video') + '?start=' + this.getAttribute('data-start') + '&autoplay=1';
+                document.getElementById('videoFrame').src = videoSrc;
+            });
+        });
+    </script>
+</body>
+</html>