updating logic algorithm and visual

Rahmn-Dev · Rahmn-Dev · commit 174602da9e21 · 2024-08-08T16:26:26.000Z
diff --git a/app/algorithm_dda.py b/app/algorithm_dda.py
@@ -1,7 +1,6 @@
-import matplotlib.pyplot as plt
-import numpy as np
-from io import BytesIO
-import base64
+import plotly.graph_objects as go
+import plotly.io as pio
+import json
 
 def dda_algorithm(x1, y1, x2, y2):
     dx = x2 - x1
@@ -26,20 +25,13 @@ def generate_plot(x1, y1, x2, y2):
     points = dda_algorithm(x1, y1, x2, y2)
     x_values, y_values = zip(*points)
     
-    fig, ax = plt.subplots()
-    ax.plot(x_values, y_values, marker='o', linestyle='-', color='b')
-    ax.set_title(f'Line from ({x1}, {y1}) to ({x2}, {y2})')
-    ax.set_xlabel('X')
-    ax.set_ylabel('Y')
-    ax.grid(True)
+    fig = go.Figure()
+    fig.add_trace(go.Scatter(x=x_values, y=y_values, mode='lines+markers', name='Line'))
+    fig.update_layout(title=f'Line from ({x1}, {y1}) to ({x2}, {y2})',
+                      xaxis_title='X',
+                      yaxis_title='Y',
+                      template='plotly_dark')
 
-    # Save plot to a BytesIO object
-    buffer = BytesIO()
-    plt.savefig(buffer, format='png')
-    plt.close(fig)
-    buffer.seek(0)
+    plot_json = pio.to_json(fig)
     
-    # Encode image to base64
-    img_str = base64.b64encode(buffer.read()).decode('utf-8')
-    
-    return img_str
+    return plot_json
diff --git a/app/templates/form.html b/app/templates/form.html
@@ -1,8 +1,10 @@
-<!-- linevisualizer/templates/linevisualizer/form.html -->
+
 <!DOCTYPE html>
 <html>
 <head>
     <title>Draw Line</title>
+   
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 </head>
 <body>
     <h1>Draw Line Using DDA Algorithm</h1>
@@ -18,9 +20,13 @@ <h1>Draw Line Using DDA Algorithm</h1>
         <input type="number" id="y2" name="y2" required>
         <button type="submit">Draw Line</button>
     </form>
-    {% if img_str %}
-        <h2>Line Plot</h2>
-        <img src="data:image/png;base64,{{ img_str }}" alt="Line Plot">
+    {% if plot_json %}
+        <h2>Interactive Line Plot</h2>
+        <div id="plot"></div>
+        <script type="text/javascript">
+            var plotJson = {{ plot_json|safe }};
+            Plotly.newPlot('plot', plotJson.data, plotJson.layout);
+        </script>
     {% endif %}
 </body>
 </html>
diff --git a/app/views.py b/app/views.py
@@ -3,13 +3,13 @@
 from .algorithm_dda import generate_plot
 
 def draw_line(request):
-    img_str = None
+    plot_json = None
     if request.method == 'POST':
         x1 = int(request.POST.get('x1'))
         y1 = int(request.POST.get('y1'))
         x2 = int(request.POST.get('x2'))
         y2 = int(request.POST.get('y2'))
 
-        img_str = generate_plot(x1, y1, x2, y2)
+        plot_json = generate_plot(x1, y1, x2, y2)
         
-    return render(request, 'form.html', {'img_str': img_str})
+    return render(request, 'form.html', {'plot_json': plot_json})
