Cat Picture not working?

Giackgamba commented 8 years ago

I followed the exercise strictly, more than one time, but I can't get to get it working. I have the 4 correct files, and indeed elementary-electron verify completes with a SUCCES. But when i execute electron app.js a blank window appear, if I reload the page (Ctrl+R) i can briefly see the 'Hello World' text, then it disapper again.

I tried it on different directory, different machines, different OS's, I can't seem to find a solution, nor an error report (the console hangs as soon as I reload the page). Am I doing something wrong or is something else going on?

app.js

var electron = require('electron')

electron.app.on('ready', function() {
    var mainWindow = new electron.BrowserWindow({width: 600, height:800})
    mainWindow.loadURL('file://' + __dirname + '/index.html')
})

index.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h1>Hello World</h1>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

index.js require('cat-picture')

saasmath commented 8 years ago

I am having the same problem. I have tried with both Windows and Mac, using node v 5.10.1, lts (v4.4.2), and 0.10.28.

The problem seems to happen on line 3 of index.js in module cat-picture when a new Buffer is trying to be made. A much smaller picture of a cat (3K) worked, as does commenting out the new Buffer and changing the src attribute of the image to a URL of another cat on line 6 of the same file.

karuppiah7890 commented 8 years ago

Guys, you did put the semicolons at the end of each statement, right ?

martinheidegger commented 8 years ago

I just published a new version of elementary-electron that should have fixed any cat-picture issue (or at least gives better error messages. Could you reinstall it with npm i elementary-electron-g and see if it works now?

KeithKiely commented 8 years ago

I'm doing the hello world part of this as well and the browser doesn't open for me at all. I'm using Ubuntu, any recommendations would be great.

ewnd9 commented 8 years ago

@KeithKiely check your electron-prebuilt version, 1.2.4 may be broken https://github.com/electron-userland/electron-prebuilt/issues/156

KeithKiely commented 8 years ago

@ewnd9 thanks for the reply. I have and it didn't help unfortunately. Not sure what else I can do. Also the npm start command returns missing start: script if that's anything to do with it.

martinheidegger commented 8 years ago

@KeithKiely has that issue to do with cat-picture? Could you please give information on OS, Node, Npm version in a new issue?

KeithKiely commented 8 years ago

No the browser won't open on the helloWorld lesson either. Ubuntu 16.04 Node version v6.2.2 npm version 3.10.2. I'll open a new issue now.

justice47 commented 5 years ago

@martinheidegger I am having the same problem with cat image import. BTW, I'm not able to import image to the app any other way (via tag for example). Any updates on this one?

lporras commented 5 years ago

We had the same error, and it was because a problem with using require statements in electron version 5.

we found a fix in this post: https://stackoverflow.com/questions/44391448/electron-require-is-not-defined

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true
        }
    });
});

lporras commented 5 years ago

actually there is an open PR to add nodeIntegration: true to the example of elementary-electron, but it is not merged yet. PR #34

EngineerDogIta commented 3 years ago

We had the same error, and it was because a problem with using require statements in electron version 5.

we found a fix in this post: https://stackoverflow.com/questions/44391448/electron-require-is-not-defined
app.on('ready', () => {
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true
        }
    });
});

This worked for me! A question, ~~Is it normal that the cat image it's wider than the window?~~ Nevermind the image fits in the window with the "Cat Annotation" exercise

BakunawaWorld commented 2 years ago

Just in case somebody might need it!

index.js

require('cat-picture')

app.js

const electron = require("electron");

const { app, BrowserWindow } = electron;

app.on("ready", () => {
  const mainWindow = new BrowserWindow({
    width: 1000,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true,
    },
  });
  mainWindow.loadURL(`file://${__dirname}/index.html`);
});

index.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hello World</h1>
<script type="module" src="index.js"></script>
</body>
</html>

max-mapper / elementary-electron

Cat Picture not working? #3