I was trying to make a text tool using p5.js that starts typing from where mouse is clickedkind of like photoshop or draw.io at the current time my code takes value from input field and then draws that value on canvas I am stuck as to how to do it in the way i want
function Texttool(){
this.icon = "assets/text.jpg";
this.name = "Text";
let input;
let textTyped = "";
let x, y;
this.draw = function()
{
//only 'draw' text when mouse is pressed
if(mouseIsPressed)
{
// //takes value from input box
// this.selectItem = select('#textbox')
// this.selectItem = this.selectItem.value()
// //changes size of text 'drawn depending on val value
// textSize(val)
// //value taken from input box implemented as text's string
// text(this.selectItem,mouseX,mouseY)
}
}
this.unselectTool = function()
{
loadPixels()
select(".options").html("");
//reset slider value to 20
slider.value(20)
//reset stroke weight
strokeWeight(1)
};
//makes input box for changing text
this.populateOptions = function()
{
select(".options").html
(
"<p>Write Text</p><input type = 'text' id = 'textbox'>"
);
};
}
addition file for sketch.js and index.html
<!DOCTYPE html>
<html>
<head>
<script src="lib/p5.min.js"></script>
<script src="sketch.js"></script>
<!-- add extra scripts below -->
<script src="toolbox.js"></script>
<script src="colourPalette.js"></script>
<script src="helperFunctions.js"></script>
<script src="freehandTool.js"></script>
<script src="lineToTool.js"></script>
<script src="sprayCanTool.js"></script>
<script src="mirrorDrawTool.js"></script>
<script src="stampTool.js"></script>
<script src="Shape.js"></script>
<script src="Eraser.js"></script>
<script src="Texttool.js"></script>
<script src="Drag_shape.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="box header">My Drawing App
<button id="clearButton">Clear</button>
<button id="saveImageButton">Save Image</button>
</div>
<div class="box" id="sidebar"></div>
<div id="content"></div>
<div class="box colourPalette"></div>
<div class="box options"></div>
</div>
</body>
</html>
//global variables that will store the toolbox colour palette
//amnd the helper functions
var toolbox = null;
var colourP = null;
var helpers = null;
var c;
var colour = 255 ;
var slider;
var val;
var Stamps = [];
function setup() {
//create a canvas to fill the content div from index.html
canvasContainer = select('#content');
c = createCanvas(canvasContainer.size().width, canvasContainer.size().height);
c.parent("content");
//create helper functions and the colour palette
helpers = new HelperFunctions();
colourP = new ColourPalette();00
//create a toolbox for storing the tools
toolbox = new Toolbox();
//add the tools to the toolbox.
toolbox.addTool(new FreehandTool());
toolbox.addTool(new LineToTool());
toolbox.addTool(new SprayCanTool());
toolbox.addTool(new mirrorDrawTool());
toolbox.addTool(new StampTool());
toolbox.addTool(new shapetool());
toolbox.addTool(new EraserTool());
toolbox.addTool(new Texttool());
toolbox.addTool(new Texttool2());
toolbox.addTool(new Dragshape());
//slider to change size of tools
slider = createSlider (1,100,20)
slider.position(400,900);
slider.style('width', '80px');
//preloading image in sketch.js for stamp tool into an array
Stamps[0] = loadImage('assets/Star2.png')
Stamps[1] = loadImage('assets/Sword.png')
this.unselectTool = function() {
updatePixels();
//clear options
select(".options").html("");
//reset slider value to 20
slider.value(20)
//reset stroke weight
strokeWeight(1)
};
}
function draw() {
//call the draw function from the selected tool.
//hasOwnProperty is a javascript function that tests
//if an object contains a particular method or property
//if there isn't a draw method the app will alert the user
if (toolbox.selectedTool.hasOwnProperty("draw")) {
toolbox.selectedTool.draw();
}
//make variable val to hold sliders value
val = slider.value();
}
i tried to draw the input field on canvas on mouse pressed but the webapp breaks doing so
Related
I am using DHTMLXScheduler in my MVC5 webapplication to add patient and get patient's appointment and displaying this in calendar but I am having trouble i am getting data from database but this records not getting added according to start_time and end_time.
Calendar Controller:
public ActionResult Index()
{
var sched = new DHXScheduler(this);
sched.Skin = DHXScheduler.Skins.Terrace;
sched.LoadData = true;
sched.EnableDataprocessor = true;
sched.InitialDate = new DateTime(2016, 5, 5);
sched.Config.xml_date = "%d-%M-%Y %g:%i:%s%A";
return View(sched);
}
public ContentResult Data()
{
return (new SchedulerAjaxData(
new Entities().AppointmentsLogs.Select(e=> new { id = e.AppointmentId, start_date = e.StartTime.ToString(), end_date=e.EndTime, text = e.PatientName })
// .Select(e => new { e.id, e.text, e.start_date, e.end_date })
)
);
}
Index.cshtml:
<!DOCTYPE html>
<html>
<head>
<title>DHXScheduler initialization sample</title>
<style>
body {
background-color: #eee;
}
</style>
</head>
<body>
<div name="timeline_tab" style="height:700px;width:900px;margin:0 auto">
#Html.Raw(Model.Render())
</div>
</body>
</html>
<script src="~/scripts/dhtmlxScheduler/dhtmlxscheduler.js"></script>
<script src="~/scripts/dhtmlxScheduler/ext/dhtmlxscheduler_timeline.js"></script>
Looks like you send start and end dates in different formats:
, start_date = e.StartTime.ToString(), end_date=e.EndTime,
StartTime is converted to string using system culture https://msdn.microsoft.com/en-us/library/k494fzbf(v=vs.110).aspx , while the EndTime is passed as DateTime and serialized by scheduler helper.
Does anything changes if you pass both dates as DateTime?
new Entities()
.AppointmentsLogs
.Select(e=> new
{
id = e.AppointmentId,
start_date = e.StartTime,
end_date=e.EndTime,
text = e.PatientName
});
i want to add an save button with a counter
i wrote a script but its not work with greasemonkey
<button type="submit" id="save" value="Save">Save</button>
<p>The button was pressed <span id="displayCount">0</span> times.</p>
<script type="text/javascript">
var count = 0;
var button = document.getElementById("save");
var display = document.getElementById("displayCount");
function loadStats(){
if(window.localStorage.getItem('count')){
count = window.localStorage.getItem('count')
display.innerHTML = count;
} else {
window.localStorage.setItem('count', 0)
} //Checks if data has been saved before so Count value doesnt become null.
}
window.localStorage.setItem("on_load_counter", count);
button.onclick = function(){
count++;
window.localStorage.setItem("count", count)
display.innerHTML = count;
}
</script>
You have to add html elements with javascript since Greasemonkey is intended to run scripts over web pages.
See Basic method to Add html content to the page with Greasemonkey?
Because FLASH is Dead I have a mission to convert some games to work as html5.
Graphics and animation is made on timeline in AnimateCC.
Until now the process looks like: publish to swc/swf, FlashDevelop -> AddToLibrary and I've access to all the objects.
When publish target is HTML5 canvas I have two files:
testHaxe.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>testHaxe</title>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="testHaxe.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete(evt) {
exportRoot = new lib.testHaxe();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">
<canvas id="canvas" width="550" height="400" style="background-color:#FFFFFF"></canvas>
</body>
</html>
testHaxe.js
(function (lib, img, cjs, ss) {
var p; // shortcut to reference prototypes
lib.webFontTxtFilters = {};
// library properties:
lib.properties = {
width: 550,
height: 400,
fps: 24,
color: "#FFFFFF",
webfonts: {},
manifest: [
{src:"images/Bitmap1.png", id:"Bitmap1"}
]
};
lib.webfontAvailable = function(family) {
lib.properties.webfonts[family] = true;
var txtFilters = lib.webFontTxtFilters && lib.webFontTxtFilters[family] || [];
for(var f = 0; f < txtFilters.length; ++f) {
txtFilters[f].updateCache();
}
};
// symbols:
(lib.Bitmap1 = function() {
this.initialize(img.Bitmap1);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,103,133);
(lib.в1 = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Warstwa 1
this.instance = new lib.Bitmap1();
this.instance.setTransform(-2,-2);
this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-2,-2,103,133);
// stage content:
(lib.testHaxe = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Layer 1
this.instance = new lib.в1();
this.instance.setTransform(85,90,1,1,0,0,0,49.5,64.5);
this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(308.5,223.5,103,133);
})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{});
var lib, images, createjs, ss;
I'm looking for a way to connect thouse files into haxe and access files on Stage or from library ex: new a1();
There are externs for createJS in haxeLib but I don't know how to use them with this output.
You can write externs for your generated lib, eg.:
package lib;
import createjs.MovieClip;
#:native("lib.B1")
extern class B1 extends MovieClip {
}
#:native("lib.testHaxe")
extern class TextHaxe extends MovieClip {
public var instance:B1;
}
Obviously that could be very tedious so I wrote a tool for it:
https://github.com/elsassph/createjs-def
And posted a complete example here: http://philippe.elsass.me/2013/05/type-annotations-for-the-createjs-toolkit/
However it's currently broken for recent versions of Animate CC because the JS output has changed - it needs to be fixed.
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById("button");
var tog = document.getElementById("toggle");
tog.onclick = function() {
if(btn.disabled) {
btn.disabled = false;
} else {
btn.disabled = true;
}
};
//btn.watch("disabled", function(prop, val, newval) { });
};
</script>
</head>
<body>
<input type="button" value="Button" id="button" />
<input type="button" value="Toggle" id="toggle" />
</body>
</html>
If you test this code, the Toggle button will successfully enable and disable the other button.
However, un-commenting the btn.watch() line will somehow always set the disabled tag to true.
Any ideas?
Because monitor function defined by watch must return new value:
btn.watch("disabled", function(prop, val, newval) { return newval; });
EDIT:
I assume you want define your monitor method without affecting the functionality of your script. That's why you have to take care of returning new value for disabled property.
I have two panels in update panel. In panel1, there is button. If I click, Panel1 will be visible =false and Panel2 will be visible=true. In Panel2, I placed SharePoint:InPutFormTextBox. It not rendering HTML toolbar and showing like below image.
<SharePoint:InputFormTextBox runat="server" ID="txtSummary" ValidationGroup="CreateCase" Rows="8" Columns="80" RichText="true" RichTextMode="Compatible" AllowHyperlink="true" TextMode="MultiLine" />
http://i700.photobucket.com/albums/ww5/vsrikanth/careersummary-1.jpg
SharePoint rich text fields start out as text areas, and some javascript in the page load event replaces them with a different control if you are using a supported browser.
With an update panel, the page isn't being loaded, so that script never gets called.
Try hiding the section using css/javascript rather than the server side visible property. That generally lets you make whatever changes you need to the form without sharepoint seeing any changes.
<SharePoint:InputFormTextBox ID="tbComment" CssClass="sp-comment-textarea" runat="server" TextMode="MultiLine" RichText="True"></SharePoint:InputFormTextBox>
<%--textbox for temporay focus - trick the IE behavior on partial submit--%>
<input type="text" id="<%= tbComment.ClientID %>_hiddenFocusInput_" style="width: 0px; height: 0px; position: absolute; top: -3000px;" />
<%--tricking code that makes the 'SharePoint:InputFormTextBox' to work correctly in udate panel on partial podtback--%>
<script id="<%= tbComment.ClientID %>_InputFormTextBoxAfterScript" type="text/javascript">
(function () {
// where possible rich textbox only
if (browseris.ie5up && (browseris.win32 || browseris.win64bit) && !IsAccessibilityFeatureEnabled()) {
// find this script element
var me = document.getElementById("<%= tbComment.ClientID %>_InputFormTextBoxAfterScript");
if (me) {
// search for script block of the rich textbox initialization
var scriptElement = me.previousSibling;
while (scriptElement && (scriptElement.nodeType != 1 || scriptElement.tagName.toLowerCase() != "script")) {
scriptElement = scriptElement.previousSibling;
}
// get the content of the found script block
var innerContent = scriptElement.text;
if (typeof innerContent == 'undefined') {
innerContent = scriptElement.innerHTML
}
// get text with function call that initializes the rich textbox
var callInitString = "";
innerContent.toString().replace(/(RTE_ConvertTextAreaToRichEdit\([^\)]+\))/ig, function (p0, p1) { callInitString = p1; });
// register on page load (partial updates also)
Sys.Application.add_load(function (sender, args) {
setTimeout(function () {
// get the toolbar of the rich textbox
var toolbar = $get("<%= tbComment.ClientID %>_toolbar");
// if not found then we should run initialization
if (!toolbar) {
// move focus to the hidden input
$get("<%= tbComment.ClientID %>_hiddenFocusInput_").focus();
// reset some global variables of the SharePoint rich textbox
window.g_aToolBarButtons = null;
window.g_fRTEFirstTimeGenerateCalled = true;
window.g_oExtendedRichTextSupport = null;
parent.g_oExtendedRichTextSupport = null;
// call the initialization code
eval(callInitString);
setTimeout(function () {
// call 'onload' code of the rich textbox
eval("RTE_TextAreaWindow_OnLoad('<%= tbComment.ClientID %>');");
}, 0);
}
}, 0);
});
}
}
})();
</script>