Index: sources/gui/qml/pages/pretreatment/sample/PreTreatmentWaterSample.qml
===================================================================
diff -u -r6112c3191d418571246b5b6da11502b2e723ef2e -r526137b088b43e51868cb241ce70b3cf52febae8
--- sources/gui/qml/pages/pretreatment/sample/PreTreatmentWaterSample.qml	(.../PreTreatmentWaterSample.qml)	(revision 6112c3191d418571246b5b6da11502b2e723ef2e)
+++ sources/gui/qml/pages/pretreatment/sample/PreTreatmentWaterSample.qml	(.../PreTreatmentWaterSample.qml)	(revision 526137b088b43e51868cb241ce70b3cf52febae8)
@@ -15,11 +15,12 @@
 
 // Qt
 import QtQuick          2.12
-import QtQuick.Controls 2.12 // swipeview
+
 // Project
 //  Qml imports
 import "qrc:/globals"
 import "qrc:/components"
+import "qrc:/compounds"
 import "qrc:/pages/pretreatment"
 
 /*!
@@ -31,134 +32,21 @@
     signal samplePressed ()
     signal sampleReleased()
 
-    Rectangle { id: _component
+    InstructionView {
+        stepNames: [
+            ". Unlock pump track   . Lock pump track",
+            "Insert cartridge using alignment pins",
+            "HD machine door open / HD machine door closed",
+        ]
+        stepImages: [
+            "file:/home/denali/Projects/application/resources/NotAttachedTestImages/1.png",
+            "file:/home/denali/Projects/application/resources/NotAttachedTestImages/2.png",
+            "file:/home/denali/Projects/application/resources/NotAttachedTestImages/3.png",
+        ]
         anchors.top: title.bottom
         anchors.bottom: _buttonRow.top
         // anchors.bottom: parent.bottom
         // anchors.bottomMargin: Variables.notificationHeight + 15
-
-        // ----
-
-        readonly property int frameGap      : 47
-        readonly property int chevronWidth  : 25
-        readonly property int chevronHeight : 35
-        readonly property int outerRadius   : 10
-        readonly property int outerHMargin  : 30
-        readonly property int outerVMargin  : 15
-        readonly property int innerRadius   :  5
-        readonly property int imageMargin   : ( _component.frameGap - _component.chevronWidth ) / 2
-
-        property var stepNames: ["A", "B", "C"]
-
-        signal leftClicked ()
-        signal rightClicked()
-
-        color           : Colors.transparent
-        border.color    : Colors.borderButton
-        radius          : _component.outerRadius
-        anchors {
-            left            : parent.left
-            right           : parent.right
-            leftMargin      : _component.outerHMargin
-            rightMargin     : _component.outerHMargin
-            topMargin       : _component.outerVMargin
-            bottomMargin    : _component.outerVMargin
-        }
-        Text { id: _message
-            color: Colors.textMain
-            text: _component.stepNames[_swipeview.currentIndex]
-            anchors.top: _component.top
-            anchors.bottom: _innerFrame.top
-            anchors.horizontalCenter: _component.horizontalCenter
-            font.pixelSize: Fonts.fontPixelSection
-        }
-
-        Rectangle { id: _innerFrame
-            clip: true
-            color           : Colors.transparent
-            border.color    : Colors.line
-            anchors.fill    : _component
-            anchors.margins : _component.frameGap
-            radius          : _component.innerRadius
-            onWidthChanged  : console.debug(" ----- ", width, height)
-            onHeightChanged : console.debug(" ----- ", width, height)
-            Rectangle { id: _containerSwipeView
-                anchors.fill: parent
-                anchors.margins: 2
-                SwipeView { id: _swipeview
-                    clip: true
-                    currentIndex: 0
-                    anchors.fill: parent
-                    Repeater {
-                        model: _component.stepNames
-                        Loader {
-                            anchors.margins: 2
-                            active: SwipeView.isCurrentItem || SwipeView.isNextItem || SwipeView.isPreviousItem
-                            sourceComponent: Item {
-                                Image {
-                                    anchors.fill: parent
-                                    source: "qrc:/images/iLogoDiality"
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        StepIndicator { id: _indicator
-            currentComplete : true
-            hideLabels      : true
-            stepNames       : _component.stepNames
-            currentStepIndex: _swipeview.currentIndex
-            anchors.top     : _innerFrame.bottom
-            anchors.bottom  : _component.bottom
-            anchors.horizontalCenter: _component.horizontalCenter
-        }
-
-        Image { id: _leftImage
-            width   : _component.chevronWidth
-            height  : _component.chevronHeight
-            source  : "qrc:/images/iArrowLeft"
-            anchors.left    : _component.left
-            anchors.right   : _innerFrame.left
-            anchors.verticalCenter: _component.verticalCenter
-            anchors.margins : _component.imageMargin
-        }
-        Image { id: _rightImage
-            width   : _component.chevronWidth
-            height  : _component.chevronHeight
-            source  : "qrc:/images/iArrowRight"
-            anchors.right   : _component.right
-            anchors.left    : _innerFrame.right
-            anchors.verticalCenter: _component.verticalCenter
-            anchors.margins : _component.imageMargin
-        }
-
-        MouseArea { id: _mouseAreaLeft
-            width           : _component.frameGap
-            anchors.left    : _component.left
-            anchors.top     : _component.top
-            anchors.bottom  : _component.bottom
-            onClicked       : {
-                console.debug("leftClicked")
-                if (_swipeview.currentIndex > 0)
-                    _swipeview.currentIndex--
-                _component.leftClicked
-            }
-        }
-        MouseArea {id: _mouseAreaRight
-            width           : _component.frameGap
-            anchors.right   : _component.right
-            anchors.top     : _component.top
-            anchors.bottom  : _component.bottom
-            onClicked       :  {
-                console.debug("rightClicked")
-                if (_swipeview.currentIndex < _swipeview.count-1)
-                    _swipeview.currentIndex++
-                _component.rightClicked
-            }
-        }
     }
 
     Row { id: _buttonRow