DEV Community

Cover image for Integrate p5js with socketio using Flask
Abdur-Rahmaan Janhangeer
Abdur-Rahmaan Janhangeer

Posted on • Originally published at pythonkitchen.com

1 1

Integrate p5js with socketio using Flask

Github Repo

Main codes

Server:

from shopyo.api.module import ModuleHelp

from flask_socketio import SocketIO, join_room, leave_room, emit

from init import socketio

mhelp = ModuleHelp(__file__, __name__)
globals()[mhelp.blueprint_str] = mhelp.blueprint
module_blueprint = globals()[mhelp.blueprint_str]


@module_blueprint.route("/")
def index():
    return mhelp.render('index.html')


@socketio.on('mouse')
def mouse(data, methods=['GET', 'POST']):
    # print(data)
    emit('mouse', data, broadcast=True)
Enter fullscreen mode Exit fullscreen mode

Client

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Websockets drawing app</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <script src="https://cdn.socket.io/4.4.1/socket.io.min.js" integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.sound.min.js"></script>
  <script type="text/javascript">


 let socket
let color = '#FFF'
let strokeWidth = 4

function setup() {
  // Creating canvas
  const cv = createCanvas(1000, 1000)
  cv.position(600, 100)
  cv.background(0)

  // Start the socket connection
  socket = io.connect('http://127.0.0.1:5000')

  // Callback function
  socket.on('mouse', data => {
    // console.log('received ' + data.color+ ' '+data.x)
    stroke(data.color)
    strokeWeight(data.strokeWidth)
    line(data.x, data.y, data.px, data.py)
  })

  // Getting our buttons and the holder through the p5.js dom
  const color_picker = select('#pickcolor')
  const color_btn = select('#color-btn')
  const color_holder = select('#color-holder')

  const stroke_width_picker = select('#stroke-width-picker')
  const stroke_btn = select('#stroke-btn')

  // Adding a mousePressed listener to the button
  color_btn.mousePressed(() => {
    // Checking if the input is a valid hex color
    if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color_picker.value())) {
      color = color_picker.value()
      color_holder.style('background-color', color)
    }
    else {console.log('Enter a valid hex value')}
  })

  // Adding a mousePressed listener to the button
  stroke_btn.mousePressed(() => {
    const width = parseInt(stroke_width_picker.value())
    if (width > 0) strokeWidth = width
  })
}

function mouseDragged() {
  // Draw
  stroke(color)
  strokeWeight(strokeWidth)
  line(mouseX, mouseY, pmouseX, pmouseY)

  // Send the mouse coordinates
  sendmouse(mouseX, mouseY, pmouseX, pmouseY)
}

// Sending data to the socket
function sendmouse(x, y, pX, pY) {
  const data = {
    x: x,
    y: y,
    px: pX,
    py: pY,
    color: color,
    strokeWidth: strokeWidth,
  }

  socket.emit('mouse', data)
}
  </script>
  <style type="text/css">
    input.call-picker {
  border: 1px solid #AAA;
  color: #666;
  text-transform: uppercase;
  float: left;
  outline: none;
  padding: 10px;
  text-transform: uppercase;
  width: 85px;
}

.color-picker {
  width: 130px;
  background: #F3F3F3;
  height: 81px;
  padding: 5px;
  border: 5px solid #fff;
  box-shadow: 0px 0px 3px 1px #DDD;
  position: absolute;
  top: 61px;
  left: 2px;
}

.color-holder {
  background: #fff;
  cursor: pointer;
  border: 1px solid #AAA;
  width: 40px;
  height: 36px;
  float: left;
  margin-left: 5px;
}

input.stroke_width_picker {
  border: 1px solid #AAA;
  color: #666;
  text-transform: uppercase;
  float: left;
  outline: none;
  padding: 10px;
  text-transform: uppercase;
  width: 85px;
}

p {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
button {
  margin-left: 1rem;
}
  </style>
</head>

<body>
  <p>Choose color (# hex)</p>
  <input type="text" name="custom_color" placeholder="#FFFFFF" id="pickcolor" class="call-picker" />
  <div id="color-holder" class="color-holder call-picker"></div>
  <button id="color-btn">Change color</button>
  <br />
  <p>Choose stroke width</p>
  <input type="text" name="stroke_width" placeholder="4" id="stroke-width-picker" class="stroke_width_picker" />
  <button id="stroke-btn">Change stroke width</button>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Result

Image description

Opening same url in two tabs/windows

Github Repo

Image of Datadog

Measure and Advance Your DevSecOps Maturity

In this white paper, we lay out a DevSecOps maturity model based on our experience helping thousands of organizations advance their DevSecOps practices. Learn the key competencies and practices across four distinct levels of maturity.

Get The White Paper

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay