Github widget preview file reference to config.js

  • 2
  • Question
  • Updated 3 years ago
  • Answered
Hi,

In the Github repository for the widget preview at https://github.com/Rise-Vision/widget-preview there is a reference within index.html to:
<script type="text/javascript" src="config/config.js"></script>

This config.js file doesn't appear to exist either in that directory or anywhere else in the repository.

Is this file built as part of the build or is it just missing?

regards,
Jim Coyle
Photo of Jim Coyle

Jim Coyle, Champion

  • 1,494 Points 1k badge 2x thumb
  • puzzled

Posted 3 years ago

  • 2
Photo of Ashleigh

Ashleigh

  • 3,740 Points 3k badge 2x thumb
Hi Jim,

I *think* it is part of the build here:

gulp.task('config', function() { return gulp.src(['./web/config/' + env + '.js']) .pipe(rename('config.js')) .pipe(gulp.dest('./web/config'));});

But we will forward this to one of the developers who have worked on this repo. Thanks!
Photo of Jim Coyle

Jim Coyle, Champion

  • 1,494 Points 1k badge 2x thumb
Hi Ashleigh,

Many thanks for your quick response.

This code snippet you provide looks to be where the file originates.

Had me well puzzled but I think you have explained it now.

regards,
Jim Coyle
Photo of Jim Coyle

Jim Coyle, Champion

  • 1,494 Points 1k badge 2x thumb
Hi Ashleigh,

The reason I am inquiring about this config.js file is I have been trying to set up a development environment that will let me investigate the formation of widgets etc.

I have set up WebStorm as the IDE and worked my way through getting the widget-preview installed from Github and all the dependencies etc in place. I thought I would try this repository first as I had downloaded the working files and knew what to expect when it ran successfully.

I was able to run a build with Gulp but the results are not at all what I expected.

This screen shot shows the build files and the screen that appears when the executable is run.




The file structure from the build looks correct although I am not so sure about the file sizes.

Looking at some online help this nw.blank screen seems to have popped up a lot and the only solution I see is to use a package called flatten-packages as apparently Windows restricts path lengths of file references. The source was found here:
https://github.com/nwjs/nw-builder/issues/107

I am not confident this is the answer so I thought perhaps someone on here had experienced this already and could advise..

There are no errors shown in the build process. I am running Windows 10 on a 64bit machine with loads of resources. Node.js is version  v.5.5.0

regards,
Jim Coyle
Photo of Stuart Lees

Stuart Lees, Employee

  • 586 Points 500 badge 2x thumb
Hi Jim,

As mentioned in the README of the Github repo, the build of widget-preview only works on Linux and OS X. 

However, if you're just looking to use widget-preview to test the development of a Widget locally, than you can absolutely use it on Windows. Look to the "Download" section on the repo and download your appropriate Windows version. Unzip the package and run the executable named "rv-widget-dev-app". The application will look as so - http://www.screencast.com/t/iQ23E3A1VH . 

Thanks
Photo of Jim Coyle

Jim Coyle, Champion

  • 1,494 Points 1k badge 2x thumb
Hi Stuart,

Many thanks for the clarification. I had the looked at the Readme but misconstrued the reference to Linux/OSx.

No matter and it hasn't been a complete waste as I have learned a lot in the process of setting up the IDE and functions which I'll put to good use.

regards,
Jim Coyle
Photo of Stephen Garrett

Stephen Garrett, Champion

  • 2,674 Points 2k badge 2x thumb
Hey Jim,

I made these videos a while back about building your first widget...

https://www.youtube.com/watch?v=ux5g1IUVg-E&list=PLSaSzeomDTQQkHG3588vhdKpJgPRjWVvp

I still haven't finished the series, and I do things a little differently now in my current workflow. They may help you get started, though.
Photo of Jim Coyle

Jim Coyle, Champion

  • 1,494 Points 1k badge 2x thumb
Hi Stephen,

Hehe - I am way ahead of you and have been looking at your video's for a few days now. Pretty good and very helpful to amateurs like myself.

As we speak I am configuring your hello-world in the WebStorm IDE :)

I would put money on there being a sizeable community of lurking developers in this forum who would like some help with widgets and I am pleased to see the other live post regarding end-to-end examples.

regards,
Jim Coyle
Photo of Stephen Garrett

Stephen Garrett, Champion

  • 2,674 Points 2k badge 2x thumb
Haha Awesome Jim!

I always wonder if anyone has ever actually watched those. Let me know if there is anything that isn't making sense, and I can try to help you figure it out. 
Photo of Nidal HADDAD

Nidal HADDAD

  • 418 Points 250 badge 2x thumb
hello stephen, i also watched your videos, and it was very explanatory.  actually  i had a question about setting another extra param just like "message" to be my background image for the widget.  
thanks again for your help.
Photo of Stephen Garrett

Stephen Garrett, Champion

  • 2,674 Points 2k badge 2x thumb
Hey Nidal,

That info is going to be in the last video if I can ever find time to make it, but the easiest way would be to copy the text input in the settings.html file for the message and duplicate it. Then, you would rename the variable in the "ng-model" value...

    <h4>Background Image</h4> <input type="text" ng- model="settings.additionalParams.backgroundImage"></input>

Then, you can add a default value for the background image if its not set in the settings form in "ctr-hello-world-settings.js....

.value("defaultSettings", { "params": {}, "additionalParams": { "message": "","backgroundImage":"/home/web/Pictures/background.jpg" } });

Then, on the widget side, you can access that value by calling "params.backgroundImage"