Skip to content

Instantly share code, notes, and snippets.

@musp

musp/Central\Index.cshtml

Last active December 20, 2016 15:26
Show Gist options
  • Save musp/a5204a886f96bbfceb0f1522846da54c to your computer and use it in GitHub Desktop.
Save musp/a5204a886f96bbfceb0f1522846da54c to your computer and use it in GitHub Desktop.
Download ZIP
Canvas-TinyMCETemplateGenerator
Raw
aditorpdrDirective.html
<div style="width:100%;margin-top:4px;">
<textarea style="width:100%" name="content"></textarea>
<button style="width:100%" ng-click="carregaDadoParaEdicao()">Carregar no Editor</button>
<button style="width:100%" ng-click="salvarDadosEditados()">Salvar</button>
</div>
Raw
Central\Index.cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html ng-app="viramundo">
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/tinymce/tinymce.js"></script>
<script src="~/Scripts/tinymce/langs/pt_BR.js"></script>
<script src="~/Scripts/angular-treeview.js"></script>
<script> viramundo = angular.module('viramundo', ['angularTreeview']);</script>
<script src="~/JSs/Controllers/CentralCtrl.js"></script>
<script src="~/JSs/Controllers/ManipulacaoCanvasCtrl.js"></script>
<script src="~/JSs/Controllers/EditorDeRelatorioCtrl.js"></script>
<script src="~/JSs/Componentes/EditorDeTexto.js"></script>
<script src="~/JSs/Controllers/geradorFrequenciaSonoraController.js"></script>
</head>
<body ng-controller="centralCtrl">
<div ng-include="centralCtrlObj.url"></div>
<button style="width:200px;height:50px" ng-click="centralCtrlObj.url = '/EditorDeRelatorio';">Editor</button>
<button style="width:200px;height:50px" ng-click="centralCtrlObj.url = '/ManipulacaoCanvas';">Canvas</button>
<button style="width:200px;height:50px" ng-click="centralCtrlObj.url = '/geradorFrequenciaSonora';">Canvas</button>
</body>
</html>
Raw
Controller\geradorFrequenciaSonoraController.js
viramundo.controller('geradorFrequenciaSonoraController', ['$scope', function ($scope) {
$scope.geradorFrequenciaSonoraCtrlObj = {};
$scope.geradorFrequenciaSonoraCtrlObj.executar = function () {
$scope.geradorFrequenciaSonoraCtrlObj.contextClass = (window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.oAudioContext || window.msAudioContext);
$scope.geradorFrequenciaSonoraCtrlObj.context = new $scope.geradorFrequenciaSonoraCtrlObj.contextClass();
$scope.geradorFrequenciaSonoraCtrlObj.gainNode = $scope.geradorFrequenciaSonoraCtrlObj.context.createGain ? $scope.geradorFrequenciaSonoraCtrlObj.context.createGain() : $scope.geradorFrequenciaSonoraCtrlObj.context.createGainNode();
$scope.geradorFrequenciaSonoraCtrlObj.gainValue = 0.1;
$scope.geradorFrequenciaSonoraCtrlObj.oscillator = $scope.geradorFrequenciaSonoraCtrlObj.context.createOscillator();
$scope.geradorFrequenciaSonoraCtrlObj.oscillator.frequency.value = 400;
$scope.geradorFrequenciaSonoraCtrlObj.oscillator.connect($scope.geradorFrequenciaSonoraCtrlObj.gainNode);
$scope.geradorFrequenciaSonoraCtrlObj.gainNode.connect($scope.geradorFrequenciaSonoraCtrlObj.context.destination);
$scope.geradorFrequenciaSonoraCtrlObj.gainNode.gain.value = 1;
$scope.geradorFrequenciaSonoraCtrlObj.oscillator.start ? $scope.geradorFrequenciaSonoraCtrlObj.oscillator.start(0) : $scope.geradorFrequenciaSonoraCtrlObj.oscillator.noteOn(0)
};
$scope.geradorFrequenciaSonoraCtrlObj.parar = function () {
$scope.geradorFrequenciaSonoraCtrlObj.oscillator.stop ? $scope.geradorFrequenciaSonoraCtrlObj.oscillator.stop(0) : $scope.geradorFrequenciaSonoraCtrlObj.oscillator.noteOff(0)
};
}]);
Raw
ControllerAngular\CentralCtrl.js
viramundo.controller('centralCtrl', ['$scope', function ($scope) {
$scope.centralCtrlObj = {};
$scope.centralCtrlObj.url = "";
}]);
Raw
ControllerAngular\EditorDeRelatorioCtrl.js
viramundo.controller('EditorDeRelatorioCtrl', ['$scope', function ($scope) {
$scope.TextoAuxiliarMinuta = function (html) {
document.getElementById("modeloTemplate").innerHTML = html;
};
$scope.isMostra = true;
$scope.ResetError = function () {
if (tinyMCE.activeEditor != null) {
tinyMCE.activeEditor.remove();
}
$scope.isMostra = !$scope.isMostra;
};
}]);
Raw
ControllerAngular\ManipulacaoCanvasCtrl.js
viramundo.controller('ManipulacaoCanvasCtrl', ['$scope', function ($scope) {
$scope.manipulacaoCanvasCtrlObj = {};
$scope.manipulacaoCanvasCtrlObj.stlCanvas = "border:1px solid red;";
$scope.manipulacaoCanvasCtrlObj.imaginacaoSCPO = document.getElementById('imaginacao');
$scope.manipulacaoCanvasCtrlObj.imaginacaoSCPO.style = $scope.manipulacaoCanvasCtrlObj.stlCanvas;
$scope.manipulacaoCanvasCtrlObj.posicaovertice = {};
$scope.manipulacaoCanvasCtrlObj.parametrosGl = {};
$scope.manipulacaoCanvasCtrlObj.posicaovertice.xp1 = 0;
$scope.manipulacaoCanvasCtrlObj.posicaovertice.yp1 = 1;
$scope.manipulacaoCanvasCtrlObj.posicaovertice.xp2 = -1;
$scope.manipulacaoCanvasCtrlObj.posicaovertice.yp2 = -1;
$scope.manipulacaoCanvasCtrlObj.posicaovertice.xp3 = 1;
$scope.manipulacaoCanvasCtrlObj.posicaovertice.yp3 = -1;
$scope.manipulacaoCanvasCtrlObj.posicaovertice.pontoSelecionado = 1;
$scope.manipulacaoCanvasCtrlObj.executamutacaodeimagem = function () {
$scope.manipulacaoCanvasCtrlObj.parametrosGl.gl = $scope.manipulacaoCanvasCtrlObj.imaginacaoSCPO.getContext('experimental-webgl');
$scope.manipulacaoCanvasCtrlObj.parametrosGl.vertices = [$scope.manipulacaoCanvasCtrlObj.posicaovertice.xp1, $scope.manipulacaoCanvasCtrlObj.posicaovertice.yp1
, $scope.manipulacaoCanvasCtrlObj.posicaovertice.xp2, $scope.manipulacaoCanvasCtrlObj.posicaovertice.yp2
, $scope.manipulacaoCanvasCtrlObj.posicaovertice.xp3, $scope.manipulacaoCanvasCtrlObj.posicaovertice.yp3];
$scope.manipulacaoCanvasCtrlObj.parametrosGl.vertex_buffer = $scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.createBuffer();
$scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.bindBuffer($scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.ARRAY_BUFFER, $scope.manipulacaoCanvasCtrlObj.parametrosGl.vertex_buffer);
$scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.bufferData($scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.ARRAY_BUFFER, new Float32Array($scope.manipulacaoCanvasCtrlObj.parametrosGl.vertices), $scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.STATIC_DRAW);
$scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.bindBuffer($scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.ARRAY_BUFFER, null);
$scope.manipulacaoCanvasCtrlObj.parametrosGl.vertCode = 'attribute vec2 coordinates;' + 'void main(void) {' + ' gl_Position = vec4(coordinates,0.0, 1.0);' + '}';
$scope.manipulacaoCanvasCtrlObj.parametrosGl.vertShader = $scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.createShader($scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.VERTEX_SHADER);
$scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.shaderSource($scope.manipulacaoCanvasCtrlObj.parametrosGl.vertShader, $scope.manipulacaoCanvasCtrlObj.parametrosGl.vertCode);
$scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.compileShader($scope.manipulacaoCanvasCtrlObj.parametrosGl.vertShader);
$scope.manipulacaoCanvasCtrlObj.parametrosGl.fragCode = 'void main(void) {' + 'gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' + '}';
$scope.manipulacaoCanvasCtrlObj.parametrosGl.fragShader = $scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.createShader($scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.FRAGMENT_SHADER);
$scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.shaderSource($scope.manipulacaoCanvasCtrlObj.parametrosGl.fragShader, $scope.manipulacaoCanvasCtrlObj.parametrosGl.fragCode);
$scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.compileShader($scope.manipulacaoCanvasCtrlObj.parametrosGl.fragShader);
$scope.manipulacaoCanvasCtrlObj.parametrosGl.shaderProgram = $scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.createProgram();
$scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.attachShader($scope.manipulacaoCanvasCtrlObj.parametrosGl.shaderProgram, $scope.manipulacaoCanvasCtrlObj.parametrosGl.vertShader);
$scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.attachShader($scope.manipulacaoCanvasCtrlObj.parametrosGl.shaderProgram, $scope.manipulacaoCanvasCtrlObj.parametrosGl.fragShader);
$scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.linkProgram($scope.manipulacaoCanvasCtrlObj.parametrosGl.shaderProgram);
$scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.useProgram($scope.manipulacaoCanvasCtrlObj.parametrosGl.shaderProgram);
$scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.bindBuffer($scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.ARRAY_BUFFER, $scope.manipulacaoCanvasCtrlObj.parametrosGl.vertex_buffer);
$scope.manipulacaoCanvasCtrlObj.parametrosGl.coord = $scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.getAttribLocation($scope.manipulacaoCanvasCtrlObj.parametrosGl.shaderProgram, "coordinates");
$scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.vertexAttribPointer($scope.manipulacaoCanvasCtrlObj.parametrosGl.coord, 2, $scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.FLOAT, false, 0, 0);
$scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.enableVertexAttribArray($scope.manipulacaoCanvasCtrlObj.parametrosGl.coord);
$scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.clearColor(0.5, 0.5, 0.5, 0.9);
$scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.enable($scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.DEPTH_TEST);
$scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.clear($scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.COLOR_BUFFER_BIT);
$scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.viewport(0, 0, $scope.manipulacaoCanvasCtrlObj.imaginacaoSCPO.width, $scope.manipulacaoCanvasCtrlObj.imaginacaoSCPO.height);
$scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.drawArrays($scope.manipulacaoCanvasCtrlObj.parametrosGl.gl.TRIANGLES, 0, 3);
};
$scope.manipulacaoCanvasCtrlObj.funcoes = {};
$scope.manipulacaoCanvasCtrlObj.executamutacaodeimagem();
}]);
function getPosition(event) {
var x = new Number();
var y = new Number();
var canvas = document.getElementById("canvas");
if (event.x != undefined && event.y != undefined) {
x = event.x;
y = event.y;
}
else // Firefox method to get the position
{
x = event.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
alert("x: " + x + " y: " + y);
}
Raw
EditorDeRelatorio\Index.cshtml
@{
Layout = null;
}
<form method="post" ng-controller="EditorDeRelatorioCtrl">
<editorpdr-directive ng-if="isMostra" modelo="TextoAuxiliarMinuta"></editorpdr-directive>
<button ng-click="ResetError()">RESET</button>
<button ng-click="SalvarModeloTemplate()">Subimeter</button>
<div id="modeloTemplate" style="width:100%;">
</div>
</form>
Raw
EditorDeTexto.js
viramundo.directive('editorpdrDirective', function () {
return {
restrict: 'E',
scope: {
modelo: '=',
isdescarregaeditor:'='
},
controller: function ($scope) {
$scope.TextoAuxiliarMinuta = $scope.modelo;
tinyMCE.init({
selector: 'textarea',
height: 500,
menubar: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code',
'template'
],
toolbar: 'template | undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
content_css: '//www.tinymce.com/css/codepen.min.css',
templates: [
{ title: 'TextBox', description: 'TextBox', content: "<strong>label:&nbsp;&nbsp;</strong><input style='border: double; border-color: black; width: 200px;' type='text'/>" },
{ title: 'RadioButton', description: 'RadioButton', content: "<span style='border: double; border-color: black'><input type='radio'/>&nbsp;&nbsp;<strong>label</strong></span>" },
{ title: 'GridView', description: 'GridView', content: "<table style='width:100%;'><thead><tr style='background-color: black;color:white;'><td>Cabe&ccedil;alho</td></tr></thead><tbody><tr style='color:black;'><td>item lista 1</td></tr><tr style='color:black;'><td>item lista 2</td></tr></tbody></table>" }
]
});
$scope.carregaDadoParaEdicao = function () {
tinyMCE.EditorManager.execCommand('mceAddEditor', true, 'textoauxiliar');
};
$scope.salvarDadosEditados = function () {
if (tinyMCE.activeEditor != null)
$scope.TextoAuxiliarMinuta(tinyMCE.activeEditor.getContent());
if (tinyMCE.activeEditor == undefined)
$scope.isdescarregaeditor = false;
};
tinyMCE.activeEditor;
},
templateUrl: '/Modais/aditorpdrDirective.html'
}
});
Raw
geradorFrequenciaSonora\index.cshtml
@{
Layout = null;
}
<section ng-controller="geradorFrequenciaSonoraController">
<button style="width:50%" ng-click="geradorFrequenciaSonoraCtrlObj.executar()">Executar</button>
<button style="width:50%" ng-click="geradorFrequenciaSonoraCtrlObj.parar()">Parar</button>
</section>
Raw
ManipulacaoCanvas\Index.cshtml
@{
Layout = null;
}
<section ng-controller="ManipulacaoCanvasCtrl">
ponto 1
<input ng-model="manipulacaoCanvasCtrlObj.posicaovertice.xp1" type="number" ng-change="manipulacaoCanvasCtrlObj.executamutacaodeimagem()" /> <input ng-model="manipulacaoCanvasCtrlObj.posicaovertice.yp1" type="number" ng-change="manipulacaoCanvasCtrlObj.executamutacaodeimagem()" />
<br />
ponto 2
<input ng-model="manipulacaoCanvasCtrlObj.posicaovertice.xp2" type="number" ng-change="manipulacaoCanvasCtrlObj.executamutacaodeimagem()" /> <input ng-model="manipulacaoCanvasCtrlObj.posicaovertice.yp2" type="number" ng-change="manipulacaoCanvasCtrlObj.executamutacaodeimagem()" />
<br />
ponto 3
<input ng-model="manipulacaoCanvasCtrlObj.posicaovertice.xp3" type="number" /> <input ng-model="manipulacaoCanvasCtrlObj.posicaovertice.yp3" type="number" />
<br />
<canvas width="600" height="600" id="imaginacao" ng-mousedown="manipulacaoCanvasCtrlObj.funcoes.capturaPosicaoDoClick(event)" accesskey="S"></canvas>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment