Muss ich bei einer HTML Box bzw. bei einem <iframe> irgendwas beachten auf dem PI
Ich habe nämlich ein Problem! ich möchte eine PHP Datei mit JavaScript Anzeigen lassen! Auf einem Windows System funktioniert es Hervorragend! Aber auf dem Pi wird ein Bild nicht anzeigt was in der JS angesprochen wird!
Verstehe nicht ganz warum!?
Hier mal der Code!
Das Bild liegt in webfront/user/imagepicker/images/pic1.jpg
Das JS Script in webfront/user/imagepicker/js/script.js
var canvas;
var ctx;
var timerActive = false;
var pixelR = 0;
var pixelG = 0;
var pixelB = 0;
var pixelRold = 0;
var pixelGold = 0;
var pixelBold = 0;
var repeats = 0;
var skipSend = false;
var images = [ // predefined array of used images
'images/pic1.jpg',
];
var iActiveImage = 0;
$(function(){
// drawing active image
var image = new Image();
image.onload = function () {
ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas
}
image.src = images[iActiveImage];
idDeviceID = document.getElementById("idDeviceID").innerHTML;
idNet = document.getElementById("idNet").innerHTML;
idchromoscript = document.getElementById("idchromoscript").innerHTML;
idrgbfader = document.getElementById("idrgbfader").innerHTML;
iddimmer = document.getElementById("iddimmer").innerHTML;
idprogramm = document.getElementById("idprogramm").innerHTML;
festefarben = document.getElementById("festefarben").innerHTML;
idRGBAuto = document.getElementById("idRGBAutomatikFarbWert").innerHTML;
idRGBManuell = document.getElementById("idRGBManuellFarbWert").innerHTML;
idProfilname = document.getElementById("idProfilname").innerHTML;
// creating canvas object
canvas = document.getElementById('panel');
ctx = canvas.getContext('2d');
$('#panel').mousemove(function(e) { // mouse move handler
var canvasOffset = $(canvas).offset();
var canvasX = Math.floor(e.pageX - canvasOffset.left);
var canvasY = Math.floor(e.pageY - canvasOffset.top);
var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")";
$('#preview').css('backgroundColor', pixelColor);
pixelR = pixel[0];
pixelG = pixel[1];
pixelB = pixel[2];
});
$('#panel').click(function(e) { // mouse click handler
var canvasOffset = $(canvas).offset();
var canvasX = Math.floor(e.pageX - canvasOffset.left);
var canvasY = Math.floor(e.pageY - canvasOffset.top);
var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
pixelR = pixel[0];
pixelG = pixel[1];
pixelB = pixel[2];
if(timerActive) {
timerActive = false;
$(this).stopTime('updatergb');
} else {
timerActive = true;
repeats = 0;
$(this).everyTime(250,'updatergb',function(){
if(pixelR == pixelRold && pixelG == pixelGold && pixelB == pixelBold){
repeats++;
skipThis = true;
} else {
repeats = 0;
pixelRold = pixelR;
pixelGold = pixelG;
pixelBold = pixelB;
}
if(repeats <= 5) {
if(!skipThis) {
xhReq = new XMLHttpRequest;
xhReq.open("POST","ImageColorPicker-receive.php",true);
xhReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
action = "r=" + pixelR;
action += "&g=" + pixelG;
action += "&b=" + pixelB;
action += "&idrgbfader=" + idrgbfader;
action += "&idchromoscript=" + idchromoscript;
action += "&iddimmer=" + iddimmer;
action += "&idprogramm=" + idprogramm;
action += "&idFesteFarben=" + festefarben;
action += "&idRGBAutomatikFarbWert=" + idRGBAuto;
action += "&idRGBManuellFarbWert=" + idRGBManuell;
action += "&idDeviceID=" + idDeviceID;
action += "&idNet=" + idNet;
action += "&idProfilname=" + idProfilname;
xhReq.send(action);
skipThis = false;
} else {
skipThis = false;
}
} else {
repeats = 0;
timerActive = false;
skipThis = false;
$(this).stopTime('updatergb');
}
});
}
});
});
Der Reste funktioniert super!! Muss ich den Pfad irgendwie angepassen? Muss der auf einem Linux System anders geschrieben werden?
Ich habe auch schon …/images/pic1.jpg Probiert
