kopia lustrzana https://github.com/backface/turtlestitch
move CamSnapshotDialogMorph code from objects to gui
Jens Mönig
rodzic
47264f10b0
commit
d995f173e7
138
gui.js
138
gui.js
|
|
@ -43,8 +43,9 @@
|
|||
TurtleIconMorph
|
||||
CostumeIconMorph
|
||||
WardrobeMorph
|
||||
StageHandleMorph;
|
||||
PaletteHandleMorph;
|
||||
StageHandleMorph
|
||||
PaletteHandleMorph
|
||||
CamSnapshotDialogMorph
|
||||
|
||||
|
||||
credits
|
||||
|
|
@ -70,7 +71,7 @@ fontHeight, hex_sha512, sb, CommentMorph, CommandBlockMorph,
|
|||
BlockLabelPlaceHolderMorph, Audio, SpeechBubbleMorph, ScriptFocusMorph,
|
||||
XML_Element, WatcherMorph, BlockRemovalDialogMorph, saveAs, TableMorph,
|
||||
isSnapObject, isRetinaEnabled, disableRetinaSupport, enableRetinaSupport,
|
||||
isRetinaSupported, SliderMorph, Animation, CamSnapshotDialogMorph*/
|
||||
isRetinaSupported, SliderMorph, Animation*/
|
||||
|
||||
// Global stuff ////////////////////////////////////////////////////////
|
||||
|
||||
|
|
@ -89,6 +90,7 @@ var SoundIconMorph;
|
|||
var JukeboxMorph;
|
||||
var StageHandleMorph;
|
||||
var PaletteHandleMorph;
|
||||
var CamSnapshotDialogMorph;
|
||||
|
||||
// IDE_Morph ///////////////////////////////////////////////////////////
|
||||
|
||||
|
|
@ -8333,3 +8335,133 @@ PaletteHandleMorph.prototype.mouseDoubleClick = function () {
|
|||
this.target.parentThatIsA(IDE_Morph).setPaletteWidth(200);
|
||||
};
|
||||
|
||||
// CamSnapshotDialogMorph ////////////////////////////////////////////////////
|
||||
|
||||
/*
|
||||
I am a dialog morph that lets users take a snapshot using their webcam
|
||||
and use it as a costume for their sprites or a background for the Stage.
|
||||
*/
|
||||
|
||||
// CamSnapshotDialogMorph inherits from DialogBoxMorph:
|
||||
|
||||
|
||||
CamSnapshotDialogMorph.prototype = new DialogBoxMorph();
|
||||
CamSnapshotDialogMorph.prototype.constructor = CamSnapshotDialogMorph;
|
||||
CamSnapshotDialogMorph.uber = DialogBoxMorph.prototype;
|
||||
|
||||
// CamSnapshotDialogMorph instance creation
|
||||
|
||||
function CamSnapshotDialogMorph(ide, sprite, onCancel, onAccept) {
|
||||
this.init(ide, sprite, onCancel, onAccept);
|
||||
}
|
||||
|
||||
CamSnapshotDialogMorph.prototype.init = function (
|
||||
ide,
|
||||
sprite,
|
||||
onCancel,
|
||||
onAccept) {
|
||||
this.ide = ide;
|
||||
this.sprite = sprite;
|
||||
this.padding = 10;
|
||||
|
||||
this.oncancel = onCancel;
|
||||
this.accept = onAccept;
|
||||
|
||||
this.videoElement = null; // an HTML5 video element
|
||||
this.videoView = new Morph(); // a morph where we'll copy the video contents
|
||||
|
||||
CamSnapshotDialogMorph.uber.init.call(this);
|
||||
|
||||
this.labelString = 'Camera';
|
||||
this.createLabel();
|
||||
|
||||
this.buildContents();
|
||||
};
|
||||
|
||||
CamSnapshotDialogMorph.prototype.buildContents = function () {
|
||||
var myself = this;
|
||||
|
||||
this.videoElement = document.createElement('video');
|
||||
this.videoElement.hidden = true;
|
||||
document.body.appendChild(this.videoElement);
|
||||
|
||||
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
|
||||
navigator.mediaDevices.getUserMedia({ video: true })
|
||||
.then(function (stream) {
|
||||
myself.videoElement.src = window.URL.createObjectURL(stream);
|
||||
myself.videoElement.play();
|
||||
myself.videoElement.stream = stream;
|
||||
});
|
||||
}
|
||||
|
||||
this.videoView.setExtent(this.ide.stage.dimensions);
|
||||
this.videoView.image = newCanvas(this.videoView.extent());
|
||||
this.videoView.drawOn = function (aCanvas) {
|
||||
var context = aCanvas.getContext('2d'),
|
||||
w = this.width(),
|
||||
h = this.height();
|
||||
|
||||
context.save();
|
||||
|
||||
// Flip the image so it looks like a mirror
|
||||
context.translate(w, 0);
|
||||
context.scale(-1, 1);
|
||||
|
||||
context.drawImage(
|
||||
myself.videoElement,
|
||||
this.left() * -1,
|
||||
this.top(),
|
||||
w,
|
||||
h
|
||||
);
|
||||
|
||||
context.restore();
|
||||
};
|
||||
|
||||
this.videoView.step = function () {
|
||||
this.changed();
|
||||
};
|
||||
|
||||
this.addBody(new AlignmentMorph('column', this.padding / 2));
|
||||
this.body.add(this.videoView);
|
||||
this.body.fixLayout();
|
||||
|
||||
this.addButton('ok', 'Save');
|
||||
this.addButton('cancel', 'Cancel');
|
||||
|
||||
this.fixLayout();
|
||||
this.drawNew();
|
||||
};
|
||||
|
||||
CamSnapshotDialogMorph.prototype.ok = function () {
|
||||
var stage = this.ide.stage,
|
||||
canvas = newCanvas(stage.dimensions),
|
||||
context = canvas.getContext('2d');
|
||||
|
||||
context.translate(stage.dimensions.x, 0);
|
||||
context.scale(-1, 1);
|
||||
|
||||
context.drawImage(
|
||||
this.videoElement,
|
||||
0,
|
||||
0,
|
||||
stage.dimensions.x,
|
||||
stage.dimensions.y
|
||||
);
|
||||
|
||||
this.accept(new Costume(canvas), this.sprite.newCostumeName('camera'));
|
||||
this.close();
|
||||
};
|
||||
|
||||
CamSnapshotDialogMorph.prototype.destroy = function () {
|
||||
this.oncancel.call(this);
|
||||
this.close();
|
||||
};
|
||||
|
||||
CamSnapshotDialogMorph.prototype.close = function () {
|
||||
if (this.videoElement) {
|
||||
this.videoElement.stream.getTracks()[0].stop();
|
||||
this.videoElement.remove();
|
||||
}
|
||||
CamSnapshotDialogMorph.uber.destroy.call(this);
|
||||
};
|
||||
|
|
|
|||
131
objects.js
131
objects.js
|
|
@ -80,8 +80,7 @@ document, isNaN, isString, newCanvas, nop, parseFloat, radians, window,
|
|||
modules, IDE_Morph, VariableDialogMorph, HTMLCanvasElement, Context, List,
|
||||
SpeechBubbleMorph, RingMorph, isNil, FileReader, TableDialogMorph,
|
||||
BlockEditorMorph, BlockDialogMorph, PrototypeHatBlockMorph, localize,
|
||||
TableMorph, TableFrameMorph, normalizeCanvas, BooleanSlotMorph, HandleMorph,
|
||||
AlignmentMorph*/
|
||||
TableMorph, TableFrameMorph, normalizeCanvas, BooleanSlotMorph, HandleMorph*/
|
||||
|
||||
modules.objects = '2017-September-08';
|
||||
|
||||
|
|
@ -98,7 +97,6 @@ var WatcherMorph;
|
|||
var StagePrompterMorph;
|
||||
var Note;
|
||||
var SpriteHighlightMorph;
|
||||
var CamSnapshotDialogMorph;
|
||||
|
||||
function isSnapObject(thing) {
|
||||
return thing instanceof SpriteMorph || (thing instanceof StageMorph);
|
||||
|
|
@ -9528,130 +9526,3 @@ StagePrompterMorph.prototype.mouseClickLeft = function () {
|
|||
StagePrompterMorph.prototype.accept = function () {
|
||||
this.isDone = true;
|
||||
};
|
||||
|
||||
// CamSnapshotDialogMorph /////////////////////////////////////////////////////////
|
||||
|
||||
/*
|
||||
I am a dialog morph that lets users take a snapshot using their webcam
|
||||
and use it as a costume for their sprites or a background for the Stage.
|
||||
*/
|
||||
|
||||
// CamSnapshotDialogMorph inherits from DialogBoxMorph:
|
||||
|
||||
|
||||
CamSnapshotDialogMorph.prototype = new DialogBoxMorph();
|
||||
CamSnapshotDialogMorph.prototype.constructor = CamSnapshotDialogMorph;
|
||||
CamSnapshotDialogMorph.uber = DialogBoxMorph.prototype;
|
||||
|
||||
// CamSnapshotDialogMorph instance creation
|
||||
|
||||
function CamSnapshotDialogMorph(ide, sprite, onCancel, onAccept) {
|
||||
this.init(ide, sprite, onCancel, onAccept);
|
||||
}
|
||||
|
||||
CamSnapshotDialogMorph.prototype.init = function (ide, sprite, onCancel, onAccept) {
|
||||
this.ide = ide;
|
||||
this.sprite = sprite;
|
||||
this.padding = 10;
|
||||
|
||||
this.oncancel = onCancel;
|
||||
this.accept = onAccept;
|
||||
|
||||
this.videoElement = null; // an HTML5 video element
|
||||
this.videoView = new Morph(); // a morph where we'll copy the video contents
|
||||
|
||||
CamSnapshotDialogMorph.uber.init.call(this);
|
||||
|
||||
this.labelString = 'Camera';
|
||||
this.createLabel();
|
||||
|
||||
this.buildContents();
|
||||
};
|
||||
|
||||
CamSnapshotDialogMorph.prototype.buildContents = function () {
|
||||
var myself = this;
|
||||
|
||||
this.videoElement = document.createElement('video');
|
||||
this.videoElement.hidden = true;
|
||||
document.body.appendChild(this.videoElement);
|
||||
|
||||
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
|
||||
navigator.mediaDevices.getUserMedia({ video: true })
|
||||
.then(function (stream) {
|
||||
myself.videoElement.src = window.URL.createObjectURL(stream);
|
||||
myself.videoElement.play();
|
||||
myself.videoElement.stream = stream;
|
||||
});
|
||||
}
|
||||
|
||||
this.videoView.setExtent(this.ide.stage.dimensions);
|
||||
this.videoView.image = newCanvas(this.videoView.extent());
|
||||
this.videoView.drawOn = function (aCanvas) {
|
||||
var context = aCanvas.getContext('2d'),
|
||||
w = this.width(),
|
||||
h = this.height();
|
||||
|
||||
context.save();
|
||||
|
||||
// Flip the image so it looks like a mirror
|
||||
context.translate(w, 0);
|
||||
context.scale(-1, 1);
|
||||
|
||||
context.drawImage(
|
||||
myself.videoElement,
|
||||
this.left() * -1,
|
||||
this.top(),
|
||||
w,
|
||||
h
|
||||
);
|
||||
|
||||
context.restore();
|
||||
};
|
||||
|
||||
this.videoView.step = function () {
|
||||
this.changed();
|
||||
};
|
||||
|
||||
this.addBody(new AlignmentMorph('column', this.padding / 2));
|
||||
this.body.add(this.videoView);
|
||||
this.body.fixLayout();
|
||||
|
||||
this.addButton('ok', 'Save');
|
||||
this.addButton('cancel', 'Cancel');
|
||||
|
||||
this.fixLayout();
|
||||
this.drawNew();
|
||||
};
|
||||
|
||||
CamSnapshotDialogMorph.prototype.ok = function () {
|
||||
var stage = this.ide.stage,
|
||||
canvas = newCanvas(stage.dimensions),
|
||||
context = canvas.getContext('2d');
|
||||
|
||||
context.translate(stage.dimensions.x, 0);
|
||||
context.scale(-1, 1);
|
||||
|
||||
context.drawImage(
|
||||
this.videoElement,
|
||||
0,
|
||||
0,
|
||||
stage.dimensions.x,
|
||||
stage.dimensions.y
|
||||
);
|
||||
|
||||
this.accept(new Costume(canvas), this.sprite.newCostumeName('camera'));
|
||||
this.close();
|
||||
};
|
||||
|
||||
CamSnapshotDialogMorph.prototype.destroy = function () {
|
||||
this.oncancel.call(this);
|
||||
this.close();
|
||||
};
|
||||
|
||||
CamSnapshotDialogMorph.prototype.close = function () {
|
||||
if (this.videoElement) {
|
||||
this.videoElement.stream.getTracks()[0].stop();
|
||||
this.videoElement.remove();
|
||||
}
|
||||
CamSnapshotDialogMorph.uber.destroy.call(this);
|
||||
};
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue