[ZSPIN Project] ZTheme

Software that relates to zspin.

Modérateurs : vik, Modérateurs

Avatar de l’utilisateur
Lorith
Connaisseur
Connaisseur
Messages : 265
Inscription : 01 oct. 2014 - 01:00
Localisation : PAU

Re: Ztheme - Tentative de dev

Message par Lorith » 11 août 2015 - 22:58

Je suis en train de potasser le node-web kit moi aussi, c'est franchement intéressant et il y a des tutos partouts en plus.
Concernant le drag'n drop, j'avais suivi ce tuto video pour apprendre : http://www.grafikart.fr/tutoriels/nodej ... webkit-479" onclick="window.open(this.href);return false; je pense qu'il est possible de s'en inspirer d'ailleurs (pas mal sublimetext comme environnement de développement)
J'apprécie beaucoup le côté portable et light de node-webkit, pour quelqu'un qui en programme qu'en .net avec Visual Studio ça fait bizarre ;)

Avatar de l’utilisateur
Reaver7
Virtuose
Virtuose
Messages : 1390
Inscription : 02 sept. 2014 - 01:00
A remercié : 7 fois
A été remercié : 186 fois

Re: Ztheme - Tentative de dev

Message par Reaver7 » 11 août 2015 - 23:27

J'ai un ami qui n'y connait rien a l'arcade mais qui serait tenté de vous filer un coup de main. Il a fait l'école des gobelins et aujourd'hui il travaille en tant que prof de dev'.
Il peut envoyer un petit message a un admin pour transmettre son CV?

Avatar de l’utilisateur
tetrafred
Gourou
Gourou
Messages : 930
Inscription : 10 oct. 2013 - 01:00
Localisation : La Mothe Achard
A remercié : 71 fois
A été remercié : 64 fois

Re: Ztheme - Tentative de dev

Message par tetrafred » 12 août 2015 - 01:08

Voilà une initiative qu'elle est bonne ;)

Avatar de l’utilisateur
moustic
Administrateur
Administrateur
Messages : 6940
Inscription : 23 juil. 2014 - 01:00
Localisation : Saint Jean Rohrbach
A remercié : 333 fois
A été remercié : 677 fois

Re: Ztheme - Tentative de dev

Message par moustic » 12 août 2015 - 06:43

Reaver7 a écrit :J'ai un ami qui n'y connait rien a l'arcade mais qui serait tenté de vous filer un coup de main. Il a fait l'école des gobelins et aujourd'hui il travaille en tant que prof de dev'.
Il peut envoyer un petit message a un admin pour transmettre son CV?

Bien sur Reaver ou il s'inscrit sur le fofo et va poster dans la rubrique hfs recrute ;)
Image

Avatar de l’utilisateur
Meth
Administrateur
Administrateur
Messages : 4541
Inscription : 19 oct. 2012 - 01:00
Localisation : Conflans-en-Jarnisy
A remercié : 989 fois
A été remercié : 2179 fois
Contact :

Re: Ztheme - Tentative de dev

Message par Meth » 12 août 2015 - 09:00

Avec grand plaisir @Reaver7

Nous n'avons jamais assez de développeur dans une période de révolution comme celle que nous traversons actuellement. Pas besoin de CV non plus nous ne sommes pas une entreprise :D.

Mais qu'il se rapproche avec grand plaisir.

Avatar de l’utilisateur
aruka
Passionné
Passionné
Messages : 152
Inscription : 02 oct. 2013 - 01:00
A été remercié : 2 fois

Re: Ztheme - Tentative de dev

Message par aruka » 12 août 2015 - 11:44

himura95 a écrit :J'essaye de commenter un max pour que les éventuels participants puisse s'y retrouver ;)

Edit : Aruka, tu connais Fabric.js ? je galère un peu à l'utiliser ^^
Je connaissais de nom mais j'ai jamais mis les mains dedans, ca à l'air pas mal du tout ! j'ai trouver ca aussi
http://greensock.com/gsap" onclick="window.open(this.href);return false;

Une lib js spécialisé dans les animations, avec un système de timeline c'est bien expliqué ici http://www.grafikart.fr/tutoriels/javas ... atform-415" onclick="window.open(this.href);return false;

On pourrais l'implémenté également si fabric.js ne remplis pas toute les missions.

Bon ben y'a du boulot, entre git, node.js, fabric.js, gsap.js et animate.css ca promet des nuits blanches !

Himura je me suis inscris sur GIT, du coup je sais pas encore comment contribué, j'ai vu que je pouvais comit mais j'imagine que tu devra validé chacune de nos actions, je sais pas du tout comment ca se passe.

Avatar de l’utilisateur
himura95
Maître
Maître
Messages : 3177
Inscription : 05 mars 2015 - 20:13
Localisation : Pontoise
A remercié : 911 fois
A été remercié : 562 fois

Re: Ztheme - Tentative de dev

Message par himura95 » 12 août 2015 - 11:57

Oui greensock j'ai vu mais fabricjs me semble suffisant pour ce que j'ai en tête (attention je peux me tromper ^^) car il permet de déplacer les images, les redimensionner et les faire tourner à la souris et gère également l'opacité et les animations. Il permet enfin d'exporter/importer le canvas en json.

Pour git c'est ma première fois aussi alors je ne sait pas si il faut que je valide les commit, je vais regarder...

Node-webkit me parait très bien dans ce cadre (multi os, webkit comme zspin, etc..) mais j'ai du mal à voir comment mettre tout çà en place, je participerai avec plaisir quand il y aura une base de travail.

Mais je suis plein d'espoir quand je vois ce que j'arrive à faire en n'y connaissant rien du tout, les vrais dev ne devraient pas avoir de mal à nous faire un outil simple pour tous mais puissant ;)
Image

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Ztheme - Tentative de dev

Message par camarade35 » 12 août 2015 - 12:35

Franchement Himura et aruka, je vois que vous maitrisez pas mal, pour ma part, je pagaie mais grave, je comprends pas la moitié des trucs (canvas, container, etc). Pour le fonctionnement j'ai tout dans le crâne mais pas moyen de faire une recherche qui aboutie à ce que j'ai dans le crâne (aaahhh, quand on parle pas anglais, ça aide pas vraiment ^^).
Bref, compte tenu que j'ai compris dans l'ensemble ce que nous souhaitons faire, voici en gros ce que je pense être les besoins de l'application.

Partir sur la base d'un fichier html avec les librairies inclues dans le log (mais ça vous avez déjà le truc, + que moi)
Les éléments qu'il nous faudrait impérativement :

- la base du html doit être en 100%/100% et le "overflow: hidden;" doit être inclus dans le code par défaut.
- Le background en 100%/100% et une balise dédiée (si j'emploie des termes non-appropriés, corrigez-moi)
- L'ajout médias devrez, à mon sens, se faire en automatique et que leur id soit renommée en auto (Artwork1, Artwork2, Artwork3, etc) et générer une liste afin de les sélectionner dans celle-ci.
- De plus, il faudrait qu'à l'import, les médias soient automatiquement transformer en pourcentage pour leur taille afin d'éviter des problèmes (widht en % et height en auto)
- Les effets applicables aux éléments, comme sélection de l'artwork dans la liste et application des effets et pourquoi un bouton édité pour les plus courageux ^^
- Les delay/time : case cochable avec une valeur que l'on entrer à la main( préciser seconde)
- Concernant la position des artwork, si j'ai bien compris, c'est la référence "Z", de ce fait, on peu encore partir sur une liste.
- Une option pour savoir si l'artwork est inclus dans le zip généré à la fin

Voilà pour moi, je vous colle un code pour essayé de mieux représenter ma vision (attention, j'ai des idées mais pas réussi à en appliquer une :P)
explication via code
<meta name="generator" content="Google Web Designer 1.3.2.0521">
<link rel="stylesheet" href="assets/animate.css"> */insertion auto dans la base du html
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
*/insertion auto dans la base du html
}
body {
-webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
background-image: none;
}
#container {
position: absolute;
width: 40%;
bottom: 1%;
left: 10%;
}
.gwd-img-ws2v {
position: absolute;
bottom: 0%;
width: 100%;
z-index: 4; */modifiable par liste
}
.gwd-img-04o0 {
position: absolute;
bottom: 0%;
width: 100%;
z-index: 2; */modifiable par liste
}
.gwd-img-4sy6 {
position: relative;
width: 42%;
left: 15.25%;
z-index: 3; */modifiable par liste
margin-bottom: 300%;
}
body .gwd-gen-fzongwdanimation {
-webkit-animation: gwd-gen-fzongwdanimation_gwd-keyframes 2s linear 0s 1 alternate forwards;
}
@-webkit-keyframes gwd-gen-fzongwdanimation_gwd-keyframes {
0% {
margin-bottom: 300%;
}
70% {
margin-bottom: 33%;
}
100% {
margin-bottom: 27%;
}
}
.gwd-body {
background-color: transparent;
}
.gwd-img-o4rq {
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
}
#video {
position: absolute;
width: 35%;
bottom: 85%;
left: 5%;
-webkit-transform-style: preserve-3d;
-webkit-transform: matrix3d(0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1);
opacity: 0;
}
.gwd-img-01bj {
position: absolute;
width: 100%;
left: 7%;
}
.gwd-video-yqo9 {
position: absolute;
width: 100%;
left: 7%;
}
.gwd-img-35qa {
position: absolute;
width: 35%;
bottom: 35%;
left: 60%;
}

@-webkit-keyframes gwd-gen-70nagwdanimation_gwd-keyframes {
0% {
-webkit-transform: matrix3d(0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1);
opacity: 0;
-webkit-animation-timing-function: linear;
}
100% {
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 1;
-webkit-animation-timing-function: linear;
}
}
.gwd-body .gwd-gen-70nagwdanimation {
-webkit-animation: gwd-gen-70nagwdanimation_gwd-keyframes 0.6s linear 1.6s 1 normal forwards;
}
.gwd-img-b2qh {
position: absolute;
bottom: 0%;
width: 100%;
height: auto;
left: 0%;
z-index: 5; */insertion via liste
opacity: 0;
}
@-webkit-keyframes gwd-gen-vdkygwdanimation_gwd-keyframes {
0% {
opacity: 0;
-webkit-animation-timing-function: linear;
}
100% {
opacity: 1;
-webkit-animation-timing-function: linear;
}
}
.gwd-body .gwd-gen-vdkygwdanimation {
-webkit-animation: gwd-gen-vdkygwdanimation_gwd-keyframes 1.6s linear 0s 1 normal forwards;
}
.gwd-img-m1ae {
position: absolute;
top: 1%;
left: 10%;
width: 30%;
height: auto;
}
</style>
</head>

<body class="gwd-body">
<img src="assets/Background.png" class="gwd-img-o4rq" id="background">
<div id="container">
<img src="assets/console_vide.png" class="gwd-img-ws2v" style="" id="console">
<img src="assets/console_pleine.png" class="gwd-img-04o0" style="" id="console">
<img src="assets/3 Ninjas Kick Back (USA).png" class="gwd-img-4sy6 gwd-gen-fzongwdanimation" id="cart">
</div>
<div id="video" class="gwd-gen-70nagwdanimation">
<video src="assets/3 Ninjas Kick Back (USA).mp4" class="gwd-video-yqo9" loop="loop" autoplay="autoplay"></video>
<img src="assets/Video.png" class="gwd-img-01bj">
</div>
<img src="assets/3 Ninjas Kick Back (USA)_1.png" class="gwd-img-35qa fadeInRight animated*/modifiable et insérable par liste" id="boite">
<img src="assets/3 Ninjas Kick Back (USA)_2.png" class="gwd-img-b2qh gwd-gen-vdkygwdanimation" id="info">
<img src="assets/Super_Nintendo_Entertainment_System_Glossy.png" class="gwd-img-m1ae" id="logo">
</body>

</html>
Alors, je sais que c'est réveur et j'image le taf, je vous promets, je teste ou node mais je galère grave.
Voilà, je pense qu'il faudrait que l'on soit raccord sur le fonctionnement voulu sinon on va partir dans tous les sens ^^

Suggestions, remarques, aide, tout est le bienvenu, messieurs à vos clavier ;)

edit : je vais tester ceci : http://brackets.io/" onclick="window.open(this.href);return false; (très bon éditeur HTML,CSS, JS, comme sublime text mais gratuit ;) )
Dernière modification par camarade35 le 12 août 2015 - 14:42, modifié 1 fois.
préservation du patrimoine vidéoludique et de notre planète

Avatar de l’utilisateur
LaDite
Virtuose
Virtuose
Messages : 1051
Inscription : 04 juil. 2013 - 01:00
Localisation : Belgique
A remercié : 198 fois
A été remercié : 110 fois

Re: Ztheme - Tentative de dev

Message par LaDite » 12 août 2015 - 13:54

Chapeau les gars pour votre projet

Et merci car je ne me sentais pas capable d utiliser design Web (j ai un doute sur le nom :lol: ) et ce malgré le très bon tuto disponible sur le forum

Bonne continuation

Avatar de l’utilisateur
Inquisitom
Connaisseur
Connaisseur
Messages : 433
Inscription : 10 mai 2013 - 01:00
Localisation : Marennes
A remercié : 46 fois
A été remercié : 63 fois

Re: Ztheme - Tentative de dev

Message par Inquisitom » 12 août 2015 - 15:08

@himura95 : pkoi C#, t'avais des connaissances de base dedans ?

ps: essaye de bien "pusher" sur GitHub si tu fais des modifs stp, je suis ce projet de près ;)

Avatar de l’utilisateur
himura95
Maître
Maître
Messages : 3177
Inscription : 05 mars 2015 - 20:13
Localisation : Pontoise
A remercié : 911 fois
A été remercié : 562 fois

Re: Ztheme - Tentative de dev

Message par himura95 » 12 août 2015 - 17:35

Alors C# ... au hasard ^^ j'ai visual studio qui est sur mon poste au boulot (un miracle vu que je ne peux même pas installé google web designer...) et j'ai pris le c# un peu en faisant plouf plouf :oops:

Comme je l'ai dit, je ne suis pas du tout développeur. D'ailleurs ça se voit au premier coup d’œil sur le "code" :lol:

Pour github c'est pareil, j'avais déjà téléchargé dessus mais sinon j'y connait rien alors je découvre ^^

@Cam : Oui j'aime bien le cahier des charges que tu as fait (et je m'y retrouve presque à part que mon fichier html a pas vraiment la même tête ^^) mais après pour le mettre en oeuvre c'est une autre histoire (en tout cas à mon niveau ;) )
Image

Avatar de l’utilisateur
Reaver7
Virtuose
Virtuose
Messages : 1390
Inscription : 02 sept. 2014 - 01:00
A remercié : 7 fois
A été remercié : 186 fois

Re: Ztheme - Tentative de dev

Message par Reaver7 » 14 août 2015 - 19:52

metheore a écrit :Avec grand plaisir @Reaver7

Nous n'avons jamais assez de développeur dans une période de révolution comme celle que nous traversons actuellement. Pas besoin de CV non plus nous ne sommes pas une entreprise :D.

Mais qu'il se rapproche avec grand plaisir.
Il a été mis au parfum, le projet l'intéresse beaucoup. Il passe vous faire un coucou a son retour de vacances!

Avatar de l’utilisateur
aruka
Passionné
Passionné
Messages : 152
Inscription : 02 oct. 2013 - 01:00
A été remercié : 2 fois

Re: Ztheme - Tentative de dev

Message par aruka » 15 août 2015 - 13:37

Merci reaver7 ca sera pas du luxe ! Hier soir j'ai passé 2 bonnes heures sur visual studio à essayer de comprendre la logique du projet, c'est assez lisible même si y'a pas mal de zone d'ombre pour moi, comme par exemple comment communiqué du C vers le html en passant par le JS , qui servira a ajouté tel animation a tel image par exemple.
Avec du js seulement, un

Code : Tout sélectionner

$("button").click(function(){
    $("canvas").addClass("bounce");
});
et c'etais plié. Mais comment l’interprété en C la ca va etre un challenge ^^

j'ai vu ca en suivant un tuto visual basic https://msdn.microsoft.com/fr-fr/library/hh334522.aspx" onclick="window.open(this.href);return false;

Ce pavé à attiré mon attention
JavaScript est un langage de premier ordre dans Visual Studio. Vous pouvez utiliser la plupart ou toutes les aides standard de modification (extraits de code, IntelliSense, etc.) lorsque vous écrivez du code JavaScript dans l'IDE de Visual Studio. Vous pouvez écrire du code JavaScript pour de nombreux types d'applications et services.
Pour obtenir la documentation relative aux informations de référence sur le langage JavaScript, consultez JavaScript.
Des versions ou des extensions spécifiques de Visual Studio peuvent être nécessaires pour développer des types d'applications et des services particuliers en HTML et JavaScript. La liste suivante comporte des liens permettant d'accéder à des informations complémentaires.
Alors vic si tu passe par hasard sur ce sujet, à ton avis aurait-on besoin d'Apache Cordova ?
Use Visual Studio and Apache Cordova™ to easily build hybrid apps that run on iOS, Android, Windows, and Windows Phone using a single project based on HTML and JavaScript. (Note: You must have Visual Studio 2013 Update 5 installed.)
Bon faut prendre le temps de dompté le morceau mais une fois environnement et les règles de bases digérés ca devrai grave le faire

@himura95 dimanche si je rentre pas trop tard j'essayerais de comit les quelques truc que j'ai bricolé sur GIT, l'ajout de la lib CSS pour les animations, légère modif de l'arbo, la modifications du template html de base etc... prochain gros morceau, au clic sur un bouton, ajout de l'animation ! WIP ;)

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Ztheme - Tentative de dev

Message par camarade35 » 15 août 2015 - 15:42

Ca avance alors ? :)
De mon côté, ça y est je comprends le node (enfin presque) et la librairie fabric.js est vraiment bien, merci himura pour l'info.
Je sais que je vais paraitre chiant mais pourquoi ne pas se tourner vers une solution multi-OS directement, si aruka, en plus, tu maitrise le html/js/css, tu serais aux anges et pourrait nous apporter compréhension et aide. (node ne fait que transformer la page web en application finalement)
Bref, pour le moment, j'ai mon canvas qui est là avec bouton d'ajout d'image (je prends le code pour l'édition d'animation pour tester).
Reste à créer la liste des canvas créés pour les gérer rapidement en object.

En esperant que vous alliez plus vite que moi, himura, hâte de voir le premier jet évolué ;)
préservation du patrimoine vidéoludique et de notre planète

Avatar de l’utilisateur
aruka
Passionné
Passionné
Messages : 152
Inscription : 02 oct. 2013 - 01:00
A été remercié : 2 fois

Re: Ztheme - Tentative de dev

Message par aruka » 15 août 2015 - 17:51

Ah du coup je comprends mieux ton message camarade, node webkit nous éviterait le passage par virtual studio et le C. Perso sa me va ! Les langages web me parlent bien plus que les laguages soft. +1 même si ce que propose himura pour le moment semble être déjà quelque chose d'aboutis. Faut peser les pour et les contre ensemble et bosser sur le même projet surtout

Envoyé de mon SM-G900F en utilisant Tapatalk

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Ztheme - Tentative de dev

Message par camarade35 » 15 août 2015 - 18:17

Si j'ai bien compris, himura travaille aussi avec du js et de l'html, si ça se trouve, ça sera vite (attention grand mot) transformable. --> himura, si je dis des conn***ies, hésites-pas ;)

Je résume mon mp pour ceux qui s'interesse à node et pour comprendre, dsl himura de polluer le post comme ça :oops:

Donc node (NWJS) va "en gros" transformer un site web en application, ni plus, ni moins mais avec (je sais pas trop) une possibilité d'utiliser les API local :shock: :?:

Bref, vous télécharger ici le fichier qui vous correspond (c'est écrit en petit sous le gros titre) : http://nwjs.io/" onclick="window.open(this.href);return false;

- Vous décompressez l'archive
- Vous créez un fichier qui s'appelle "package.json" que vous collez dans le dossier décompressé
dedans il faut un minimum d'info dont voici un exemple type (frame étant la barre avec : minimiser, agrandir et la croix pour fermer / et toolbar la barre d'adresse avec les boutons de bases, les trois traits ouvre la console)

Code : Tout sélectionner

{
  "main": "index.html",
  "name": "nw-demo",
  "description": "demo app of node-webkit",
  "version": "0.1.0",
  "keywords": [ "demo", "node-webkit" ],
  "window": {
    "title": "node-webkit demo",
    "icon": "link.png",
    "toolbar": true,
    "frame": false,
    "width": 800,
    "height": 500,
    "position": "mouse",
    "min_width": 400,
    "min_height": 200,
    "max_width": 800,
    "max_height": 600
  },
  "webkit": {
    "plugin": true
  }
}
Vous voyez aussi que l'on peut gérer la taille de la fenêtre, il y a une option "resizable": true ou false si vous voulez empêcher le redimensionnement.

Voilà, tout est prêt, et bien il suffit de coller son site avec la page d'index, les dossiers auxquels vous faites appel, les JS et autre CSSà côté de l'exe dans le dossier.
Vous lancer nw.exe et c'est tout.

En passant, petit logiciel bien sympa pour faire tout ça
Il permet d'ouvrir un dossier complet pour travailler sur tous les éléments, d'avoir un aperçu dans un navigateur en un clique, y'a aussi un truc avec les psd photoshop apparemment...et surtout un logiciel gratuit : http://brackets.io/" onclick="window.open(this.href);return false;
préservation du patrimoine vidéoludique et de notre planète

Avatar de l’utilisateur
himura95
Maître
Maître
Messages : 3177
Inscription : 05 mars 2015 - 20:13
Localisation : Pontoise
A remercié : 911 fois
A été remercié : 562 fois

Re: Ztheme - Tentative de dev

Message par himura95 » 16 août 2015 - 22:09

Alors j'ai pas eu le temps d'avancer sur le sujet ce Weekend mais ce que je viens de lire me plait, çà avance ^^

Je vais regarder nwjs demain avec ce que Cam a mis pour voir si j'arrive à faire quelque chose surtout que coté c# je galère pas mal...

edit : @camarade35 : tu pourrais m'envoyer le template que tu as posté un peu plus tôt ? Je test activement NW mais j'arrive même pas à faire un bouton qui permet d'importer une image :oops:

edit 2 : Bon j'arrive à importer des images via bouton/drag&drop et à les manipuler avec fabric.js dans le canvas :D
Image

Avatar de l’utilisateur
NutsreturN2
Modérateur
Modérateur
Messages : 2811
Inscription : 19 oct. 2012 - 01:00
Localisation : BAGES 66670
A remercié : 105 fois
A été remercié : 80 fois

Re: Ztheme - Tentative de dev

Message par NutsreturN2 » 25 août 2015 - 10:36

Petit UP ?

Avatar de l’utilisateur
himura95
Maître
Maître
Messages : 3177
Inscription : 05 mars 2015 - 20:13
Localisation : Pontoise
A remercié : 911 fois
A été remercié : 562 fois

Re: Ztheme - Tentative de dev

Message par himura95 » 25 août 2015 - 11:53

Volontier ;)

Il faut que je mette le premier post à jour mais en gros :

Image

- Passage de Visual studio en C# à Node-webkit (donc html+css+js)
- Importation d’éléments par le bouton ou en drag&drop sur le bouton (nb illimité) : OK
- Possibilité de les redimensionner, faire pivoter : OK
- Design de l'appli : à faire :lol:

Il faut que je mette le github à jour (demain soir si je n'oubli pas ma clé usb pour ramener la version que je fait au taff ^^)

Pour les plus impatients :
package.json
{
"name": "Ztheme",
"version": "0.1.0",
"description": "Un outil de création de thèmes pour Z-spin",
"main": "./html/index.html",
"window": {
"title": "Ztheme",
"resizable": false,
"width": 1300,
"height": 600,
"toolbar": false,
"show": true,
"icon": "./img/logo.png"
},
"dependencies": {
},
"license": "HFS"
}
index.html
<!DOCTYPE html>
<html lang="fr">

<link rel="stylesheet" href="../css/screen.css">
<script src="../js/fabric.js"></script>
<script src="../js/jszip.js"></script>
<script src="../js/main.js"></script>
<script src="../js/FileSaver.js"></script>

<body>

<div id="zoneParametres">
<center><input class="input-file" onchange="importation()" id="my-file" type="file">
<label for="my-file" class="input-file-trigger" tabindex="0">Importer un element</label></center><BR>
Elements : <select id = "listeElements" size="3" ><option>blabla1</option><option>blabla2</option><option>blabla3</option></select></BR><BR>
Animation : <select id = "listeAnimations"></select>
</div>

<div id="zoneCanvas">
<canvas id="Canvas" width="960" height="540">
</canvas>
</div>

<div id="zoneOptions">
Delai : <input type="texte" id= "delai">
Duree : <input type="texte" id= "duree">
Opacite : <input type="range" name="opacite" min="0" max="100" value="100">
<input type="texte" id= "nomRom" value="NomDeLaRom">
<input type="button" value="Sauvegarder" onclick="alert('A faire!')">
</div>

<script>
var fs = require('fs');

<!-- Création du canvas -->
var canvas = new fabric.Canvas('Canvas');

</script>

</body>

</html>
main.js
function load() {
canvas.loadFromJSON(JSON.parse(data), function (obj) {
canvas.renderAll();
canvas.forEachObject(function (obj) {
canvas.add(obj);
});
});
}

function save() {var json_data = JSON.stringify(canvas.toDatalessJSON());
return json_data;
}
//liste des animations
window.onload = function () {
var select = document.getElementById("listeAnimations");
var options = ["bounce", "flash", "pulse", "rubberBand", "shake", "swing", "tada", "wobble", "jello", "bounceIn", "bounceInDown", "bounceInLeft", "bounceInRight", "bounceInUp", "bounceOut", "bounceOutDown", "bounceOutLeft", "bounceOutRight", "bounceOutUp", "fadeIn", "fadeInDown", "fadeInDownBig", "fadeInLeft", "fadeInLeftBig", "fadeInRight", "fadeInRightBig", "fadeInUp", "fadeInUpBig", "fadeOut", "fadeOutDown", "fadeOutDownBig", "fadeOutLeft", "fadeOutLeftBig", "fadeOutRight", "fadeOutRightBig", "fadeOutUp", "fadeOutUpBig", "flipInX", "flipInY", "flipOutX", "flipOutY", "lightSpeedIn", "lightSpeedOut", "rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight", "rotateOut", "rotateOutDownLeft", "rotateOutDownRight", "rotateOutUpLeft", "rotateOutUpRight", "hinge", "rollIn", "rollOut", "zoomIn", "zoomInDown", "zoomInLeft", "zoomInRight", "zoomInUp", "zoomOut", "zoomOutDown", "zoomOutLeft", "zoomOutRight", "zoomOutUp", "slideInDown", "slideInLeft", "slideInRight", "slideInUp", "slideOutDown", "slideOutLeft", "slideOutRight", "slideOutUp" ];
for (var i = 0; i < options.length; i++) {
var opt = options;
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
}

//fonction importation des elements
function importation() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
var source = '../img/' + file.name + '';
var destination = './media/' + file.name + '';
fs.createReadStream(file.path).pipe(fs.createWriteStream(destination));
function ajout () {
fabric.Image.fromURL('.' +destination +'', function(oImg) {canvas.add(oImg);oImg.set('selectable', true);});
}
setTimeout(ajout, 500);
}

// ajout de la classe JS à HTML pour l'importation d'elements
document.querySelector("html").classList.add('js');

// initialisation des variables pour l'importation des elements
var fileInput = document.querySelector( ".input-file" ),
button = document.querySelector( ".input-file-trigger" ),
the_return = document.querySelector(".file-return");

// action lorsque le label est cliqué (importation elements)
button.addEventListener( "click", function( event ) {
fileInput.focus();
return false;
});

//fonction pour la création du zip final
function creationZip() {
var zip = new JSZip();
zip.file("index.html", "contenuHtml");
var theme = zip.generate({type:"blob"});
saveAs(theme, "nomDeLaRom.zip");
}

screen.css
body {
background-color:#eeeeee;
margin: 0 auto;
}

/* styles du panneau gauche */
#zoneParametres {
position: absolute;
top: 10px;
left: 10px;
line-height:30px;
background-color:#eeeeee;
float:left;
clear: both;
}

#zoneCanvas {
border: 1px solid black;
position: absolute;
top: 5px;
right: 5px;
background-color:#bbbbbb;
float:right;
overflow: hidden;
}

/* styles du panneau bas */
#zoneOptions {
position: absolute;
bottom: 1px;
left: 10px;
line-height:30px;
background-color:#eeeeee;
float:right;
clear:both;
}

/* styles du boutton importer un element */
.js .input-file-trigger {
display: block;
width: 315px;
background: #39D2B4;
color: #fff;
font-size: 1.4em;
transition: all .4s;
cursor: pointer;
}
.js .input-file {
position: absolute;
top: 0; left: 0;
opacity: 0;
cursor: pointer;
}

/* quelques styles d'interactions */
.js .input-file:hover + .input-file-trigger,
.js .input-file:focus + .input-file-trigger,
.js .input-file-trigger:hover,
.js .input-file-trigger:focus {
background: #34495E;
color: #39D2B4;
}
Dernière modification par himura95 le 25 août 2015 - 12:45, modifié 1 fois.
Image

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Ztheme - Tentative de dev

Message par camarade35 » 25 août 2015 - 12:09

purée, je suis en plein travaux
<hors-sujet> <img scr="
Image
"
</hors-sujet>

Je regarde ça dans la semaine mais j'ai l’impression que ça déchire.
préservation du patrimoine vidéoludique et de notre planète

Répondre

Revenir à « Utils »