Networked Paint with Patrick

Developer
Teo Litto
Size
4,451 Kb
Views
30,360
  1. Networked Paint with Patrick Previews
  2. Networked Paint with Patrick HTML Codes
  3. Networked Paint with Patrick CSS Codes
  4. Networked Paint with Patrick JS Codes

How do I make an networked paint with patrick?

What is a networked paint with patrick? How do you make a networked paint with patrick? This script and codes were developed by Teo Litto on 26 August 2022, Friday.

Networked Paint with Patrick Previews
IQ Test

Networked Paint with Patrick - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Networked Paint with Patrick</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="menu"> <h2>Paint With Patrick O'Leary</h2> <span>Choose Brush:</span> <div data-brush="POLearyBrush1" class="brushSelector POLearyBrush1 selected"></div> <div data-brush="POLearyBrush2" class="brushSelector POLearyBrush2"></div> <div data-brush="POLearyBrush3" class="brushSelector POLearyBrush3"></div> <span>Choose Size:</span> <div id="sizeSelector"> <a href="#" class="sm" data-brushSize="sm"></a> <a href="#" class="med selected" data-brushSize="med"></a> <a href="#" class="lg" data-brushSize="lg"></a> </div> <button id="clearScreen">Clear Screen</button>
</div>
<div id="paintMe">
</div>
<div id="brushIndicator" class="POLearyBrush1"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.firebase.com/js/client/2.4.1/firebase.js'></script> <script src="js/index.js"></script>
</body>
</html>

Networked Paint with Patrick - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
* { padding: 0; outline: 0; margin: 0; font-family: 'Indie Flower', cursive, sans-serif, sans;
}
html, body { width: 100%; height: 100%;
}
#menu { width: 100%; height: 120px; background: #eee; border-bottom: solid 1px #555; z-index: 10; position: relative;
}
#menu h2 { padding: 0 40px;
}
#menu span { vertical-align: bottom; position: relative; top: -10px; padding-right: 20px;
}
#menu h2, #menu div { display: inline-block; vertical-align: middle;
}
#menu .brushSelector { cursor: pointer;
}
#paintMe { width: 100%; height: 100%; background: #fff; z-index: 2;
}
.POLearyBrush1 { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/PODome1.png"); background-size: contain; width: 80px; height: 105px;
}
.POLearyBrush1.sm { width: 40px; height: 53px;
}
.POLearyBrush1.med { width: 80px; height: 105px;
}
.POLearyBrush1.lg { width: 130px; height: 171px;
}
.POLearyBrush1.selected { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/PODome1.png") #fcc; background-size: contain;
}
.POLearyBrush2 { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/PODome2.png"); background-size: contain; width: 80px; height: 113px;
}
.POLearyBrush2.sm { width: 40px; height: 57px;
}
.POLearyBrush2.med { width: 80px; height: 113px;
}
.POLearyBrush2.lg { width: 130px; height: 184px;
}
.POLearyBrush2.selected { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/PODome2.png") #fcc; background-size: contain;
}
.POLearyBrush3 { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/PODome3.png"); background-size: contain; width: 79px; height: 111px;
}
.POLearyBrush3.sm { width: 40px; height: 56px;
}
.POLearyBrush3.med { width: 79px; height: 111px;
}
.POLearyBrush3.lg { width: 130px; height: 183px;
}
.POLearyBrush3.selected { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/PODome3.png") #fcc; background-size: contain;
}
#paintMe { cursor: none;
}
#paintMe .stroke { position: absolute;
}
#brushIndicator { pointer-events: none; position: absolute; z-index: 5; cursor: none;
}
#menu #sizeSelector { display: inline-block; vertical-align: bottom; margin-bottom: 10px;
}
#menu #sizeSelector a { z-index: 3; position: relative; display: inline-block; background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/brushSizes.png") no-repeat; vertical-align: bottom;
}
#menu #sizeSelector a.selected:before { content: " "; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 0, 0, 0.2); z-index: 2;
}
#menu #sizeSelector a.sm { background-position: 0px -20px; width: 41px; height: 41px;
}
#menu #sizeSelector a.med { background-position: -56px -9px; width: 51px; height: 51px;
}
#menu #sizeSelector a.lg { background-position: -120px 1px; width: 61px; height: 61px;
}
#menu #clearScreen { vertical-align: bottom; padding: 10px 20px; font-size: 1em; background: #efefef; border-radius: 10px; margin-left: 30px; margin-bottom: 10px; cursor: pointer;
}
#menu #clearScreen:hover { background: #ffcccc;
}

Networked Paint with Patrick - Script Codes JS Codes

var remote;
function init(){ remote = new Firebase("https://paintwithpoleary.firebaseio.com"); //setup firebase listeners initFirebaseListeners(); //setup local mouse listeners etc initLocal();
}
function initFirebaseListeners(){ remote.child("strokes").on("child_added", function(s){ //console.log(s.val()); drawStroke(s.val()); }); remote.child('strokes').on("child_removed", function(s){ console.log('child_removed event handler') $('#paintMe').empty(); });
}
function initLocal(){ currentBrush = "POLearyBrush1"; currentSize = "med"; canvas = $("#paintMe"); brushIndicator = $('#brushIndicator') leftButtonDown = false; $(document).mousedown(function(e){ if(e.which === 1) leftButtonDown = true; }); $(document).mouseup(function(e){ if(e.which === 1) leftButtonDown = false; }); $("#paintMe").on("mousemove mousedown", function(e){ // console.log(e); brushIndicator.css( { "left" : (e.clientX - 40)+"px", "top" : (e.clientY-50)+"px" }) if (leftButtonDown || e.type=="mousedown") { createStroke(currentBrush,currentSize,e.clientX-40,e.clientY-50) } }); $('.brushSelector').on("click", function(e){ currentBrush = $(e.target).attr('data-brush'); $('.brushSelector').removeClass("selected")
$(e.target).addClass("selected"); brushIndicator.attr("class", "").addClass(currentBrush).addClass(currentSize); }) $('#sizeSelector a').on("click", function(e){ currentSize = $(e.target).attr('data-brushSize'); $('#sizeSelector a').removeClass("selected")
$(e.target).addClass("selected"); brushIndicator.attr("class", "").addClass(currentBrush).addClass(currentSize); }) $('#clearScreen').on('click',function(e){ e.preventDefault(); e.stopPropagation(); clearScreen(); })
}
function createStroke(brush,size,x,y){ remote.child("strokes").push().set({ brush: brush, size: size, x: x, y: y })
}
function drawStroke(stroke){ $('#paintMe').append( $('<div class="stroke"></div>').addClass(stroke.brush).addClass(stroke.size).css({ "left" : (stroke.x)+"px", "top" : (stroke.y)+"px" }) )
}
function clearScreen(){ console.log('clearScreen func') remote.child("strokes").remove();
}
$(function(){ init();
})
Networked Paint with Patrick - Script Codes
Networked Paint with Patrick - Script Codes
Home Page Home
Developer Teo Litto
Username teolitto
Uploaded August 26, 2022
Rating 3
Size 4,451 Kb
Views 30,360
Do you need developer help for Networked Paint with Patrick?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Teo Litto (teolitto) Script Codes
Name
Parallaxadise - Quick n dirty scrollytelling demo
Color morphing
Depth First Search Connectivity Test
Konami Code Easter Egg
Starfall
Liquid Loader
Kitten Sniffer
Powers Sniffer
WebGL Smoke
Dreamforce.com 2017
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!